.profile_image_css {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile_image_css img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 🔥 ye missing tha */
    display: block;
}

.menu-icon {
    width: 22px;
    height: 22px;
    margin-right: 8px;
    vertical-align: middle;

    opacity: 0.5; /* grey faded look */
    filter: brightness(0) invert(0.6); /* grey tone */
}

/* hover */
.menu-index-2:hover .menu-icon {
    opacity: 1;
    filter: brightness(0) invert(1); /* white */
}

/* active */
.menu-index-2.active .menu-icon {
    opacity: 1;
    filter: brightness(0) invert(1); /* white */
}

.header-icon {
    width: 22px;
    height: 22px;
    margin-right: 8px;
    vertical-align: middle;

    opacity: 1; /* full visible */
    filter: brightness(0); /* 🔥 pure black */
}

@media (max-width: 576px) {
    #notifDropdown {
        width: 300px !important;
        right: -60px !important;
    }
}


/*Taken from attributs*/
.spec-tab-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.spec-tab-pill {
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid #e9e9e9;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    transition: all .2s;
}

.spec-tab-pill.active {
    background: #FF7101;
    color: #fff;
    border-color: #FF7101;
}

.spec-tab-pill:hover:not(.active) {
    border-color: #FF7101;
    color: #FF7101;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 20px;
    transition: .3s;
}

.toggle-slider:before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .3s;
}

.toggle-switch input:checked + .toggle-slider {
    background: #FF7101;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(16px);
}

.bulk-bar {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fff3ec;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid #ffd4b3;
}

.bulk-bar.show {
    display: flex;
}

.spec-table th, .spec-table td {
    vertical-align: middle;
}

.spec-table .img-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eee;
}

.badge-type {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: #f0f0f0;
    color: #555;
}

.classical-input {
    border: 1px solid #eaecf0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

.classical-input:focus {
    border-color: #ff6200 !important;
    background-color: #fffaf7 !important;
}

/* Orange Switch Theme */
.custom-switch:checked {
    background-color: #ff6200 !important;
    border-color: #ff6200 !important;
}

.btn-pf {
    font-weight: 600;
    transition: transform 0.2s;
}

.btn-pf:active {
    transform: scale(0.95);
}

.form-label {
    color: #344054;
    margin-bottom: 6px;
}

.tags-input-wrapper {
    min-height: 45px;
    cursor: text;
    display: flex;
    align-items: center;
    padding: 5px 10px !important;
}

.tag-item {
    background: #fff;
    color: #ff6200;
    border: 1px solid #ff6200;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(255, 98, 0, 0.1);
}

.tag-item i {
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #ff6200;
}

.tag-item i:hover {
    color: #d45200;
}

.btn-orange-classical {
    background-color: #ff6200;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    border: 1px solid #ff6200;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(255, 98, 0, 0.2);
}

.btn-orange-classical:hover {
    background-color: #e65800; /* Thoda sa dark orange hover pe */
    border-color: #e65800;
    transform: translateY(-2px); /* Halka sa upar uthega */
    box-shadow: 0 4px 12px rgba(255, 98, 0, 0.3);
    color: #ffffff !important;
}

.btn-orange-classical:active {
    transform: translateY(0); /* Click karne pe wapis neche */
    box-shadow: 0 2px 4px rgba(255, 98, 0, 0.2);
}

.admin-title {
    font-size: 24px;
    letter-spacing: -0.5px;
}


/*View Imgae*/
.image-list-details .image {
    display: block;
    width: 100%;
    height: 450px !important; /* Aap apni pasand ke mutabiq height 400px ya 500px kar sakte hain */
    overflow: hidden;
    background-color: #f7f7f7;
    border-radius: 8px; /* Agar corners round karne hain */
}

/* Image ko box mein fit karne ke liye */
.image-list-details .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.3s ease;
}

/* Hover pe thoda zoom effect (Optional) */
.image-list-details .image:hover img {
    transform: scale(1.05);
}

.disabled-status {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    position: relative;
}

.existing-media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.existing-media-item {
    position: relative;
    width: 120px;
    height: 90px;
    border-radius: 8px;
    overflow: visible;
    border: 2px solid #e5e7eb;
    transition: border-color .2s;
}

.existing-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.existing-media-item .cover-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: #FF7101;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}

.existing-media-item .set-existing-cover {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, .45);
    border: none;
    border-radius: 4px;
    color: #fff;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background .2s;
}

.existing-media-item .set-existing-cover:hover {
    background: #FF7101;
}

.existing-media-item .delete-existing-img {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.existing-media-item.marked-delete {
    opacity: .35;
    border-color: #ef4444;
}

/* Existing docs */
.existing-docs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.existing-doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: opacity .2s;
}

.existing-doc-item.marked-delete {
    opacity: .35;
    border-color: #ef4444;
    text-decoration: line-through;
}

.existing-doc-item .doc-name {
    flex: 1;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.existing-doc-item .doc-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.existing-doc-item .action-link {
    color: #6b7280;
    transition: color .2s;
}

.existing-doc-item .action-link:hover {
    color: #FF7101;
}

.err {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.thumbnail-media .item {
    position: relative;
}

.thumbnail-media .item .delete-img {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

#imageDropZone.dragover {
    border: 2px dashed #FF7101;
    opacity: 0.8;
}

#docList {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0;
    list-style: none;
    margin-top: 15px;
}

#docList .item.doc-item {
    width: 140px;
    height: 160px;
    background: #fff;
    border: 1px solid #e9edf4;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

#docList .item.doc-item:hover {
    border-color: #FF7101;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

#docList .item.doc-item .doc-icon {
    margin-bottom: 10px;
}

#docList .item.doc-item .doc-name {
    width: 100%;
    font-size: 11px;
    color: #333;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}

#docList .item.doc-item .doc-actions {
    display: flex;
    gap: 8px;
    background: #f8fafc;
    padding: 4px 8px;
    border-radius: 20px;
    border: 1px solid #eef2f6;
}

#docList .item.doc-item .action-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    transition: background 0.2s;
    color: #64748b;
}

#docList .item.doc-item .action-link:hover {
    background: #FF7101;
    color: #fff;
}

#docList .item.doc-item .delete-doc {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.submit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loader-box {
    text-align: center;
    background: #fff;
    padding: 40px;
    border-radius: 20px;
}

.loader-circle {
    width: 60px;
    height: 60px;
    border: 5px solid #ffd2b0;
    border-top: 5px solid #FF7101;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.success-check svg {
    animation: pop 0.5s ease;
}

@keyframes pop {
    0% {
        transform: scale(0)
    }
    100% {
        transform: scale(1)
    }
}

.input-error {
    border: 2px solid #e74c3c !important;
    animation: shake 0.3s;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-4px);
    }
    50% {
        transform: translateX(4px);
    }
    75% {
        transform: translateX(-4px);
    }
    100% {
        transform: translateX(0);
    }
}

.thumbnail-media .item {
    position: relative;
}

.thumbnail-media .item.is-cover img {
    outline: 2px solid #f59e0b; /* amber highlight on cover */
    outline-offset: -2px;
}

.set-cover-btn {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    border-radius: 4px;
    color: #f59e0b;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.set-cover-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.cover-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: #f59e0b;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    pointer-events: none;
}

/*Inquiry*/
.inquiry-card {
    transition: all 0.3s ease;
    border-left: 5px solid #ddd !important;
    min-height: 100px;
}

.inquiry-card:hover {
    border-left-color: #FF7101 !important;
    transform: translateX(6px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

.inquiry-card.highlighted {
    border-left-color: #FF7101 !important;
    background: linear-gradient(135deg, #fff8f4, #fff3ec) !important;
    box-shadow: 0 8px 24px rgba(255, 113, 1, 0.15) !important;
    animation: pulseHighlight 1.5s ease-in-out 3;
}

@keyframes pulseHighlight {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 113, 1, 0.3);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 113, 1, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 113, 1, 0);
    }
}

.text-orange {
    color: #FF7101 !important;
}

.badge-new {
    background: #FF7101;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50px;
    padding: 3px 10px;
    margin-left: 8px;
    vertical-align: middle;
    animation: blink 1s step-start 6;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.info-label {
    font-size: 11px;
    color: #FF7101;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
    display: block;
}

.info-value {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.message-box {
    background: #f4f6f9;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    color: #555;
    font-style: italic;
    border-left: 3px solid #ddd;
    line-height: 1.6;
}

.listing-header-card {
    background: linear-gradient(135deg, #FF7101, #ff9a45);
    border-radius: 14px;
    padding: 20px 28px;
    color: white;
    margin-bottom: 28px;
}

.border-end {
    border-right: 1px solid #eee !important;
}

@media (max-width: 768px) {
    .border-end {
        border-right: none !important;
        border-bottom: 1px solid #eee;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
}

.sc-button {
    color: white;
}


.invoice-wrapper {
    font-family: 'Plus Jakarta Sans', sans-serif;
    max-width: 860px;
    margin: 30px auto;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 40px rgba(0, 0, 0, .10);
}

/* ── Header ── */
.inv-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    padding: 40px 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

.inv-header::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: #FF7101;
    border-radius: 50%;
    opacity: .08;
}

.inv-header::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 30%;
    width: 140px;
    height: 140px;
    background: #FF7101;
    border-radius: 50%;
    opacity: .05;
}

.inv-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inv-logo .logo-mark {
    width: 48px;
    height: 48px;
    background: #FF7101;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
    color: #fff;
    letter-spacing: -1px;
}

.inv-logo .logo-text {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.3px;
}

.inv-logo .logo-text span {
    color: #FF7101;
}

.inv-badge {
    text-align: right;
    position: relative;
    z-index: 1;
}

.inv-badge .inv-label {
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.inv-badge .inv-number {
    font-family: 'DM Mono', monospace;
    color: #FF7101;
    font-size: 22px;
    font-weight: 500;
}

.inv-badge .inv-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34, 197, 94, .15);
    border: 1px solid rgba(34, 197, 94, .3);
    color: #4ade80;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    margin-top: 8px;
    letter-spacing: .5px;
}

.inv-badge .inv-status::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
}

/* ── Orange Stripe ── */
.inv-stripe {
    height: 4px;
    background: linear-gradient(90deg, #FF7101, #ff9a4a, #FF7101);
}

/* ── Meta Row ── */
.inv-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid #f0f0f0;
}

.inv-meta-cell {
    padding: 24px 32px;
    border-right: 1px solid #f0f0f0;
}

.inv-meta-cell:last-child {
    border-right: none;
}

.inv-meta-cell .cell-label {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.inv-meta-cell .cell-value {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.inv-meta-cell .cell-value.mono {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
}

/* ── Addresses ── */
.inv-addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 32px 48px;
    border-bottom: 1px solid #f0f0f0;
}

.inv-addr h6 {
    font-size: 10px;
    font-weight: 700;
    color: #FF7101;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.inv-addr p {
    font-size: 13px;
    color: #374151;
    line-height: 1.8;
    margin: 0;
}

.inv-addr strong {
    color: #1a1a1a;
    font-weight: 700;
    font-size: 15px;
}

/* ── Items Table ── */
.inv-table-wrap {
    padding: 0 48px;
}

.inv-table {
    width: 100%;
    border-collapse: collapse;
    margin: 32px 0;
}

.inv-table thead tr {
    background: #f8f8f8;
    border-radius: 8px;
}

.inv-table thead th {
    padding: 12px 16px;
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: left;
}

.inv-table thead th:last-child {
    text-align: right;
}

.inv-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
}

.inv-table tbody tr:last-child {
    border-bottom: none;
}

.inv-table tbody td {
    padding: 18px 16px;
    font-size: 13px;
    color: #374151;
    vertical-align: top;
}

.inv-table tbody td:last-child {
    text-align: right;
}

.inv-table .item-name {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 14px;
    margin-bottom: 4px;
}

.inv-table .item-desc {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.5;
}

.inv-table .item-features {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.inv-table .feat-tag {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #ea580c;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

/* ── Totals ── */
.inv-totals {
    display: flex;
    justify-content: flex-end;
    padding: 0 48px 32px;
}

.inv-totals-box {
    width: 300px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
}

.inv-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
}

.inv-totals-row:last-child {
    border-bottom: none;
}

.inv-totals-row .t-label {
    color: #6b7280;
    font-weight: 500;
}

.inv-totals-row .t-value {
    font-weight: 600;
    color: #1a1a1a;
    font-family: 'DM Mono', monospace;
}

.inv-totals-row.total-row {
    background: #1a1a1a;
    padding: 16px 20px;
}

.inv-totals-row.total-row .t-label {
    color: rgba(255, 255, 255, .7);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.inv-totals-row.total-row .t-value {
    color: #FF7101;
    font-size: 18px;
    font-weight: 700;
}

/* ── Payment Info ── */
.inv-payment {
    margin: 0 48px 32px;
    background: #f8f8f8;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.inv-payment .pay-icon {
    width: 40px;
    height: 40px;
    background: #FF7101;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inv-payment .pay-details h6 {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.inv-payment .pay-details p {
    font-size: 13px;
    color: #374151;
    margin: 0;
    font-family: 'DM Mono', monospace;
}

/* ── Footer ── */
.inv-footer {
    background: #f8f8f8;
    border-top: 1px solid #f0f0f0;
    padding: 24px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inv-footer p {
    font-size: 12px;
    color: #9ca3af;
    margin: 0;
    line-height: 1.6;
}

.inv-footer .footer-brand {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
}

.inv-footer .footer-brand span {
    color: #FF7101;
}

/* ── Actions (no print) ── */
.inv-actions {
    max-width: 860px;
    margin: 20px auto;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

@media print {
    .inv-actions, header, nav, footer, .sidebar {
        display: none !important;
    }

    .invoice-wrapper {
        box-shadow: none;
        border-radius: 0;
        margin: 0;
    }

    body {
        background: #fff !important;
    }
}

.sc-button {
    color: white !important;
}

.inq-page-header {
    background: linear-gradient(135deg, #FF7101, #ff9a45);
    border-radius: 16px;
    padding: 24px 28px;
    color: white;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.inq-page-header .seller-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.seller-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.4);
    object-fit: cover;
}

.seller-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
}

.seller-meta {
    font-size: 13px;
    opacity: 0.85;
    margin: 0;
}

.total-badge {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    padding: 8px 20px;
    font-weight: 700;
    font-size: 15px;
}

/* Car + Inquiry Card */
.car-inquiry-card {
    background: white;
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.car-inquiry-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Car Header */
.car-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    transition: background 0.2s;
}

.car-header:hover {
    background: #fff3ec;
}

.car-thumb {
    width: 90px;
    height: 62px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #eee;
}

.car-info {
    flex: 1;
    min-width: 0;
}

.car-title {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.car-meta {
    font-size: 12px;
    color: #888;
    margin: 0;
}

.car-inq-count {
    background: #FF7101;
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50px;
    padding: 4px 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.car-arrow {
    color: #FF7101;
    flex-shrink: 0;
    margin-left: 4px;
}

/* Inquiry Rows */
.inquiry-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid #f8f8f8;
    flex-wrap: wrap;
}

.inquiry-row:last-child {
    border-bottom: none;
}

.inq-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF7101, #ff9a45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.inq-name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    margin: 0 0 2px;
}

.inq-contact {
    font-size: 12px;
    color: #888;
    margin: 0;
}

.inq-message {
    flex: 1;
    font-size: 13px;
    color: #666;
    font-style: italic;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inq-message::before {
    content: '"';
}

.inq-message::after {
    content: '"';
}

.inq-time {
    font-size: 11px;
    color: #bbb;
    white-space: nowrap;
    flex-shrink: 0;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state p {
    color: #bbb;
    font-size: 15px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .car-header {
        flex-wrap: wrap;
    }

    .car-thumb {
        width: 70px;
        height: 48px;
    }

    .inquiry-row {
        gap: 10px;
    }

    .inq-message {
        display: none;
    }
}

/*//leads*/
.lead-row-card {
    transition: all 0.3s ease;
    border-left: 5px solid #ddd !important;
    padding-top: 25px !important; /* Height barhane ke liye */
    padding-bottom: 25px !important;
    min-height: 120px; /* Minimum height fix kar di */
    display: flex;
    align-items: center;
}

.lead-row-card:hover {
    border-left-color: #ff6600 !important; /* Orange Border */
    transform: translateX(8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.text-orange {
    color: #ff6600 !important;
}

.btn-orange-outline {
    color: #ff6600;
    border-color: #ff6600;
    background: transparent;
    transition: 0.3s;
}

.btn-orange-outline:hover {
    background: #ff6600;
    color: #fff;
}

/* Fonts thode bade kar diye */
.lead-name {
    font-size: 18px;
    font-weight: 700;
}

.lead-details {
    font-size: 15px;
}

.text-uppercase-custom {
    font-size: 12px;
    color: #ff6600;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: block;
}

.border-end {
    border-right: 1px solid #eee !important;
}

@media (max-width: 768px) {
    .border-end {
        border-right: none !important;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
}

/*.status-alert-bar {*/
/*    padding: 15px;*/
/*    border-radius: 10px;*/
/*    color: #fff;*/
/*    margin-bottom: 20px;*/
/*}*/

.square-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.blog-card {
    transition: transform 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-8px);
}

.blog-title {
    font-size: 16px;
    font-weight: 600;
    min-height: 44px;
    color: #333;
}


/* Reusing your existing orange-outline style */
.btn-orange-outline {
    border: 1px solid #FF7101;
    color: #FF7101;
    background: transparent;
}

.btn-orange-outline:hover {
    background: #FF7101;
    color: #fff;
}

.pre-btn {
    background: #FF7101;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
}

.upload-drag-area {
    border: 2px dashed #E6E6E6;
    border-radius: 14px;
    padding: 40px;
    text-align: center;
    background: #fdfdfd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-drag-area:hover, .upload-drag-area.dragover {
    border-color: #FF7101;
    background: #fff5ee;
}

/*.fw-6 {*/
/*    font-weight: 600;*/
/*    margin-bottom: 8px;*/
/*    display: block;*/
/*}*/

.pre-btn {
    background: #FF7101;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* Loader Style */
.loader-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #ffffff;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.second-btn {
    background: #eee;
    color: #333;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
}

/*.upload-drag-area {*/
/*    border: 2px dashed #E6E6E6;*/
/*    padding: 40px;*/
/*    text-align: center;*/
/*    border-radius: 14px;*/
/*    cursor: pointer;*/
/*}*/

.status-alert-bar {
    padding: 15px;
    border-radius: 10px;
    background: #FF7101;
    color: #fff;
    margin-bottom: 20px;
}

.phone-input-group {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 14px;
    padding: 4px 19px 6px 13px;
    position: relative;
}

/* Jab input par click ho to poore container ka border change ho */
.phone-input-group:focus-within {
    border: 1px solid #FF7101;
}

/* Input ki apni default blue outline khatam karne ke liye */
.phone-input-group input:focus {
    outline: none;
    border: none;
}

.country-code {
    display: flex;
    align-items: center;
    padding-right: 10px;
    border-right: 1px solid #eee;
    margin-right: 10px;
    gap: 6px;
}

.mini-flag {
    width: 20px;
    height: auto;
    border-radius: 2px;
}

.code {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.phone-field {
    border: none !important;
    padding: 12px 0 !important;
    flex-grow: 1;
    outline: none;
    font-size: 14px;
}

/* Removing number input arrows */
.phone-field::-webkit-inner-spin-button,
.phone-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fw-6 {
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.status-alert-bar {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #FF7101; /* Aapka orange color */
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    box-shadow: 0px 4px 10px rgba(255, 113, 1, 0.2);
    animation: slideDown 0.4s ease;
}

/* Error ke liye red background agar chahiye ho */
.status-alert-bar.error-bg {
    background-color: #dc3545;
    box-shadow: 0px 4px 10px rgba(220, 53, 69, 0.2);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.position-relative {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 15px;
    top: 45px;
    cursor: pointer;
    color: #999;
    z-index: 10;
}

/* Rules Styling */
.list-check-req li {
    color: #888;
    transition: 0.3s;
    list-style: none;
    margin-bottom: 5px;
}

.list-check-req li.check {
    color: #28a745;
    font-weight: bold;
}


/*.status-alert-bar {*/
/*    width: 100%;*/
/*    padding: 15px;*/
/*    margin-bottom: 20px;*/
/*    border-radius: 10px;*/
/*    background-color: #FF7101;*/
/*    color: #fff;*/
/*    display: none;*/
/*}*/

/*.error-bg {*/
/*    background-color: #dc3545 !important;*/
/*}*/
/*.phone-input-group {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    background: #fff;*/
/*    border: 1px solid #E6E6E6;*/
/*    border-radius: 14px;*/
/*    padding: 4px 19px 6px 13px;*/
/*    position: relative;*/
/*}*/

/* Jab input par click ho to poore container ka border change ho */
/*.phone-input-group:focus-within {*/
/*    border: 1px solid #FF7101;*/
/*}*/

/* Input ki apni default blue outline khatam karne ke liye */
/*.phone-input-group input:focus {*/
/*    outline: none;*/
/*    border: none;*/
/*}*/

/*.country-code {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    padding-right: 10px;*/
/*    border-right: 1px solid #eee;*/
/*    margin-right: 10px;*/
/*    gap: 6px;*/
/*}*/

/*.mini-flag {*/
/*    width: 20px;*/
/*    height: auto;*/
/*    border-radius: 2px;*/
/*}*/

/*.code {*/
/*    font-weight: 600;*/
/*    color: #333;*/
/*    font-size: 14px;*/
/*}*/

/*.phone-field {*/
/*    border: none !important;*/
/*    padding: 12px 0 !important;*/
/*    flex-grow: 1;*/
/*    outline: none;*/
/*    font-size: 14px;*/
/*}*/

/* Removing number input arrows */
/*.phone-field::-webkit-inner-spin-button,*/
/*.phone-field::-webkit-outer-spin-button {*/
/*    -webkit-appearance: none;*/
/*    margin: 0;*/
/*}*/

/*.fw-6 {*/
/*    font-weight: 600;*/
/*    display: block;*/
/*    margin-bottom: 8px;*/
/*}*/
.current-package-bar {
    background: linear-gradient(135deg, #FF7101, #ff9a4a);
    border-radius: 12px;
    padding: 16px 24px;
    color: #fff;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.current-package-bar .pkg-info h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: white;
}

.current-package-bar .pkg-info p {
    margin: 0;
    font-size: 13px;
    opacity: .85;
    color: white;
}

.pkg-progress {
    background: rgba(255, 255, 255, .3);
    border-radius: 20px;
    height: 8px;
    width: 200px;
    margin-top: 6px;
}

.pkg-progress-bar {
    background: #fff;
    border-radius: 20px;
    height: 8px;
    transition: width .4s;
}

.widget-pricing {
    position: relative;
    border-radius: 16px;
}

.widget-pricing.is-current {
    border: 2px solid #FF7101;
    box-shadow: 0 4px 20px rgba(255, 113, 1, .15);
}

.widget-pricing.is-current::after {
    content: '✓ Current Plan';
    position: absolute;
    top: -12px;
    right: 16px;
    background: #FF7101;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.widget-pricing.is-popular {
    border: 2px solid #FF7101;
    box-shadow: 0 4px 20px rgba(255, 113, 1, .15);
}

.btn-disabled {
    opacity: .6;
    cursor: not-allowed;
    pointer-events: none;
}

.tf-section-contact {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.rounded-12 {
    border-radius: 12px;
}

.mb-30 {
    margin-bottom: 30px;
}

.relative {
    position: relative;
}

/* Floating badge to make the image look like part of a dynamic UI */
.floating-badge {
    position: absolute;
    bottom: 30px;
    left: -20px;
    background: #fff;
    padding: 15px 25px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: float 3s ease-in-out infinite;
}

.floating-badge .icon {
    background: #FF7101; /* Use your primary brand color here */
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .floating-badge {
        display: none;
    }

    .contact-left {
        margin-bottom: 40px;
        text-align: center;
    }
}

/* ═══════════════════════════════════════
 CAR QUIZ MODAL - FINAL CLEAN CSS
═══════════════════════════════════════ */

/* Modal Container */
#carQuizModal .modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#carQuizModal .modal-dialog {
    max-width: 660px;
    margin: 1rem auto;
}

#carQuizModal .modal-body {
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ── Fixed Header ── */
.quiz-fixed-header {
    padding: 18px 28px 14px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    background: #fff;
    z-index: 10;
}

.quiz-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.quiz-step-label {
    font-size: 12px;
    color: #999;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.quiz-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #eee;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #666;
    line-height: 1;
    padding: 0;
    transition: background 0.2s;
}

.quiz-close-btn:hover {
    background: #f5f5f5;
}

.quiz-progress-track {
    height: 5px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    background: #ff7101;
    border-radius: 10px;
    transition: width 0.5s ease;
    width: 10%;
}

/* ── Steps Wrapper ── */
.quiz-steps-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* ── Individual Step ── */
.quiz-step {
    display: none;
    flex-direction: column;
    padding: 24px 28px 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.quiz-step.active {
    display: flex;
}

/* ── Step Headings ── */
.step-heading {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    text-align: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.step-subheading {
    font-size: 14px;
    color: #aaa;
    text-align: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

/* ── Cards Grid (Step 1 default) ── */
.quiz-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    align-content: start;
    padding-bottom: 8px;
}

/* ── Step 1: Car Types — no scroll, fits in view ── */
.quiz-step[data-step="1"] .quiz-cards-grid {
    overflow: hidden;
}

/* 1. form ko bhi full height do */
.quiz-steps-wrapper form {
    height: 100%;
    display: flex;
    flex-direction: column;
}


/* ── Scrollable Brands Step (Step 3) ── */
.quiz-step[data-step="3"] {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 24px 28px 0;
    box-sizing: border-box;
}

.quiz-step[data-step="3"].active {
    display: flex;
}

.quiz-brands-scroll-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    max-height: calc(77vh - 200px); /* header + footer + heading space minus */
    padding-right: 8px;
    margin-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: #ff7101 #f0f0f0;
}

.quiz-brands-scroll-wrapper::-webkit-scrollbar {
    width: 6px;
}

.quiz-brands-scroll-wrapper::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.quiz-brands-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #ff7101;
    border-radius: 10px;
}

.quiz-brands-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #e65c00;
}


/* ── Selection Card Base ── */
.quiz-sel-card input[type="checkbox"],
.quiz-sel-card input[type="radio"] {
    display: none;
}

.quiz-sel-card .q-inner {
    border: 1.5px solid #eee;
    border-radius: 12px;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
    position: relative;
    background: #fff;
}

.quiz-sel-card input:checked + .q-inner {
    border-color: #ff7101;
    background: #fff8f3;
    transform: translateY(-2px);
}

.quiz-sel-card input:checked + .q-inner::after {
    content: '✓';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: #ff7101;
    color: #fff;
    font-size: 11px;
    border-radius: 0 10px 0 8px;
    line-height: 20px;
    text-align: center;
}

.quiz-sel-card .q-inner img {
    height: 55px;
    object-fit: contain;
    margin: 0 auto 8px;
    display: block;
    transition: transform 0.2s;
}

.quiz-sel-card input:checked + .q-inner img {
    transform: scale(1.08);
}

.quiz-sel-card .q-label {
    font-size: 13px;
    color: #333;
    font-weight: 600;
    line-height: 1.3;
    display: block;
}

.quiz-sel-card input:checked + .q-inner .q-label {
    color: #ff7101;
}

/* ── Brand Cards ── */
.quiz-brand-card .q-inner img {
    height: 36px;
    filter: grayscale(1);
    opacity: 0.6;
}

.quiz-brand-card input:checked + .q-inner img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.08);
}

/* ── Radio Grid (Steps 6-9) ── */
.quiz-radio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    flex: 1;
    min-height: 0;
    align-content: center;
    padding-bottom: 8px;
}

.quiz-radio-card input[type="radio"] {
    display: none;
}

.quiz-radio-card .q-inner {
    border: 1.5px solid #eee;
    border-radius: 12px;
    padding: 16px 14px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    background: #fff;
}

.quiz-radio-card input:checked + .q-inner {
    border-color: #ff7101;
    background: #fff8f3;
    transform: translateY(-2px);
}

.quiz-radio-card input:checked + .q-inner::after {
    content: '✓';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: #ff7101;
    color: #fff;
    font-size: 11px;
    border-radius: 0 10px 0 8px;
    line-height: 20px;
    text-align: center;
}

.quiz-radio-card .q-icon {
    font-size: 22px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.quiz-radio-card .q-text strong {
    display: block;
    font-size: 14px;
    color: #111;
    font-weight: 700;
}

.quiz-radio-card .q-text small {
    font-size: 12px;
    color: #aaa;
}

/* ── ZIP Location Step ── */
.quiz-location-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    min-height: 0;
}

.quiz-location-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff3eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 14px;
    color: #ff7101;
}

.quiz-zip-input {
    border: 2px solid #eee;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 8px;
    text-align: center;
    width: 200px;
    outline: none;
    transition: border-color 0.2s;
    margin-top: 14px;
    display: block;
}

.quiz-zip-input:focus {
    border-color: #ff7101;
}

/* ── Lead Form Step 5 ── */
.quiz-success-notice {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #15803d;
    margin-bottom: 14px;
    text-align: center;
    flex-shrink: 0;
}

.quiz-lead-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
    justify-content: center;
}

.quiz-form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quiz-form-group input {
    width: 100%;
    border: 1.5px solid #eee;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
    background: #fff;
    box-sizing: border-box;
}

.quiz-form-group input:focus {
    border-color: #ff7101;
}

/* ── Error Message ── */
.quiz-error-msg {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: #dc2626;
    margin-top: 8px;
    text-align: center;
    display: none;
    flex-shrink: 0;
}

/* ── Loader Step 4 ── */
.quiz-loader-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    min-height: 0;
}

.quiz-pulse-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.quiz-pulse-ring {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 3px solid #ff7101;
    border-radius: 50%;
    animation: quizPulse 1.5s ease-out infinite;
    opacity: 0;
}

@keyframes quizPulse {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.quiz-pulse-icon {
    font-size: 36px;
    color: #ff7101;
    z-index: 2;
}

/* ── Final Screen Step 10 ── */
.quiz-final-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 28px;
    text-align: center;
    min-height: 0;
}

.quiz-check-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff3eb;
    border: 3px solid #ff7101;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #ff7101;
    margin-bottom: 20px;
}

/* ── Footer ── */
.quiz-footer {
    padding: 14px 28px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
    background: #fff;
}

.quiz-btn {
    padding: 11px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s, transform 0.15s;
}

.quiz-btn:active {
    transform: scale(0.97);
}

.quiz-btn-back {
    background: #f2f2f2;
    color: #555;
}

.quiz-btn-back:hover {
    background: #e8e8e8;
}

.quiz-btn-next {
    background: #ff7101;
    color: #fff;
    margin-left: auto;
}

.quiz-btn-next:hover {
    opacity: 0.9;
}

/* ════════════════════════════════
   MOBILE — max-width: 576px
════════════════════════════════ */
@media (max-width: 576px) {

    #carQuizModal .modal-dialog {
        margin: 6px;
        max-width: calc(100% - 12px);
    }

    #carQuizModal .modal-content {
        border-radius: 16px;
        max-height: 96vh;
    }

    .quiz-fixed-header {
        padding: 12px 16px 10px;
    }

    .quiz-step {
        padding: 14px 14px 0;
    }

    .quiz-footer {
        padding: 10px 14px 12px;
    }

    .step-heading {
        font-size: 18px;
    }

    .step-subheading {
        font-size: 13px;
        margin-bottom: 12px;
    }

    /* Step 1: Car Types — 2 per row mobile */
    .quiz-step[data-step="1"] .quiz-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        overflow: hidden;
    }

    .quiz-step[data-step="3"] {
        padding: 14px 14px 0;
    }

    .quiz-brands-scroll-wrapper {
        max-height: calc(96vh - 200px);
    }

    .quiz-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .quiz-sel-card .q-inner {
        padding: 12px 6px;
    }

    .quiz-sel-card .q-inner img {
        height: 44px;
    }

    .quiz-brand-card .q-inner img {
        height: 30px;
    }

    .quiz-sel-card .q-label {
        font-size: 12px;
    }

    .quiz-radio-grid {
        gap: 8px;
        align-content: center;
    }

    .quiz-radio-card .q-inner {
        padding: 12px 10px;
        gap: 8px;
    }

    .quiz-radio-card .q-icon {
        font-size: 18px;
        width: 22px;
    }

    .quiz-radio-card .q-text strong {
        font-size: 13px;
    }

    .quiz-radio-card .q-text small {
        font-size: 11px;
    }

    .quiz-btn {
        padding: 10px 16px;
        font-size: 13px;
    }

    .quiz-zip-input {
        width: 180px;
        font-size: 22px;
    }
}

/* ============================================
   Dealer Landing Page (/for-dealers)
   ============================================ */

.dealer-page-breadcrumb {
    margin-bottom: 0;
}

.dealer-stats,
.dealer-benefits,
.dealer-integrations,
.dealer-fomo,
.dealer-testimonials,
.dealer-form-section,
.seller-pricing-wrap,
.seller-faq-wrap {
    scroll-margin-top: 110px;
}

.dealer-hero .text-primary,
.dealer-stats .text-primary,
.dealer-benefits .text-primary,
.dealer-integrations .text-primary,
.dealer-fomo .text-primary,
.dealer-testimonials .text-primary,
.dealer-form-section .text-primary,
.seller-pricing-wrap .text-primary {
    color: #FF7101 !important;
}

.dealer-hero {
    padding: 60px 0 80px;
    background: linear-gradient(180deg, #fffcf7 0%, #fff4e6 100%);
    position: relative;
    overflow: hidden;
}

.dealer-hero::before {
    content: '';
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 113, 1, 0.3) 0%, transparent 60%);
    pointer-events: none;
}

.dealer-hero-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 20px;
    margin-bottom: 20px;
}

.dealer-hero-badge {
    display: inline-block;
    background: #fff3e6;
    color: #FF7101;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid rgba(255, 113, 1, 0.2);
}

.dealer-hero-desc {
    font-size: 17px;
    color: #666;
    max-width: 520px;
    line-height: 1.6;
}

.dealer-hero-ctas {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dealer-hero-ctas-secondary {
    margin-top: 14px;
}

.dealer-hero-email-cta {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 520px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dealer-hero-email-cta:focus-within {
    border-color: #FF7101;
    box-shadow: 0 0 0 4px rgba(255, 113, 1, 0.12), 0 6px 24px rgba(0, 0, 0, 0.06);
}

.dealer-hero-email-cta input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 8px 0 20px;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: #1a1a1a;
}

.dealer-hero-email-cta input::placeholder {
    color: #9a9a9a;
}

.dealer-hero-email-cta .dealer-btn-primary {
    padding: 12px 24px;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: none;
}

.dealer-hero-email-cta .dealer-btn-primary:hover {
    transform: none;
    box-shadow: 0 4px 18px rgba(255, 113, 1, 0.35);
}

@media (max-width: 575px) {
    .dealer-hero-email-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        max-width: 100%;
    }
    .dealer-hero-email-cta:focus-within {
        border-color: transparent;
        box-shadow: none;
    }
    .dealer-hero-email-cta input {
        height: 52px !important;
        min-height: 52px;
        padding: 0 18px !important;
        background: #fff;
        border: 1.5px solid #c9c9c9 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        box-sizing: border-box;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .dealer-hero-email-cta input:focus {
        border-color: #FF7101;
        box-shadow: 0 0 0 3px rgba(255, 113, 1, 0.12);
    }
    .dealer-hero-email-cta .dealer-btn-primary {
        width: 100%;
        height: 52px;
        justify-content: center;
        font-size: 15px;
        border-radius: 14px;
        padding: 0 20px;
        box-shadow: 0 6px 20px rgba(255, 113, 1, 0.35);
    }
    .dealer-hero-ctas-secondary {
        margin-top: 12px;
    }
    .dealer-hero-ctas-secondary .dealer-btn-outline {
        width: 100%;
        height: 52px;
        justify-content: center;
        border-radius: 14px;
        padding: 0 20px;
        font-size: 15px;
    }
}

.dealer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 50px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    white-space: nowrap;
}

.dealer-btn-primary {
    background: #FF7101;
    color: #fff;
    border-color: #FF7101;
    box-shadow: 0 4px 20px rgba(255, 113, 1, 0.35);
}

.dealer-btn-primary:hover {
    background: #e56400;
    border-color: #e56400;
    color: #fff;
    transform: scale(1.02);
    box-shadow: 0 6px 28px rgba(255, 113, 1, 0.45);
}

.dealer-btn-outline {
    background: transparent;
    border: 2px solid #d0d0d0;
    color: #333;
}

.dealer-btn-outline:hover {
    border-color: #FF7101;
    color: #FF7101;
}

.dealer-trust-badges {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
    color: #666;
}

.dealer-trust-badges i {
    margin-right: 6px;
}

.dealer-hero-image-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.dealer-hero-image {
    width: 100%;
    height: auto;
    display: block;
}

.dealer-stats-overlay {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background: rgba(20, 20, 30, 0.88);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
}

.dealer-stats-overlay-item {
    text-align: center;
}

.dealer-stats-overlay-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.dealer-stats-overlay-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-top: 4px;
}

/* Stats Section */
.dealer-stats {
    background: oklch(100% 0 0);
    padding: 70px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.dealer-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    border: 1px solid #eee;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.dealer-stat-icon {
    color: #FF7101;
    font-size: 22px;
    margin-bottom: 24px;
}

.dealer-stat-number {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
}

.dealer-stat-label {
    font-size: 14px;
    color: #666;
    margin-top: 12px;
}

/* Benefits Section */
.dealer-benefits {
    padding: 70px 0;
    background: oklch(99% .003 80);
    border-bottom: 1px solid #eee;
}

.dealer-benefit-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #eee;
    height: 100%;
    transition: all 0.3s ease;
}

.dealer-benefit-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: rgba(255, 113, 1, 0.3);
}

.dealer-benefit-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FF7101, #ff9a44);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.dealer-benefit-card h5 {
    font-weight: 600;
    margin-bottom: 8px;
}

.dealer-benefit-card p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Integrations Section */
.dealer-integrations {
    background: oklch(100% 0 0);
    padding: 70px 0;
    border-bottom: 1px solid #eee;
}

.dealer-integration-badge {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    transition: all 0.2s ease;
}

.dealer-integration-badge img {
    max-width: 100%;
    max-height: 45px;
    object-fit: contain;
}

.dealer-integration-badge:hover {
    border-color: #FF7101;
    box-shadow: 0 2px 12px rgba(255, 113, 1, 0.1);
}

/* FOMO Section */
.dealer-fomo {
    padding: 70px 0;
    background: oklch(99% .003 80);
}

.dealer-fomo-card {
    max-width: 720px;
    margin: 0 auto;
    background: linear-gradient(135deg, oklch(98% .015 55) 0%, oklch(100% 0 0) 100%);
    border-left: 4px solid #FF7101;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.dealer-fomo-card h2 {
    font-size: 26px;
    line-height: 1.3;
}

.dealer-fomo-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dealer-fomo-list li {
    padding: 8px 0;
    font-size: 15px;
    color: #333;
}

.dealer-fomo-list li i {
    margin-right: 10px;
    font-size: 16px;
}

/* Testimonials Section */
.dealer-testimonials {
    background: oklch(99% .003 80);
    padding: 70px 0;
    border-bottom: 1px solid #eee;
}

.dealer-testimonial-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #eee;
    height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.dealer-testimonial-stars {
    color: #FF7101;
    font-size: 14px;
    margin-bottom: 16px;
}

.dealer-testimonial-stars i {
    margin-right: 2px;
}

.dealer-testimonial-quote {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
}

.dealer-testimonial-author {
    border-top: 1px solid #eee;
    padding-top: 16px;
}

.dealer-testimonial-author strong {
    display: block;
    font-size: 14px;
    color: #1a1a2e;
}

.dealer-testimonial-author span {
    font-size: 12px;
    color: #999;
}

/* Form Section */
.dealer-form-section {
    padding: 70px 0;
    background: radial-gradient(ellipse at top, rgba(255, 113, 1, 0.15) 0%, transparent 60%);
}

.dealer-mini-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.dealer-mini-feature {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.dealer-mini-feature i {
    font-size: 18px;
    display: block;
    margin-bottom: 8px;
}

.dealer-mini-feature strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.dealer-mini-feature span {
    font-size: 13px;
    color: #666;
}

.dealer-form-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

.dealer-form-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #999;
    margin-bottom: 6px;
    display: block;
}

.dealer-form-input.form-control {
    height: 48px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    padding: 0 12px;
    font-size: 15px;
}

.dealer-form-input.form-control:focus {
    border-color: #FF7101;
    box-shadow: 0 0 0 3px rgba(255, 113, 1, 0.1);
}

/* Scroll Animation */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 991px) {
    .dealer-hero-title {
        font-size: 32px;
    }

    .dealer-hero-image-wrap {
        margin-top: 40px;
    }

    .dealer-stats-overlay {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        border-radius: 0 0 16px 16px;
    }

    .dealer-mini-features {
        grid-template-columns: 1fr;
    }

    .dealer-form-card {
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .dealer-hero-title {
        font-size: 28px;
    }

    .dealer-hero {
        padding: 40px 0 60px;
    }

    .dealer-fomo-card {
        padding: 24px;
    }

    .dealer-fomo-card h2 {
        font-size: 22px;
    }

    .dealer-stat-number {
        font-size: 28px;
    }

    .dealer-form-card {
        padding: 24px;
    }
}

/* Dealer Form Modal */
#dealerFormModal .modal-dialog {
    max-width: 540px;
}

.dealer-modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
}

.dealer-modal-header {
    border-bottom: 1px solid #eee;
    padding: 24px 28px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.dealer-modal-header .btn-close {
    margin: 0;
    padding: 0;
}

#dealerFormModal .modal-body {
    padding: 24px 28px 28px;
    max-height: 70vh;
    overflow-y: auto;
}

@media (max-width: 575px) {
    #dealerFormModal .modal-body .mb-3 {
        margin-bottom: 0.75rem !important;
    }

    #dealerFormModal .modal-dialog {
        margin: 10px;
    }

    .dealer-modal-header {
        padding: 16px 20px;
    }

    #dealerFormModal .modal-body {
        padding: 16px 20px 20px;
    }
}

/* ===== Listing detail — hot tag pills ===== */
.listing-hot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.listing-hot-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.listing-hot-tag i {
    font-size: 10px;
}

.listing-hot-tag-hot {
    background: #FFE6E6;
    color: #D32F2F;
}

.listing-hot-tag-price {
    background: #FFF3E6;
    color: #FF7101;
}

.listing-hot-tag-seller {
    background: #E6F0FF;
    color: #1565C0;
}

.listing-hot-tag-fast {
    background: #E8F5E9;
    color: #2E7D32;
}

/* ===== Listing detail — live activity widget ===== */
.listing-live-activity {
    padding: 18px 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
}

.listing-live-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f1f1;
}

.listing-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2E7D32;
    box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.6);
    animation: listing-live-pulse 1.5s infinite;
}

@keyframes listing-live-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.6);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(46, 125, 50, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0);
    }
}

.listing-live-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.listing-live-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: #555;
}

.listing-live-list li:last-child {
    margin-bottom: 0;
}

.listing-live-list li i {
    color: #FF7101;
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.listing-live-list strong {
    color: #111;
    font-weight: 700;
}

/* ============================================
   Dealer Inquiry — post-submit success panel
   ============================================ */

.dealer-inquiry-success {
    text-align: center;
    padding: 32px 16px;
}

.dealer-inquiry-success .fa-check-circle {
    color: #2E7D32;
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

.dealer-inquiry-success h4 {
    font-weight: 700;
    margin-bottom: 8px;
}

.dealer-inquiry-success p {
    color: #555;
    margin-bottom: 0;
}

/* ============================================
   Seller landing — Hero VIN input
   ============================================ */
.seller-vin-input {
    flex: 1 1 240px;
    min-width: 220px;
    max-width: 360px;
    font-family: monospace;
    letter-spacing: 1px;
}

/* ============================================
   Seller landing — Features section
   (white bg variant of .dealer-benefits)
   ============================================ */
.dealer-benefits.seller-features {
    background: oklch(100% 0 0);
}

/* ============================================
   Seller landing — Pricing card
   ============================================ */
.seller-pricing-wrap {
    padding: 70px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.seller-pricing-shell {
    max-width: 760px;
    margin: 32px auto 0;
    padding: 2px;
    border-radius: 24px;
    background: linear-gradient(135deg, #FF7101 0%, #ff9a44 100%);
    box-shadow: 0 12px 40px rgba(255, 113, 1, 0.15);
}

.seller-pricing-card {
    border-radius: 22px;
    background: #fff;
    padding: 40px;
}

.seller-pricing-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.seller-pricing-amount {
    font-size: 80px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1;
}

.seller-pricing-amount small {
    font-size: 18px;
    color: #777;
    font-weight: 400;
    margin-left: 8px;
}

.seller-pricing-vs {
    color: #777;
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 14px;
}

.seller-pricing-includes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #eee;
}

.seller-pricing-includes div {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #333;
}

.seller-pricing-includes i {
    color: #FF7101;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .seller-pricing-card {
        padding: 28px 20px;
    }

    .seller-pricing-amount {
        font-size: 56px;
    }

    .seller-pricing-includes {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Seller landing — FAQ accordion
   ============================================ */
.seller-faq-wrap {
    padding: 70px 0;
    background: #fff;
}

.seller-faq-list {
    max-width: 760px;
    margin: 32px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.seller-faq-item {
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    background: #fff;
    padding: 20px 24px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.seller-faq-item[open] {
    border-color: rgba(255, 113, 1, 0.35);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.seller-faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 17px;
    color: #1a1a2e;
}

.seller-faq-item summary::-webkit-details-marker {
    display: none;
}

.seller-faq-item summary::after {
    content: "+";
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e6e6e6;
    border-radius: 999px;
    color: #FF7101;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform .2s ease, border-color .2s ease;
}

.seller-faq-item[open] summary::after {
    transform: rotate(45deg);
    border-color: rgba(255, 113, 1, 0.4);
}

.seller-faq-item p {
    margin: 12px 0 0;
    color: #555;
    line-height: 1.6;
    font-size: 15px;
}

.status-wrap {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    transition: all .25s ease;
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.pill-pending {
    background: #FAEEDA;
    color: #854F0B;
    border: 1px solid #FAC775;
}

.pill-contacted {
    background: #EAF3DE;
    color: #3B6D11;
    border: 1px solid #C0DD97;
}

.pill-na {
    background: #FCEBEB;
    color: #A32D2D;
    border: 1px solid #F7C1C1;
}

.dot-pending {
    background: #EF9F27;
}

.dot-contacted {
    background: #639922;
}

.dot-na {
    background: #E24B4A;
}

.status-select {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 7px 26px 7px 10px;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    appearance: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 10px center;
    transition: border .2s;
}

.status-select:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .1);
}

.view-car.check-availability-btn,
.box-car-list .content .view-car.check-availability-btn,
.box-car-list .content .inner1 .view-car.check-availability-btn,
.box-car-list .content .inner2 .view-car.check-availability-btn,
.list-car-list-1.list-car-grid-1 .box-car-list.style-2 .content .inner2 .view-car.check-availability-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: #FF7101;
    color: #fff;
    border: 1px solid #FF7101;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    line-height: 0.8;
    box-shadow: 0 4px 20px rgba(255, 113, 1, 0.35);
    transition: all 0.25s ease;
}

.view-car.check-availability-btn:hover,
.box-car-list .content .view-car.check-availability-btn:hover,
.box-car-list .content .inner1 .view-car.check-availability-btn:hover,
.box-car-list .content .inner2 .view-car.check-availability-btn:hover,
.list-car-list-1.list-car-grid-1 .box-car-list.style-2 .content .inner2 .view-car.check-availability-btn:hover {
    background: #e56400;
    border-color: #e56400;
    color: #fff;
    transform: scale(1.02);
    box-shadow: 0 6px 28px rgba(255, 113, 1, 0.45);
}

.days-box:has(.check-availability-btn) {
    display: block;
}

.listing-seller {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    margin-top: 12px;
    margin-bottom: 12px;
    border-top: 1px solid #eee;
    color: #555;
    font-size: 14px;
    font-weight: 500;
}

.listing-seller svg {
    color: #FF7101;
    width: 18px;
    height: 25px;
    flex-shrink: 0;
}

.listing-seller span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* When listing-seller is present, it provides the only divider —
   suppress the framework's default divider on .days-box / .inner2 .days-box */
.box-car-list:has(.listing-seller) .content .days-box,
.list-car-list-1.list-car-grid-1 .box-car-list.style-2:has(.listing-seller) .content .inner2 .days-box {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}
.auth-wrapper {
    max-width: 400px;
    margin: 0 auto;
    font-family: 'Neue Montreal', sans-serif; /* Upwork font vibe */
}

/* Divider with lines */
.divider-container {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
}

.divider-container::before, .divider-container::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e4ebe4;
}

.divider-text {
    padding: 0 15px;
    color: #5e6d55;
    font-size: 14px;
}

/* Button Layout */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border: 2px solid #108a00; /* Default Upwork Green border */
    border-radius: 20px; /* Full rounded corners */
    text-decoration: none;
    transition: background-color 0.2s;
    position: relative;
    margin-bottom: 12px;
}

/* White Style (Like your screenshot) */
.google-style {
    background-color: #fff;
    border: 1px solid #d5e0d5;
    color: #001e00;
}

.social-btn:hover {
    background-color: #f2f2f2;
}

.icon-wrapper {
    position: absolute;
    left: 18px; /* Perfectly aligned to the left */
    display: flex;
    align-items: center;
}

.btn-text {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Dashboard mobile header — hide the username dropdown and Add-Listing button.
   The hamburger now opens .sidebar-dashboard which already shows the user's
   profile + a "Browse Site" section, so the topbar avatar/name and action
   button are redundant on small screens. Bell stays. */
@media (max-width: 991px) {
    .main-header .header-account .box-avatar,
    .main-header .header-account .dashboard-menu,
    .main-header .header-account .flat-bt-top {
        display: none !important;
    }

    /* The theme has multiple competing rules on .header-account at <=1200px and
       <=767px (margin-right: 40-50px to reserve space for an Add-Listing button
       that we're now hiding). Rather than fight the cascade, take .header-account
       out of the flex flow entirely and pin it next to the absolutely-positioned
       hamburger. .main-header is position:relative (styles.css:113), so right:
       offsets are relative to the header bar's right edge. */
    .main-header .inner-container .header-account {
        position: absolute !important;
        top: 50% !important;
        right: 50px !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .main-header .header-account .notification-wrapper {
        margin: 0 !important;
    }
}

/* Sidebar (dashboard drawer) — tighten the top sections so the menu and the
   "Browse Site" block at the bottom are reachable without excessive scrolling.
   Default theme padding on .db-content is 30px top/bottom; that's too generous
   for the cramped mobile drawer. */
.sidebar-dashboard .db-content.db-logo {
    padding-top: 14px;
    padding-bottom: 14px;
}

.sidebar-dashboard .db-logo img {
    max-width: 160px;
}

.sidebar-dashboard .db-content.db-author {
    padding-top: 14px;
    padding-bottom: 14px;
}

.sidebar-dashboard .db-author .author .avatar img {
    width: 40px;
    height: 40px;
}

.sidebar-dashboard .db-content.db-list-menu {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* styles.css:9800 adds padding-top:30px to .sidebar-dashboard at <=767px,
   which is the lingering gap above the logo. Zero it out. */
@media (max-width: 767px) {
    .sidebar-dashboard {
        padding-top: 0 !important;
    }

    /* styles.css:9791 sets menu-item padding to 11px 30px at <=767px.
       Cozier vertical rhythm. */
    .sidebar-dashboard .db-list-menu ul li a {
        padding: 8px 16px !important;
    }

    .sidebar-dashboard .db-list-menu ul li:not(:last-child) {
        margin-bottom: 0;
    }
}

/* styles.css:9392 sets height: 100vh on .sidebar-dashboard. On iOS Safari,
   100vh includes the URL bar — so the bottom portion of the drawer is
   hidden behind the browser chrome and items there can't be scrolled into
   view. Use the dynamic viewport unit (dvh) where supported, enable
   touch scrolling, and add bottom padding so the last menu item clears
   any remaining bottom chrome. */
.sidebar-dashboard {
    height: 100dvh;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 60px;
}

/* When the dashboard drawer is open, prevent the page underneath from
   scrolling. Without this, touches on the drawer chain to body scroll on
   iOS — so the page slides while the user thinks they're scrolling the
   menu. The .sidebar-open class is toggled by dashboard.js open()/close(). */
body.sidebar-open {
    overflow: hidden;
}

/* On touch devices, :hover sticks on tap-and-scroll — the orange highlight
   stays on the menu item the finger brushed during a scroll. Suppress the
   hover styles where the device has no real hover (touchscreens). The
   .active rule below the framework's hover/active group still works
   because it's not gated. */
@media (hover: none) {
    .sidebar-dashboard .db-list-menu ul li a:hover {
        background: transparent;
        color: #fff !important;
    }

    .sidebar-dashboard .db-list-menu ul li a:hover * {
        opacity: inherit;
    }

    .sidebar-dashboard .db-list-menu ul li a:hover i {
        color: #4d5153;
    }
}

/* Fix iOS "tap-twice" issue on car cards.
   On touch-only devices the .hv-one:hover rules trigger a visibility/transform
   change on first tap, which Safari swallows as "show hover state" instead of
   firing the click on the title link. Disable those hover effects when there's
   no real hover capability so the first tap goes straight through to the link. */
@media (hover: none) {
    .hv-one:hover .change-heart,
    .hv-one .change-heart {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    .hv-one:hover .img-style::before {
        opacity: 0 !important;
    }
    .box-car-list .link-style-1 a,
    .box-car-list .content a {
        touch-action: manipulation;
    }
}