/* _content/RealOxy.Web.Core/Chat/ChatBox.razor.rz.scp.css */
/* _content/RealOxy.Web.Core/Chat/ChatInputBox.razor.rz.scp.css */
/* =====================================================
   ChatInputBox.razor.css — message composer
   ===================================================== */

.chat-input-wrapper[b-q8bni2ya7c] {
    flex-shrink: 0;
    background: var(--surface, #fff);
    border-top: 1px solid var(--border, #e5e7eb);
    padding: 10px 16px 14px;
    width: 100%;
    box-sizing: border-box;
}

.chat-input-inner[b-q8bni2ya7c] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-alt, #faf6f3);
    border: 1.5px solid var(--border-strong, #e2d8cc);
    border-radius: 50px;
    padding: 6px 6px 6px 14px;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.chat-input-inner:focus-within[b-q8bni2ya7c] {
    border-color: var(--brand, #7b4a34);
    background: var(--surface, #fff);
    box-shadow: 0 0 0 3px rgba(123, 74, 52, 0.1);
}

.chat-input-field[b-q8bni2ya7c] {
    flex: 1 1 0%;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font, inherit);
    font-size: 15px;
    color: var(--text-primary, #1a1a1a);
    outline: none;
    line-height: 1.5;
    padding: 4px 0;
}

.chat-input-field[b-q8bni2ya7c]::placeholder {
    color: var(--text-muted, #9ca3af);
}

.chat-send-btn[b-q8bni2ya7c] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand, #7b4a34);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    transition: background 0.2s, transform 0.1s;
    padding: 0;
    outline: none;
}

.chat-send-btn:hover[b-q8bni2ya7c] {
    background: var(--brand-dark, #5a3626);
}

.chat-send-btn:active[b-q8bni2ya7c] {
    transform: scale(0.92);
}

.chat-send-btn i[b-q8bni2ya7c] {
    font-size: 15px;
    margin-left: 2px;
    line-height: 1;
}

/* ---------- Image attach ---------- */
.chat-attach-wrap[b-q8bni2ya7c] {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hidden file input: hidden across all selector scopes */
.chat-file-input[b-q8bni2ya7c],
[b-q8bni2ya7c] .chat-file-input,
[b-q8bni2ya7c] input[type="file"],
.chat-attach-wrap[b-q8bni2ya7c]  input {
    display: none !important;
    position: absolute !important;
    width: 0.1px !important;
    height: 0.1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.chat-attach-btn[b-q8bni2ya7c] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--text-secondary, #6b7280);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    transition: color 0.15s, background 0.15s, transform 0.1s;
    user-select: none;
    -webkit-user-select: none;
}

.chat-attach-btn:hover[b-q8bni2ya7c] {
    color: var(--brand, #7b4a34);
    background: var(--brand-pale, #faf2eb);
}

.chat-attach-btn:active[b-q8bni2ya7c] {
    transform: scale(0.92);
}

/* Attachment preview above the composer */
.attach-preview[b-q8bni2ya7c] {
    position: relative;
    display: inline-block;
    margin-bottom: 8px;
}

.attach-preview img[b-q8bni2ya7c] {
    display: block;
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border-strong, #e2d8cc);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}

.attach-preview.uploading[b-q8bni2ya7c] {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 12px);
    background: var(--brand-pale, #faf2eb);
    border: 1px dashed var(--brand-light, #d4a373);
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
}

.attach-remove[b-q8bni2ya7c] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-dark, #5a3626);
    color: #fff;
    border: none;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .chat-input-wrapper[b-q8bni2ya7c] {
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .chat-input-inner[b-q8bni2ya7c] {
        gap: 6px;
        padding: 5px 5px 5px 12px;
        border-radius: 40px;
    }

    .chat-attach-btn[b-q8bni2ya7c] {
        width: 32px;
        height: 32px;
        font-size: 17px;
    }

    .chat-input-field[b-q8bni2ya7c] {
        font-size: 14.5px;
    }

    .chat-send-btn[b-q8bni2ya7c] {
        width: 34px;
        height: 34px;
    }

    .chat-send-btn i[b-q8bni2ya7c] {
        font-size: 14px;
    }

    .attach-preview img[b-q8bni2ya7c],
    .attach-preview.uploading[b-q8bni2ya7c] {
        width: 64px;
        height: 64px;
    }
}
/* _content/RealOxy.Web.Core/Chat/ChatPopup.razor.rz.scp.css */
.chat-popup[b-j3zelf31mz] {
    position: fixed;
    overflow: hidden;
    z-index: 124;
    width:350px;
    bottom:0px;
}
.chat-popup-header[b-j3zelf31mz] {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
    background: #674E34;
    color: #FFFFFF;
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    border: 1px solid #674E34;
    align-items:center;
}
.chat-popup-content[b-j3zelf31mz] {
    background: #ffffff;
    color: black;
    padding: 10px;
    height: 500px;
    overflow: hidden;
    border: 1px solid #674E3422;
    /*box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.1);*/
}

.chat-icon[b-j3zelf31mz]{
    margin-right:5px;
    font-size:15px;
}
/*

.chat-popup {
    padding: 0px;
}


@media(min-width:800px) {
    .chat-popup {
        padding-left: 50px;
        padding-right: 50px;
        background: red;
    }
}*/
@media(min-width:1200px) {
    .chat-popup[b-j3zelf31mz] {
            right: 0px;
        }
}

@media(min-width:1400px) {
    .chat-popup[b-j3zelf31mz] {
        right: 20px;
    }
}
/* _content/RealOxy.Web.Core/Chat/ChatToastHost.razor.rz.scp.css */
/* =====================================================
   ChatToastHost.razor.css — global "new message" toast
   ===================================================== */

.chat-toast-host[b-vrjjkb62b6] {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2100; /* above headers (1020), below modals */
    animation: chat-toast-in-b-vrjjkb62b6 0.25s ease;
}

.chat-toast[b-vrjjkb62b6] {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(92vw, 380px);
    padding: 12px 18px;
    border-radius: var(--radius-md, 14px);
    background: var(--brand-dark, #3D2E1E);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(61, 46, 30, 0.28));
    cursor: pointer;
}

.chat-toast i[b-vrjjkb62b6] {
    color: #F2C14E; /* gold accent */
    font-size: 16px;
}

.chat-toast span[b-vrjjkb62b6] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes chat-toast-in-b-vrjjkb62b6 {
    from {
        opacity: 0;
        transform: translate(-50%, -8px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
/* _content/RealOxy.Web.Core/Chat/GoToChatButton.razor.rz.scp.css */
/* =========================
   TEXT SCALING (FIXED)
========================= */

/* Default (Desktop) */
.small-text[b-mkcx3uuwwi] {
    font-size: 1rem;
    line-height: 1.5;
}

/* Mobile only */
@media (max-width: 576px) {
    .small-text[b-mkcx3uuwwi] {
        font-size: 0.85rem;
    }

        .small-text h1[b-mkcx3uuwwi],
        .small-text h2[b-mkcx3uuwwi],
        .small-text h3[b-mkcx3uuwwi],
        .small-text h4[b-mkcx3uuwwi],
        .small-text h5[b-mkcx3uuwwi],
        .small-text h6[b-mkcx3uuwwi],
        .small-text span:not(.star):not(.material-symbols-outlined)[b-mkcx3uuwwi],
        .small-text p[b-mkcx3uuwwi],
        .small-text a[b-mkcx3uuwwi],
        .small-text small[b-mkcx3uuwwi],
        .small-text label[b-mkcx3uuwwi],
        .small-text button[b-mkcx3uuwwi],
        .small-text input[b-mkcx3uuwwi],
        .small-text textarea[b-mkcx3uuwwi],
        .small-text select[b-mkcx3uuwwi],
        .small-text .btn[b-mkcx3uuwwi] {
            font-size: 0.85rem;
        }
}


/* =========================
   POPUP CONTAINER FIX
========================= */

.chat-button-wrapper[b-mkcx3uuwwi] {
    border-radius: var(--border-radius-banner);
    max-width: 500px;
    width: 100%;
    margin: auto;
    overflow: hidden;
}


/* =========================
   INPUT + FORM FIX
========================= */

.form-control[b-mkcx3uuwwi] {
    font-size: 1rem;
    padding: 12px 14px;
}

@media (max-width: 576px) {
    .form-control[b-mkcx3uuwwi] {
        font-size: 0.9rem;
        padding: 10px 12px;
    }
}


/* =========================
   BUTTON STYLING
========================= */

.btn-outline-custom[b-mkcx3uuwwi] {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
}

    .btn-outline-custom:hover[b-mkcx3uuwwi] {
        background-color: var(--color-primary);
        color: #fff;
    }


/* Button layout improvement */
.d-flex.flex-column.flex-md-row[b-mkcx3uuwwi] {
    gap: 12px;
}

/* Desktop button alignment */
@media (min-width: 768px) {
    .d-flex.flex-column.flex-md-row button[b-mkcx3uuwwi] {
        width: auto !important;
        flex: 1;
    }
}


/* =========================
   TEXT PRESERVE
========================= */

.preserve-text[b-mkcx3uuwwi] {
    white-space: pre-wrap;
    word-break: break-word;
}


/* =========================
   MOBILE SPACING IMPROVEMENT
========================= */

@media (max-width: 576px) {
    .chat-button-wrapper[b-mkcx3uuwwi] {
        width: 100%;
        max-width: 100%;
        padding: 10px;
    }
}
/* _content/RealOxy.Web.Core/Chat/InComingMessage.razor.rz.scp.css */
/* =====================================================
   InComingMessage.razor.css — received message bubble
   ===================================================== */

.received_msg[b-1bxl0vu95t] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 4px;
}

.received_withd_msg[b-1bxl0vu95t] {
    max-width: 65%;
    min-width: 80px;
}

.received_withd_msg p[b-1bxl0vu95t] {
    background: var(--surface);
    color: var(--text-primary);
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    margin: 0;
    padding: 12px 16px;
    word-break: break-word;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.time_date[b-1bxl0vu95t] {
    color: var(--text-muted);
    display: block;
    font-size: 11px;
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: left;
}

/* Image messages */
.msg-image-in[b-1bxl0vu95t] {
    display: block;
    max-width: 260px;
    width: auto;
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

@media (max-width: 700px) {
    .received_withd_msg[b-1bxl0vu95t] {
        max-width: 85%;
    }
}
/* _content/RealOxy.Web.Core/Chat/ItemToChatAboutView.razor.rz.scp.css */
/* =====================================================
   ItemToChatAboutView.razor.css — product preview card
   ===================================================== */

.item-preview-card[b-tswq4b41px] {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s ease;

    /* Default: inside outgoing (dark) bubble */
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.item-preview-card:hover[b-tswq4b41px] {
    background: rgba(255, 255, 255, 0.22);
}

.item-preview-title[b-tswq4b41px] {
    flex: 1;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-thumb[b-tswq4b41px] {
    width: 72px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
}
/* _content/RealOxy.Web.Core/Chat/OutGoingMessage.razor.rz.scp.css */
/* =====================================================
   OutGoingMessage.razor.css — sent message bubble
   ===================================================== */

.outgoing_msg[b-xjsxq8i8c5] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    margin-bottom: 4px;
}

.outgoing_withd_msg[b-xjsxq8i8c5] {
    max-width: 65%;
    min-width: 80px;
}

.outgoing_withd_msg p[b-xjsxq8i8c5] {
    background: var(--brand);
    color: #fff;
    border-radius: 18px;
    border-bottom-right-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    margin: 0;
    padding: 12px 16px;
    word-break: break-word;
    box-shadow: var(--shadow-sm);
}

.time_date[b-xjsxq8i8c5] {
    color: var(--text-muted);
    display: block;
    font-size: 11px;
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: right;
}

/* Image messages */
.msg-image[b-xjsxq8i8c5] {
    display: block;
    max-width: 260px;
    width: auto;
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

/* Delivery ticks (sent / delivered / read) */
.msg-tick[b-xjsxq8i8c5] {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    vertical-align: -1px;
}

.msg-tick.tick-pending[b-xjsxq8i8c5] {
    color: var(--text-muted);
}

.msg-tick.tick-delivered[b-xjsxq8i8c5] {
    color: var(--text-secondary);
}

.msg-tick.tick-read[b-xjsxq8i8c5] {
    color: #C9922E; /* gold — the "read" accent of the brand */
}

@media (max-width: 700px) {
    .outgoing_withd_msg[b-xjsxq8i8c5] {
        max-width: 85%;
    }
}
/* _content/RealOxy.Web.Core/Chat/UserDetail.razor.rz.scp.css */
/* =====================================================
   UserDetail.razor.css — conversation list item
   ===================================================== */

.chat_list[b-kw6schru7u] {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease;
    gap: 12px;
}

.chat_list:hover[b-kw6schru7u] {
    background: var(--brand-pale);
}

.chat_list.active_chat[b-kw6schru7u] {
    background: var(--brand-pale);
    border-left: 3px solid var(--brand);
}

/* ---------- Avatar ---------- */
.chat-avatar[b-kw6schru7u] {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.chat-avatar img[b-kw6schru7u] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-avatar-fallback[b-kw6schru7u] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-pale);
    color: var(--brand);
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--brand-light);
}

/* Online dot — bottom-right of the avatar */
.online-dot[b-kw6schru7u] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #C8CFC4; /* neutral = offline */
    border: 2px solid var(--surface);
}

.online-dot.visible[b-kw6schru7u] {
    background: #3FA66A; /* green = active now */
}

/* ---------- Text ---------- */
.chat-item-body[b-kw6schru7u] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.chat-item-toprow[b-kw6schru7u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.chat-item-name[b-kw6schru7u] {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-item-time[b-kw6schru7u] {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
}

.chat-item-preview[b-kw6schru7u] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-item-preview.unread[b-kw6schru7u] {
    color: var(--text-primary);
    font-weight: 500;
}

.chat-item-preview.typing[b-kw6schru7u] {
    color: #C9922E; /* gold — matches the "read" tick accent */
    font-style: italic;
}

/* ---------- Unread badge ---------- */
.unread-badge[b-kw6schru7u] {
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* _content/RealOxy.Web.Core/Controls/Activity/ForYouCard.razor.rz.scp.css */
/* Card styles live with the card itself so it renders identically in the
   home strip and on the /activity page (scoped CSS follows the component). */
.for-you-card[b-ppef27cp5i] {
    background: #fff;
    border: 1px solid #EFE7DC;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.for-you-card:hover[b-ppef27cp5i] {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.for-you-card-img-wrap[b-ppef27cp5i] {
    height: 110px;
    background: var(--brand-pale, #F4EDE5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.for-you-card-img[b-ppef27cp5i] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.for-you-card-noimg[b-ppef27cp5i] {
    font-size: 28px;
    color: var(--brand-light, #C4AC91);
}

.for-you-card-body[b-ppef27cp5i] {
    padding: 8px 10px 10px;
}

.for-you-card-title[b-ppef27cp5i] {
    font-size: 13px;
    font-weight: 600;
    color: #1f2933;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.for-you-card-price[b-ppef27cp5i] {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand, #674E34);
}
/* _content/RealOxy.Web.Core/Controls/Activity/ForYouSection.razor.rz.scp.css */
.for-you-section[b-v1na4yhplx] {
    width: 100%;
    margin: 20px 0;
}

@media (max-width: 768px) {
    .for-you-section[b-v1na4yhplx] {
        margin: 4px 0;
    }
}

.for-you-row-header[b-v1na4yhplx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 6px;
}

@media (max-width: 768px) {
    .for-you-row-header[b-v1na4yhplx] {
        padding: 0 16px;
    }
}

.for-you-row-title[b-v1na4yhplx] {
    font-size: 16px;
    font-weight: 900;
    margin: 0;
    padding: 0;
    text-align: left;
    color: var(--brand-dark, #3D2E1E);
    display: flex;
    align-items: center;
    gap: 8px;
}

.for-you-row-icon[b-v1na4yhplx] {
    color: var(--brand, #674E34);
    font-size: 15px;
}

.for-you-row-icon--gold[b-v1na4yhplx] {
    color: #C9922E;
}

.for-you-more[b-v1na4yhplx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #555;
    transition: color 0.2s ease;
    margin: 0;
    padding: 0;
}

.for-you-more:hover[b-v1na4yhplx] {
    color: #000;
}

.for-you-more i[b-v1na4yhplx] {
    font-size: 14px;
}

/* Horizontal scroll row — compact cards */
.for-you-strip[b-v1na4yhplx] {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 8px 20px 14px;
    scroll-padding-left: 20px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
}

@media (max-width: 768px) {
    .for-you-strip[b-v1na4yhplx] {
        gap: 14px;
        padding: 6px 16px 10px;
        scroll-padding-left: 16px;
    }
}

.for-you-strip > [role="listitem"][b-v1na4yhplx] {
    flex: 0 0 176px;
    width: 176px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.for-you-strip > [role="listitem"] > *[b-v1na4yhplx] {
    width: 100%;
}

.for-you-strip[b-v1na4yhplx]::-webkit-scrollbar {
    height: 6px;
}

.for-you-strip[b-v1na4yhplx]::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* _content/RealOxy.Web.Core/Controls/BannerForHomePage.razor.rz.scp.css */



/* ---------- Wrapper ---------- */
.banner-wrapper[b-z2svis1ew0] {
    width: 100%;
    padding: 0 16px 0px;
    box-sizing: border-box;
    overflow: hidden;
}

    /* ---------- Slick Track Overrides ---------- */
    .banner-wrapper .slick-slider[b-z2svis1ew0],
    .banner-wrapper .slick-list[b-z2svis1ew0] {
        width: 100%;
        overflow: visible !important; /* lets side cards peek */
    }

    .banner-wrapper .slick-track[b-z2svis1ew0] {
        display: flex !important;
        align-items: center;
        gap: 0; /* gap handled by slide padding */
    }

/* ---------- Slide ---------- */
.banner-slide[b-z2svis1ew0] {
    padding: 8px ;
    outline: none;
    transition: transform var(--transition);
}

/* ---------- Card ---------- */
.banner-card[b-z2svis1ew0] {
    position: relative;
    border-radius: var(--border-radius-input);
    overflow: hidden;
    box-shadow: var(--banner-shadow);
    background: #ffffff;
    transition: box-shadow var(--transition), transform var(--transition);
    cursor: pointer;
}

    .banner-card:hover[b-z2svis1ew0] {
        box-shadow: var(--banner-shadow-hover);
    }

/* ---------- Image ---------- */
.banner-image[b-z2svis1ew0] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--border-radius-input);
    aspect-ratio: 16 / 7;
}

/* ---------- Skeleton / Loading ---------- */
.slide-bg[b-z2svis1ew0] {
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: var(--border-radius-input);
    background-size: cover;
    background-position: center;
    animation: shimmer-b-z2svis1ew0 1.6s ease-in-out infinite;
}

@keyframes shimmer-b-z2svis1ew0 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}


/* ---------- Dots ---------- */
.banner-wrapper .slick-dots[b-z2svis1ew0] {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}

    .banner-wrapper .slick-dots li button[b-z2svis1ew0] {
        appearance: none;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: #ccc;
        padding: 0;
        cursor: pointer;
        font-size: 0;
        transition: background var(--transition), transform var(--transition), width var(--transition);
    }

    .banner-wrapper .slick-dots li.slick-active button[b-z2svis1ew0] {
        
        width: 24px;
        border-radius: 4px;
    }


@media (max-width: 575.98px) {


    .banner-slide[b-z2svis1ew0] {
        padding:0px;
    }

    .banner-card[b-z2svis1ew0] {
        border-radius: var(--border-radius-input);
    }

    .banner-image[b-z2svis1ew0],
    .slide-bg[b-z2svis1ew0] {
        aspect-ratio: 16 / 7;
        border-radius: var(--border-radius-input);
    }
}

/* Tablet — 2 visible cards */
@media (min-width: 576px) and (max-width: 991.98px) {
    .banner-image[b-z2svis1ew0],
    .slide-bg[b-z2svis1ew0] {
        aspect-ratio: 16 / 7;
    }
}


/* _content/RealOxy.Web.Core/Controls/Cards/AdApprovalCard.razor.rz.scp.css */
.approval-sub-card[b-8bc00faexl] {
    background: var(--color-bg-white);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 24px;
}
.section-title[b-8bc00faexl] {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
    color: #111;
}
/* _content/RealOxy.Web.Core/Controls/Cards/AddEditReviewCard.razor.rz.scp.css */


.rfc-card[b-ja76vfvr8a] {
    background: #fdf8f4;
    border: 1.5px solid #e8ddd5;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Title ── */
.rfc-title[b-ja76vfvr8a] {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ── Field ── */
.rfc-field[b-ja76vfvr8a] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.rfc-label[b-ja76vfvr8a] {
    font-size: 11px;
    font-weight: 600;
    color: #9e8878;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Star Picker ── */
.rfc-star-picker[b-ja76vfvr8a] {
    display: flex;
    gap: 4px;
}

.rfc-star[b-ja76vfvr8a] {
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.12s, transform 0.12s;
}

    .rfc-star:hover[b-ja76vfvr8a] {
        transform: scale(1.2);
    }

/* ── Textarea ── */
.rfc-textarea[b-ja76vfvr8a] {
    width: 100%;
    border: 1.5px solid #e8ddd5;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13px;
    color: #1a1208;
    background: #ffffff;
    resize: vertical;
    outline: none;
    font-family: inherit;
    transition: border-color 0.18s;
    min-height: 80px;
}

    .rfc-textarea[b-ja76vfvr8a]::placeholder {
        color: #d9cfc8;
    }

    .rfc-textarea:focus[b-ja76vfvr8a] {
        border-color: var(--color-primary);
    }

/* ── Actions ── */
.rfc-actions[b-ja76vfvr8a] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Cancel button (edit mode only) */
.rfc-btn-cancel[b-ja76vfvr8a] {
    padding: 10px 16px;
    background: transparent;
    border: 1.5px solid #e8ddd5;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #9e8878;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: border-color 0.15s, color 0.15s;
}

    .rfc-btn-cancel:hover[b-ja76vfvr8a] {
        border-color: #9e8878;
        color: #4a3728;
    }

/* Submit button */
.rfc-btn-submit[b-ja76vfvr8a] {
    flex: 1;
    padding: 11px;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background 0.18s, transform 0.12s;
    box-shadow: 0 4px 12px rgba(103,78,52,0.18);
}

/* In edit mode, don't stretch full width */
.rfc-btn-submit--edit[b-ja76vfvr8a] {
    flex: unset;
    padding: 10px 20px;
    box-shadow: none;
}

.rfc-btn-submit:hover:not(:disabled)[b-ja76vfvr8a] {
    background: #8b6b4a;
    transform: translateY(-1px);
}

.rfc-btn-submit:disabled[b-ja76vfvr8a] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── Spinner ── */
.rfc-spinner[b-ja76vfvr8a] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rfc-spin-b-ja76vfvr8a 0.7s linear infinite;
    display: inline-block;
}

@keyframes rfc-spin-b-ja76vfvr8a {
    to {
        transform: rotate(360deg);
    }
}
/* _content/RealOxy.Web.Core/Controls/Cards/AdDescriptionCard.razor.rz.scp.css */


.ad-desc[b-up05b0gzuw] {
    padding: 16px 0;
}

.ad-desc__title[b-up05b0gzuw] {
    color: var(--color-secondary);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px;
}

.ad-desc__body[b-up05b0gzuw] {
    font-size: 14px;
    color: #333;
    line-height: 1.65;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    transition: max-height .3s ease;
}

.ad-desc__body--clamped[b-up05b0gzuw] {
    display: -webkit-box;
    -webkit-line-clamp: var(--clamp-lines, 4);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ad-desc__toggle[b-up05b0gzuw] {
    background: none;
    border: none;
    padding: 6px 0 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary);
    display: inline-block;
    transition: opacity .15s;
}

    .ad-desc__toggle:hover[b-up05b0gzuw] {
        opacity: .75;
    }
/* _content/RealOxy.Web.Core/Controls/Cards/AdDetailsCard.razor.rz.scp.css */


.ad-details[b-6bosy7utd6] {
    padding: 16px 0;
}

.ad-details__title[b-6bosy7utd6] {
    color: var(--color-secondary);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: .1px;
}

.ad-details__list[b-6bosy7utd6] {
    display: flex;
    flex-direction: column;
}

.ad-details__row[b-6bosy7utd6] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
}

    .ad-details__row:last-child[b-6bosy7utd6] {
        border-bottom: none;
    }

.ad-details__label[b-6bosy7utd6] {
    font-size: 14px;
    color: #555;
    flex-shrink: 0;
}

.ad-details__value[b-6bosy7utd6] {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: right;
    word-break: break-word;
}
/* _content/RealOxy.Web.Core/Controls/Cards/AdLocationCard.razor.rz.scp.css */


.ad-location[b-48p8j88bl1] {
    padding: 16px 0;
}

.ad-location__title[b-48p8j88bl1] {
    color: var(--color-secondary);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
}

.ad-location__text[b-48p8j88bl1] {
    font-size: 14px;
    color: #333;
    margin: 0 0 12px;
}

.ad-location__map[b-48p8j88bl1] {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #efefef;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    aspect-ratio: 16 / 7; 
    position: relative;
}

.ad-location__map-img[b-48p8j88bl1] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: none;
}
/* _content/RealOxy.Web.Core/Controls/Cards/AdTitleCard.razor.rz.scp.css */
.ad-header[b-yob8u3s8nw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.ad-header__price[b-yob8u3s8nw] {
    font-size: 26px;
    font-weight: 700;
    color: #6b4c2e; /* brown tone like screenshot */
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.ad-header__currency[b-yob8u3s8nw] {
    font-size: 22px;
}

.ad-header__amount[b-yob8u3s8nw] {
    letter-spacing: 0.5px;
}

.ad-header__unit[b-yob8u3s8nw] {
    font-size: 16px;
    font-weight: 600;
    color: #6b4c2e;
}

.ad-header__title[b-yob8u3s8nw] {
    font-size: 24px;
    font-weight: 700;
    margin: 6px 0 4px 0;
}

.ad-header__posted[b-yob8u3s8nw] {
    font-size: 14px;
    color: #666;
}

.ad-header__right[b-yob8u3s8nw] {
    display: flex;
    gap: 12px;
}

.ad-action-btn[b-yob8u3s8nw] {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    font-weight: 500;
    padding: 6px 14px;
    border: 1px solid var(--color-secondary);
    background-color: transparent;
    color: var(--color-secondary);
    transition: all 0.2s ease;
}

    .ad-action-btn i[b-yob8u3s8nw] {
        font-size: 16px;
    }

    /* Hover State */
    .ad-action-btn:hover[b-yob8u3s8nw] {
        background-color: #fff8f3;
        border-color: var(--color-secondary);
        color: var(--color-secondary);
    }

    /* Remove Bootstrap focus glow */
    .ad-action-btn:focus[b-yob8u3s8nw],
    .ad-action-btn:active[b-yob8u3s8nw] {
        box-shadow: none;
    }
/* _content/RealOxy.Web.Core/Controls/Cards/AmenityCard.razor.rz.scp.css */
.brand-card[b-0fmfd7jgjz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-radius: 10px;
    background: #f8f9fb;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid #00000005;
}

    .brand-card:hover[b-0fmfd7jgjz] {
        /*transform: translateY(-2px);*/
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.08);
    }

.brand-card__content[b-0fmfd7jgjz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand-card__label[b-0fmfd7jgjz] {
    font-size: 11px;
    color: var(--color-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.brand-card__value[b-0fmfd7jgjz] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #212529);
}

.brand-card__actions[b-0fmfd7jgjz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .brand-card__actions i[b-0fmfd7jgjz] {
        font-size: 16px;
        color: var(--color-icon-default, #adb5bd);
        cursor: pointer;
        transition: color 0.15s ease, transform 0.15s ease;
    }

        .brand-card__actions i:hover[b-0fmfd7jgjz] {
            color: var(--color-icon-hover, #495057);
            transform: scale(1.1);
        }

        .brand-card__actions i.bi-trash:hover[b-0fmfd7jgjz] {
            color: #dc3545;
        }

        .brand-card__actions i.bi-pencil:hover[b-0fmfd7jgjz] {
            color: var(--color-primary, #0d6efd);
        }
/* _content/RealOxy.Web.Core/Controls/Cards/CategoryCard.razor.rz.scp.css */
/* ===============================
   CARD LAYOUT
================================ */

.brand-card[b-c3z8j40mvo] {
    display: flex;
    border-color: 1px solid #00000010;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-radius: 10px;
    background: #f8f9fb;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 20px var(--color-shadow-soft);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .brand-card:hover[b-c3z8j40mvo] {
        /*transform: translateY(-2px);*/
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12);
    }

/* ===============================
   LEFT SECTION
================================ */

.brand-card__left[b-c3z8j40mvo] {
    display: flex;
    align-items: center;
    gap: 14px;
}
.brand-card--selected[b-c3z8j40mvo] {
    border: 2px solid var(--color-primary);
    background-color: rgba(var(--color-primary), 0.06);
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.15);
}
.brand-card__image[b-c3z8j40mvo] {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    background: #ffffff;
}

.brand-card__image--placeholder[b-c3z8j40mvo] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
}

    .brand-card__image--placeholder i[b-c3z8j40mvo] {
        font-size: 26px;
        color: var(--color-text-muted);
    }

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

.brand-card__content[b-c3z8j40mvo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand-card__label[b-c3z8j40mvo] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.brand-card__value[b-c3z8j40mvo] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ===============================
   RIGHT SECTION
================================ */

.brand-card__right[b-c3z8j40mvo] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.brand-card__actions[b-c3z8j40mvo] {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .brand-card__actions i[b-c3z8j40mvo] {
        font-size: 16px;
        color: var(--color-icon-default);
        cursor: pointer;
        transition: color 0.15s ease;
    }

        .brand-card__actions i:hover[b-c3z8j40mvo] {
            color: var(--color-icon-hover);
        }

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

.arrow-btn[b-c3z8j40mvo] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

    .arrow-btn:hover[b-c3z8j40mvo] {
        background: #e2e6ea;
    }

    .arrow-btn i[b-c3z8j40mvo] {
        font-size: 14px;
    }
/* _content/RealOxy.Web.Core/Controls/Cards/FavouriteCard.razor.rz.scp.css */
/* ─────────────────────────────────────────────
   Product Card Wrapper
───────────────────────────────────────────── */
.product-card[b-p1620ns8cj] {
    position: relative;
    background: #ffffff;
    border-radius: var(--border-radius-input);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .22s ease, transform .22s ease;
    max-width: 100%;
    width: 100%;
}
.product-card-fixed-width[b-p1620ns8cj] {
    position: relative;
    background: #ffffff;
    border-radius: var(--border-radius-input);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .22s ease, transform .22s ease;
    max-width: 100%;
    width: 100%;
    flex: 0 0 300px; /* card width */
    width: 300px;
}

    .product-card:hover[b-p1620ns8cj] {
        box-shadow: 0 8px 24px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.08);
        transform: translateY(-3px);
    }

/* ─────────────────────────────────────────────
   Badge
───────────────────────────────────────────── */
.pc-badge[b-p1620ns8cj] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 4px;
    pointer-events: none;
}

/* ─────────────────────────────────────────────
   Gallery Section (Uniform Height)
───────────────────────────────────────────── */
.pc-gallery[b-p1620ns8cj] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 265px; /* 185 (main) + 80 (thumbs) */
}

/* Main Image */
.pc-img-main[b-p1620ns8cj] {
    height: 185px;
    overflow: hidden;
}
    .pc-img-main img[b-p1620ns8cj] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: var(--border-radius-input);
        transition: transform .35s ease;
    }
.pc-img-main-single[b-p1620ns8cj] {
    height: 265px;
    overflow: hidden;
}

    .pc-img-main-single img[b-p1620ns8cj] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: var(--border-radius-input);
        transition: transform .35s ease;
    }

.product-card:hover .pc-img-main img[b-p1620ns8cj] {
    transform: scale(1.04);
}

/* ─────────────────────────────────────────────
   Thumbnails
───────────────────────────────────────────── */
.pc-thumbs[b-p1620ns8cj] {
    display: grid;
    gap: 6px;
    height: 80px;
}

/* Hide thumbs for single image but preserve layout height */
/*.pc-gallery--single .pc-thumbs {
    visibility: hidden;
}*/

/* Thumbnail Layout Variants */
.pc-thumbs--1[b-p1620ns8cj] {
    grid-template-columns: 1fr;
}

.pc-thumbs--2[b-p1620ns8cj] {
    grid-template-columns: 1fr 1fr;
}

.pc-thumbs--3[b-p1620ns8cj] {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Individual Thumbnail */
.pc-thumb[b-p1620ns8cj] {
    position: relative;
    overflow: hidden;
}

    .pc-thumb img[b-p1620ns8cj] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: var(--border-radius-input);
        transition: transform .3s ease;
    }

.product-card:hover .pc-thumb img[b-p1620ns8cj] {
    transform: scale(1.06);
}

/* More Images Overlay */
.pc-thumb--more img[b-p1620ns8cj] {
    filter: brightness(.55);
}

.pc-more-overlay[b-p1620ns8cj] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    pointer-events: none;
}

/* ─────────────────────────────────────────────
   Card Body
───────────────────────────────────────────── */
.pc-body[b-p1620ns8cj] {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Price */
.pc-price[b-p1620ns8cj] {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -.3px;
    line-height: 1.1;
}

.pc-currency[b-p1620ns8cj] {
    font-size: 18px;
    font-weight: 700;
    margin-right: 1px;
}

/* Title */
.pc-title[b-p1620ns8cj] {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #222;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta Info */
.pc-meta[b-p1620ns8cj] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #666;
}

.pc-date[b-p1620ns8cj] {
    color: #888;
    font-size: 11.5px;
}

.pc-meta-icon[b-p1620ns8cj] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: #999;
}
/* _content/RealOxy.Web.Core/Controls/Cards/ListReviewCard.razor.rz.scp.css */
/* ReviewListCard.razor.css */
.rlc-card[b-kuahzf1soz] {
    padding: 16px 0;
    border-bottom: 1px solid #e8ddd5;
    display: flex;
    flex-direction: column;
}

    .rlc-card:last-child[b-kuahzf1soz] {
        border-bottom: none;
        padding-bottom: 0;
    }

.rlc-top[b-kuahzf1soz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rlc-left[b-kuahzf1soz] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.rlc-avatar[b-kuahzf1soz] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b6b4a, #c69c6d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.rlc-meta[b-kuahzf1soz] {
    flex: 1;
}

.rlc-name[b-kuahzf1soz] {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1208;
    margin-bottom: 4px;
}

.rlc-stars[b-kuahzf1soz] {
    display: flex;
    gap: 2px;
}

.rlc-star[b-kuahzf1soz] {
    font-size: 13px;
}

    .rlc-star.filled[b-kuahzf1soz] {
        color: #e6a817;
    }

    .rlc-star.empty[b-kuahzf1soz] {
        color: #d9cfc8;
    }

.rlc-date[b-kuahzf1soz] {
    font-size: 11px;
    color: #9e8878;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}

.rlc-text[b-kuahzf1soz] {
    font-size: 13px;
    color: #4a3728;
    line-height: 1.65;
    margin: 8px 0 0;
}
/* _content/RealOxy.Web.Core/Controls/Cards/LocationCard.razor.rz.scp.css */
/* SEARCH BAR */
.location-search[b-pftnymkdla] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    
    border-bottom: 1px solid var(--color-border-default);
    margin-bottom: 14px;
}

    .location-search i[b-pftnymkdla] {
        font-size: 16px;
        color: var(--color-text-muted);
    }

    .location-search input[b-pftnymkdla] {
        border: none;
        outline: none;
        width: 100%;
        font-size: 14px;
    }

.clear-btn[b-pftnymkdla] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--color-border-default);
    font-size: 14px;
    cursor: pointer;
}
/* CURRENT LOCATION */
.current-location[b-pftnymkdla] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    margin-bottom: 22px;
}

    .current-location i[b-pftnymkdla] {
        font-size: 16px;
    }


/* ADDRESS LIST */
.address-list[b-pftnymkdla] {
    flex:1;
    flex-grow:1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow:auto;
    padding-bottom:12px;
}

.address-item[b-pftnymkdla] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    
    border-bottom: 1px solid var(--color-border-default);
    cursor: pointer;
    transition: all 0.2s ease;
}

.address-text[b-pftnymkdla] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.address-item i[b-pftnymkdla] {
    font-size: 18px;
    color: var(--color-text-muted);
}

.address-item:hover[b-pftnymkdla] {
    border-color: var(--color-primary);
    background: var(--color-status-success-bg);
}

    .address-item:hover i[b-pftnymkdla] {
        color: var(--color-primary);
    }

.address-item:active[b-pftnymkdla] {
    transform: scale(0.99);
}
/* _content/RealOxy.Web.Core/Controls/Cards/LocationSubCategoryCard.razor.rz.scp.css */
.city-card[b-xyzxb3wuzu] {
    background: #f6f4f1;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: all 0.25s ease;
}

    .city-card:hover[b-xyzxb3wuzu] {
        transform: translateY(-4px);
    }

.city-header[b-xyzxb3wuzu] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.city-icon[b-xyzxb3wuzu] {
    color: var(--color-primary);
    font-size: 20px;
}

.city-title[b-xyzxb3wuzu] {
    font-size: 20px;
    font-weight: 600;
    color: #3b2f22;
}

.city-sub-list[b-xyzxb3wuzu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.city-sub-item[b-xyzxb3wuzu] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-primary);
    transition: all 0.2s ease;
}

    .city-sub-item:hover[b-xyzxb3wuzu] {
        transform: translateX(4px);
    }

.sub-icon[b-xyzxb3wuzu] {
    font-size: 14px;
    color: var(--color-primary);
}
/* _content/RealOxy.Web.Core/Controls/Cards/LoginCard.razor.rz.scp.css */







/* ===============================
   LEFT IMAGE
================================ */
.login-visual[b-ps4ucsjh2r] {
    position: relative;
}

    .login-visual img[b-ps4ucsjh2r] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.login-visual-text[b-ps4ucsjh2r] {
    position: absolute;
    bottom: 24px;
    left: 24px;
    color: #ffffff;
}

    .login-visual-text h2[b-ps4ucsjh2r] {
        font-size: 28px;
        font-weight: 800;
        line-height: 1.2;
    }

/* ===============================
   FORM
================================ */
.login-form[b-ps4ucsjh2r] {
    padding: 32px;
    position: relative;
}

    .login-form h3[b-ps4ucsjh2r] {
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 24px;
        color: var(--color-text-primary);
    }



/* ===============================
   INPUTS
================================ */
.input-label[b-ps4ucsjh2r] {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    color: var(--color-text-secondary);
}

.phone-input[b-ps4ucsjh2r] {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.country-code[b-ps4ucsjh2r] {
    font-size: 14px;
    font-weight: 600;
    margin-right: 8px;
    color: var(--color-text-secondary);
}

.phone-input input[b-ps4ucsjh2r] {
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
}

/* ===============================
   BUTTONS
================================ */
.btn-otp[b-ps4ucsjh2r],
.btn-verify[b-ps4ucsjh2r] {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    border: none;
    color: #ffffff;
}

.btn-otp[b-ps4ucsjh2r] {
    background: #9ca3af;
    cursor: not-allowed;
}

    .btn-otp:not(:disabled)[b-ps4ucsjh2r] {
        background: var(--color-primary);
        cursor: pointer;
    }

.btn-verify[b-ps4ucsjh2r] {
    background: var(--color-primary);
    cursor: pointer;
}

/* ===============================
   OTP SECTION
================================ */
.hidden[b-ps4ucsjh2r] {
    display: none;
}

.otp-section[b-ps4ucsjh2r] {
    margin-top: 20px;
}

.otp-input[b-ps4ucsjh2r] {
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
}

    .otp-input input[b-ps4ucsjh2r] {
        border: none;
        outline: none;
        width: 100%;
        font-size: 18px;
        letter-spacing: 6px;
        text-align: center;
    }

/* ===============================
   OTP ACTIONS
================================ */
.otp-actions[b-ps4ucsjh2r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    font-size: 13px;
}

.link-btn[b-ps4ucsjh2r] {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-action);
    cursor: pointer;
}

.resend-text[b-ps4ucsjh2r] {
    color: var(--color-text-muted);
}

/* ===============================
   TERMS
================================ */
.login-terms[b-ps4ucsjh2r] {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 16px;
}

    .login-terms a[b-ps4ucsjh2r] {
        color: var(--color-text-action);
        text-decoration: underline;
    }

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

/* ===============================
   REFERRAL INPUT (Matches Country Code Input)
================================ */
.referral-input-container[b-ps4ucsjh2r] {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    width: 100%;
}


/* ===============================
   REFERRAL INPUT (Matches Phone Input)
================================ */
.referral-box[b-ps4ucsjh2r] {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    padding: 10px 14px;
    background: #ffffff;
    width: 100%;
}

.referral-box input.referral-box-input[b-ps4ucsjh2r] {
    border: none !important;
    outline: none !important;
    width: 100%;
    font-size: 14px;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.referral-box input.referral-box-input:focus[b-ps4ucsjh2r],
.referral-box input.referral-box-input:active[b-ps4ucsjh2r] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .login-card[b-ps4ucsjh2r] {
        grid-template-columns: 1fr;
        width: 400px;
    }

    .login-visual[b-ps4ucsjh2r] {
        display: none;
    }
}
/* _content/RealOxy.Web.Core/Controls/Cards/MyReviewCard.razor.rz.scp.css */
/* MyReviewCard.razor.css */
.mrc-card[b-r9kmhaehyo] {
    background: #fdf8f4;
    border: 1.5px solid #e8ddd5;
    border-radius: 10px;
    padding: 18px;
}

.mrc-pill[b-r9kmhaehyo] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-primary);
    background: #f5ede4;
    border: 1px solid #e2d0bc;
    border-radius: 99px;
    padding: 3px 10px;
    margin-bottom: 14px;
}

.mrc-top[b-r9kmhaehyo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mrc-left[b-r9kmhaehyo] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.mrc-avatar[b-r9kmhaehyo] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b6b4a, #c69c6d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.mrc-meta[b-r9kmhaehyo] {
    flex: 1;
}

.mrc-name[b-r9kmhaehyo] {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1208;
    margin-bottom: 4px;
}

.mrc-stars[b-r9kmhaehyo] {
    display: flex;
    gap: 2px;
    margin-bottom: 3px;
}

.mrc-star[b-r9kmhaehyo] {
    font-size: 13px;
}

    .mrc-star.filled[b-r9kmhaehyo] {
        color: #e6a817;
    }

    .mrc-star.empty[b-r9kmhaehyo] {
        color: #d9cfc8;
    }

.mrc-date[b-r9kmhaehyo] {
    font-size: 11px;
    color: #9e8878;
}

.mrc-actions[b-r9kmhaehyo] {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
}

.mrc-btn-edit[b-r9kmhaehyo], .mrc-btn-delete[b-r9kmhaehyo] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
}

.mrc-btn-edit[b-r9kmhaehyo] {
    background: #ffffff;
    border: 1.5px solid #e8ddd5;
    color: #4a3728;
}

    .mrc-btn-edit:hover[b-r9kmhaehyo] {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

.mrc-btn-delete[b-r9kmhaehyo] {
    background: #ffffff;
    border: 1.5px solid #fde0e0;
    color: #e05252;
}

    .mrc-btn-delete:hover[b-r9kmhaehyo] {
        background: #fde0e0;
    }

.mrc-text[b-r9kmhaehyo] {
    font-size: 13px;
    color: #4a3728;
    line-height: 1.65;
    margin: 10px 0 0;
}

@media (max-width: 480px) {
    .mrc-actions[b-r9kmhaehyo] {
        flex-direction: column;
    }
}
/* _content/RealOxy.Web.Core/Controls/Cards/OverallReviewCard.razor.rz.scp.css */
/* OverallRatingCard.razor.css */
.orc-card[b-czmhd9px9h] {
    background: #ffffff;
    border-radius: var(--border-radius-banner);
    padding: 20px;
    box-shadow: 0 2px 16px rgba(103,78,52,0.08);
    width: 100%;
}

.orc-title[b-czmhd9px9h] {
    font-size: 15px;
    font-weight: 700;
    color: #1a1208;
    margin-bottom: 14px;
}

.orc-top[b-czmhd9px9h] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.orc-big-num[b-czmhd9px9h] {
    font-size: 44px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.orc-right[b-czmhd9px9h] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.orc-stars-inner[b-czmhd9px9h] {
    display: flex;
    gap: 2px;
}

.orc-star[b-czmhd9px9h] {
    font-size: 1.3rem;
    line-height: 1;
}

    .orc-star.filled[b-czmhd9px9h] {
        color: #e6a817;
    }

    .orc-star.empty[b-czmhd9px9h] {
        color: #d9cfc8;
    }

.orc-based[b-czmhd9px9h] {
    font-size: 12px;
    color: #9e8878;
}

.orc-bars[b-czmhd9px9h] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.orc-bar-row[b-czmhd9px9h] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.orc-bar-num[b-czmhd9px9h] {
    font-size: 12px;
    color: #4a3728;
    font-weight: 500;
    width: 10px;
    text-align: right;
    flex-shrink: 0;
}

.orc-bar-track[b-czmhd9px9h] {
    flex: 1;
    height: 5px;
    background: #e8ddd5;
    border-radius: 99px;
    overflow: hidden;
}

.orc-bar-fill[b-czmhd9px9h] {
    height: 100%;
    background: var(--color-primary);
    border-radius: 99px;
    transition: width 0.4s ease;
}

.orc-bar-count[b-czmhd9px9h] {
    font-size: 11px;
    color: #9e8878;
    width: 16px;
    text-align: right;
    flex-shrink: 0;
}
/* _content/RealOxy.Web.Core/Controls/Cards/ProductCard.razor.rz.scp.css */
/* ─────────────────────────────────────────────
   Product Card Wrapper
───────────────────────────────────────────── */
.product-card[b-9ybqt7cnor] {
  position: relative;
  background: #ffffff;
  border-radius: var(--border-radius-input);
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow 0.22s ease,
    transform 0.22s ease;
  max-width: 100%;
  width: 100%;
}

.product-card-fixed-width[b-9ybqt7cnor] {
  position: relative;
  background: #ffffff;
  border-radius: var(--border-radius-input);
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow 0.22s ease,
    transform 0.22s ease;
  max-width: 100%;
  width: 100%;
  flex: 0 0 320px;
  /* card width */
  flex-shrink: 0;
  width: 320px;
}

.product-card:hover[b-9ybqt7cnor] {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .product-card-fixed-width[b-9ybqt7cnor] {
    width: 250px;
  }
}

/* ─────────────────────────────────────────────
   Badge
───────────────────────────────────────────── */
.pc-badge[b-9ybqt7cnor] {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  background: #e74c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   Gallery Section (Uniform Height)
───────────────────────────────────────────── */
.pc-gallery[b-9ybqt7cnor] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 265px;
  /* 185 (main) + 80 (thumbs) */
}

/* Main Image */
.pc-img-main[b-9ybqt7cnor] {
  height: 185px;
  overflow: hidden;
  background: #f5f5f5
    url("_content/RealOxy.Web.Core/Img/real_oxy_placeholder.jpg") center/cover
    no-repeat;
  border-radius: var(--border-radius-input);
}

.pc-img-main img[b-9ybqt7cnor] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--border-radius-input);
  transition: transform 0.35s ease;
}

.pc-img-main-single[b-9ybqt7cnor] {
  height: 265px;
  overflow: hidden;
  background: #f5f5f5
    url("_content/RealOxy.Web.Core/Img/real_oxy_placeholder.jpg") center/cover
    no-repeat;
  border-radius: var(--border-radius-input);
}

.pc-img-main-single img[b-9ybqt7cnor] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--border-radius-input);
  transition: transform 0.35s ease;
}

.product-card:hover .pc-img-main img[b-9ybqt7cnor] {
  transform: scale(1.04);
}

/* ─────────────────────────────────────────────
   Thumbnails
───────────────────────────────────────────── */
.pc-thumbs[b-9ybqt7cnor] {
  display: grid;
  gap: 6px;
  height: 80px;
}

/* Hide thumbs for single image but preserve layout height */
/*.pc-gallery--single .pc-thumbs {
    visibility: hidden;
}*/

/* Thumbnail Layout Variants */
.pc-thumbs--1[b-9ybqt7cnor] {
  grid-template-columns: 1fr;
}

.pc-thumbs--2[b-9ybqt7cnor] {
  grid-template-columns: 1fr 1fr;
}

.pc-thumbs--3[b-9ybqt7cnor] {
  grid-template-columns: 1fr 1fr 1fr;
}

.pc-thumb[b-9ybqt7cnor] {
  position: relative;
  overflow: hidden;
  background: #f5f5f5
    url("_content/RealOxy.Web.Core/Img/real_oxy_placeholder.jpg") center/cover
    no-repeat;
  border-radius: var(--border-radius-input);
}

.pc-thumb img[b-9ybqt7cnor] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--border-radius-input);
  transition: transform 0.3s ease;
}

.product-card:hover .pc-thumb img[b-9ybqt7cnor] {
  transform: scale(1.06);
}

/* More Images Overlay */
.pc-thumb--more img[b-9ybqt7cnor] {
  filter: brightness(0.55);
}

.pc-more-overlay[b-9ybqt7cnor] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   Card Body
───────────────────────────────────────────── */
.pc-body[b-9ybqt7cnor] {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Price */
.pc-price[b-9ybqt7cnor] {
  font-size: 22px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.pc-currency[b-9ybqt7cnor] {
  font-size: 18px;
  font-weight: 700;
  margin-right: 1px;
}

/* Title */
.pc-title[b-9ybqt7cnor] {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta Info */
.pc-meta[b-9ybqt7cnor] {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: #666;
}

.pc-location[b-9ybqt7cnor] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.pc-date[b-9ybqt7cnor] {
  color: #888;
  font-size: 11.5px;
}

.pc-distance[b-9ybqt7cnor] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pc-distance-icon[b-9ybqt7cnor] {
  display: none;
}

@media (max-width: 768px) {
  .pc-date[b-9ybqt7cnor] {
    flex-wrap: wrap;
  }
  .pc-distance[b-9ybqt7cnor] {
    flex-basis: 100%;
    margin-left: 0;
  }
  .pc-distance-icon[b-9ybqt7cnor] {
    display: inline;
    color: #999;
  }
}

.pc-meta-icon[b-9ybqt7cnor] {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #999;
}
/* _content/RealOxy.Web.Core/Controls/Cards/ProductDetailsCard.razor.rz.scp.css */
.ad-details[b-wyhxh9zqsu] {
    padding: 12px 0;
}

.ad-details__title[b-wyhxh9zqsu] {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 14px;
    color: #222;
}

/* GRID layout */
.ad-details__list[b-wyhxh9zqsu] {
    display: grid;
    gap: 12px;
}

/* CARD style */
.ad-details__row[b-wyhxh9zqsu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #eee;
    border-radius: 10px;
    transition: all 0.2s ease;
}

    .ad-details__row:hover[b-wyhxh9zqsu] {
        background: #fff;
        box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    }

.ad-details__label[b-wyhxh9zqsu] {
    font-size: 12px;
    color: #777;
    font-weight: 500;
}

.ad-details__value[b-wyhxh9zqsu] {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    word-break: break-word;
}
/* _content/RealOxy.Web.Core/Controls/Cards/ScrollCard.razor.rz.scp.css */
.scroll-card[b-qw0mxjxj95] {
    --scroll-card-radius: 10px;
    --scroll-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    --scroll-card-bg: #ffffff;
    --scroll-card-border: rgba(0, 0, 0, 0.07);
    --scroll-card-header-bg: #fafafa;
    --scroll-card-title-color: #374151;
    --scroll-card-scrollbar-track: #f1f1f1;
    --scroll-card-scrollbar-thumb: #d1d5db;
    --scroll-card-scrollbar-thumb-hover: #9ca3af;
    /* Stretch to fill whatever height the parent provides */
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* required so flex children can shrink below their content size */

    background: var(--scroll-card-bg);
    border-radius: var(--scroll-card-radius);
    box-shadow: var(--scroll-card-shadow);
    border: 1px solid var(--scroll-card-border);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

    .scroll-card:hover[b-qw0mxjxj95] {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.07);
    }

/* Optional header — fixed height, never scrolls */
.scroll-card__header[b-qw0mxjxj95] {
    padding: 0.75rem 1.25rem;
    background: var(--scroll-card-header-bg);
    border-bottom: 1px solid var(--scroll-card-border);
    flex-shrink: 0;
}

.scroll-card__title[b-qw0mxjxj95] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--scroll-card-title-color);
    letter-spacing: 0.01em;
}

/* Scrollable body — grows to fill remaining height then scrolls */
.scroll-card__body[b-qw0mxjxj95] {
    padding: 1.25rem;
    flex: 1 1 0; /* grow AND allow shrinking below content size */
    min-height: 0; /* critical: lets overflow-y actually kick in */
    overflow-y: auto;
    overflow-x: hidden;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-card-scrollbar-thumb) var(--scroll-card-scrollbar-track);
}

    /* Webkit scrollbar */
    .scroll-card__body[b-qw0mxjxj95]::-webkit-scrollbar {
        width: 6px;
    }

    .scroll-card__body[b-qw0mxjxj95]::-webkit-scrollbar-track {
        background: var(--scroll-card-scrollbar-track);
        border-radius: 3px;
    }

    .scroll-card__body[b-qw0mxjxj95]::-webkit-scrollbar-thumb {
        background: var(--scroll-card-scrollbar-thumb);
        border-radius: 3px;
    }

        .scroll-card__body[b-qw0mxjxj95]::-webkit-scrollbar-thumb:hover {
            background: var(--scroll-card-scrollbar-thumb-hover);
        }
/* _content/RealOxy.Web.Core/Controls/Cards/SellerNameCard.razor.rz.scp.css */

.sc-wrapper[b-mgenmapo3q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;    
}

/* ── Left section ─────────────────────────────────────────────── */
.sc-left[b-mgenmapo3q] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* ── Avatar wrapper (holds image + badge) ─────────────────────── */
.sc-avatar-wrap[b-mgenmapo3q] {
    position: relative;
    flex-shrink: 0;
}

/* ── Avatar image ─────────────────────────────────────────────── */
.sc-avatar[b-mgenmapo3q] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #f0f0f0;
}

/* ── Fallback initials avatar ─────────────────────────────────── */
.sc-avatar--fallback[b-mgenmapo3q] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #e8e0d8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
}

/* ── Verified badge ───────────────────────────────────────────── */
.sc-badge[b-mgenmapo3q] {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 18px;
    color: var(--color-primary);
    line-height: 1;
    display: flex;
    background: #fff;
    border-radius: 50%;
}

/* ── Name + view profile ──────────────────────────────────────── */
.sc-info[b-mgenmapo3q] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sc-name[b-mgenmapo3q] {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── View Profile button ──────────────────────────────────────── */
.sc-view-profile[b-mgenmapo3q] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary);
    line-height: 1;
    transition: opacity .15s;
}

    .sc-view-profile:hover[b-mgenmapo3q] {
        opacity: .75;
    }

/* ── Action buttons (message + call) ─────────────────────────── */
.sc-actions[b-mgenmapo3q] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sc-action-btn[b-mgenmapo3q] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .18s, color .18s, background .18s;
}

    .sc-action-btn:hover[b-mgenmapo3q] {
        border-color: var(--color-primary);
        color: var(--color-primary);
        background: #fdf6f0;
    }

.chat-icon[b-mgenmapo3q] {
    color: var(--color-primary);
    line-height: 1;
}
.phone-icon[b-mgenmapo3q] {
    line-height: 1;
    color: var(--color-primary);
}
.whatsapp-icon[b-mgenmapo3q] {
    line-height: 1;
    color: #25D366;
}
/* _content/RealOxy.Web.Core/Controls/Cards/SellerProfileInfoCard.razor.rz.scp.css */
/* SellerProfileInfoCard.razor.css */

.seller-info-card[b-4mm1qv5qsm] {
    background: #ffffff;
    border-radius: var(--border-radius-banner);
    overflow: visible;
    box-shadow: 0 4px 24px rgba(103, 78, 52, 0.10);
    width: 100%;
}

/* ── Banner ── */
.sic-banner[b-4mm1qv5qsm] {
    height: 90px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    position: relative;
}

.sic-banner-img[b-4mm1qv5qsm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Avatar ── */
.sic-avatar-wrap[b-4mm1qv5qsm] {
    display: flex;
    justify-content: center;
    margin-top: -38px;
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
}

.sic-avatar[b-4mm1qv5qsm] {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b6b4a, #c69c6d);
    border: 4px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(103, 78, 52, 0.22);
    overflow: hidden; /* clips the image to the circle */
}

/* Profile image inside avatar circle */
.sic-avatar-img[b-4mm1qv5qsm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.sic-verified[b-4mm1qv5qsm] {
    position: absolute;
    bottom: 2px;
    left: calc(50% + 18px);
    width: 22px;
    height: 22px;
    background: #22c55e;
    border-radius: 50%;
    border: 2.5px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sic-verified i[b-4mm1qv5qsm] {
        font-size: 12px;
        color: #ffffff;
        line-height: 1;
    }

/* ── Body ── */
.sic-body[b-4mm1qv5qsm] {
    padding: 0 20px 22px;
    text-align: center;
}

.sic-name[b-4mm1qv5qsm] {
    font-size: 20px;
    font-weight: 700;
    color: #1a1208;
    margin-bottom: 4px;
}

.sic-handle[b-4mm1qv5qsm] {
    font-size: 13px;
    color: #9e8878;
    margin-bottom: 18px;
}

/* ── Stats ── */
.sic-stats[b-4mm1qv5qsm] {
    display: flex;
    align-items: stretch;
    background: #f7f2ed;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}

.sic-stat[b-4mm1qv5qsm] {
    flex: 1;
    padding: 12px 8px;
    text-align: center;
}

.sic-stat-divider[b-4mm1qv5qsm] {
    width: 1px;
    background: #e8ddd5;
    margin: 10px 0;
}

.sic-stat-num[b-4mm1qv5qsm] {
    font-size: 19px;
    font-weight: 700;
    color: #674E34;
    line-height: 1.2;
}

.sic-stat-label[b-4mm1qv5qsm] {
    font-size: 9px;
    color: #9e8878;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-top: 3px;
}

/* ── Meta rows ── */
.sic-meta[b-4mm1qv5qsm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    text-align: left;
}

.sic-meta-row[b-4mm1qv5qsm] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #4a3728;
}

.sic-meta-icon[b-4mm1qv5qsm] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.sic-icon-calendar[b-4mm1qv5qsm] {
    background: #fff0e6;
    color: #e07b39;
}

.sic-icon-location[b-4mm1qv5qsm] {
    background: #ffe6e6;
    color: #e05252;
}

.sic-icon-reply[b-4mm1qv5qsm] {
    background: #fff8e0;
    color: #e0a800;
}

/* ── Contact Button ── */
.sic-contact-btn[b-4mm1qv5qsm] {
    width: 100%;
    padding: 13px;
    background: #674E34;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(103, 78, 52, 0.25);
}

    .sic-contact-btn:hover[b-4mm1qv5qsm] {
        background: #8b6b4a;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(103, 78, 52, 0.30);
    }

    .sic-contact-btn:active[b-4mm1qv5qsm] {
        transform: translateY(0);
    }

/* ── Responsive ── */
@media (max-width: 768px) {
    .seller-info-card[b-4mm1qv5qsm] {
        max-width: 100%;
    }
}
/* _content/RealOxy.Web.Core/Controls/Cards/SellerProfileRatingCard.razor.rz.scp.css */
/* SellerRatingCard.razor.css */

.src-card[b-647iji4xnk] {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 16px rgba(103, 78, 52, 0.08);
    width: 100%;
}

/* ── Title ── */
.src-title[b-647iji4xnk] {
    font-size: 16px;
    font-weight: 700;
    color: #1a1208;
    margin-bottom: 14px;
}

/* ── Top row ── */
.src-top[b-647iji4xnk] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.src-big-num[b-647iji4xnk] {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.src-right[b-647iji4xnk] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ── Stars ── */
.src-stars[b-647iji4xnk] {
    display: flex;
    gap: 3px;
}

.src-star[b-647iji4xnk] {
    font-size: 18px;
}

    .src-star.filled[b-647iji4xnk] {
        color: #e6a817;
    }

    .src-star.empty[b-647iji4xnk] {
        color: #ddd0c5;
    }

.src-based[b-647iji4xnk] {
    font-size: 12px;
    color: #9e8878;
}

/* ── Bars ── */
.src-bars[b-647iji4xnk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.src-bar-row[b-647iji4xnk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.src-bar-num[b-647iji4xnk] {
    font-size: 13px;
    color: #4a3728;
    font-weight: 500;
    width: 10px;
    text-align: right;
    flex-shrink: 0;
}

.src-bar-track[b-647iji4xnk] {
    flex: 1;
    height: 6px;
    background: #ede8e3;
    border-radius: 99px;
    overflow: hidden;
}

.src-bar-fill[b-647iji4xnk] {
    height: 100%;
    background: var(--color-primary);
    border-radius: 99px;
    transition: width 0.4s ease;
}

.src-bar-count[b-647iji4xnk] {
    font-size: 12px;
    color: #9e8878;
    width: 16px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .src-card[b-647iji4xnk] {
        max-width: 100%;
    }
}
/* _content/RealOxy.Web.Core/Controls/Cards/SuperStoreCard.razor.rz.scp.css */
/* ===============================
   CARD LAYOUT
================================ */

.brand-card[b-7e3e0kmiei] {
    display: flex;
    border-color: 1px solid #00000010;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-radius: 10px;
    background: #f8f9fb;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 20px var(--color-shadow-soft);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .brand-card:hover[b-7e3e0kmiei] {
        /*transform: translateY(-2px);*/
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12);
    }

/* ===============================
   LEFT SECTION
================================ */

.brand-card__left[b-7e3e0kmiei] {
    display: flex;
    align-items: center;
    gap: 14px;
}
.brand-card--selected[b-7e3e0kmiei] {
    border: 2px solid var(--color-primary);
    background-color: rgba(var(--color-primary), 0.06);
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.15);
}
.brand-card__image[b-7e3e0kmiei] {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    background: #ffffff;
}

.brand-card__image--placeholder[b-7e3e0kmiei] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
}

    .brand-card__image--placeholder i[b-7e3e0kmiei] {
        font-size: 26px;
        color: var(--color-text-muted);
    }

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

.brand-card__content[b-7e3e0kmiei] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand-card__label[b-7e3e0kmiei] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.brand-card__value[b-7e3e0kmiei] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ===============================
   RIGHT SECTION
================================ */

.brand-card__right[b-7e3e0kmiei] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.brand-card__actions[b-7e3e0kmiei] {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .brand-card__actions i[b-7e3e0kmiei] {
        font-size: 16px;
        color: var(--color-icon-default);
        cursor: pointer;
        transition: color 0.15s ease;
    }

        .brand-card__actions i:hover[b-7e3e0kmiei] {
            color: var(--color-icon-hover);
        }

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

.arrow-btn[b-7e3e0kmiei] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

    .arrow-btn:hover[b-7e3e0kmiei] {
        background: #e2e6ea;
    }

    .arrow-btn i[b-7e3e0kmiei] {
        font-size: 14px;
    }
/* _content/RealOxy.Web.Core/Controls/Cards/TitleAndImageItemCard.razor.rz.scp.css */
/* ===============================
   CARD LAYOUT
================================ */

.brand-card[b-vruqqbu6b1] {
    display: flex;
    border-color: 1px solid #00000010;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-radius: 10px;
    background: #f8f9fb;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 20px var(--color-shadow-soft);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .brand-card:hover[b-vruqqbu6b1] {
        /*transform: translateY(-2px);*/
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12);
    }
.brand-card--selected[b-vruqqbu6b1] {
    border: 2px solid var(--color-primary);
    background-color: rgba(var(--color-primary), 0.06);
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.15);
}
/* ===============================
   LEFT SECTION
================================ */

.brand-card__left[b-vruqqbu6b1] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-card__image[b-vruqqbu6b1] {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    background: #ffffff;
}

.brand-card__image--placeholder[b-vruqqbu6b1] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
}

    .brand-card__image--placeholder i[b-vruqqbu6b1] {
        font-size: 26px;
        color: var(--color-text-muted);
    }

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

.brand-card__content[b-vruqqbu6b1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand-card__label[b-vruqqbu6b1] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.brand-card__value[b-vruqqbu6b1] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ===============================
   RIGHT SECTION
================================ */

.brand-card__right[b-vruqqbu6b1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.brand-card__actions[b-vruqqbu6b1] {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .brand-card__actions i[b-vruqqbu6b1] {
        font-size: 16px;
        color: var(--color-icon-default);
        cursor: pointer;
        transition: color 0.15s ease;
    }

        .brand-card__actions i:hover[b-vruqqbu6b1] {
            color: var(--color-icon-hover);
        }

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

.arrow-btn[b-vruqqbu6b1] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

    .arrow-btn:hover[b-vruqqbu6b1] {
        background: #e2e6ea;
    }

    .arrow-btn i[b-vruqqbu6b1] {
        font-size: 14px;
    }
/* _content/RealOxy.Web.Core/Controls/CategoryTabForHome.razor.rz.scp.css */
.category-scroll-wrapper[b-o3bz0tfgk6] {
    padding: 8px 12px;
}

.category-scroll-inner[b-o3bz0tfgk6] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    padding: 8px 0px;
    background: #ffffff;
}

    .category-scroll-inner[b-o3bz0tfgk6]::-webkit-scrollbar {
        height: 4px;
    }

    .category-scroll-inner[b-o3bz0tfgk6]::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }

.cat-tab[b-o3bz0tfgk6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: color .18s, border-color .18s;
    white-space: nowrap;
    min-width: 100px;
    margin-bottom: -1px;
}

    .cat-tab:hover[b-o3bz0tfgk6] {
        color: var(--color-primary);
    }

        .cat-tab:hover .cat-img[b-o3bz0tfgk6],
        .cat-tab:hover .cat-icon[b-o3bz0tfgk6] {
            transform: scale(1.08);
        }

.cat-tab--active[b-o3bz0tfgk6] {
    color: var(--color-primary);
    font-weight: 700;
    border-bottom-color: var(--color-primary);
}

.cat-img-wrap[b-o3bz0tfgk6] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cat-img[b-o3bz0tfgk6] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.cat-icon[b-o3bz0tfgk6] {
    display: inline-block;
    transition: transform 0.2s ease;
}

.cat-label[b-o3bz0tfgk6] {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* ── Mobile grid layout ── */
/*@media (max-width: 767px) {
    .category-scroll-wrapper {
        padding: 8px 12px;
    }

    .category-scroll-inner {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        overflow-x: unset;
        gap: 4px;
    }

    .cat-tab {
        min-width: unset;
        width: 100%;
        white-space: normal;
        border-bottom: none;
        border-radius: 10px;
        padding: 10px 8px;
        margin-bottom: 0;
        justify-content: flex-start;
        align-items: center;
    }

    .cat-tab--active {
        background: #fff0f0;
        border-bottom: none;
        color: var(--color-primary);
    }

    .cat-label {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        overflow: visible;
        text-overflow: unset;
        font-size: 12px;
        line-height: 1.3;
    }

    .cat-img-wrap {
        width: 25px;
        height: 25px;
        flex-shrink: 0; 
    }
}*/
/* _content/RealOxy.Web.Core/Controls/CustomRadio.razor.rz.scp.css */

.option[b-psh7sge7o7] {
    padding: 14px;
    text-align: center;
    font-weight: 500;
    border-radius: 12px;
    border: 1px solid var(--color-border-default);
    cursor: pointer;
    

   
}

    .option.active[b-psh7sge7o7] {
        border-color: var(--color-primary);
        background: #FFF5F5;
        color: var(--color-primary);
    }

.option-filter[b-psh7sge7o7] {
    padding: 14px;
    text-align: start;
    font-weight: 600;
    cursor: pointer;
}

    .option-filter.active[b-psh7sge7o7] {
        background: #FAF7F4;
        color: var(--color-primary);
    }
/* _content/RealOxy.Web.Core/Controls/EmptyState.razor.rz.scp.css */
.empty-state[b-qh8lag9rxk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    background: var(--color-bg-white);
    border: 1px dashed var(--color-border-default);
    border-radius: 12px;
    max-width: 420px;
    margin: 60px auto;
}

/* Icon container */
.empty-icon[b-qh8lag9rxk] {
    position: relative;
    width: 100px;
    height: 50px;
    margin-bottom: 24px;
}

    /* Car silhouette */
    .empty-icon .car[b-qh8lag9rxk] {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 32px;
        background: var(--color-navbar-bg);
        border-radius: 8px 8px 4px 4px;
    }

    /* Inspection check */
    .empty-icon .check[b-qh8lag9rxk] {
        position: absolute;
        top: -10px;
        right: 4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid var(--color-primary);
    }

        .empty-icon .check[b-qh8lag9rxk]::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 3px;
            width: 6px;
            height: 10px;
            border: solid var(--color-primary);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

/* Title */
.empty-title[b-qh8lag9rxk] {
    font-size:18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

/* Description */
.empty-description[b-qh8lag9rxk] {
    font-size: 13px;
    color: var(--color-text-secondary);
    max-width: 320px;
    line-height: 1.6;
    margin-bottom: 24px;
}
/* _content/RealOxy.Web.Core/Controls/Filter/FilterPage.razor.rz.scp.css */
/* ROOT CONTAINER */
.mobile-filter-root[b-kz340prtt2] {
    height: 75vh;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}

/* BODY (LEFT + RIGHT) */
.mobile-filter-body[b-kz340prtt2] {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.mobile-filter-left[b-kz340prtt2] {
    width: 35%;
    background: #f8fafc;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    flex-shrink: 0;
}

/* FILTER TABS */
.filter-tab[b-kz340prtt2] {
    padding: 14px 12px;
    font-size: 14px;
    border-left: 3px solid transparent;
    color: #374151;
    cursor: pointer;
}

    .filter-tab.active[b-kz340prtt2] {
        background: #fff;
        border-left-color: var(--color-primary);
        color: var(--color-primary);
        font-weight: 600;
    }

/* RIGHT PANE (Scrollable) */
.mobile-filter-right[b-kz340prtt2] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* FOOTER (Sticky Bottom) */
.mobile-filter-footer[b-kz340prtt2] {
    display: flex;
    gap: 8px;
    padding: 12px;
    margin-bottom: 60px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

    /* Buttons */
    .mobile-filter-footer .btn[b-kz340prtt2] {
        font-size: 16px;
        font-weight: 600;
    }
/* _content/RealOxy.Web.Core/Controls/Filter/MobileFilterBar.razor.rz.scp.css */
/* ── WRAPPER ── */
.mobile-search-filter-wrapper[b-k3983hoiz9] {
    padding: 10px 0 0;
    width: 100%;
    overflow: hidden;
}

/* ── SEARCH BAR ── */
.mobile-search-bar[b-k3983hoiz9] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f5f5f7;
    border-radius: 14px;
    padding: 11px 14px;
    margin: 0 14px 4px;
    min-width: 0;
    box-sizing: border-box;
    transition: box-shadow 0.2s, background 0.2s;
    position: relative;
}

    .mobile-search-bar:focus-within[b-k3983hoiz9] {
        background: #fdfaf8;
        box-shadow: 0 0 0 2px rgba(124, 74, 45, 0.25);
    }

.mobile-search-icon[b-k3983hoiz9] {
    color: #7c4a2d;
    font-size: 15px;
    flex-shrink: 0;
}

.mobile-search-input[b-k3983hoiz9] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    color: #111827;
    background: transparent;
    font-family: inherit;
}

    .mobile-search-input[b-k3983hoiz9]::placeholder {
        color: transparent;
    }

.mobile-search-placeholder-container[b-k3983hoiz9] {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    height: 30px;
}

.animated-icon-part[b-k3983hoiz9], .animated-name-part[b-k3983hoiz9] {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.stationary-part[b-k3983hoiz9] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Hide animation when focused */
.mobile-search-bar:focus-within .mobile-search-placeholder-container[b-k3983hoiz9] {
    opacity: 0;
    visibility: hidden;
}

.search-category-icon[b-k3983hoiz9] {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.search-text-static[b-k3983hoiz9] {
    font-weight: 600;
    font-size: 14px;
    color: #6b7280;
}

.search-text-dynamic[b-k3983hoiz9] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 600;
}

.category-name[b-k3983hoiz9] {
    font-weight: 600;
    font-size: 14px;
    color: #6b7280;
}

.slide-down-enter[b-k3983hoiz9] {
    animation: slideDownInMobile-b-k3983hoiz9 0.5s ease-out forwards;
}

.slide-down-exit[b-k3983hoiz9] {
    animation: slideDownOutMobile-b-k3983hoiz9 0.5s ease-in forwards;
}

@keyframes slideDownInMobile-b-k3983hoiz9 {
    from {
        transform: translateY(-25px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDownOutMobile-b-k3983hoiz9 {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(25px);
        opacity: 0;
    }
}

.mobile-search-clear[b-k3983hoiz9] {
    color: #ced4da;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}

    .mobile-search-clear:hover[b-k3983hoiz9] {
        color: #7c4a2d;
    }

/* ── SCROLL WRAPPER ── */
.scrolling-wrapper[b-k3983hoiz9] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: 12px;
}

/* On mobile/touch: hide scrollbar completely */
@media (pointer: coarse) {
    .scrolling-wrapper[b-k3983hoiz9] {
        scrollbar-width: none;
    }
    .scrolling-wrapper[b-k3983hoiz9]::-webkit-scrollbar {
        display: none;
    }
}

/* On desktop/mouse: show a sleek, thin scrollbar */
@media (pointer: fine) {
    .scrolling-wrapper[b-k3983hoiz9] {
        scrollbar-width: thin;
        scrollbar-color: #ced4da transparent;
        padding-bottom: 4px;
    }
    .scrolling-wrapper[b-k3983hoiz9]::-webkit-scrollbar {
        height: 5px;
        display: block;
    }
    .scrolling-wrapper[b-k3983hoiz9]::-webkit-scrollbar-track {
        background: transparent;
    }
    .scrolling-wrapper[b-k3983hoiz9]::-webkit-scrollbar-thumb {
        background-color: #ced4da;
        border-radius: 10px;
    }
    .scrolling-wrapper[b-k3983hoiz9]::-webkit-scrollbar-thumb:hover {
        background-color: #a8a8a8;
    }
}

/* ── CHIP STYLE ── */
.mobile-filter-chip[b-k3983hoiz9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-right: 8px;
    background: #f6f6f6;
    border: 1.5px solid #e5e5e5;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .mobile-filter-chip i[b-k3983hoiz9] {
        font-size: 14px;
        opacity: 0.8;
    }

    .mobile-filter-chip:hover[b-k3983hoiz9] {
        background: #f1f1f1;
    }

    .mobile-filter-chip.active[b-k3983hoiz9] {
        background: #fff4ec;
        border: 2px solid #c35a14;
        color: #000;
        box-shadow: 0 0 0 2px rgba(195, 90, 20, 0.08);
        padding: 8px 14px;
    }

.selected-indicator[b-k3983hoiz9] {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #c35a14;
    border-radius: 50%;
    margin-left: 4px;
    flex-shrink: 0;
}

.search-category-icon-fallback[b-k3983hoiz9] {
    font-size: 16px;
    color: #6b7280;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* _content/RealOxy.Web.Core/Controls/Filter/RangeSlider.razor.rz.scp.css */
*[b-msozlmmqma],
*[b-msozlmmqma]:before,
*[b-msozlmmqma]:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.wrapper[b-msozlmmqma] {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    /*padding: 50px 40px 20px 40px;*/
    border-radius: 10px;
}

.sliderContainer[b-msozlmmqma] {
    position: relative;
    width: 100%;
    height: 30px;
    padding: 0;
    margin: 0;
    /*margin-top: 30px;*/
}

input[type="range"][b-msozlmmqma] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    outline: none;
    position: absolute;
    /*margin: auto;*/
    top: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none;
}

.slider-track[b-msozlmmqma] {
    width: 100%;
    height: 3px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

input[type="range"][b-msozlmmqma]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 3px;
}

input[type="range"][b-msozlmmqma]::-ms-track {
    appearance: none;
    height: 3px;
}

input[type="range"][b-msozlmmqma]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background-color: white;
    border: 2px solid #674e34;
    cursor: pointer;
    margin-top: -9px;
    pointer-events: auto;
    border-radius: 50%;
    /*   margin-left:-10px;*/
}

.values[b-msozlmmqma] {
    background-color: #674e34;
    width: fit-content;
    position: relative;
    transform: translate(-50%);
    padding: 5px 10px;
    cursor: default;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
}

    .values[b-msozlmmqma]:before {
        content: "";
        position: absolute;
        height: 10px;
        width: 0;
        border-top: 15px solid #674e34;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        margin: auto;
        bottom: -10px;
        left: 0;
        right: 0;
    }
/* _content/RealOxy.Web.Core/Controls/Filter/WebFilterBar.razor.rz.scp.css */
/* Outer wrapper */
.vehicle-filter-root[b-zlnueyldn7] {
    padding: 20px 0;
    background: transparent;
}

/* Single card wrapping search + filters */
.vehicle-filter-card[b-zlnueyldn7] {
    max-width: 1280px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: var(--border-radius-banner);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* ── SEARCH ROW ── */
.search-row[b-zlnueyldn7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
}

.search-icon[b-zlnueyldn7] {
    color: #7c4a2d;
    flex-shrink: 0;
    font-size: 16px;
}

.search-clear[b-zlnueyldn7] {
    color: #b0b7c3;
    flex-shrink: 0;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.15s;
}

    .search-clear:hover[b-zlnueyldn7] {
        color: #7c4a2d;
    }

.search-input[b-zlnueyldn7] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    color: #111827;
    background: transparent;
    font-family: inherit;
}

    .search-input[b-zlnueyldn7]::placeholder {
        color: #b0b7c3;
    }

/* Thin divider between search and filters */
.filter-divider[b-zlnueyldn7] {
    height: 1px;
    background: #f0f0f0;
    margin: 0px;
}

/* ── FILTER BAR ── */
.vehicle-filter-bar[b-zlnueyldn7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 8px;
}

    .vehicle-filter-bar[b-zlnueyldn7]::-webkit-scrollbar {
        display: none;
    }

/* Each filter button */
.filter-item[b-zlnueyldn7] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: transparent;
    border: none;
    padding: 10px 20px;
    margin: 0;
    cursor: pointer;
    text-align: left;
    border-radius: 18px;
    color: #111827;
    transition: background .12s ease;
    position: relative;
}

    .filter-item:hover[b-zlnueyldn7],
    .filter-item:focus[b-zlnueyldn7] {
        background: #faf8f6;
        outline: none;
    }

    .filter-item:focus-visible[b-zlnueyldn7] {
        box-shadow: 0 0 0 3px rgba(124,74,45,0.12);
        border-radius: 18px;
    }

/* Label + value stack */
.filter-text[b-zlnueyldn7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.filter-label[b-zlnueyldn7] {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
    white-space: nowrap;
}

.filter-value[b-zlnueyldn7] {
    font-size: 13px;
    color: #9aa0a6;
    white-space: nowrap;
}

    .filter-value.filter-placeholder[b-zlnueyldn7] {
        color: #bfc6c9;
        font-weight: 500;
    }

.filter-caret[b-zlnueyldn7] {
    font-size: 12px;
    color: #6b7280;
    flex-shrink: 0;
}

.filter-action .filter-label[b-zlnueyldn7] {
    font-weight: 800;
}

/* Responsive */
@media (max-width: 880px) {
    .vehicle-filter-bar[b-zlnueyldn7] {
        justify-content: flex-start;
        padding: 4px 12px;
    }

    .filter-item[b-zlnueyldn7] {
        min-width: 130px;
        padding: 10px 14px;
    }

    .search-row[b-zlnueyldn7] {
        padding: 12px 16px;
    }

    .filter-divider[b-zlnueyldn7] {
        margin: 0 12px;
    }
}
/* _content/RealOxy.Web.Core/Controls/FilterPopup.razor.rz.scp.css */
.app-popup-overlay[b-2dsky2me0m] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    z-index: 2000;
}
.app-popup[b-2dsky2me0m] {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    visibility: hidden;
    pointer-events: none;
}

    .app-popup.show[b-2dsky2me0m] {
        visibility: visible;
        pointer-events: auto;
    }

.app-popup-content[b-2dsky2me0m] {
    position: relative;
    z-index: 3000;
    background: #fff;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.app-popup-header[b-2dsky2me0m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.close-btn[b-2dsky2me0m] {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.app-popup-body[b-2dsky2me0m] {
    padding: 5px;
}

.app-popup-footer[b-2dsky2me0m] {
    padding: 16px 20px;
    border-top: 1px solid #eee;
}


@media (max-width: 768px) {

    .app-popup[b-2dsky2me0m] {
        align-items: flex-end;
    }

    .app-popup-content[b-2dsky2me0m] {
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

    .app-popup.show .app-popup-content[b-2dsky2me0m] {
        transform: translateY(0);
    }
}


@media (min-width: 769px) {

    .app-popup-content[b-2dsky2me0m] {
        width: 700px;
        border-radius: 16px;
        transform: scale(0.9);
        opacity: 0;
    }

    .app-popup.show .app-popup-content[b-2dsky2me0m] {
        transform: scale(1);
        opacity: 1;
    }
}
/* _content/RealOxy.Web.Core/Controls/HeroSection.razor.rz.scp.css */
.hero-section[b-7rvcys9heu] {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* Background image — absolutely positioned, top-aligned.
           Height is driven by the combined inline style value. */
.hero-section__bg-image[b-7rvcys9heu] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%; /* CSS fallback until JS measures */
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: height 0.2s ease;
}

/* Gradient overlay follows the same height as the image */
.hero-section__overlay[b-7rvcys9heu] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%; /* CSS fallback until JS measures */
    background: linear-gradient( to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.06) 70%, rgba(255, 255, 255, 0.0) 100% );
    pointer-events: none;
    transition: height 0.2s ease;
}

/* Header renders above the image (z-index > 0) */
.hero-section__header[b-7rvcys9heu] {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* ChildContent renders above the image too;
           only its top half has the image visible behind it. */
.hero-section__content[b-7rvcys9heu] {
    position: relative;
    z-index: 1;
    width: 100%;
}
/* _content/RealOxy.Web.Core/Controls/ImageCropperBrowser.razor.rz.scp.css */
/* ── Crop Modal Overlay ───────────────────────────── */
.icb-overlay[b-rf57c9itug] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.icb-modal[b-rf57c9itug] {
    background: #fff;
    border-radius: 14px;
    width: min(500px, 96vw); /* Narrower for 1:1 */
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.icb-modal-header[b-rf57c9itug] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e9ecef;
}

.icb-modal-title[b-rf57c9itug] {
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
}

.icb-ratio-badge[b-rf57c9itug] {
    background: #f1f3f5;
    color: #495057;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 8px;
    letter-spacing: 0.04em;
}

.icb-close-btn[b-rf57c9itug] {
    background: none;
    border: none;
    font-size: 16px;
    color: #6c757d;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
}

    .icb-close-btn:hover[b-rf57c9itug] {
        background: #f1f3f5;
        color: #212529;
    }

.icb-modal-body[b-rf57c9itug] {
    flex: 1;
    overflow: auto;
    background: #1a1a1a;
    padding: 0;
    max-height: 60vh;
}

.icb-crop-img[b-rf57c9itug] {
    display: block;
    max-width: 100%;
}

.icb-modal-footer[b-rf57c9itug] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 18px;
    border-top: 1px solid #e9ecef;
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 576px) {
    .icb-modal[b-rf57c9itug] {
        width: 100%;
        max-height: 100dvh;
        border-radius: 0;
    }

    .icb-modal-body[b-rf57c9itug] {
        max-height: 55dvh;
    }

    .icb-modal-footer[b-rf57c9itug] {
        flex-direction: row;
    }
}

.image-preview[b-rf57c9itug] {
    cursor: pointer;
    position: relative;
    width: 180px;
    height: 140px;
    aspect-ratio: 1/1; /* 1:1 aspect ratio */
    border-radius: 0.75rem;
    border: 1px dashed #dee2e6;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .image-preview img[b-rf57c9itug] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.additional-image-upload-button[b-rf57c9itug] {
    position: absolute;
    bottom: 6px;
    right: 6px;
}

.additional-image-delete-button[b-rf57c9itug] {
    position: absolute;
    bottom: 6px;
    left: 6px;
}

.loading-spinner[b-rf57c9itug] {
    position: absolute;
    background: #00000085;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
/* _content/RealOxy.Web.Core/Controls/LoadingSpinner.razor.rz.scp.css */
.loader[b-qtqitnk93x] {
    display: inline-block;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    --b: 6px;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 1px;
    box-sizing: border-box;
    flex-shrink: 0;
    align-self: center;
    background: conic-gradient(#0000 10%,#674e34) content-box;
    -webkit-mask: repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg), radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    animation: l4-b-qtqitnk93x 1s infinite steps(10);
}

@keyframes l4-b-qtqitnk93x {
    to {
        transform: rotate(1turn)
    }
}
/* _content/RealOxy.Web.Core/Controls/MultiSelect.razor.rz.scp.css */

.form-group[b-rhx6uxpwk2] {
    margin-bottom: 8px
}

.form-label[b-rhx6uxpwk2] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--color-text-secondary);
}
.form-label-filter[b-rhx6uxpwk2] {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text-secondary);
}


.option-grid[b-rhx6uxpwk2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 576px) {
    .subtitle-text[b-rhx6uxpwk2] {
        font-size: 10px; 
        line-height: 1.3;
    }
}
.option-grid-filter[b-rhx6uxpwk2] {
    display: grid;
}



@media (max-width: 576px) {

    .edit-category-popup[b-rhx6uxpwk2] {
        width: 95vw;
        max-height: 85vh;
        border-radius: 16px;
        padding: 20px 0 10px 0;
    }

    .popup-footer[b-rhx6uxpwk2] {
        padding: 16px 20px;
    }

    .media-preview-list[b-rhx6uxpwk2] {
        margin: 12px 0 16px 0;
    }
}
/* _content/RealOxy.Web.Core/Controls/Needs/NeedCard.razor.rz.scp.css */
/* ==========================================================================
   "I need" Card — Refined, Modern, Gold-Accented Community Request Card
   ========================================================================== */

.need-card[b-j0vuhd1r0a] {
    position: relative;
    display: flex;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #EAE3D7;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(61, 46, 30, 0.04);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    min-height: 114px;
}

.need-card:hover[b-j0vuhd1r0a] {
    box-shadow: 0 8px 22px rgba(61, 46, 30, 0.11);
    transform: translateY(-2px);
    border-color: #D9CBB7;
}

/* Gold left accent bar — the "I need" identity */
.need-card__bar[b-j0vuhd1r0a] {
    flex: 0 0 4px;
    background: linear-gradient(180deg, #C9922E 0%, #A9761F 100%);
}

.need-card__media[b-j0vuhd1r0a] {
    width: 104px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: #FAF6EE;
}

@media (max-width: 576px) {
    .need-card__media[b-j0vuhd1r0a] {
        width: 96px;
    }
}

.need-card__image[b-j0vuhd1r0a] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.need-card:hover .need-card__image[b-j0vuhd1r0a] {
    transform: scale(1.04);
}

.need-card__image--placeholder[b-j0vuhd1r0a] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAF6EE;
    color: #C9922E;
    font-size: 26px;
    height: 100%;
}

.need-card__body[b-j0vuhd1r0a] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
}

.need-card__badges[b-j0vuhd1r0a] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}

.need-card__badge[b-j0vuhd1r0a] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 2px 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1.3;
}

.need-card__badge--need[b-j0vuhd1r0a] {
    color: #8A6520;
    background: #FBF5EA;
    border: 1px solid #EBDEC9;
}

.need-card__badge--urgent[b-j0vuhd1r0a] {
    color: #D32F2F;
    background: #FEECEB;
    border: 1px solid #FCD2D0;
}

.need-card__badge--featured[b-j0vuhd1r0a] {
    color: #FFFFFF;
    background: #3D2E1E;
    border: 1px solid #3D2E1E;
}

.need-card__title[b-j0vuhd1r0a] {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #2D2319;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.need-card__budget[b-j0vuhd1r0a] {
    font-size: 12px;
    color: #5C4F42;
    display: flex;
    align-items: center;
    gap: 4px;
}

.need-card__budget-label[b-j0vuhd1r0a] {
    color: #8C7B6D;
    font-size: 11px;
}

.need-card__budget-value[b-j0vuhd1r0a] {
    font-weight: 700;
    color: #A9761F;
}

.need-card__meta[b-j0vuhd1r0a] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 11px;
    color: #8C7B6D;
    margin-top: auto;
    padding-top: 2px;
}

.need-card__meta-item[b-j0vuhd1r0a] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.need-card__meta-offers[b-j0vuhd1r0a] {
    color: #9C6E1E;
    font-weight: 600;
}

/* Urgent card subtle border */
.need-card--urgent[b-j0vuhd1r0a] {
    border-color: #F8D3CE;
}

.need-card--urgent:hover[b-j0vuhd1r0a] {
    border-color: #F0A89F;
}
/* _content/RealOxy.Web.Core/Controls/Needs/NeedsForYouSection.razor.rz.scp.css */
.needs-for-you-section[b-jjhmf0au5g] {
    width: 100%;
    margin: 20px 0;
}

@media (max-width: 768px) {
    .needs-for-you-section[b-jjhmf0au5g] {
        margin: 4px 0;
    }
}

.needs-for-you-header[b-jjhmf0au5g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 6px;
}

@media (max-width: 768px) {
    .needs-for-you-header[b-jjhmf0au5g] {
        padding: 0 16px;
    }
}

.needs-for-you-title[b-jjhmf0au5g] {
    font-size: 16px;
    font-weight: 900;
    margin: 0;
    padding: 0;
    text-align: left;
    color: var(--brand-dark, #3D2E1E);
    display: flex;
    align-items: center;
    gap: 8px;
}

.needs-for-you-icon[b-jjhmf0au5g] {
    color: #C9922E;
    font-size: 16px;
}

.needs-for-you-more[b-jjhmf0au5g] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #555;
    transition: color 0.2s ease;
    margin: 0;
    padding: 0;
}

.needs-for-you-more:hover[b-jjhmf0au5g] {
    color: #000;
}

.needs-for-you-more i[b-jjhmf0au5g] {
    font-size: 14px;
}

/* Horizontal scroll row — cards keep their intrinsic width */
.needs-for-you-strip[b-jjhmf0au5g] {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 8px 20px 14px;
    scroll-padding-left: 20px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
}

@media (max-width: 768px) {
    .needs-for-you-strip[b-jjhmf0au5g] {
        gap: 14px;
        padding: 6px 16px 10px;
        scroll-padding-left: 16px;
    }
}

.needs-for-you-strip > [role="listitem"][b-jjhmf0au5g] {
    flex: 0 0 320px;
    width: 320px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.needs-for-you-strip > [role="listitem"] > *[b-jjhmf0au5g] {
    width: 100%;
}

@media (max-width: 768px) {
    .needs-for-you-strip > [role="listitem"][b-jjhmf0au5g] {
        flex: 0 0 280px;
        width: 280px;
    }
}

.needs-for-you-strip[b-jjhmf0au5g]::-webkit-scrollbar {
    height: 6px;
}

.needs-for-you-strip[b-jjhmf0au5g]::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* _content/RealOxy.Web.Core/Controls/NewImageBrowser.razor.rz.scp.css */

/* Image preview box */
.image-preview[b-s8wbh9mv4k] {
    cursor:pointer;
    position: relative;
    width: 180px;
    height: 140px;
    border-radius: 0.75rem;
    border: 1px dashed #dee2e6;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .image-preview img[b-s8wbh9mv4k] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.additional-image-upload-button[b-s8wbh9mv4k] {
    position: absolute;
    bottom: 6px;
    right: 6px;
}

.additional-image-delete-button[b-s8wbh9mv4k] {
    position: absolute;
    bottom: 6px;
    left: 6px;
}

.loading-spinner[b-s8wbh9mv4k] {
    position: absolute;
    background: #00000085;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}
.btn-nav-action[b-s8wbh9mv4k] {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}

    .btn-nav-action:hover[b-s8wbh9mv4k] {
        background-color: var(--color-primary);
        opacity: 0.9;
        color: #fff;
    }
/* _content/RealOxy.Web.Core/Controls/OverlayPopup.razor.rz.scp.css */
.overlay[b-283tin4lg7] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-content[b-283tin4lg7] {
    background: var(--color-primary);
    padding: 1.5rem;
}

.modal[b-283tin4lg7] {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.fullscreen[b-283tin4lg7] {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* Button */
.btn-primary[b-283tin4lg7] {
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: #ffffff;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .btn-primary:hover[b-283tin4lg7] {
        background-color: var(--color-primary-hover);
        box-shadow: 0 4px 12px var(--color-shadow-button);
        border: 1px solid var(--color-primary);
    }
/* _content/RealOxy.Web.Core/Controls/Popups/ConfirmationPopup.razor.rz.scp.css */
.empty-state[b-wrxtxge248] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    background: var(--color-bg-white);
    border: 1px dashed var(--color-border-default);
    border-radius: 12px;
    max-width: 420px;
    margin: 60px auto;
}

/* Icon container */
.empty-icon[b-wrxtxge248] {
    position: relative;
    width: 100px;
    height: 50px;
    margin-bottom: 24px;
}

    /* Car silhouette */
    .empty-icon .car[b-wrxtxge248] {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 32px;
        background: var(--color-navbar-bg);
        border-radius: 8px 8px 4px 4px;
    }

    /* Inspection check */
    .empty-icon .check[b-wrxtxge248] {
        position: absolute;
        top: -10px;
        right: 4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid var(--color-primary);
    }

        .empty-icon .check[b-wrxtxge248]::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 3px;
            width: 6px;
            height: 10px;
            border: solid var(--color-primary);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

/* Title */
.empty-title[b-wrxtxge248] {
    font-size:18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

/* Description */
.empty-description[b-wrxtxge248] {
    font-size: 13px;
    color: var(--color-text-secondary);
    max-width: 320px;
    line-height: 1.6;
    margin-bottom: 24px;
}
/* _content/RealOxy.Web.Core/Controls/Popups/ErrorPopup.razor.rz.scp.css */
.empty-state[b-4nra848fjw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    background: var(--color-bg-white);
    border: 1px dashed var(--color-border-default);
    border-radius: 12px;
    max-width: 420px;
    margin: 60px auto;
}

/* Icon container */
.empty-icon[b-4nra848fjw] {
    position: relative;
    width: 100px;
    height: 50px;
    margin-bottom: 24px;
}

    /* Car silhouette */
    .empty-icon .car[b-4nra848fjw] {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 32px;
        background: var(--color-navbar-bg);
        border-radius: 8px 8px 4px 4px;
    }

    /* Inspection check */
    .empty-icon .check[b-4nra848fjw] {
        position: absolute;
        top: -10px;
        right: 4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid var(--color-primary);
    }

        .empty-icon .check[b-4nra848fjw]::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 3px;
            width: 6px;
            height: 10px;
            border: solid var(--color-primary);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

/* Title */
.empty-title[b-4nra848fjw] {
    font-size:18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

/* Description */
.empty-description[b-4nra848fjw] {
    font-size: 13px;
    color: var(--color-text-secondary);
    max-width: 320px;
    line-height: 1.6;
    margin-bottom: 24px;
}
/* _content/RealOxy.Web.Core/Controls/Popups/LanguagePopup.razor.rz.scp.css */
.language-popup-content[b-017owf7lqy] {
    background: #fff;
    border-radius: 20px;
    width: 90vw;
    max-width: 450px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.lang-option-btn[b-017owf7lqy] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.lang-option-btn:hover[b-017owf7lqy] {
    background: #f9fafb;
    border-color: #d1d5db;
}

.lang-option-btn.active[b-017owf7lqy] {
    background: #fdfaf7;
    border-color: #674e34;
    box-shadow: 0 4px 12px rgba(103, 78, 52, 0.08);
}

.flag-img[b-017owf7lqy] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.lang-name[b-017owf7lqy] {
    font-size: 16px;
    font-weight: 500;
    color: #374151;
}

.lang-option-btn.active .lang-name[b-017owf7lqy] {
    color: #674e34;
    font-weight: 600;
}

.check-icon[b-017owf7lqy] {
    font-size: 18px;
    color: #674e34;
}

.popup-header .btn-close[b-017owf7lqy] {
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
    width: 0.8em;
    height: 0.8em;
}

.popup-header .btn-close:hover[b-017owf7lqy] {
    opacity: 1;
    transform: scale(1.1);
}
/* _content/RealOxy.Web.Core/Controls/Popups/LoadingPopup.razor.rz.scp.css */
.empty-state[b-8ofeplt0yi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    background: var(--color-bg-white);
    border: 1px dashed var(--color-border-default);
    border-radius: 12px;
    max-width: 420px;
    margin: 60px auto;
}

/* Icon container */
.empty-icon[b-8ofeplt0yi] {
    position: relative;
    width: 100px;
    height: 50px;
    margin-bottom: 24px;
}

    /* Car silhouette */
    .empty-icon .car[b-8ofeplt0yi] {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 32px;
        background: var(--color-navbar-bg);
        border-radius: 8px 8px 4px 4px;
    }

    /* Inspection check */
    .empty-icon .check[b-8ofeplt0yi] {
        position: absolute;
        top: -10px;
        right: 4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid var(--color-primary);
    }

        .empty-icon .check[b-8ofeplt0yi]::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 3px;
            width: 6px;
            height: 10px;
            border: solid var(--color-primary);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

/* Title */
.empty-title[b-8ofeplt0yi] {
    font-size:18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

/* Description */
.empty-description[b-8ofeplt0yi] {
    font-size: 13px;
    color: var(--color-text-secondary);
    max-width: 320px;
    line-height: 1.6;
    margin-bottom: 24px;
}
/* _content/RealOxy.Web.Core/Controls/Popups/LocationPopup.razor.rz.scp.css */
/* CARD */
.location-card[b-pe555ndpmc] {
    width: 720px;
    height: 600px;
    background: var(--color-bg-white);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* HEADER */
.location-header[b-pe555ndpmc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

    .location-header h3[b-pe555ndpmc] {
        margin: 0;
        font-size: 20px;
        font-weight: 800;
    }

.close-btn[b-pe555ndpmc] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border-default);
    background: none;
    font-size: 18px;
    cursor: pointer;
}


/* MOBILE */

@media (max-width: 600px) {
    .location-card[b-pe555ndpmc] {
        margin: 16px;
        width: 350px;
        height: 500px;
    }
}
/* _content/RealOxy.Web.Core/Controls/Popups/LoginPopup.razor.rz.scp.css */
/* ===============================
   LOGIN CARD
================================ */
.login-card[b-vp2660dhmm] {
    width: 400px;
    background: var(--color-bg-white);
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border: 1px solid var(--color-border-default);
}

.close-btn[b-vp2660dhmm] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: 1px solid var(--color-border-default);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.login-visual[b-vp2660dhmm] {
    position: relative;
}

    .login-visual img[b-vp2660dhmm] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.login-visual-text[b-vp2660dhmm] {
    position: absolute;
    bottom: 24px;
    left: 24px;
    color: #ffffff;
}

    .login-visual-text h2[b-vp2660dhmm] {
        font-size: 28px;
        font-weight: 800;
        line-height: 1.2;
    }

.login-form[b-vp2660dhmm] {
    padding: 32px;
    position: relative;
}

    .login-form h3[b-vp2660dhmm] {
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 24px;
        color: var(--color-text-primary);
    }

@media (max-width: 768px) {
    .login-card[b-vp2660dhmm] {
        grid-template-columns: 1fr;
        width: 400px;
    }

    .login-visual[b-vp2660dhmm] {
        display: none;
    }
}
/* _content/RealOxy.Web.Core/Controls/ProductImageSlider.razor.rz.scp.css */
.vehicle-slide[b-l2vgyo50hi] {
    max-height: 800px;
    background-color: black;
    display: flex;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    position: relative; /* Needed for absolute positioning of watermark */
}

.watermark-container[b-l2vgyo50hi] {
    position: absolute;
    bottom: 15px;
    right: 15px;
    pointer-events: none; /* Let clicks pass through to the slider */
    z-index: 10;
    opacity: 0.8;
}

.watermark-image[b-l2vgyo50hi] {
    max-width: 80px;
    height: auto;
    /* Optional: filter to make it stand out on various backgrounds */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

@media (max-width: 768px) {
    .watermark-container[b-l2vgyo50hi] {
        bottom: 10px;
        right: 10px;
    }
    .watermark-image[b-l2vgyo50hi] {
        max-width: 40px;
    }
}

.vehicle-image[b-l2vgyo50hi] {
    width: 100%;
    height: 100%;
    border-radius:10px;
    max-height: 800px;
    object-fit: contain; /* THIS is the key */
}
/* Base (mobile-first) */
.slider-layout[b-l2vgyo50hi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* IMPORTANT: prevent overflow issues */
.slider-main[b-l2vgyo50hi] {
    width: 100%;
    min-width: 0; /* critical fix */
}
/* Thumbnail strip (bottom on mobile) */
.thumb-strip-outer[b-l2vgyo50hi] {
    width: 100%;
}

.thumb-strip[b-l2vgyo50hi] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.thumb-item img[b-l2vgyo50hi] {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.vehicle-slider-wrapper[b-l2vgyo50hi] {
    width: 100%;
    overflow: hidden;
    min-width: 0;
}


.vehicle-slide[b-l2vgyo50hi] {
    width: 100%;
}

.vehicle-image[b-l2vgyo50hi] {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: var(--border-radius-input);
}

.vehicle-slider-wrapper .slick-prev[b-l2vgyo50hi],
.vehicle-slider-wrapper .slick-next[b-l2vgyo50hi] {
    display: none !important;
}
.thumb-strip-outer[b-l2vgyo50hi] {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 0 2px;
}

.thumb-strip[b-l2vgyo50hi] {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
    flex: 1;
    padding: 4px 2px;
}

    .thumb-strip[b-l2vgyo50hi]::-webkit-scrollbar {
        display: none; 
    }

.thumb-item[b-l2vgyo50hi] {
    flex: 0 0 auto;
    width: 100px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2.5px solid transparent;
    transition: border-color .2s ease, opacity .2s ease, transform .15s ease;
    opacity: .72;
}

    .thumb-item img[b-l2vgyo50hi] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
    }

    .thumb-item:hover[b-l2vgyo50hi] {
        opacity: 1;
        transform: translateY(-2px);
    }

.thumb-item--active[b-l2vgyo50hi] {
    border-color: var(--color-primary);
    opacity: 1;
    transform: translateY(-2px);
}

.thumb-arrow[b-l2vgyo50hi] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
    font-size: 13px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

    .thumb-arrow:hover[b-l2vgyo50hi] {
        background: #f1f1f1;
        border-color: #bbb;
    }

    .thumb-item[b-l2vgyo50hi] {
        width: 144px;
        height: 100px;
        border-radius: 6px;
    }

    .thumb-arrow[b-l2vgyo50hi] {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

}

@media (max-width: 480px) {
    .thumb-item[b-l2vgyo50hi] {
        width: 58px;
        height: 40px;
    }
}

/* ---------------------- */
/* Desktop layout */
/* ---------------------- */
/*@media (min-width: 1920px) {
    .slider-layout {
        flex-direction: row;
        align-items: stretch;
    }

    .slider-main {
        flex: 1 1 auto;
        min-width: 0;*/ /* prevents pushing thumbnails out */
    /*}

    .thumb-strip-outer {
        flex: 0 0 120px;*/ /* FIXED width */
        /*max-width: 120px;
        display: flex;
        flex-direction: column;
    }

    .thumb-strip {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
    }

}*/
/* _content/RealOxy.Web.Core/Controls/ProductImageViewer.razor.rz.scp.css */
.image-viewer-overlay[b-4gwe3bwr24] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    animation: fadeIn-b-4gwe3bwr24 0.3s ease-out;
}

.viewer-content[b-4gwe3bwr24] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.close-button[b-4gwe3bwr24] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    transition: background 0.2s;
}

.close-button:hover[b-4gwe3bwr24] {
    background: rgba(255, 255, 255, 0.2);
}

.viewer-slider[b-4gwe3bwr24] {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    overflow: hidden;
}

.zoom-container[b-4gwe3bwr24] {
    flex: 1;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
    touch-action: none;
}

.zoomable-image[b-4gwe3bwr24] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center;
}

.nav-arrow[b-4gwe3bwr24] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    transition: opacity 0.2s;
}

.nav-arrow:disabled[b-4gwe3bwr24] {
    opacity: 0.3;
    cursor: not-allowed;
}

.viewer-footer[b-4gwe3bwr24] {
    padding: 20px;
    color: white;
    font-weight: 500;
    letter-spacing: 1px;
}

@keyframes fadeIn-b-4gwe3bwr24 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .nav-arrow[b-4gwe3bwr24] {
        display: none;
        /* Swipe is better on mobile */
    }
}

.watermark-container-viewer[b-4gwe3bwr24] {
    position: absolute;
    bottom: 30px;
    right: 30px;
    pointer-events: none;
    z-index: 10002;
    opacity: 0.6;
}

.watermark-image-viewer[b-4gwe3bwr24] {
    max-width: 120px;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

@media (max-width: 768px) {
    .watermark-container-viewer[b-4gwe3bwr24] {
        bottom: 15px;
        right: 15px;
    }

    .watermark-image-viewer[b-4gwe3bwr24] {
        max-width: 80px;
    }
}
/* _content/RealOxy.Web.Core/Controls/SearchBarForHome.razor.rz.scp.css */
.search-wrapper[b-ps0gs9xebq] {
    width: 100%;
    padding: 20px 20px 10px 20px;
}

.search-container[b-ps0gs9xebq] {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    overflow: hidden;
    padding:0px 10px 0px 10px;
}
.search-categories[b-ps0gs9xebq] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 8px;
    border-bottom: 1px solid #f0f0f0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .search-categories[b-ps0gs9xebq]::-webkit-scrollbar {
        display: none;
    }

.cat-tab[b-ps0gs9xebq] {
    flex: 1;
    flex-shrink: 0;
    background: none;
    border: none;
    border-bottom: 4px solid transparent;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 900;
    color: #555;
    cursor: pointer;
    transition: color .18s, border-color .18s;
    white-space: nowrap;
    margin-bottom: -1px;
}

    .cat-tab:hover[b-ps0gs9xebq] {
        color: var(--color-primary);
    }

.cat-tab--active[b-ps0gs9xebq] {
    color: var(--color-primary);
    font-weight: 900;
    border-bottom-color: var(--color-primary);
}

/* Gold "I need" pill button */
.search-need-btn[b-ps0gs9xebq] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #FBF5E9 0%, #F5E8D2 100%);
    border: 1.5px solid #EBDDCB;
    border-radius: 999px;
    color: #9C6E1E;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(201, 146, 46, 0.14);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
    margin-left: 8px;
    white-space: nowrap;
}

.search-need-btn:hover[b-ps0gs9xebq] {
    background: linear-gradient(135deg, #F5E8D2 0%, #ECD9BA 100%);
    border-color: #DFCAAB;
    box-shadow: 0 4px 12px rgba(201, 146, 46, 0.22);
    transform: translateY(-1px);
    color: #835B13;
}

.search-need-btn:active[b-ps0gs9xebq] {
    transform: scale(0.96);
    background: linear-gradient(135deg, #F3E3C6 0%, #E8D3AE 100%);
    border-color: #C9922E;
}

.search-need-btn i[b-ps0gs9xebq] {
    font-size: 14px;
    color: #C9922E;
}

/* ── Search box row ──────────────────────────────────────────── */
.search-box[b-ps0gs9xebq] {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    position: relative;
}

.search-icon[b-ps0gs9xebq] {
    font-size: 20px;
    color: #8a8a8a;
    margin-right: 10px;
    flex-shrink: 0;
}

.search-input[b-ps0gs9xebq] {
    flex: 1;
    border: none;
    background: transparent;
    box-shadow: none !important;
    font-size: 15px;
    color: #333;
    padding: 0;
}

    .search-input:focus[b-ps0gs9xebq] {
        box-shadow: none !important;
        outline: none;
    }

.search-input[b-ps0gs9xebq]::placeholder {
    color: transparent;
}

.search-placeholder-container[b-ps0gs9xebq] {
    position: absolute;
    left: 15px;
    right: 225px; /* Space for I need button + Search button */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    height: 30px;
}

.animated-icon-part[b-ps0gs9xebq], .animated-name-part[b-ps0gs9xebq] {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.stationary-part[b-ps0gs9xebq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Hide animation when focused */
.search-input:focus ~ .search-placeholder-container[b-ps0gs9xebq] {
    opacity: 0;
    visibility: hidden;
}

.search-category-icon[b-ps0gs9xebq] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.search-text-static[b-ps0gs9xebq] {
    font-weight: 600;
    font-size: 15px;
    color: #888;
}

.search-text-dynamic[b-ps0gs9xebq] {
    color: #888;
    font-weight: 600;
    font-size: 15px;
}

.category-name[b-ps0gs9xebq] {
    font-weight: 600;
    font-size: 15px;
    color: #888;
}

.slide-down-enter[b-ps0gs9xebq] {
    animation: slideDownIn-b-ps0gs9xebq 0.5s ease-out forwards;
}

.slide-down-exit[b-ps0gs9xebq] {
    animation: slideDownOut-b-ps0gs9xebq 0.5s ease-in forwards;
}

@keyframes slideDownIn-b-ps0gs9xebq {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDownOut-b-ps0gs9xebq {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(30px);
        opacity: 0;
    }
}

.search-btn[b-ps0gs9xebq] {
    flex-shrink: 0;
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 600;
    margin-left: 10px;
    cursor: pointer;
    transition: background .18s;
}

    .search-btn:hover[b-ps0gs9xebq] {
        background-color: #5a3f26;
    }

@media (max-width: 768px) {
    .search-wrapper[b-ps0gs9xebq] {
        padding: 0;
    }

    .search-container[b-ps0gs9xebq] {
        border-radius: 14px;
        padding: 0 4px 0 8px;
    }

    .search-box[b-ps0gs9xebq] {
        padding: 8px 6px;
        min-height: 48px;
    }

    .search-placeholder-container[b-ps0gs9xebq] {
        left: 10px;
        right: 95px;
    }

    .search-text-static[b-ps0gs9xebq], .search-text-dynamic[b-ps0gs9xebq], .category-name[b-ps0gs9xebq] {
        font-size: 13.5px;
    }

    .search-input[b-ps0gs9xebq] {
        font-size: 14px;
    }

    .search-need-btn[b-ps0gs9xebq] {
        font-size: 12px;
        padding: 6px 12px;
        gap: 5px;
        margin-left: auto;
    }

    .search-need-btn i[b-ps0gs9xebq] {
        font-size: 13px;
    }
}

.search-category-icon-fallback[b-ps0gs9xebq] {
    font-size: 18px;
    color: #888;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* _content/RealOxy.Web.Core/Controls/SelectOrMultiSelect.razor.rz.scp.css */

/* ===============================
   FORM FIELDS
================================ */
.form-group[b-8ah5d4t49y] {
    margin-bottom: 8px
}

.form-label[b-8ah5d4t49y] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--color-text-secondary);
}
.form-label-filter[b-8ah5d4t49y] {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text-secondary);
}


.option-grid[b-8ah5d4t49y] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 576px) {
    .subtitle-text[b-8ah5d4t49y] {
        font-size: 10px; /* adjust if needed */
        line-height: 1.3;
    }
}
.option-grid-filter[b-8ah5d4t49y] {
    display: grid;
}

/* ===============================
   CUSTOM DROPDOWN
================================ */

.custom-multiselect-dropdown[b-8ah5d4t49y] {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 14px;
    background: #fff;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

    .custom-multiselect-dropdown:hover[b-8ah5d4t49y] {
        border-color: var(--color-primary);
    }

/* Dropdown Backdrop */
.custom-dropdown-backdrop[b-8ah5d4t49y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: transparent;
}

.custom-multiselect-panel[b-8ah5d4t49y] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-top: 6px;
    padding: 10px;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain; /* Prevents scroll chaining to background */
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    z-index: 1000;
}

/* Optional: Body Scroll Lock (Modern Browsers) - REMOVED because user wants background scroll to work */
/* body:has(.custom-multiselect-panel) { ... } */

    .custom-multiselect-panel *[b-8ah5d4t49y] {
        max-width: 100%;
        box-sizing: border-box;
        word-break: break-word;
    }

/* Dropdown Icons */

.dropdown-close-icon[b-8ah5d4t49y],
.dropdown-arrow[b-8ah5d4t49y] {
    font-size: 14px;
    cursor: pointer;
    color: #888;
    margin-left: 10px;
    flex-shrink: 0;
}

    .dropdown-close-icon:hover[b-8ah5d4t49y] {
        color: #000;
    }

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

@media (max-width: 576px) {

    .edit-category-popup[b-8ah5d4t49y] {
        width: 95vw;
        max-height: 85vh;
        border-radius: 16px;
        padding: 20px 0 10px 0;
    }

    .popup-footer[b-8ah5d4t49y] {
        padding: 16px 20px;
    }

    .media-preview-list[b-8ah5d4t49y] {
        margin: 12px 0 16px 0;
    }
}
/* _content/RealOxy.Web.Core/Controls/SingleSelect.razor.rz.scp.css */

/* ===============================
   FORM FIELDS
================================ */
.form-group[b-d5nqgvoyvd] {
    margin-bottom: 8px
}

.form-label[b-d5nqgvoyvd] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--color-text-secondary);
}
.form-label-filter[b-d5nqgvoyvd] {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text-secondary);
}


.option-grid[b-d5nqgvoyvd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 576px) {
    .subtitle-text[b-d5nqgvoyvd] {
        font-size: 10px; /* adjust if needed */
        line-height: 1.3;
    }
}
.option-grid-filter[b-d5nqgvoyvd] {
    display: grid;
}


@media (max-width: 576px) {

    .edit-category-popup[b-d5nqgvoyvd] {
        width: 95vw;
        max-height: 85vh;
        border-radius: 16px;
        padding: 20px 0 10px 0;
    }

    .popup-footer[b-d5nqgvoyvd] {
        padding: 16px 20px;
    }

    .media-preview-list[b-d5nqgvoyvd] {
        margin: 12px 0 16px 0;
    }
}
/* _content/RealOxy.Web.Core/Controls/SpinnerLoader.razor.rz.scp.css */
.loader[b-gdmlz0z097] {
    display: inline-block;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
    --b: 5px;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 1px;
    box-sizing: border-box;
    flex-shrink: 0;
    align-self: center;
    background: conic-gradient(#0000 10%,#ffffff) content-box;
    -webkit-mask: repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg), radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    animation: l4-b-gdmlz0z097 1s infinite steps(10);
}

@keyframes l4-b-gdmlz0z097 {
    to {
        transform: rotate(1turn)
    }
}
/* _content/RealOxy.Web.Core/Controls/Steps.razor.rz.scp.css */
.av-steps[b-ijom39nywq] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 10px;
    background: #FFFFFF;
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

/* ===============================
   STEP BASE
================================ */
.step[b-ijom39nywq] {
    flex: 0 0 120px;
    position: relative;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #7a6a4c;
    cursor: pointer;
    user-select: none;
}

/* ===============================
   STEP CIRCLE (icon & background container)
================================ */
.step-circle[b-ijom39nywq] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #c7a86d;
    background: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px auto;
    position: relative;
    z-index: 3;
    font-size: 18px;
    color: #c7a86d;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.step:hover .step-circle[b-ijom39nywq] {
    transform: scale(1.06);
    box-shadow: 0 0 8px rgba(199, 168, 109, 0.35);
}

.step:active .step-circle[b-ijom39nywq] {
    transform: scale(0.95);
}

.step.active[b-ijom39nywq] {
    color: #b3872f;
}

.step.active .step-circle[b-ijom39nywq] {
    border-color: #b3872f;
    color: #b3872f;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(199, 168, 109, 0.22), 0 2px 8px rgba(179, 135, 47, 0.25);
}

.step.completed .step-circle[b-ijom39nywq] {
    background: var(--color-primary, #674e34) !important;
    border-color: var(--color-primary, #674e34);
    color: #ffffff;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ===============================
   CONNECTING LINE
================================ */
.step[b-ijom39nywq]::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #d9cdb6;
    z-index: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

.step:last-child[b-ijom39nywq]::after {
    display: none;
}

.step.completed[b-ijom39nywq]::after {
    background: var(--color-primary, #674e34);
}

/* ===============================
   STEP CONTENT
================================ */
.step-content[b-ijom39nywq] {
    display: none;
    flex: 1;
    padding: 18px;
    overflow-y: auto;
}

.step-content.active[b-ijom39nywq] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .step-content[b-ijom39nywq] {
        max-width: 100%;
    }

    .av-steps[b-ijom39nywq] {
        margin: 0;
    }
}

/* ===============================
   TABLET
================================ */
@media (max-width: 900px) {
    .av-steps[b-ijom39nywq] {
        max-width: 600px;
    }

    .step[b-ijom39nywq] {
        flex: 0 0 100px;
        font-size: 10px;
    }

    .step-circle[b-ijom39nywq] {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .step[b-ijom39nywq]::after {
        top: 18px;
    }
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 600px) {
    .av-steps[b-ijom39nywq] {
        max-width: 100%;
        padding: 14px 6px;
    }

    .step[b-ijom39nywq] {
        flex: 1;
        font-size: 9px;
    }

    .step-circle[b-ijom39nywq] {
        width: 30px;
        height: 30px;
        font-size: 13px;
        margin-bottom: 4px;
    }

    .step[b-ijom39nywq]::after {
        top: 15px;
    }
}
/* _content/RealOxy.Web.Core/Controls/TextInputWithCountryCode.razor.rz.scp.css */
/* ===== Wrapper for phone input with country code ===== */
.input-with-prefix[b-cqinpf33h5] {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    width: 100%;
}

/* ===== Country dropdown ===== */
.country-select[b-cqinpf33h5] {
    border: none;
    padding: 5px 6px;
    background: #ffffff;
    outline: none;
    cursor: pointer;
    border-right: 1px solid var(--color-border-default);
    height: 100%;
}
.general-input[b-cqinpf33h5]{
    border-radius:0px  !important; 
}
/* ===== Phone input ===== */
.input-with-prefix .general-input[b-cqinpf33h5] {
    flex: 1;
    padding: 10px;
    background: #ffffff !important;
    width: 100%;
}

    /* Remove focus outline weirdness */
    .input-with-prefix .general-input:focus[b-cqinpf33h5],
    .country-select:focus[b-cqinpf33h5] {
        outline: none;
        box-shadow: none;
    }

/* ===== Subtitle responsive fix ===== */
@media (max-width: 576px) {
    .subtitle-text[b-cqinpf33h5] {
        font-size: 10px;
        line-height: 1.3;
    }
}

/* _content/RealOxy.Web.Core/Controls/TextPasswordWithTitle.razor.rz.scp.css */
/* ===============================
   Password Input
================================ */

.password-input[b-3p4qz9vc40] {
    display: flex;
    align-items: center;
    gap:8px;
    width: 100%;

    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-white);
    font-size: 0.9rem;
    color: var(--color-text-input);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 1px 2px var(--color-shadow-input);
}

    .password-input i[b-3p4qz9vc40] {
        font-size: 0.9rem;
        color: var(--color-text-muted);
    }

    /* Input */
    .password-input input[b-3p4qz9vc40] {
        border: none;
        outline: none;
        width: 100%;
        font-size: 0.85rem;
        background: transparent;
        color: var(--color-text-primary);
    }

    .password-input:focus-within[b-3p4qz9vc40] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-focus-ring);
    }

    .password-input input[b-3p4qz9vc40]::placeholder {
        color: var(--color-text-placeholder);
    }

/* Eye button */
.password-toggle[b-3p4qz9vc40] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

    /* Eye icon */
    .password-toggle i[b-3p4qz9vc40] {
        font-size: 0.9rem;
        color: var(--color-text-muted);
        transition: color 0.2s ease;
    }

    .password-toggle:hover i[b-3p4qz9vc40] {
        color: var(--color-primary);
    }
/* _content/RealOxy.Web.Core/Controls/YesNoSelect.razor.rz.scp.css */

/* ===============================
   FORM FIELDS
================================ */
.form-group[b-sqhp3fcy7p] {
    margin-bottom: 8px
}

.form-label[b-sqhp3fcy7p] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--color-text-secondary);
}
.form-label-filter[b-sqhp3fcy7p] {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text-secondary);
}


.option-grid[b-sqhp3fcy7p] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 576px) {
    .subtitle-text[b-sqhp3fcy7p] {
        font-size: 10px; /* adjust if needed */
        line-height: 1.3;
    }
}
.option-grid-filter[b-sqhp3fcy7p] {
    display: grid;
}


@media (max-width: 576px) {

    .edit-category-popup[b-sqhp3fcy7p] {
        width: 95vw;
        max-height: 85vh;
        border-radius: 16px;
        padding: 20px 0 10px 0;
    }

    .popup-footer[b-sqhp3fcy7p] {
        padding: 16px 20px;
    }

    .media-preview-list[b-sqhp3fcy7p] {
        margin: 12px 0 16px 0;
    }
}
/* _content/RealOxy.Web.Core/ErrorUI/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-v6sjgw5jgm],
.components-reconnect-repeated-attempt-visible[b-v6sjgw5jgm],
.components-reconnect-failed-visible[b-v6sjgw5jgm],
.components-pause-visible[b-v6sjgw5jgm],
.components-resume-failed-visible[b-v6sjgw5jgm],
.components-rejoining-animation[b-v6sjgw5jgm] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-v6sjgw5jgm],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-v6sjgw5jgm],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-v6sjgw5jgm],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-v6sjgw5jgm],
#components-reconnect-modal.components-reconnect-retrying[b-v6sjgw5jgm],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-v6sjgw5jgm],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-v6sjgw5jgm],
#components-reconnect-modal.components-reconnect-failed[b-v6sjgw5jgm],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-v6sjgw5jgm] {
    display: block;
}


#components-reconnect-modal[b-v6sjgw5jgm] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-v6sjgw5jgm 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-v6sjgw5jgm 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-v6sjgw5jgm 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-v6sjgw5jgm]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-v6sjgw5jgm 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-v6sjgw5jgm {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-v6sjgw5jgm {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-v6sjgw5jgm {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-v6sjgw5jgm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-v6sjgw5jgm] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-v6sjgw5jgm] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-v6sjgw5jgm] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-v6sjgw5jgm] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-v6sjgw5jgm] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-v6sjgw5jgm] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-v6sjgw5jgm 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-v6sjgw5jgm] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-v6sjgw5jgm {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* _content/RealOxy.Web.Core/Header/HeaderContainer.razor.rz.scp.css */
/* ===============================
   MAIN HEADER
================================ */
.main-header[b-6h1gc608c2] {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    position: sticky;
    top: 0;
    z-index: 1;
}

.header-colored[b-6h1gc608c2] {
    background: var(--color-primary);
}

.header-transparent[b-6h1gc608c2] {
    background: transparent;
}

/* Layout */
.header-left[b-6h1gc608c2],
.header-right[b-6h1gc608c2] {
    display: flex;
    align-items: center;
}

.header-right[b-6h1gc608c2] {
    gap: 20px;
}

/* Logo */
.logo[b-6h1gc608c2] {
    height: 42px;
    object-fit: contain;
    cursor: pointer;
}

/* ===============================
   DESKTOP LOCATION (WEB VIEW)
================================ */

.desktop-header[b-6h1gc608c2] {
    gap: 28px;
}

.desktop-location[b-6h1gc608c2] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #ffffff;
}

.location-icon[b-6h1gc608c2] {
    font-size: 18px;
    opacity: 0.9;
}

.desktop-location-text[b-6h1gc608c2] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.desktop-small[b-6h1gc608c2] {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.75;
}

.desktop-place[b-6h1gc608c2] {
    font-size: 14px;
    font-weight: 700;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.mobile-header[b-6h1gc608c2] {
    width: 100%;
    justify-content: space-between;
}

.mobile-location[b-6h1gc608c2] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: white;
}

.mobile-location-text[b-6h1gc608c2] {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.1;
}

.mobile-small[b-6h1gc608c2] {
    font-size: 11px;
    opacity: 0.8;
}

.mobile-place[b-6h1gc608c2] {
    margin-top:2px;
    font-size: 12px;
    font-weight: 600;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-dropdown[b-6h1gc608c2] {
    position: relative;
    cursor: pointer;
    outline: none;
    z-index: 100000;
}

.header[b-6h1gc608c2],
.header-container[b-6h1gc608c2],
.navbar[b-6h1gc608c2] {
    overflow: visible !important;
}


/* Dropdown hidden by default */
.account-menu[b-6h1gc608c2] {
    position: fixed; /* escape parent clipping */
    top: 70px; /* below header */
    right: 100px;
    width: 200px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    display: none;
    flex-direction: column;
    z-index: 99999; /* above EVERYTHING */
}


/* Show dropdown on click/focus */
.account-dropdown:focus-within .account-menu[b-6h1gc608c2] {
    display: flex;
}

/* Menu items */
.account-menu-item[b-6h1gc608c2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
}

    .account-menu-item i[b-6h1gc608c2] {
        font-size: 16px;
        color: var(--color-icon-default);
    }

    /* Hover */
    .account-menu-item:hover[b-6h1gc608c2] {
        background: var(--color-bg-table-row-hover);
    }

    /* Logout emphasis */
    .account-menu-item.logout[b-6h1gc608c2] {
        color: var(--color-status-danger-text);
    }

        .account-menu-item.logout i[b-6h1gc608c2] {
            color: var(--color-status-danger-text);
        }

    /* Divider */
    .account-menu-item + .account-menu-item[b-6h1gc608c2] {
        border-top: 1px solid var(--color-border-table);
    }




.btn-call[b-6h1gc608c2] {
    background: #ffffff;
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
}

/* 🔥 Mobile fix */



/* Hamburger button */
.menu-toggle[b-6h1gc608c2] {
    display: none;
    background: none;
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .menu-toggle i[b-6h1gc608c2] {
        font-size: 22px;
    }

.header-right[b-6h1gc608c2] {
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center;
    gap: 20px;
    height: 100%; /* important */
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 768px) {

    .main-header[b-6h1gc608c2] {
        padding: 0 16px;
    }

    .account-text[b-6h1gc608c2] {
        display: none;
    }

    .btn-call[b-6h1gc608c2] {
        display: none;
    }
}

.lang-switch-btn[b-6h1gc608c2] {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px);
}

.lang-switch-btn:hover[b-6h1gc608c2] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.lang-switch-btn:active[b-6h1gc608c2] {
    transform: scale(0.96);
}

/* ---------- Chat unread badge ---------- */
.header-chat-wrap[b-6h1gc608c2] {
    position: relative;
    display: flex;
    align-items: center;
}

.header-unread-badge[b-6h1gc608c2] {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #C0392B;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* _content/RealOxy.Web.Core/Header/HeaderForMobile.razor.rz.scp.css */
/* Reusable ripple effect */
.css-ripple[b-4xj2yoo9v3] {
    position: relative;
    overflow: hidden; /* required */
}

    /* Ripple circle */
    .css-ripple[b-4xj2yoo9v3]::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        background: rgba(0, 0, 0, 0.25); /* ripple color */
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    /* Trigger ripple */
    .css-ripple:active[b-4xj2yoo9v3]::before {
        animation: css-ripple-effect-b-4xj2yoo9v3 0.6s ease-out;
    }

/* Ripple animation */
@keyframes css-ripple-effect-b-4xj2yoo9v3 {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.4;
    }

    100% {
        transform: translate(-50%, -50%) scale(6);
        opacity: 0;
    }
}

.go-back-div[b-4xj2yoo9v3] {
    padding: 0px;
    /*margin-bottom: 10px;*/
    align-items: center;
    justify-content: space-between;
    width: 100%; /* Ensure it spans the full width */
    background-color: white;
}

.go-back[b-4xj2yoo9v3] {
    padding: 8px;
    cursor: pointer;
    position: absolute;
    left: 8px;
    top:8px;
}

.category-tab-text[b-4xj2yoo9v3] {
    flex: 1;
    flex-grow: 1;
}

.backbtn-transition[b-4xj2yoo9v3] {
    transition: transform 0.15s ease, opacity 0.15s ease;
}

    .backbtn-transition:active[b-4xj2yoo9v3] {
        transform: scale(0.85);
        opacity: 0.6;
    }

.header-mobile-right[b-4xj2yoo9v3] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
}

.location-btn-mobile[b-4xj2yoo9v3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: #2D2319;
    font-size: 18px;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.location-btn-mobile:hover[b-4xj2yoo9v3] {
    background-color: #FAF6EE;
    color: #C9922E;
}

.location-btn-mobile:active[b-4xj2yoo9v3] {
    transform: scale(0.9);
}

.lang-switch-btn-mobile[b-4xj2yoo9v3] {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}


/* _content/RealOxy.Web.Core/Layout/BottomBarSticky.razor.rz.scp.css */
.bottom-navbar-container[b-gn53sl5k3z] {
    position: fixed;
    z-index: 1045;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
}

.bottom-navbar[b-gn53sl5k3z] {
    width: 100%;
    background-color: white; /* Change background color to white */
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

/* General styles for the nav-item button */
.nav-item[b-gn53sl5k3z] {
    text-align: center;
    flex: 1;
    border: none;
    background: none;
    outline: none;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

    /* Default SVG color */
    .nav-item svg[b-gn53sl5k3z] {
        fill: #b0b0b0;
        transition: fill 0.3s ease;
    }

    /* Default text color */
    .nav-text[b-gn53sl5k3z] {
        font-size: 11px;
        color: #b0b0b0;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    /* Hover/Active effect for SVG icon */
    .nav-item:hover svg[b-gn53sl5k3z],
    .nav-item.active svg[b-gn53sl5k3z] {
        fill: #674E34;
    }

    /* Hover/Active effect for text */
    .nav-item:hover .nav-text[b-gn53sl5k3z],
    .nav-item.active .nav-text[b-gn53sl5k3z] {
        color: #674E34;
    }


.material-symbols-outlined[b-gn53sl5k3z] {
    display: block;
    margin-bottom: 5px;
    transition: color 0.3s; /* Smooth transition for color change */
}

/* Style for the plus button */
.nav-item.add-button:hover[b-gn53sl5k3z] {
    background-color: #f0f0f0;
}

.add[b-gn53sl5k3z] {
    display: flex;
    justify-content: center;
    position: relative;
    background-image: linear-gradient(to right, orange, yellow, green);
    height: 60px;
    width: 60px;
    border-radius: 50px;
    top: -10px;
    align-items: center;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.add.is-open[b-gn53sl5k3z] {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.button[b-gn53sl5k3z] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: white;
    position: absolute;
    border-radius: 50px;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
}

.add-icon[b-gn53sl5k3z] {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center;
}

.add-icon.rotated[b-gn53sl5k3z] {
    transform: rotate(45deg);
}

.icon[b-gn53sl5k3z] {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    color: #90EE90; /* Green color */
}

/* ================= Dark Transparent Overlay ================= */
.action-menu-backdrop[b-gn53sl5k3z] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1040;
    animation: backdropFadeIn-b-gn53sl5k3z 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    cursor: pointer;
}

@keyframes backdropFadeIn-b-gn53sl5k3z {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ================= Action Pills Container ================= */
.action-pills-container[b-gn53sl5k3z] {
    position: fixed;
    bottom: 82px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 1042;
    width: max-content;
    max-width: 92vw;
}

/* Action Pill Buttons */
.action-pill-btn[b-gn53sl5k3z] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    padding: 8px 18px 8px 8px;
    box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.35), 0 4px 10px -2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    min-width: 220px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, background 0.18s ease;
    outline: none;
}

.action-pill-btn:hover[b-gn53sl5k3z] {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.45), 0 6px 14px -2px rgba(0, 0, 0, 0.25);
    background-color: #fafafa;
}

.action-pill-btn:active[b-gn53sl5k3z] {
    transform: translateY(1px) scale(0.96);
}

/* Bouncy elastic reveal animations */
.action-pill-need[b-gn53sl5k3z] {
    animation: bounceInNeed-b-gn53sl5k3z 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.04s both;
}

.action-pill-post[b-gn53sl5k3z] {
    animation: bounceInPost-b-gn53sl5k3z 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both;
}

@keyframes bounceInNeed-b-gn53sl5k3z {
    0% {
        opacity: 0;
        transform: translateY(45px) scale(0.55);
    }
    55% {
        opacity: 1;
        transform: translateY(-10px) scale(1.06);
    }
    75% {
        transform: translateY(3px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bounceInPost-b-gn53sl5k3z {
    0% {
        opacity: 0;
        transform: translateY(35px) scale(0.55);
    }
    55% {
        opacity: 1;
        transform: translateY(-10px) scale(1.06);
    }
    75% {
        transform: translateY(3px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Pill Icon Circles */
.action-pill-icon-circle[b-gn53sl5k3z] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
    flex-shrink: 0;
}

.need-icon-bg[b-gn53sl5k3z] {
    background: linear-gradient(135deg, #E6A73E 0%, #C9871E 100%);
    box-shadow: 0 4px 12px rgba(201, 135, 30, 0.4);
}

.post-icon-bg[b-gn53sl5k3z] {
    background: linear-gradient(135deg, #FF7A00 0%, #E65100 100%);
    box-shadow: 0 4px 12px rgba(230, 81, 0, 0.4);
}

.action-pill-content[b-gn53sl5k3z] {
    display: flex;
    flex-direction: column;
    text-align: left;
    flex: 1;
}

.action-pill-text[b-gn53sl5k3z] {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.action-pill-arrow[b-gn53sl5k3z] {
    color: #94a3b8;
    font-size: 14px;
    transition: transform 0.18s ease, color 0.18s ease;
}

.action-pill-btn:hover .action-pill-arrow[b-gn53sl5k3z] {
    transform: translateX(3px);
    color: #334155;
}

@media (min-width: 768px) {
    .bottom-navbar[b-gn53sl5k3z], .nav-item[b-gn53sl5k3z], .action-menu-backdrop[b-gn53sl5k3z], .action-pills-container[b-gn53sl5k3z] {
        display: none !important;
    }
}

.bi-badge-ad[b-gn53sl5k3z] {
    font-size: 20px;
    color: #333;
}
/* _content/RealOxy.Web.Core/Layout/MainLayout.razor.rz.scp.css */
.page[b-cy6ovj7bje] {
    position: relative;
    display: flex;
    flex-direction: column;
}
.page-body[b-cy6ovj7bje] {
    opacity: 0;
    animation: fadeIn-b-cy6ovj7bje 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


@keyframes fadeIn-b-cy6ovj7bje {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

main[b-cy6ovj7bje] {
    flex: 1;
}

.sidebar[b-cy6ovj7bje] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-cy6ovj7bje] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-cy6ovj7bje]  a, .top-row[b-cy6ovj7bje]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-cy6ovj7bje]  a:hover, .top-row[b-cy6ovj7bje]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-cy6ovj7bje]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-cy6ovj7bje] {
        justify-content: space-between;
    }

    .top-row[b-cy6ovj7bje]  a, .top-row[b-cy6ovj7bje]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-cy6ovj7bje] {
        flex-direction: row;
    }

    .sidebar[b-cy6ovj7bje] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-cy6ovj7bje] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-cy6ovj7bje]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-cy6ovj7bje], article[b-cy6ovj7bje] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-cy6ovj7bje] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-cy6ovj7bje] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/RealOxy.Web.Core/Lists/AmenityList.razor.rz.scp.css */
.listing-cards[b-f6ukcjnnh4] {
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.excess[b-f6ukcjnnh4] {
    padding: 0px 24px;
}

@media (max-width: 768px) {

    .listing-cards[b-f6ukcjnnh4] {
        display: flex;
        flex-direction: column;
    }
}

.brand-search[b-f6ukcjnnh4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    min-width: 260px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .brand-search i[b-f6ukcjnnh4] {
        font-size: 0.9rem;
        color: var(--color-text-muted);
    }

    /* Input */
    .brand-search input[b-f6ukcjnnh4] {
        border: none;
        outline: none;
        width: 100%;
        font-size: 0.85rem;
        background: transparent;
        color: var(--color-text-primary);
    }


    /* Focus */
    .brand-search:focus-within[b-f6ukcjnnh4] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-focus-ring);
    }

    .brand-search input[b-f6ukcjnnh4]::placeholder {
        color: var(--color-text-placeholder);
    }

/* ===============================
   Mobile Full Width
================================ */

@media (max-width: 768px) {
    .brand-search[b-f6ukcjnnh4] {
        width: 100%;
        min-width: unset;
    }

    .listing-cards[b-f6ukcjnnh4] {
        display: flex;
        flex-direction: column;
    }
}

list-style[b-f6ukcjnnh4] {
    background-color: white;
}
/* Desktop: everything inline */
@media (min-width: 768px) {
    .header-search[b-f6ukcjnnh4] {
        flex: 1;
        max-width: 400px;
    }
}

/* Mobile: search moves to next line */
@media (max-width: 767px) {
    .header-search[b-f6ukcjnnh4] {
        order: 10;
        width: 100%;
    }
}

.search-sticky-wrapper[b-f6ukcjnnh4] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    padding: 10px 24px;
    background: white;
}

@media (max-width:768px) {
    .search-sticky-wrapper[b-f6ukcjnnh4] {
        justify-content: stretch;
        padding: 10px;
    }

    .brand-search[b-f6ukcjnnh4] {
        width: 100%;
    }
}

/* Multi-select Chips Styling */
.amenity-chips-container[b-f6ukcjnnh4] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 24px;
}

.amenity-chip[b-f6ukcjnnh4] {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--color-border-default);
    background-color: var(--color-bg-white);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

    .amenity-chip:hover[b-f6ukcjnnh4] {
        border-color: var(--color-primary);
        background-color: var(--color-bg-light);
    }

    .amenity-chip.selected[b-f6ukcjnnh4] {
        background-color: var(--color-primary);
        color: white;
        border-color: var(--color-primary);
    }

    .amenity-chip i[b-f6ukcjnnh4] {
        font-size: 1rem;
    }

.multi-select-actions[b-f6ukcjnnh4] {
    position: sticky;
    bottom: 0;
    padding: 15px 24px;
    background: white;
    border-top: 1px solid var(--color-border-default);
    display: flex;
    justify-content: flex-end;
    z-index: 10;
}
/* _content/RealOxy.Web.Core/Lists/BrandList.razor.rz.scp.css */
.listing-cards[b-rr3scctk0u] {
    padding: 0px 24px;
    display: grid;
    gap: 14px;
}

.excess[b-rr3scctk0u] {
    padding: 0px 24px;
}
@media (max-width: 768px) {

    .listing-cards[b-rr3scctk0u] {
        display: flex;
        flex-direction: column;
    }
}

.brand-search[b-rr3scctk0u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    min-width: 260px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .brand-search i[b-rr3scctk0u] {
        font-size: 0.9rem;
        color: var(--color-text-muted);
    }

    /* Input */
    .brand-search input[b-rr3scctk0u] {
        border: none;
        outline: none;
        width: 100%;
        font-size: 0.85rem;
        background: transparent;
        color: var(--color-text-primary);
    }


    /* Focus */
    .brand-search:focus-within[b-rr3scctk0u] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-focus-ring);
    }

    .brand-search input[b-rr3scctk0u]::placeholder {
        color: var(--color-text-placeholder);
    }

/* ===============================
   Mobile Full Width
================================ */

@media (max-width: 768px) {
    .brand-search[b-rr3scctk0u] {
        width: 100%;
        min-width: unset;
    }

    .listing-cards[b-rr3scctk0u] {
        display: flex;
        flex-direction: column;
    }
}

list-style[b-rr3scctk0u] {
    background-color: white;
}
/* Desktop: everything inline */
@media (min-width: 768px) {
    .header-search[b-rr3scctk0u] {
        flex: 1;
        max-width: 400px;
    }
}

/* Mobile: search moves to next line */
@media (max-width: 767px) {
    .header-search[b-rr3scctk0u] {
        order: 10;
        width: 100%;
    }
}

.search-sticky-wrapper[b-rr3scctk0u] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    padding: 10px 24px;
    background: white;
}

@media (max-width:768px) {
    .search-sticky-wrapper[b-rr3scctk0u] {
        justify-content: stretch;
        padding: 10px;
    }

    .brand-search[b-rr3scctk0u] {
        width: 100%;
    }
}
/* _content/RealOxy.Web.Core/Lists/CategoryList.razor.rz.scp.css */
.listing-cards[b-y2bth1kvxo] {
    padding: 0px 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 14px;
}
.listing-cards-filter[b-y2bth1kvxo] {
    padding: 0px 24px;
    display: grid;
    gap: 14px;
}
.excess[b-y2bth1kvxo] {
    padding: 0px 24px;
}
@media (max-width: 768px) {

    .listing-cards[b-y2bth1kvxo] {
        padding: 0px 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}


.brand-search[b-y2bth1kvxo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    min-width: 260px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .brand-search i[b-y2bth1kvxo] {
        font-size: 0.9rem;
        color: var(--color-text-muted);
    }

    /* Input */
    .brand-search input[b-y2bth1kvxo] {
        border: none;
        outline: none;
        width: 100%;
        font-size: 0.85rem;
        background: transparent;
        color: var(--color-text-primary);
    }


    /* Focus */
    .brand-search:focus-within[b-y2bth1kvxo] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-focus-ring);
    }

    .brand-search input[b-y2bth1kvxo]::placeholder {
        color: var(--color-text-placeholder);
    }

/* ===============================
   Mobile Full Width
================================ */

@media (max-width: 768px) {
    .brand-search[b-y2bth1kvxo] {
        width: 100%;
        min-width: unset;
    }

    .listing-cards[b-y2bth1kvxo] {
        display: flex;
        flex-direction: column;
    }
}

list-style[b-y2bth1kvxo] {
    background-color: white;
}
/* Desktop: everything inline */
@media (min-width: 768px) {
    .header-search[b-y2bth1kvxo] {
        flex: 1;
        max-width:400px;
        
    }
}

/* Mobile: search moves to next line */
@media (max-width: 767px) {
    .header-search[b-y2bth1kvxo] {
        order: 10;
        width: 100%;
    }
}
.search-sticky-wrapper[b-y2bth1kvxo] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    padding: 10px 24px;
    background: white;
}
@media (max-width:768px) {
    .search-sticky-wrapper[b-y2bth1kvxo] {
        justify-content: stretch;
        padding: 10px;
    }

    .brand-search[b-y2bth1kvxo] {
        width: 100%;
    }
}
/* _content/RealOxy.Web.Core/Lists/ModelList.razor.rz.scp.css */
.listing-cards[b-5nys7elz8y] {
    padding: 0px 24px;
    display: grid;
    gap: 14px;
}

.excess[b-5nys7elz8y] {
    padding: 0px 24px;
}
@media (max-width: 768px) {

    .listing-cards[b-5nys7elz8y] {
        display: flex;
        flex-direction: column;
    }
}

.brand-search[b-5nys7elz8y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    min-width: 260px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .brand-search i[b-5nys7elz8y] {
        font-size: 0.9rem;
        color: var(--color-text-muted);
    }

    /* Input */
    .brand-search input[b-5nys7elz8y] {
        border: none;
        outline: none;
        width: 100%;
        font-size: 0.85rem;
        background: transparent;
        color: var(--color-text-primary);
    }


    /* Focus */
    .brand-search:focus-within[b-5nys7elz8y] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-focus-ring);
    }

    .brand-search input[b-5nys7elz8y]::placeholder {
        color: var(--color-text-placeholder);
    }

/* ===============================
   Mobile Full Width
================================ */

@media (max-width: 768px) {
    .brand-search[b-5nys7elz8y] {
        width: 100%;
        min-width: unset;
    }

    .listing-cards[b-5nys7elz8y] {
        display: flex;
        flex-direction: column;
    }
}

list-style[b-5nys7elz8y] {
    background-color: white;
}
/* Desktop: everything inline */
@media (min-width: 768px) {
    .header-search[b-5nys7elz8y] {
        flex: 1;
        max-width: 400px;
    }
}

/* Mobile: search moves to next line */
@media (max-width: 767px) {
    .header-search[b-5nys7elz8y] {
        order: 10;
        width: 100%;
    }
}

.search-sticky-wrapper[b-5nys7elz8y] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    padding: 10px 24px;
    background: white;
}

@media (max-width:768px) {
    .search-sticky-wrapper[b-5nys7elz8y] {
        justify-content: stretch;
        padding: 10px;
    }

    .brand-search[b-5nys7elz8y] {
        width: 100%;
    }
}
/* _content/RealOxy.Web.Core/Lists/SuperStoreList.razor.rz.scp.css */
.listing-cards[b-3egfb3etrf] {
    padding: 0px 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 14px;
}
.listing-cards-filter[b-3egfb3etrf] {
    padding: 0px 24px;
    display: grid;
    gap: 14px;
}
.excess[b-3egfb3etrf] {
    padding: 0px 24px;
}
@media (max-width: 768px) {

    .listing-cards[b-3egfb3etrf] {
        padding: 0px 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}


.brand-search[b-3egfb3etrf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    min-width: 260px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .brand-search i[b-3egfb3etrf] {
        font-size: 0.9rem;
        color: var(--color-text-muted);
    }

    /* Input */
    .brand-search input[b-3egfb3etrf] {
        border: none;
        outline: none;
        width: 100%;
        font-size: 0.85rem;
        background: transparent;
        color: var(--color-text-primary);
    }


    /* Focus */
    .brand-search:focus-within[b-3egfb3etrf] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-focus-ring);
    }

    .brand-search input[b-3egfb3etrf]::placeholder {
        color: var(--color-text-placeholder);
    }

/* ===============================
   Mobile Full Width
================================ */

@media (max-width: 768px) {
    .brand-search[b-3egfb3etrf] {
        width: 100%;
        min-width: unset;
    }

    .listing-cards[b-3egfb3etrf] {
        display: flex;
        flex-direction: column;
    }
}

list-style[b-3egfb3etrf] {
    background-color: white;
}
/* Desktop: everything inline */
@media (min-width: 768px) {
    .header-search[b-3egfb3etrf] {
        flex: 1;
        max-width:400px;
        
    }
}

/* Mobile: search moves to next line */
@media (max-width: 767px) {
    .header-search[b-3egfb3etrf] {
        order: 10;
        width: 100%;
    }
}
.search-sticky-wrapper[b-3egfb3etrf] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    padding: 10px 24px;
    background: white;
}
@media (max-width:768px) {
    .search-sticky-wrapper[b-3egfb3etrf] {
        justify-content: stretch;
        padding: 10px;
    }

    .brand-search[b-3egfb3etrf] {
        width: 100%;
    }
}
/* _content/RealOxy.Web.Core/Pages/ActivityPage.razor.rz.scp.css */
.activity__inner[b-onur9207bv] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 4% 40px;
}

.activity__section-title[b-onur9207bv] {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-dark, #3D2E1E);
    margin: 18px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity__section-title i[b-onur9207bv] {
    color: var(--brand, #674E34);
}

/* Responsive grid — the compact cards keep their own intrinsic size */
.activity__grid[b-onur9207bv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 12px;
}
/* _content/RealOxy.Web.Core/Pages/BrowseProductsPage.razor.rz.scp.css */
.product-grid[b-u8egkfhs5o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 6px;
    align-items: start;
    padding: 10px;
}

.browse-container[b-u8egkfhs5o] {
    flex: 1;
}
/* Filter Bar */
.ads-filter-wrapper[b-u8egkfhs5o] {
    padding: 10px 14px;
}

.ads-filter[b-u8egkfhs5o] {
    display: flex;
    gap: 10px;
    overflow-x: auto;
}

/* Filter Buttons */
.filter-btn[b-u8egkfhs5o] {
    background: var(--color-primary);
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .filter-btn:hover[b-u8egkfhs5o] {
        background: var(--color-secondary);
    }

    .filter-btn.active[b-u8egkfhs5o] {
        background: var(--color-secondary);
        color: #fff;
    }

.my-ads-header[b-u8egkfhs5o] {
    padding: 0 0 12px 0;
}

.my-ads-title[b-u8egkfhs5o] {
    font-size: 24px;
    font-weight: 700;
    color: #1a1611;
    letter-spacing: -0.01em;
    margin: 0;
}

/* ── BrowseProductsPage SEO additions ─────────────────────────────────────── */

/*
 * Semantic H1 — visible on desktop, replaced by mobile header on small screens.
 * Keep it consistent with the category/type being browsed.
 */
.browse-page-heading[b-u8egkfhs5o] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
    margin: 0.5rem 0 0.25rem;
    line-height: 1.3;
}

/* ── ProductCard article element ──────────────────────────────────────────── */
/*
 * Changed from div to <article> in the template.
 * These rules ensure no visual change while the semantic element is correct
 * for schema.org and accessibility.
 */
article.product-card[b-u8egkfhs5o],
article.product-card-fixed-width[b-u8egkfhs5o] {
    display: block; /* articles are block by default; explicit for safety */
    cursor: pointer;
}

/* Distance badge next to "Posted X ago" */
.pc-distance[b-u8egkfhs5o] {
    font-size: 0.75rem;
    color: var(--bs-secondary, #6c757d);
    margin-left: 0.5rem;
}

/* ── Browse container ItemList wrapper ─────────────────────────────────────── */
/*
 * The product-grid now has itemscope/itemtype on it. No visual change needed
 * but ensure the ListItem wrappers don't break the grid layout.
 */
.product-grid > [itemprop="itemListElement"][b-u8egkfhs5o] {
    display: contents; /* transparent to layout — grid sees the inner ProductCard */
}
/* _content/RealOxy.Web.Core/Pages/ChatDetailPage.razor.rz.scp.css */

.detail-shell[b-ccxlric3yn] {
    --text-primary: #1a1a1a;
    --text-secondary: #6b7280;
}

/* ---------- Page shell ---------- */
.detail-shell[b-ccxlric3yn] {
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--surface-alt);
    font-family: var(--font);
    color: var(--text-primary); /* 🔥 ensures visibility */
}

/* ---------- Loading / error state ---------- */
.detail-loading[b-ccxlric3yn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 24px;
}

.detail-loading-label[b-ccxlric3yn] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ---------- Main panel ---------- */
.detail-panel[b-ccxlric3yn] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ---------- Header ---------- */
.detail-header[b-ccxlric3yn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    padding-top: max(12px, env(safe-area-inset-top));
}

/* Back button */
.back-btn[b-ccxlric3yn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #1a1a1a; /* 🔥 FIXED */
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
    padding: 6px;
    margin-left: -6px;
}

    .back-btn:hover[b-ccxlric3yn] {
        background: var(--brand-pale);
        color: var(--brand);
    }

    .back-btn:active[b-ccxlric3yn] {
        transform: scale(0.92);
    }

/* Avatar */
.detail-header-avatar[b-ccxlric3yn] {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.avatar-img[b-ccxlric3yn] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.avatar-fallback[b-ccxlric3yn] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brand-pale);
    color: var(--brand);
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--brand-light);
}

.online-dot[b-ccxlric3yn] {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #C8CFC4; /* neutral = offline */
    border: 2px solid var(--surface);
}

.online-dot.visible[b-ccxlric3yn] {
    background: #2DC570; /* green = active now */
}

/* Header text */
.detail-header-info[b-ccxlric3yn] {
    flex: 1;
    min-width: 0;
}

.detail-header-name[b-ccxlric3yn] {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a; /* 🔥 FIXED */
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-header-status[b-ccxlric3yn] {
    margin: 0;
    font-size: 12px;
    color: #2DC570;
    font-weight: 500;
}

.detail-header-status.typing[b-ccxlric3yn] {
    color: #C9922E; /* gold — matches the "read" tick accent */
    font-style: italic;
}

/* ---------- Chat menu (report / block) ---------- */
.chat-menu-wrap[b-ccxlric3yn] {
    position: relative;
    flex-shrink: 0;
}

.chat-menu-btn[b-ccxlric3yn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
}

.chat-menu-btn:hover[b-ccxlric3yn] {
    background: var(--brand-pale);
    color: var(--brand);
}

.chat-menu[b-ccxlric3yn] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 170px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 14px);
    box-shadow: var(--shadow-lg);
    z-index: 30;
    overflow: hidden;
}

.chat-menu-item[b-ccxlric3yn] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    font-size: 13.5px;
    color: var(--text-primary);
    text-align: left;
}

.chat-menu-item:hover[b-ccxlric3yn] {
    background: var(--brand-pale);
}

.chat-menu-item i[b-ccxlric3yn] {
    font-size: 15px;
    color: var(--text-secondary);
}

.chat-menu-item.danger[b-ccxlric3yn],
.chat-menu-item.danger i[b-ccxlric3yn] {
    color: #C0392B;
}

/* ---------- Quick replies ---------- */
.quick-replies[b-ccxlric3yn] {
    display: flex;
    gap: 8px;
    padding: 10px 16px 0;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.quick-replies[b-ccxlric3yn]::-webkit-scrollbar {
    display: none;
}

.quick-reply-chip[b-ccxlric3yn] {
    flex-shrink: 0;
    padding: 6px 13px;
    border-radius: var(--radius-full, 28px);
    border: 1px solid var(--brand-light);
    background: var(--surface);
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.quick-reply-chip:hover[b-ccxlric3yn] {
    background: var(--brand-pale);
}

.quick-reply-chip:active[b-ccxlric3yn] {
    transform: scale(0.96);
}

@media (max-width: 600px) {
    .quick-replies[b-ccxlric3yn] {
        padding: 8px 12px 0;
        gap: 6px;
    }

    .quick-reply-chip[b-ccxlric3yn] {
        font-size: 12px;
        padding: 5px 11px;
    }
}

/* ---------- Moderation notice (report / block feedback) ---------- */
.moderation-notice[b-ccxlric3yn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 16px 0;
    padding: 10px 14px;
    border-radius: var(--radius-md, 14px);
    background: var(--brand-pale);
    border: 1px solid var(--brand-light);
    color: var(--brand-dark);
    font-size: 13px;
}

.moderation-notice button[b-ccxlric3yn] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
}

/* ---------- Messages area ---------- */
.detail-messages[b-ccxlric3yn] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-behavior: smooth;
    padding-bottom: 12px;
    color: #1a1a1a; /* 🔥 FIXED */
}

    /* 🔥 VERY IMPORTANT: Fix message text */
    .detail-messages *[b-ccxlric3yn] {
        color: inherit;
    }

    /* ---------- SCROLL ---------- */
    .detail-messages[b-ccxlric3yn]::-webkit-scrollbar {
        width: 3px;
    }

    .detail-messages[b-ccxlric3yn]::-webkit-scrollbar-track {
        background: transparent;
    }

    .detail-messages[b-ccxlric3yn]::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: 4px;
    }

/* ---------- FIX BUBBLE COLORS ---------- */

/* Outgoing (brown bubble) */
.outgoing-message[b-ccxlric3yn],
.outgoing-message *[b-ccxlric3yn] {
    color: #fff !important;
}

/* Incoming (white bubble) */
.incoming-message[b-ccxlric3yn],
.incoming-message *[b-ccxlric3yn] {
    color: #1a1a1a !important;
}

/* ---------- Wider screens ---------- */
@media (min-width: 600px) {
    .detail-shell[b-ccxlric3yn] {
        background: var(--surface-alt);
    }

    .detail-panel[b-ccxlric3yn] {
        max-width: 680px;
        margin: 0 auto;
        width: 100%;
        box-shadow: var(--shadow-md);
    }

    .detail-header[b-ccxlric3yn] {
        padding: 14px 24px;
    }

    .detail-messages[b-ccxlric3yn] {
        padding: 24px 28px 16px;
    }
}

@media (min-width: 900px) {
    .detail-panel[b-ccxlric3yn] {
        max-width: 760px;
    }
}

@media (min-width: 1200px) {
    .detail-panel[b-ccxlric3yn] {
        max-width: 860px;
    }
}
/* _content/RealOxy.Web.Core/Pages/ChatPage.razor.rz.scp.css */
/* =====================================================
   ChatPage.razor.css — page shell & layout
   ===================================================== */

:root[b-2hpw8taz1n] {
    --brand: #674E34;
    --brand-light: #C4AC91;
    --brand-pale: #F4EDE5;
    --brand-dark: #3D2E1E;
    --surface: #FFFFFF;
    --surface-alt: #F9F7F5;
    --border: #EDE9E4;
    --border-strong: #D9D1C7;
    --text-primary: #1A1208;
    --text-secondary: #7A6C5D;
    --text-muted: #B0A090;
    --shadow-sm: 0 1px 3px rgba(103,78,52,0.08);
    --shadow-md: 0 4px 16px rgba(103,78,52,0.12);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --font: 'DM Sans', system-ui, sans-serif;
}

.chat-shell[b-2hpw8taz1n] {
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--surface-alt);
    font-family: var(--font);
}

.chat-body[b-2hpw8taz1n] {
    flex: 1;
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-container[b-2hpw8taz1n] {
    height: 100%;
    overflow: hidden;
}

/* ---------- Mobile header ---------- */
.mobile-header[b-2hpw8taz1n] {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    /* Respect OS status bar */
    padding: max(16px, env(safe-area-inset-top)) 20px 14px;
    display: flex;
    align-items: center;
}

.mobile-header-title[b-2hpw8taz1n] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

/* On mobile the sidebar takes the full width and acts as the
   conversations list screen. The right panel never shows. */
@media (max-width: 767px) {
    .sidebar-panel[b-2hpw8taz1n] {
        border-right: none;
    }

    /* Extra bottom padding clears the mobile nav bar */
    .conversation-list[b-2hpw8taz1n] {
        padding-bottom: max(80px, env(safe-area-inset-bottom));
    }
}

/* ---------- Sidebar ---------- */
.sidebar-panel[b-2hpw8taz1n] {
    border-right: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    flex-direction: column;
}

.sidebar-inner[b-2hpw8taz1n] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar-brand[b-2hpw8taz1n] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 20px 14px;
    border-bottom: 1px solid var(--border);
}

.brand-dot[b-2hpw8taz1n] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}

.brand-label[b-2hpw8taz1n] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.conversation-list[b-2hpw8taz1n] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

    .conversation-list[b-2hpw8taz1n]::-webkit-scrollbar {
        width: 4px;
    }

    .conversation-list[b-2hpw8taz1n]::-webkit-scrollbar-track {
        background: transparent;
    }

    .conversation-list[b-2hpw8taz1n]::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: 4px;
    }

.connecting-state[b-2hpw8taz1n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 12px;
}

.connecting-label[b-2hpw8taz1n] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.empty-state-wrapper[b-2hpw8taz1n] {
    padding: 48px 20px;
}

/* ---------- Chat panel ---------- */
.chat-panel[b-2hpw8taz1n] {
    display: flex;
    flex-direction: column;
    background: var(--surface-alt);
}

.chat-panel-inner[b-2hpw8taz1n] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------- Chat header ---------- */
.chat-header[b-2hpw8taz1n] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.chat-header-avatar[b-2hpw8taz1n] {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.avatar-img[b-2hpw8taz1n] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.avatar-fallback[b-2hpw8taz1n] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-pale);
    color: var(--brand);
    font-weight: 600;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--brand-light);
}

.online-dot[b-2hpw8taz1n] {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #C8CFC4; /* neutral = offline */
    border: 2px solid var(--surface);
}

.online-dot.visible[b-2hpw8taz1n] {
    background: #2DC570; /* green = active now */
}

.chat-header-name[b-2hpw8taz1n] {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.chat-header-status[b-2hpw8taz1n] {
    margin: 0;
    font-size: 12px;
    color: #2DC570;
    font-weight: 500;
}

.chat-header-status.typing[b-2hpw8taz1n] {
    color: #C9922E; /* gold — matches the "read" tick accent */
    font-style: italic;
}

/* ---------- Chat menu (report / block) ---------- */
.chat-menu-wrap[b-2hpw8taz1n] {
    position: relative;
    margin-left: auto;
}

.chat-menu-btn[b-2hpw8taz1n] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    padding: 6px 10px;
    border-radius: var(--radius-sm, 8px);
}

.chat-menu-btn:hover[b-2hpw8taz1n] {
    background: var(--brand-pale);
    color: var(--brand);
}

.chat-menu[b-2hpw8taz1n] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 170px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 14px);
    box-shadow: var(--shadow-lg);
    z-index: 30;
    overflow: hidden;
}

.chat-menu-item[b-2hpw8taz1n] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: transparent;
    border: none;
    font-size: 13.5px;
    color: var(--text-primary);
    text-align: left;
}

.chat-menu-item:hover[b-2hpw8taz1n] {
    background: var(--brand-pale);
}

.chat-menu-item i[b-2hpw8taz1n] {
    font-size: 15px;
    color: var(--text-secondary);
}

.chat-menu-item.danger[b-2hpw8taz1n],
.chat-menu-item.danger i[b-2hpw8taz1n] {
    color: #C0392B;
}

/* ---------- Quick replies ---------- */
.quick-replies[b-2hpw8taz1n] {
    display: flex;
    gap: 8px;
    padding: 10px 24px 0;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.quick-replies[b-2hpw8taz1n]::-webkit-scrollbar {
    display: none;
}

.quick-reply-chip[b-2hpw8taz1n] {
    flex-shrink: 0;
    padding: 6px 13px;
    border-radius: var(--radius-full, 28px);
    border: 1px solid var(--brand-light);
    background: var(--surface);
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.quick-reply-chip:hover[b-2hpw8taz1n] {
    background: var(--brand-pale);
}

.quick-reply-chip:active[b-2hpw8taz1n] {
    transform: scale(0.96);
}

@media (max-width: 600px) {
    .quick-replies[b-2hpw8taz1n] {
        padding: 8px 16px 0;
        gap: 6px;
    }

    .quick-reply-chip[b-2hpw8taz1n] {
        font-size: 12px;
        padding: 5px 11px;
    }
}

/* ---------- Moderation notice (report / block feedback) ---------- */
.moderation-notice[b-2hpw8taz1n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 24px 0;
    padding: 10px 14px;
    border-radius: var(--radius-md, 14px);
    background: var(--brand-pale);
    border: 1px solid var(--brand-light);
    color: var(--brand-dark);
    font-size: 13px;
}

.moderation-notice button[b-2hpw8taz1n] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
}

/* ---------- Conversation search ---------- */
.chat-search-wrap[b-2hpw8taz1n] {
    position: relative;
    padding: 0 18px 12px;
}

.chat-search-wrap i[b-2hpw8taz1n] {
    position: absolute;
    left: 30px;
    top: 10px;
    font-size: 14px;
    color: var(--text-muted);
}

.chat-search-input[b-2hpw8taz1n] {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border-radius: var(--radius-md, 14px);
    border: 1px solid var(--border);
    background: var(--surface-alt, #FAF7F3);
    font-size: 13.5px;
    color: var(--text-primary);
}

.chat-search-input:focus[b-2hpw8taz1n] {
    outline: none;
    border-color: var(--brand-light);
    box-shadow: 0 0 0 3px rgba(196, 172, 145, 0.18);
}

/* ---------- Messages area ---------- */
.messages-area[b-2hpw8taz1n] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-behavior: smooth;
}

    .messages-area[b-2hpw8taz1n]::-webkit-scrollbar {
        width: 4px;
    }

    .messages-area[b-2hpw8taz1n]::-webkit-scrollbar-track {
        background: transparent;
    }

    .messages-area[b-2hpw8taz1n]::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: 4px;
    }

.messages-loading[b-2hpw8taz1n] {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

/* ---------- Empty chat placeholder ---------- */
.empty-chat-placeholder[b-2hpw8taz1n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 40px;
}

.empty-chat-icon[b-2hpw8taz1n] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--brand-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.empty-chat-title[b-2hpw8taz1n] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.empty-chat-sub[b-2hpw8taz1n] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}
/* _content/RealOxy.Web.Core/Pages/MyNeedsPage.razor.rz.scp.css */
/* ==========================================================================
   My Needs Page — Modern Dashboard Styles
   ========================================================================== */

.my-needs-page[b-d2qvk8u5n9] {
    background-color: #F8F6F3;
}

.my-needs-scroll[b-d2qvk8u5n9] {
    scrollbar-width: thin;
}

.my-needs__inner[b-d2qvk8u5n9] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

@media (min-width: 768px) {
    .my-needs__inner[b-d2qvk8u5n9] {
        padding: 0 24px 60px;
    }
}

/* Breadcrumb */
.my-needs-breadcrumb-list[b-d2qvk8u5n9] {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12.5px;
    flex-wrap: wrap;
    gap: 6px;
}

.my-needs-breadcrumb-link[b-d2qvk8u5n9] {
    color: #7D6F61;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.my-needs-breadcrumb-link:hover[b-d2qvk8u5n9] {
    color: #C9922E;
}

.my-needs-breadcrumb-separator[b-d2qvk8u5n9] {
    color: #B5A89B;
    font-size: 10px;
}

.my-needs-breadcrumb-current[b-d2qvk8u5n9] {
    color: #2D2319;
    font-weight: 600;
}

/* Hero Card */
.my-needs-hero-card[b-d2qvk8u5n9] {
    background: linear-gradient(135deg, #FFFFFF 0%, #FAF6EE 100%);
    border: 1px solid #EAE3D6;
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 4px 20px rgba(61, 46, 30, 0.05);
}

@media (max-width: 576px) {
    .my-needs-hero-card[b-d2qvk8u5n9] {
        padding: 18px 16px;
    }
}

.my-needs-badge[b-d2qvk8u5n9] {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #FBF6EE;
    border: 1px solid #EBDDCB;
    color: #8A6828;
    padding: 4px 12px;
    border-radius: 999px;
}

.my-needs-count-tag[b-d2qvk8u5n9] {
    font-size: 11.5px;
    font-weight: 600;
    background: #ECE6DC;
    color: #5C4F42;
    padding: 3px 10px;
    border-radius: 999px;
}

.my-needs-title[b-d2qvk8u5n9] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #2D2319;
    line-height: 1.25;
}

.my-needs-subtitle[b-d2qvk8u5n9] {
    font-size: 13.5px;
    color: #7D6F61;
    max-width: 580px;
    line-height: 1.5;
}

.btn-post-need-action[b-d2qvk8u5n9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #C9922E 0%, #A9761F 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 14px rgba(201, 146, 46, 0.3);
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.btn-post-need-action:hover[b-d2qvk8u5n9] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(201, 146, 46, 0.45);
    background: linear-gradient(135deg, #D49D38 0%, #B88226 100%);
    color: #ffffff;
}

@media (max-width: 768px) {
    .btn-post-need-action[b-d2qvk8u5n9] {
        width: 100%;
        margin-top: 4px;
    }
}

/* Loader */
.my-needs-loader-container[b-d2qvk8u5n9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

/* Empty State */
.my-needs-empty-card[b-d2qvk8u5n9] {
    background: #ffffff;
    border-radius: 16px;
    border: 1px dashed #DDD5C9;
}

.empty-icon-bubble[b-d2qvk8u5n9] {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #FDF7EC;
    border: 1px solid #F0DFBF;
    color: #C9922E;
    font-size: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Filter Tabs */
.my-needs-tabs[b-d2qvk8u5n9] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: thin;
}

.my-needs-tab[b-d2qvk8u5n9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    border: 1.5px solid #E2DDD5;
    background: #FFFFFF;
    color: #4A3C2E;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.my-needs-tab:hover[b-d2qvk8u5n9] {
    border-color: #C9922E;
    background: #FAF6EE;
    color: #C9922E;
}

.my-needs-tab--active[b-d2qvk8u5n9] {
    background: linear-gradient(135deg, #C9922E 0%, #A9761F 100%) !important;
    border-color: #A9761F !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(201, 146, 46, 0.3);
}

.tab-count[b-d2qvk8u5n9] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
}

.my-needs-tab--active .tab-count[b-d2qvk8u5n9] {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

/* Needs Cards Grid */
.my-needs-cards-grid[b-d2qvk8u5n9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.my-need-item-card[b-d2qvk8u5n9] {
    background: #FFFFFF;
    border: 1px solid #EBE4D8;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(61, 46, 30, 0.04);
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.my-need-item-card[b-d2qvk8u5n9]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: #C9922E;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.my-need-item-card:hover[b-d2qvk8u5n9] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(61, 46, 30, 0.1);
    border-color: #DECDB8;
}

.my-need-item-card:hover[b-d2qvk8u5n9]::before {
    opacity: 1;
}

.my-need-item-header[b-d2qvk8u5n9] {
    display: flex;
    padding: 16px;
    gap: 16px;
}

@media (max-width: 576px) {
    .my-need-item-header[b-d2qvk8u5n9] {
        padding: 14px;
        gap: 12px;
    }
}

.my-need-thumb[b-d2qvk8u5n9] {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
    border: 1px solid #EEE8DE;
    background: #FAF6EE;
}

.my-need-thumb--empty[b-d2qvk8u5n9] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C9922E;
    font-size: 28px;
    background: #FAF6EE;
}

.my-need-body[b-d2qvk8u5n9] {
    flex: 1 1 auto;
    min-width: 0;
}

.my-need-title[b-d2qvk8u5n9] {
    font-size: 15.5px;
    font-weight: 700;
    color: #2D2319;
    line-height: 1.35;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-need-budget[b-d2qvk8u5n9] {
    font-size: 13.5px;
    color: #4A3C2E;
}

.budget-label[b-d2qvk8u5n9] {
    color: #8C7B6D;
    font-size: 12px;
    margin-right: 4px;
}

.budget-value[b-d2qvk8u5n9] {
    font-weight: 700;
    color: #A9761F;
}

.my-need-meta[b-d2qvk8u5n9] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #8C7B6D;
    flex-wrap: wrap;
}

.meta-item[b-d2qvk8u5n9] {
    display: inline-flex;
    align-items: center;
}

/* Status & Tags */
.status-pill[b-d2qvk8u5n9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-active[b-d2qvk8u5n9] {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #C8E6C9;
}

.status-closed[b-d2qvk8u5n9] {
    background: #ECEFF1;
    color: #546E7A;
    border: 1px solid #CFD8DC;
}

.status-expired[b-d2qvk8u5n9] {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFE0B2;
}

.pulse-dot[b-d2qvk8u5n9] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #2E7D32;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.25);
}

.urgent-pill[b-d2qvk8u5n9] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    background: #FEECEB;
    border: 1px solid #FCD2D0;
    color: #D32F2F;
    padding: 3px 9px;
    border-radius: 999px;
}

.category-pill-tag[b-d2qvk8u5n9] {
    font-size: 11px;
    font-weight: 600;
    background: #F4EDE2;
    color: #6B5B4C;
    padding: 3px 9px;
    border-radius: 999px;
}

/* Card Footer */
.my-need-item-footer[b-d2qvk8u5n9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #FAF8F5;
    border-top: 1px solid #EFEAE1;
    font-size: 12.5px;
}

.offers-indicator[b-d2qvk8u5n9] {
    color: #7D6F61;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.offers-indicator--active[b-d2qvk8u5n9] {
    color: #A9761F;
    font-weight: 600;
}

.view-details-cta[b-d2qvk8u5n9] {
    color: #C9922E;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    transition: transform 0.15s ease;
}

.my-need-item-card:hover .view-details-cta[b-d2qvk8u5n9] {
    transform: translateX(2px);
    color: #A9761F;
}
/* _content/RealOxy.Web.Core/Pages/MyOffersPage.razor.rz.scp.css */
/* ==========================================================================
   My Offers Page — Modern Dashboard Styles
   ========================================================================== */

.my-offers-page[b-hneck00fiz] {
    background-color: #F8F6F3;
}

.my-offers-scroll[b-hneck00fiz] {
    scrollbar-width: thin;
}

.my-offers__inner[b-hneck00fiz] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

@media (min-width: 768px) {
    .my-offers__inner[b-hneck00fiz] {
        padding: 0 24px 60px;
    }
}

/* Breadcrumb */
.my-offers-breadcrumb-list[b-hneck00fiz] {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12.5px;
    flex-wrap: wrap;
    gap: 6px;
}

.my-offers-breadcrumb-link[b-hneck00fiz] {
    color: #7D6F61;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.my-offers-breadcrumb-link:hover[b-hneck00fiz] {
    color: #C9922E;
}

.my-offers-breadcrumb-separator[b-hneck00fiz] {
    color: #B5A89B;
    font-size: 10px;
}

.my-offers-breadcrumb-current[b-hneck00fiz] {
    color: #2D2319;
    font-weight: 600;
}

/* Hero Card */
.my-offers-hero-card[b-hneck00fiz] {
    background: linear-gradient(135deg, #FFFFFF 0%, #FAF6EE 100%);
    border: 1px solid #EAE3D6;
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 4px 20px rgba(61, 46, 30, 0.05);
}

@media (max-width: 576px) {
    .my-offers-hero-card[b-hneck00fiz] {
        padding: 18px 16px;
    }
}

.my-offers-badge[b-hneck00fiz] {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #FBF6EE;
    border: 1px solid #EBDDCB;
    color: #8A6828;
    padding: 4px 12px;
    border-radius: 999px;
}

.my-offers-count-tag[b-hneck00fiz] {
    font-size: 11.5px;
    font-weight: 600;
    background: #ECE6DC;
    color: #5C4F42;
    padding: 3px 10px;
    border-radius: 999px;
}

.my-offers-title[b-hneck00fiz] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #2D2319;
    line-height: 1.25;
}

.my-offers-subtitle[b-hneck00fiz] {
    font-size: 13.5px;
    color: #7D6F61;
    max-width: 580px;
    line-height: 1.5;
}

.btn-browse-needs-action[b-hneck00fiz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #C9922E 0%, #A9761F 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 14px rgba(201, 146, 46, 0.3);
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.btn-browse-needs-action:hover[b-hneck00fiz] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(201, 146, 46, 0.45);
    background: linear-gradient(135deg, #D49D38 0%, #B88226 100%);
    color: #ffffff;
}

@media (max-width: 768px) {
    .btn-browse-needs-action[b-hneck00fiz] {
        width: 100%;
        margin-top: 4px;
    }
}

/* Loader */
.my-offers-loader-container[b-hneck00fiz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

/* Empty State */
.my-offers-empty-card[b-hneck00fiz] {
    background: #ffffff;
    border-radius: 16px;
    border: 1px dashed #DDD5C9;
}

.empty-icon-bubble[b-hneck00fiz] {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #FDF7EC;
    border: 1px solid #F0DFBF;
    color: #C9922E;
    font-size: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Filter Tabs */
.my-offers-tabs[b-hneck00fiz] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: thin;
}

.my-offers-tab[b-hneck00fiz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    border: 1.5px solid #E2DDD5;
    background: #FFFFFF;
    color: #4A3C2E;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.my-offers-tab:hover[b-hneck00fiz] {
    border-color: #C9922E;
    background: #FAF6EE;
    color: #C9922E;
}

.my-offers-tab--active[b-hneck00fiz] {
    background: linear-gradient(135deg, #C9922E 0%, #A9761F 100%) !important;
    border-color: #A9761F !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(201, 146, 46, 0.3);
}

.tab-count[b-hneck00fiz] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
}

.my-offers-tab--active .tab-count[b-hneck00fiz] {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

/* Offers Cards Grid */
.my-offers-cards-grid[b-hneck00fiz] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.my-offer-item-card[b-hneck00fiz] {
    background: #FFFFFF;
    border: 1px solid #EBE4D8;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(61, 46, 30, 0.04);
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.my-offer-item-card:hover[b-hneck00fiz] {
    box-shadow: 0 8px 24px rgba(61, 46, 30, 0.09);
    border-color: #DECDB8;
}

.my-offer-header[b-hneck00fiz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #F5F1EB;
    gap: 12px;
}

@media (max-width: 576px) {
    .my-offer-header[b-hneck00fiz] {
        padding: 14px 14px 10px;
    }
}

.my-offer-req-info[b-hneck00fiz] {
    flex: 1 1 auto;
    min-width: 0;
}

.my-offer-target-label[b-hneck00fiz] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9C8E80;
    margin-bottom: 2px;
    display: block;
}

.my-offer-req-title[b-hneck00fiz] {
    font-size: 15.5px;
    font-weight: 700;
    color: #2D2319;
    margin: 0;
    line-height: 1.35;
}

.my-offer-body[b-hneck00fiz] {
    padding: 14px 18px;
}

@media (max-width: 576px) {
    .my-offer-body[b-hneck00fiz] {
        padding: 12px 14px;
    }
}

.my-offer-price-row[b-hneck00fiz] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.price-prefix[b-hneck00fiz] {
    font-size: 13px;
    color: #7D6F61;
    font-weight: 500;
}

.offer-price-tag[b-hneck00fiz] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #A9761F;
}

.my-offer-message-bubble[b-hneck00fiz] {
    background: #FAF8F5;
    border: 1px solid #ECE6DC;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    color: #4A3C2E;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
}

.message-quote-icon[b-hneck00fiz] {
    color: #C9922E;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.my-offer-meta[b-hneck00fiz] {
    font-size: 12px;
    color: #8C7B6D;
}

/* Status Pills */
.offer-status-pill[b-hneck00fiz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.offer-status-pending[b-hneck00fiz] {
    background: #FFF8E1;
    color: #F57F17;
    border: 1px solid #FFE082;
}

.offer-status-accepted[b-hneck00fiz] {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #C8E6C9;
}

.offer-status-rejected[b-hneck00fiz] {
    background: #ECEFF1;
    color: #546E7A;
    border: 1px solid #CFD8DC;
}

.offer-status-other[b-hneck00fiz] {
    background: #F5F5F5;
    color: #616161;
    border: 1px solid #E0E0E0;
}

.offer-pulse-dot[b-hneck00fiz] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #F57F17;
    box-shadow: 0 0 0 2px rgba(245, 127, 23, 0.25);
}

/* Footer Actions */
.my-offer-footer[b-hneck00fiz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: #FAF8F5;
    border-top: 1px solid #EFEAE1;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .my-offer-footer[b-hneck00fiz] {
        padding: 10px 14px;
    }
}

.btn-linked-ad[b-hneck00fiz] {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 600;
    color: #5C4F42;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid #DCD4C7;
    padding: 4px 12px;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.btn-linked-ad:hover[b-hneck00fiz] {
    color: #C9922E;
    border-color: #C9922E;
    background: #FAF6EE;
}

.btn-view-request-cta[b-hneck00fiz] {
    background: none;
    border: none;
    color: #C9922E;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}

.btn-view-request-cta:hover[b-hneck00fiz] {
    color: #A9761F;
}
/* _content/RealOxy.Web.Core/Pages/NeedDetailPage.razor.rz.scp.css */
/* ==========================================================================
   Need Detail Page Styles
   ========================================================================== */

.need-detail-page[b-bl8h95lt0c] {
    background: #f8f6f3;
}

.need-detail-container[b-bl8h95lt0c] {
    max-width: 1240px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.need-breadcrumb-nav[b-bl8h95lt0c] {
    padding: 4px 0;
}

.need-breadcrumb[b-bl8h95lt0c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13.5px;
}

.need-breadcrumb-item[b-bl8h95lt0c] {
    display: inline-flex;
    align-items: center;
}

.need-breadcrumb-link[b-bl8h95lt0c] {
    color: var(--brand, #674E34);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease;
}

.need-breadcrumb-link:hover[b-bl8h95lt0c] {
    color: #C9922E;
    text-decoration: underline;
}

.need-breadcrumb-separator[b-bl8h95lt0c] {
    color: #b0a090;
    font-size: 11px;
    margin: 0 8px;
    display: inline-flex;
    align-items: center;
    user-select: none;
}

.need-breadcrumb-current[b-bl8h95lt0c] {
    color: #6c757d;
    font-weight: 600;
    max-width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}

@media (max-width: 576px) {
    .need-breadcrumb[b-bl8h95lt0c] {
        font-size: 12.5px;
    }
    
    .need-breadcrumb-current[b-bl8h95lt0c] {
        max-width: 180px;
    }
    
    .need-breadcrumb-separator[b-bl8h95lt0c] {
        margin: 0 5px;
    }
}

/* ==========================================================================
   Main Request Card (Left Column)
   ========================================================================== */

.need-main-card[b-bl8h95lt0c] {
    background: #ffffff;
    border: 1px solid #ede8e1;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(61, 46, 30, 0.06);
    overflow: hidden;
}

.need-main-card__media[b-bl8h95lt0c] {
    position: relative;
    width: 100%;
    max-height: 380px;
    overflow: hidden;
    background: #2b221a;
}

.need-main-card__photo[b-bl8h95lt0c] {
    width: 100%;
    height: 100%;
    max-height: 380px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.need-main-card__photo:hover[b-bl8h95lt0c] {
    transform: scale(1.02);
}

.need-media-badges[b-bl8h95lt0c] {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
}

.need-main-card__body[b-bl8h95lt0c] {
    padding: 24px;
}

@media (max-width: 576px) {
    .need-main-card__body[b-bl8h95lt0c] {
        padding: 16px;
    }
}

/* Badges */
.need-pill-badge[b-bl8h95lt0c] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 999px;
    padding: 4px 11px;
    color: #ffffff;
}

.need-pill-badge--primary[b-bl8h95lt0c] {
    background: linear-gradient(135deg, #C9922E, #A9761F);
    box-shadow: 0 2px 6px rgba(201, 146, 46, 0.35);
}

.need-pill-badge--urgent[b-bl8h95lt0c] {
    background: linear-gradient(135deg, #E53935, #C62828);
    box-shadow: 0 2px 6px rgba(229, 57, 53, 0.35);
}

.need-pill-badge--featured[b-bl8h95lt0c] {
    background: linear-gradient(135deg, #674E34, #3D2E1E);
}

.need-pill-badge--closed[b-bl8h95lt0c] {
    background: #6c757d;
}

.need-title[b-bl8h95lt0c] {
    font-size: 1.65rem;
    font-weight: 800;
    color: #2D2319;
    line-height: 1.3;
    margin-bottom: 16px;
    word-break: break-word;
}

@media (max-width: 576px) {
    .need-title[b-bl8h95lt0c] {
        font-size: 1.35rem;
    }
}

/* Budget Banner */
.need-budget-banner[b-bl8h95lt0c] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #FBF6EE 0%, #F5ECDF 100%);
    border: 1.5px solid #EADBCE;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.budget-icon-badge[b-bl8h95lt0c] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #ffffff;
    color: #C9922E;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(201, 146, 46, 0.15);
    flex-shrink: 0;
}

.budget-title-label[b-bl8h95lt0c] {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #8A735E;
    margin-bottom: 2px;
}

.budget-value[b-bl8h95lt0c] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #674E34;
}

@media (max-width: 576px) {
    .budget-value[b-bl8h95lt0c] {
        font-size: 1.15rem;
    }
}

/* Metadata Strip */
.need-meta-strip[b-bl8h95lt0c] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.meta-tag[b-bl8h95lt0c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #5C5248;
    background: #F6F3EF;
    border: 1px solid #EAE4DC;
    padding: 5px 12px;
    border-radius: 8px;
}

.meta-tag--offers[b-bl8h95lt0c] {
    background: #FAF4EB;
    border-color: #EBDDCB;
    color: #8A6828;
    font-weight: 600;
}

/* Description Section */
.need-description-section[b-bl8h95lt0c] {
    margin-bottom: 22px;
}

.section-subheading[b-bl8h95lt0c] {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #674E34;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.need-description-text[b-bl8h95lt0c] {
    background: #FAF9F7;
    border: 1px solid #EDE8E1;
    border-radius: 12px;
    padding: 16px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #3D332A;
    white-space: pre-wrap;
    word-break: break-word;
}

/* User Footer */
.need-user-footer[b-bl8h95lt0c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid #EDE8E1;
}

.user-avatar[b-bl8h95lt0c] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #EAE4DC;
    flex-shrink: 0;
}

.user-avatar--placeholder[b-bl8h95lt0c] {
    background: #F0ECE6;
    color: #9C8E80;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.user-name[b-bl8h95lt0c] {
    font-size: 14.5px;
    font-weight: 700;
    color: #2D2319;
}

.user-role[b-bl8h95lt0c] {
    font-size: 12px;
    color: #8A7E72;
}

.btn-chat-buyer[b-bl8h95lt0c] {
    display: inline-flex;
    align-items: center;
    background: #674E34;
    color: #ffffff;
    font-weight: 600;
    font-size: 13.5px;
    padding: 8px 18px;
    border-radius: 999px;
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(103, 78, 52, 0.25);
    cursor: pointer;
}

.btn-chat-buyer:hover[b-bl8h95lt0c] {
    background: #4A3826;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(103, 78, 52, 0.35);
}

/* ==========================================================================
   Matching Ads Section
   ========================================================================== */

.section-title-clean[b-bl8h95lt0c] {
    font-size: 15px;
    font-weight: 700;
    color: #2D2319;
}

.matching-ad-card[b-bl8h95lt0c] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1.5px solid #EDE8E1;
    border-radius: 12px;
    padding: 10px;
    transition: all 0.2s ease;
    margin-bottom: 10px;
}

.matching-ad-card:hover[b-bl8h95lt0c] {
    border-color: #C9922E;
    box-shadow: 0 4px 14px rgba(201, 146, 46, 0.12);
}

.matching-ad-card--selected[b-bl8h95lt0c] {
    border-color: #C9922E;
    background: #FAF5EB;
}

.matching-ad-card__img-wrap[b-bl8h95lt0c] {
    width: 68px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
}

.matching-ad-card__img-wrap img[b-bl8h95lt0c] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-img-placeholder[b-bl8h95lt0c] {
    width: 100%;
    height: 100%;
    background: #F4EDE5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A89B8E;
}

.matching-ad-card__content[b-bl8h95lt0c] {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.matching-ad-title[b-bl8h95lt0c] {
    font-size: 13.5px;
    font-weight: 600;
    color: #2D2319;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matching-ad-price[b-bl8h95lt0c] {
    font-size: 13.5px;
    font-weight: 700;
    color: #1E8E4E;
    margin-top: 2px;
}

.matching-ad-location[b-bl8h95lt0c] {
    font-size: 11.5px;
    color: #8A7E72;
}

.btn-offer-ad[b-bl8h95lt0c] {
    background: #F4EFEA;
    color: #674E34;
    border: 1px solid #DFD7CE;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    padding: 6px 12px;
    white-space: nowrap;
    transition: all 0.18s ease;
    cursor: pointer;
}

.btn-offer-ad:hover[b-bl8h95lt0c] {
    background: #C9922E;
    color: #ffffff;
    border-color: #C9922E;
}

.btn-offer-ad--selected[b-bl8h95lt0c] {
    background: #C9922E;
    color: #ffffff;
    border-color: #C9922E;
}

/* ==========================================================================
   Make An Offer Card (Right Column)
   ========================================================================== */

.make-offer-card[b-bl8h95lt0c] {
    background: #ffffff;
    border: 1.5px solid #EDE8E1;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(61, 46, 30, 0.08);
    overflow: hidden;
}

.make-offer-card__header[b-bl8h95lt0c] {
    padding: 16px 20px;
    background: linear-gradient(135deg, #FBF6EE 0%, #F5ECDF 100%);
    border-bottom: 1.5px solid #EDE8E1;
}

.make-offer-icon[b-bl8h95lt0c] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: linear-gradient(135deg, #C9922E, #A9761F);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(201, 146, 46, 0.3);
}

.make-offer-title[b-bl8h95lt0c] {
    font-size: 16px;
    font-weight: 700;
    color: #2D2319;
}

.make-offer-subtitle[b-bl8h95lt0c] {
    font-size: 12px;
    color: #7D6F61;
    margin-top: 1px;
}

.make-offer-card__body[b-bl8h95lt0c] {
    padding: 20px;
}

.buyer-budget-hint[b-bl8h95lt0c] {
    display: flex;
    align-items: center;
    background: #FAF4EB;
    border: 1px solid #EBDDCB;
    border-radius: 9px;
    padding: 9px 13px;
    font-size: 12.5px;
    color: #674E34;
}

.linked-ad-chip[b-bl8h95lt0c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F5EFE6;
    border: 1px dashed #C9922E;
    border-radius: 9px;
    padding: 8px 12px;
}

.form-label-modern[b-bl8h95lt0c] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #4A3C2E;
    margin-bottom: 6px;
}

.modern-price-group[b-bl8h95lt0c] {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #E5DFD7;
    border-radius: 10px;
    background: #FCFBF9;
    overflow: hidden;
    transition: all 0.2s ease;
}

.modern-price-group:focus-within[b-bl8h95lt0c] {
    border-color: #C9922E;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(201, 146, 46, 0.15);
}

.modern-currency-addon[b-bl8h95lt0c] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: #F0ECE6;
    color: #674E34;
    font-weight: 700;
    font-size: 14px;
    border-right: 1.5px solid #E5DFD7;
    user-select: none;
}

.modern-price-control[b-bl8h95lt0c] {
    flex: 1;
    height: 44px;
    border: none;
    background: transparent;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: #2D2319;
    outline: none;
    width: 100%;
}

.quick-price-chips[b-bl8h95lt0c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11.5px;
}

.quick-chip-label[b-bl8h95lt0c] {
    color: #8A7E72;
    font-weight: 500;
    margin-right: 2px;
}

.quick-chip[b-bl8h95lt0c] {
    border: 1px solid #E2DDD5;
    background: #F8F6F2;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #674E34;
    cursor: pointer;
    transition: all 0.15s ease;
}

.quick-chip:hover[b-bl8h95lt0c] {
    background: #C9922E;
    border-color: #C9922E;
    color: #ffffff;
}

.modern-message-control[b-bl8h95lt0c] {
    width: 100%;
    border-radius: 10px;
    border: 1.5px solid #E5DFD7;
    background: #FCFBF9;
    padding: 10px 14px;
    font-size: 13.5px;
    color: #2D2319;
    resize: vertical;
    transition: all 0.2s ease;
    outline: none;
}

.modern-message-control:focus[b-bl8h95lt0c] {
    background: #ffffff;
    border-color: #C9922E;
    box-shadow: 0 0 0 3px rgba(201, 146, 46, 0.15);
}

.btn-send-offer[b-bl8h95lt0c] {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #C9922E 0%, #A9761F 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(201, 146, 46, 0.35);
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-send-offer:hover:not(:disabled)[b-bl8h95lt0c] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(201, 146, 46, 0.45);
    background: linear-gradient(135deg, #D49D38 0%, #B88226 100%);
}

.btn-send-offer:disabled[b-bl8h95lt0c] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.offer-safety-note[b-bl8h95lt0c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    color: #8A7E72;
    text-align: center;
    margin-top: 12px;
}

/* ==========================================================================
   Offers List Section
   ========================================================================== */

.offer-card[b-bl8h95lt0c] {
    background: #ffffff;
    border: 1px solid #EDE8E1;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(61, 46, 30, 0.04);
    transition: all 0.2s ease;
}

.offer-card:hover[b-bl8h95lt0c] {
    box-shadow: 0 4px 14px rgba(61, 46, 30, 0.08);
}

.offer-card--accepted[b-bl8h95lt0c] {
    border-left: 4px solid #1E8E4E;
    background: #F6FCF8;
}

.offer-card__header[b-bl8h95lt0c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.offer-avatar[b-bl8h95lt0c] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.offer-avatar--placeholder[b-bl8h95lt0c] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #F0ECE6;
    color: #9C8E80;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.offer-seller-name[b-bl8h95lt0c] {
    font-size: 13.5px;
    font-weight: 700;
    color: #2D2319;
}

.offer-seller-sub[b-bl8h95lt0c] {
    font-size: 11px;
    color: #8A7E72;
}

.offer-status-badge[b-bl8h95lt0c] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 999px;
    padding: 3px 9px;
}

.offer-status-badge--pending[b-bl8h95lt0c] {
    background: #FBF5E9;
    color: #A9761F;
}

.offer-status-badge--accepted[b-bl8h95lt0c] {
    background: #E4F8EC;
    color: #1E8E4E;
}

.offer-status-badge--rejected[b-bl8h95lt0c],
.offer-status-badge--withdrawn[b-bl8h95lt0c] {
    background: #FBEBE9;
    color: #C62828;
}

.offer-price-highlight[b-bl8h95lt0c] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}

.offer-price-label[b-bl8h95lt0c] {
    font-size: 12px;
    font-weight: 600;
    color: #7D6F61;
}

.offer-price-val[b-bl8h95lt0c] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1E8E4E;
}

.offer-message-bubble[b-bl8h95lt0c] {
    background: #FAF9F7;
    border: 1px solid #EFEAE3;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #4A3C2E;
    line-height: 1.45;
    margin-bottom: 10px;
}

.offer-card__footer[b-bl8h95lt0c] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.btn-accept-offer[b-bl8h95lt0c] {
    background: #1E8E4E;
    color: #ffffff;
    border: none;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    padding: 5px 12px;
    transition: all 0.15s ease;
    cursor: pointer;
}

.btn-accept-offer:hover[b-bl8h95lt0c] {
    background: #17723E;
    color: #ffffff;
}

.btn-view-ad[b-bl8h95lt0c] {
    background: #F0ECE6;
    color: #674E34;
    border: 1px solid #DFD7CE;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    padding: 5px 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s ease;
}

.btn-view-ad:hover[b-bl8h95lt0c] {
    background: #E5DFD6;
    color: #4A3826;
}

/* #703: contact the seller of an accepted offer — same brown as the page's
   Contact Buyer button, sized like the other offer-footer buttons. */
.btn-chat-seller[b-bl8h95lt0c] {
    background: #674E34;
    color: #ffffff;
    border: none;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    padding: 5px 12px;
    transition: all 0.15s ease;
    cursor: pointer;
}

.btn-chat-seller:hover[b-bl8h95lt0c] {
    background: #4A3826;
    color: #ffffff;
}

.empty-offers-box[b-bl8h95lt0c] {
    text-align: center;
    background: #ffffff;
    border: 1.5px dashed #E0D9CF;
    border-radius: 14px;
    padding: 32px 20px;
}

.empty-offers-icon[b-bl8h95lt0c] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FAF5EE;
    color: #C9922E;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

/* Colors & Shared Utilities */
.text-gold[b-bl8h95lt0c] {
    color: #C9922E !important;
}

.text-brand[b-bl8h95lt0c] {
    color: #674E34 !important;
}

.bg-brand-subtle[b-bl8h95lt0c] {
    background: #F5ECDF !important;
}

.btn-gold[b-bl8h95lt0c] {
    background: #C9922E;
    border: none;
    color: #ffffff;
    font-weight: 700;
}

.btn-gold:hover[b-bl8h95lt0c] {
    background: #A9761F;
    color: #ffffff;
}
/* _content/RealOxy.Web.Core/Pages/NeedsListPage.razor.rz.scp.css */
/* ==========================================================================
   Needs List Page Styles
   ========================================================================== */

.needs-page-root[b-uhik8hsqxf] {
    background: #f8f6f3;
}

.needs-page-container[b-uhik8hsqxf] {
    max-width: 1240px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.needs-breadcrumb-nav[b-uhik8hsqxf] {
    padding: 4px 0;
}

.needs-breadcrumb[b-uhik8hsqxf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13.5px;
}

.needs-breadcrumb-item[b-uhik8hsqxf] {
    display: inline-flex;
    align-items: center;
}

.needs-breadcrumb-link[b-uhik8hsqxf] {
    color: var(--brand, #674E34);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease;
}

.needs-breadcrumb-link:hover[b-uhik8hsqxf] {
    color: #C9922E;
    text-decoration: underline;
}

.needs-breadcrumb-separator[b-uhik8hsqxf] {
    color: #b0a090;
    font-size: 11px;
    margin: 0 8px;
    display: inline-flex;
    align-items: center;
    user-select: none;
}

.needs-breadcrumb-current[b-uhik8hsqxf] {
    color: #6c757d;
    font-weight: 600;
    display: inline-block;
}

@media (max-width: 576px) {
    .needs-breadcrumb[b-uhik8hsqxf] {
        font-size: 12.5px;
    }
    .needs-breadcrumb-separator[b-uhik8hsqxf] {
        margin: 0 5px;
    }
}

/* ==========================================================================
   Hero Header Banner
   ========================================================================== */

.needs-hero-banner[b-uhik8hsqxf] {
    background: #ffffff;
    border: 1.5px solid #ede8e1;
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 4px 20px rgba(61, 46, 30, 0.06);
}

@media (max-width: 576px) {
    .needs-hero-banner[b-uhik8hsqxf] {
        padding: 14px 14px;
        border-radius: 14px;
    }
}

.needs-hero-badge[b-uhik8hsqxf] {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #FBF6EE;
    border: 1px solid #EBDDCB;
    color: #8A6828;
    padding: 4px 12px;
    border-radius: 999px;
}

.needs-location-badge[b-uhik8hsqxf] {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    background: #F6F3EF;
    border: 1px solid #EAE4DC;
    color: #5C5248;
    padding: 4px 12px;
    border-radius: 999px;
}

.needs-hero-title[b-uhik8hsqxf] {
    font-size: 1.85rem;
    font-weight: 800;
    color: #2D2319;
    line-height: 1.25;
}

@media (max-width: 576px) {
    .needs-hero-title[b-uhik8hsqxf] {
        font-size: 1.25rem;
    }
}

.needs-hero-subtitle[b-uhik8hsqxf] {
    font-size: 14.5px;
    color: #7D6F61;
    max-width: 640px;
    line-height: 1.5;
}

.btn-post-need-hero[b-uhik8hsqxf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #C9922E 0%, #A9761F 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 14.5px;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 14px rgba(201, 146, 46, 0.35);
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.btn-post-need-hero:hover[b-uhik8hsqxf] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(201, 146, 46, 0.45);
    background: linear-gradient(135deg, #D49D38 0%, #B88226 100%);
    color: #ffffff;
}

@media (max-width: 768px) {
    .btn-post-need-hero[b-uhik8hsqxf] {
        width: 100%;
        margin-top: 4px;
        padding: 9px 16px;
        font-size: 13.5px;
    }
}

/* Mobile Filter Chip inside Category Bar */
.needs-cat-chip--filter[b-uhik8hsqxf] {
    padding: 7px 14px;
    font-size: 15px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.needs-cat-chip--filter-active[b-uhik8hsqxf] {
    background: #FAF5EB !important;
    border-color: #C9922E !important;
    color: #A9761F !important;
}

.needs-cat-chip--filter .mobile-filter-dot[b-uhik8hsqxf] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #C9922E;
    position: absolute;
    top: 6px;
    right: 6px;
}

/* ==========================================================================
   Category Chips Bar
   ========================================================================== */

.needs-categories-bar[b-uhik8hsqxf] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scrollbar-width: thin;
}

.needs-categories-bar[b-uhik8hsqxf]::-webkit-scrollbar {
    height: 4px;
}

.needs-categories-bar[b-uhik8hsqxf]::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}

.needs-cat-chip[b-uhik8hsqxf] {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    border: 1.5px solid #E2DDD5;
    background: #FFFFFF;
    color: #4A3C2E !important;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
}

.needs-cat-chip:hover[b-uhik8hsqxf] {
    border-color: #C9922E !important;
    color: #C9922E !important;
    background: #FAF5EB !important;
    transform: translateY(-1px);
}

.needs-cat-chip--active[b-uhik8hsqxf] {
    background: linear-gradient(135deg, #C9922E, #A9761F) !important;
    border-color: #A9761F !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(201, 146, 46, 0.3);
}

.needs-cat-chip--active:hover[b-uhik8hsqxf] {
    background: linear-gradient(135deg, #D49D38, #B88226) !important;
    border-color: #B88226 !important;
    color: #ffffff !important;
}

.needs-cat-chip span[b-uhik8hsqxf],
.needs-cat-chip i[b-uhik8hsqxf] {
    color: inherit !important;
}

/* ==========================================================================
   Filters Card
   ========================================================================== */

.needs-filter-card[b-uhik8hsqxf] {
    background: #ffffff;
    border: 1.5px solid #EDE8E1;
    border-radius: 16px;
    padding: 18px 22px;
    box-shadow: 0 4px 20px rgba(61, 46, 30, 0.06);
}

@media (max-width: 576px) {
    .needs-filter-card[b-uhik8hsqxf] {
        padding: 14px 16px;
    }
}

.form-label-filter[b-uhik8hsqxf] {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #4A3C2E;
    margin-bottom: 6px;
}

.form-select-modern[b-uhik8hsqxf] {
    height: 42px;
    border-radius: 10px;
    border: 1.5px solid #E5DFD7;
    background-color: #FCFBF9;
    padding: 0 12px;
    font-size: 13.5px;
    color: #2D2319;
    width: 100%;
    transition: all 0.2s ease;
    outline: none;
}

.form-select-modern:focus[b-uhik8hsqxf] {
    border-color: #C9922E;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(201, 146, 46, 0.15);
}

.modern-input-group[b-uhik8hsqxf] {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #E5DFD7;
    border-radius: 10px;
    background: #FCFBF9;
    overflow: hidden;
    transition: all 0.2s ease;
    height: 42px;
}

.modern-input-group:focus-within[b-uhik8hsqxf] {
    border-color: #C9922E;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(201, 146, 46, 0.15);
}

.input-currency-tag[b-uhik8hsqxf] {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: #F0ECE6;
    color: #674E34;
    font-weight: 700;
    font-size: 12px;
    border-right: 1.5px solid #E5DFD7;
    user-select: none;
}

.form-control-modern[b-uhik8hsqxf] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 10px;
    font-size: 13.5px;
    color: #2D2319;
    outline: none;
    width: 100%;
}

.btn-urgent-toggle[b-uhik8hsqxf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    border: 1.5px solid #E5DFD7;
    background: #FCFBF9;
    color: #5C5248;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    width: 100%;
}

.btn-urgent-toggle:hover[b-uhik8hsqxf] {
    border-color: #E53935;
    color: #E53935;
    background: #FBEBE9;
}

.btn-urgent-toggle--active[b-uhik8hsqxf] {
    background: linear-gradient(135deg, #E53935, #C62828);
    border-color: #C62828;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3);
}

.btn-apply-filter[b-uhik8hsqxf] {
    height: 42px;
    padding: 0 22px;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 10px;
    border: none;
    background: #674E34;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(103, 78, 52, 0.25);
    white-space: nowrap;
}

.btn-apply-filter:hover[b-uhik8hsqxf] {
    background: #4A3826;
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-reset-filters[b-uhik8hsqxf] {
    height: 42px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    border: 1.5px solid #DFD7CE;
    background: #F4EFEA;
    color: #674E34;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-reset-filters:hover[b-uhik8hsqxf] {
    background: #EAE3DC;
    color: #3D2E1E;
}

@media (max-width: 768px) {
    .btn-apply-filter[b-uhik8hsqxf],
    .btn-reset-filters[b-uhik8hsqxf] {
        flex: 1;
        width: 100%;
    }
}

/* ==========================================================================
   Active Filters
   ========================================================================== */

.active-filter-label[b-uhik8hsqxf] {
    font-size: 12px;
    font-weight: 700;
    color: #7D6F61;
}

.active-filter-pill[b-uhik8hsqxf] {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    background: #F0ECE6;
    color: #4A3C2E !important;
    border: 1px solid #DFD7CE;
    cursor: pointer;
    transition: all 0.15s ease;
}

.active-filter-pill:hover[b-uhik8hsqxf] {
    background: #E5DFD6 !important;
    color: #C62828 !important;
    border-color: #C62828 !important;
}

.active-filter-pill--urgent[b-uhik8hsqxf] {
    background: #FBEBE9;
    border-color: #F5C6CB;
    color: #C62828 !important;
}

.active-filter-pill--urgent:hover[b-uhik8hsqxf] {
    background: #F8D7DA !important;
    color: #A71D2A !important;
    border-color: #A71D2A !important;
}

.active-filter-pill span[b-uhik8hsqxf],
.active-filter-pill i[b-uhik8hsqxf] {
    color: inherit !important;
}

/* ==========================================================================
   Results Grid
   ========================================================================== */

.section-title-clean[b-uhik8hsqxf] {
    font-size: 16px;
    font-weight: 700;
    color: #2D2319;
}

.needs-grid[b-uhik8hsqxf] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 680px) {
    .needs-grid[b-uhik8hsqxf] {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (min-width: 1100px) {
    .needs-grid[b-uhik8hsqxf] {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* ==========================================================================
   Empty State Card
   ========================================================================== */

.needs-empty-card[b-uhik8hsqxf] {
    text-align: center;
    background: #ffffff;
    border: 1.5px dashed #E0D9CF;
    border-radius: 16px;
    padding: 48px 24px;
    box-shadow: 0 4px 20px rgba(61, 46, 30, 0.04);
}

.needs-empty-icon[b-uhik8hsqxf] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FAF5EE;
    color: #C9922E;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

/* ==========================================================================
   Shared Colors & Utilities
   ========================================================================== */

.text-gold[b-uhik8hsqxf] {
    color: #C9922E !important;
}

.text-brand[b-uhik8hsqxf] {
    color: #674E34 !important;
}

.bg-brand-subtle[b-uhik8hsqxf] {
    background: #F5ECDF !important;
}
/* _content/RealOxy.Web.Core/Pages/NewsPage.razor.rz.scp.css */
/* ==========================================================================
   News & Updates Page — Horizontal Tab Layout
   ========================================================================== */

.news-page-bg[b-t5tw21mhdc] {
    background-color: #F8F6F3;
}

.news-scroll-area[b-t5tw21mhdc] {
    scrollbar-width: thin;
}

.news__inner[b-t5tw21mhdc] {
    max-width: 860px;
    margin: 0 auto;
    padding: 12px 16px 40px;
}

@media (min-width: 768px) {
    .news__inner[b-t5tw21mhdc] {
        padding: 20px 24px 60px;
    }
}

.news-page-title[b-t5tw21mhdc] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #2D2319;
    letter-spacing: -0.2px;
}

.news-page-subtitle[b-t5tw21mhdc] {
    font-size: 13.5px;
    color: #7D6F61;
}

.news__chips[b-t5tw21mhdc] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    margin-bottom: 16px;
    scrollbar-width: thin;
}

.chip[b-t5tw21mhdc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid #E2DDD5;
    background: #ffffff;
    color: #4A3C2E;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.chip:hover[b-t5tw21mhdc] {
    border-color: #C9922E;
    background: #FAF6EE;
    color: #C9922E;
}

.chip--active[b-t5tw21mhdc] {
    background: linear-gradient(135deg, #C9922E 0%, #A9761F 100%) !important;
    border-color: #A9761F !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(201, 146, 46, 0.28);
}

.chip-count[b-t5tw21mhdc] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
}

.chip--active .chip-count[b-t5tw21mhdc] {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

.news__list[b-t5tw21mhdc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.news-tab-card[b-t5tw21mhdc] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #FFFFFF;
    border: 1px solid #EBE4D8;
    border-radius: 14px;
    padding: 14px 16px;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(61, 46, 30, 0.04);
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.news-tab-card:hover[b-t5tw21mhdc] {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(61, 46, 30, 0.08);
    border-color: #DECDB8;
}

.news-tab__thumb-wrap[b-t5tw21mhdc] {
    width: 96px;
    height: 96px;
    min-width: 96px;
    max-width: 96px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #F8F6F3;
    flex-shrink: 0;
    align-self: flex-start;
    border: 1px solid #ECE6DC;
}

.news-tab__thumb[b-t5tw21mhdc] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.news-tab-card:hover .news-tab__thumb[b-t5tw21mhdc] {
    transform: scale(1.05);
}

.news-tab__thumb-placeholder[b-t5tw21mhdc] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FAF6EE 0%, #F4ECE0 100%);
    border: 1px solid #EBDDCB;
    color: #C9922E;
    font-size: 32px;
}

.news-tab__content[b-t5tw21mhdc] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.news-tab__header[b-t5tw21mhdc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.news-tab__tag[b-t5tw21mhdc] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #FAF6EE;
    border: 1px solid #EBDDCB;
    color: #8A6828;
    padding: 2px 8px;
    border-radius: 999px;
}

.news-tab__date[b-t5tw21mhdc] {
    font-size: 11.5px;
    color: #8C7B6D;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin-left: auto;
}

.news-tab__title[b-t5tw21mhdc] {
    font-size: 15px;
    font-weight: 700;
    color: #2D2319;
    margin: 0;
    line-height: 1.35;
    transition: color 0.15s ease;
}

.news-tab-card:hover .news-tab__title[b-t5tw21mhdc] {
    color: #A9761F;
}

.news-tab__body[b-t5tw21mhdc] {
    font-size: 13px;
    color: #6E5E50;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 576px) {
    .news-tab-card[b-t5tw21mhdc] {
        padding: 10px 12px;
        gap: 12px;
        border-radius: 12px;
    }

    .news-tab__thumb-wrap[b-t5tw21mhdc] {
        width: 78px;
        height: 78px;
        min-width: 78px;
        max-width: 78px;
        border-radius: 8px;
    }

    .news-tab__thumb-placeholder[b-t5tw21mhdc] {
        font-size: 24px;
    }

    .news-tab__title[b-t5tw21mhdc] {
        font-size: 14px;
    }

    .news-tab__body[b-t5tw21mhdc] {
        font-size: 12.5px;
        -webkit-line-clamp: 2;
    }
}
/* _content/RealOxy.Web.Core/Pages/NotificationPage.razor.rz.scp.css */

/* ==========================================================================
   Notifications Page — Horizontal Tab Layout
   ========================================================================== */

.notifications-page-bg[b-82y97x2stk] {
    background-color: #F8F6F3;
}

.notifications-scroll-area[b-82y97x2stk] {
    scrollbar-width: thin;
}

.notifications__inner[b-82y97x2stk] {
    max-width: 860px;
    margin: 0 auto;
    padding: 12px 16px 40px;
}

@media (min-width: 768px) {
    .notifications__inner[b-82y97x2stk] {
        padding: 20px 24px 60px;
    }
}

/* Desktop Header Section */
.notifications-page-title[b-82y97x2stk] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #2D2319;
    letter-spacing: -0.2px;
}

.notifications-page-subtitle[b-82y97x2stk] {
    font-size: 13.5px;
    color: #7D6F61;
}

/* Notifications List */
.notifications__list[b-82y97x2stk] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Horizontal Tab Card */
.notification-tab-card[b-82y97x2stk] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #FFFFFF;
    border: 1px solid #EBE4D8;
    border-radius: 14px;
    padding: 14px 16px;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(61, 46, 30, 0.04);
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-tab-card:hover[b-82y97x2stk] {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(61, 46, 30, 0.08);
    border-color: #DECDB8;
}

/* Thumbnail wrapper */
.notification-tab__thumb-wrap[b-82y97x2stk] {
    width: 96px;
    height: 96px;
    min-width: 96px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #F8F6F3;
    flex-shrink: 0;
    align-self: flex-start;
    border: 1px solid #ECE6DC;
}

.notification-tab__thumb[b-82y97x2stk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.notification-tab-card:hover .notification-tab__thumb[b-82y97x2stk] {
    transform: scale(1.05);
}

.notification-tab__thumb-placeholder[b-82y97x2stk] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FAF6EE 0%, #F4ECE0 100%);
    border: 1px solid #EBDDCB;
    color: #C9922E;
    font-size: 32px;
}

/* Content */
.notification-tab__content[b-82y97x2stk] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.notification-tab__header[b-82y97x2stk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.notification-tab__tag[b-82y97x2stk] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #FAF6EE;
    border: 1px solid #EBDDCB;
    color: #8A6828;
    padding: 2px 8px;
    border-radius: 999px;
}

.notification-tab__date[b-82y97x2stk] {
    font-size: 11.5px;
    color: #8C7B6D;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin-left: auto;
}

.notification-tab__title[b-82y97x2stk] {
    font-size: 15px;
    font-weight: 700;
    color: #2D2319;
    margin: 0;
    line-height: 1.35;
    transition: color 0.15s ease;
}

.notification-tab-card:hover .notification-tab__title[b-82y97x2stk] {
    color: #A9761F;
}

.notification-tab__body[b-82y97x2stk] {
    font-size: 13px;
    color: #6E5E50;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Load More Button */
.btn-load-more[b-82y97x2stk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: #8A6828;
    border: 1.5px solid #EBDDCB;
    font-weight: 600;
    font-size: 13.5px;
    padding: 8px 26px;
    border-radius: 999px;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(61, 46, 30, 0.04);
}

.btn-load-more:hover[b-82y97x2stk] {
    background: #FAF6EE;
    border-color: #C9922E;
    color: #C9922E;
    box-shadow: 0 4px 12px rgba(201, 146, 46, 0.15);
}

/* Mobile Adjustments */
@media (max-width: 576px) {
    .notification-tab-card[b-82y97x2stk] {
        padding: 10px 12px;
        gap: 12px;
        border-radius: 12px;
    }

    .notification-tab__thumb-wrap[b-82y97x2stk] {
        width: 78px;
        height: 78px;
        min-width: 78px;
        border-radius: 8px;
    }

    .notification-tab__thumb-placeholder[b-82y97x2stk] {
        font-size: 24px;
    }

    .notification-tab__title[b-82y97x2stk] {
        font-size: 14px;
    }

    .notification-tab__body[b-82y97x2stk] {
        font-size: 12.5px;
        -webkit-line-clamp: 2;
    }
}
/* _content/RealOxy.Web.Core/Pages/PaymentFailurePage.razor.rz.scp.css */

.status-container[b-zd3wzav2d2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    padding: 1rem;
    text-align: center;
    z-index: 9999;
}

.status-content[b-zd3wzav2d2] {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    padding: 3rem 2rem;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(220, 38, 38, 0.08), 0 1px 3px rgba(0,0,0,0.05);
    margin: auto;
    animation: slideUpFade-b-zd3wzav2d2 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform: translateY(40px);
    opacity: 0;
}

.logo-wrapper-page[b-zd3wzav2d2] {
    margin-bottom: 2rem;
}

.oxy-logo[b-zd3wzav2d2] {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.animation-container[b-zd3wzav2d2] {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-ring-error[b-zd3wzav2d2] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fca5a5;
    border-radius: 50%;
    animation: pulse-b-zd3wzav2d2 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    z-index: 1;
}

.image-wrapper[b-zd3wzav2d2] {
    position: relative;
    z-index: 2;
    width: 100px;
    height: 100px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: shakeIn-b-zd3wzav2d2 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    animation-delay: 0.1s;
    transform: scale(0);
}

.cross[b-zd3wzav2d2] {
    width: 60px;
    height: 60px;
    display: block;
    stroke-width: 8;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cross__path[b-zd3wzav2d2] {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
}

.cross__path--right[b-zd3wzav2d2] {
    animation: stroke-b-zd3wzav2d2 0.3s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    animation-delay: 0.6s;
}

.cross__path--left[b-zd3wzav2d2] {
    animation: stroke-b-zd3wzav2d2 0.3s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    animation-delay: 0.8s;
}

.status-title[b-zd3wzav2d2] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #dc2626;
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
    opacity: 0;
    animation: fadeIn-b-zd3wzav2d2 0.5s ease forwards;
    animation-delay: 0.4s;
}

.subtitle[b-zd3wzav2d2] {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    padding: 0 1rem;
    opacity: 0;
    animation: fadeIn-b-zd3wzav2d2 0.5s ease forwards;
    animation-delay: 0.5s;
}

.info-box[b-zd3wzav2d2] {
    background: #fef2f2;
    padding: 1rem 1.5rem;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    border: 1px solid #fecaca;
    display: inline-block;
    opacity: 0;
    animation: fadeIn-b-zd3wzav2d2 0.5s ease forwards;
    animation-delay: 0.6s;
}

.info-content[b-zd3wzav2d2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.info-label[b-zd3wzav2d2] {
    font-size: 0.875rem;
    color: #991b1b;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.info-value[b-zd3wzav2d2] {
    font-weight: 700;
    color: #dc2626;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-info[b-zd3wzav2d2] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeIn-b-zd3wzav2d2 0.5s ease forwards;
    animation-delay: 0.65s;
}

.action-buttons[b-zd3wzav2d2] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    animation: fadeIn-b-zd3wzav2d2 0.5s ease forwards;
    animation-delay: 0.7s;
}

.nav-btn[b-zd3wzav2d2] {
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.btn-primary[b-zd3wzav2d2] {
    background: #ef4444;
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

    .btn-primary:hover[b-zd3wzav2d2] {
        background: #dc2626;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(239, 68, 68, 0.3);
    }

    .btn-primary:active[b-zd3wzav2d2] {
        transform: translateY(0);
    }

.btn-secondary[b-zd3wzav2d2] {
    background: #fef2f2;
    color: #ef4444;
    border: 2px solid #fca5a5;
}

    .btn-secondary:hover[b-zd3wzav2d2] {
        background: #fee2e2;
    }

/* Keyframes */
@keyframes stroke-b-zd3wzav2d2 {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes slideUpFade-b-zd3wzav2d2 {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes shakeIn-b-zd3wzav2d2 {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.1) rotate(-5deg);
    }

    70% {
        transform: scale(0.95) rotate(5deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

@keyframes fadeIn-b-zd3wzav2d2 {
    to {
        opacity: 1;
    }
}

@keyframes pulse-b-zd3wzav2d2 {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@media (max-width: 640px) {
    .status-container[b-zd3wzav2d2] {
        background: white !important;
        padding: 0;
    }

    .status-content[b-zd3wzav2d2] {
        padding: 3rem 1.5rem;
        border-radius: 0;
        box-shadow: none;
        border: none;
        margin: auto;
    }

    .animation-container[b-zd3wzav2d2] {
        width: 120px;
        height: 120px;
        margin-bottom: 1.5rem;
    }

    .image-wrapper[b-zd3wzav2d2] {
        width: 90px;
        height: 90px;
    }

    .status-title[b-zd3wzav2d2] {
        font-size: 1.5rem;
    }

    .oxy-logo[b-zd3wzav2d2] {
        height: 32px;
    }
}


/* _content/RealOxy.Web.Core/Pages/PaymentSuccessPage.razor.rz.scp.css */

.status-container[b-dtz2hpxg1f] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    padding: 1rem;
    text-align: center;
    z-index: 9999;
}

.confirming-spin[b-dtz2hpxg1f] {
    display: inline-block;
    animation: confirmingSpin-b-dtz2hpxg1f 1.2s linear infinite;
}

@keyframes confirmingSpin-b-dtz2hpxg1f {
    to { transform: rotate(360deg); }
}

.status-content[b-dtz2hpxg1f] {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    padding: 3rem 2rem;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(22, 101, 52, 0.08), 0 1px 3px rgba(0,0,0,0.05);
    margin: auto;
    animation: slideUpFade-b-dtz2hpxg1f 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform: translateY(40px);
    opacity: 0;
}

.logo-wrapper-page[b-dtz2hpxg1f] {
    margin-bottom: 2rem;
}

.oxy-logo[b-dtz2hpxg1f] {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.animation-container[b-dtz2hpxg1f] {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-ring[b-dtz2hpxg1f] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #bbf7d0;
    border-radius: 50%;
    animation: pulse-b-dtz2hpxg1f 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    z-index: 1;
}

.image-wrapper[b-dtz2hpxg1f] {
    position: relative;
    z-index: 2;
    width: 100px;
    height: 100px;
    background: #16a34a;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(22, 101, 52, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popIn-b-dtz2hpxg1f 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.1s;
    transform: scale(0);
}

.checkmark[b-dtz2hpxg1f] {
    width: 60px;
    height: 60px;
    display: block;
    stroke-width: 8;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.checkmark__check[b-dtz2hpxg1f] {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke-b-dtz2hpxg1f 0.4s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    animation-delay: 0.6s;
}

.pulse-ring-pending[b-dtz2hpxg1f] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fef08a;
    border-radius: 50%;
    animation: pulse-b-dtz2hpxg1f 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    z-index: 1;
}

.pending-image[b-dtz2hpxg1f] {
    position: relative;
    z-index: 2;
    width: 100px;
    height: 100px;
    background: #eab308;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(234, 179, 8, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popIn-b-dtz2hpxg1f 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.1s;
    transform: scale(0);
}

.pending-icon[b-dtz2hpxg1f] {
    width: 60px;
    height: 60px;
    display: block;
    stroke-width: 6;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pending__circle[b-dtz2hpxg1f] {
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
    animation: stroke-b-dtz2hpxg1f 0.4s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    animation-delay: 0.4s;
}

.pending__hand[b-dtz2hpxg1f] {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    animation: stroke-b-dtz2hpxg1f 0.4s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    animation-delay: 0.7s;
}

.status-title[b-dtz2hpxg1f] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #166534;
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
    opacity: 0;
    animation: fadeIn-b-dtz2hpxg1f 0.5s ease forwards;
    animation-delay: 0.4s;
}

.subtitle[b-dtz2hpxg1f] {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    padding: 0 1rem;
    opacity: 0;
    animation: fadeIn-b-dtz2hpxg1f 0.5s ease forwards;
    animation-delay: 0.5s;
}

.info-box[b-dtz2hpxg1f] {
    background: #f0fdf4;
    padding: 1.5rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    border: 1px solid #dcfce7;
    opacity: 0;
    animation: fadeIn-b-dtz2hpxg1f 0.5s ease forwards;
    animation-delay: 0.6s;
}

.info-item[b-dtz2hpxg1f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e2e8f0;
}

    .info-item:last-child[b-dtz2hpxg1f] {
        border-bottom: none;
        padding-bottom: 0;
    }

    .info-item:first-child[b-dtz2hpxg1f] {
        padding-top: 0;
    }

.info-label[b-dtz2hpxg1f] {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

.info-value[b-dtz2hpxg1f] {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.9375rem;
}

    .info-value.highlight[b-dtz2hpxg1f] {
        color: #16a34a;
        font-size: 1.125rem;
        font-weight: 700;
    }

.action-buttons[b-dtz2hpxg1f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    animation: fadeIn-b-dtz2hpxg1f 0.5s ease forwards;
    animation-delay: 0.7s;
}

.nav-btn[b-dtz2hpxg1f] {
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.btn-primary[b-dtz2hpxg1f] {
    background: #16a34a;
    color: white;
    box-shadow: 0 4px 12px rgba(22, 101, 52, 0.25);
}

    .btn-primary:hover[b-dtz2hpxg1f] {
        background: #15803d;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(22, 101, 52, 0.3);
    }

    .btn-primary:active[b-dtz2hpxg1f] {
        transform: translateY(0);
    }

.btn-secondary[b-dtz2hpxg1f] {
    background: #f0fdf4;
    color: #16a34a;
    border: 2px solid #bbf7d0;
}

    .btn-secondary:hover[b-dtz2hpxg1f] {
        background: #dcfce7;
    }

/* Keyframes */
@keyframes stroke-b-dtz2hpxg1f {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes slideUpFade-b-dtz2hpxg1f {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes popIn-b-dtz2hpxg1f {
    to {
        transform: scale(1);
    }
}

@keyframes fadeIn-b-dtz2hpxg1f {
    to {
        opacity: 1;
    }
}

@keyframes pulse-b-dtz2hpxg1f {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@media (max-width: 640px) {
    .status-container[b-dtz2hpxg1f] {
        background: white !important;
        padding: 0;
    }

    .status-content[b-dtz2hpxg1f] {
        padding: 3rem 1.5rem;
        border-radius: 0;
        box-shadow: none;
        border: none;
        margin: auto;
    }

    .animation-container[b-dtz2hpxg1f] {
        width: 120px;
        height: 120px;
        margin-bottom: 1.5rem;
    }

    .image-wrapper[b-dtz2hpxg1f] {
        width: 90px;
        height: 90px;
    }

    .status-title[b-dtz2hpxg1f] {
        font-size: 1.5rem;
    }

    .oxy-logo[b-dtz2hpxg1f] {
        height: 32px;
    }
}


/* _content/RealOxy.Web.Core/Pages/PostAdPage.razor.rz.scp.css */
/* Wrapper Fix */
.postad-wrapper[b-kl3n846lol] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 24px 16px 5px;
}

/* Main Container */
.postad-container[b-kl3n846lol] {
    width: 100%;
    max-width: 850px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

/* Free ads strip banner for normal users */
.free-ads-strip[b-kl3n846lol] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e5d9c5;
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 14px;
    box-shadow: 0 3px 10px rgba(61, 44, 30, 0.05);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.free-ads-strip:hover[b-kl3n846lol] {
    box-shadow: 0 4px 14px rgba(61, 44, 30, 0.09);
    border-color: #d8c2a3;
}

.free-ads-strip.has-quota[b-kl3n846lol] {
    background: linear-gradient(135deg, #fdfbf8 0%, #f6efe6 100%);
    border-color: #e4d5c0;
}

.free-ads-strip.quota-exhausted[b-kl3n846lol] {
    background: #fff9f6;
    border-color: #f7dacd;
}

.free-ads-strip.no-plan[b-kl3n846lol] {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.free-ads-left[b-kl3n846lol] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.free-ads-badge-icon[b-kl3n846lol] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #674e34;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.free-ads-badge-icon.active-crown[b-kl3n846lol] {
    background: #674e34;
}

.free-ads-badge-icon.exhausted-icon[b-kl3n846lol] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-size: 18px;
}

.free-ads-badge-icon.standard-icon[b-kl3n846lol] {
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: #2563eb;
    font-size: 18px;
}

.free-ads-content[b-kl3n846lol] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.free-ads-top-row[b-kl3n846lol] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.free-ads-plan-name[b-kl3n846lol] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #3d2c1e;
    line-height: 1.2;
}

.free-ads-info-icon[b-kl3n846lol] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9c784f;
    font-size: 0.82rem;
    opacity: 0.8;
}

.badge-status[b-kl3n846lol] {
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 2px 7px;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

.badge-status.covered[b-kl3n846lol] {
    background: #e8f7ee;
    color: #1d7a3f;
    border: 1px solid #c2ebd0;
}

.badge-status.exhausted[b-kl3n846lol] {
    background: #fdecec;
    color: #b02a2a;
    border: 1px solid #f8c8c8;
}

.badge-status.standard[b-kl3n846lol] {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.free-ads-quota-info[b-kl3n846lol] {
    font-size: 0.82rem;
    color: #6b5136;
    line-height: 1.35;
}

.free-ads-quota-info .text-exhausted[b-kl3n846lol] {
    color: #b02a2a;
    font-weight: 500;
}

.free-ads-boost-chip[b-kl3n846lol] {
    font-size: 0.72rem;
    font-weight: 600;
    background: #e8f7ee;
    color: #1d7a3f;
    border-radius: 999px;
    padding: 2px 7px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.free-ads-action-btn[b-kl3n846lol] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #674e34;
    text-decoration: none;
    padding: 7px 13px;
    border-radius: 9px;
    background: #fff;
    border: 1.5px solid #dcd0bc;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.free-ads-action-btn:hover[b-kl3n846lol] {
    background: #674e34;
    color: #fff;
    border-color: #674e34;
}

.free-ads-action-btn.upgrade[b-kl3n846lol] {
    background: #674e34;
    color: #fff;
    border-color: #674e34;
}

.free-ads-action-btn.upgrade:hover[b-kl3n846lol] {
    opacity: 0.92;
}

/* Modal Quota Card Styles */
.bg-light-quota-green[b-kl3n846lol] {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.bg-light-quota-red[b-kl3n846lol] {
    background-color: #fff7ed;
    border: 1px solid #fed7aa;
}

.bg-light-quota-blue[b-kl3n846lol] {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
}

@media (max-width: 576px) {
    .free-ads-strip[b-kl3n846lol] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 12px;
        margin-bottom: 12px;
    }

    .free-ads-badge-icon[b-kl3n846lol] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .free-ads-plan-name[b-kl3n846lol] {
        font-size: 0.84rem;
    }

    .free-ads-quota-info[b-kl3n846lol] {
        display: none;
    }

    .free-ads-action-btn[b-kl3n846lol] {
        padding: 5px 10px;
        font-size: 0.78rem;
        border-radius: 8px;
        gap: 2px;
    }
}

/* Page Title */
.page-title[b-kl3n846lol] {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Card Style */
.post-card[b-kl3n846lol] {
    background: #ffffff;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-bottom: 18px;
}

/* Clickable card hover */
.clickable:hover[b-kl3n846lol] {
    background: #f9fafb;
    cursor: pointer;
}

.card-row[b-kl3n846lol] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

.link-btn[b-kl3n846lol] {
    background: none;
    border: none;
    color: #2563eb;
    font-weight: 600;
}

/* Inputs */
.post-card input[b-kl3n846lol],
.post-card textarea[b-kl3n846lol],
.post-card select[b-kl3n846lol] {
    width: 100%;
    padding: 10px 12px;
    margin-top: 6px;
    margin-bottom: 14px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 14px;
}

.post-card textarea[b-kl3n846lol] {
    min-height: 100px;
    resize: vertical;
}

/* Phone */
.phone-row[b-kl3n846lol] {
    display: flex;
    gap: 10px;
}

    .phone-row select[b-kl3n846lol] {
        width: 90px;
    }

/* Photo Box */
.photo-box[b-kl3n846lol] {
    width: 100px;
    height: 100px;
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: #6b7280;
    cursor: pointer;
}

/* Buttons */
.post-buttons[b-kl3n846lol] {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.btn-primary[b-kl3n846lol] {
    flex: 1;
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
}
    .btn-primary:active[b-kl3n846lol] {
        background-color: rgba(var(--color-primary-rgb), 0.2);
    }

    .btn-primary:focus[b-kl3n846lol] {
        background-color: rgba(var(--color-primary-rgb), 0.15);
    }

.btn-outline[b-kl3n846lol] {
    flex: 1;
    background: white;
    border: 2px solid #7c4a2d;
    color: #7c4a2d;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
}

/* Mobile Optimization */
@media (max-width: 768px) {

    .postad-wrapper[b-kl3n846lol] {
        padding: 0px;
    }

    .postad-container[b-kl3n846lol] {
        max-width: 100%;
    }

    .form-footer[b-kl3n846lol] {
        flex-direction: column;
        gap: 10px;
    }

    .post-buttons[b-kl3n846lol] {
        flex-direction: column;
    }
}

/* Desktop Enhancement */
@media (min-width: 992px) {

    .postad-container[b-kl3n846lol] {
        background: #ffffff;
        padding: 5px;
        border-radius: 14px;
        box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    }
}
/* Section Labels */
.section-label[b-kl3n846lol] {
    font-size: 14px;
    font-weight: 600;
    margin: 16px 0 8px;
    display: block;
}

/* Currency Grid */
.currency-grid[b-kl3n846lol] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

/* Currency Card */
.currency-card[b-kl3n846lol] {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .currency-card:hover[b-kl3n846lol] {
        border-color: #7c4a2d;
    }

.currency-code[b-kl3n846lol] {
    display: block;
    font-weight: 600;
    font-size: 14px;
}

.currency-name[b-kl3n846lol] {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Active State */
.currency-card.active[b-kl3n846lol] {
    border: 2px solid #7c4a2d;
    background: #faf7f5;
}

/* Units Grid */
.unit-grid[b-kl3n846lol] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

/* Unit Card */
.unit-card[b-kl3n846lol] {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .unit-card:hover[b-kl3n846lol] {
        border-color: #7c4a2d;
    }

    .unit-card.active[b-kl3n846lol] {
        border: 2px solid #7c4a2d;
        background: #faf7f5;
    }

/* Mobile Optimization */
@media (max-width: 768px) {
    .currency-grid[b-kl3n846lol] {
        grid-template-columns: repeat(2, 1fr);
    }

    .unit-grid[b-kl3n846lol] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 992px) {
    .currency-grid[b-kl3n846lol] {
        grid-template-columns: repeat(3, 1fr);
    }

    .unit-grid[b-kl3n846lol] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Action Buttons Container */
.post-actions[b-kl3n846lol] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* Post Button */
.btn-post[b-kl3n846lol] {
    flex: 1;
    background: #7c4a2d;
    color: #ffffff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.2s ease;
}

    .btn-post:hover[b-kl3n846lol] {
        background: #6b3f25;
    }

/* Draft Button */
.btn-draft[b-kl3n846lol] {
    flex: 1;
    background: #ffffff;
    border: 2px solid #7c4a2d;
    color: #7c4a2d;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.2s ease;
}

    .btn-draft:hover[b-kl3n846lol] {
        background: #faf7f5;
    }

/* Mobile Layout */
@media (max-width: 768px) {
    .post-actions[b-kl3n846lol] {
        flex-direction: column;
    }
}

/* ===============================
   IMAGE UPLOAD
================================ */
.image-upload[b-kl3n846lol] {
    width: 100%;
    height: 100%;
    /*border: 2px dashed var(--color-border-default);*/
    /*border-radius: 12px;*/
    background: var(--color-bg-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

    .image-upload i[b-kl3n846lol] {
        color: var(--color-icon-default);
        font-size: 28px;
    }


/* =====================================
   MEDIA UPLOAD PREVIEW
===================================== */

.media-preview-list[b-kl3n846lol] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.media-item[b-kl3n846lol] {
    width: 160px;
    height: 160px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-white);
}

    .media-item img[b-kl3n846lol],
    .media-item video[b-kl3n846lol] {
        width: 100%;
        height: 100px;
        object-fit: cover;
        display: block;
    }

.av-footer[b-kl3n846lol] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    flex-shrink: 0;
    width: 850px;
    margin: auto;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

@media (max-width: 768px) {
    .av-footer[b-kl3n846lol] {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }
}

.btn-nav-back[b-kl3n846lol] {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}

    .btn-nav-back:hover[b-kl3n846lol] {
        background-color: var(--color-primary);
        color: #fff;
    }

.btn-nav-action[b-kl3n846lol] {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}

    .btn-nav-action:hover[b-kl3n846lol] {
        background-color: var(--color-primary);
        opacity: 0.9;
        color: #fff;
    }

.media-item[b-kl3n846lol] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-white);
}

    .media-item img[b-kl3n846lol],
    .media-item video[b-kl3n846lol] {
        width: 100%;
        height: 100px;
        object-fit: cover;
        display: block;
    }
.btn-outline-primary-custom[b-kl3n846lol] {
    background-color: #fff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    transition: all 0.2s ease-in-out;
}

    .btn-outline-primary-custom:hover[b-kl3n846lol] {
        background-color: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
    }
    .btn-outline-primary-custom:active[b-kl3n846lol] {
        background-color: rgba(var(--color-primary-rgb), 0.2);
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .btn-outline-primary-custom:focus[b-kl3n846lol] {
        background-color: rgba(var(--color-primary-rgb), 0.15);
        color: var(--color-primary);
        border-color: var(--color-primary);
        box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
    }
/* _content/RealOxy.Web.Core/Pages/PostNeedPage.razor.rz.scp.css */
.post-need-page[b-gsssms1awv] {
    background: #f8f6f3;
}

.post-need-scroll[b-gsssms1awv] {
    flex: 1;
}

.post-need__inner[b-gsssms1awv] {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

.post-need-back-btn[b-gsssms1awv] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e2ded9;
    background: #ffffff;
    color: #4a3b2c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.post-need-back-btn:hover[b-gsssms1awv] {
    background: #f0ebe4;
    border-color: #d1c8be;
    transform: translateX(-2px);
}

.post-need-card[b-gsssms1awv] {
    background: #ffffff;
    border: 1px solid #ede8e1;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(61, 46, 30, 0.06);
    overflow: hidden;
}

/* Modern Inputs */
.input-group-modern[b-gsssms1awv] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-gsssms1awv] {
    position: absolute;
    left: 14px;
    color: #9c8e80;
    font-size: 16px;
    pointer-events: none;
    z-index: 5;
}

.modern-input[b-gsssms1awv] {
    height: 44px;
    padding-left: 40px;
    padding-right: 14px;
    font-size: 14px;
    border-radius: 10px;
    border: 1.5px solid #e5dfd7;
    background: #fcfbf9;
    color: #2e261f;
    transition: all 0.2s ease;
}

.modern-input:focus[b-gsssms1awv],
.modern-textarea:focus[b-gsssms1awv],
.modern-select:focus[b-gsssms1awv] {
    background: #ffffff;
    border-color: #C9922E;
    box-shadow: 0 0 0 3px rgba(201, 146, 46, 0.15);
    outline: none;
}

.input-group-modern.is-invalid-border .modern-input[b-gsssms1awv] {
    border-color: #dc3545;
    background: #fffafa;
}

.input-group-modern.is-invalid-border .modern-input:focus[b-gsssms1awv] {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.budget-invalid-hint[b-gsssms1awv] {
    animation: fadeIn-b-gsssms1awv 0.2s ease-out;
}

@keyframes fadeIn-b-gsssms1awv {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}

.modern-textarea[b-gsssms1awv] {
    border-radius: 10px;
    border: 1.5px solid #e5dfd7;
    background: #fcfbf9;
    padding: 12px 14px;
    font-size: 14px;
    color: #2e261f;
    resize: vertical;
    transition: all 0.2s ease;
}

.modern-select[b-gsssms1awv] {
    height: 40px;
    border-radius: 8px;
    border: 1.5px solid #e5dfd7;
    background-color: #ffffff;
    font-size: 13.5px;
}

/* Category Chips */
.post-need__categories-wrapper[b-gsssms1awv] {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 2px;
}

.post-need__cats[b-gsssms1awv] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-chip[b-gsssms1awv] {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    border: 1.5px solid #e2ddd5;
    background: #f8f6f2;
    color: #4a3c2e !important;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.category-chip:hover[b-gsssms1awv] {
    border-color: #C9922E !important;
    background: #fdfbf7 !important;
    color: #C9922E !important;
    transform: translateY(-1px);
}

.category-chip--active[b-gsssms1awv] {
    background: linear-gradient(135deg, #C9922E, #A9761F) !important;
    border-color: #A9761F !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(201, 146, 46, 0.3);
}

.category-chip--active:hover[b-gsssms1awv] {
    background: linear-gradient(135deg, #C9922E, #A9761F) !important;
    border-color: #A9761F !important;
    color: #ffffff !important;
}

.subcategory-box[b-gsssms1awv] {
    background: #fbf9f6;
    border: 1px solid #ede8e1;
}

/* Photo Upload Grid */
.photos-grid[b-gsssms1awv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
}

.photo-thumb-card[b-gsssms1awv] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #ede8e1;
    background: #f8f6f2;
}

.photo-thumb-img[b-gsssms1awv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-thumb-delete-btn[b-gsssms1awv] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 53, 69, 0.9);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.photo-thumb-delete-btn:hover[b-gsssms1awv] {
    background: #dc3545;
    transform: scale(1.1);
}

.photo-upload-dropzone[b-gsssms1awv] {
    aspect-ratio: 1;
    border: 2px dashed #cfc5b8;
    border-radius: 12px;
    background: #fbf9f6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0;
}

.photo-upload-dropzone:hover[b-gsssms1awv] {
    border-color: #C9922E;
    background: #fefcf9;
    box-shadow: 0 4px 12px rgba(201, 146, 46, 0.12);
}

[b-gsssms1awv] input[type="file"] {
    display: none !important;
}

.photo-upload-content[b-gsssms1awv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #8c7e70;
}

.photo-upload-icon-circle[b-gsssms1awv] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0eae1;
    color: #C9922E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
}

.photo-upload-dropzone:hover .photo-upload-icon-circle[b-gsssms1awv] {
    background: #C9922E;
    color: #ffffff;
    transform: scale(1.08);
}

.photo-upload-label[b-gsssms1awv] {
    font-size: 11.5px;
    font-weight: 600;
}

/* Urgent Toggle Card */
.urgent-toggle-card[b-gsssms1awv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid #ede8e1;
    background: #fbf9f6;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0;
    user-select: none;
}

.urgent-toggle-card:hover[b-gsssms1awv] {
    border-color: #f1c40f;
    background: #fffdf5;
}

.urgent-toggle-card--active[b-gsssms1awv] {
    border-color: #f39c12;
    background: #fffcf0;
    box-shadow: 0 3px 12px rgba(243, 156, 18, 0.15);
}

.urgent-checkbox[b-gsssms1awv] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.urgent-checkbox:checked[b-gsssms1awv] {
    background-color: #f39c12;
    border-color: #f39c12;
}

.urgent-card-content[b-gsssms1awv] {
    flex: 1;
}

.urgent-card-title[b-gsssms1awv] {
    font-size: 14px;
    color: #3d2e1e;
}

/* Location Pill */
.location-pill[b-gsssms1awv] {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f4efe9;
    border: 1px solid #e8e2d9;
}

/* Submit Button */
.btn-post-need-submit[b-gsssms1awv] {
    height: 48px;
    background: linear-gradient(135deg, #C9922E, #A9761F);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(201, 146, 46, 0.35);
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-post-need-submit:hover:not(:disabled)[b-gsssms1awv] {
    background: linear-gradient(135deg, #d49c33, #b88225);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(201, 146, 46, 0.45);
    color: #ffffff;
}

.btn-post-need-submit:active:not(:disabled)[b-gsssms1awv] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(201, 146, 46, 0.3);
}

.btn-post-need-submit:disabled[b-gsssms1awv] {
    background: #d8c29d;
    box-shadow: none;
    cursor: not-allowed;
    color: #ffffff;
}
/* _content/RealOxy.Web.Core/Pages/SelectCountry.razor.rz.scp.css */

.btn-outline-primary-custom[b-7k4o273ii7] {
    background-color: #fff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    transition: all 0.2s ease-in-out;
}

    .btn-outline-primary-custom:hover[b-7k4o273ii7] {
        background-color: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
    }

    .btn-outline-primary-custom:active[b-7k4o273ii7] {
        background-color: rgba(var(--color-primary-rgb), 0.2);
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .btn-outline-primary-custom:focus[b-7k4o273ii7] {
        background-color: rgba(var(--color-primary-rgb), 0.15);
        color: var(--color-primary);
        border-color: var(--color-primary);
        box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
    }
/* _content/RealOxy.Web.Core/Pages/SelectLanguagePage.razor.rz.scp.css */
.btn-outline-primary-custom[b-s978r7bexn] {
    background-color: #fff;
    color: #674e34;
    border: 1px solid #674e34;
    transition: all 0.2s ease-in-out;
    border-radius: 12px;
}

.btn-outline-primary-custom:hover[b-s978r7bexn] {
    background-color: #674e34;
    color: #fff;
    border-color: #674e34;
}

.btn-outline-primary-custom:active[b-s978r7bexn] {
    background-color: rgba(103, 78, 52, 0.2);
    color: #674e34;
}

.card[b-s978r7bexn] {
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
/* _content/RealOxy.Web.Core/Pages/SellerProfilePage.razor.rz.scp.css */

.sp-page[b-pdi7fx5j2r] {
    background: #ffffff;
    padding: 20px 20px 60px;
    flex: 1;
}

/* ── Two-column grid ── */
.sp-grid[b-pdi7fx5j2r] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    margin: 0 auto;
    align-items: start;
}

/* ── Sidebar ── */
.sp-sidebar[b-pdi7fx5j2r] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 0;
    align-self: start;
}

.sp-sidebar-sticky[b-pdi7fx5j2r] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Main ── */
.sp-main[b-pdi7fx5j2r] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Section card ── */
.sp-section[b-pdi7fx5j2r] {
    background: #ffffff;
    border: 1px solid #f0e8e0;
    border-radius: var(--border-radius-banner);
    padding: 22px;
    box-shadow: 0 2px 16px rgba(103,78,52,0.06);
}

/* ── Section header ── */
.sp-section-header[b-pdi7fx5j2r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.sp-section-title[b-pdi7fx5j2r] {
    font-size: 16px;
    font-weight: 700;
    color: #1a1208;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sp-section-title i[b-pdi7fx5j2r] {
        color: var(--color-primary);
        font-size: 15px;
    }

.sp-section-count[b-pdi7fx5j2r] {
    font-size: 12px;
    font-weight: 500;
    color: #9e8878;
    background: #f5ede4;
    padding: 2px 10px;
    border-radius: 99px;
    margin-left: 2px;
}

/* ── Product grid ── */
.product-grid[b-pdi7fx5j2r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 6px;
    align-items: start;
    padding: 10px;
}

/* ── Load More button ── */
.sp-loadmore-wrap[b-pdi7fx5j2r] {
    display: flex;
    justify-content: center;
    padding: 20px 0 4px;
}

.sp-loadmore-btn[b-pdi7fx5j2r] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 28px;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: 99px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s, transform 0.14s, box-shadow 0.18s;
    box-shadow: 0 4px 16px rgba(103,78,52,0.22);
    letter-spacing: 0.2px;
}

    .sp-loadmore-btn i[b-pdi7fx5j2r] {
        font-size: 16px;
    }

    .sp-loadmore-btn:hover:not(:disabled)[b-pdi7fx5j2r] {
        background: #8b6b4a;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(103,78,52,0.28);
    }

    .sp-loadmore-btn:active:not(:disabled)[b-pdi7fx5j2r] {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(103,78,52,0.18);
    }

    .sp-loadmore-btn:disabled[b-pdi7fx5j2r] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Spinner inside load more */
.sp-btn-spinner[b-pdi7fx5j2r] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sp-spin-b-pdi7fx5j2r 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

@keyframes sp-spin-b-pdi7fx5j2r {
    to {
        transform: rotate(360deg);
    }
}

/* ── End of list ── */
.sp-list-end[b-pdi7fx5j2r] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0 4px;
}

.sp-list-end-line[b-pdi7fx5j2r] {
    flex: 1;
    height: 1px;
    background: #f0e8e0;
}

.sp-list-end-text[b-pdi7fx5j2r] {
    font-size: 12px;
    color: #c4b0a0;
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Reviews wrapper ── */
.sp-review-form-wrap[b-pdi7fx5j2r] {
    margin-bottom: 20px;
}

.sp-reviews-list[b-pdi7fx5j2r] {
    background: #fdfaf7;
    border: 1px solid #f0e8e0;
    border-radius: var(--border-radius-banner);
    padding: 0 16px;
}

/* ── No reviews ── */
.sp-no-reviews[b-pdi7fx5j2r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 0 16px;
    color: #c4b0a0;
}

    .sp-no-reviews i[b-pdi7fx5j2r] {
        font-size: 28px;
    }

    .sp-no-reviews p[b-pdi7fx5j2r] {
        font-size: 13px;
        margin: 0;
    }

/* ── Helpers ── */
.sp-center[b-pdi7fx5j2r] {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

/* ── Toast ── */
.sp-toast[b-pdi7fx5j2r] {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1208;
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 9999;
    animation: sp-fadein-b-pdi7fx5j2r 0.25s ease;
    white-space: nowrap;
}

    .sp-toast i[b-pdi7fx5j2r] {
        color: #22c55e;
        font-size: 15px;
    }

@keyframes sp-fadein-b-pdi7fx5j2r {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ── Delete Modal ── */
.sp-modal-overlay[b-pdi7fx5j2r] {
    position: fixed;
    inset: 0;
    background: rgba(26,18,8,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: sp-fadein-b-pdi7fx5j2r 0.2s ease;
}

.sp-modal-box[b-pdi7fx5j2r] {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 28px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(103,78,52,0.18);
    text-align: center;
    animation: sp-slidein-b-pdi7fx5j2r 0.22s ease;
}

@keyframes sp-slidein-b-pdi7fx5j2r {
    from {
        transform: translateY(14px) scale(0.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.sp-modal-icon[b-pdi7fx5j2r] {
    width: 52px;
    height: 52px;
    background: #fde8e8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 20px;
    color: #e05252;
}

.sp-modal-title[b-pdi7fx5j2r] {
    font-size: 18px;
    font-weight: 700;
    color: #1a1208;
    margin-bottom: 8px;
}

.sp-modal-desc[b-pdi7fx5j2r] {
    font-size: 13px;
    color: #9e8878;
    line-height: 1.6;
    margin-bottom: 22px;
}

.sp-modal-actions[b-pdi7fx5j2r] {
    display: flex;
    gap: 10px;
}

.sp-modal-cancel[b-pdi7fx5j2r] {
    flex: 1;
    padding: 11px;
    background: transparent;
    border: 1.5px solid #e8ddd5;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: #4a3728;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s;
}

    .sp-modal-cancel:hover[b-pdi7fx5j2r] {
        border-color: #9e8878;
    }

.sp-modal-delete[b-pdi7fx5j2r] {
    flex: 1;
    padding: 11px;
    background: #e05252;
    border: none;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s, transform 0.12s;
}

    .sp-modal-delete:hover[b-pdi7fx5j2r] {
        background: #c94444;
        transform: translateY(-1px);
    }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .product-grid[b-pdi7fx5j2r] {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 860px) {
    .sp-grid[b-pdi7fx5j2r] {
        grid-template-columns: 1fr;
    }

    .sp-sidebar[b-pdi7fx5j2r] {
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .sp-sidebar-sticky[b-pdi7fx5j2r] {
        position: static;
    }
}

@media (max-width: 480px) {
    .sp-page[b-pdi7fx5j2r] {
        padding: 12px 10px 48px;
    }

    .product-grid[b-pdi7fx5j2r] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sp-section[b-pdi7fx5j2r] {
        padding: 14px 12px;
    }
}
/* _content/RealOxy.Web.Core/Pages/SingleProductPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   SINGLE SCROLL ROOT
═══════════════════════════════════════════════════════════════ */
.product-scroll-root[b-omzhcdqphk] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE WRAPPER  — flex column, three zones stack vertically:
   [Zone 1] Full-width header
   [Zone 2] Two-column body (carousel | sidebar)
   [Zone 3] Full-width Related Products
═══════════════════════════════════════════════════════════════ */
.product-page[b-omzhcdqphk] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   ZONE 1 — FULL-WIDTH HEADER
═══════════════════════════════════════════════════════════════ */
.product-header-zone[b-omzhcdqphk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.product-title-row[b-omzhcdqphk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
}

.product-title-left[b-omzhcdqphk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.ad-title[b-omzhcdqphk] {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: #111;
}

.ad-stats-row[b-omzhcdqphk] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.ad-posted[b-omzhcdqphk] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    color: #888 !important;
    white-space: nowrap !important;
}

@media (max-width: 767.98px) {
    .ad-stats-row[b-omzhcdqphk] {
        gap: 10px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ad-stats-row[b-omzhcdqphk]::-webkit-scrollbar {
        display: none;
    }

    .ad-posted[b-omzhcdqphk] {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ACTION PANEL  (Save + Share)
═══════════════════════════════════════════════════════════════ */
.action-panel[b-omzhcdqphk] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: flex-start;
}

.action-btn[b-omzhcdqphk] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px 0 10px;
    height: 42px;
    border-radius: 50px;
    border: 1.5px solid #e0e0e0;
    background: #ffffff;
    color: #333;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

    .action-btn:hover[b-omzhcdqphk] {
        border-color: #bbb;
        box-shadow: 0 4px 16px rgba(0,0,0,.10);
        transform: translateY(-1px);
    }

    .action-btn:active[b-omzhcdqphk] {
        transform: translateY(0);
        box-shadow: none;
    }

.action-btn__icon[b-omzhcdqphk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f5f5f5;
    font-size: 14px;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}

.action-btn--active[b-omzhcdqphk] {
    border-color: #e91e63;
    color: #c2185b;
    background: #fff0f4;
}

    .action-btn--active .action-btn__icon[b-omzhcdqphk] {
        background: #fce4ec;
        color: #e91e63;
    }

    .action-btn--active:hover[b-omzhcdqphk] {
        background: #fce4ec;
        border-color: #c2185b;
        box-shadow: 0 4px 16px rgba(233,30,99,.18);
    }

.action-btn--share[b-omzhcdqphk] {
    border-color: #bbdefb;
    color: #1565c0;
}

    .action-btn--share .action-btn__icon[b-omzhcdqphk] {
        background: #e3f2fd;
        color: #1565c0;
    }

    .action-btn--share:hover[b-omzhcdqphk] {
        background: #e3f2fd;
        border-color: #1565c0;
        box-shadow: 0 4px 16px rgba(21,101,192,.15);
    }

@media (max-width: 575px) {
    .action-btn[b-omzhcdqphk] {
        padding: 0 10px;
        width: 42px;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ZONE 2 — TWO-COLUMN BODY GRID
   Left column: carousel, price, description
   Right column: seller, location, details
═══════════════════════════════════════════════════════════════ */
.product-body-grid[b-omzhcdqphk] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
}

@media (min-width: 768px) {
    .product-body-grid[b-omzhcdqphk] {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 24px;
    }
}

@media (min-width: 1200px) {
    .product-body-grid[b-omzhcdqphk] {
        grid-template-columns: minmax(0, 1fr) 370px;
        gap: 32px;
    }
}

@media (min-width: 1600px) {
    .product-body-grid[b-omzhcdqphk] {
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 40px;
    }
}

/* ── Left column ──────────────────────────────────────────── */
.product-col-left[b-omzhcdqphk] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ── Right sidebar ────────────────────────────────────────── */
.product-col-right[b-omzhcdqphk] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (min-width: 768px) {
    .product-col-right[b-omzhcdqphk] {
        /*
         * sticky keeps the sidebar visible while the left column scrolls.
         * When the user has scrolled past the bottom of the left column
         * (carousel + price + description), the sticky element releases
         * and Zone 3 (Related Products) scrolls into view — guaranteeing
         * the sidebar is ALWAYS fully read before Related Products appears.
         */
        position: sticky;
        top: 20px;
        align-self: start;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GENERIC CARD BOX
═══════════════════════════════════════════════════════════════ */
.product-card-box[b-omzhcdqphk] {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    padding: 12px 16px;
}

/* ═══════════════════════════════════════════════════════════════
   PRICE CARD
═══════════════════════════════════════════════════════════════ */
.price-card[b-omzhcdqphk] {
    background: #fff8f3;
    border: 1px solid var(--color-secondary);
    border-radius: 14px;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.price-label[b-omzhcdqphk] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-primary);
    opacity: 0.55;
}

.price-row[b-omzhcdqphk] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.price-value[b-omzhcdqphk] {
    font-size: 30px;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -.5px;
    line-height: 1;
}

.price-unit[b-omzhcdqphk] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT SECTION (description wrapper)
═══════════════════════════════════════════════════════════════ */
.product-section[b-omzhcdqphk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════════════════════════════ */
.section-header[b-omzhcdqphk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.section-title[b-omzhcdqphk] {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
    color: #111;
}

/* ═══════════════════════════════════════════════════════════════
   ZONE 3 — FULL-WIDTH RELATED PRODUCTS
   Sits outside the two-column grid as a direct child of
   .product-page. Unreachable until BOTH columns are scrolled
   past — sidebar content is always seen first.
═══════════════════════════════════════════════════════════════ */
.related-section[b-omzhcdqphk] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 2px solid #f0f0f0;
}

.related-list[b-omzhcdqphk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .related-list > [role="listitem"][b-omzhcdqphk] {
        min-width: 0;
    }

        .related-list > [role="listitem"] > *[b-omzhcdqphk] {
            width: 100%;
        }

/* ═══════════════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════════════ */
.product-breadcrumb .breadcrumb[b-omzhcdqphk] {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: #6c757d;
}

.product-breadcrumb .breadcrumb-item a[b-omzhcdqphk] {
    color: var(--color-primary, #333);
    text-decoration: none;
}

    .product-breadcrumb .breadcrumb-item a:hover[b-omzhcdqphk] {
        text-decoration: underline;
    }

.product-breadcrumb .breadcrumb-item.active[b-omzhcdqphk] {
    color: #6c757d;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   SEMANTIC RESETS
═══════════════════════════════════════════════════════════════ */
article.product-page[b-omzhcdqphk] {
    display: flex;
}

aside.product-col-right[b-omzhcdqphk] {
    display: flex;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE STICKY CONTACT BAR
═══════════════════════════════════════════════════════════════ */
.mobile-sticky-contact[b-omzhcdqphk] {
    position: sticky;
    bottom: 0;
    z-index: 1000;
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
    width: 100%;
    margin-top: 24px;
}

.contact-actions-bar[b-omzhcdqphk] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 12px 14px;
    gap: 10px;
    max-width: 600px;
}

.contact-btn[b-omzhcdqphk] {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

    .contact-btn:active[b-omzhcdqphk] {
        transform: scale(0.96);
        opacity: 0.8;
    }

    .contact-btn i[b-omzhcdqphk] {
        font-size: 16px;
        display: flex;
        align-items: center;
    }

.chat-btn[b-omzhcdqphk] {
    background: #f0f7ff;
    color: #0066ff;
}

.whatsapp-btn[b-omzhcdqphk] {
    background: #f0fff4;
    color: #25D366;
}

.call-btn[b-omzhcdqphk] {
    background: #fff2f0;
    color: #ff4444;
}

.email-btn[b-omzhcdqphk] {
    background: #fdf2ff;
    color: #9c27b0;
}

/* _content/RealOxy.Web.Core/Pages/SubscriptionPage.razor.rz.scp.css */
/* The layout's page-body is overflow-hidden, so this page must be its own scroll container —
   otherwise long content (plans + usage + history) is clipped and unreachable. */
.subscription-page[b-pzwvew4zzp] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: linear-gradient(180deg, #faf7f2 0%, #f3ede3 100%);
    padding: 1.5rem 1rem 3rem;
    color: #3d2c1e;
}

.sub-header[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 0 auto 1.5rem;
    text-align: center;
}

.sub-title[b-pzwvew4zzp] {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 0.4rem;
    color: #674e34;
}

.sub-subtitle[b-pzwvew4zzp] {
    margin: 0;
    font-size: 0.92rem;
    color: #8a7358;
}

.sub-loading[b-pzwvew4zzp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3rem 0;
    color: #8a7358;
}

.spinner[b-pzwvew4zzp] {
    width: 20px;
    height: 20px;
    border: 3px solid #e5d9c5;
    border-top-color: #674e34;
    border-radius: 50%;
    animation: subspin-b-pzwvew4zzp 0.8s linear infinite;
}

@keyframes subspin-b-pzwvew4zzp {
    to { transform: rotate(360deg); }
}

.sub-error[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 1rem auto;
    background: #fdecec;
    color: #b02a2a;
    border-radius: 14px;
    padding: 1rem 1.2rem;
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
}

.sub-error.inline[b-pzwvew4zzp] {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.sub-feedback-banner[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 0 auto 1.2rem;
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.sub-feedback-banner.error[b-pzwvew4zzp] {
    background: #fdecec;
    color: #b02a2a;
    border: 1px solid #f8c8c8;
}

.sub-feedback-banner.success[b-pzwvew4zzp] {
    background: #e8f7ee;
    color: #1d7a3f;
    border: 1px solid #c2ebd0;
}

.sub-feedback-close[b-pzwvew4zzp] {
    background: none;
    border: none;
    color: currentColor;
    font-size: 1.35rem;
    cursor: pointer;
    padding: 0 0.3rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.sub-feedback-close:hover[b-pzwvew4zzp] {
    opacity: 1;
}

.plan-card-error[b-pzwvew4zzp] {
    background: #fdecec;
    color: #b02a2a;
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    font-size: 0.84rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.25rem;
    line-height: 1.35;
}

.sub-success[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 1rem auto;
    background: #e8f7ee;
    color: #1d7a3f;
    border-radius: 14px;
    padding: 0.9rem 1.2rem;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.active-banner[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 0 auto 1.2rem;
    background: #674e34;
    color: #fff;
    border-radius: 16px;
    padding: 1rem 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 8px 20px rgba(103, 78, 52, 0.25);
}

.active-info[b-pzwvew4zzp] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.active-label[b-pzwvew4zzp] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

.active-plan[b-pzwvew4zzp] {
    font-weight: 700;
    font-size: 1.05rem;
}

.active-detail[b-pzwvew4zzp] {
    font-size: 0.82rem;
    opacity: 0.85;
}

/* ── Active plan usage (progress) ─────────────────────────────────────────── */

.usage-card[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 0 auto 1.2rem;
    background: #fff;
    border-radius: 16px;
    padding: 1rem 1.2rem;
    box-shadow: 0 6px 18px rgba(61, 44, 30, 0.07);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.usage-card.boost-note[b-pzwvew4zzp] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    background: #e8f7ee;
    color: #1d7a3f;
    font-size: 0.88rem;
}

.usage-row-top[b-pzwvew4zzp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.usage-label[b-pzwvew4zzp] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #8a7358;
}

.usage-count[b-pzwvew4zzp] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #674e34;
}

.progress-track[b-pzwvew4zzp] {
    height: 10px;
    background: #efe6d8;
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill[b-pzwvew4zzp] {
    height: 100%;
    background: linear-gradient(90deg, #674e34, #8a7358);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.usage-hint[b-pzwvew4zzp] {
    color: #8a7358;
    font-size: 0.78rem;
}

/* ── My usage by category ─────────────────────────────────────────────────── */

.section-title[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 1.8rem auto 0.3rem;
    font-size: 1rem;
    font-weight: 700;
    color: #674e34;
}

.section-sub[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 0 auto 0.9rem;
    font-size: 0.82rem;
    color: #8a7358;
    line-height: 1.45;
}

.usage-list[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.usage-row[b-pzwvew4zzp] {
    background: #fff;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 3px 10px rgba(61, 44, 30, 0.05);
}

.usage-row-main[b-pzwvew4zzp] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.usage-cat-name[b-pzwvew4zzp] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #3d2c1e;
}

.usage-cat-detail[b-pzwvew4zzp] {
    font-size: 0.78rem;
    color: #8a7358;
}

.usage-row-side[b-pzwvew4zzp] {
    white-space: nowrap;
}

.chip[b-pzwvew4zzp] {
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    display: inline-block;
}

.chip-free[b-pzwvew4zzp] {
    background: #e8f7ee;
    color: #1d7a3f;
}

.chip-plan[b-pzwvew4zzp] {
    background: #efe6d8;
    color: #6b5136;
}

.chip-paid[b-pzwvew4zzp] {
    background: #fdecec;
    color: #b02a2a;
}

/* ── Promo row with Apply + feedback ──────────────────────────────────────── */

.promo-row[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 1.6rem auto 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.promo-input-wrap[b-pzwvew4zzp] {
    display: flex;
    gap: 0.5rem;
}

.promo-input[b-pzwvew4zzp] {
    flex: 1;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border: 1.5px solid #e0d3bd;
    border-radius: 12px;
    font-size: 0.95rem;
    background: #fff;
    color: #3d2c1e;
}

.promo-input:focus[b-pzwvew4zzp] {
    outline: none;
    border-color: #674e34;
}

/* Scoped to .promo-input-wrap so it outranks the page-level
   `.btn-primary, .btn-secondary { width: 100% }` rule below. */
.promo-input-wrap .promo-apply-btn[b-pzwvew4zzp] {
    width: auto;
    flex-shrink: 0;
    padding: 0.75rem 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.promo-feedback[b-pzwvew4zzp] {
    font-size: 0.84rem;
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.promo-applied[b-pzwvew4zzp] {
    background: #e8f7ee;
    color: #1d7a3f;
}

.promo-error[b-pzwvew4zzp] {
    background: #fdecec;
    color: #b02a2a;
}

/* ── Promo price breakdown on plan cards ──────────────────────────────────── */

.price-original[b-pzwvew4zzp] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #8a7358;
    text-decoration: line-through;
}

.promo-breakdown[b-pzwvew4zzp] {
    font-size: 0.82rem;
    color: #1d7a3f;
    background: #e8f7ee;
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Category pricing reference (collapsible) ─────────────────────────────── */

.pricing-reference[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 1.8rem auto 0;
    background: #fff;
    border-radius: 14px;
    padding: 0.9rem 1.1rem;
    box-shadow: 0 3px 10px rgba(61, 44, 30, 0.05);
}

.pricing-reference summary[b-pzwvew4zzp] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #674e34;
    cursor: pointer;
}

.pricing-note[b-pzwvew4zzp] {
    font-size: 0.8rem;
    color: #8a7358;
    line-height: 1.45;
    margin: 0.7rem 0 0.9rem;
}

.pricing-table[b-pzwvew4zzp] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pricing-row[b-pzwvew4zzp] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.82rem;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: #faf7f2;
}

.pricing-row.pricing-sub[b-pzwvew4zzp] {
    margin-left: 1rem;
}

.pricing-cat[b-pzwvew4zzp] {
    color: #3d2c1e;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pricing-quota[b-pzwvew4zzp] {
    color: #6b5136;
    white-space: nowrap;
}

.pricing-price[b-pzwvew4zzp] {
    color: #1d7a3f;
    font-weight: 600;
    white-space: nowrap;
}

.plan-list[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.plan-card[b-pzwvew4zzp] {
    background: #fff;
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 6px 18px rgba(61, 44, 30, 0.07);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.plan-card.plan-current[b-pzwvew4zzp] {
    border: 2px solid #674e34;
}

.plan-top[b-pzwvew4zzp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.plan-title[b-pzwvew4zzp] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #3d2c1e;
}

.plan-desc[b-pzwvew4zzp] {
    margin: 0.25rem 0 0;
    font-size: 0.84rem;
    color: #8a7358;
}

.plan-price[b-pzwvew4zzp] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    white-space: nowrap;
}

.price-original[b-pzwvew4zzp] {
    font-size: 1rem;
    color: #a39281;
    text-decoration: line-through;
    font-weight: 500;
    margin-right: 0.35rem;
}

.price-amount[b-pzwvew4zzp] {
    font-size: 1.45rem;
    font-weight: 800;
    color: #674e34;
}

.price-currency[b-pzwvew4zzp] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #8a7358;
    text-transform: uppercase;
}

.plan-meta[b-pzwvew4zzp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.meta-chip[b-pzwvew4zzp] {
    font-size: 0.78rem;
    background: #f3ede3;
    color: #6b5136;
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.meta-chip.boost[b-pzwvew4zzp] {
    background: #e8f7ee;
    color: #1d7a3f;
}

.btn-primary[b-pzwvew4zzp],
.btn-secondary[b-pzwvew4zzp] {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.btn-primary[b-pzwvew4zzp] {
    background: #674e34;
    color: #fff;
}

.btn-primary:hover:not(:disabled)[b-pzwvew4zzp] {
    opacity: 0.92;
}

.btn-secondary[b-pzwvew4zzp] {
    background: #efe6d8;
    color: #6b5136;
}

.btn-primary:disabled[b-pzwvew4zzp],
.btn-secondary:disabled[b-pzwvew4zzp] {
    opacity: 0.55;
    cursor: not-allowed;
}

.history-title[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 2rem auto 0.8rem;
    font-size: 1rem;
    font-weight: 700;
    color: #674e34;
}

.history-list[b-pzwvew4zzp] {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-row[b-pzwvew4zzp] {
    background: #fff;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 3px 10px rgba(61, 44, 30, 0.05);
}

.history-main[b-pzwvew4zzp] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.history-plan[b-pzwvew4zzp] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #3d2c1e;
}

.history-dates[b-pzwvew4zzp] {
    font-size: 0.78rem;
    color: #8a7358;
}

.history-side[b-pzwvew4zzp] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    white-space: nowrap;
}

.history-status[b-pzwvew4zzp] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.status-active[b-pzwvew4zzp] {
    background: #e8f7ee;
    color: #1d7a3f;
}

.status-expired[b-pzwvew4zzp],
.status-superseded[b-pzwvew4zzp],
.status-cancelled[b-pzwvew4zzp] {
    background: #f0e9dd;
    color: #8a7358;
}

.history-price[b-pzwvew4zzp] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b5136;
}

/* Payment rows: amount breakdown + order reference under the net price. Order ids are long
   ObjectIds, so they must be allowed to wrap despite .history-side's white-space: nowrap. */
.payment-row .payment-breakdown[b-pzwvew4zzp] {
    display: block;
    font-size: 0.75rem;
    color: #8a7358;
}

.payment-row .payment-order[b-pzwvew4zzp] {
    display: block;
    font-size: 0.72rem;
    color: #a4937a;
    white-space: normal;
    word-break: break-all;
    text-align: right;
}
/* _content/RealOxy.Web.Core/Pages/UserLoginPage.razor.rz.scp.css */
/* ===============================
   LOGIN CARD
================================ */


.login-card[b-jjkydb2eh0] {
    width: 100%;
    max-width: 380px;
    background-color: var(--color-bg-white);
    box-shadow: 0 10px 30px var(--color-shadow-card);
}
/* ===============================
   LOGIN PAGE WRAPPER
================================ */
.login-page[b-jjkydb2eh0] {
    min-height: 90dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-default);
    padding: 16px;
}

.logo[b-jjkydb2eh0] {
    height: 50px;
    display: block;
    margin: 0 auto 24px auto;
}


.close-btn[b-jjkydb2eh0] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: 1px solid var(--color-border-default);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.login-visual[b-jjkydb2eh0] {
    position: relative;
}

    .login-visual img[b-jjkydb2eh0] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.login-visual-text[b-jjkydb2eh0] {
    position: absolute;
    bottom: 24px;
    left: 24px;
    color: #ffffff;
}

    .login-visual-text h2[b-jjkydb2eh0] {
        font-size: 28px;
        font-weight: 800;
        line-height: 1.2;
    }

.login-form[b-jjkydb2eh0] {
    padding: 32px;
    position: relative;
    border-radius: 12px;
}

    .login-form h3[b-jjkydb2eh0] {
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 24px;
        color: var(--color-text-primary);
    }

@media (max-width: 768px) {
    .login-card[b-jjkydb2eh0] {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .login-visual[b-jjkydb2eh0] {
        display: none;
    }
}
/* _content/RealOxy.Web.Core/PagesWithRoute/PostAd.razor.rz.scp.css */
/* _content/RealOxy.Web.Core/ProductSteps/AddressDetails.razor.rz.scp.css */
.vehicle-form-card[b-37m7ijgo04] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
}

.form-title[b-37m7ijgo04] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-37m7ijgo04] {
    display: flex;
    flex-direction: column;
    
    margin-bottom: 18px;
}

.form-row[b-37m7ijgo04] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-37m7ijgo04] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

/* INPUT */
.form-input[b-37m7ijgo04] {
    padding: 12px;
    padding-right: 90px; /* space for Change button */
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
    /* prevent text overflow */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clickable[b-37m7ijgo04] {
    cursor: pointer;
}

.input-wrapper[b-37m7ijgo04] {
    position: relative;
}

/* CHANGE BUTTON */
.change-btn[b-37m7ijgo04] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #a37c2d;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* FOOTER */
.form-footer[b-37m7ijgo04] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-37m7ijgo04] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-37m7ijgo04] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

/* CATEGORY POPUP BODY */
.category-body[b-37m7ijgo04] {
    flex: 1;
    overflow-y: auto;
    margin-top: 12px;
}

/* MOBILE */
@media (max-width: 600px) {

    .vehicle-form-card[b-37m7ijgo04] {
        padding: 16px;
    }

    .form-row[b-37m7ijgo04] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-37m7ijgo04] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-37m7ijgo04] {
        width: 100%;
    }

    .category-popup[b-37m7ijgo04] {
        width: 100%;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
    }
}

.vehicle-form-card[b-37m7ijgo04] {
    width: 100%;
    max-width: 700px;
    margin: auto;
}

@media (max-width:768px) {

    .vehicle-form-card[b-37m7ijgo04] {
        max-width: 100%;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/AnimalDetails.razor.rz.scp.css */
.vehicle-form-card[b-cnoub9iyca] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
}

.form-title[b-cnoub9iyca] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-cnoub9iyca] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-row[b-cnoub9iyca] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-cnoub9iyca] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-cnoub9iyca] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-cnoub9iyca] {
    cursor: pointer;
}

.input-wrapper[b-cnoub9iyca] {
    position: relative;
}

.change-btn[b-cnoub9iyca] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-cnoub9iyca] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-cnoub9iyca] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-cnoub9iyca] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}


/* MOBILE */

@media (max-width: 600px) {

    .vehicle-form-card[b-cnoub9iyca] {
        padding: 16px;
    }

    .form-row[b-cnoub9iyca] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-cnoub9iyca] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-cnoub9iyca] {
        width: 100%;
    }

    .category-popup[b-cnoub9iyca] {
        width: 100%;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
    }
}

.vehicle-form-card[b-cnoub9iyca] {
    width: 100%;
    max-width: 700px;
    margin: auto;
}

@media (max-width:768px) {

    .vehicle-form-card[b-cnoub9iyca] {
        max-width: 100%;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/ApartmentOrHouseDetails.razor.rz.scp.css */
.custom-checkbox[b-x5ye9zb2ii] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .custom-checkbox input[type="checkbox"][b-x5ye9zb2ii] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #674e34;
    }


    .custom-checkbox label[b-x5ye9zb2ii] {
        font-size: 15px;
        cursor: pointer;
    }

.vehicle-form-card[b-x5ye9zb2ii] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
    width: 100%;
}

.form-title[b-x5ye9zb2ii] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-x5ye9zb2ii] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-row[b-x5ye9zb2ii] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-x5ye9zb2ii] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-x5ye9zb2ii] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-x5ye9zb2ii] {
    cursor: pointer;
}

.input-wrapper[b-x5ye9zb2ii] {
    position: relative;
}

.change-btn[b-x5ye9zb2ii] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-x5ye9zb2ii] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-x5ye9zb2ii] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-x5ye9zb2ii] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.category-popup[b-x5ye9zb2ii] {
    background: white;
    width: 980px;
    max-width: 95vw;
    max-height: 80vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.category-header[b-x5ye9zb2ii] {
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .category-header h3[b-x5ye9zb2ii] {
        margin: 0;
        font-size: 1.1rem;
        color: #333;
    }

.category-body[b-x5ye9zb2ii] {
    flex: 1;
    overflow-y: auto;
}

.close-btn[b-x5ye9zb2ii] {
    border: none;
    background: #f5f5f5;
    font-size: 20px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #666;
    transition: all 0.2s;
    line-height: 1;
    padding-bottom: 4px;
}

    .close-btn:hover[b-x5ye9zb2ii] {
        background: #eee;
        color: #333;
    }

.amenities-display[b-x5ye9zb2ii] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.amenity-chip-small[b-x5ye9zb2ii] {
    padding: 4px 12px;
    background: #e2d6c2;
    border-radius: 16px;
    font-size: 12px;
    color: #7a6a4c;
    display: flex;
    align-items: center;
    gap: 4px;
}

.general-label[b-x5ye9zb2ii] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
}

/* FOOTER STYLES */

.category-footer[b-x5ye9zb2ii] {
    padding: 16px 24px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

.footer-actions[b-x5ye9zb2ii] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-clear[b-x5ye9zb2ii] {
    background: none;
    border: none;
    color: #d9534f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
}

    .btn-clear:hover[b-x5ye9zb2ii] {
        text-decoration: underline;
    }

.btn-cancel[b-x5ye9zb2ii] {
    background: #f8f9fa;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-cancel:hover[b-x5ye9zb2ii] {
        background: #e9ecef;
    }

.btn-done[b-x5ye9zb2ii] {
    background: #674e34;
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-done:hover[b-x5ye9zb2ii] {
        background: #8e6b27;
        box-shadow: 0 2px 8px rgba(163, 124, 45, 0.3);
    }

@media (max-width: 768px) {
    .vehicle-form-card[b-x5ye9zb2ii] {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .vehicle-form-card[b-x5ye9zb2ii] {
        padding: 16px;
    }

    .form-row[b-x5ye9zb2ii] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-x5ye9zb2ii] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-x5ye9zb2ii] {
        width: 100%;
    }

    .category-popup[b-x5ye9zb2ii] {
        width: 100%;
        left: 0;
        right: 0;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        z-index: 1000;
        box-sizing: border-box;
    }

    .category-footer[b-x5ye9zb2ii] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
        border-radius: 0;
        box-sizing: border-box;
    }

    .footer-actions[b-x5ye9zb2ii] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-cancel[b-x5ye9zb2ii], .btn-done[b-x5ye9zb2ii] {
        flex: 1;
        text-align: center;
        padding-left: 8px;
        padding-right: 8px;
        min-width: 0;
    }

    .btn-clear[b-x5ye9zb2ii] {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/BasicDetails.razor.rz.scp.css */
.vehicle-form-card[b-hlawrjaait] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
}

.form-title[b-hlawrjaait] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-hlawrjaait] {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.form-row[b-hlawrjaait] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-hlawrjaait] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-hlawrjaait] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-hlawrjaait] {
    cursor: pointer;
}

.input-wrapper[b-hlawrjaait] {
    position: relative;
}

.change-btn[b-hlawrjaait] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-hlawrjaait] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-hlawrjaait] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-hlawrjaait] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

/* POPUP */

.category-popup[b-hlawrjaait] {
    Width:940px;
    max-width: 95vw;
    height: 85vh;
    background: white;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
}


.category-header[b-hlawrjaait] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-btn[b-hlawrjaait] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: white;
    font-size: 18px;
}

.category-body[b-hlawrjaait] {
    flex: 1;
    overflow-y: auto;
    margin-top: 12px;
}
/* MOBILE */

@media (max-width: 600px) {

    .vehicle-form-card[b-hlawrjaait] {
        padding: 16px;
    }

    .form-row[b-hlawrjaait] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-hlawrjaait] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-hlawrjaait] {
        width: 100%;
    }

    @media (max-width: 600px) {

        .category-popup[b-hlawrjaait] {
            width: auto; /* remove fixed width */
            max-width: none; /* remove max-width restriction */
            height: 85vh;
            border-radius: 20px 20px 0 0;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
    }
}

.vehicle-form-card[b-hlawrjaait] {
    width: 100%;
    max-width: 700px;
    margin: auto;
}

@media (max-width:768px) {

    .vehicle-form-card[b-hlawrjaait] {
        max-width: 100%;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/ElectronicsDetails.razor.rz.scp.css */
.custom-checkbox[b-1klnncatax] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .custom-checkbox input[type="checkbox"][b-1klnncatax] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #674e34;
    }


    .custom-checkbox label[b-1klnncatax] {
        font-size: 15px;
        cursor: pointer;
    }

.vehicle-form-card[b-1klnncatax] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
    width: 100%;
}

.form-title[b-1klnncatax] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-1klnncatax] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-row[b-1klnncatax] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-1klnncatax] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-1klnncatax] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-1klnncatax] {
    cursor: pointer;
}

.input-wrapper[b-1klnncatax] {
    position: relative;
}

.change-btn[b-1klnncatax] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-1klnncatax] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-1klnncatax] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-1klnncatax] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.category-popup[b-1klnncatax] {
    background: white;
    width: 980px;
    max-width: 95vw;
    max-height: 80vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.category-header[b-1klnncatax] {
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .category-header h3[b-1klnncatax] {
        margin: 0;
        font-size: 1.1rem;
        color: #333;
    }

.category-body[b-1klnncatax] {
    flex: 1;
    overflow-y: auto;
}

.close-btn[b-1klnncatax] {
    border: none;
    background: #f5f5f5;
    font-size: 20px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #666;
    transition: all 0.2s;
    line-height: 1;
    padding-bottom: 4px;
}

    .close-btn:hover[b-1klnncatax] {
        background: #eee;
        color: #333;
    }

.amenities-display[b-1klnncatax] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.amenity-chip-small[b-1klnncatax] {
    padding: 4px 12px;
    background: #e2d6c2;
    border-radius: 16px;
    font-size: 12px;
    color: #7a6a4c;
    display: flex;
    align-items: center;
    gap: 4px;
}

.general-label[b-1klnncatax] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
}

/* FOOTER STYLES */

.category-footer[b-1klnncatax] {
    padding: 16px 24px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

.footer-actions[b-1klnncatax] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-clear[b-1klnncatax] {
    background: none;
    border: none;
    color: #d9534f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
}

    .btn-clear:hover[b-1klnncatax] {
        text-decoration: underline;
    }

.btn-cancel[b-1klnncatax] {
    background: #f8f9fa;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-cancel:hover[b-1klnncatax] {
        background: #e9ecef;
    }

.btn-done[b-1klnncatax] {
    background: #674e34;
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-done:hover[b-1klnncatax] {
        background: #543f2a;
        box-shadow: 0 2px 8px rgba(103, 78, 52, 0.3);
    }

@media (max-width: 768px) {
    .vehicle-form-card[b-1klnncatax] {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .vehicle-form-card[b-1klnncatax] {
        padding: 16px;
    }

    .form-row[b-1klnncatax] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-1klnncatax] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-1klnncatax] {
        width: 100%;
    }

    .category-popup[b-1klnncatax] {
        width: 100%;
        left: 0;
        right: 0;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        z-index: 1000;
        box-sizing: border-box;
    }

    .category-footer[b-1klnncatax] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
        border-radius: 0;
        box-sizing: border-box;
    }

    .footer-actions[b-1klnncatax] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-cancel[b-1klnncatax], .btn-done[b-1klnncatax] {
        flex: 1;
        text-align: center;
        padding-left: 8px;
        padding-right: 8px;
        min-width: 0;
    }

    .btn-clear[b-1klnncatax] {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/EquipmentDetails.razor.rz.scp.css */
.custom-checkbox[b-xcich2kw25] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .custom-checkbox input[type="checkbox"][b-xcich2kw25] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #674e34;
    }


    .custom-checkbox label[b-xcich2kw25] {
        font-size: 15px;
        cursor: pointer;
    }

.vehicle-form-card[b-xcich2kw25] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
    width: 100%;
}

.form-title[b-xcich2kw25] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-xcich2kw25] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-row[b-xcich2kw25] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-xcich2kw25] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-xcich2kw25] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-xcich2kw25] {
    cursor: pointer;
}

.input-wrapper[b-xcich2kw25] {
    position: relative;
}

.change-btn[b-xcich2kw25] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-xcich2kw25] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-xcich2kw25] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-xcich2kw25] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.category-popup[b-xcich2kw25] {
    background: white;
    width: 980px;
    max-width: 95vw;
    max-height: 80vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.category-header[b-xcich2kw25] {
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .category-header h3[b-xcich2kw25] {
        margin: 0;
        font-size: 1.1rem;
        color: #333;
    }

.category-body[b-xcich2kw25] {
    flex: 1;
    overflow-y: auto;
}

.close-btn[b-xcich2kw25] {
    border: none;
    background: #f5f5f5;
    font-size: 20px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #666;
    transition: all 0.2s;
    line-height: 1;
    padding-bottom: 4px;
}

    .close-btn:hover[b-xcich2kw25] {
        background: #eee;
        color: #333;
    }

.amenities-display[b-xcich2kw25] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.amenity-chip-small[b-xcich2kw25] {
    padding: 4px 12px;
    background: #e2d6c2;
    border-radius: 16px;
    font-size: 12px;
    color: #7a6a4c;
    display: flex;
    align-items: center;
    gap: 4px;
}

.general-label[b-xcich2kw25] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
}

/* FOOTER STYLES */

.category-footer[b-xcich2kw25] {
    padding: 16px 24px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

.footer-actions[b-xcich2kw25] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-clear[b-xcich2kw25] {
    background: none;
    border: none;
    color: #d9534f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
}

    .btn-clear:hover[b-xcich2kw25] {
        text-decoration: underline;
    }

.btn-cancel[b-xcich2kw25] {
    background: #f8f9fa;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-cancel:hover[b-xcich2kw25] {
        background: #e9ecef;
    }

.btn-done[b-xcich2kw25] {
    background: #674e34;
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-done:hover[b-xcich2kw25] {
        background: #543f2a;
        box-shadow: 0 2px 8px rgba(103, 78, 52, 0.3);
    }

@media (max-width: 768px) {
    .vehicle-form-card[b-xcich2kw25] {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .vehicle-form-card[b-xcich2kw25] {
        padding: 16px;
    }

    .form-row[b-xcich2kw25] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-xcich2kw25] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-xcich2kw25] {
        width: 100%;
    }

    .category-popup[b-xcich2kw25] {
        width: 100%;
        left: 0;
        right: 0;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        z-index: 1000;
        box-sizing: border-box;
    }

    .category-footer[b-xcich2kw25] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
        border-radius: 0;
        box-sizing: border-box;
    }

    .footer-actions[b-xcich2kw25] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-cancel[b-xcich2kw25], .btn-done[b-xcich2kw25] {
        flex: 1;
        text-align: center;
        padding-left: 8px;
        padding-right: 8px;
        min-width: 0;
    }

    .btn-clear[b-xcich2kw25] {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/EventDetails.razor.rz.scp.css */
.custom-checkbox[b-audtfw2blg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .custom-checkbox input[type="checkbox"][b-audtfw2blg] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #674e34;
    }


    .custom-checkbox label[b-audtfw2blg] {
        font-size: 15px;
        cursor: pointer;
    }

.vehicle-form-card[b-audtfw2blg] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
    width: 100%;
}

.form-title[b-audtfw2blg] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-audtfw2blg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-row[b-audtfw2blg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-audtfw2blg] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-audtfw2blg] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-audtfw2blg] {
    cursor: pointer;
}

.input-wrapper[b-audtfw2blg] {
    position: relative;
}

.change-btn[b-audtfw2blg] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-audtfw2blg] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-audtfw2blg] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-audtfw2blg] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.category-popup[b-audtfw2blg] {
    background: white;
    width: 980px;
    max-width: 95vw;
    max-height: 80vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.category-header[b-audtfw2blg] {
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .category-header h3[b-audtfw2blg] {
        margin: 0;
        font-size: 1.1rem;
        color: #333;
    }

.category-body[b-audtfw2blg] {
    flex: 1;
    overflow-y: auto;
}

.close-btn[b-audtfw2blg] {
    border: none;
    background: #f5f5f5;
    font-size: 20px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #666;
    transition: all 0.2s;
    line-height: 1;
    padding-bottom: 4px;
}

    .close-btn:hover[b-audtfw2blg] {
        background: #eee;
        color: #333;
    }

.amenities-display[b-audtfw2blg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.amenity-chip-small[b-audtfw2blg] {
    padding: 4px 12px;
    background: #e2d6c2;
    border-radius: 16px;
    font-size: 12px;
    color: #7a6a4c;
    display: flex;
    align-items: center;
    gap: 4px;
}

.general-label[b-audtfw2blg] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
}

/* FOOTER STYLES */

.category-footer[b-audtfw2blg] {
    padding: 16px 24px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

.footer-actions[b-audtfw2blg] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-clear[b-audtfw2blg] {
    background: none;
    border: none;
    color: #d9534f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
}

    .btn-clear:hover[b-audtfw2blg] {
        text-decoration: underline;
    }

.btn-cancel[b-audtfw2blg] {
    background: #f8f9fa;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-cancel:hover[b-audtfw2blg] {
        background: #e9ecef;
    }

.btn-done[b-audtfw2blg] {
    background: #674e34;
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-done:hover[b-audtfw2blg] {
        background: #543f2a;
        box-shadow: 0 2px 8px rgba(103, 78, 52, 0.3);
    }

@media (max-width: 768px) {
    .vehicle-form-card[b-audtfw2blg] {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .vehicle-form-card[b-audtfw2blg] {
        padding: 16px;
    }

    .form-row[b-audtfw2blg] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-audtfw2blg] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-audtfw2blg] {
        width: 100%;
    }

    .category-popup[b-audtfw2blg] {
        width: 100%;
        left: 0;
        right: 0;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        z-index: 1000;
        box-sizing: border-box;
    }

    .category-footer[b-audtfw2blg] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
        border-radius: 0;
        box-sizing: border-box;
    }

    .footer-actions[b-audtfw2blg] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-cancel[b-audtfw2blg], .btn-done[b-audtfw2blg] {
        flex: 1;
        text-align: center;
        padding-left: 8px;
        padding-right: 8px;
        min-width: 0;
    }

    .btn-clear[b-audtfw2blg] {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/FashionDetails.razor.rz.scp.css */
.custom-checkbox[b-jrckpg2eiw] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .custom-checkbox input[type="checkbox"][b-jrckpg2eiw] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #674e34;
    }


    .custom-checkbox label[b-jrckpg2eiw] {
        font-size: 15px;
        cursor: pointer;
    }

.vehicle-form-card[b-jrckpg2eiw] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
    width: 100%;
}

.form-title[b-jrckpg2eiw] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-jrckpg2eiw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-row[b-jrckpg2eiw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-jrckpg2eiw] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-jrckpg2eiw] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-jrckpg2eiw] {
    cursor: pointer;
}

.input-wrapper[b-jrckpg2eiw] {
    position: relative;
}

.change-btn[b-jrckpg2eiw] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-jrckpg2eiw] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-jrckpg2eiw] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-jrckpg2eiw] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.category-popup[b-jrckpg2eiw] {
    background: white;
    width: 980px;
    max-width: 95vw;
    max-height: 80vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.category-header[b-jrckpg2eiw] {
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .category-header h3[b-jrckpg2eiw] {
        margin: 0;
        font-size: 1.1rem;
        color: #333;
    }

.category-body[b-jrckpg2eiw] {
    flex: 1;
    overflow-y: auto;
}

.close-btn[b-jrckpg2eiw] {
    border: none;
    background: #f5f5f5;
    font-size: 20px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #666;
    transition: all 0.2s;
    line-height: 1;
    padding-bottom: 4px;
}

    .close-btn:hover[b-jrckpg2eiw] {
        background: #eee;
        color: #333;
    }

.amenities-display[b-jrckpg2eiw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.amenity-chip-small[b-jrckpg2eiw] {
    padding: 4px 12px;
    background: #e2d6c2;
    border-radius: 16px;
    font-size: 12px;
    color: #7a6a4c;
    display: flex;
    align-items: center;
    gap: 4px;
}

.general-label[b-jrckpg2eiw] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
}

/* FOOTER STYLES */

.category-footer[b-jrckpg2eiw] {
    padding: 16px 24px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

.footer-actions[b-jrckpg2eiw] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-clear[b-jrckpg2eiw] {
    background: none;
    border: none;
    color: #d9534f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
}

    .btn-clear:hover[b-jrckpg2eiw] {
        text-decoration: underline;
    }

.btn-cancel[b-jrckpg2eiw] {
    background: #f8f9fa;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-cancel:hover[b-jrckpg2eiw] {
        background: #e9ecef;
    }

.btn-done[b-jrckpg2eiw] {
    background: #674e34;
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-done:hover[b-jrckpg2eiw] {
        background: #543f2a;
        box-shadow: 0 2px 8px rgba(103, 78, 52, 0.3);
    }

@media (max-width: 768px) {
    .vehicle-form-card[b-jrckpg2eiw] {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .vehicle-form-card[b-jrckpg2eiw] {
        padding: 16px;
    }

    .form-row[b-jrckpg2eiw] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-jrckpg2eiw] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-jrckpg2eiw] {
        width: 100%;
    }

    .category-popup[b-jrckpg2eiw] {
        width: 100%;
        left: 0;
        right: 0;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        z-index: 1000;
        box-sizing: border-box;
    }

    .category-footer[b-jrckpg2eiw] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
        border-radius: 0;
        box-sizing: border-box;
    }

    .footer-actions[b-jrckpg2eiw] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-cancel[b-jrckpg2eiw], .btn-done[b-jrckpg2eiw] {
        flex: 1;
        text-align: center;
        padding-left: 8px;
        padding-right: 8px;
        min-width: 0;
    }

    .btn-clear[b-jrckpg2eiw] {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/FurnitureDetails.razor.rz.scp.css */
.vehicle-form-card[b-vzeeum7fc8] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
    width: 100%;
}

.form-title[b-vzeeum7fc8] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-vzeeum7fc8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-row[b-vzeeum7fc8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-vzeeum7fc8] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-vzeeum7fc8] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-vzeeum7fc8] {
    cursor: pointer;
}

.input-wrapper[b-vzeeum7fc8] {
    position: relative;
}

.change-btn[b-vzeeum7fc8] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-vzeeum7fc8] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-vzeeum7fc8] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-vzeeum7fc8] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.custom-checkbox[b-vzeeum7fc8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .custom-checkbox input[type="checkbox"][b-vzeeum7fc8] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #674e34;
    }


    .custom-checkbox label[b-vzeeum7fc8] {
        font-size: 15px;
        cursor: pointer;
    }

.category-popup[b-vzeeum7fc8] {
    background: white;
    width: 980px;
    max-width: 95vw;
    max-height: 80vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.category-header[b-vzeeum7fc8] {
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .category-header h3[b-vzeeum7fc8] {
        margin: 0;
        font-size: 1.1rem;
        color: #333;
    }

.category-body[b-vzeeum7fc8] {
    flex: 1;
    overflow-y: auto;
}

.close-btn[b-vzeeum7fc8] {
    border: none;
    background: #f5f5f5;
    font-size: 20px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #666;
    transition: all 0.2s;
    line-height: 1;
    padding-bottom: 4px;
}

    .close-btn:hover[b-vzeeum7fc8] {
        background: #eee;
        color: #333;
    }

.amenities-display[b-vzeeum7fc8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.amenity-chip-small[b-vzeeum7fc8] {
    padding: 4px 12px;
    background: #e2d6c2;
    border-radius: 16px;
    font-size: 12px;
    color: #7a6a4c;
    display: flex;
    align-items: center;
    gap: 4px;
}

.general-label[b-vzeeum7fc8] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
}

/* FOOTER STYLES */

.category-footer[b-vzeeum7fc8] {
    padding: 16px 24px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

.footer-actions[b-vzeeum7fc8] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-clear[b-vzeeum7fc8] {
    background: none;
    border: none;
    color: #d9534f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
}

    .btn-clear:hover[b-vzeeum7fc8] {
        text-decoration: underline;
    }

.btn-cancel[b-vzeeum7fc8] {
    background: #f8f9fa;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-cancel:hover[b-vzeeum7fc8] {
        background: #e9ecef;
    }

.btn-done[b-vzeeum7fc8] {
    background: #674e34;
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-done:hover[b-vzeeum7fc8] {
        background: #8e6b27;
        box-shadow: 0 2px 8px rgba(163, 124, 45, 0.3);
    }

@media (max-width: 768px) {
    .vehicle-form-card[b-vzeeum7fc8] {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .vehicle-form-card[b-vzeeum7fc8] {
        padding: 16px;
    }

    .form-row[b-vzeeum7fc8] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-vzeeum7fc8] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-vzeeum7fc8] {
        width: 100%;
    }

    .category-popup[b-vzeeum7fc8] {
        width: 100%;
        left: 0;
        right: 0;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        z-index: 1000;
        box-sizing: border-box;
    }

    .category-footer[b-vzeeum7fc8] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
        border-radius: 0;
        box-sizing: border-box;
    }

    .footer-actions[b-vzeeum7fc8] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-cancel[b-vzeeum7fc8], .btn-done[b-vzeeum7fc8] {
        flex: 1;
        text-align: center;
        padding-left: 8px;
        padding-right: 8px;
        min-width: 0;
    }

    .btn-clear[b-vzeeum7fc8] {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/GuestHouseDetails.razor.rz.scp.css */
.vehicle-form-card[b-1jeh167smz] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
    width: 100%;
}

.form-title[b-1jeh167smz] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-1jeh167smz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-row[b-1jeh167smz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-1jeh167smz] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-1jeh167smz] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-1jeh167smz] {
    cursor: pointer;
}

.input-wrapper[b-1jeh167smz] {
    position: relative;
}

.change-btn[b-1jeh167smz] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-1jeh167smz] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-1jeh167smz] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-1jeh167smz] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.custom-checkbox[b-1jeh167smz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .custom-checkbox input[type="checkbox"][b-1jeh167smz] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #674e34;
    }
    

    .custom-checkbox label[b-1jeh167smz] {
        font-size: 15px;
        cursor: pointer;
    }

.category-popup[b-1jeh167smz] {
    background: white;
    width: 980px;
    max-width: 95vw;
    max-height: 80vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.category-header[b-1jeh167smz] {
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .category-header h3[b-1jeh167smz] {
        margin: 0;
        font-size: 1.1rem;
        color: #333;
    }

.category-body[b-1jeh167smz] {
    flex: 1;
    overflow-y: auto;
}

.close-btn[b-1jeh167smz] {
    border: none;
    background: #f5f5f5;
    font-size: 20px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #666;
    transition: all 0.2s;
    line-height: 1;
    padding-bottom: 4px;
}

    .close-btn:hover[b-1jeh167smz] {
        background: #eee;
        color: #333;
    }

.amenities-display[b-1jeh167smz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.amenity-chip-small[b-1jeh167smz] {
    padding: 4px 12px;
    background: #e2d6c2;
    border-radius: 16px;
    font-size: 12px;
    color: #7a6a4c;
    display: flex;
    align-items: center;
    gap: 4px;
}

.general-label[b-1jeh167smz] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
}

/* FOOTER STYLES */

.category-footer[b-1jeh167smz] {
    padding: 16px 24px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

.footer-actions[b-1jeh167smz] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-clear[b-1jeh167smz] {
    background: none;
    border: none;
    color: #d9534f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
}

    .btn-clear:hover[b-1jeh167smz] {
        text-decoration: underline;
    }

.btn-cancel[b-1jeh167smz] {
    background: #f8f9fa;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-cancel:hover[b-1jeh167smz] {
        background: #e9ecef;
    }

.btn-done[b-1jeh167smz] {
    background: #674e34;
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-done:hover[b-1jeh167smz] {
        background: #8e6b27;
        box-shadow: 0 2px 8px rgba(163, 124, 45, 0.3);
    }

@media (max-width: 768px) {
    .vehicle-form-card[b-1jeh167smz] {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .vehicle-form-card[b-1jeh167smz] {
        padding: 16px;
    }

    .form-row[b-1jeh167smz] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-1jeh167smz] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-1jeh167smz] {
        width: 100%;
    }

    .category-popup[b-1jeh167smz] {
        width: 100%;
        left: 0;
        right: 0;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        z-index: 1000;
        box-sizing: border-box;
    }

    .category-footer[b-1jeh167smz] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
        border-radius: 0;
        box-sizing: border-box;
    }

    .footer-actions[b-1jeh167smz] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-cancel[b-1jeh167smz], .btn-done[b-1jeh167smz] {
        flex: 1;
        text-align: center;
        padding-left: 8px;
        padding-right: 8px;
        min-width: 0;
    }

    .btn-clear[b-1jeh167smz] {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/JobDetails.razor.rz.scp.css */
.vehicle-form-card[b-z1rubda53a] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
}

.form-title[b-z1rubda53a] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-z1rubda53a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-row[b-z1rubda53a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-z1rubda53a] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-z1rubda53a] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-z1rubda53a] {
    cursor: pointer;
}

.input-wrapper[b-z1rubda53a] {
    position: relative;
}

.change-btn[b-z1rubda53a] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-z1rubda53a] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-z1rubda53a] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-z1rubda53a] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}


/* MOBILE */

@media (max-width: 600px) {

    .vehicle-form-card[b-z1rubda53a] {
        padding: 16px;
    }

    .form-row[b-z1rubda53a] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-z1rubda53a] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-z1rubda53a] {
        width: 100%;
    }

    .category-popup[b-z1rubda53a] {
        width: 100%;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
    }
}

.vehicle-form-card[b-z1rubda53a] {
    width: 100%;
    max-width: 700px;
    margin: auto;
}

@media (max-width:768px) {

    .vehicle-form-card[b-z1rubda53a] {
        max-width: 100%;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/LandOrPlotDetails.razor.rz.scp.css */
.custom-checkbox[b-5yx0p5vog6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .custom-checkbox input[type="checkbox"][b-5yx0p5vog6] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #674e34;
    }


    .custom-checkbox label[b-5yx0p5vog6] {
        font-size: 15px;
        cursor: pointer;
    }

.vehicle-form-card[b-5yx0p5vog6] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
}

.form-title[b-5yx0p5vog6] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-5yx0p5vog6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-row[b-5yx0p5vog6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-5yx0p5vog6] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-5yx0p5vog6] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-5yx0p5vog6] {
    cursor: pointer;
}

.input-wrapper[b-5yx0p5vog6] {
    position: relative;
}

.change-btn[b-5yx0p5vog6] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-5yx0p5vog6] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-5yx0p5vog6] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-5yx0p5vog6] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}


/* MOBILE */

@media (max-width: 600px) {

    .vehicle-form-card[b-5yx0p5vog6] {
        padding: 16px;
    }

    .form-row[b-5yx0p5vog6] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-5yx0p5vog6] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-5yx0p5vog6] {
        width: 100%;
    }

    .category-popup[b-5yx0p5vog6] {
        width: 100%;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
    }
}

.vehicle-form-card[b-5yx0p5vog6] {
    width: 100%;
    max-width: 700px;
    margin: auto;
}

@media (max-width:768px) {

    .vehicle-form-card[b-5yx0p5vog6] {
        max-width: 100%;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/Media.razor.rz.scp.css */
.vehicle-form-card[b-aozx9cl87o] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    width: 100%;
    max-width: 700px;
    margin: auto;
}

.form-title[b-aozx9cl87o] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-aozx9cl87o] {
    display: flex;
    flex-direction: column;
    
    margin-bottom: 18px;
}

.form-row[b-aozx9cl87o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-aozx9cl87o] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-aozx9cl87o] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-aozx9cl87o] {
    cursor: pointer;
}

.input-wrapper[b-aozx9cl87o] {
    position: relative;
}

.change-btn[b-aozx9cl87o] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-aozx9cl87o] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-aozx9cl87o] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-aozx9cl87o] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

/* ── Media Section ── */
.media-preview-list[b-aozx9cl87o] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.media-item[b-aozx9cl87o] {
    flex-shrink: 0;
}

.image-preview[b-aozx9cl87o] {
    cursor: pointer;
    position: relative;
    width: 180px;
    height: 140px;
    border-radius: 0.75rem;
    border: 1px dashed #dee2e6;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .image-preview img[b-aozx9cl87o] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.image-upload[b-aozx9cl87o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.3px;
}

    .image-upload i[b-aozx9cl87o] {
        font-size: 28px;
    }

/* ── POPUP ── */
.category-popup[b-aozx9cl87o] {
    width: 820px;
    max-width: 95vw;
    height: 85vh;
    background: white;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
}

.category-header[b-aozx9cl87o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-btn[b-aozx9cl87o] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: white;
    font-size: 18px;
}

.category-body[b-aozx9cl87o] {
    flex: 1;
    overflow-y: auto;
    margin-top: 12px;
}

/* ── MOBILE ── */
@media (max-width: 600px) {
    .vehicle-form-card[b-aozx9cl87o] {
        padding: 16px;
    }

    .form-row[b-aozx9cl87o] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-aozx9cl87o] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-aozx9cl87o] {
        width: 100%;
    }

    .category-popup[b-aozx9cl87o] {
        width: 100%;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
    }

}

@media (max-width: 768px) {
    .vehicle-form-card[b-aozx9cl87o] {
        max-width: 100%;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/ProductBrandOrModelDetails.razor.rz.scp.css */


.vehicle-form-card[b-03iypjrlsd] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
}

.form-title[b-03iypjrlsd] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-03iypjrlsd] {
    display: flex;
    flex-direction: column;
   
    margin-bottom: 18px;
}

.form-row[b-03iypjrlsd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-03iypjrlsd] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-03iypjrlsd] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-03iypjrlsd] {
    cursor: pointer;
}

.input-wrapper[b-03iypjrlsd] {
    position: relative;
}

.change-btn[b-03iypjrlsd] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-03iypjrlsd] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-03iypjrlsd] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-03iypjrlsd] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}


/* MOBILE */

@media (max-width: 600px) {

    .vehicle-form-card[b-03iypjrlsd] {
        padding: 16px;
    }

    .form-row[b-03iypjrlsd] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-03iypjrlsd] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-03iypjrlsd] {
        width: 100%;
    }

    .category-popup[b-03iypjrlsd] {
        width: auto; /* remove fixed width */
        max-width: none; /* remove max-width restriction */
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

.vehicle-form-card[b-03iypjrlsd] {
    width: 100%;
    max-width: 700px;
    margin: auto;
}

@media (max-width:768px) {

    .vehicle-form-card[b-03iypjrlsd] {
        max-width: 100%;
    }
}

.category-popup[b-03iypjrlsd] {
    Width: 940px;
    max-width: 95vw;
    height: 85vh;
    background: white;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
}

.category-header[b-03iypjrlsd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-btn[b-03iypjrlsd] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: white;
    font-size: 18px;
}

.category-body[b-03iypjrlsd] {
    flex: 1;
    overflow-y: auto;
    margin-top: 12px;
}
/* _content/RealOxy.Web.Core/ProductSteps/ShopOrOfficeDetails.razor.rz.scp.css */
.custom-checkbox[b-zht298dan5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .custom-checkbox input[type="checkbox"][b-zht298dan5] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #674e34;
    }


    .custom-checkbox label[b-zht298dan5] {
        font-size: 15px;
        cursor: pointer;
    }

.vehicle-form-card[b-zht298dan5] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
    width: 100%;
}

.form-title[b-zht298dan5] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-zht298dan5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-row[b-zht298dan5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-zht298dan5] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-zht298dan5] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-zht298dan5] {
    cursor: pointer;
}

.input-wrapper[b-zht298dan5] {
    position: relative;
}

.change-btn[b-zht298dan5] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-zht298dan5] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-zht298dan5] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-zht298dan5] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.category-popup[b-zht298dan5] {
    background: white;
    width: 980px;
    max-width: 95vw;
    max-height: 80vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.category-header[b-zht298dan5] {
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .category-header h3[b-zht298dan5] {
        margin: 0;
        font-size: 1.1rem;
        color: #333;
    }

.category-body[b-zht298dan5] {
    flex: 1;
    overflow-y: auto;
}

.close-btn[b-zht298dan5] {
    border: none;
    background: #f5f5f5;
    font-size: 20px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #666;
    transition: all 0.2s;
    line-height: 1;
    padding-bottom: 4px;
}

    .close-btn:hover[b-zht298dan5] {
        background: #eee;
        color: #333;
    }

.amenities-display[b-zht298dan5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.amenity-chip-small[b-zht298dan5] {
    padding: 4px 12px;
    background: #e2d6c2;
    border-radius: 16px;
    font-size: 12px;
    color: #7a6a4c;
    display: flex;
    align-items: center;
    gap: 4px;
}

.general-label[b-zht298dan5] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
}

/* FOOTER STYLES */

.category-footer[b-zht298dan5] {
    padding: 16px 24px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

.footer-actions[b-zht298dan5] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-clear[b-zht298dan5] {
    background: none;
    border: none;
    color: #d9534f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
}

    .btn-clear:hover[b-zht298dan5] {
        text-decoration: underline;
    }

.btn-cancel[b-zht298dan5] {
    background: #f8f9fa;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-cancel:hover[b-zht298dan5] {
        background: #e9ecef;
    }

.btn-done[b-zht298dan5] {
    background: #674e34;
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-done:hover[b-zht298dan5] {
        background: #543f2a;
        box-shadow: 0 2px 8px rgba(103, 78, 52, 0.3);
    }

@media (max-width: 768px) {
    .vehicle-form-card[b-zht298dan5] {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .vehicle-form-card[b-zht298dan5] {
        padding: 16px;
    }

    .form-row[b-zht298dan5] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-zht298dan5] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-zht298dan5] {
        width: 100%;
    }

    .category-popup[b-zht298dan5] {
        width: 100%;
        left: 0;
        right: 0;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        z-index: 1000;
        box-sizing: border-box;
    }

    .category-footer[b-zht298dan5] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
        border-radius: 0;
        box-sizing: border-box;
    }

    .footer-actions[b-zht298dan5] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-cancel[b-zht298dan5], .btn-done[b-zht298dan5] {
        flex: 1;
        text-align: center;
        padding-left: 8px;
        padding-right: 8px;
        min-width: 0;
    }

    .btn-clear[b-zht298dan5] {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
}
/* _content/RealOxy.Web.Core/ProductSteps/VehicleDetails.razor.rz.scp.css */
.custom-checkbox[b-5pxg91fnv9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .custom-checkbox input[type="checkbox"][b-5pxg91fnv9] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #674e34;
    }


    .custom-checkbox label[b-5pxg91fnv9] {
        font-size: 15px;
        cursor: pointer;
    }
.vehicle-form-card[b-5pxg91fnv9] {
    background: #f7f3ec;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0d2b6;
    max-width: 750px;
    margin: auto;
}

.form-title[b-5pxg91fnv9] {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #a37c2d;
    margin-bottom: 18px;
    border-bottom: 1px solid #e2d6c2;
    padding-bottom: 8px;
}

.form-group[b-5pxg91fnv9] {
    display: flex;
    flex-direction: column;
   
    margin-bottom: 18px;
}

.form-row[b-5pxg91fnv9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label[b-5pxg91fnv9] {
    font-size: 11px;
    font-weight: 700;
    color: #7a6a4c;
    letter-spacing: 1px;
}

.form-input[b-5pxg91fnv9] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c9b48c;
    background: #fff;
    font-size: 13px;
    width: 100%;
}

.clickable[b-5pxg91fnv9] {
    cursor: pointer;
}

.input-wrapper[b-5pxg91fnv9] {
    position: relative;
}

.change-btn[b-5pxg91fnv9] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #7a6a4c;
    font-size: 12px;
    cursor: pointer;
}

.form-footer[b-5pxg91fnv9] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.cancel-btn[b-5pxg91fnv9] {
    background: none;
    border: none;
    color: #7a6a4c;
    font-size: 13px;
    cursor: pointer;
}

.continue-btn[b-5pxg91fnv9] {
    background: #a37c2d;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}


/* MOBILE */

@media (max-width: 600px) {

    .vehicle-form-card[b-5pxg91fnv9] {
        padding: 16px;
    }

    .form-row[b-5pxg91fnv9] {
        grid-template-columns: 1fr;
    }

    .form-footer[b-5pxg91fnv9] {
        flex-direction: column;
        gap: 10px;
    }

    .continue-btn[b-5pxg91fnv9] {
        width: 100%;
    }

    .category-popup[b-5pxg91fnv9] {
        width: auto !important;
        max-width: none !important; /* remove restriction */

        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

.vehicle-form-card[b-5pxg91fnv9] {
    width: 100%;
    max-width: 700px;
    margin: auto;
}

@media (max-width:768px) {

    .vehicle-form-card[b-5pxg91fnv9] {
        max-width: 100%;
    }
}
.category-popup[b-5pxg91fnv9] {
    Width: 940px;
    max-width: 95vw;
    height: 85vh;
    background: white;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
}

.category-header[b-5pxg91fnv9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-btn[b-5pxg91fnv9] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: white;
    font-size: 18px;
}

.category-body[b-5pxg91fnv9] {
    flex: 1;
    overflow-y: auto;
    margin-top: 12px;
}