/* ===== account\actions.css ===== */
/* ==========================================================
   SOUVIKS — ACCOUNT ACTIONS
========================================================== */


/* ==========================================================
   ACCOUNT ACTIONS
========================================================== */

.account-actions {

    display: grid;

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

    gap: 12px;

    margin-top: 24px;

}


.account-actions .btn {

    width: 100%;

    justify-content: center;

}


/* ==========================================================
   LOGOUT
========================================================== */

.account-page > .form-actions {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 0;

}


.account-page > .form-actions .btn {

    min-width: 140px;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 700px) {

    .account-actions {

        grid-template-columns: 1fr;

    }


    .account-page > .form-actions {

        justify-content: stretch;

    }


    .account-page > .form-actions .btn {

        width: 100%;

    }

}

/* ===== account\dashboard.css ===== */
/* ==========================================================
   SOUVIKS — ACCOUNT DASHBOARD
========================================================== */

.account-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.account-dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    background: linear-gradient(135deg, var(--surface-primary-soft) 0%, var(--bg-card) 72%);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.account-dashboard-identity {
    min-width: 0;
}

.account-dashboard-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--color-primary);
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.account-dashboard-hero h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    line-height: 1.18;
}

.account-dashboard-company {
    margin: 8px 0 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.account-dashboard-account-badge {
    flex: 0 0 auto;
    padding: 8px 12px;
    color: var(--color-primary);
    background: var(--color-primary-alpha-08);
    border: 1px solid var(--color-primary-alpha-16);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.account-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.account-dashboard-stat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px;
    color: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.account-dashboard-stat:hover {
    color: inherit;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.account-dashboard-stat-label {
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.account-dashboard-stat strong {
    margin: 7px 0 2px;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 1.85rem;
    line-height: 1;
}

.account-dashboard-stat-note {
    color: var(--color-primary);
    font-size: .78rem;
    font-weight: 700;
}

.account-dashboard-actions,
.account-dashboard-recent {
    padding: 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.account-dashboard-section-heading {
    margin-bottom: 14px;
}

.account-dashboard-section-heading h3 {
    margin: 0;
    font-size: 1rem;
}

.account-dashboard-section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.account-dashboard-section-heading-row a {
    color: var(--color-primary);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.account-dashboard-section-heading-row a:hover {
    text-decoration: underline;
}

.account-dashboard-action-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.account-dashboard-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 66px;
    padding: 14px 15px;
    color: var(--text-primary);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.account-dashboard-action:hover {
    color: var(--text-primary);
    border-color: var(--color-primary);
    background: var(--bg-card);
    transform: translateY(-1px);
}

.account-dashboard-action-primary {
    color: var(--bg-card);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.account-dashboard-action-primary:hover {
    color: var(--bg-card);
    background: var(--color-primary-dark, var(--color-primary));
}

.account-dashboard-action-title {
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.25;
}

.account-dashboard-action-arrow {
    flex: 0 0 auto;
    font-size: 1rem;
}

.account-dashboard-recent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-dashboard-recent-state {
    padding: 22px 10px;
    color: var(--text-secondary);
    text-align: center;
}

.account-dashboard-recent-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.account-dashboard-recent-main {
    min-width: 0;
}

.account-dashboard-recent-reference {
    display: block;
    color: var(--text-primary);
    font-weight: 800;
}

.account-dashboard-recent-meta {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: .8rem;
}

.account-dashboard-recent-status {
    padding: 5px 9px;
    color: var(--color-primary);
    background: var(--color-primary-alpha-08);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.account-dashboard-recent-arrow {
    color: var(--color-primary);
    font-weight: 800;
}

@media (max-width: 900px) {
    .account-dashboard-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .account-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-dashboard {
        gap: 14px;
    }

    .account-dashboard-hero {
        align-items: flex-start;
        padding: 20px;
    }

    .account-dashboard-account-badge {
        font-size: .72rem;
    }

    .account-dashboard-stats {
        gap: 8px;
    }

    .account-dashboard-stat {
        padding: 14px 12px;
    }

    .account-dashboard-stat-label {
        min-height: 2.2em;
        font-size: .68rem;
        line-height: 1.2;
    }

    .account-dashboard-stat strong {
        font-size: 1.5rem;
    }

    .account-dashboard-stat-note {
        display: none;
    }

    .account-dashboard-actions,
    .account-dashboard-recent {
        padding: 16px;
    }

    .account-dashboard-section-heading-row {
        align-items: flex-start;
    }

    .account-dashboard-action-grid {
        gap: 8px;
    }

    .account-dashboard-action {
        min-height: 60px;
        padding: 12px;
    }

    .account-dashboard-recent-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 10px;
    }

    .account-dashboard-recent-status {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .account-dashboard-recent-arrow {
        display: none;
    }
}


.account-dashboard-profile {
    padding: 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.account-dashboard-profile-intro {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: .8rem;
}

.account-dashboard-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

.account-dashboard-profile-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 14px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.account-dashboard-profile-label {
    color: var(--text-secondary);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.account-dashboard-profile-item strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: .88rem;
}

@media (max-width:700px) {
    .account-dashboard-profile { padding: 16px; }
    .account-dashboard-profile-grid { grid-template-columns: 1fr; }
}


.account-dashboard-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
    gap: 14px;
}

.account-dashboard-completion,
.account-dashboard-help {
    padding: 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.account-profile-completion-percent {
    flex: 0 0 auto;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.15rem;
}

.account-profile-completion-track {
    width: 100%;
    height: 8px;
    overflow: hidden;
    margin: 2px 0 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

.account-profile-completion-track span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--color-primary);
    border-radius: inherit;
    transition: width .25s ease;
}

.account-profile-completion-text {
    margin: 0 0 14px;
    color: var(--text-secondary);
    font-size: .82rem;
    line-height: 1.55;
}

.account-profile-completion-action {
    width: auto;
}

.account-help-actions {
    display: grid;
    gap: 8px;
}

.account-help-actions a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 12px 14px;
    color: var(--text-primary);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: .84rem;
    font-weight: 700;
}

.account-help-actions a::after {
    content: "→";
    color: var(--color-primary);
}

.account-help-actions a:hover {
    color: var(--text-primary);
    border-color: var(--color-primary);
}

.account-dashboard-email-status {
    align-self: flex-start;
    padding: 3px 7px;
    color: var(--text-secondary);
    background: var(--bg-light);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
}

.account-dashboard-email-status.is-verified {
    color: var(--color-success);
    background: var(--color-success-alpha-10);
}

@media (max-width: 800px) {
    .account-dashboard-lower-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .account-dashboard-completion,
    .account-dashboard-help {
        padding: 16px;
    }

    .account-profile-completion-action {
        width: 100%;
        justify-content: center;
    }
}


/* ===== account\base.css ===== */
/* ==========================================================
   SOUVIKS — ACCOUNT BASE
========================================================== */


/* ==========================================================
   ACCOUNT PAGE
========================================================== */

.account-page {

    display: flex;

    flex-direction: column;

    gap: 28px;

    max-width: 900px;

    margin: 0 auto;

}


/* ==========================================================
   ACCOUNT SECTION
========================================================== */

.account-section {

    padding: 32px;

    background: var(--bg-card);

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

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

}


/* ==========================================================
   ACCOUNT SECTION HEADER
========================================================== */

.account-section-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 24px;

    margin-bottom: 28px;

}


.account-section-header h2 {

    margin: 0 0 6px;

}


.account-section-header p {

    margin: 0;

    color: var(--text-secondary);

}


/* ==========================================================
   ACCOUNT SECTION CONTENT
========================================================== */

.account-section > h2 {

    margin-top: 0;

}


.account-section > p {

    color: var(--text-secondary);

}


/* ==========================================================
   ACCOUNT LOADING STATE
========================================================== */

.account-auth-loader {

    min-height: 320px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.account-auth-loader-inner {

    text-align: center;

    color: var(--text-secondary);

}


.account-auth-loader-spinner {

    width: 36px;

    height: 36px;

    margin: 0 auto 16px;

    border: 3px solid var(--border-color);

    border-top-color: var(--color-primary);

    border-radius: 50%;

    animation:
        accountLoaderSpin .8s linear infinite;

}


@keyframes accountLoaderSpin {

    to {

        transform: rotate(360deg);

    }

}


/* ==========================================================
   AUTH PENDING
========================================================== */

body.account-auth-pending main {

    visibility: hidden;

}


body:not(.account-auth-pending)
.account-auth-loader {

    display: none;

}

/* ===== account\business.css ===== */
/* ==========================================================
   SOUVIKS — ACCOUNT BUSINESS
========================================================== */


/* ==========================================================
   BUSINESS ACCOUNT TOGGLE
========================================================== */

.account-business-toggle {

    margin: 4px 0 0;

    padding: 18px 20px;

    background: var(--bg-light);

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

    border-radius: var(--radius-md);

}


/* ==========================================================
   BUSINESS CHECKBOX
========================================================== */

.account-checkbox-label {

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    margin: 0;

    cursor: pointer;

    font-weight: 600;

}


.account-checkbox-label input {

    flex: 0 0 auto;

    width: 18px;

    height: 18px;

    margin: 0;

    cursor: pointer;

}


/* ==========================================================
   BUSINESS INFORMATION
========================================================== */

.account-business-fields {

    display: grid;

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

    gap: 20px;

    margin-top: 0;

    padding: 20px;

    background: var(--bg-light);

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

    border-radius: var(--radius-md);

}


.account-business-fields[hidden] {

    display: none;

}


/* ==========================================================
   BUSINESS FORM GROUPS
========================================================== */

.account-business-fields .form-group {

    margin: 0;

}


.account-business-fields .form-group label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

}


.account-business-fields .form-group input {

    width: 100%;

}


/* ==========================================================
   REQUIRED MARKER
========================================================== */

.account-required {

    margin-left: 3px;

    color: var(--color-primary);

    font-weight: 700;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 700px) {

    .account-business-toggle {

        padding: 16px 18px;

    }


    .account-business-fields {

        grid-template-columns: 1fr;

        padding: 16px;

    }

}

/* ===== account\edit.css ===== */
/* ==========================================================
   SOUVIKS — ACCOUNT EDIT PROFILE
========================================================== */


/* ==========================================================
   EDIT PROFILE FORM
========================================================== */

#account-profile-form {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 0;

    padding-top: 28px;

    border-top: 1px solid var(--border-color);

}


/* ==========================================================
   FORM GROUPS
========================================================== */

#account-profile-form .form-group {

    margin: 0;

}


#account-profile-form .form-group label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

}


/* ==========================================================
   FORM INPUTS
========================================================== */

#account-profile-form .form-group input {

    width: 100%;

}


/* ==========================================================
   MANAGED EMAIL NOTE
========================================================== */

#account-profile-form .form-group small {

    display: block;

    margin-top: 7px;

    color: var(--text-secondary);

    font-size: .82rem;

    line-height: 1.5;

}


/* ==========================================================
   FORM STATUS
========================================================== */

#accountProfileStatus {

    margin-top: 0;

}


#accountProfileStatus[hidden] {

    display: none;

}


/* ==========================================================
   FORM ACTIONS
========================================================== */

#account-profile-form .form-actions {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 4px;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 700px) {

    #account-profile-form {

        gap: 18px;

        padding-top: 24px;

    }


    #account-profile-form .form-actions {

        flex-direction: column-reverse;

    }


    #account-profile-form .form-actions .btn {

        width: 100%;

    }

}

/* ===== account\navigation.css ===== */
/* ==========================================================
   SOUVIKS — ACCOUNT NAVIGATION
========================================================== */


/* ==========================================================
   ACCOUNT LAYOUT
========================================================== */

.account-layout {

    display: grid;

    grid-template-columns:
        220px minmax(0, 1fr);

    gap: 28px;

    align-items: start;

    max-width: 1180px;

    margin: 0 auto;

}


/* ==========================================================
   ACCOUNT SIDEBAR
========================================================== */

.account-navigation {

    position: sticky;

    top: 24px;

    padding: 20px;

    background: var(--bg-card);

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

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

}


/* ==========================================================
   NAVIGATION TITLE
========================================================== */

.account-navigation-title {

    margin: 0 0 14px;

    padding: 0 12px;

    color: var(--text-secondary);

    font-size: .75rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;

}


/* ==========================================================
   NAVIGATION LIST
========================================================== */

.account-navigation-list {

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin: 0;

    padding: 0;

    list-style: none;

}


/* ==========================================================
   NAVIGATION LINK
========================================================== */

.account-navigation-link {

    display: flex;

    align-items: center;

    min-height: 44px;

    padding: 10px 12px;

    color: var(--text-primary);

    border-radius: var(--radius-md);

    font-weight: 600;

    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease;

}


.account-navigation-link:hover {

    background: var(--bg-light);

    color: var(--color-primary);

}


/* ==========================================================
   ACTIVE LINK
========================================================== */

.account-navigation-link.active {

    background: var(--bg-light);

    color: var(--color-primary);

    font-weight: 700;

}


/* ==========================================================
   COMING SOON
========================================================== */

.account-navigation-link.is-disabled {

    color: var(--text-secondary);

    opacity: .55;

    cursor: not-allowed;

    pointer-events: none;

}


/* ==========================================================
   NAVIGATION STATUS
========================================================== */

.account-navigation-status {

    margin-left: auto;

    font-size: .68rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .04em;

}


/* ==========================================================
   ACCOUNT CONTENT
========================================================== */

.account-content {

    min-width: 0;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 850px) {

    .account-layout {

        grid-template-columns: 180px minmax(0, 1fr);

        gap: 20px;

    }


    .account-navigation {

        padding: 16px;

    }

}


@media (max-width: 700px) {

    .account-layout {

        display: flex;

        flex-direction: column;

        gap: 20px;

    }


    .account-navigation {

        position: static;

        width: 100%;

        padding: 12px;

        overflow-x: auto;

    }


    .account-navigation-title {

        padding: 4px 8px 8px;

        margin-bottom: 4px;

    }


    .account-navigation-list {

        flex-direction: row;

        gap: 6px;

        overflow-x: auto;

        scrollbar-width: thin;

    }


    .account-navigation-link {

        flex: 0 0 auto;

        white-space: nowrap;

    }


    .account-content {

        width: 100%;

    }

}

/* ===== account\profile.css ===== */
/* ==========================================================
   SOUVIKS — ACCOUNT PROFILE
========================================================== */


/* ==========================================================
   PROFILE SECTION HEADER
========================================================== */

.account-profile-section
.account-section-header {

    align-items: center;

}


.account-profile-section
.account-section-header h2 {

    margin: 0 0 6px;

}


/* ==========================================================
   PROFILE DETAILS
========================================================== */

.account-details {

    display: grid;

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

    margin-top: 4px;

    border-top: 1px solid var(--border-color);

}


.account-detail {

    display: flex;

    flex-direction: column;

    gap: 6px;

    min-width: 0;

    padding: 18px 20px;

    border-bottom: 1px solid var(--border-color);

}


.account-detail:nth-child(odd) {

    border-right: 1px solid var(--border-color);

}


/* ==========================================================
   DETAIL LABEL
========================================================== */

.account-detail-label {

    font-size: .8rem;

    font-weight: 700;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: .04em;

}


/* ==========================================================
   DETAIL VALUE
========================================================== */

.account-detail-value {

    min-width: 0;

    color: var(--text-primary);

    font-size: .98rem;

    font-weight: 600;

    line-height: 1.5;

    overflow-wrap: anywhere;

}


/* ==========================================================
   GST DETAIL
========================================================== */

#accountGstDetail[hidden] {

    display: none;

}


/* ==========================================================
   EDIT PROFILE BUTTON
========================================================== */

#editAccountProfile {

    flex-shrink: 0;

    white-space: nowrap;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 700px) {

    .account-profile-section
    .account-section-header {

        align-items: stretch;

    }


    #editAccountProfile {

        width: 100%;

    }


    .account-details {

        grid-template-columns: 1fr;

    }


    .account-detail:nth-child(odd) {

        border-right: none;

    }

}

/* ===== account\security.css ===== */
/* ==========================================================
   SOUVIKS — ACCOUNT SECURITY
========================================================== */

.account-security-section {
    padding-bottom: 24px;
}

.account-security-list {
    display: grid;
    gap: 14px;
}

.account-security-card {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
}

.account-security-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px 14px;
}

.account-security-card-mark {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: var(--color-primary-alpha-08);
    border: 1px solid var(--color-primary-alpha-14);
    border-radius: 10px;
    font-weight: 900;
}

.account-security-card-header h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.account-security-card-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: .82rem;
    line-height: 1.5;
}

.account-security-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 22px 20px;
}

.account-security-current {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-security-verification {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    background: var(--bg-light);
    color: var(--text-secondary);
}

.account-security-verification.is-verified {
    color: var(--color-success);
    background: var(--color-success-alpha-10);
}

.account-security-form-panel {
    padding: 20px 22px 22px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-light);
}

.account-security-form-heading {
    margin-bottom: 16px;
}

.account-security-form-heading h4 {
    margin: 0 0 5px;
}

.account-security-form-heading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: .82rem;
    line-height: 1.5;
}

.account-security-form-panel form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

.account-security-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.account-password-input {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.account-password-input input {
    min-width: 0;
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.account-password-toggle {
    flex: 0 0 auto;
    padding: 0 13px;
    border: 1px solid var(--border-color);
    border-left: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
}

.account-password-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: .75rem;
    font-weight: 700;
}

.account-password-strength-bar {
    flex: 1;
    height: 5px;
    overflow: hidden;
    background: var(--border-color);
    border-radius: 999px;
}

.account-password-strength-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--text-secondary);
    transition: width .2s ease, background-color .2s ease;
}

.account-password-strength-bar span.weak { width: 33%; background: var(--color-primary); }
.account-password-strength-bar span.fair { width: 66%; background: var(--color-warning); }
.account-password-strength-bar span.strong { width: 100%; background: var(--color-success); }

.account-security-note {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.account-security-note strong {
    display: block;
    margin-bottom: 5px;
}

.account-security-note p {
    margin: 0 0 7px;
    color: var(--text-secondary);
    font-size: .82rem;
    line-height: 1.55;
}

.account-security-note a {
    color: var(--color-primary);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.account-security-signout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
}

.account-security-signout p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: .8rem;
}

@media (max-width: 650px) {
    .account-security-card-header,
    .account-security-value-row,
    .account-security-form-panel {
        padding-left: 16px;
        padding-right: 16px;
    }

    .account-security-value-row,
    .account-security-signout {
        align-items: stretch;
        flex-direction: column;
    }

    .account-security-value-row .btn,
    .account-security-form-actions .btn,
    .account-security-signout .btn {
        width: 100%;
        justify-content: center;
    }

    .account-security-form-actions {
        flex-direction: column-reverse;
    }
}


/* ===== account\inquiries.css ===== */
/* ==========================================================
   SOUVIKS — ACCOUNT INQUIRIES
========================================================== */


/* ==========================================================
   INQUIRIES LIST
========================================================== */

.account-inquiries {

    display: flex;

    flex-direction: column;

    gap: var(--space-md);

}


.account-inquiries-state {

    padding: var(--space-xl);

    text-align: center;

    color: var(--text-secondary);

    background: var(--bg-card);

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

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

}


/* ==========================================================
   INQUIRY LIST
========================================================== */

.account-inquiries-list {

    display: flex;

    flex-direction: column;

    gap: var(--space-md);

}


/* ==========================================================
   INQUIRY CARD
========================================================== */

.account-inquiry-card {

    overflow: hidden;

    background: var(--bg-card);

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

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);

}


.account-inquiry-card:hover {

    border-color: var(--color-primary);

    box-shadow: var(--shadow-md);

}


/* ==========================================================
   INQUIRY SUMMARY
========================================================== */

.account-inquiry-summary {

    width: 100%;

    display: flex;

    align-items: center;

    gap: var(--space-md);

    padding: 18px 20px;

    margin: 0;

    border: 0;

    background: transparent;

    color: var(--text-primary);

    text-align: left;

    cursor: pointer;

    font: inherit;

}


.account-inquiry-summary:hover {

    background: var(--bg-body);

}


/* ==========================================================
   SUMMARY MAIN
========================================================== */

.account-inquiry-main {

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.account-inquiry-reference {

    color: var(--text-primary);

    font-family: var(--font-heading);

    font-size: 1rem;

    font-weight: 700;

}


.account-inquiry-meta {

    color: var(--text-secondary);

    font-size: .875rem;

}


/* ==========================================================
   STATUS
========================================================== */

.account-inquiry-status {

    flex-shrink: 0;

    padding: 5px 10px;

    color: var(--color-success);

    background: var(--color-success-alpha-10);

    border-radius: 999px;

    font-size: .75rem;

    font-weight: 700;

    line-height: 1.2;

}


/* ==========================================================
   ARROW
========================================================== */

.account-inquiry-arrow {

    flex-shrink: 0;

    color: var(--text-secondary);

    font-size: .75rem;

    transition:
        transform var(--transition-fast);

}


.account-inquiry-summary[aria-expanded="true"]
.account-inquiry-arrow {

    transform: rotate(180deg);

}


/* ==========================================================
   DETAILS
========================================================== */

.account-inquiry-details {

    border-top: 1px solid var(--border-color);

}


.account-inquiry-content {

    padding: var(--space-lg);

}


.account-inquiry-content section + section {

    margin-top: var(--space-xl);

}


.account-inquiry-content h3 {

    margin: 0 0 var(--space-md);

    color: var(--text-primary);

    font-family: var(--font-heading);

    font-size: 1rem;

    font-weight: 700;

}


/* ==========================================================
   PRODUCTS TABLE
========================================================== */

.account-inquiry-table-wrapper {

    width: 100%;

    overflow-x: auto;

}


.account-inquiry-table {

    width: 100%;

    min-width: 600px;

    border-collapse: collapse;

}


.account-inquiry-table th,
.account-inquiry-table td {

    padding: 12px 14px;

    border-bottom: 1px solid var(--border-color);

    text-align: left;

    vertical-align: middle;

}


.account-inquiry-table th {

    color: var(--text-secondary);

    background: var(--bg-body);

    font-size: .75rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .04em;

}


.account-inquiry-table td {

    color: var(--text-primary);

    font-size: .875rem;

}


.account-inquiry-table tbody tr:last-child td {

    border-bottom: 0;

}


/* ==========================================================
   CUSTOMER INFORMATION
========================================================== */

.account-inquiry-customer dl {

    display: grid;

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

    gap: var(--space-md);

    margin: 0;

}


.account-inquiry-customer dl > div {

    padding: 12px 14px;

    background: var(--bg-body);

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

    border-radius: var(--radius-md);

}


.account-inquiry-customer dt {

    margin-bottom: 4px;

    color: var(--text-secondary);

    font-size: .75rem;

    font-weight: 600;

}


.account-inquiry-customer dd {

    margin: 0;

    color: var(--text-primary);

    font-size: .875rem;

    font-weight: 500;

    overflow-wrap: anywhere;

}


/* ==========================================================
   ADDITIONAL NOTES
========================================================== */

.account-inquiry-message {

    padding: 14px 16px;

    background: var(--bg-body);

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

    border-radius: var(--radius-md);

}


.account-inquiry-message p {

    margin: 0;

    color: var(--text-primary);

    line-height: 1.7;

    white-space: pre-wrap;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .account-inquiry-summary {

        align-items: flex-start;

        padding: 16px;

    }


    .account-inquiry-status {

        padding: 4px 8px;

        font-size: .7rem;

    }


    .account-inquiry-content {

        padding: var(--space-md);

    }


    .account-inquiry-customer dl {

        grid-template-columns: 1fr;

    }


    .account-inquiry-table {

        min-width: 560px;

    }

}

/* ===== account\rfq.css ===== */
/* ==========================================================
   SOUVIKS — ACCOUNT RFQ
========================================================== */
.account-rfq-header { align-items: center; }
.account-section-kicker { display:block; margin-bottom:5px; color:var(--color-primary); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.account-rfq-continue { flex:0 0 auto; white-space:nowrap; }
.account-rfq-basket-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.account-rfq-basket-heading h3 { margin:0 0 4px; }
.account-rfq-summary { margin:0; color:var(--text-secondary); font-size:.84rem; }
.account-rfq-add-more { flex:0 0 auto; color:var(--color-primary); font-size:.82rem; font-weight:700; text-decoration:none; }
.account-rfq-add-more:hover { text-decoration:underline; }
.account-rfq-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:18px; }
.account-rfq-actions .btn:disabled { opacity:.55; cursor:not-allowed; }
.account-rfq-success[hidden] { display:none; }
.account-rfq-success { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; margin-top:20px; padding:16px 18px; background:var(--color-success-alpha-06); border:1px solid var(--color-success-alpha-20); border-radius:var(--radius-lg); }
.account-rfq-success-icon { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--color-success-alpha-12); color:var(--color-success); font-weight:900; }
.account-rfq-success-copy { min-width:0; }
.account-rfq-success-copy strong { display:block; color:var(--text-primary); }
.account-rfq-success-copy p { margin:4px 0 0; color:var(--text-secondary); font-size:.86rem; line-height:1.5; }
.account-rfq-success-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.account-rfq-basket .rfq-table-wrapper { margin-top:0; }
@media (max-width:700px) {
.account-rfq-header { align-items:stretch; }
.account-rfq-continue { width:100%; justify-content:center; }
.account-rfq-basket-heading { align-items:flex-start; flex-direction:column; gap:7px; }
.account-rfq-add-more { align-self:flex-start; }
.account-rfq-actions { justify-content:stretch; flex-direction:column; }
.account-rfq-actions .btn { width:100%; }
.account-rfq-success { grid-template-columns:auto minmax(0,1fr); align-items:start; }
.account-rfq-success-actions { grid-column:1 / -1; justify-content:stretch; flex-direction:column; }
.account-rfq-success-actions .btn { width:100%; }
.account-rfq-basket .rfq-table-wrapper { overflow:visible; border:0; background:transparent; box-shadow:none; }
.account-rfq-basket .rfq-table { min-width:0; width:100%; display:block; background:transparent; }
.account-rfq-basket .rfq-table thead { display:none; }
.account-rfq-basket .rfq-table tbody, .account-rfq-basket .rfq-table tr { display:block; width:100%; }
.account-rfq-basket .rfq-table tbody tr { margin-bottom:10px; padding:4px 0; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.account-rfq-basket .rfq-table tbody td { width:100%!important; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:10px 13px; border-right:0; border-bottom:1px solid var(--border-color); text-align:right; font-size:.84rem; background:var(--bg-card); }
.account-rfq-basket .rfq-table tbody td::before { content:attr(data-label); flex:0 0 38%; color:var(--text-secondary); font-size:.7rem; font-weight:800; text-align:left; text-transform:uppercase; letter-spacing:.03em; }
.account-rfq-basket .rfq-table tbody td:last-child { border-bottom:0; }
.account-rfq-basket .rfq-table tbody td[colspan] { display:block; padding:20px 14px; text-align:center; }
.account-rfq-basket .rfq-table tbody td[colspan]::before { display:none; }
.account-rfq-basket .rfq-qty, .account-rfq-basket .remove-rfq { margin-left:auto; }
}


/* Customer information: clean two-column detail cards */
.account-rfq-customer {
    margin-top: 22px;
    padding: 20px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.account-rfq-customer h3 {
    margin: 0 0 5px;
    font-size: 1rem;
}

.account-rfq-customer-intro {
    margin: 0 0 16px;
    color: var(--text-secondary);
    font-size: .82rem;
    line-height: 1.5;
}

.account-rfq-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.account-rfq-details .account-detail {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.account-rfq-details .account-detail-label {
    color: var(--text-secondary);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.account-rfq-details .account-detail-value {
    min-width: 0;
    color: var(--text-primary);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.account-rfq-details .account-detail[hidden],
.account-rfq-success[hidden],
#accountRfqStatus[hidden] {
    display: none !important;
}

@media (max-width: 700px) {
    .account-rfq-customer {
        padding: 16px;
    }

    .account-rfq-details {
        grid-template-columns: 1fr;
    }
}


/* ===== account\saved.css ===== */
/* ==========================================================
   SOUVIKS — SAVED PRODUCT BUTTON
========================================================== */

.product-image {
    position: relative;
}

/* ==========================================================
   PRODUCT CARD IMAGE LINK
========================================================== */

.product-image > a {
    display: block;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .product-save-button {
        top: 8px;
        right: 8px;

        width: 36px;
        height: 36px;

        font-size: 1.1rem;
    }

}

/* ===== account\vehicles.css ===== */
/* ==========================================================
   SOUVIKS — ACCOUNT MY VEHICLES
========================================================== */

.account-vehicles-workspace {
    min-width: 0;
}

.account-vehicles-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.account-vehicle-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.account-vehicle-image {
    min-height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: var(--bg-light);
    border-right: 1px solid var(--border-color);
}

.account-vehicle-image img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
}

.account-vehicle-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.account-vehicle-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.account-vehicle-model {
    display: block;
    color: var(--text-secondary);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.account-vehicle-nickname {
    display: block;
    margin-top: 3px;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1.3;
}

.account-vehicle-registration {
    flex: 0 0 auto;
    padding: 5px 8px;
    color: var(--text-primary);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.account-vehicle-meta,
.account-vehicle-notes {
    margin: 0;
    color: var(--text-secondary);
    font-size: .82rem;
    line-height: 1.45;
}

.account-vehicle-notes {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.account-vehicle-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
}

.account-vehicle-actions .btn {
    min-height: 36px;
    padding: 8px 11px;
    font-size: .76rem;
}

.account-vehicle-modal-open {
    overflow: hidden;
}

.account-vehicle-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
}

.account-vehicle-modal[hidden] {
    display: none;
}

.account-vehicle-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay-slate-58);
}

.account-vehicle-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(760px, calc(100vh - 40px));
    overflow: auto;
    padding: 24px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 70px var(--overlay-slate-24);
}

.account-vehicle-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.account-vehicle-modal-header h2 {
    margin: 2px 0 5px;
}

.account-vehicle-modal-header p {
    margin: 0;
    color: var(--text-secondary);
}

.account-vehicle-modal-close {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.account-vehicle-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.account-vehicle-form-wide {
    grid-column: 1 / -1;
}

.account-vehicle-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 980px) {
    .account-vehicles-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .account-vehicles-workspace .account-section-header {
        align-items: stretch;
    }

    .account-vehicles-workspace .account-section-header .btn {
        width: 100%;
    }

    .account-vehicle-card {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .account-vehicle-image {
        min-height: 150px;
        padding: 8px;
    }

    .account-vehicle-content {
        padding: 13px;
    }

    .account-vehicle-card-heading {
        flex-direction: column;
        gap: 7px;
    }

    .account-vehicle-registration {
        align-self: flex-start;
    }

    .account-vehicle-actions .btn:first-child {
        width: 100%;
    }

    .account-vehicle-form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .account-vehicle-form-wide {
        grid-column: auto;
    }

    .account-vehicle-modal {
        padding: 10px;
    }

    .account-vehicle-modal-dialog {
        max-height: calc(100vh - 20px);
        padding: 18px;
    }

    .account-vehicle-form-actions {
        flex-direction: column-reverse;
    }

    .account-vehicle-form-actions .btn {
        width: 100%;
    }
}

/* Compact searchable vehicle picker used in the Add/Edit Vehicle modal. */
.account-vehicle-picker {
    position: relative;
    width: 100%;
}

.account-vehicle-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.account-vehicle-picker-trigger {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.account-vehicle-picker-trigger:hover,
.account-vehicle-picker-trigger[aria-expanded="true"] {
    border-color: var(--color-primary);
}

.account-vehicle-picker-trigger:focus-visible {
    outline: 3px solid var(--color-danger-alpha-18);
    outline-offset: 2px;
}

.account-vehicle-picker-icon,
.account-vehicle-picker-option-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-light, var(--surface-muted));
    font-size: 16px;
}

.account-vehicle-picker-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.account-vehicle-picker-copy strong {
    overflow: hidden;
    font-size: .88rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-vehicle-picker-copy small {
    color: var(--text-secondary);
    font-size: .7rem;
}

.account-vehicle-picker-chevron {
    flex: 0 0 auto;
    color: var(--text-secondary);
    transition: transform .16s ease;
}

.account-vehicle-picker-trigger[aria-expanded="true"] .account-vehicle-picker-chevron {
    transform: rotate(180deg);
}

.account-vehicle-picker-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 100;
    max-height: min(360px, 48vh);
    overflow: hidden;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: 0 18px 45px var(--overlay-slate-18);
}

.account-vehicle-picker-panel[hidden] { display: none; }

.account-vehicle-picker-search {
    width: 100%;
    min-height: 40px;
    margin-bottom: 7px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    font: inherit;
}

.account-vehicle-picker-options {
    display: grid;
    gap: 3px;
    max-height: 275px;
    overflow: auto;
}

.account-vehicle-picker-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.account-vehicle-picker-option:hover,
.account-vehicle-picker-option.is-selected {
    background: var(--bg-light, var(--surface-muted));
}

.account-vehicle-picker-option-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.account-vehicle-picker-option-copy strong {
    font-size: .8rem;
    line-height: 1.25;
}

.account-vehicle-picker-option-copy small {
    color: var(--text-secondary);
    font-size: .65rem;
}

.account-vehicle-picker-empty {
    padding: 14px 10px;
    color: var(--text-secondary);
    font-size: .78rem;
    text-align: center;
}

@media (max-width: 700px) {
    .account-vehicle-picker-panel {
        max-height: min(360px, 52vh);
    }
    .account-vehicle-picker-options {
        max-height: min(270px, 39vh);
    }
}

/* ==========================================================
   VEHICLE SELECT FALLBACK / MOBILE HARDENING
   The custom picker is preferred; this keeps the source select sane
   in browsers where the enhancement script is delayed or unavailable.
========================================================== */

#accountVehicleSelect.account-vehicle-select-native {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.account-vehicle-picker-trigger {
    min-height: 48px;
}

.account-vehicle-picker-panel {
    max-height: min(420px, 58vh);
    overflow: hidden auto;
}

.account-vehicle-picker-search {
    min-height: 44px;
}

.account-vehicle-picker-options {
    max-height: min(310px, 44vh);
    overscroll-behavior: contain;
}

@media (max-width: 700px) {
    .account-vehicle-modal-dialog {
        width: min(720px, calc(100vw - 20px));
        max-height: calc(100dvh - 20px);
        padding: 16px;
    }

    .account-vehicle-modal-header {
        margin-bottom: 16px;
    }

    .account-vehicle-modal-header h2 {
        font-size: clamp(1.6rem, 7vw, 2.1rem);
    }

    .account-vehicle-picker-trigger {
        min-height: 46px;
    }
}


/* ===== account\vehicle-recommendations.css ===== */
/* ==========================================================
   SOUVIKS — ACCOUNT VEHICLE-BASED PARTS
========================================================== */

.account-dashboard-vehicle-parts {
    margin-top: 14px;
    padding: 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.account-vehicle-parts-heading-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    min-width: 190px;
}

.account-vehicle-parts-heading-meta strong {
    font-size: .9rem;
    text-align: right;
}

.account-vehicle-parts-heading-meta span {
    color: var(--text-secondary);
    font-size: .72rem;
    font-weight: 700;
}

.account-vehicle-parts-heading-meta a {
    color: var(--color-primary);
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
}

.account-vehicle-parts-heading-meta a:hover {
    text-decoration: underline;
}

.account-vehicle-parts-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.account-vehicle-parts-controls label {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.account-vehicle-parts-controls select {
    min-width: 0;
    flex: 1;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
}

.account-vehicle-parts-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.account-vehicle-part-card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.account-vehicle-part-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 8px;
    background: var(--bg-light);
    text-decoration: none;
}

.account-vehicle-part-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.account-vehicle-part-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
}

.account-vehicle-part-brand,
.account-vehicle-part-number {
    color: var(--text-secondary);
    font-size: .68rem;
    font-weight: 800;
}

.account-vehicle-part-brand {
    text-transform: uppercase;
    letter-spacing: .04em;
}

.account-vehicle-part-number {
    overflow-wrap: anywhere;
}

.account-vehicle-part-card h4 {
    margin: 0;
    min-height: 2.55em;
    font-size: .84rem;
    line-height: 1.3;
}

.account-vehicle-part-card h4 a {
    color: var(--text-primary);
    text-decoration: none;
}

.account-vehicle-part-card h4 a:hover {
    color: var(--color-primary);
}

.account-vehicle-part-pricing {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.account-vehicle-part-price {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: .94rem;
    font-weight: 800;
}

.account-vehicle-part-mrp {
    color: var(--text-secondary);
    font-size: .7rem;
    text-decoration: line-through;
}

.account-vehicle-part-discount {
    color: var(--color-primary);
    font-size: .68rem;
    font-weight: 800;
}

.account-vehicle-part-price-request {
    color: var(--text-secondary);
    font-size: .73rem;
    font-weight: 700;
}

.account-vehicle-part-rfq {
    width: 100%;
    min-height: 36px;
    margin-top: 4px;
    padding: 8px 10px;
    font-size: .74rem;
}

.account-vehicle-parts-empty-inline {
    grid-column: 1 / -1;
    padding: 18px;
    color: var(--text-secondary);
    background: var(--bg-light);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: .82rem;
}

@media (max-width: 1050px) {
    .account-vehicle-parts-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .account-dashboard-vehicle-parts {
        padding: 16px;
    }

    .account-vehicle-parts-heading-meta {
        width: 100%;
        min-width: 0;
        align-items: flex-start;
    }

    .account-vehicle-parts-heading-meta strong {
        text-align: left;
    }

    .account-vehicle-parts-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .account-vehicle-parts-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .account-vehicle-part-image {
        height: 120px;
    }

    .account-vehicle-part-content {
        padding: 10px;
    }

    .account-vehicle-part-card h4 {
        font-size: .78rem;
    }
}


/* Rich vehicle selector */
.account-vehicle-parts-controls .account-rich-select-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.account-rich-select {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
}

.account-rich-select-trigger {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.account-rich-select-trigger:hover,
.account-rich-select-trigger[aria-expanded="true"] {
    border-color: var(--color-primary);
}

.account-rich-select-trigger-thumb,
.account-rich-select-option-thumb {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-light);
}

.account-rich-select-trigger-thumb img,
.account-rich-select-option-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.account-rich-select-trigger-copy,
.account-rich-select-option-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.account-rich-select-trigger-copy strong,
.account-rich-select-option-copy strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-rich-select-trigger-copy small,
.account-rich-select-option-copy small {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: .68rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-rich-select-chevron {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: .8rem;
    transition: transform .16s ease;
}

.account-rich-select-trigger[aria-expanded="true"] .account-rich-select-chevron {
    transform: rotate(180deg);
}

.account-rich-select-panel {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    z-index: 80;
    max-height: 360px;
    overflow: auto;
    padding: 7px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 40px var(--overlay-slate-16);
}

.account-rich-select-panel[hidden] {
    display: none;
}

.account-rich-select-group + .account-rich-select-group {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--border-color);
}

.account-rich-select-group-label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px 6px;
    color: var(--text-secondary);
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.account-rich-select-group-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--bg-light);
    font-size: .9rem;
    overflow: hidden;
}

.account-rich-select-group-icon img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.account-rich-select-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.account-rich-select-option:hover,
.account-rich-select-option:focus-visible {
    background: var(--bg-light);
    border-color: var(--border-color);
    outline: none;
}

.account-rich-select-option[aria-selected="true"] {
    background: var(--color-primary-alpha-06);
    border-color: var(--color-primary-alpha-16);
}

.account-rich-select-option-check {
    flex: 0 0 auto;
    width: 18px;
    color: var(--color-primary);
    font-size: .76rem;
    font-weight: 900;
    text-align: center;
}

@media (max-width: 700px) {
    .account-vehicle-parts-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .account-vehicle-parts-controls label {
        display: block;
    }

    .account-rich-select-panel {
        max-height: 300px;
    }
}


/* ===== site-theme.css ===== */
/* ==========================================================
   SOUVIKS SITE-WIDE THEME
   Shared presentation layer for non-home pages.
   The homepage remains the visual reference; this layer keeps
   typography, containers, heroes, cards and responsive spacing
   consistent without replacing page-specific functionality.
========================================================== */

.site-page {
    background: var(--bg-body);
}

.site-page main {
    overflow-x: clip;
}

.site-page > main,
.index-page > main {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}


/* ==========================================================
   SHARED PAGE HERO
========================================================== */

.site-page .page-hero,
.site-page .catalogue-hero,
.site-page .products-hero,
.site-page .brands-hero,
.site-page .categories-hero,
.site-page .vehicles-hero,
.site-page .about-hero,
.site-page .contact-hero,
.site-page .request-quote-hero,
.site-page .privacy-hero,
.site-page .terms-hero,
.site-page .refund-hero {
    position: relative;
    min-height: 340px;
    padding: 64px 0;
    background-color: var(--bg-body);
    background-image: linear-gradient(90deg, var(--overlay-white-98) 0%, var(--overlay-white-90) 36%, var(--overlay-white-35) 68%, var(--overlay-white-00) 100%), var(--hero-image, none);
    background-position: center right;
    background-size: cover;
    color: var(--text-primary);
    text-align: left;
}

.site-page .page-hero::before {
    background: transparent;
}

.site-page .hero-content {
    position: relative;
    z-index: 2;
    width: min(100%, 700px);
    max-width: 700px;
    margin: 0;
    text-align: left;
}

.site-page .page-hero h1,
.site-page .catalogue-hero h1,
.site-page .products-hero h1,
.site-page .brands-hero h1,
.site-page .categories-hero h1,
.site-page .vehicles-hero h1,
.site-page .about-hero h1,
.site-page .contact-hero h1,
.site-page .request-quote-hero h1,
.site-page .privacy-hero h1,
.site-page .terms-hero h1,
.site-page .refund-hero h1 {
    max-width: 700px;
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.site-page .page-hero p,
.site-page .catalogue-hero p,
.site-page .products-hero p,
.site-page .brands-hero p,
.site-page .categories-hero p,
.site-page .vehicles-hero p,
.site-page .about-hero p,
.site-page .contact-hero p,
.site-page .request-quote-hero p,
.site-page .privacy-hero p,
.site-page .terms-hero p,
.site-page .refund-hero p {
    max-width: 660px;
    margin: 0;
    color: var(--text-secondary);
    font-size: .98rem;
    line-height: 1.6;
}

.site-page .hero-stats {
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    margin: 24px 0 0;
    padding: 12px 14px;
    gap: 0;
    background: var(--overlay-white-90);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.site-page .hero-stat {
    min-width: 150px;
    padding: 7px 20px;
    text-align: left;
}

.site-page .hero-stat .stat-number {
    color: var(--text-primary);
    font-weight: 800;
}

.site-page .hero-stat .stat-label {
    color: var(--text-secondary);
}

/* ==========================================================
   SHARED SECTION RHYTHM
========================================================== */

.site-page .section-spacing,
.site-page .catalogue-summary,
.site-page .catalogue-products,
.site-page .section-heading {
    scroll-margin-top: 80px;
}

.site-page .section-spacing {
    padding: 48px 0;
}

.site-page .section-heading {
    text-align: left;
    margin-bottom: 24px;
}

.site-page .section-heading h2 {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -.025em;
}

.site-page .section-heading p {
    max-width: 760px;
    margin: 8px 0 0;
    line-height: 1.6;
}

.site-page .section-heading::after {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin: 12px 0 0;
    border-radius: 999px;
    background: var(--color-primary);
}

/* ==========================================================
   SHARED CARD LANGUAGE
========================================================== */

.site-page .card,
.site-page .product-card,
.site-page .brand-card,
.site-page .vehicle-card,
.site-page .category-card,
.site-page .why-card,
.site-page .metrics-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}


.site-page .catalogue-search + section,
.site-page .catalogue-summary + section {
    border-top: 1px solid var(--border-color);
}

/* ==========================================================
   ENTITY DETAIL PAGES
========================================================== */

.site-page .entity-hero {
    padding: 28px 0 16px;
    background: var(--bg-body);
}

.site-page .brand-detail,
.site-page .category-detail,
.site-page .vehicle-detail {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================
   MOBILE NAVIGATION
========================================================== */

@media (max-width: 992px) {
    .top-bar .container {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .top-bar-brand {
        min-width: 0;
    }

    .top-bar-tools {
        flex: 0 1 auto;
        min-width: 0;
        margin-left: auto;
    }

    .top-bar-tools .top-whatsapp,
    .top-bar-tools .language-switcher,
    .top-bar .mobile-menu-button {
        flex: 0 0 44px;
        width: 44px;
        max-width: 44px;
    }

    .top-bar .mobile-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        min-width: 44px;
        min-height: 44px;
        margin-left: 0;
    }

    .mobile-navigation-open .main-navigation {
        z-index: 5000;
    }

    .main-navigation {
        top: 0;
        height: 100dvh;
        max-height: none;
        padding: max(12px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
        border: 0;
        border-left: 1px solid var(--overlay-white-12);
        box-shadow: 0 18px 40px var(--overlay-black-28);
    }

    .main-navigation .mobile-navigation-header {
        min-height: 64px;
        padding: 8px 0;
        padding-top: max(8px, env(safe-area-inset-top));
    }

    .main-navigation .navigation-menu {
        width: 100%;
        max-width: 100%;
        padding-top: 8px;
    }

    .main-navigation .navigation-menu .nav-link {
        min-height: 52px;
        padding: 12px 10px;
        overflow-wrap: anywhere;
    }

    .main-navigation .mobile-nav-auth {
        width: 100%;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    .main-navigation .mobile-nav-auth-link {
        min-height: 50px;
    }
}

/* ==========================================================
   RESPONSIVE PAGE SYSTEM
========================================================== */

@media (max-width: 768px) {
    .site-page .page-hero,
    .site-page .catalogue-hero,
    .site-page .products-hero,
    .site-page .brands-hero,
    .site-page .categories-hero,
    .site-page .vehicles-hero,
    .site-page .about-hero,
    .site-page .contact-hero,
    .site-page .request-quote-hero,
    .site-page .privacy-hero,
    .site-page .terms-hero,
    .site-page .refund-hero {
        min-height: 0;
        padding: 42px 0 32px;
        background-position: 72% center;
    }

    .site-page .hero-content {
        width: 100%;
        max-width: 700px;
        text-align: left;
    }

    .site-page .page-hero h1,
    .site-page .catalogue-hero h1,
    .site-page .products-hero h1,
    .site-page .brands-hero h1,
    .site-page .categories-hero h1,
    .site-page .vehicles-hero h1,
    .site-page .about-hero h1,
    .site-page .contact-hero h1,
    .site-page .request-quote-hero h1,
    .site-page .privacy-hero h1,
    .site-page .terms-hero h1,
    .site-page .refund-hero h1 {
        font-size: clamp(1.85rem, 8vw, 2.6rem);
    }

    .site-page .page-hero p,
    .site-page .catalogue-hero p,
    .site-page .products-hero p,
    .site-page .brands-hero p,
    .site-page .categories-hero p,
    .site-page .vehicles-hero p,
    .site-page .about-hero p,
    .site-page .contact-hero p,
    .site-page .request-quote-hero p,
    .site-page .privacy-hero p,
    .site-page .terms-hero p,
    .site-page .refund-hero p {
        font-size: .9rem;
    }

    .site-page .hero-stats {
        width: 100%;
        overflow-x: auto;
        padding: 8px;
        scrollbar-width: none;
    }

    .site-page .hero-stats::-webkit-scrollbar {
        display: none;
    }

    .site-page .hero-stat {
        flex: 0 0 140px;
        min-width: 140px;
        padding: 7px 12px;
    }

    .site-page .section-spacing {
        padding: 38px 0;
    }

    .site-page .section-heading {
        margin-bottom: 18px;
    }

    .site-page .section-heading h2 {
        font-size: 1.5rem;
    }

    .site-page .section-heading::after {
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .site-page .page-hero,
    .site-page .catalogue-hero,
    .site-page .products-hero,
    .site-page .brands-hero,
    .site-page .categories-hero,
    .site-page .vehicles-hero,
    .site-page .about-hero,
    .site-page .contact-hero,
    .site-page .request-quote-hero,
    .site-page .privacy-hero,
    .site-page .terms-hero,
    .site-page .refund-hero {
        padding-top: 34px;
        padding-bottom: 26px;
    }

    .site-page .hero-stats {
        border-radius: var(--radius-md);
    }

    .site-page .hero-stat {
        flex-basis: 128px;
        min-width: 128px;
    }

    .site-page .section-spacing {
        padding: 32px 0;
    }
}


/* ==========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
    .main-navigation {
        transition: none !important;
    }
}

/* ==========================================================
   MOBILE TOP-BAR CONTROL SPACING
========================================================== */

@media (max-width: 420px) {
    .top-bar-tools { flex: 0 0 auto; gap: 6px; margin-left: auto; }
    .top-bar-tools .top-whatsapp,
    .top-bar .mobile-menu-button,
    .language-button { width: 44px; min-width: 44px; max-width: 44px; height: 44px; }
    .top-bar-tools .top-whatsapp { padding: 0; }
    .language-button { gap: 0; padding: 0; justify-content: center; }
    .language-button .language-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; }
    .language-button .language-arrow { display: none; }
}


/* ==========================================================
   ACCOUNT — ORDER HISTORY & PAYMENT STATUS
========================================================== */
.account-orders-section .account-section-header { align-items: center; }
.account-orders-section .account-section-header .btn { flex: 0 0 auto; }
.account-orders-list { display: grid; gap: 16px; }
.account-order-card {
    min-width: 0;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.account-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.account-order-identity { min-width: 0; }
.account-order-kicker, .account-order-date, .account-order-item-meta {
    color: var(--text-secondary);
    font-size: .82rem;
}
.account-order-number { margin: 4px 0; overflow-wrap: anywhere; font-size: 1.08rem; }
.account-order-date { margin: 0; }
.account-order-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.account-order-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
    color: var(--text-primary);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.25;
}
.account-order-badge.is-paid, .account-order-badge.is-delivered, .account-order-badge.is-confirmed {
    border-color: #b6ddc7; background: #effaf3; color: #17643a;
}
.account-order-badge.is-failed, .account-order-badge.is-cancelled {
    border-color: #efc0c0; background: #fff2f2; color: #9d2525;
}
.account-order-badge.is-pending, .account-order-badge.is-awaiting_payment {
    border-color: #e9d39d; background: #fff9e9; color: #77550b;
}
.account-order-total {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding: 12px 0;
    border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
}
.account-order-total strong { font-size: 1.08rem; }
.account-order-failure-reason {
    margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid #b73b3b;
    background: #fff5f5; color: #792222; overflow-wrap: anywhere;
}
.account-order-items { margin-top: 14px; }
.account-order-items summary { cursor: pointer; color: var(--color-primary); font-weight: 700; }
.account-order-item-list { list-style: none; padding: 0; margin: 12px 0 0; }
.account-order-item {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
    padding: 12px 0; border-top: 1px solid var(--border-color);
}
.account-order-item-description { display: grid; gap: 4px; min-width: 0; }
.account-order-item-description strong { overflow-wrap: anywhere; }
.account-order-item-pricing { display: grid; gap: 4px; flex: 0 0 auto; text-align: right; color: var(--text-secondary); font-size: .82rem; }
.account-order-item-pricing strong { color: var(--text-primary); font-size: .92rem; }
.account-order-guest-note { color: var(--text-secondary); font-size: .9rem; }
.account-order-retry { margin-top: 12px; }
.account-order-guest-note, .account-order-no-items { margin-bottom: 0; }
@media (max-width: 640px) {
    .account-orders-section .account-section-header { align-items: stretch; flex-direction: column; gap: 14px; }
    .account-orders-section .account-section-header .btn { width: 100%; }
    .account-order-head { flex-direction: column; gap: 12px; }
    .account-order-badges { justify-content: flex-start; }
    .account-order-card { padding: 16px; }
    .account-order-item { flex-direction: column; gap: 8px; }
    .account-order-item-pricing { text-align: left; }
}