:root {
    --navy: #03255e;
    --navy-dark: #001d52;
    --gold: #bd7800;
    --gold-light: #d39a35;
    --text: #515769;
    --border: #ccd0d8;
    --light-bg: #ffffff;
    --danger: #d40000;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
}

.wholesale-page {
    min-height: 100vh;

    background:
        linear-gradient(
            rgba(255, 252, 248, 0.45),
            rgba(255, 252, 248, 0.45)
        ),
        url("../img/wholesale-bg.jpg");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.wholesale-header {
    height: 80px;
    padding: 0 5%;

    background: rgba(255, 255, 255, 0.9);

    border-bottom: 1px solid var(--gold-light);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-logo img {
    width: 209px;
    max-height: 71px;
    object-fit: contain;
}

.header-action,
.header-return {
    font-size: 15px;
    color: var(--navy);
    text-decoration: none;
}

.header-action a,
.header-return {
    color: var(--gold);
    text-decoration: none;
}

.wholesale-main {
    width: 100%;
    padding: 55px 20px;
}

.wholesale-card {
    width: min(100%, 970px);
    margin: 0 auto;

    padding: 35px 48px;

    background: rgba(255, 255, 255, 0.97);

    border-radius: 11px;

    box-shadow:
        0 5px 30px rgba(0, 0, 0, 0.13);
}

/* Heading */

.card-decoration,
.success-decoration,
.account-decoration {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: var(--gold);

    margin-bottom: 16px;
}

.card-decoration span,
.success-decoration span,
.account-decoration span {
    width: 70px;
    height: 1px;
    background: var(--gold);
}

.card-decoration i {
    font-style: normal;
}

.page-heading {
    text-align: center;
}

.page-heading h1 {
    color: var(--navy);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 39px;
    font-weight: 500;

    margin: 0 0 10px;
}

.page-heading p {
    line-height: 1.6;
    margin: 0 auto;

    font-size: 16px;
}

/* Sections */

.form-section {
    margin-top: 30px;
}

.form-section h2,
.status-section h2 {
    color: var(--navy);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 21px;
    font-weight: 500;

    margin: 0 0 25px;

    position: relative;
}

.form-section h2::after,
.status-section h2::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -9px;

    width: 34px;
    height: 2px;

    background: var(--gold);
}

/* Form */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px 36px;
}

.form-group {
    min-width: 0;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    color: var(--navy);

    font-size: 13px;
    font-weight: 600;
}

.form-group label b {
    color: var(--danger);
}

.form-group input:not([type="checkbox"]):not([type="file"]),
.form-group select {
    width: 100%;
    height: 48px;

    border: 1px solid var(--border);
    border-radius: 5px;

    padding: 0 14px;

    background: #fff;

    color: var(--navy);

    outline: 0;

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--gold);

    box-shadow:
        0 0 0 3px rgba(189, 120, 0, 0.08);
}

.input-wrap {
    position: relative;
}

.input-wrap input,
.input-wrap select {
    padding-right: 45px !important;
}

.select-wrap select {
    padding-right: 64px !important;
}

.field-icon {
    position: absolute;

    right: 14px;
    top: 50%;

    transform: translateY(-50%);

    color: #8e939c;

    pointer-events: none;
}

.select-wrap .field-icon {
    right: 38px;
}

.full-width {
    width: 100%;
    margin-bottom: 22px;
}

/* Upload */

.upload-box {
    min-height: 165px;

    border: 1px dashed var(--gold) !important;
    border-radius: 5px;

    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 8px;

    cursor: pointer;

    text-align: center;

    padding: 20px;
}

.upload-box input[type="file"] {
    display: none;
}

.upload-icon {
    color: var(--gold);

    font-size: 40px;
}

.upload-text {
    font-size: 13px;
}

.choose-file {
    border: 1px solid var(--gold);

    padding: 8px 24px;

    border-radius: 4px;

    color: var(--gold);

    background: white;
}

.upload-box small {
    font-size: 12px;
}

.security-note {
    margin-top: 10px;

    text-align: center;

    color: #717681;

    font-size: 12px;
}

/* Checkbox */

.checkbox-area {
    margin: 22px 0;
}

.checkbox-row {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 12px 0;

    color: var(--navy);

    font-size: 13px;
}

.checkbox-row input {
    width: 17px;
    height: 17px;

    flex: 0 0 auto;

    accent-color: var(--navy);
}

.checkbox-row a {
    color: var(--gold);
    text-decoration: none;
}

/* Buttons */

.primary-btn {
    width: 100%;
    min-height: 48px;

    border: 0;
    border-radius: 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        90deg,
        var(--navy-dark),
        var(--navy)
    );

    color: white;

    font-size: 16px;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;
}

.secondary-btn {
    min-height: 48px;

    border: 1px solid var(--navy);

    border-radius: 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 20px;

    color: var(--navy);

    background: white;

    text-decoration: none;

    font-size: 15px;
}

.form-footer-text {
    text-align: center;

    margin: 16px 0 0;

    font-size: 13px;
}

.return-store {
    display: block;

    width: max-content;

    margin: 25px auto 0;

    color: var(--gold);

    text-decoration: none;
}

/* Submitted */

.submitted-card {
    max-width: 1010px;
}

.success-circle,
.account-circle {
    width: 78px;
    height: 78px;

    border: 1.5px solid var(--gold);

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 38px;

    font-style: normal;
}

.submitted-description {
    margin-top: 20px !important;
}

.status-section {
    margin-top: 40px;
}

.steps {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    position: relative;

    margin-top: 34px;
}

.steps::before {
    content: "";

    position: absolute;

    left: 16%;
    right: 16%;

    top: 24px;

    height: 1px;

    background: #c5c5c5;
}

.step {
    position: relative;

    z-index: 1;

    text-align: center;

    padding: 0 25px;
}

.step-circle {
    width: 49px;
    height: 49px;

    margin: 0 auto 15px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid #aaa;

    border-radius: 50%;

    background: white;

    font-size: 22px;
}

.step.active .step-circle {
    background: var(--navy);

    color: white;

    border-color: var(--navy);
}

.step.current .step-circle {
    border-color: var(--gold);

    color: var(--gold);
}

.step h3 {
    color: var(--navy);

    font-size: 15px;

    margin-bottom: 8px;
}

.step p {
    font-size: 13px;

    line-height: 1.5;
}

.info-box {
    margin-top: 32px;

    min-height: 68px;

    border: 1px solid rgba(189, 120, 0, 0.45);

    border-radius: 5px;

    padding: 16px 22px;

    display: flex;

    align-items: center;

    gap: 18px;
}

.info-icon {
    width: 31px;
    height: 31px;

    border: 1px solid var(--gold);

    color: var(--gold);

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.submitted-actions {
    max-width: 700px;

    margin: 28px auto 0;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 30px;
}

.help-text {
    text-align: center;

    margin: 28px 0 0;

    font-size: 14px;
}

.help-text a {
    color: var(--gold);

    text-decoration: none;
}

/* Login */

.login-card {
    max-width: 790px;

    padding-left: 84px;
    padding-right: 84px;
}

.login-heading h4 {
    letter-spacing: 2px;

    margin: -2px 0 18px;

    font-weight: 500;
}

.login-form {
    margin-top: 30px;
}

.login-form .form-group {
    margin-bottom: 22px;
}

.password-label {
    display: flex;

    align-items: center;
    justify-content: space-between;
}

.password-label a {
    color: var(--gold);

    font-size: 13px;

    text-decoration: none;
}

.login-input input {
    padding-left: 55px !important;
    padding-right: 50px !important;
}

.left-icon {
    position: absolute;

    left: 18px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 2;
}

.password-toggle {
    position: absolute;

    right: 14px;
    top: 50%;

    transform: translateY(-50%);

    border: 0;

    background: transparent;

    color: var(--navy);

    cursor: pointer;
}

.or-divider {
    margin: 24px 0;

    display: flex;

    align-items: center;

    gap: 15px;

    color: var(--gold);
}

.or-divider span {
    height: 1px;

    background: var(--gold);

    flex: 1;
}

.login-actions {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 30px;
}

/* Responsive */

@media (max-width: 900px) {

    .wholesale-main {
        padding: 35px 16px;
    }

    .wholesale-card {
        padding: 32px;
    }

    .login-card {
        padding: 35px 45px;
    }

    .page-heading h1 {
        font-size: 34px;
    }
}

@media (max-width: 700px) {

    .wholesale-page {
        background-attachment: scroll;
    }

    .wholesale-header {
        height: 65px;

        padding: 0 18px;
    }

    .brand-logo img {
        width: 43px;
    }

    .header-action {
        font-size: 12px;
    }

    .wholesale-main {
        padding: 25px 12px;
    }

    .wholesale-card,
    .login-card {
        padding: 26px 18px;

        border-radius: 8px;
    }

    .page-heading h1 {
        font-size: 29px;
    }

    .page-heading p {
        font-size: 14px;
    }

    .form-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .form-section {
        margin-top: 28px;
    }

    .steps {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .steps::before {
        display: none;
    }

    .step {
        padding: 0 10px;
    }

    .submitted-actions,
    .login-actions {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .info-box {
        align-items: flex-start;

        padding: 14px;

        font-size: 13px;
    }

    .success-circle,
    .account-circle {
        width: 65px;
        height: 65px;

        font-size: 31px;
    }

    .card-decoration span,
    .success-decoration span,
    .account-decoration span {
        width: 45px;
    }

    .login-heading h4 {
        font-size: 12px;
    }

    .login-heading p br {
        display: none;
    }

    .submitted-description br {
        display: none;
    }
}

@media (max-width: 420px) {

    .wholesale-header {
        padding: 0 12px;
    }

    .header-return {
        font-size: 12px;
    }

    .page-heading h1 {
        font-size: 25px;
    }

    .form-section h2,
    .status-section h2 {
        font-size: 19px;
    }

    .form-group input:not([type="checkbox"]):not([type="file"]),
    .form-group select {
        height: 46px;
    }
}
/* Standalone HTML fallback logo when the original logo image is not available. */
.brand-text {
    width: 48px;
    height: 48px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    text-decoration: none;
}

/* Premsons Jewellers brand */
.brand-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#071c49;line-height:1}
.brand-mark{position:relative;display:inline-block;width:34px;height:56px;flex:0 0 34px}
.brand-stem{position:absolute;left:15px;top:5px;width:4px;height:46px;background:#050505;transform:skew(-8deg)}
.brand-slash{position:absolute;left:8px;top:28px;width:25px;height:4px;background:#050505;transform:rotate(-57deg);transform-origin:center}
.brand-dot{position:absolute;right:2px;top:3px;width:10px;height:10px;border-radius:50%;background:#ed1c24}
.brand-name{display:flex;flex-direction:column;letter-spacing:.08em}
.brand-name strong{font-family:Georgia,"Times New Roman",serif;font-size:17px;font-weight:600;color:#081d4d}
.brand-name small{margin-top:4px;font-size:8px;letter-spacing:.26em;color:#a76a00}

/* More faithful line icons */
.ui-icon{width:22px;height:22px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.account-circle .ui-icon,.success-circle .ui-icon{width:38px;height:38px;color:var(--gold)}
.left-icon,.field-icon{display:flex;align-items:center;justify-content:center;color:#747b88}
.password-toggle{font-size:0}.password-toggle::before{content:"";display:block;width:21px;height:14px;border:1.7px solid #687184;border-radius:50% 50%;}.password-toggle::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border:1.5px solid #687184;border-radius:50%;transform:translate(-50%,-50%)}

@media(max-width:700px){.brand-name strong{font-size:13px}.brand-name small{font-size:6px}.brand-mark{transform:scale(.8);transform-origin:left center}.brand-logo{gap:3px}.wholesale-page{background-position:center top}}