/*@import url(https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,500;0,600;0,800;0,900;1,800&display=swap);*/
@charset "UTF-8";

/* ── Prevent unwanted mobile zoom ───────────────────────────────────── */
/* 1. Disable double-tap zoom globally (pinch-to-zoom still works)     */
html { touch-action: manipulation; }

/* 2. iOS Safari auto-zooms on focus when font-size < 16px.            */
/*    Force 16px on all interactive form elements at mobile widths.     */
@media screen and (max-width: 767.98px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="color"],
    input:not([type]),
    textarea,
    select,
    .form-control {
        font-size: 16px !important;
    }
}
/* ── End: prevent mobile zoom ───────────────────────────────────────── */


/* ============================================
   Sponsogo Font Stack
   - Outfit: Latin text (French, English)
   - Cairo: Arabic/RTL text
   Both are variable fonts (single WOFF2 file)
   ============================================ */

@font-face {
  font-family: 'Outfit';
  src: url('/public/webfonts/outfit/outfit.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cairo';
  src: url('/public/webfonts/cairo/cairo.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
                 U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
                 U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC,
                 U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

/* Arabic RTL — Cairo primary, Outfit fallback for Latin chars */
[dir="rtl"],
[lang="ar"],
.rtl {
  font-family: 'Cairo', 'Outfit', system-ui, -apple-system, sans-serif;
}
.btn.focus,
.btn:focus,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active,
textarea {
    box-shadow: none !important;
}
.close,
.notify {
    font-weight: 700;
}
body,
html {
    height: auto;
    width: 100%;
}
li {
    list-style: none;
}
button,
input,
textarea {
    outline: 0;
    border: none;
}
.page-link:focus,
button:active,
button:focus,
input,
select {
    outline: 0;
    box-shadow: none !important;
}
textarea {
    resize: none;
}
a {
    outline: 0;
}
body {
    font-family:
        Outfit,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    color: #0b0615;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800 !important;
}
a:hover {
    color: #272567;
    text-decoration: none !important;
}
.title {
    font-size: 1.5rem;
}
.popout {
    position: fixed;
    width: 100%;
    text-align: center;
    display: none;
    left: 0;
    top: 0;
    cursor: pointer;
    padding: 14px 10px;
    background: #000;
    color: #fff;
    font-size: 16px;
    z-index: 1100;
    overflow: hidden;
}

iframe {
    border: 0;
    outline: 0;
    width: 100% !important;
}
[type="search"] {
    outline-offset: -2px;
    -webkit-appearance: none;
}
.btn:hover:not(.e-none) {
    transform: translateY(-1px);
    box-shadow:
        0 7px 14px rgba(50, 50, 93, 0.1),
        0 3px 6px rgba(0, 0, 0, 0.08);
}
.carousel {
    margin-bottom: 4rem;
}

.carousel-item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 32rem;
}
.card {
    border: 1px solid rgba(111, 111, 111, 0.125);
}
.progress-xs {
    height: 8px;
}
input[type="file"] {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    outline: 0;
    cursor: inherit;
    font-size: 100px;
}
.text-featured {
    color: #ffc107 !important;
}
.popout-error {
    background: red !important;
}
.fa-spin {
    -webkit-animation: 1s linear infinite fa-spin !important;
    animation: 1s linear infinite fa-spin !important;
}
.content-locked {
    background: #ececec;
}
/* Cookie Consent Banner */
/* ---- Cookie Consent Bar (floating) ---- */
.cookie-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    width: min(94%, 540px);
    background: #fff;
    border: 1px solid rgba(109, 74, 232, 0.08);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow:
        0 16px 48px -12px rgba(40, 37, 103, 0.12),
        0 4px 12px -4px rgba(109, 74, 232, 0.06);
}
.cookie-bar.display-none {
    display: none;
}
.cookie-bar.cookie-bar-visible {
    animation: cookieBarSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.cookie-bar.cookie-bar-closing {
    animation: cookieBarSlideDown 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes cookieBarSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes cookieBarSlideDown {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(16px); }
}
.cookie-bar-text {
    flex: 1;
    font-size: 13px;
    color: #6b7084;
    line-height: 1.5;
    margin: 0;
}
.cookie-bar-text a {
    color: #282567;
    text-decoration: underline;
    text-decoration-color: rgba(40, 37, 103, 0.25);
    text-underline-offset: 2px;
    font-weight: 500;
    transition: text-decoration-color 0.2s;
}
.cookie-bar-text a:hover {
    text-decoration-color: #282567;
}
.cookie-bar-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.cookie-bar-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    border: none;
}
.bar-btn-reject {
    background: transparent;
    color: #6b7084;
}
.bar-btn-reject:hover {
    background: #f6f5fa;
    color: #282567;
}
.bar-btn-accept {
    background: #6D4AE8;
    color: #fff;
}
.bar-btn-accept:hover {
    background: #5B3ACC;
    box-shadow: 0 4px 12px rgba(109, 74, 232, 0.3);
    transform: translateY(-1px);
}
.bar-btn-accept:active {
    transform: translateY(0);
}
@media (max-width: 575.98px) {
    .cookie-bar {
        flex-wrap: wrap;
        bottom: 0;
        width: 100%;
        border-radius: 14px 14px 0 0;
        padding: 14px 16px;
        gap: 10px;
    }
    .cookie-bar-btns {
        width: 100%;
    }
    .cookie-bar-btn {
        flex: 1;
        text-align: center;
    }
}

/* ---- Cookie Settings Card (used on privacy page) ---- */
@keyframes cookieSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
.cookie-consent-card {
    background: #fff;
    border: 1px solid #e4e4ed;
    border-radius: 20px;
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.14),
        0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.cookie-consent-stripe {
    height: 3px;
    background: linear-gradient(90deg, #6d4ae8, #8b6ff0, #a78bfa);
}
.cookie-consent-body {
    padding: 20px 22px 18px;
}
.cookie-consent-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #ede8fd;
    border: 1px solid rgba(109, 74, 232, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d4ae8;
    flex-shrink: 0;
    margin-right: 10px;
}
.cookie-consent-icon svg {
    width: 18px;
    height: 18px;
}
.cookie-consent-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.cookie-consent-text {
    font-size: 13px;
    color: #4e4d63;
    line-height: 1.65;
    font-weight: 400;
}
.cookie-consent-text a {
    color: #6d4ae8;
    font-weight: 600;
    text-decoration: none;
}
.cookie-consent-text a:hover {
    text-decoration: underline;
}

/* Cookie type chips */
.cookie-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cookie-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid #e4e4ed;
    background: #f7f7fb;
    color: #4e4d63;
}
.cookie-chip-required {
    border-color: rgba(109, 74, 232, 0.18);
    background: #ede8fd;
    color: #6d4ae8;
}

/* Cookie toggle switches */
.cookie-toggles {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cookie-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f7f7fb;
    border: 1.5px solid #e4e4ed;
    border-radius: 10px;
    flex: 1;
    min-width: 140px;
    cursor: pointer;
    transition: all 0.18s;
    user-select: none;
}
.cookie-toggle-item.on {
    border-color: rgba(109, 74, 232, 0.18);
    background: #ede8fd;
}
.cookie-toggle-switch {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.cookie-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 99px;
    background: #e4e4ed;
    transition: background 0.2s;
}
.cookie-toggle-item.on .cookie-toggle-track {
    background: #6d4ae8;
}
.cookie-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-toggle-item.on .cookie-toggle-thumb {
    transform: translateX(16px);
}
.cookie-toggle-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #4e4d63;
}
.cookie-toggle-item.on .cookie-toggle-label {
    color: #6d4ae8;
}

/* Cookie action buttons */
.cookie-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.cookie-btn {
    padding: 10px 16px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.cookie-btn-refuse {
    border: 1.5px solid #e4e4ed;
    background: #f7f7fb;
    color: #4e4d63;
}
.cookie-btn-refuse:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.25);
}
.cookie-btn-custom {
    border: 1.5px solid rgba(109, 74, 232, 0.18);
    background: #ede8fd;
    color: #6d4ae8;
}
.cookie-btn-custom:hover {
    background: #ddd6fc;
}
.cookie-btn-accept {
    flex: 1;
    padding: 10px 20px;
    border: none;
    background: linear-gradient(135deg, #6d4ae8, #8b6ff0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(109, 74, 232, 0.3);
}
.cookie-btn-accept:hover {
    box-shadow: 0 6px 20px rgba(109, 74, 232, 0.44);
    transform: translateY(-1px);
    color: #fff;
}
.cookie-btn-accept svg {
    width: 13px;
    height: 13px;
}

/* Cookie confirmed toast */
.cookie-confirmed {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #ecfdf5;
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: 14px;
    padding: 12px 16px;
    display: none;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.15);
    animation: cookieSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10000;
}
.cookie-confirmed.show {
    display: flex;
}
.cookie-confirmed-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #059669;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cookie-confirmed-icon svg {
    width: 14px;
    height: 14px;
}
.cookie-confirmed-text {
    font-size: 13px;
    font-weight: 600;
    color: #059669;
}
.cookie-confirmed-manage {
    font-size: 12px;
    color: #059669;
    opacity: 0.7;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
}

/* Responsive (settings page + toast) */
@media (max-width: 575.98px) {
    .cookie-actions {
        flex-wrap: wrap;
    }
    .cookie-btn-accept {
        width: 100%;
    }
    .cookie-confirmed {
        bottom: 10px;
        right: 10px;
        left: 10px;
    }
}

/* RTL support */
[dir="rtl"] .cookie-confirmed {
    right: auto;
    left: 24px;
}
@media (max-width: 575.98px) {
    [dir="rtl"] .cookie-confirmed {
        left: 10px;
        right: 10px;
    }
}
/* Welcome Verify Modal */
.welcome-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 24px;
    backdrop-filter: blur(4px);
}
.welcome-modal {
    position: relative;
    background: #fff;
    border-radius: 28px;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.28),
        0 4px 16px rgba(0, 0, 0, 0.12);
    animation: welcomePopIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes welcomePopIn {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.welcome-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #6b6490;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.welcome-modal-close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #1a1530;
}
.welcome-modal-close svg {
    width: 14px;
    height: 14px;
}
[dir="rtl"] .welcome-modal-close {
    right: auto;
    left: 14px;
}
.welcome-modal-band {
    height: 6px;
    background: linear-gradient(90deg, #6d4ae8, #8b6ff0, #a78bfa);
}
.welcome-modal-confetti {
    position: relative;
    background: linear-gradient(160deg, #f5f2ff 0%, #fafafe 100%);
    padding: 44px 40px 32px;
    text-align: center;
    border-bottom: 1px solid #eeedf6;
    overflow: hidden;
}
.welcome-modal-confetti::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(
            circle,
            rgba(109, 74, 232, 0.12) 1.5px,
            transparent 1.5px
        ),
        radial-gradient(
            circle,
            rgba(109, 74, 232, 0.07) 1.5px,
            transparent 1.5px
        );
    background-size:
        28px 28px,
        14px 14px;
    background-position:
        0 0,
        14px 14px;
}
.welcome-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.welcome-spark {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: welcomeSparkFloat 3s ease-in-out infinite;
    opacity: 0;
}
.welcome-spark:nth-child(1) {
    background: #6d4ae8;
    top: 15%;
    left: 12%;
    animation-delay: 0s;
    width: 6px;
    height: 6px;
}
.welcome-spark:nth-child(2) {
    background: #a78bfa;
    top: 20%;
    right: 14%;
    animation-delay: 0.4s;
    width: 8px;
    height: 8px;
}
.welcome-spark:nth-child(3) {
    background: #34d399;
    top: 60%;
    left: 8%;
    animation-delay: 0.8s;
    width: 5px;
    height: 5px;
}
.welcome-spark:nth-child(4) {
    background: #f59e0b;
    top: 55%;
    right: 10%;
    animation-delay: 1.2s;
    width: 7px;
    height: 7px;
}
.welcome-spark:nth-child(5) {
    background: #6d4ae8;
    bottom: 20%;
    left: 20%;
    animation-delay: 1.6s;
    width: 5px;
    height: 5px;
}
.welcome-spark:nth-child(6) {
    background: #a78bfa;
    bottom: 25%;
    right: 18%;
    animation-delay: 2s;
    width: 6px;
    height: 6px;
}
@keyframes welcomeSparkFloat {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-12px) scale(1);
    }
    70% {
        opacity: 0.7;
        transform: translateY(-24px) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translateY(-36px) scale(0);
    }
}
.welcome-modal-illustration {
    position: relative;
    z-index: 1;
    width: 160px;
    height: 160px;
    margin: 0 auto 20px;
    animation: welcomePopIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.welcome-modal-illustration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.welcome-modal-title {
    position: relative;
    z-index: 1;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0e0e1c;
    margin-bottom: 8px;
    animation: welcomeFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.welcome-modal-sub {
    position: relative;
    z-index: 1;
    font-size: 14px;
    color: #5a597a;
    line-height: 1.6;
    font-weight: 500;
    animation: welcomeFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes welcomeFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.welcome-info-pills {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
    animation: welcomeFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.welcome-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(109, 74, 232, 0.08);
    border: 1px solid rgba(109, 74, 232, 0.15);
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    color: #6d4ae8;
}
.welcome-info-pill svg {
    width: 12px;
    height: 12px;
}
.welcome-modal-footer {
    padding: 28px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: welcomeFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}
.welcome-btn-primary {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #6d4ae8, #8b6ff0);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(109, 74, 232, 0.34);
    letter-spacing: 0.01em;
    text-decoration: none;
}
.welcome-btn-primary:hover {
    box-shadow: 0 8px 28px rgba(109, 74, 232, 0.48);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}
.welcome-btn-primary:active {
    transform: scale(0.98);
}
.welcome-btn-primary svg {
    width: 16px;
    height: 16px;
}
.welcome-btn-secondary {
    width: 100%;
    padding: 13px;
    border: 1.5px solid #e4e4ed;
    background: #f7f7fb;
    border-radius: 14px;
    color: #5a597a;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    text-decoration: none;
    display: block;
}
.welcome-btn-secondary:hover {
    background: #eeedf6;
    color: #0e0e1c;
    text-decoration: none;
}

/* ==============================
   SweetAlert Redesign (Welcome Modal Style)
   ============================== */

/* Overlay - backdrop blur like welcome modal */
.sweet-overlay {
    background: rgba(26, 26, 46, 0.7) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Main modal container */
.sweet-alert {
    background: #fff !important;
    border-radius: 28px !important;
    width: 100% !important;
    max-width: 420px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.28),
        0 4px 16px rgba(0, 0, 0, 0.12) !important;
    /* Override fixed positioning with flexbox centering */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    height: fit-content !important;
    display: block !important;
}

/* Animation override */
.showSweetAlert[data-animation="pop"] {
    -webkit-animation: swalPopIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    animation: swalPopIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes swalPopIn {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Purple gradient band at top */
.sweet-alert::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(90deg, #6d4ae8, #8b6ff0, #a78bfa);
    position: relative;
    z-index: 1;
}

/* Content area with confetti-style background */
.sweet-alert::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: calc(100% - 6px);
    background: linear-gradient(160deg, #f5f2ff 0%, #fafafe 100%);
    background-image:
        radial-gradient(
            circle,
            rgba(109, 74, 232, 0.08) 1.5px,
            transparent 1.5px
        ),
        radial-gradient(
            circle,
            rgba(109, 74, 232, 0.04) 1.5px,
            transparent 1.5px
        );
    background-size:
        28px 28px,
        14px 14px;
    background-position:
        0 0,
        14px 14px;
    border-radius: 0 0 28px 28px;
    z-index: 0;
    pointer-events: none;
}

/* All content needs z-index above the background */
.sweet-alert .sa-icon,
.sweet-alert h2,
.sweet-alert p,
.sweet-alert fieldset,
.sweet-alert .sa-button-container,
.sweet-alert .sa-confirm-button-container,
.sweet-alert button {
    position: relative;
    z-index: 1;
}

/* Hide built-in type icons (replaced by SVG illustrations) */
.sweet-alert .sa-icon.sa-error,
.sweet-alert .sa-icon.sa-warning,
.sweet-alert .sa-icon.sa-info,
.sweet-alert .sa-icon.sa-success {
    display: none !important;
}

/* Custom SVG illustration (imageUrl) */
.sweet-alert .sa-icon.sa-custom {
    width: 150px !important;
    height: 150px !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 36px auto 16px !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    animation: swalFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* Title styling */
.sweet-alert h2 {
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    color: #0e0e1c !important;
    margin: 8px 32px 8px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    animation: swalFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

/* Text/description styling */
.sweet-alert p {
    font-size: 14px !important;
    color: #5a597a !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    margin: 0 32px !important;
    padding: 0 0 4px !important;
    animation: swalFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

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

/* Button area - footer-like separation */
.sweet-alert .sa-button-container,
.sweet-alert .sa-confirm-button-container {
    display: inline-block;
}

/* Confirm button - primary gradient style */
.sweet-alert button.confirm {
    background: linear-gradient(135deg, #6d4ae8, #8b6ff0) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(109, 74, 232, 0.34) !important;
    letter-spacing: 0.01em;
    transition: all 0.18s !important;
    margin: 20px 8px 28px !important;
    min-width: 120px;
    animation: swalFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.sweet-alert button.confirm:hover {
    background: linear-gradient(135deg, #5e3dd4, #7c5fe6) !important;
    box-shadow: 0 8px 28px rgba(109, 74, 232, 0.48) !important;
    transform: translateY(-1px);
}

.sweet-alert button.confirm:active {
    transform: scale(0.98) !important;
}

/* Cancel button - secondary outline style */
.sweet-alert button.cancel {
    background: #f7f7fb !important;
    color: #5a597a !important;
    border: 1.5px solid #e4e4ed !important;
    border-radius: 14px !important;
    padding: 14px 32px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    margin: 20px 8px 28px !important;
    min-width: 120px;
    animation: swalFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.sweet-alert button.cancel:hover {
    background: #eeedf6 !important;
    color: #0e0e1c !important;
}

/* Loading spinner styling */
.sweet-alert button.confirm[disabled] {
    opacity: 0.7 !important;
}

.sweet-alert .la-ball-fall {
    color: #fff !important;
}

/* Mobile responsiveness */
@media all and (max-width: 575.98px) {
    .sweet-alert {
        max-width: calc(100% - 48px) !important;
        left: 24px !important;
        right: 24px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sweet-alert h2 {
        font-size: 20px !important;
        margin: 8px 24px 8px !important;
    }

    .sweet-alert p {
        margin: 0 24px !important;
    }

    .sweet-alert button.confirm,
    .sweet-alert button.cancel {
        padding: 13px 24px !important;
        margin: 16px 6px 24px !important;
        min-width: 100px;
    }
}

/* ==============================
   End SweetAlert Redesign
   ============================== */

.sidebard_edit {
    position: fixed;
    z-index: 999;
    border-right: 2px solid #c8bdbd75;
    height: 100%;
    width: 236px;
    display: flex;
    flex-direction: column;
}

/* ── Global sidebar offset for authenticated layout ──────────────────
   Matches the three sidebar states defined in app.blade.php:
   · ≥ 1271px  → full sidebar 236px
   · 993–1270px → collapsed sidebar 75px
   · ≤ 992px   → sidebar hidden (no offset)
   ──────────────────────────────────────────────────────────────────── */
@media (min-width: 1271px) {
    body.no-topbar:not(.no-sidebar-offset) main {
        margin-inline-start: 236px;
    }
}
@media (min-width: 992px) and (max-width: 1270px) {
    body.no-topbar:not(.no-sidebar-offset) main {
        margin-inline-start: 75px;
    }
}
.sidebard_edit > .menu-left-home {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.sidebar-nav-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

/* User card pinned to bottom of sidebar */
.menu-left-home .menuDrop {
    margin-top: auto;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    padding: 0.25rem 0 0;
    background: inherit;
}

/* ══ Desktop sidebar — adaptive spacing for short viewports ══ */
@media (min-width: 992px) and (max-height: 740px) {
    .menu-left-home > li:first-child { margin-bottom: 0.5rem !important; }
    .menu-left-home .sidebarFirst { padding: 6px 10px !important; margin-bottom: 0.5rem !important; }
    .menu-left-home .create-hub-desktop-wrap { margin-bottom: 0.25rem !important; }
    .sidebar-nav-scroll li { margin-bottom: 0 !important; }
}
@media (min-width: 992px) and (max-height: 600px) {
    .menu-left-home > li:first-child { margin-bottom: 0.25rem !important; }
    .menu-left-home .sidebarFirst { padding: 4px 8px !important; margin-bottom: 0.25rem !important; }
    .menu-left-home .create-hub-desktop-wrap { margin-bottom: 0 !important; }
    .sidebar-nav-scroll li { margin-bottom: 0 !important; }
    .sidebar-nav-scroll li a { padding-top: 6px !important; padding-bottom: 6px !important; }
    .menu-left-home .menuDrop { padding: 0.25rem 0; }
    .menu-left-home .menuDrop .profileMenu { padding: 6px 10px !important; }
}
.sidebar-nav-scroll::-webkit-scrollbar {
    width: 0.286rem;
}
.sidebar-nav-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav-scroll::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 0.143rem;
}
.readmore-js-collapsed:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: hsla(0, 0%, 100%, 0);
    background-image: linear-gradient(hsla(0, 0%, 100%, 0), #fff 95%);
    z-index: 40;
}
.text-word-break {
    word-break: break-word;
}
.actionDelete {
    cursor: pointer;
}
a.active > i.fas.fa-heart {
    color: red;
}
.li-group {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.notify {
    z-index: 10;
    position: absolute;
    top: -8px;
    right: -10px;
    width: 29px;
    height: 18px;
    height: 18px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    background-color: #fc5a5a;
    color: white;
    font-size: 11px;
    font-weight: 500;
    opacity: 1;
}
@media only screen and (max-width: 1270px) {
    .notify {
        top: 0px;
        right: -12px;
        width: 24px;
        height: 15px;
        line-height: 14px;
        text-align: center;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        background-color: #fc5a5a;
    }
}
@media only screen and (max-width: 991.98px) {
    .notify {
        top: 5px;
        right: -5px;
        height: 19px;
        line-height: 20px;
    }
}
#noti_msg,
#noti_notifications,
.display-none {
    display: none;
}
.c-pointer {
    cursor: pointer !important;
}
@keyframes ellipsis {
    0% {
        width: 2px;
    }
    to {
        width: 16px;
    }
}
.verified {
    color: #3897f0;
}
.border-dashed {
    border-style: dashed !important;
}
.StripeElement {
    box-sizing: border-box;
    height: calc(2.75rem + 2px);
    padding: 14px 18px;
    background-color: #fff;
    transition: box-shadow 0.15s;
    border: 1px solid #ced4da;
    margin-bottom: 10px;
    border-radius: 0.25rem;
}
.blocked {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 300;
}
.StripeElement--focus {
    border-color: #3c8dbc;
}
.StripeElement--invalid {
    border-color: #fa755a;
}
.avatar-modal {
    border: 3px solid #fff;
    background-color: #fff;
}
.modal-offset {
    margin-top: -90px;
}

.user-nav-info .sidebar_men_icon {
    display: block;
}
.blocked span {
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-search {
    color: #ddd;
    background: 0 0;
    position: absolute;
    right: 0;
    cursor: pointer;
    outline: 0;
    border: none;
}
button:active.button-search,
button:focus.button-search,
button:hover.button-search {
    box-shadow: none !important;
    background: 0 0 !important;
    color: inherit !important;
    transform: none;
}
.dd-menu-user:before {
    position: absolute;
    width: 0;
    height: 0;
    vertical-align: middle;
    content: "";
    bottom: -5px;
    border-top: 0.4em solid;
    border-right: 0.4em solid transparent;
    border-left: 0.4em solid transparent;
    color: #fff;
    display: inline-block;
    left: 20px;
}
.p-nav a.nav-link:not(.btn) {
    color: #fff;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
    transition: 0.2s linear;
}
.nav-link.search:active,
.nav-link.search:focus,
.nav-link.search:hover,
.nav-link:active:not(.search):not(.btn):not(.link-nav),
.nav-link:focus:not(.search):not(.btn):not(.link-nav),
.nav-link:hover:not(.search):not(.btn):not(.link-nav),
.page-link:hover {
    color: #fff;
}
.link-scroll a.nav-link:not(.btn) {
    color: #3a3a3a;
}
.link-scroll a.nav-link:active:not(.search):not(.btn),
.link-scroll a.nav-link:focus:not(.search):not(.btn),
.link-scroll a.nav-link:hover:not(.search):not(.btn) {
    color: #969696;
}
.dropdown-menu {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: 0;
    box-shadow: 0 5px 50px 0 rgba(0, 0, 0, 0.15);
    border-radius: 0.125rem;
    -webkit-transition: 150ms linear;
    -moz-transition: 150ms linear;
    -o-transition: 150ms linear;
    -ms-transition: 150ms linear;
    transition: 150ms linear;
    font-size: 13px;
    line-height: 18px;
}
.dropdown-toggle::after {
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
}
.sticky-top {
    z-index: 998 !important;
}
.dropdown .dropdown-menu {
    -webkit-transform: translate3d(0, -25px, 0);
    -moz-transform: translate3d(0, -25px, 0);
    -o-transform: translate3d(0, -25px, 0);
    -ms-transform: translate3d(0, -25px, 0);
    transform: translate3d(0, -25px, 0);
    visibility: hidden;
    opacity: 0;
    display: block;
}
.dropdown-menu.open,
.dropdown.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.dropdown.show .dropdown-menu {
    -webkit-transform: translate3d(0, 7px, 0);
    -moz-transform: translate3d(0, 7px, 0);
    -o-transform: translate3d(0, 7px, 0);
    -ms-transform: translate3d(0, 7px, 0);
    transform: translate3d(0, 7px, 0);
}
.dropdown-toggle::after {
    margin-left: 0.1em;
    transition: 0.2s linear;
}
.dropdown-toggle[aria-expanded="true"]:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.dropdown-toggle::after,
.dropup .dropdown-toggle::after {
    border: none;
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-left: 4px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
}
.navbar .nav-item {
    margin-left: 2px;
    margin-right: 2px;
}
.sidebar-overlay .navbar .navbar-collapse {
    z-index: 100;
}
@media (max-width: 1199.98px) {
    .follomylink .clr-field {
        width: 100% !important;
        margin-bottom: 10px;
    }
    .follomylink .clr-field input {
        width: 100% !important;
    }
    .follomylink {
        text-align: center;
    }
}
@media (max-width: 991.98px) {
    .follomylink .clr-field {
        width: 100% !important;
        margin-bottom: 10px;
    }
    .follomylink .clr-field input {
        width: 100% !important;
    }
    .follomylink {
        text-align: center;
    }
    .mobile {
        display: none;
    }
    .navbar .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        left: 100vw !important;
        right: auto !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        min-height: 100vh !important;
        background: #ffffff !important;
        z-index: 99999999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        -webkit-transition: left 0.3s ease-out;
        -o-transition: left 0.3s ease-out;
        transition: left 0.3s ease-out;
        padding: 15px 15px 100px 15px !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Remove all Bootstrap collapse styles on mobile menu */
    .navbar .navbar-collapse.collapse:not(.show) {
        display: block !important;
    }
    .dd-menu-user:before {
        border: none;
    }
    .item h5 {
        line-height: 1.2 !important;
    }
    .link-border,
    .list-social {
        float: none !important;
    }
    .copyright {
        text-align: center;
    }
    .navbar .navbar-collapse.show {
        left: 0 !important;
    }
    .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:not(.btn) {
        color: #000;
    }
    .navbar .navbar-nav .nav-item {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.25rem;
    }
    .navbar .navbar-nav .nav-item .nav-link {
        display: block;
        padding: 0.625rem;
    }
    .dropdown .dropdown-menu {
        display: none;
    }
    .dropdown-menu.open,
    .dropdown.show .dropdown-menu {
        display: block;
        box-shadow: none;
    }
    .home,
    .homepage {
        padding-bottom: 50px !important;
    }
    .homepage {
        padding-top: 100px !important;
    }
    body.no-topbar .homepage {
        padding-top: 10px !important;
    }
    .img-post {
        height: 250px !important;
    }
    .btn-profile,
    .w-small-100 {
        width: 100%;
    }
    .first {
        order: 1;
    }
    .second {
        order: 2;
    }
    .btn-profile {
        margin-bottom: 0.5rem !important;
    }
    .navbar-collapse .navbar-toggler {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        padding: 0;
        cursor: pointer;
    }
    .navbar-collapse .navbar-toggler span {
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        opacity: 1;
        border-radius: 2px;
        background: #283448;
    }
    /*     .navbar-collapse .navbar-toggler :first-child{
        transform:rotate(135deg)
    }
    .navbar-collapse .navbar-toggler :nth-child(2){
        transform:rotate(-135deg)
    } */
    .section-sm {
        padding-bottom: 48px !important;
    }
    .avatar-chat {
        width: 25px;
        height: 25px;
    }
    .loading-name {
        width: 60% !important;
    }
    .loading-time {
        width: 40% !important;
    }
    nav.navbar_mobile {
        display: block !important;
    }
    section.section.section-bar {
        margin-top: 50px;
    }
    body.no-topbar section.section.section-bar {
        margin-top: 0;
    }
}
.input-group-text,
.item h5,
.page-link,
.sm-btn-size {
    text-align: center;
}
.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}
.navbar .navbar-nav .nav-item .nav-link:not(.btn).active {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50px;
}
.dropdown-item:focus,
.dropdown-item:hover {
    color: #fff;
    background-color: #007bff;
}
[class^="ribbon-"] {
    position: absolute;
    margin-bottom: 80px;
}
[class^="ribbon-"]:after,
[class^="ribbon-"]:before {
    content: "";
    position: absolute;
}
.item h5,
.item > a::after {
    position: absolute;
    width: 100%;
}
.item > a::after {
    content: "";
    display: block;
    background: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    height: 100%;
}
.item h5 {
    line-height: 3;
    left: 0;
    top: 50%;
    margin-top: -30px;
    color: #fff;
    z-index: 5;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: transparent !important;
    transform: scale(0.9);
}
.owl-theme .owl-dots .owl-dot span {
    display: inline-block;
    width: 0.9375rem;
    height: 0.9375rem;
    box-sizing: border-box;
    border: 3px solid transparent;
    border-radius: 50%;
    transform: scale(0.6);
    transition: 0.3s linear;
    opacity: 0.7;
    -webkit-transition: 0.3s linear;
    -moz-transition: 0.3s linear;
    -o-transition: 0.3s linear;
    -ms-transition: 0.3s linear;
}
.ico-social,
.link-footer {
    color: #999;
}
.btn-main:hover i {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
}
.btn-main i {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: transform 0.3s;
    transition:
        transform 0.3s,
        -webkit-transform 0.3s;
}
.btn {
    padding: 0.625rem 1.25rem;
}
.custom-select {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23a5a5a5' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
        right 0.75rem center/8px 10px no-repeat #fff;
}
.card-avatar,
main > div.section:nth-child(odd) {
    background-color: #fff;
}
main > div.section:nth-child(2n) {
    background-color: #fbfafd !important;
}
.fixed-top {
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}
.home {
    padding: 150px 0;
}
.homepage {
    padding: 180px 0;
}
.p-nav {
    padding: 1rem;
}
.p-nav-scroll {
    padding: 0.7rem !important;
}
.jumbotron {
    border-radius: 0 !important;
}
.img-user {
    width: auto !important;
    border-radius: 50%;
    margin: 0 auto;
    border: 5px solid #fff;
}
.ico-social {
    font-size: 20px;
}
a:hover.link-border {
    text-decoration: none;
}
a.link-border {
    border-bottom: 1px solid;
}
.card-cover {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    height: 135px;
    padding: 1rem;
}
.card-avatar {
    left: 50%;
    margin-left: -45px;
    position: absolute;
    top: 80px;
    border-radius: 0.7rem !important;
}
.section-sm {
    padding: 10px 0;
}
.facebook-btn {
    color: #3e5c9b !important;
}
.twitter-btn {
    color: #1da1f2 !important;
}
.alert-success {
    background-color: #00a65a;
    border-color: #00a65a;
    color: #fff;
}
.alert-danger {
    color: #fff;
    background-color: red;
    border-color: #ff012a;
}
.alert-primary {
    color: #fff;
    border-color: #7889e8;
    background-color: #7889e8;
}
.alert-warning {
    color: #1f2d3d;
    background: #ffc107;
    border-color: #edb100;
}
.alert-dismissible .close {
    color: #fff;
    text-shadow: none;
}
.close {
    float: right;
    font-size: 40px;
    line-height: 1.5;
    opacity: 0.9;
    position: absolute;
    top: -12px;
    color: white;
    right: 10px;
    z-index: 999;
    text-shadow: none;
}
.page-link {
    border-radius: 35px !important;
    border: none;
    margin-right: 2px;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
    transition: 0.2s linear;
    height: 35px;
    min-width: 35px;
}
.custom-control-label::after,
.custom-control-label:not(.switch)::before {
    top: 0.125rem;
    left: -1.75rem;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    content: "";
    position: absolute;
}
.btn-category {
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
    transition: 0.2s linear;
}
.active-category,
.btn-category:hover {
    border-color: #333 !important;
}
.input-group-text {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    margin-bottom: 0;
    padding: 0.625rem 0.75rem;
    white-space: nowrap;
    color: #adb5bd;
    border: 1px solid #cad1d7;
    border-radius: 0.25rem;
    background-color: #fff;
    align-items: center;
}
.input-group-alternative .form-control,
.input-group-alternative .input-group-text {
    border: 0;
    box-shadow: none;
}

.input-group-alternative {
    border: 1px solid #ced4da;
    padding: 5px;
    border-radius: 12px;
}
.form-control {
    height: calc(2.75rem + 2px);
    padding: 0.625rem 0.75rem;
}
.custom-control-input:not(:disabled):focus ~ .custom-control-label::before {
    box-shadow: none;
}
.custom-checkbox .custom-control-input ~ .custom-control-label,
.custom-control-label {
    font-size: 0.875rem;
    cursor: pointer;
}
.custom-control-label:not(.switch)::before {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    background-color: #fff;
    box-shadow: none;
}
.custom-control-label::after {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}
.custom-control-label::before {
    box-shadow:
        0 1px 3px rgba(50, 50, 93, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.02);
}
.input-group .form-control:not(:first-child) {
    padding-left: 0;
    border-left: 0;
}
.custom-select:focus,
.form-control:focus {
    border-color: #ced4da !important;
    outline: 0;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.075),
        0 0 0 0 rgba(50, 151, 211, 0.5);
}
.btn-facebook,
.btn-facebook:active,
.btn-facebook:focus,
.btn-facebook:hover {
    background: #3b579d;
    color: #fff;
}
.btn-google,
.btn-google:active,
.btn-google:focus,
.btn-google:hover {
    background: #fff;
    border-color: #ccc;
    color: #333;
}
.shadow-custom {
    box-shadow: 0 5px 16px rgba(0, 9, 128, 0.05);
}
.btn-white,
.nav-pills .nav-link {
    box-shadow:
        0 4px 6px rgba(50, 50, 93, 0.11),
        0 1px 3px rgba(0, 0, 0, 0.08);
}
.btn-danger {
    color: #fff;
    border-color: #f5365c;
    background-color: #f5365c;
}
.nav-pills .nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    transition: 0.15s;
    color: #5e72e4;
    background-color: #fff;
}
.nav-pills .nav-item:not(:last-child) {
    padding-right: 1rem;
}
.dropdown-item.balance:hover {
    background: #fff !important;
    color: #212529;
}
.page-item.disabled .page-link {
    color: #9daebd;
}
.ico-no-result {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    color: #c5c5c5;
    border: 3px solid #c5c5c5;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    font-size: 60px;
    display: block;
    line-height: 150px !important;
}
.avatar-wrap {
    width: 150px;
    height: 150px;
    overflow: hidden;
    background-color: #fff;
}
.modal-danger .modal-content {
    color: #fff;
    background-color: #f5365c;
}
.modal-danger .modal-footer,
.modal-danger .modal-header {
    border-color: rgba(255, 255, 255, 0.075);
}

/* ================================================================
   REPORT MODALS (rpt-*)
   ================================================================ */
.rpt-dialog {
    max-width: 380px;
}

.rpt-content {
    background: #1a1a22;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    color: #e0e0e8;
}
.rpt-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff4d6d, #ff8fa3, transparent);
    z-index: 1;
}

.rpt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.rpt-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rpt-flag {
    width: 32px;
    height: 32px;
    background: rgba(255, 77, 109, 0.12);
    border: 1px solid rgba(255, 77, 109, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4d6d;
    flex-shrink: 0;
}
.rpt-flag svg {
    width: 15px;
    height: 15px;
}
.rpt-title {
    font-weight: 600;
    font-size: 15px;
    color: #f0f0f5;
    letter-spacing: 0.01em;
    margin: 0;
}
.rpt-close {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: all 0.18s;
    padding: 0;
}
.rpt-close:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #f0f0f5;
    border-color: rgba(255, 255, 255, 0.14);
}
.rpt-close svg {
    width: 12px;
    height: 12px;
}

.rpt-body {
    padding: 24px 24px 20px;
}
.rpt-label {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 12px;
}
.rpt-select-wrap {
    position: relative;
}
.rpt-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 13px 44px 13px 16px;
    color: #e0e0e8;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.18s;
    outline: none;
}
.rpt-select:focus {
    border-color: rgba(255, 77, 109, 0.45);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.08);
}
.rpt-select option {
    background: #1e1e28;
    color: #e0e0e8;
}
.rpt-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
    pointer-events: none;
}

.rpt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.rpt-tag {
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: #888;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.18s;
    user-select: none;
}
.rpt-tag:hover {
    border-color: rgba(255, 77, 109, 0.3);
    color: #ccc;
    background: rgba(255, 77, 109, 0.06);
}
.rpt-tag.active {
    border-color: rgba(255, 77, 109, 0.5);
    background: rgba(255, 77, 109, 0.1);
    color: #ff8fa3;
}

.rpt-footer {
    display: flex;
    gap: 10px;
    padding: 16px 24px 22px;
    border-top: none;
}
.rpt-btn {
    flex: 1;
    padding: 13px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.18s;
}
.rpt-btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #888;
}
.rpt-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ccc;
}
.rpt-btn-danger {
    background: linear-gradient(135deg, #ff3355, #ff4d6d);
    color: #fff;
    box-shadow: 0 4px 18px rgba(255, 51, 85, 0.28);
    position: relative;
    overflow: hidden;
}
.rpt-btn-danger::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    transition: background 0.18s;
}
.rpt-btn-danger:hover::before {
    background: rgba(255, 255, 255, 0.08);
}
.rpt-btn-danger:active {
    transform: scale(0.98);
    box-shadow: 0 2px 10px rgba(255, 51, 85, 0.2);
}
.rpt-btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Report modal — light mode overrides */
body:not(.dark-mode) .rpt-content {
    background: #fff;
    border-color: #e8e8ee;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    color: #1e1b4b;
}
body:not(.dark-mode) .rpt-header {
    border-bottom-color: #f0eef5;
}
body:not(.dark-mode) .rpt-title {
    color: #1e1b4b;
}
body:not(.dark-mode) .rpt-close {
    background: #f5f3ff;
    border-color: #e8e8ee;
    color: #888;
}
body:not(.dark-mode) .rpt-close:hover {
    background: #ede8fd;
    color: #333;
}
body:not(.dark-mode) .rpt-label {
    color: #888;
}
body:not(.dark-mode) .rpt-select {
    background: #f8f7ff;
    border-color: #e8e8ee;
    color: #333;
}
body:not(.dark-mode) .rpt-select:focus {
    border-color: rgba(255, 77, 109, 0.45);
    background: #fff;
}
body:not(.dark-mode) .rpt-select option {
    background: #fff;
    color: #333;
}
body:not(.dark-mode) .rpt-chevron {
    color: #aaa;
}
body:not(.dark-mode) .rpt-tag {
    border-color: #e8e8ee;
    background: #f8f7ff;
    color: #666;
}
body:not(.dark-mode) .rpt-tag:hover {
    border-color: rgba(255, 77, 109, 0.3);
    color: #444;
    background: rgba(255, 77, 109, 0.05);
}
body:not(.dark-mode) .rpt-tag.active {
    border-color: rgba(255, 77, 109, 0.5);
    background: rgba(255, 77, 109, 0.08);
    color: #e8364e;
}
body:not(.dark-mode) .rpt-btn-ghost {
    background: #f5f3ff;
    border-color: #e8e8ee;
    color: #666;
}
body:not(.dark-mode) .rpt-btn-ghost:hover {
    background: #ede8fd;
    color: #333;
}

.focused .form-control {
    border-color: rgba(50, 151, 211, 0.25);
}
.btn-white,
.btn-white:hover {
    color: #212529;
    border-color: #fff;
    background-color: #fff;
}

.btn-sm {
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.5rem 1.8rem;
    border-radius: 0.25rem;
}
.btnLike:hover {
    text-decoration: none !important;
}
.bg-success,
.popout-success {
    background-color: #2dce89 !important;
}
.nav-profile {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-profile::-webkit-scrollbar {
    display: none;
}
.nav-profile .nav-link {
    border-bottom: 4px solid #d9d9d9;
    white-space: nowrap;
}

.nav-profile a,
.nav-profile li.active a:active,
.nav-profile li.active a:focus,
.nav-profile li.active a:hover {
    color: #333;
}
.nav-profile a:hover {
    text-decoration: none;
}
.sm-btn-size {
    color: #333;
    font-weight: 700;
    font-size: 17px !important;
    line-height: 15px;
}
.heading-settings-wrap {
    display: flex;
}
@media (min-width: 576px) {
    .modal-sm {
        max-width: 380px;
    }
}
.pb-lg {
    padding-bottom: 6rem !important;
}
.pt-lg {
    padding-top: 6rem !important;
}
.user-offline::before,
.user-online::before {
    position: absolute;
    display: block;
    bottom: -3px;
    content: "";
    height: 30%;
    min-height: 30%;
    width: 30%;
    min-width: 30%;
    right: 0;
}
.progress-upload {
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    z-index: 2;
    color: #fff;
    line-height: 150px;
    display: none;
}
.progress-upload-cover {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: #28a745;
    transition: width 0.6s;
}
.btn-upload {
    padding: 7px;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
    transition: 0.2s linear;
}
.btn-upload:hover {
    background-color: #f3f3f3;
}
.user-online::before {
    background: #4caf50;
    border: 3px solid #fff;
    border-radius: 50%;
}
.user-offline::before {
    background: #adadad;
    border: 3px solid #fff;
    border-radius: 50%;
}
.user-offline-profile::before,
.user-online-profile::before {
    display: block;
    bottom: 10px;
    right: 15px;
    content: "";
    height: 12%;
    width: 12%;
    position: absolute;
}
.user-online-profile::before {
    background: #4caf50;
    border: 3px solid #fff;
    border-radius: 50%;
}
.user-offline-profile::before {
    background: #adadad;
    border: 3px solid #fff;
    border-radius: 50%;
}
.message {
    padding: 6px 14px 7px !important;
    border-radius: 25px !important;
}
.message.media-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.message.msg-sent-bg > a {
    color: #fff !important;
    text-decoration: underline !important;
}
.content::-webkit-scrollbar {
    display: none;
}
.d-scrollbars {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
/* ═══════════════════════════════════
   NEW MESSAGE MODAL (nm-*)
   ═══════════════════════════════════ */
.nm-modal {
    border-radius: 22px !important;
    border: 1px solid #e4e4ed;
    overflow: hidden;
    animation: nmModalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.11),
        0 4px 16px rgba(0, 0, 0, 0.06);
}
@keyframes nmModalIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
#newMessageForm .modal-dialog {
    max-width: 360px;
}
#newMessageMassive .modal-dialog {
    max-width: 460px;
}

/* Header */
.nm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 22px 0;
}
.nm-header-border {
    padding-bottom: 18px;
    border-bottom: 1px solid #e4e4ed;
}
.nm-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nm-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #ede8fd;
    border: 1px solid rgba(109, 74, 232, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d4ae8;
    flex-shrink: 0;
}
.nm-icon svg {
    width: 18px;
    height: 18px;
}
.nm-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #141428;
}
.nm-sub {
    font-size: 12px;
    color: #9898ae;
    margin-top: 1px;
}
.nm-close-btn {
    width: 32px;
    height: 32px;
    border: 1.5px solid #e4e4ed;
    border-radius: 9px;
    background: #f5f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #bbbbc8;
    transition: all 0.16s;
    flex-shrink: 0;
    padding: 0;
}
.nm-close-btn:hover {
    color: #141428;
    background: #e4e4ed;
}
.nm-close-btn svg {
    width: 11px;
    height: 11px;
}

/* Body */
.nm-body {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* All subscribers button */
.nm-subscribers-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    background: linear-gradient(135deg, #6d4ae8 0%, #8b6ff0 100%);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(109, 74, 232, 0.28);
    text-align: left;
    position: relative;
    overflow: hidden;
}
.nm-subscribers-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    transition: background 0.18s;
}
.nm-subscribers-btn:hover {
    box-shadow: 0 6px 22px rgba(109, 74, 232, 0.38);
    transform: translateY(-1px);
}
.nm-subscribers-btn:hover::before {
    background: rgba(255, 255, 255, 0.07);
}
.nm-subscribers-btn:active {
    transform: scale(0.98);
}
.nm-subscribers-btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nm-subscribers-btn-icon svg {
    width: 17px;
    height: 17px;
    color: #fff;
}
.nm-subscribers-btn-text {
    flex: 1;
}
.nm-subscribers-btn-label {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    display: block;
}
.nm-subscribers-btn-count {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 1px;
    display: block;
}
.nm-subscribers-btn-arrow {
    color: rgba(255, 255, 255, 0.5);
}
.nm-subscribers-btn-arrow svg {
    width: 16px;
    height: 16px;
}

/* Divider */
.nm-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #bbbbc8;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.nm-divider::before,
.nm-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e4e4ed;
}

/* Search */
.nm-search-wrap {
    position: relative;
}
.nm-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbbbc8;
    pointer-events: none;
    display: flex;
}
.nm-search-icon svg {
    width: 15px;
    height: 15px;
}
.nm-search-input {
    width: 100%;
    padding: 12px 14px 12px 38px;
    background: #f5f5f9;
    border: 1.5px solid #e4e4ed;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: #141428;
    outline: none;
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}
.nm-search-input::placeholder {
    color: #bbbbc8;
}
.nm-search-input:focus {
    border-color: #6d4ae8;
    box-shadow: 0 0 0 3px rgba(109, 74, 232, 0.09);
}

/* Spinner */
.nm-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #9898ae;
    font-size: 13px;
}

/* Results */
.nm-results {
    text-align: left;
}
.nm-results .card {
    border-radius: 12px;
    border: 1px solid #e4e4ed;
    overflow: hidden;
    transition: border-color 0.15s;
}
.nm-results .card:hover {
    border-color: #d0d0dc;
}
.nm-results .list-group-item {
    padding: 10px 12px !important;
    border: none;
    transition: background 0.15s;
}
.nm-results .list-group-item:hover {
    background: #f5f5f9;
}

/* Recipient chip */
.nm-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 7px;
    background: #ede8fd;
    border: 1px solid rgba(109, 74, 232, 0.2);
    border-radius: 99px;
    margin: 14px 0 0 22px;
}
.nm-chip-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6d4ae8, #8b6ff0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nm-chip-dot svg {
    width: 12px;
    height: 12px;
    color: #fff;
}
.nm-chip-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #6d4ae8;
}
.nm-chip-remove {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(109, 74, 232, 0.12);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d4ae8;
    transition: background 0.15s;
    padding: 0;
}
.nm-chip-remove:hover {
    background: rgba(109, 74, 232, 0.22);
}
.nm-chip-remove svg {
    width: 8px;
    height: 8px;
}

/* Compose area */
.nm-compose-area {
    padding: 16px 22px;
    position: relative;
}
.nm-compose-textarea {
    width: 100%;
    min-height: 160px;
    background: #f5f5f9;
    border: 1.5px solid #e4e4ed;
    border-radius: 14px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: #141428;
    line-height: 1.6;
    resize: none;
    outline: none;
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}
.nm-compose-textarea::placeholder {
    color: #bbbbc8;
}
.nm-compose-textarea:focus {
    border-color: #6d4ae8;
    box-shadow: 0 0 0 3px rgba(109, 74, 232, 0.08);
}

/* Toolbar */
.nm-compose-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px 20px;
}
.nm-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nm-tool-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9898ae;
    transition: all 0.16s;
    position: relative;
    padding: 0;
}
.nm-tool-btn:hover {
    background: #f5f5f9;
    color: #5a5a72;
}
.nm-tool-btn:active {
    transform: scale(0.93);
}
.nm-tool-btn svg {
    width: 18px;
    height: 18px;
}
.nm-tool-badge {
    position: absolute;
    bottom: 5px;
    right: 4px;
    background: #9898ae;
    color: #fff;
    font-size: 6.5px;
    font-weight: 800;
    padding: 1px 3px;
    border-radius: 3px;
    line-height: 1.2;
    letter-spacing: 0.03em;
}
.nm-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nm-char-count {
    font-size: 12px;
    color: #bbbbc8;
    font-weight: 500;
}
.nm-send-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    background: linear-gradient(135deg, #6d4ae8 0%, #8b6ff0 100%);
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(109, 74, 232, 0.3);
}
.nm-send-btn:hover {
    box-shadow: 0 6px 20px rgba(109, 74, 232, 0.42);
    transform: translateY(-1px);
}
.nm-send-btn:active {
    transform: scale(0.97);
}
.nm-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.nm-send-btn svg {
    width: 15px;
    height: 15px;
}

/* Old classes kept for backwards compat */
.input-new-msg {
    padding: 8px 34px !important;
    height: 40px !important;
}
.btn-cancel-msg {
    cursor: pointer;
    position: absolute;
    top: 4px;
    right: 0;
}

/* ═══════════════════════════════════
   PASSWORD SETTINGS (pwd-*)
   ═══════════════════════════════════ */

/* Info note */
.pwd-info-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: rgba(109, 74, 232, 0.07);
    border: 1px solid rgba(109, 74, 232, 0.2);
    border-radius: 12px;
    padding: 11px 14px;
    color: #6d4ae8;
}
.pwd-info-note svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}
.pwd-info-note span {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    color: #5336b8;
}

/* Fields */
.pwd-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pwd-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pwd-field-label {
    font-size: 12px;
    font-weight: 600;
    color: #9898ae;
    letter-spacing: 0.03em;
    padding-left: 2px;
}

/* Input wrap */
.pwd-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pwd-input-icon {
    position: absolute;
    left: 13px;
    color: #bbbbc8;
    pointer-events: none;
    transition: color 0.18s;
    display: flex;
}
.pwd-input-icon svg {
    width: 16px;
    height: 16px;
}
.pwd-input-toggle {
    position: absolute;
    right: 11px;
    border: none;
    background: none;
    cursor: pointer;
    color: #bbbbc8;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition:
        color 0.16s,
        background 0.16s;
}
.pwd-input-toggle:hover {
    color: #5a5a72;
    background: #f5f5f9;
}
.pwd-input-toggle svg {
    width: 16px;
    height: 16px;
}

.pwd-field-input {
    width: 100%;
    padding: 13px 40px 13px 40px;
    background: #f5f5f9;
    border: 1.5px solid #e4e4ed;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: #141428;
    outline: none;
    transition:
        border-color 0.18s,
        box-shadow 0.18s,
        background 0.18s;
    -webkit-appearance: none;
}
.pwd-field-input::placeholder {
    color: #bbbbc8;
    font-weight: 400;
}
.pwd-field-input:focus {
    border-color: #6d4ae8;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(109, 74, 232, 0.09);
}
.pwd-input-wrap:focus-within .pwd-input-icon {
    color: #6d4ae8;
}

/* Valid / Error states */
.pwd-field-input.valid {
    border-color: #0f9960;
    background: #ffffff;
}
.pwd-input-wrap.valid .pwd-input-icon {
    color: #0f9960;
}
.pwd-field-input.error {
    border-color: #e53e3e;
    background: #fff0f0;
}
.pwd-input-wrap.error .pwd-input-icon {
    color: #e53e3e;
}

/* Hint */
.pwd-field-hint {
    font-size: 11.5px;
    padding-left: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #bbbbc8;
}
.pwd-field-hint.error {
    color: #e53e3e;
}
.pwd-field-hint.success {
    color: #0f9960;
}
.pwd-field-hint svg {
    width: 12px;
    height: 12px;
}

/* Divider */
.pwd-divider {
    height: 1px;
    background: #e4e4ed;
    margin: 2px 0;
}

/* Strength meter */
.pwd-strength-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}
.pwd-strength-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pwd-strength-bars {
    flex: 1;
    display: flex;
    gap: 4px;
}
.pwd-strength-bar {
    flex: 1;
    height: 4px;
    background: #e4e4ed;
    border-radius: 99px;
    transition: background 0.3s ease;
}
.pwd-strength-bar.weak {
    background: #f87171;
}
.pwd-strength-bar.fair {
    background: #fb923c;
}
.pwd-strength-bar.good {
    background: #facc15;
}
.pwd-strength-bar.strong {
    background: #0f9960;
}
.pwd-strength-label {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    min-width: 44px;
    text-align: right;
}

/* Strength tip chips */
.pwd-strength-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.pwd-tip-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 500;
}
.pwd-tip-chip.done {
    background: #e3f9ef;
    color: #0f9960;
}
.pwd-tip-chip.todo {
    background: #f5f5f9;
    color: #9898ae;
    border: 1px solid #e4e4ed;
}
.pwd-tip-chip svg {
    width: 10px;
    height: 10px;
}

.rounded-bottom-left-0 {
    border-bottom-left-radius: 0 !important;
}
.rounded-bottom-right-0 {
    border-bottom-right-radius: 0 !important;
}
.btn-removeMsg {
    position: absolute;
    top: 20%;
    right: -18px;
    z-index: 3;
}
.container-media-img {
    background-position: center center;
    background-size: cover;
    max-width: 250px;
    max-height: 280px;
    width: 280px;
    height: 280px;
    border-radius: 6px;
}
.container-media-msg {
    width: 100%;
    max-width: 400px;
    max-height: 280px;
    height: 280px;
}
.img-user-small {
    width: auto !important;
    border-radius: 50%;
    margin: 0 auto;
    border: 3px solid #fff;
}
.item-loading::before,
.wrap-center {
    left: 0;
    width: 100%;
    position: absolute;
}
.table thead th {
    vertical-align: bottom;
    border: none;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    color: #afafaf;
    font-size: 14px;
}
.table td,
.table th {
    padding: 0.75rem 1.5rem;
    vertical-align: top;
    border: none;
    font-size: 14px;
}
.error-page h1 {
    font-size: 10rem;
    line-height: 9rem;
    font-weight: 700;
    color: #ec2522;
}
.wrap-center {
    top: 50%;
    z-index: 20;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.wrap-container {
    max-width: 550px;
    margin: 0 auto;
}
.font-tiny {
    font-size: 65% !important;
}
.item-loading::before {
    background-color: #f5f6f7;
    background-image: url("../img/loadpost.gif");
    background-repeat: repeat-y;
    background-size: 100% 1px;
    content: " ";
    display: block;
    height: 100%;
    top: 0;
    border-radius: 50%;
}
.loading-avatar {
    width: 60px;
    height: 60px;
    display: block;
    background-color: #f5f6f7;
    border-radius: 50%;
}
.loading-name,
.loading-text-1,
.loading-text-2,
.loading-text-3,
.loading-time {
    height: 10px;
    display: block;
    background-color: #f5f6f7;
}
.loading-name {
    width: 25%;
}
.loading-time {
    width: 15%;
    margin-top: 8px;
}
.loading-text-1 {
    width: 85%;
    margin-top: 8px;
}
.loading-text-2 {
    width: 75%;
    margin-top: 8px;
}
.loading-text-3 {
    width: 55%;
    margin-top: 8px;
}
.custom-switch-lg .custom-control-label::before {
    left: -2.25rem;
    width: 3rem;
    border-radius: 1.5rem;
}
.custom-switch-lg .custom-control-label::after {
    top: calc(0.25rem + 3px);
    left: calc(-2.25rem + 4px);
    width: calc(1.5rem - 6px);
    height: calc(1.5rem - 6px);
    border-radius: 1.5rem;
}
.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(1.4rem);
}
.custom-switch-lg .custom-control-label::before {
    height: 1.5rem;
}
.custom-switch-lg .custom-control-label {
    padding-left: 1.5rem;
    line-height: 1.7rem;
}
.content-p img {
    max-width: 100% !important;
    height: auto !important;
}
.content-p li {
    list-style: inherit;
}
.content-p ol,
.content-p ul {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.img-post {
    height: 430px;
}
.max-w-100 {
    max-width: 100px;
}
.max-w-125 {
    max-width: 125px;
}
.visibility-hidden {
    visibility: hidden;
}
.f-size-25 {
    font-size: 25px;
}
.user-icon-nav img {
    height: 40px;
    width: 40px;
}
.user-nav-info .user-first-name {
    font-size: 14px;
    font-weight: 700;
}

@media screen and (min-width: 1271px) {
    .logo-dark,
    .logo-light {
        display: block;
    }
    .logo-dark-mobile,
    .logo-light-mobile {
        display: none;
    }
}
@media screen and (max-width: 1270px) {
    .menu-left-home li > .username-link:hover,
    .menu-left-home li > .username-link.active {
        background-color: transparent !important;
    }
    .logo-dark,
    .logo-light {
        display: none;
    }
    .logo-dark-mobile,
    .logo-light-mobile {
        display: block;
    }
    .user-nav-info {
        display: none !important;
    }

    /* Collapsed sidebar: uniform spacing via gap */
    .sidebard_edit > .menu-left-home {
        gap: 2px;
        align-items: center;
    }
    .menu-left-home li {
        text-align: center;
        margin-bottom: 0 !important;
    }
    .menu-left-home > li:first-child {
        margin-bottom: 0 !important;
    }

    /* Logo: center horizontally */
    .menu-left-home > li:first-child {
        align-self: stretch;
    }
    .menu-left-home > li:first-child .navbar-brand {
        display: block;
        text-align: center;
        padding: 0.5rem 0 !important;
    }
    .logo-dark-mobile,
    .logo-light-mobile {
        display: block;
        margin: 0 auto !important;
    }

    /* Break sidebarFirst apart so children become flex items of the <ul> */
    .menu-left-home .sidebarFirst {
        display: contents;
    }

    /* Reorder: home(1) → create(2) → messages(3) → notifications(4) → settings(5) */
    .menu-left-home .sidebarFirst a:first-child  { order: 1; }
    .menu-left-home .create-hub-desktop-wrap      { order: 2; }
    .menu-left-home .sidebarFirst a:nth-child(2)  { order: 3; }
    .menu-left-home .sidebarFirst a:nth-child(3)  { order: 4; }
    .menu-left-home .sidebarFirst a:nth-child(4)  { order: 5; }
    .menu-left-home .sidebar-nav-scroll            { order: 10; }
    .menu-left-home .menuDrop                      { order: 20; }

    /* All icon links: centered, compact size */
    .menu-left-home .sidebarFirst a,
    .sidebar-nav-scroll li a {
        display: flex !important;
        align-items: center;
        justify-content: center !important;
        padding: 0 !important;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        position: relative;
    }

    /* Sidebar nav scroll: remove extra padding, match gap */
    .sidebar-nav-scroll {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding-bottom: 0 !important;
    }
    .sidebar-nav-scroll li {
        margin-bottom: 0 !important;
    }

    /* Active/selected state: solid purple for contrast */
    .menu-left-home .sidebarFirst a.active,
    .sidebar-nav-scroll li a.active {
        background: rgba(109, 74, 232, 0.22);
    }
    .menu-left-home .sidebarFirst a:hover,
    .sidebar-nav-scroll li a:hover {
        background: rgba(109, 74, 232, 0.12);
    }

    /* Normalize all sidebar SVGs to same visual size */
    .sidebard_edit svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Notification badges: keep inside sidebar bounds */
    .sidebarFirst .notify {
        top: 0px;
        right: 0px;
        width: 18px;
        height: 14px;
        font-size: 10px;
        line-height: 14px;
    }

    /* Collapsed sidebar: user card — icon-only */
    .menuDrop .profileMenu {
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        justify-content: center !important;
    }
    .menuDrop .icon-prfl {
        display: none !important;
    }
    .menuDrop .user-icon-nav img {
        width: 40px !important;
        height: 40px !important;
    }
}
@media (min-width: 1271px) and (max-width: 1300px) {
    .settings-container .wrap-post {
        padding-inline-start: 20px !important;
    }
}
/* Removed: .settings-container margin-inline-start workarounds
   — global body.no-topbar main offset handles sidebar spacing now */
@media screen and (max-width: 767.98px) {
    .btn-upload {
        padding: 7px;
    }
    #msform fieldset .form-card {
        padding: 15px !important;
    }

    .no-msg-img {
        width: 250px;
    }
    .bg-document ul li .btn {
        width: 83px !important;
        font-size: 12px !important;
        padding: 4px 5px;
    }
    .step3-link {
        padding: 10px !important;
    }
    .modal-simulator {
        padding: 1.25rem !important;
    }
    #stories {
        padding-top: 30px !important;
    }
    body.no-topbar #stories {
        padding-top: 10px !important;
    }
}
@media screen and (max-width: 446px) {
    #stories {
        padding-top: 20px !important;
    }
    body.no-topbar #stories {
        padding-top: 10px !important;
    }
}
@media screen and (max-width: 991.98px) {
    .section-sm {
        padding-top: 90px !important;
    }
    body.no-topbar .section-sm {
        padding-top: 5px !important;
    }
    .copyright {
        padding-bottom: 80px !important;
    }
    body.no-topbar .settings-container {
        padding-inline-start: 16px !important;
        padding-inline-end: 16px !important;
    }
}
.setting-icon {
    width: 30px;
}
.icon-chevron-setting {
    margin-top: 2px;
}
/* Removed: .main-section / .row-bookmark padding-left workarounds
   — global body.no-topbar main offset handles sidebar spacing now */
/* Removed: .products padding-left workarounds
   — global body.no-topbar main offset handles sidebar spacing now */
.section-sm .content .row {
    padding-left: 0;
}
@media (max-width: 991.98px) {
    .message-panel {
        padding-top: 44px;
    }
    body.no-topbar .message-panel {
        padding-top: 0;
    }
}
/* Removed: .main-profile padding-left workarounds
   — global body.no-topbar main offset handles sidebar spacing now */
.navbar-brand {
    padding-top: 1.3125rem !important;
}
.username-link {
    width: 119%;
}
.navbar_mobile {
    height: 60px;
}
.icon-heading {
    margin-right: 10px;
}
.header-icon {
    width: 60px !important;
}

.comment-btn {
    position: absolute;
    right: 25px;
    top: 27px;
    padding: 0;
    color: #6432c8;
    background: 0 0;
    border: none;
    font-weight: 700;
}
.inputComment {
    width: 80% !important;
}
.inputLessonComment {
    padding-right: 100px !important;
}
@media only screen and (max-width: 420px) {
    .inputComment {
        width: 65% !important;
    }
    .inputLessonComment {
        padding-right: 70px !important;
    }
}
.comment-btn:disabled {
    color: #b9f;
}
.actions-msgs .card-footer svg {
    width: 30px;
    height: 20px;
    fill: #6432c8;
}
#formUpdateCreate .card-footer svg {
    width: 22px !important;
    height: 20px;
    fill: #6432c8;
}
.verified svg {
    width: 20px;
    height: 20px;
    fill: #14b6f7;
}
.text-featured svg {
    width: 20px;
    height: 20px;
    fill: #6432c8;
}
.nav-profile svg {
    width: 16px;
    height: 18px;
    fill: #333;
}
.menu-left-home li a {
    font-weight: 500;
    font-size: 0.929rem;
}
.menu-left-home .sidebarFirst {
    padding: 10px 10px;
}
.sidebard_edit svg {
    width: 20px;
    height: 20px;
    margin-bottom: 0px;
    flex-shrink: 0;
    display: inline-block;
}
.sidebard_edit .navbar-brand img {
    margin: auto;
}
.menu-left-home li a:hover svg path,
.menu-left-home li a:hover svg polyline,
.menu-left-home li a:hover svg circle,
.menu-left-home .active svg path,
.menu-left-home .active svg polyline,
.menu-left-home .active svg circle {
    stroke: white !important;
}
.menu-left-home li a:hover svg:not([fill="none"]),
.menu-left-home .active svg:not([fill="none"]) {
    fill: white !important;
}
.list-supp svg {
    fill: white !important;
}
.list-supp svg {
    width: 18px;
    height: 18px;
}
.avatar-wrap,
.profile-actions a,
.rounded-circle {
    border-radius: 0.7rem !important;
}

.img-user-small {
    border-radius: 0.7rem !important;
}
.auth small {
    font-size: 14px;
    font-weight: 700;
}
.gender svg {
    width: 20px;
    height: 20px;
}
.verify-gender {
    width: 100%;
}
.simulator {
    min-width: 50%;
}
.modal-simulator {
    background: #282567;
    padding: 5.25rem;
    margin: auto;
    text-align: center;
    border-radius: 0.7rem;
}
.min-max-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.min-max-labels span {
    font-size: 16px;
    line-height: 120%;
    font-weight: 700;
}
.followers,
.price {
    margin-bottom: 40px;
    position: relative;
    margin-top: 40px;
}
.slider-tooltip {
    position: absolute;
    background-color: #9c6aff;
    color: #fff;
    padding: 2px 5px;
    border-radius: 5px;
    text-align: center;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 0.2s ease-in-out;
    font-size: 14px;
    top: -30px;
    font-weight: 700;
}
input[type="range"]:focus {
    outline: 0;
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: 0 0;
    border: none;
    height: 2px;
    width: 100%;
}
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: #fff;
    border-radius: 15px;
}
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 6px;
    background: #fff;
    border-radius: 15px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background: url("/public/img/icons/slider-holder-blue.svg") 0 0 / cover;
    border: none;
    cursor: pointer;
    margin-top: -12px;
    transition: left 0.2s;
}
input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background: url("/public/img/icons/slider-holder-blue.svg") 0 0 / cover;
    border: none;
    cursor: pointer;
    margin-top: -12px;
    transition: left 0.2s;
}
.bg-document {
    background-color: #e7defe;
    text-align: left;
    border-radius: 0.7rem;
    padding: 1.25rem;
}
.bg-document li {
    margin: 35px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btnFilePhoto svg {
    width: 34px;
    fill: #272567;
    height: 23px;
}
.btnFilePhoto:hover svg {
    fill: white;
}
.lbl {
    display: block;
    text-align: left !important;
}
.qr-code {
    background:
        linear-gradient(to right, #6432c8 4px, transparent 4px),
        linear-gradient(to right, #6432c8 4px, transparent 4px) 0 100%,
        linear-gradient(to left, #6432c8 4px, transparent 4px) 100% 0,
        linear-gradient(to left, #6432c8 4px, transparent 4px) 100% 100%,
        linear-gradient(to bottom, #6432c8 4px, transparent 4px),
        linear-gradient(to bottom, #6432c8 4px, transparent 4px) 100% 0,
        linear-gradient(to top, #6432c8 4px, transparent 4px) 0 100%,
        linear-gradient(to top, #6432c8 4px, transparent 4px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    max-width: 160px !important;
    padding: 13px;
    margin-bottom: 30px !important;
}
.btnFilePhoto {
    background: #f0f0ff;
    padding: 18px 0;
}
.text-center {
    text-align: center;
}
@media only screen and (max-width: 767.98px) {
    .follomylink {
        text-align: center;
    }
    .mobile {
        display: none;
    }
    .copyright .lines-2 {
        display: block;
    }
    .copyright .line-1 {
        display: none !important;
    }
}
@media only screen and (min-width: 768px) {
    .copyright .lines-2 {
        display: none;
    }
    .copyright .line-1 {
        display: block !important;
    }
}
.d-lg-block .line-1 {
    display: none;
}
#butInstall {
    color: #6432c8;
}
.cmi {
    margin-top: 20px;
}
.alert {
    border-radius: 0.7rem;
}
.sub-advantages {
    text-align: center;
    background: #fdfcff;
    padding: 20px 20px 30px;
    border-radius: 0.7rem;
    margin-bottom: 25px;
    border: 1px solid #6432c8;
}
.sub-advantages h6 {
    color: #6432c8;
    font-weight: 900;
    margin-bottom: 15px;
}
.sub-advantages p {
    text-align: center;
}
.btn-pack {
    margin: auto;
    display: block;
}
.follomylink,
.bg_blue {
    background: #272567;
    padding: 20px;
    border-radius: 20px;
}
.follomylink h5 {
    color: #ffc11a !important;
}
.follomylink small {
    color: white !important;
}

.carousel-post {
    margin-bottom: 0px !important;
}

.carousel-indicators button {
    margin-right: 15px;
    height: 5px;
    background: #d7c3ff;
    border-radius: 0.7rem !important;
}
.carousel-indicators .active {
    background-color: #6432c8;
}
.carousel-indicators {
    bottom: -10px !important;
}

#myTooltip {
    visibility: hidden;
}

#myTooltip {
    visibility: hidden;
    color: #ffc11a !important;
    position: absolute;
    right: 0;
    font-size: 13px;
}

.mylinks {
    background-color: transparent !important;
    border: 1px dashed #ffc11a;
    border-radius: 15px;
    color: white;
    height: 44px;
    position: relative;
}
#select-sub {
    display: none;
}
.input-gender {
    text-transform: capitalize;
}
.become_creator_steps {
    display: none;
}
.steps-content .desc_upload {
    font-size: 14px !important;
    line-height: 1em;
}
.blue-text {
    color: #272567 !important;
    font-size: 21px;
}
.documents-wrapper {
    width: 50%;
}
.documents-wrapper p {
    margin-bottom: 0 !important;
    text-align: left !important;
}
.documents-wrapper h6 {
    margin-bottom: 0 !important;
}

.bg-document ul li .btn {
    width: 120px;
}
#navbarUserHome {
    height: 100%;
}
#navbarUserHome .sticky-top {
    top: 20px !important;
}

.profile-main-content-wrapper {
    min-width: 0;
    overflow: hidden;
}

.profile-right-sidebar-wrapper {
    position: sticky;
    top: 50px;
    min-width: 0;
}

.text-size-xsmall {
    font-size: 11px;
}
.b-radius {
    border-radius: 0.7rem !important;
}
.invalid-feedback {
    padding: 6px;
}
.bg_blue h5 {
    color: #ffc11a !important;
}
.bg_blue p {
    color: white;
}
.clr-field button {
    border-radius: 0 0.7rem 0.7rem 0;
}
.plyr--audio {
    border-radius: 0.7rem !important;
}
.previewImageVerification p {
    text-align: left !important;
}
.previewImageVerification h5 {
    text-align: left !important;
}
.bg-purple-light {
    background-color: #9c6aff !important;
    border-color: #9c6aff !important;
}
.hidden {
    visibility: hidden;
}

.carousel-control-next,
.carousel-control-prev {
    height: 40px;
    bottom: 50% !important;
    top: unset !important;
}
.carousel-control-next svg,
.carousel-control-prev svg {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.35));
}

.icon-wrap-lock {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 0;
    transform: rotate(15deg);
    opacity: 0.2;
}
.icon-wrap-lock-msg {
    position: absolute;
    top: -15px;
    right: 0px;
    z-index: 0;
    transform: rotate(15deg);
    opacity: 0.2;
}
.gender svg {
    height: 20px !important;
}
.media-theme-spotify {
    display: inline-block;
    min-width: 250px;

    color: #fff;

    --media-icon-color: #fff;
    --media-button-icon-height: 28px;
    --media-range-track-height: 4px;
    --media-range-track-background: rgba(255, 255, 255, 0.3);
    --media-range-thumb-box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px 0px;
    --media-preview-time-background: rgba(20, 20, 30, 1);
    --media-preview-time-margin: 0 0 -9px;
}

.media-theme-spotify .custom-chrome {
    display: flex;
    flex-flow: row nowrap;
}

.media-theme-spotify :not(media-play-button) {
    --media-control-background: none;
    --media-control-hover-background: none;
}

.media-theme-spotify media-time-range {
    --media-box-padding-left: 7px;
    --media-box-padding-right: 7px;
}

.media-theme-spotify media-time-range:not(:hover) {
    --media-range-thumb-opacity: 0;
}

.media-theme-spotify media-text-display {
    font-size: 14px;
    line-height: 19px;
    padding: 0 8px;
}

.media-theme-spotify media-time-display,
.media-theme-spotify media-preview-time-display {
    font-size: 10px;
}

.media-theme-spotify .media-poster {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.media-theme-spotify media-play-button {
    border: 1px solid #ffffff;
    border-radius: 50%;
    padding: 6px;

    transition: all 0.1s;
}

.media-theme-spotify .media-poster:hover media-play-button {
    transform: scale(1.1);
}

.media-theme-spotify .content-area {
    flex-grow: 1;
    border-radius: 0 0.7rem 0.7rem 0;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;

    padding-top: 8px;
    background-color: #4f2caf;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
}

.media-theme-spotify .content-area media-control-bar {
    align-self: stretch;
}

.media-theme-spotify .content-area media-control-bar > * {
    height: 36px;
}
/*.bcm-creator span{
    color: #6432c8;
  }*/
.bcm-creator svg {
    fill: #6432c8;
}
.bcm-creator:hover span {
    color: white !important;
}
.bcm-creator:hover svg {
    fill: #6432c8;
}

.active .bcm-span {
    color: white;
}
.active .bcm-svg {
    fill: white;
}
.icons-info H6 {
    font-size: 16px;
    font-weight: 400 !important;
}
.icons-info svg {
    height: 25px;
    fill: #6432c8;
}
.dropdown .dropdown-navbar path {
    fill: #212121;
}
.dropdown .dropdown-navbar:hover {
    border: none !important;
}
.dropdown .dropdown-navbar svg {
    margin-right: 10px !important;
}

.dropdown .dropdown-navbar:hover path {
    fill: white !important;
}
.badge {
    padding: 5px 10px !important;
}

@media (max-width: 1199.98px) {
    .btn-mylink {
        width: 48%;
    }
}
/* PROFILE PAGE*/

.userInfo {
    text-align: left;
    padding-left: 175px;
    margin-top: -35px;
}
@media only screen and (max-width: 991.98px) {
    .userInfo {
        padding-left: 0px;
        margin-top: 17px;
    }
    .sm-wrapper {
        justify-content: center !important;
    }
    #themeFilter {
        max-width: 120px !important;
    }
}
.sm-wrapper {
    gap: 8px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid #6332c824;
}
.profileReport {
    position: absolute;
    right: 15px;
}

.profile-actions .sm-wrapper svg {
    width: 20px !important;
    height: 20px !important;
}
.profile-actions .btn-brd {
    border: 1px solid #6332c8;
    padding-left: 14px !important;
    padding-right: 14px !important;
}
@media only screen and (min-width: 992px) {
    .profile-action-btns {
        display: flex;
        gap: 5px;
    }
    .profile-action-btns .btn-profile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }
}

@media only screen and (min-width: 992px) {
    .hidden-dsktop {
        display: none !important;
    }
}
/* ================================================================
   Profile Header Redesign (ph-) — Mobile-first
   ================================================================ */

/* Cover */
.ph-cover {
    position: relative;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    min-height: 180px;
    background: #505050;
    background-size: cover;
    background-position: center;
}
.ph-cover-upload {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.ph-cover-upload:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

/* Identity row */
.ph-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
    margin-top: -55px;
    position: relative;
    z-index: 2;
}

/* Avatar */
.ph-avatar-wrap {
    width: 110px;
    height: 110px;
    border-radius: 22px;
    border: 4px solid #fff;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    position: relative;
}
.ph-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ph-avatar-upload {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 5;
}
.ph-avatar-upload:hover {
    background: rgba(0, 0, 0, 0.75);
}
.ph-avatar-upload svg {
    width: 14px;
    height: 14px;
}
.ph-avatar-wrap .progress-upload {
    border-radius: 22px;
    line-height: 110px;
}

/* Online / Offline dots */
.ph-avatar-wrap.is-online::after,
.ph-avatar-wrap.is-offline::after {
    content: "";
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 14px;
    height: 14px;
    border: 3px solid #fff;
    border-radius: 50%;
    z-index: 5;
}
.ph-avatar-wrap.is-online::after {
    background: #4caf50;
}
.ph-avatar-wrap.is-offline::after {
    background: #bbb;
}

/* Live indicator */
.ph-live-badge {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: #e53e3e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 6;
    white-space: nowrap;
}
.ph-live-ring {
    position: absolute;
    inset: -3px;
    border: 3px solid #e53e3e;
    border-radius: 25px;
    animation: ph-pulse 2s infinite;
    z-index: 1;
}
@keyframes ph-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* Meta info */
.ph-meta {
    margin-top: 12px;
    min-width: 0;
    width: 100%;
    position: relative;
}
.ph-name {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ph-username {
    font-size: 14px;
    color: #888;
    margin: 0;
    line-height: 1.3;
}
.ph-profession {
    font-size: 14px;
    color: #555;
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Report menu */
.ph-report {
    position: relative;
    display: inline-flex;
    align-items: center;
    top: auto;
    right: auto;
}
.ph-report-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #888;
    transition: all 0.2s ease;
    text-decoration: none !important;
}
.ph-report-trigger:hover {
    background: #f0f0f2;
    color: #555;
}
.ph-report-trigger:active,
.show > .ph-report-trigger {
    background: #e8e8eb;
    color: #333;
}
.ph-report-menu {
    min-width: 200px;
    padding: 6px !important;
    border-radius: 12px !important;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}
.ph-report-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333 !important;
    transition: background 0.15s ease;
}
.ph-report-item:hover {
    background: #f5f5f7 !important;
    color: #333 !important;
}
.ph-report-item svg {
    flex-shrink: 0;
}
.ph-report-item--danger {
    color: #dc3545 !important;
}
.ph-report-item--danger:hover {
    background: #fdf0f1 !important;
    color: #dc3545 !important;
}

/* Bio */
.ph-bio {
    margin: 14px 0 8px;
    padding: 0 4px;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    text-align: center;
}

/* Category tags */
.ph-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}
.ph-tag {
    display: inline-flex;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition:
        background 0.2s,
        color 0.2s;
}
.ph-tag:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* Action buttons */
.ph-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
}
.ph-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none !important;
    white-space: nowrap;
}
.ph-btn-primary {
    color: #fff !important;
}
.ph-btn-primary:hover {
    opacity: 0.88;
}
.ph-subscription-btn {
    position: relative;
}
.ph-subscription-btn .ph-subscription-label-hover {
    display: none;
}
.ph-subscription-btn--active {
    background: #ede5ff !important;
    border: 1px solid #d6c2ff;
    color: #6332c8 !important;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}
.ph-subscription-btn--active:hover {
    background: #d9c5ff !important;
    color: #4f28a4 !important;
    opacity: 1;
}
.ph-subscription-btn--active:hover .ph-subscription-label-default {
    display: none;
}
.ph-subscription-btn--active:hover .ph-subscription-label-hover {
    display: inline;
}
.ph-btn-outline {
    background: #f5f5f7;
    color: #333 !important;
    border: 1px solid #e0e0e0;
}
.ph-btn-outline:hover {
    background: #eee;
}
.ph-btn-outline svg {
    width: 18px;
    height: 18px;
}
.ph-btn-icon {
    padding: 10px 12px;
}

/* Actions row (actions + socials together) */
.ph-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}
.ph-actions-row .ph-actions {
    margin-bottom: 0;
}

/* Social links */
.ph-socials {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1.5px solid #e0e0e0;
    border-radius: 14px;
    background: #fff;
}
.ph-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #f5f5f7;
    transition: background 0.2s;
}
.ph-social-link:hover {
    background: #eaeaea;
}
.ph-social-link svg {
    width: 12px;
    height: 12px;
}

/* Stats */
.ph-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 14px 0;
    margin: 0 0 4px;
    border-top: 1px solid #eee;
}
.ph-stats-numbers {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.ph-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
}
.ph-stat svg {
    width: 18px;
    height: 18px;
}

/* Crop Modals */
.crop-modal {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
}
.crop-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}
.crop-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}
.crop-modal-close {
    background: #f5f5f7;
    border: none;
    border-radius: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.crop-modal-close:hover {
    background: #eaeaea;
    color: #333;
}
.crop-modal-body {
    padding: 24px;
    background: #fafafa;
}
.crop-layout {
    display: flex;
    gap: 24px;
    align-items: stretch;
}
.crop-canvas-area {
    flex: 1;
    min-width: 0;
    max-height: 420px;
    border-radius: 14px;
    overflow: hidden;
    background: #e8e8ec;
}
.crop-canvas-area img {
    display: block;
    max-width: 100%;
}
.crop-sidebar {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-shrink: 0;
    width: 200px;
    padding: 20px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eee;
}
.crop-preview-label {
    font-size: 11px;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.crop-preview-box {
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.crop-preview-avatar {
    width: 120px;
    height: 120px;
    border-radius: 22px;
}
.crop-preview-cover {
    width: 168px;
    height: 94px;
    border-radius: 12px;
}
.crop-size-hint {
    font-size: 12px;
    color: #999;
    text-align: center;
    line-height: 1.5;
    margin: 0;
}
.crop-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px;
    border-top: 1px solid #f0f0f0;
}
.crop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.crop-btn-cancel {
    background: #f0f0f2;
    color: #555;
}
.crop-btn-cancel:hover {
    background: #e5e5e8;
}
.crop-btn-save {
    color: #fff;
}
.crop-btn-save:hover {
    opacity: 0.9;
}
.crop-btn-save svg {
    stroke: #fff;
}

@media (min-width: 768px) {
    .crop-sidebar {
        display: flex;
    }
}
@media (max-width: 767.98px) {
    .crop-modal {
        border-radius: 16px;
    }
    .crop-modal-header {
        padding: 16px 18px;
    }
    .crop-modal-body {
        padding: 16px;
    }
    .crop-modal-footer {
        padding: 14px 18px;
    }
    .crop-canvas-area {
        border-radius: 10px;
    }
    .crop-layout {
        gap: 0;
    }
}

/* Nav tabs */
.ph-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: transparent;
    overflow: hidden;
    scrollbar-width: none;
    gap: 4px;
    cursor: default;
    user-select: none;
}
.ph-nav.is-dragging {
    cursor: grabbing;
}
.ph-nav::-webkit-scrollbar {
    display: none;
}
.ph-nav-item {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    padding: 10px 0;
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    transition: color 0.3s ease;
    z-index: 1;
}
/* Hover background pill */
.ph-nav-item::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.03);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: -1;
}
/* Active indicator bar */
.ph-nav-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--tab-color, #6366f1);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ph-nav-item:hover {
    color: #555;
}
.ph-nav-item:hover::before {
    opacity: 1;
}
.ph-nav-item:hover svg {
    transform: scale(1.1) rotate(-3deg);
}
.ph-nav-item.active {
    color: #1a1a2e;
    font-weight: 600;
}
.ph-nav-item.active::before {
    opacity: 1;
    background: rgba(0, 0, 0, 0.025);
}
.ph-nav-item.active::after {
    opacity: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
}
.ph-nav-item svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: transform 0.3s ease;
}
.ph-nav-item .nav-icon-fill {
    fill: currentColor;
    stroke: none;
}

@media (max-width: 991.98px) {
    .ph-nav {
        width: calc(100% + 30px);
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .ph-stats {
        flex-direction: column-reverse;
        align-items: center;
        gap: 10px;
    }
    .ph-socials {
        margin-bottom: 8px;
        gap: 4px;
        padding: 4px 7px;
    }
}

/* ── Desktop overrides ── */
@media (min-width: 992px) {
    .ph-cover {
        min-height: 260px;
    }
    .ph-identity {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 20px;
        margin-top: -60px;
        padding: 0;
    }
    .ph-avatar-wrap {
        width: 120px;
        height: 120px;
    }
    .ph-avatar-wrap .progress-upload {
        line-height: 120px;
    }
    .ph-meta {
        padding-top: 65px;
        margin-top: 0;
    }
    .ph-name {
        justify-content: flex-start;
        font-size: 24px;
    }
    .ph-username {
        text-align: left;
    }
    .ph-profession {
        justify-content: flex-start;
    }
    .ph-report {
        right: auto;
        top: auto;
    }
    .ph-bio {
        text-align: left;
    }
    .ph-tags {
        justify-content: flex-start;
    }
    .ph-actions {
        justify-content: flex-start;
    }
    .ph-actions-row {
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    .ph-stats {
        justify-content: space-between;
    }
    .ph-nav {
        gap: 2px;
        padding: 8px 16px 0;
    }
    .ph-nav-mobile-only {
        display: none;
    }
}

@media (min-width: 1651px) {
    .ph-nav-item {
        flex-direction: row;
        gap: 7px;
        flex: unset;
        padding: 12px 18px;
        font-size: 13.5px;
    }
    .ph-nav-item::before {
        border-radius: 10px;
    }
    .ph-nav-item svg {
        width: 18px;
        height: 18px;
    }
}

/* Support Banner */
.supportBannerProfile {
    border: 1px dashed #6432c8;
    border-radius: 10px;
}
.supportBannerProfile ul li a {
    font-size: 15px;
    color: #000;
}
.supportBannerProfile ul li a:hover {
    color: #272567;
}

/* Mentions and Hashtags Links */
.mention-link,
.hashtag-link {
    pointer-events: auto !important;
    cursor: pointer !important;
    color: var(--color-default) !important;
    text-decoration: none;
}

.mention-link:hover,
.hashtag-link:hover {
    text-decoration: underline;
}

.usrnameMessage {
    display: flex;
    align-items: center;
    gap: 5px;
}
/* ── Sidebar: Creator Search ── */
.sg-search {
    position: relative;
    z-index: 1000;
}
.sg-search-form {
    position: relative;
}
.sg-search-wrap {
    position: relative;
    z-index: 10;
}

.sg-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9898ae;
    pointer-events: none;
    transition: color 0.2s;
    display: flex;
}
.sg-search-icon svg {
    width: 16px;
    height: 16px;
}
.sg-search-wrap:focus-within .sg-search-icon {
    color: var(--color_default, #6d4ae8);
}

.sg-search-input {
    width: 100%;
    padding: 12px 42px 12px 40px;
    background: #fff;
    border: 1.5px solid #e4e4ed;
    border-radius: 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #141428;
    outline: none;
    transition: all 0.25s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
.sg-search-input:hover {
    border-color: #d0d0dc;
}
.sg-search-input:focus {
    border-color: var(--color_default, #6d4ae8);
    box-shadow:
        0 0 0 3px rgba(109, 74, 232, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.05);
}
.sg-search-input::placeholder {
    color: #bbbbc8;
    font-weight: 400;
}

.sg-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 8px;
    background: #f5f5f9;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9898ae;
    transition: all 0.15s;
}
.sg-search-clear:hover {
    background: #e4e4ed;
    color: #5a5a72;
}
.sg-search-clear svg {
    width: 11px;
    height: 11px;
}
.sg-search-clear.show {
    display: flex;
}

/* Dropdown */
.sg-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e4e4ed;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: none;
    z-index: 9;
    animation: sgDropIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sg-dropdown.show {
    display: block;
}

@keyframes sgDropIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Loading */
.sg-dd-loading {
    padding: 24px 16px;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.sg-dd-loading.show {
    display: flex;
}

.sg-loading-dots {
    display: flex;
    gap: 5px;
}
.sg-loading-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color_default, #6d4ae8);
    animation: sgDotPulse 1s ease-in-out infinite;
}
.sg-loading-dots span:nth-child(2) {
    animation-delay: 0.15s;
}
.sg-loading-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes sgDotPulse {
    0%,
    80%,
    100% {
        opacity: 0.25;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

.sg-loading-text {
    font-size: 12px;
    color: #bbbbc8;
    font-weight: 500;
}

/* Body */
.sg-dd-body {
    display: none;
    max-height: 380px;
    overflow-y: auto;
}
.sg-dd-body.show {
    display: block;
}
.sg-dd-body::-webkit-scrollbar {
    width: 3px;
}
.sg-dd-body::-webkit-scrollbar-thumb {
    background: #e4e4ed;
    border-radius: 100px;
}

/* Section */
.sg-dd-section {
    padding: 4px 0;
}
.sg-dd-section + .sg-dd-section {
    border-top: 1px solid #e4e4ed;
}

.sg-dd-section-label {
    font-size: 10px;
    font-weight: 700;
    color: #bbbbc8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 14px 4px;
}

/* Result item */
.sg-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
    animation: sgItemIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sg-result-item:hover {
    background: #f5f5f9;
    text-decoration: none;
    color: inherit;
}

@keyframes sgItemIn {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sg-result-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 2px solid rgba(99, 50, 200, 0.15);
}

.sg-result-info {
    flex: 1;
    min-width: 0;
    display: block;
}

.sg-result-name {
    font-size: 13px;
    font-weight: 600;
    color: #141428;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
}
.sg-result-name > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.sg-result-name mark {
    background: none;
    color: var(--color_default, #6d4ae8);
    font-weight: inherit;
    padding: 0;
}

.sg-verified-badge {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.sg-result-meta {
    font-size: 11.5px;
    color: #9898ae;
    font-weight: 400;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-align: left;
}

.sg-badge-featured {
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    background: #fef3d6;
    color: #d97706;
}

/* Recent item */
.sg-recent-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}
.sg-recent-item:hover {
    background: #f5f5f9;
    text-decoration: none;
    color: inherit;
}

.sg-recent-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sg-recent-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f5f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbbbc8;
    flex-shrink: 0;
}
.sg-recent-icon svg {
    width: 13px;
    height: 13px;
}

.sg-recent-text {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #5a5a72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sg-recent-remove {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 6px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #bbbbc8;
    transition: all 0.15s;
    opacity: 0;
}
.sg-recent-item:hover .sg-recent-remove {
    opacity: 1;
}
.sg-recent-remove:hover {
    background: #e4e4ed;
    color: #5a5a72;
}
.sg-recent-remove svg {
    width: 10px;
    height: 10px;
}

/* Footer */
.sg-dd-footer {
    padding: 8px 14px;
    border-top: 1px solid #e4e4ed;
    text-align: center;
}
.sg-dd-footer a {
    font-size: 12px;
    font-weight: 600;
    color: var(--color_default, #6d4ae8);
    text-decoration: none;
}
.sg-dd-footer a:hover {
    opacity: 0.8;
}

.sg-dd-footer-row {
    padding: 8px 14px;
    border-top: 1px solid #e4e4ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sg-dd-footer-row .sg-clear-all {
    font-size: 11px;
    font-weight: 600;
    color: var(--color_default, #6d4ae8);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}
.sg-dd-footer-row .sg-clear-all:hover {
    opacity: 0.8;
}

/* Empty */
.sg-dd-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
}
.sg-dd-empty.show {
    display: flex;
}

.sg-empty-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f5f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbbbc8;
}
.sg-empty-icon svg {
    width: 20px;
    height: 20px;
}
.sg-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: #5a5a72;
}
.sg-empty-sub {
    font-size: 12px;
    color: #bbbbc8;
    font-weight: 400;
}

/* ── Sidebar: Theme Filter Widget ── */
.tf-container {
    background: #fff;
    border: 1.5px solid #e2e2ef;
    border-radius: 16px;
    overflow: hidden;
}
.tf-header {
    padding: 16px 18px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tf-header-left {
    display: flex;
    align-items: center;
    gap: 7px;
}
.tf-title-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(100, 50, 200, 0.08);
    border: 1px solid rgba(100, 50, 200, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #6432c8);
    flex-shrink: 0;
}
.tf-title-icon svg {
    width: 12px;
    height: 12px;
}
.tf-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.02em;
    margin: 0;
}
.tf-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 99px;
    background: var(--primary, #6432c8);
    color: #fff;
    line-height: 1.4;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* "All posts" toggle */
.tf-all-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 18px 10px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    border: 1.5px solid #e2e2ef;
    background: #fff;
    transition: all 0.18s;
    user-select: none;
}
.tf-all-toggle:hover {
    background: #f5f5fb;
}
.tf-all-toggle.tf-all-active {
    background: rgba(100, 50, 200, 0.06);
    border-color: rgba(100, 50, 200, 0.18);
}
.tf-all-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #48486a;
}
.tf-all-toggle.tf-all-active .tf-all-left {
    color: var(--primary, #6432c8);
    font-weight: 700;
}
.tf-all-check {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #f0f1f3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8888aa;
    transition: all 0.18s;
}
.tf-all-check svg {
    width: 10px;
    height: 10px;
}
.tf-all-toggle.tf-all-active .tf-all-check {
    background: var(--primary, #6432c8);
    color: #fff;
}
.tf-count {
    font-size: 11px;
    font-weight: 600;
    color: #bcbcd4;
    background: #f0f1f3;
    padding: 1px 7px;
    border-radius: 99px;
    transition: all 0.18s;
}
.tf-all-toggle.tf-all-active .tf-count {
    background: rgba(100, 50, 200, 0.12);
    color: var(--primary, #6432c8);
}

/* Divider */
.tf-divider {
    height: 1px;
    background: #e2e2ef;
    margin: 0 18px 6px;
}

/* Scrollable theme list */
.tf-list {
    padding: 6px 10px 10px;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tf-list::-webkit-scrollbar {
    width: 4px;
}
.tf-list::-webkit-scrollbar-track {
    background: transparent;
}
.tf-list::-webkit-scrollbar-thumb {
    background: #d0d0e4;
    border-radius: 99px;
}

/* Theme chip */
.tf-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: transparent;
    transition: all 0.18s;
    position: relative;
    user-select: none;
}
.tf-chip:hover {
    background: #f5f5fb;
}
.tf-chip-active {
    background: rgba(100, 50, 200, 0.06);
    border-color: rgba(100, 50, 200, 0.18);
}

/* Thumbnail */
.tf-thumb {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0f1f3;
    position: relative;
}
.tf-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Checkmark overlay */
.tf-check-overlay {
    position: absolute;
    inset: 0;
    background: rgba(100, 50, 200, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 8px;
}
.tf-check-overlay svg {
    width: 14px;
    height: 14px;
    color: #fff;
}
.tf-chip-active .tf-check-overlay {
    opacity: 1;
    transform: scale(1);
}

/* Info */
.tf-info {
    flex: 1;
    min-width: 0;
}
.tf-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.18s;
}
.tf-chip-active .tf-name {
    color: var(--primary, #6432c8);
}
.tf-post-count {
    font-size: 11px;
    font-weight: 500;
    color: #bcbcd4;
    margin-top: 1px;
}

/* Reset button */
.tf-reset-wrap {
    padding: 4px 10px 12px;
}
.tf-reset-btn {
    width: 100%;
    padding: 8px 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #bcbcd4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.18s;
}
.tf-reset-btn svg {
    width: 11px;
    height: 11px;
}
.tf-reset-btn:hover {
    background: #f5f5fb;
    color: var(--primary, #6432c8);
}

/* ── Sidebar: Offers Card ── */
.sb-offers-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f1f3;
}
.sb-offers-header svg {
    flex-shrink: 0;
    color: #555;
}
.sb-offers-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}
.sb-offer-card {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.sb-offer-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}
.sb-offer-cover {
    height: 160px;
    background-size: cover;
    background-position: center;
}
.sb-offer-body {
    padding: 16px;
}
.sb-offer-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
    line-height: 1.3;
}
.sb-offer-price-row {
    margin-bottom: 14px;
}
.sb-offer-price {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
}
.sb-offer-price small {
    font-size: 13px;
    font-weight: 500;
    color: #888;
}
.sb-offer-spots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
    margin-bottom: 14px;
}
.sb-offer-spots svg {
    flex-shrink: 0;
}
.sb-offer-spots.sold-out {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}
.sb-offer-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f3eeff 0%, #ece3ff 100%);
    border: 1px solid #d4c4f0;
    border-radius: 10px;
    margin-bottom: 14px;
    color: #6332c8;
}
.sb-offer-sub svg {
    flex-shrink: 0;
}
.sb-offer-sub-text {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}
.sb-offer-sub-text strong {
    font-size: 18px;
    font-weight: 800;
    margin-right: 2px;
}
.sb-offer-perks {
    margin-bottom: 14px;
}
.sb-offer-perks h6 {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}
.sb-offer-perks-list {
    font-size: 13.5px;
    color: #444;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.sb-offer-perks-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.sb-offer-perks-list li {
    padding: 3px 0;
    padding-left: 18px;
    position: relative;
}
.sb-offer-perks-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6332c8;
}
.sb-offer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition:
        transform 0.15s,
        box-shadow 0.15s;
    background: #6332c8;
    color: #fff;
    text-decoration: none;
}
.sb-offer-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 50, 200, 0.25);
    color: #fff;
    text-decoration: none;
}
.sb-offer-btn-edit {
    background: transparent;
    color: #6332c8;
    border: 1.5px solid #6332c8;
}
.sb-offer-btn-edit:hover {
    background: #f3eeff;
    color: #6332c8;
    box-shadow: none;
}
.sb-offer-owned {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #198754;
    background: #e8f5e9;
    border-radius: 10px;
}

/* Legacy offer card styles (used in user_offers page) */
.perks-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    margin-bottom: 10px;
}
.perks-list {
    font-size: 14px;
    color: #333;
}
.perks-list li {
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    color: #333;
}
.perks-list li:before {
    content: "• ";
    font-weight: bold;
    margin-right: 0.5rem;
}
.offerCard {
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    border-radius: 10px;
    border: 1px solid rgba(217, 217, 217, 1);
    overflow: hidden;
}
.offerCard .perks-list {
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.offerCard:hover {
    transform: translateY(-2px);
}
.btn-pack {
    transition: all 0.3s ease;
}
.btn-pack:hover {
    transform: scale(1.02);
}
.Sub-offered {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    background: white;
    border: 1px solid rgba(99, 50, 200, 1);
    border-radius: 10px;
}
.Sub-offered .Sub-offered-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.Sub-offered-text {
    display: flex;
    flex-direction: column;
}
.Sub-offered-text span {
    color: rgba(99, 50, 200, 1);
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 600;
}
.Sub-offered-text span:first-child {
    margin-bottom: -7px;
}
.Sub-offered h5 {
    color: rgba(99, 50, 200, 1);
    font-weight: 900 !important ;
    font-size: 30px;
    margin-bottom: 0px;
}
.sidebarTitle {
    color: black;
    font-size: 18px;
}

/** Click Effect for Mobile Btns **/

.clickable-btn {
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.clickable-btn:active {
    background-color: rgba(99, 50, 200, 0.1);
    transform: scale(0.95);
}

.clickable-btn:active svg {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.menuMobile .clickable-btn:active {
    background-color: rgba(99, 50, 200, 0.1);
    transform: scale(0.88);
}

.menuMobile .clickable-btn:active svg,
.menuMobile .clickable-btn:active svg path {
    opacity: 0.3;
    fill: #6432c8 !important;
    stroke: #6432c8 !important;
}

/* Mobile bottom nav — icon sizing & alignment */
.menuMobile .btn-mobile svg,
.menuMobile .mobile-create-hub-toggle svg {
    width: 22px;
    height: 22px;
}
.menuMobile .list-inline {
    align-items: center;
}
.menuMobile .bd-highlight li {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}
.menuMobile .clickable-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.menuMobile .btn-mobile,
.menuMobile .mobile-create-hub-toggle,
.menuMobile .mobile-nav-profile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Mobile nav profile avatar */
.mobile-nav-avatar {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color .25s;
    display: block;
}
.mobile-nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mobile-nav-profile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}
body.mobile-menu-open .mobile-nav-avatar {
    border-color: #6332C8;
}
/* Hamburger → Ellipsis animation (two pre-drawn groups, cross-fade + scale) */
.mobile-menu-icon { overflow: visible; }
.navbar-toggler-mobile,
.menuMobile .clickable-btn { overflow: visible; }

.ham-state,
.ellipsis-state {
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Default: hamburger visible, ellipsis hidden */
.ham-state      { opacity: 1; transform: scale(1); }
.ellipsis-state { opacity: 0; transform: scale(0.4); }

/* Menu open: hamburger hides, ellipsis appears */
body.mobile-menu-open .ham-state      { opacity: 0; transform: scale(0.4) rotate(-45deg); }
body.mobile-menu-open .ellipsis-state { opacity: 1; transform: scale(1); }

/* Dark mode ellipsis colour */
body.dark-mode .ellipsis-state,
body[data-theme="dark"] .ellipsis-state { fill: #a78bfa; }

body.dark-mode .mobile-menu-open .mobile-nav-avatar,
.dark-lg body.mobile-menu-open .mobile-nav-avatar { border-color: #8b5cf6; }
.menuMobile .clickable-btn:active .mobile-nav-avatar {
    transform: scale(0.88);
}
.menuMobile .clickable-btn:active .mobile-nav-avatar img {
    opacity: 0.7;
}

.bd-highlight li {
    padding-top: 0.8rem;
    padding-bottom: 1.2rem;
}

.btn-grp-course {
    position: absolute;
    right: 10px;
    top: 10px;
    gap: 10px;
    transform: translateY(-5px);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s,
        transform 0.3s;
}

.setting-course-card:hover .btn-grp-course {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.setting-course-card:hover {
    text-decoration: none;
}
#faqAccordion .border-bottom:last-child,
#curriculumAccordion .border-bottom:last-child {
    border-bottom: none !important;
}
.btnCourseLike:hover {
    text-decoration: none !important;
}
.flexCenter {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.flex-center-gap5 {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.flex-center-gap10 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
media-poster-image .poster {
    border-radius: 10px !important;
}

.active .icon-chevron-setting svg path {
    fill: white !important;
}

/* Pull to Refresh */

.pull-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000;
    border-radius: 50%;
}

@keyframes pull-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #6432c8;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Custom column widths for settings sidebar */
@media (min-width: 992px) {
    .col-lg-3-custom {
        flex: 0 0 calc(25% + 10px);
        max-width: calc(25% + 10px);
    }

    .col-lg-9-custom {
        flex: 0 0 calc(75% - 10px);
        max-width: calc(75% - 10px);
    }
}
@media only screen and (max-width: 991.98px) {
    #bookCallModal {
        padding-bottom: 60px;
    }
}
/* File Upload Progress Bar Styles */
.file-upload-progress {
    margin-top: 10px;
}
.file-upload-progress .progress {
    height: 4px;
    border-radius: 2px;
    background-color: #e0e0e0;
}
.file-upload-progress .progress-bar {
    transition: width 0.3s ease;
    background-color: #6432c8;
}

/* Heading settings page */
.lp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.lp-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lp-header-left img {
    width: 56px;
    height: 56px;
}
.lp-header-left h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.2rem;
}
.lp-header-left p {
    margin: 0;
    font-size: 13px;
    color: #6c757d;
}
.row > .lp-header {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

/* ===== Footer Tiny Redesign ===== */
@media (max-width: 767.98px) {
    .footer-tiny-wrapper {
        display: none;
    }
}
.footer-tiny-wrapper {
    text-align: center;
    padding: 8px 0;
}
.footer-tiny-wrapper small {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
}
.footer-tiny-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
}
.footer-tiny-list li {
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
}
.footer-tiny-list li:not(:last-child)::after {
    content: "\00B7";
    margin: 0 6px;
    color: #adb5bd;
    font-weight: bold;
    font-size: 14px;
}
.footer-tiny-list li a {
    color: #868e96;
    font-size: 11.5px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-tiny-list li a:hover {
    color: #6332c8;
    text-decoration: none;
}

/* Footer Tiny Payment Logos */
.footer-tiny-payments {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.footer-tiny-payment-row {
    display: flex;
    justify-content: center;
}
.footer-tiny-cmi-logo {
    max-width: 320px;
    width: 100%;
    height: auto;
    opacity: 0.7;
}
.footer-tiny-payzone-logo {
    max-width: 200px;
    width: 100%;
    height: auto;
    opacity: 0.7;
}

/* ===== Locale Selectors Bar (Desktop) ===== */
.locale-selectors {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    flex-wrap: wrap;
}
.locale-selector-item {
    position: relative;
}
/* Light mode button */
.locale-selector-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background-color: #f0f0f5;
    border: 1px solid #e2e2ea;
    border-radius: 20px;
    color: #3a3a4a;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.3;
}
.locale-selector-btn:hover,
.locale-selector-btn:focus {
    background-color: #e6e6f0;
    border-color: #d0d0de;
    color: #6332c8;
    text-decoration: none;
    outline: none;
    box-shadow: none;
}
.locale-selector-btn::after {
    display: none;
}
.locale-selector-icon {
    flex-shrink: 0;
    opacity: 0.7;
}
.locale-selector-flag {
    font-size: 13px;
    line-height: 1;
}
.locale-selector-label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.locale-selector-dropdown {
    min-width: 200px;
    border-radius: 12px;
    border: 1px solid #e2e2ea;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 6px;
    max-height: none;
}
.locale-selector-dropdown-scroll {
    max-height: 250px;
    overflow-y: auto;
}
.locale-selector-dropdown .dropdown-item {
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    transition: background-color 0.15s ease;
    margin-bottom: 1px;
}
.locale-selector-dropdown .dropdown-item:hover {
    background-color: #f5f0ff !important;;
    color: #6332c8;
}
.locale-selector-dropdown .dropdown-item.active {
     background-color: #f5f0ff !important;
    color: #6332C8;
}

/* Dark mode overrides */
.dark-mode .locale-selector-btn,
body[data-theme="dark"] .locale-selector-btn {
    background-color: #1e1e2e;
    border-color: #2e2e40;
    color: #e0e0e6;
}
.dark-mode .locale-selector-btn:hover,
body[data-theme="dark"] .locale-selector-btn:hover {
    background-color: #2a2a3e;
    border-color: #3e3e55;
    color: #c4a0ff;
}
.dark-mode .locale-selector-dropdown,
body[data-theme="dark"] .locale-selector-dropdown {
    background-color: #1e1e2e;
    border-color: #2e2e40;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.dark-mode .locale-selector-dropdown .dropdown-item,
body[data-theme="dark"] .locale-selector-dropdown .dropdown-item {
    color: #c8c8d4;
}
.dark-mode .locale-selector-dropdown .dropdown-item:hover,
body[data-theme="dark"] .locale-selector-dropdown .dropdown-item:hover {
    background-color: #2a2a3e;
    color: #c4a0ff;
}
.dark-mode .locale-selector-dropdown .dropdown-item.active,
body[data-theme="dark"] .locale-selector-dropdown .dropdown-item.active {
    background-color: #6332c8;
    color: #fff;
}

@media (max-width: 767.98px) {
    .footer-tiny-cmi-logo {
        max-width: 260px;
    }
}

/* ============================================================
   REDESIGNED MENUS - Desktop Dropdown & Mobile Navigation
   ============================================================ */

/* --- Desktop Dropdown Menu (Bottom-left sidebar) --- */

.profileMenu {
    border-radius: 14px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;
}
.profileMenu:hover {
    background: #f8f7fc !important;
    border-color: rgba(99, 50, 200, 0.15) !important;
}
.dark-mode .profileMenu,
body[data-theme="dark"] .profileMenu {
    background: #1a0d2e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.dark-mode .profileMenu:hover,
body[data-theme="dark"] .profileMenu:hover {
    background: #221440 !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}
.icon-prfl {
    opacity: 0.5;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}
.profileMenu:hover .icon-prfl {
    opacity: 1;
}
.show > .profileMenu .icon-prfl {
    transform: rotate(180deg);
    opacity: 1;
}

.user-icon-nav {
    display: flex;
    align-items: center;
}
.user-icon-nav img {
    height: 36px !important;
    width: 36px !important;
    object-fit: cover;
    border: 2px solid rgba(99, 50, 200, 0.15);
}
.user-nav-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.user-nav-info .user-first-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    color: #1a1a2e;
    line-height: 1.3;
}
.user-nav-info .user-name {
    font-size: 12px;
    color: #8b8b9e;
    line-height: 1.3;
}
.dark-mode .user-nav-info .user-first-name,
body[data-theme="dark"] .user-nav-info .user-first-name {
    color: #fff !important;
}
.dark-mode .user-nav-info .user-name,
body[data-theme="dark"] .user-nav-info .user-name {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Redesigned Dropdown */
.dd-menu-redesigned {
    min-width: 260px !important;
    max-width: 300px;
    padding: 0 !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
    animation: ddMenuSlideUp 0.2s ease-out;
    background: #fff !important;
}
.dark-mode .dd-menu-redesigned,
body[data-theme="dark"] .dd-menu-redesigned {
    background: #1a0d2e !important;
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

@keyframes ddMenuSlideUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dd-menu-redesigned:before {
    display: none !important;
}

/* Profile Header */
.dd-menu-profile-header {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dark-mode .dd-menu-profile-header,
body[data-theme="dark"] .dd-menu-profile-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.dd-menu-profile-link {
    display: block;
    text-decoration: none !important;
    padding: 10px 12px;
    border-radius: 12px;
    transition: background 0.15s ease;
}
.dd-menu-profile-link:hover {
    background: #f4f0ff;
    text-decoration: none !important;
}
.dark-mode .dd-menu-profile-link:hover,
body[data-theme="dark"] .dd-menu-profile-link:hover {
    background: rgba(99, 50, 200, 0.12);
}
.dd-menu-avatar img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 2px solid rgba(99, 50, 200, 0.2);
}
.dd-menu-profile-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.3;
}
.dd-menu-profile-username {
    font-size: 13px;
    color: #8b8b9e;
    line-height: 1.3;
}
.dark-mode .dd-menu-profile-name,
body[data-theme="dark"] .dd-menu-profile-name {
    color: #fff;
}
.dark-mode .dd-menu-profile-username,
body[data-theme="dark"] .dd-menu-profile-username {
    color: rgba(255, 255, 255, 0.5);
}

/* Menu Sections */
.dd-menu-section {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dd-menu-section-last {
    border-bottom: none;
}
.dark-mode .dd-menu-section,
body[data-theme="dark"] .dd-menu-section {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Finance Card */
.dd-menu-finance-card {
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ecff 100%);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 6px;
}
.dark-mode .dd-menu-finance-card,
body[data-theme="dark"] .dd-menu-finance-card {
    background: linear-gradient(
        135deg,
        rgba(99, 50, 200, 0.15) 0%,
        rgba(99, 50, 200, 0.08) 100%
    );
}
.dd-menu-finance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}
.dd-menu-finance-row + .dd-menu-finance-row {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(99, 50, 200, 0.1);
}
.dd-menu-finance-label {
    font-size: 12px;
    font-weight: 500;
    color: #6b6b80;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dd-menu-finance-value {
    font-size: 15px;
    font-weight: 700;
    color: #6332c8;
}
.dark-mode .dd-menu-finance-label,
body[data-theme="dark"] .dd-menu-finance-label {
    color: rgba(255, 255, 255, 0.5);
}
.dark-mode .dd-menu-finance-value,
body[data-theme="dark"] .dd-menu-finance-value {
    color: #a78bfa;
}

/* Menu Items */
.dd-menu-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 12px !important;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #3a3a4a !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
    border: none !important;
    background: transparent !important;
    width: 100%;
}
.dd-menu-item:hover {
    background: #f4f0ff !important;
    color: #6332c8 !important;
    text-decoration: none !important;
}
.dd-menu-item svg {
    flex-shrink: 0;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}
.dd-menu-item:hover svg {
    opacity: 1;
    stroke: #6332c8;
}
.dd-menu-item:hover path {
    fill: none !important;
}
.dark-mode .dd-menu-item,
body[data-theme="dark"] .dd-menu-item {
    color: rgba(255, 255, 255, 0.85) !important;
}
.dark-mode .dd-menu-item:hover,
body[data-theme="dark"] .dd-menu-item:hover {
    background: rgba(99, 50, 200, 0.12) !important;
    color: #a78bfa !important;
}
.dark-mode .dd-menu-item:hover svg,
body[data-theme="dark"] .dd-menu-item:hover svg {
    stroke: #a78bfa;
}

/* Danger Item (Logout) */
.dd-menu-item-danger:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}
.dd-menu-item-danger:hover svg {
    stroke: #dc2626;
}
.dark-mode .dd-menu-item-danger:hover,
body[data-theme="dark"] .dd-menu-item-danger:hover {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #fca5a5 !important;
}
.dark-mode .dd-menu-item-danger:hover svg,
body[data-theme="dark"] .dd-menu-item-danger:hover svg {
    stroke: #fca5a5;
}

/* ============================================================
   REDESIGNED MOBILE MENU
   ============================================================ */

/* Close button header */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px 4px 16px;
}
.mobile-menu-header .mobile-menu-logo {
    height: 28px;
    width: auto;
}
.mobile-menu-header .close-menu-mobile {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: none;
    background: #f4f0ff;
    color: #6332c8;
    transition: all 0.15s ease;
    padding: 0;
    cursor: pointer;
    outline: none;
}
.mobile-menu-header .close-menu-mobile:hover {
    background: #ebe4ff;
}
.dark-mode .mobile-menu-header .close-menu-mobile,
body[data-theme="dark"] .mobile-menu-header .close-menu-mobile {
    background: rgba(99, 50, 200, 0.15);
    color: #a78bfa;
}

/* Mobile menu slide-in panel */
/* Disable drawer transition during viewport resize to prevent slide glitch */
.resize-no-transition .navbar .navbar-collapse {
    transition: none !important;
}

@media (max-width: 991.98px) {
    .navbar .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        left: 100vw !important;
        right: auto !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        min-height: 100vh !important;
        background: #ffffff !important;
        padding: 12px 16px 100px 16px !important;
        border: none !important;
        z-index: 99999999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-transition: left 0.3s ease-out !important;
        -o-transition: left 0.3s ease-out !important;
        transition: left 0.3s ease-out !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    .navbar .navbar-collapse .navbar-nav {
        background: #ffffff !important;
        width: 100% !important;
        padding-bottom: 20px !important;
    }

    .navbar .navbar-collapse.show {
        left: 0 !important;
    }

    .dark-mode .navbar .navbar-collapse,
    body[data-theme="dark"] .navbar .navbar-collapse {
        background: #100723 !important;
    }

    .dark-mode .navbar .navbar-collapse .navbar-nav,
    body[data-theme="dark"] .navbar .navbar-collapse .navbar-nav {
        background: #100723 !important;
    }

    /* Override all potential container constraints */
    .navbar .container-fluid,
    .navbar .container,
    .navbar-collapse .container-fluid,
    .navbar-collapse .container {
        position: static !important;
        max-width: none !important;
        width: 100% !important;
    }

    /* Remove any max-width constraints on mobile */
    .navbar-mobile .navbar-collapse,
    .navbar .navbar-collapse.navbar-mobile {
        max-width: none !important;
    }

    /* Prevent body scroll when menu is open */
    body.mobile-menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100vh !important;
    }

    /* Override Bootstrap container styles within navbar-collapse */
    .navbar-collapse > *,
    .navbar-collapse .navbar-nav {
        max-width: none !important;
        width: 100% !important;
    }

    /* Force full screen - override ALL potential conflicts */
    #navbarCollapse,
    .navbar-collapse.navbar-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    /* Remove any card/modal styling */
    .navbar .navbar-collapse,
    #navbarCollapse {
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
    }

    /* Skip Bootstrap collapse height animation — menu slides via left, not height */
    #navbarCollapse.collapsing {
        height: auto !important;
        -webkit-transition: left 0.3s ease-out !important;
        -o-transition: left 0.3s ease-out !important;
        transition: left 0.3s ease-out !important;
        overflow: visible !important;
    }
}

/* Additional menu styles - outside media query */
/* Ensure menu is above EVERYTHING */
body.mobile-menu-open .navbar-collapse,
body.mobile-menu-open #navbarCollapse {
    z-index: 99999999 !important;
}
/* Menu opens immediately — no delay waiting for icon animation */
body.mobile-menu-open .navbar .navbar-collapse {
    transition-delay: 0s !important;
}

/* Subtle overlay for drawer */
body.mobile-menu-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 99999998;
}
@media (min-width: 992px) {
    body.mobile-menu-open::before {
        background: rgba(0, 0, 0, 0.4);
    }
}

/* ══ Desktop Drawer Panel ══ */
@media (min-width: 992px) {
    /* Override Bootstrap collapse — always rendered, positioned off-screen */
    #navbarCollapse,
    .navbar-collapse.navbar-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    .navbar .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        left: -400px !important;
        right: auto !important;
        bottom: 0 !important;
        width: 380px !important;
        max-width: 380px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 99999999 !important;
        margin: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .navbar .navbar-collapse.show {
        left: 0 !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08) !important;
    }

    #navbarCollapse.collapsing {
        height: auto !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: visible !important;
    }

    body.mobile-menu-open {
        overflow: hidden !important;
    }

    /* Desktop profile trigger active state */
    body.mobile-menu-open .desktop-profile-trigger .icon-prfl {
        transform: rotate(180deg);
        opacity: 1;
    }

    .dark-mode .navbar .navbar-collapse.show,
    body[data-theme="dark"] .navbar .navbar-collapse.show {
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3) !important;
    }
}

/* Profile Card */
.mobile-menu-profile-card {
    margin-bottom: 8px !important;
}
.mobile-menu-profile-card > a {
    display: flex !important;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ecff 100%);
    border-radius: 16px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.mobile-menu-profile-card > a:hover {
    background: linear-gradient(135deg, #f0ecff 0%, #e8e0ff 100%);
}
.dark-mode .mobile-menu-profile-card > a,
body[data-theme="dark"] .mobile-menu-profile-card > a {
    background: linear-gradient(
        135deg,
        rgba(99, 50, 200, 0.15) 0%,
        rgba(99, 50, 200, 0.08) 100%
    );
}
.mobile-menu-avatar img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 2px solid rgba(99, 50, 200, 0.2);
}
.mobile-menu-profile-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}
.mobile-menu-profile-username {
    font-size: 13px;
    color: #8b8b9e;
    line-height: 1.4;
}
.mobile-menu-profile-card .ml-auto svg {
    color: #8b8b9e;
}
.dark-mode .mobile-menu-profile-name,
body[data-theme="dark"] .mobile-menu-profile-name {
    color: #fff;
}
.dark-mode .mobile-menu-profile-username,
body[data-theme="dark"] .mobile-menu-profile-username {
    color: rgba(255, 255, 255, 0.5);
}
.dark-mode .mobile-menu-profile-card .ml-auto svg,
body[data-theme="dark"] .mobile-menu-profile-card .ml-auto svg {
    color: rgba(255, 255, 255, 0.3);
}

/* Finance Card Mobile */
.mobile-menu-finance-card {
    margin-bottom: 12px !important;
    padding: 0 !important;
}
.mobile-menu-finance-grid {
    display: flex;
    gap: 10px;
    padding: 0;
}
.mobile-menu-finance-item {
    flex: 1;
    background: #f8f7fc;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dark-mode .mobile-menu-finance-item,
body[data-theme="dark"] .mobile-menu-finance-item {
    background: rgba(99, 50, 200, 0.1);
}
.mobile-menu-finance-label {
    font-size: 11px;
    font-weight: 600;
    color: #8b8b9e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mobile-menu-finance-value {
    font-size: 18px;
    font-weight: 700;
    color: #6332c8;
}
.dark-mode .mobile-menu-finance-label,
body[data-theme="dark"] .mobile-menu-finance-label {
    color: rgba(255, 255, 255, 0.45);
}
.dark-mode .mobile-menu-finance-value,
body[data-theme="dark"] .mobile-menu-finance-value {
    color: #a78bfa;
}
.mobile-menu-add-funds {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 10px;
    background: #6332c8;
    color: #fff !important;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.mobile-menu-add-funds:hover {
    background: #5228a8;
    color: #fff !important;
    text-decoration: none !important;
}

/* Section Labels */
.mobile-menu-section-label {
    padding: 16px 4px 6px !important;
    margin: 0 !important;
}
.mobile-menu-section-label span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #b0b0c0;
}
.dark-mode .mobile-menu-section-label span,
body[data-theme="dark"] .mobile-menu-section-label span {
    color: rgba(255, 255, 255, 0.3);
}

/* Menu Links */
.mobile-menu-link {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 15px;
    font-weight: 500;
    color: #3a3a4a !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
    margin: 1px 0;
}
.mobile-menu-link:hover,
.mobile-menu-link:active {
    background: #f4f0ff;
    color: #6332c8 !important;
    text-decoration: none !important;
}
.mobile-menu-link svg {
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
.mobile-menu-link:hover svg {
    opacity: 1;
    stroke: #6332c8;
}
.dark-mode .mobile-menu-link,
body[data-theme="dark"] .mobile-menu-link {
    color: rgba(255, 255, 255, 0.85) !important;
}
.dark-mode .mobile-menu-link:hover,
body[data-theme="dark"] .mobile-menu-link:hover {
    background: rgba(99, 50, 200, 0.12);
    color: #a78bfa !important;
}
.dark-mode .mobile-menu-link:hover svg,
body[data-theme="dark"] .mobile-menu-link:hover svg {
    stroke: #a78bfa;
}

/* Accent Link (Become Creator) */
.mobile-menu-link-accent {
    color: #6332c8 !important;
    background: rgba(99, 50, 200, 0.06);
}
.mobile-menu-link-accent svg {
    opacity: 0.9;
    stroke: #6332c8;
}
.dark-mode .mobile-menu-link-accent,
body[data-theme="dark"] .mobile-menu-link-accent {
    color: #a78bfa !important;
    background: rgba(99, 50, 200, 0.1);
}

/* Danger Link (Logout) */
.mobile-menu-logout {
    margin-top: 8px !important;
    margin-bottom: 30px !important;
    padding-top: 8px !important;
    padding-bottom: 20px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.dark-mode .mobile-menu-logout,
body[data-theme="dark"] .mobile-menu-logout {
    border-top-color: rgba(255, 255, 255, 0.06);
}
.mobile-menu-link-danger:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}
.mobile-menu-link-danger:hover svg {
    stroke: #dc2626 !important;
}
.dark-mode .mobile-menu-link-danger:hover,
body[data-theme="dark"] .mobile-menu-link-danger:hover {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #fca5a5 !important;
}
.dark-mode .mobile-menu-link-danger:hover svg,
body[data-theme="dark"] .mobile-menu-link-danger:hover svg {
    stroke: #fca5a5 !important;
}

/* Dual Selector (Country & Currency) */
.mobile-menu-dual-selector {
    padding: 0 !important;
}
.mobile-menu-dual-selector-row {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}
.mobile-menu-dual-item {
    flex: 1;
}
.mobile-menu-dual-link {
    padding: 10px 12px !important;
    font-size: 14px !important;
    gap: 8px !important;
}
.mobile-menu-dual-text {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-menu-dual-link svg:first-child {
    flex-shrink: 0;
}
.mobile-menu-dual-link svg:last-child {
    flex-shrink: 0;
}

/* Language Dropdown */
.mobile-menu-lang-dropdown {
    padding: 4px 0 4px 48px;
}

/* Dropdown alignment for dual selector */
.mobile-menu-dual-selector .mobile-menu-lang-dropdown {
    padding: 4px 0 !important;
    margin-left: 0 !important;
}
.mobile-menu-lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #6b6b80;
    text-decoration: none !important;
    transition: all 0.15s ease;
}
.mobile-menu-lang-item:hover {
    background: #f4f0ff;
    color: #6332c8;
    text-decoration: none !important;
}
.mobile-menu-lang-item.active {
    font-weight: 600;
    color: #6332c8;
}
.dark-mode .mobile-menu-lang-item,
body[data-theme="dark"] .mobile-menu-lang-item {
    color: rgba(255, 255, 255, 0.6);
}
.dark-mode .mobile-menu-lang-item:hover,
body[data-theme="dark"] .mobile-menu-lang-item:hover {
    background: rgba(99, 50, 200, 0.1);
    color: #a78bfa;
}
.dark-mode .mobile-menu-lang-item.active,
body[data-theme="dark"] .mobile-menu-lang-item.active {
    color: #a78bfa;
}

/* Country Selector (Mobile) */
.mobile-menu-flag {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
    background-size: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.mobile-menu-country-list {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mobile-menu-country-list::-webkit-scrollbar {
    width: 4px;
}
.mobile-menu-country-list::-webkit-scrollbar-track {
    background: transparent;
}
.mobile-menu-country-list::-webkit-scrollbar-thumb {
    background: rgba(99, 50, 200, 0.2);
    border-radius: 4px;
}
.mobile-menu-country-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 4px 12px;
}
.dark-mode .mobile-menu-country-divider,
body[data-theme="dark"] .mobile-menu-country-divider {
    background: rgba(255, 255, 255, 0.08);
}

/* ── TinyMCE toolbar: compact buttons (25% smaller) ── */
.tox:not(.tox-tinymce-inline) .tox-editor-header .tox-tbtn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    margin: 0 !important;
    padding: 2px !important;
}
.tox:not(.tox-tinymce-inline) .tox-editor-header .tox-tbtn svg,
.tox:not(.tox-tinymce-inline) .tox-editor-header .tox-tbtn .tox-icon svg {
    width: 20px !important;
    height: 20px !important;
}
/* Dropdown arrow buttons (forecolor, etc.) */
.tox:not(.tox-tinymce-inline) .tox-editor-header .tox-tbtn--select,
.tox:not(.tox-tinymce-inline) .tox-editor-header .tox-split-button {
    width: auto !important;
    min-width: auto !important;
}
.tox:not(.tox-tinymce-inline) .tox-editor-header .tox-split-button .tox-tbtn {
    width: auto !important;
    min-width: auto !important;
    padding: 0 3px !important;
}
.tox:not(.tox-tinymce-inline) .tox-editor-header .tox-tbtn--bespoke {
    width: auto !important;
    min-width: auto !important;
    height: 28px !important;
}
/* Toolbar group spacing */
.tox:not(.tox-tinymce-inline) .tox-toolbar__group {
    padding: 0 3px !important;
}
/* Toolbar row height */
.tox:not(.tox-tinymce-inline) .tox-toolbar,
.tox:not(.tox-tinymce-inline) .tox-toolbar__overflow,
.tox:not(.tox-tinymce-inline) .tox-toolbar__primary {
    min-height: 32px !important;
    padding: 2px 0 !important;
}

/* ==========================================
   COURSE DESIGN SYSTEM
   Shared between Create Course Modal & Edit Course Form
   ========================================== */

/* Base Variables */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    --primary: #6432c8;
    --primary-hover: #5429a8;
    --primary-light: rgba(100, 50, 200, 0.1);
    --success: #10b981;
    --success-light: #d1fae5;
    --error: #ef4444;
    --error-light: #fee2e2;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal Base */
#addCourse {
    z-index: 1060 !important;
}
#addCourse + .modal-backdrop {
    z-index: 1055 !important;
}
.course-modal {
    border-radius: var(--radius-lg);
    border: none;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    max-height: calc(100vh - 3.5rem);
    display: flex;
    flex-direction: column;
}
.course-modal > .modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.course-modal-header {
    flex-shrink: 0;
}
.course-progress-wrapper {
    flex-shrink: 0;
}
.course-modal-footer {
    flex-shrink: 0;
}

/* Modal Header */
.course-modal-header {
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(135deg, var(--primary) 0%, #7b4ae3 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 0;
}
.course-modal-title {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.2;
    color: white;
    margin: 0;
}
.course-modal-subtitle {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, 0.75);
    margin: 2px 0 0 0;
}
.course-modal-close {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
}
.course-modal-close:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
}

/* Progress Steps */
.course-progress-wrapper {
    position: relative;
    padding: var(--space-4) var(--space-6) var(--space-6);
    background: var(--gray-50);
}
.course-progress-track,
.course-progress-fill {
    position: absolute;
    top: 46px;
    left: 10%;
    right: 10%;
    height: 4px;
    border-radius: var(--radius-full);
}
.course-progress-track {
    background: var(--gray-200);
}
.course-progress-fill {
    background: var(--primary);
    width: 0%;
    transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.course-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    position: relative;
    z-index: 2;
}
.course-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform var(--transition-base);
}
.course-step:hover {
    transform: translateY(-2px);
}
.course-step-circle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    position: relative;
}
.course-step-number {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--gray-400);
    transition: all var(--transition-base);
}
.course-step-check {
    display: none;
    position: absolute;
}
.course-step.active .course-step-circle {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(100, 50, 200, 0.15);
}
.course-step.active .course-step-number {
    color: white;
}
.course-step.completed .course-step-circle {
    background: var(--success);
    border-color: var(--success);
}
.course-step.completed .course-step-number {
    display: none;
}
.course-step.completed .course-step-check {
    display: block;
}
.course-step-content {
    text-align: center;
}
.course-step-title {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--gray-600);
    margin-bottom: var(--space-1);
    transition: color var(--transition-base);
}
.course-step.active .course-step-title {
    color: var(--primary);
}
.course-step-desc {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--gray-400);
}

/* Modal/Form Body */
.course-modal-body {
    padding: var(--space-8) var(--space-6);
    flex: 1;
    overflow-y: auto;
}
.course-modal-body::-webkit-scrollbar {
    width: 6px;
}
.course-modal-body::-webkit-scrollbar-track {
    background: var(--gray-100);
}
.course-modal-body::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-full);
}
.course-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Form Steps */
.course-form-step {
    display: none;
    animation: courseStepFadeIn 300ms ease-out;
}
.course-form-step.active {
    display: block;
}
@keyframes courseStepFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.course-step-header {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 2px solid var(--gray-100);
}
.course-step-heading {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--gray-800);
    margin: 0 0 var(--space-2) 0;
}
.course-step-subheading {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--gray-500);
    margin: 0;
}

/* Form Elements */
.course-form-group {
    margin-bottom: var(--space-6);
}
.course-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-normal);
    color: var(--gray-700);
    margin-bottom: var(--space-2);
}
.course-required {
    color: var(--error);
    margin-left: var(--space-1);
}
.course-input,
.course-select,
.course-textarea {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--gray-800);
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    font-family: inherit;
}
.course-textarea {
    height: auto;
    padding: var(--space-3) var(--space-4);
    resize: vertical;
    min-height: 120px;
}
.course-input:focus,
.course-select:focus,
.course-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(100, 50, 200, 0.1);
}
.course-input::placeholder,
.course-textarea::placeholder {
    color: var(--gray-400);
}
.course-select-disabled {
    background: var(--gray-100);
    color: var(--gray-400);
    cursor: not-allowed;
    border-color: var(--gray-200);
}
.course-tooltip-wrapper {
    position: relative;
}
.course-tooltip-wrapper::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-800);
    color: white;
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    white-space: normal;
    width: max-content;
    max-width: 260px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--transition-base),
        visibility var(--transition-base);
    pointer-events: none;
    z-index: 10;
}
.course-tooltip-wrapper::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--gray-800);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--transition-base),
        visibility var(--transition-base);
    pointer-events: none;
    z-index: 10;
}
.course-tooltip-wrapper:hover::after,
.course-tooltip-wrapper:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Draft Toast */
.course-draft-toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: var(--leading-normal);
    animation: courseToastSlide 300ms ease-out;
}
.course-draft-toast svg {
    flex-shrink: 0;
}
.course-draft-toast-success {
    background: var(--success-light);
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.course-draft-toast-error {
    background: var(--error-light);
    color: #991b1b;
    border: 1px solid #fecaca;
}
@keyframes courseToastSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.course-hint {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--gray-500);
    margin-top: var(--space-2);
}
.course-error {
    display: none;
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--error);
    margin-top: var(--space-2);
}
.course-input.is-invalid,
.course-select.is-invalid,
.course-textarea.is-invalid {
    border-color: var(--error);
}
.course-input.is-invalid + .course-error,
.course-select.is-invalid + .course-error,
.course-textarea.is-invalid + .course-error {
    display: block;
}
.course-input-group {
    display: flex;
    align-items: stretch;
    position: relative;
}
.course-input-prefix {
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--gray-600);
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.course-input-with-prefix {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: none;
}
.course-input-group:focus-within .course-input-prefix {
    border-color: var(--primary);
    background: white;
}
.course-input-group:focus-within .course-input-with-prefix {
    border-color: var(--primary);
}
.course-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}
.course-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

/* Section Cards (FAQ, Requirements, Outcomes) */
.course-section-card {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    transition: all var(--transition-base);
}
.course-section-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-md);
}
.course-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.course-section-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.course-section-text {
    flex: 1;
}
.course-section-title {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--gray-800);
    margin: 0 0 var(--space-1) 0;
}
.course-section-subtitle {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--gray-500);
    margin: 0;
}
.course-btn-add {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--primary);
    background: white;
    border: 2px solid var(--primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}
.course-btn-add:hover {
    color: white;
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.course-repeater-container {
    margin-top: var(--space-4);
}
.course-repeater-item {
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}
.course-repeater-row {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.course-repeater-row .course-input {
    flex: 1;
}
.course-btn-remove {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--error-light);
    border: 2px solid var(--error-light);
    color: var(--error);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
}
.course-btn-remove:hover {
    background: var(--error);
    border-color: var(--error);
    color: white;
}

/* Pricing Card */
.course-pricing-card {
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

/* Toggle Switch */
.course-toggle-wrapper {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    transition: all var(--transition-base);
}
.course-toggle-wrapper:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-sm);
}
.course-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    margin: 0;
}
.course-toggle-content {
    flex: 1;
}
.course-toggle-title {
    display: block;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--gray-800);
    margin-bottom: var(--space-1);
}
.course-toggle-desc {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--gray-500);
}
.course-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin: 0;
}
.course-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.course-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-300);
    transition: all var(--transition-base);
    border-radius: var(--radius-full);
}
.course-switch-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: all var(--transition-base);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}
.course-switch input:checked + .course-switch-slider {
    background-color: var(--primary);
}
.course-switch input:checked + .course-switch-slider::before {
    transform: translateX(20px);
}

/* Tier Selector */
.course-tier-section {
    margin-bottom: var(--space-4);
}
.course-tier-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    background: white;
    transition: all var(--transition-base);
}
.course-tier-item:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-sm);
}
.course-tier-img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.course-tier-img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
}
.course-tier-info {
    flex: 1;
    min-width: 0;
}
.course-tier-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-800);
    line-height: var(--leading-tight);
}
.course-tier-price {
    font-size: var(--text-xs);
    color: var(--gray-500);
    line-height: var(--leading-normal);
}

/* Upload Area */
.course-upload-area {
    background: white;
    border: 3px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-12);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
}
.course-upload-area:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

/* Buttons */
.course-btn-primary,
.course-btn-secondary,
.course-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 48px;
    padding: 0 var(--space-6);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}
.course-btn-primary {
    color: white;
    background: var(--primary);
}
.course-btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.course-btn-secondary {
    color: var(--gray-700);
    background: white;
    border: 2px solid var(--gray-200);
}
.course-btn-secondary:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
}
.course-btn-submit {
    color: white;
    background: var(--success);
    min-width: 180px;
}
.course-btn-submit:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Save Draft Button */
.course-btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 48px;
    padding: 0 var(--space-5);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-md);
    border: 2px solid var(--gray-300);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
    color: var(--gray-700);
    background: white;
}
.course-btn-save:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.course-btn-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.course-btn-primary:disabled,
.course-btn-primary.course-btn-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* Modal/Form Footer */
.course-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6);
    background: var(--gray-50);
    border-top: 2px solid var(--gray-200);
}
.course-footer-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Step validation message bar */
#courseStepValidationMsg {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-basis: 100%;
    justify-content: flex-end;
    padding-top: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #b45309;
    line-height: 1.4;
}
#courseStepValidationMsg::before {
    content: '';
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px;
    margin-top: 1px;
}

/* Existing Media Grid */
.existing-media-item {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.existing-media-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.course-btn-delete-media {
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.course-btn-delete-media:hover {
    background: #dc2626 !important;
    transform: scale(1.1);
}

/* File Uploader */
.fileuploader {
    margin-top: var(--space-5);
}
.fileuploader-theme-thumbnails .fileuploader-items-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0 0;
}
.fileuploader-theme-thumbnails .fileuploader-item {
    width: 140px;
    height: 140px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--gray-200);
}
.fileuploader-theme-thumbnails .fileuploader-thumbnails-input {
    width: 140px;
    height: 140px;
    border: 3px dashed var(--gray-300);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: white;
    transition: all var(--transition-base);
}
.fileuploader-theme-thumbnails .fileuploader-thumbnails-input:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

/* ── Course Design System: Responsive ── */

/* Small phones (up to 480px) */
@media (max-width: 575.98px) {
    #addCourse .modal-dialog {
        margin: 0;
        max-width: 100%;
        width: 100%;
        height: 100%;
    }
    .course-modal {
        border-radius: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .course-modal > .modal-body {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }
    .course-modal-header {
        padding: var(--space-3) var(--space-4);
        flex-shrink: 0;
    }
    .course-modal-title {
        font-size: var(--text-base);
    }
    .course-modal-subtitle {
        display: none;
    }
    .course-modal-close {
        width: 30px;
        height: 30px;
    }
    .course-modal-close svg {
        width: 15px;
        height: 15px;
    }
    .course-progress-wrapper {
        padding: var(--space-3) var(--space-4) var(--space-4);
        overflow: visible;
        flex-shrink: 0;
    }
    .course-steps {
        gap: 0;
        min-width: 0;
    }
    .course-step-circle {
        width: 32px;
        height: 32px;
    }
    .course-step-number {
        font-size: var(--text-sm);
    }
    .course-step-check {
        width: 12px;
        height: 12px;
    }
    .course-step-content {
        display: none;
    }
    .course-step.active .course-step-circle {
        box-shadow: 0 0 0 3px rgba(100, 50, 200, 0.15);
    }
    .course-progress-track,
    .course-progress-fill {
        top: calc(var(--space-3) + 16px);
        height: 3px;
        left: 12%;
        right: 12%;
    }
    .course-modal-body {
        padding: var(--space-4);
        max-height: none;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .course-step-header {
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-3);
    }
    .course-step-heading {
        font-size: var(--text-lg);
    }
    .course-step-subheading {
        font-size: var(--text-xs);
    }
    .course-form-group {
        margin-bottom: var(--space-4);
    }
    .course-input,
    .course-select,
    .course-textarea {
        height: 44px;
        font-size: var(--text-sm);
    }
    .course-textarea {
        min-height: 100px;
    }
    .course-label {
        font-size: var(--text-xs);
    }
    .course-grid-2,
    .course-grid-3 {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .course-section-card {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }
    .course-section-header {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    .course-section-icon {
        width: 32px;
        height: 32px;
    }
    .course-section-icon svg {
        width: 16px;
        height: 16px;
    }
    .course-section-title {
        font-size: var(--text-sm);
    }
    .course-section-subtitle {
        font-size: var(--text-xs);
    }
    .course-btn-add {
        width: 100%;
        justify-content: center;
        height: 36px;
        font-size: var(--text-xs);
    }
    .course-repeater-item {
        padding: var(--space-3);
    }
    .course-repeater-row {
        flex-direction: column;
        gap: var(--space-2);
    }
    .course-btn-remove {
        width: 100%;
        height: 36px;
    }
    .course-pricing-card {
        padding: var(--space-4);
    }
    .course-toggle-wrapper {
        padding: var(--space-3);
        margin-bottom: var(--space-3);
    }
    .course-toggle-title {
        font-size: var(--text-sm);
    }
    .course-toggle-desc {
        font-size: var(--text-xs);
    }
    .course-tier-item {
        padding: var(--space-2);
        gap: var(--space-2);
    }
    .course-tier-img {
        width: 32px;
        height: 32px;
    }
    .course-tier-name {
        font-size: var(--text-xs);
    }
    .course-tier-price {
        font-size: 10px;
    }
    .course-upload-area {
        padding: var(--space-6) var(--space-4);
    }
    .course-btn-primary,
    .course-btn-secondary,
    .course-btn-submit,
    .course-btn-save {
        height: 42px;
        padding: 0 var(--space-3);
        font-size: var(--text-xs);
    }
    .course-btn-save svg {
        width: 14px;
        height: 14px;
    }
    .course-btn-submit {
        min-width: 0;
        flex: 1;
    }
    .course-modal-footer {
        padding: var(--space-3) var(--space-4);
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
        flex-shrink: 0;
        gap: var(--space-2);
    }
    .course-footer-right {
        gap: var(--space-2);
    }
    .course-modal-footer .course-btn-secondary svg,
    .course-modal-footer .course-btn-primary svg {
        width: 16px;
        height: 16px;
    }
    .fileuploader-theme-thumbnails .fileuploader-item,
    .fileuploader-theme-thumbnails .fileuploader-thumbnails-input {
        width: 100px;
        height: 100px;
    }
    body.modal-open .menuMobile {
        display: none !important;
    }
}

/* Tablets / landscape phones (481px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    #addCourse .modal-dialog {
        margin: var(--space-3);
        max-width: 100%;
    }
    .course-modal {
        border-radius: var(--radius-md);
        max-height: calc(100vh - 24px);
        display: flex;
        flex-direction: column;
    }
    .course-modal > .modal-body {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .course-modal-header {
        padding: var(--space-4) var(--space-5);
        flex-shrink: 0;
    }
    .course-modal-title {
        font-size: var(--text-xl);
    }
    .course-modal-subtitle {
        font-size: var(--text-xs);
    }
    .course-progress-wrapper {
        padding: var(--space-4) var(--space-5) var(--space-5);
        overflow: visible;
        flex-shrink: 0;
    }
    .course-progress-track,
    .course-progress-fill {
        top: calc(var(--space-4) + 18px);
        height: 3px;
    }
    .course-steps {
        min-width: 0;
        gap: var(--space-1);
    }
    .course-step-circle {
        width: 36px;
        height: 36px;
        margin-bottom: var(--space-2);
    }
    .course-step-number {
        font-size: var(--text-sm);
    }
    .course-step-title {
        font-size: 11px;
    }
    .course-step-desc {
        display: none;
    }
    .course-modal-body {
        padding: var(--space-5);
        flex: 1;
        overflow-y: auto;
        max-height: none;
        -webkit-overflow-scrolling: touch;
    }
    .course-step-heading {
        font-size: var(--text-xl);
    }
    .course-grid-3 {
        grid-template-columns: 1fr;
    }
    .course-grid-2 {
        grid-template-columns: 1fr;
    }
    .course-section-header {
        flex-wrap: wrap;
    }
    .course-btn-add {
        width: 100%;
        justify-content: center;
    }
    .course-repeater-row {
        flex-direction: column;
    }
    .course-btn-remove {
        width: 100%;
    }
    .course-upload-area {
        padding: var(--space-8);
    }
    .course-btn-submit {
        min-width: 140px;
    }
    .course-modal-footer {
        padding: var(--space-4);
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
        flex-shrink: 0;
    }
    .fileuploader-theme-thumbnails .fileuploader-item,
    .fileuploader-theme-thumbnails .fileuploader-thumbnails-input {
        width: 110px;
        height: 110px;
    }
    body.modal-open .menuMobile {
        display: none !important;
    }
}

/* Small desktops / large tablets (769px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .course-step-desc {
        display: none;
    }
    .course-step-title {
        font-size: var(--text-xs);
    }
    .course-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================================================
   COURSE MODAL V2 - NEW COMPONENTS
   ================================================================ */

/* --- Pricing Radio Cards --- */
.course-pricing-models {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.course-pricing-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-5);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    background: white;
}

.course-pricing-option:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-md);
}

.course-pricing-option.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(100, 50, 200, 0.1);
}

.course-pricing-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.course-pricing-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
    flex-shrink: 0;
}

.course-pricing-card-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: var(--space-1);
}

.course-pricing-card-desc {
    font-size: var(--text-xs);
    color: var(--gray-500);
    line-height: var(--leading-normal);
}

.course-pricing-panel {
    animation: fadeInUp 300ms ease-out;
}

/* --- Radio Cards (Publication, Visibility) --- */
.course-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.course-radio-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    background: white;
    margin: 0;
}

.course-radio-card:hover {
    border-color: var(--gray-300);
    background: var(--gray-50);
}

.course-radio-card input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.course-radio-card:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-light);
}

.course-radio-card-content {
    flex: 1;
    min-width: 0;
}

.course-radio-card-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 2px;
}

.course-radio-card-desc {
    font-size: var(--text-xs);
    color: var(--gray-500);
    line-height: var(--leading-normal);
}

/* --- Review Step --- */
.course-review-section {
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.course-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.course-review-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.course-review-title-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.course-btn-edit-step {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    transition: opacity var(--transition-base);
}

.course-btn-edit-step:hover {
    opacity: 0.7;
}

.course-review-body {
    padding: var(--space-3) var(--space-4);
}

.course-review-item {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
}

.course-review-item:last-child {
    margin-bottom: 0;
}

.course-review-label {
    color: var(--gray-400);
    font-weight: 500;
    min-width: 110px;
    flex-shrink: 0;
}

.course-review-value {
    color: var(--gray-800);
    font-weight: 600;
}

/* --- Readiness Checklist --- */
.course-readiness-checklist {
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.course-readiness-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
}

.course-readiness-item:last-child {
    margin-bottom: 0;
}

.course-readiness-item.pass {
    background: #d1fae5;
    color: #059669;
    border: 1px solid rgba(5, 150, 105, 0.18);
}

.course-readiness-item.warn {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid rgba(217, 119, 6, 0.2);
}

.course-readiness-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.course-readiness-item.pass .course-readiness-icon {
    background: #059669;
}

.course-readiness-item.warn .course-readiness-icon {
    background: #d97706;
}

/* --- Autosave Indicator --- */
.course-autosave-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--gray-400);
    font-weight: 500;
}

.course-autosave-indicator.saving {
    color: #d97706;
}

.course-autosave-indicator.saved {
    color: #059669;
}

.course-autosave-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* --- Media Guide --- */
.course-media-guide {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.course-media-guide-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--gray-600);
}

.course-media-guide-badge {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}

.course-media-guide-required {
    background: #fee2e2;
    color: #ef4444;
}

/* --- Footer left alignment --- */
.course-modal-footer {
    gap: var(--space-3);
}

.course-footer-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* --- Responsive: Pricing cards to 1 column on mobile --- */
@media (max-width: 575.98px) {
    .course-pricing-models {
        grid-template-columns: 1fr;
    }

    .course-review-label {
        min-width: 80px;
    }
}

/* ================================================================
   COURSE MODAL REDESIGN (cm- prefix)
   Template-based redesign with Outfit / Cairo fonts
   ================================================================ */

/* Modal container */
.cm-modal{border-radius:20px;border:1.5px solid #E6E2F5;overflow:hidden;box-shadow:0 24px 80px rgba(109,74,232,.12),0 4px 16px rgba(0,0,0,.06);max-height:calc(100vh - 3.5rem);display:flex;flex-direction:column;}
.cm-modal>.modal-body{display:flex;flex-direction:column;overflow:hidden;min-height:0;}

/* --- Header --- */
.cm-mh{padding:14px 20px;border-bottom:1.5px solid #E6E2F5;display:flex;align-items:center;gap:11px;flex-shrink:0;background:#fff;}
.cm-mh-i{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#6D4AE8,#8B6FF0);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 12px rgba(109,74,232,.25);}
.cm-mh-i svg{width:17px;height:17px;color:#fff;}
.cm-mh-t{flex:1;}
.cm-mh-t h2{font-size:15px;font-weight:700;color:#0F0F24;font-family:'Outfit',sans-serif;margin:0;}
.cm-mh-t p{font-size:13px;font-weight:400;color:#8888AA;margin:2px 0 0 0;font-family:'Outfit',sans-serif;}
.cm-mx{width:32px;height:32px;border-radius:9px;border:1.5px solid #E6E2F5;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#BCBCD4;transition:all .12s;flex-shrink:0;padding:0;}
.cm-mx:hover{background:#F8F7FE;color:#4A4A68;}
.cm-mx svg{width:13px;height:13px;}

/* --- Stepper --- */
.cm-stp{display:flex;align-items:center;padding:13px 20px;border-bottom:1.5px solid #E6E2F5;flex-shrink:0;background:#F8F7FE;}
.cm-st{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;cursor:pointer;}
.cm-st:not(:last-child)::after{content:'';position:absolute;top:13px;left:calc(50% + 14px);right:calc(-50% + 14px);height:2px;border-radius:1px;}
.cm-st.is-done:not(:last-child)::after{background:#10B981;}
.cm-st.is-active:not(:last-child)::after{background:linear-gradient(90deg,#6D4AE8,#E6E2F5);}
.cm-st.is-upcoming:not(:last-child)::after{background:#E6E2F5;}
.cm-sd{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:all .2s;}
.cm-st.is-done .cm-sd{background:#ECFDF5;border:2px solid #10B981;}
.cm-st.is-active .cm-sd{background:linear-gradient(135deg,#6D4AE8,#8B6FF0);border:2px solid #6D4AE8;box-shadow:0 0 0 3px rgba(109,74,232,.1);}
.cm-st.is-upcoming .cm-sd{background:#fff;border:2px solid #E6E2F5;}
.cm-sd-num{font-size:10px;font-weight:800;font-family:'Outfit',sans-serif;}
.cm-st.is-done .cm-sd-num{display:none;}
.cm-st.is-active .cm-sd-num{color:#fff;}
.cm-st.is-upcoming .cm-sd-num{color:#BCBCD4;}
.cm-sd-chk{width:11px;height:11px;display:none;color:#059669;}
.cm-st.is-done .cm-sd-chk{display:block;}
.cm-sl{font-size:11px;font-weight:600;margin-top:5px;text-align:center;line-height:1.2;font-family:'Outfit',sans-serif;}
.cm-sl span{display:block;font-size:10px;font-weight:500;color:#BCBCD4;margin-top:1px;}
.cm-st.is-done .cm-sl{color:#059669;}
.cm-st.is-active .cm-sl{color:#6D4AE8;font-weight:700;}
.cm-st.is-upcoming .cm-sl{color:#BCBCD4;}

/* --- Body --- */
.cm-mb{flex:1;overflow-y:auto;padding:20px;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.cm-mb::-webkit-scrollbar{width:4px;}
.cm-mb::-webkit-scrollbar-thumb{background:#D4CEE8;border-radius:9px;}

/* --- Step panels --- */
.cm-sp{display:none;flex-direction:column;gap:18px;}
.cm-sp.active,.cm-sp.on{display:flex;animation:cmStepIn .28s cubic-bezier(.16,1,.3,1) both;}
@keyframes cmStepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* --- Step heading --- */
.cm-snp{padding:3px 9px;border-radius:6px;font-size:12px;font-weight:700;background:#F0EDFF;color:#6D4AE8;border:1px solid rgba(109,74,232,.18);width:fit-content;font-family:'Outfit',sans-serif;}
.cm-sh{font-size:16px;font-weight:700;letter-spacing:-.01em;color:#0F0F24;margin:0;font-family:'Outfit',sans-serif;}
.cm-sde{font-size:14px;font-weight:400;color:#8888AA;margin:0;font-family:'Outfit',sans-serif;}
.cm-snp+.cm-sh{margin-top:-12px;}
.cm-sh+.cm-sde{margin-top:-14px;}

/* --- Form fields --- */
.cm-f{display:flex;flex-direction:column;gap:0px;margin-bottom:12px;}
.cm-fl{font-size:14px;font-weight:700;color:#4A4A68;display:flex;align-items:center;gap:4px;font-family:'Outfit',sans-serif;}
.cm-rq{color:#6D4AE8;font-size:14px;line-height:1;}
.cm-fi{padding:10px 12px;border:1.5px solid #E6E2F5;border-radius:10px;font-family:'Outfit',sans-serif;font-size:14px;font-weight:500;color:#0F0F24;background:#fff;transition:all .15s;outline:none;width:100%;}
.cm-fi:focus{border-color:#6D4AE8;box-shadow:0 0 0 3px rgba(109,74,232,.08);}
.cm-fi::placeholder{color:#BCBCD4;font-weight:400;}
textarea.cm-fi{resize:vertical;min-height:80px;line-height:1.5;}
select.cm-fi{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%238888AA' stroke-width='2' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='2 4 5 7 8 4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:28px;cursor:pointer;}
.cm-tags-wrap{display:flex;flex-wrap:wrap;gap:6px;align-items:center;cursor:text;min-height:42px;padding:6px 10px;}
.cm-tags-wrap .cm-tag{display:inline-flex;align-items:center;gap:4px;background:#F0ECFC;color:#6D4AE8;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;padding:4px 10px;border-radius:6px;white-space:nowrap;}
.cm-tags-wrap .cm-tag svg{cursor:pointer;flex-shrink:0;opacity:.6;transition:opacity .15s;}.cm-tags-wrap .cm-tag svg:hover{opacity:1;}
.cm-tags-input{border:none;outline:none;background:transparent;font-family:'Outfit',sans-serif;font-size:14px;font-weight:500;color:#0F0F24;flex:1;min-width:80px;padding:0;}.cm-tags-input::placeholder{color:#BCBCD4;font-weight:400;}
html[dir="rtl"] .cm-tags-wrap .cm-tag{font-family:'Cairo',sans-serif;}
html[dir="rtl"] .cm-tags-input{font-family:'Cairo',sans-serif;}
.cm-fh{font-size:13px;font-weight:500;color:#BCBCD4;font-family:'Outfit',sans-serif;}
.cm-err{font-size:13px;font-weight:600;color:#DC2626;font-family:'Outfit',sans-serif;}
.cm-rw{display:flex;gap:10px;}.cm-rw .cm-f{flex:1;}
.cm-rw3{display:flex;gap:10px;}.cm-rw3 .cm-f{flex:1;}

/* --- Section cards --- */
.cm-sc{border:1.5px solid #E6E2F5;border-radius:13px;background:#fff;overflow:hidden;}
.cm-sc-h{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid #E6E2F5;background:#F8F7FE;}
.cm-sc-i{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cm-sc-i svg{width:14px;height:14px;}
.cm-sc-t{flex:1;}
.cm-sc-n{font-size:14px;font-weight:700;color:#0F0F24;font-family:'Outfit',sans-serif;}
.cm-sc-d{font-size:13px;font-weight:500;color:#8888AA;margin-top:1px;font-family:'Outfit',sans-serif;}
.cm-sc-a{flex-shrink:0;}
.cm-sc-b{padding:11px 13px;display:flex;flex-direction:column;gap:7px;}

/* --- Add button --- */
.cm-ba{display:flex;align-items:center;gap:4px;padding:6px 11px;border:1.5px solid rgba(109,74,232,.18);border-radius:8px;background:#F0EDFF;color:#6D4AE8;font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:all .12s;}
.cm-ba:hover{background:#6D4AE8;color:#fff;}
.cm-ba svg{width:11px;height:11px;}

/* --- Drag list rows (outcomes, requirements) --- */
.cm-lr{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1.5px solid #E6E2F5;border-radius:8px;background:#fff;transition:all .15s;cursor:grab;touch-action:pan-y;}
.cm-lr:active{cursor:grabbing;}
.cm-lr.cm-dragging{opacity:.4;border-style:dashed;}
.cm-lr.cm-drag-over{border-color:#6D4AE8;background:#F0EDFF;box-shadow:0 0 0 2px rgba(109,74,232,.1);}
.cm-lr:hover{border-color:#D4CEE8;}
.cm-gp{width:14px;height:14px;color:#BCBCD4;flex-shrink:0;cursor:grab;}
.cm-lr input{flex:1;border:none;outline:none;font-family:'Outfit',sans-serif;font-size:14px;font-weight:500;color:#0F0F24;background:none;cursor:text;}
.cm-lr input::placeholder{color:#BCBCD4;}
.cm-dl{width:24px;height:24px;border-radius:6px;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#BCBCD4;transition:all .1s;flex-shrink:0;padding:0;}
.cm-dl:hover{background:#FEF2F2;color:#DC2626;}
.cm-dl svg{width:11px;height:11px;}

/* --- FAQ pairs --- */
.cm-fp{display:flex;flex-direction:column;gap:5px;padding:9px;border:1.5px solid #E6E2F5;border-radius:9px;background:#F8F7FE;cursor:grab;touch-action:pan-y;}
.cm-fp:active{cursor:grabbing;}
.cm-fp.cm-dragging{opacity:.4;border-style:dashed;}
.cm-fp.cm-drag-over{border-color:#6D4AE8;background:#F0EDFF;}
.cm-fp-h{display:flex;align-items:center;gap:5px;}
.cm-fp-h input{flex:1;padding:7px 9px;border:1.5px solid #E6E2F5;border-radius:7px;font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;color:#0F0F24;outline:none;background:#fff;transition:border-color .12s;}
.cm-fp-h input:focus{border-color:#6D4AE8;}
.cm-fp-h input::placeholder{color:#BCBCD4;font-weight:500;}
.cm-fp textarea{padding:7px 9px;border:1.5px solid #E6E2F5;border-radius:7px;font-family:'Outfit',sans-serif;font-size:14px;font-weight:500;color:#0F0F24;outline:none;background:#fff;resize:vertical;min-height:46px;line-height:1.4;transition:border-color .12s;}
.cm-fp textarea:focus{border-color:#6D4AE8;}
.cm-fp textarea::placeholder{color:#BCBCD4;}
.cm-fp .cm-dl{align-self:flex-start;}

/* --- Pricing cards (2x2 grid) --- */
.cm-pg{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.cm-pc{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 10px;border:1.5px solid #E6E2F5;border-radius:11px;background:#fff;cursor:pointer;transition:all .15s;text-align:center;}
.cm-pc:hover{border-color:rgba(109,74,232,.18);background:#F0EDFF;}
.cm-pc.on{border-color:#6D4AE8;background:linear-gradient(135deg,#F0EDFF,#E8E0FF);box-shadow:0 2px 10px rgba(109,74,232,.08);}
.cm-pc-i{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;}
.cm-pc-i svg{width:16px;height:16px;}
.cm-pc:nth-child(1) .cm-pc-i{background:#ECFDF5;border:1.5px solid rgba(5,150,105,.18);color:#059669;}
.cm-pc:nth-child(2) .cm-pc-i{background:#F0EDFF;border:1.5px solid rgba(109,74,232,.18);color:#6D4AE8;}
.cm-pc:nth-child(3) .cm-pc-i{background:#FFFBEB;border:1.5px solid rgba(217,119,6,.18);color:#D97706;}
.cm-pc:nth-child(4) .cm-pc-i{background:#FDF2F8;border:1.5px solid rgba(236,72,153,.18);color:#EC4899;}
.cm-pc-n{font-size:14px;font-weight:700;color:#0F0F24;font-family:'Outfit',sans-serif;}
.cm-pc-d{font-size:13px;font-weight:500;color:#8888AA;line-height:1.3;font-family:'Outfit',sans-serif;}

/* --- Price input wrapper --- */
.cm-pw{display:flex;align-items:center;border:1.5px solid #E6E2F5;border-radius:10px;overflow:hidden;transition:all .15s;}
.cm-pw:focus-within{border-color:#6D4AE8;box-shadow:0 0 0 3px rgba(109,74,232,.08);}
.cm-pw-i{flex:1;padding:10px 12px;border:none;font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:#0F0F24;outline:none;background:none;min-width:0;}
.cm-pw-i::placeholder{color:#BCBCD4;font-weight:400;}
.cm-pw-c{padding:10px 12px;background:#F8F7FE;border-right:1px solid #E6E2F5;font-size:14px;font-weight:700;color:#8888AA;flex-shrink:0;font-family:'Outfit',sans-serif;}

/* --- Toggles (.cm-tr row with .cm-to visual toggle) --- */
.cm-tr{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid #E6E2F5;border-radius:10px;background:#fff;transition:all .15s;}
.cm-tr.on{border-color:rgba(109,74,232,.18);background:#F0EDFF;}
.cm-tr-t{flex:1;}
.cm-tr-n{font-size:14px;font-weight:600;color:#0F0F24;font-family:'Outfit',sans-serif;}
.cm-tr-d{font-size:13px;font-weight:500;color:#8888AA;margin-top:1px;font-family:'Outfit',sans-serif;}
.cm-to-wrap{flex-shrink:0;cursor:pointer;margin:0;}
.cm-to{width:40px;height:22px;border-radius:11px;background:#D4CEE8;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;}
.cm-to.on{background:linear-gradient(135deg,#6D4AE8,#8B6FF0);box-shadow:0 2px 6px rgba(109,74,232,.2);}
.cm-tk{width:18px;height:18px;border-radius:9px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);position:absolute;top:2px;left:2px;transition:transform .2s cubic-bezier(.16,1,.3,1);}
.cm-to.on .cm-tk{transform:translateX(18px);}

/* --- Tier rows --- */
.cm-tier{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1.5px solid #E6E2F5;border-radius:9px;background:#fff;transition:all .12s;}
.cm-tier.on{border-color:rgba(109,74,232,.18);background:#F0EDFF;}
.cm-tier-i{width:32px;height:32px;border-radius:8px;background:#FFFBEB;border:1.5px solid rgba(217,119,6,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cm-tier-i svg{width:14px;height:14px;color:#D97706;}
.cm-tier-t{flex:1;}
.cm-tier-n{font-size:14px;font-weight:700;color:#0F0F24;font-family:'Outfit',sans-serif;}
.cm-tier-p{font-size:13px;font-weight:600;color:#8888AA;font-family:'Outfit',sans-serif;}

/* --- Radio card groups --- */
.cm-rg{display:flex;flex-direction:column;gap:5px;}
.cm-rc{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1.5px solid #E6E2F5;border-radius:9px;background:#fff;cursor:pointer;transition:all .12s;}
.cm-rc:hover{border-color:rgba(109,74,232,.18);background:#F8F7FE;}
.cm-rc.on{border-color:#6D4AE8;background:#F0EDFF;box-shadow:0 2px 8px rgba(109,74,232,.06);}
.cm-rd{width:16px;height:16px;border-radius:50%;border:2px solid #E6E2F5;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
.cm-rc.on .cm-rd{border-color:#6D4AE8;}
.cm-ri{width:7px;height:7px;border-radius:50%;background:transparent;transition:background .15s;}
.cm-rc.on .cm-ri{background:#6D4AE8;}
.cm-rc-t{flex:1;}
.cm-rc-n{font-size:14px;font-weight:600;color:#0F0F24;font-family:'Outfit',sans-serif;}
.cm-rc-d{font-size:13px;font-weight:500;color:#8888AA;margin-top:1px;font-family:'Outfit',sans-serif;}

/* --- Media slots --- */
.cm-ms{border:1.5px solid #E6E2F5;border-radius:11px;overflow:hidden;background:#fff;}
.cm-ms-h{display:flex;align-items:center;gap:7px;padding:9px 12px;background:#F8F7FE;border-bottom:1px solid #E6E2F5;}
.cm-ms-n{width:20px;height:20px;border-radius:5px;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Outfit',sans-serif;}
.cm-ms-n.n1{background:#F0EDFF;color:#6D4AE8;border:1px solid rgba(109,74,232,.18);}
.cm-ms-n.n2{background:#FDF2F8;color:#EC4899;border:1px solid rgba(236,72,153,.18);}
.cm-ms-n.n3{background:#ECFDF5;color:#059669;border:1px solid rgba(5,150,105,.18);}
.cm-ms-t{flex:1;font-size:14px;font-weight:600;color:#4A4A68;font-family:'Outfit',sans-serif;}
.cm-ms-t span{font-weight:500;color:#BCBCD4;margin-left:4px;font-size:13px;}
.cm-ms-badge{padding:2px 7px;border-radius:5px;font-size:9px;font-weight:700;text-transform:uppercase;font-family:'Outfit',sans-serif;}
.cm-ms-badge.rq{background:#FEF2F2;color:#DC2626;border:1px solid rgba(220,38,38,.18);}
.cm-ms-badge.op{background:#F8F7FE;color:#BCBCD4;border:1px solid #E6E2F5;}
.cm-ms-body{padding:0;}
.cm-ms-hint{padding:14px;font-size:14px;font-weight:500;color:#8888AA;font-family:'Outfit',sans-serif;border-top:1px solid #E6E2F5;}

/* --- Review cards --- */
.cm-rv-card{border:1.5px solid #E6E2F5;border-radius:12px;overflow:hidden;background:#fff;}
.cm-rv-h{display:flex;align-items:center;gap:8px;padding:10px 13px;background:#F8F7FE;border-bottom:1px solid #E6E2F5;}
.cm-rv-h-i{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cm-rv-h-i svg{width:12px;height:12px;}
.cm-rv-h-t{flex:1;font-size:14px;font-weight:700;color:#0F0F24;font-family:'Outfit',sans-serif;}
.cm-rv-edit{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:7px;border:1.5px solid #E6E2F5;background:#fff;font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;color:#8888AA;cursor:pointer;transition:all .12s;}
.cm-rv-edit:hover{border-color:rgba(109,74,232,.18);background:#F0EDFF;color:#6D4AE8;}
.cm-rv-edit svg{width:10px;height:10px;}
.cm-rv-b{padding:11px 13px;}
.cm-rv-row{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid #F0EEFA;}
.cm-rv-row:last-child{border:none;}
.cm-rv-l{font-size:13px;font-weight:600;color:#8888AA;width:120px;flex-shrink:0;font-family:'Outfit',sans-serif;}
.cm-rv-v{font-size:14px;font-weight:600;color:#0F0F24;flex:1;font-family:'Outfit',sans-serif;}

/* --- Readiness checklist --- */
.cm-rv-check{display:flex;flex-direction:column;gap:5px;padding:11px 13px;}
.cm-rv-ck{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:8px;font-size:14px;font-weight:600;font-family:'Outfit',sans-serif;}
.cm-rv-ck.pass{background:#ECFDF5;color:#059669;border:1px solid rgba(5,150,105,.18);}
.cm-rv-ck.fail{background:#FEF2F2;color:#DC2626;border:1px solid rgba(220,38,38,.18);}
.cm-rv-ck.warn{background:#FFFBEB;color:#D97706;border:1px solid rgba(217,119,6,.18);}
.cm-rv-ck svg{width:14px;height:14px;flex-shrink:0;}

/* --- Submit button (for view-content in step 6) --- */
.cm-btn-submit{width:100%;padding:13px;border:none;border-radius:11px;font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:#fff;cursor:pointer;background:linear-gradient(135deg,#059669,#10B981);box-shadow:0 4px 16px rgba(5,150,105,.25);display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s;}
.cm-btn-submit:hover{box-shadow:0 6px 24px rgba(5,150,105,.4);transform:translateY(-1px);}
.cm-btn-submit svg{width:15px;height:15px;}

/* --- Footer --- */
.cm-mf{padding:11px 20px;border-top:1.5px solid #E6E2F5;display:flex;align-items:center;gap:8px;flex-shrink:0;background:#fff;flex-wrap:wrap;}
.cm-footer-right{display:flex;align-items:center;gap:6px;margin-left:auto;}
.cm-fs{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:#BCBCD4;font-family:'Outfit',sans-serif;}
.cm-fs-dt{width:5px;height:5px;border-radius:50%;background:#10B981;}
.cm-fb{padding:9px 15px;border-radius:9px;border:none;font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s;}
.cm-fb svg{width:12px;height:12px;}
.cm-fb-b{background:#fff;border:1.5px solid #E6E2F5;color:#4A4A68;}.cm-fb-b:hover{background:#F8F7FE;}
.cm-fb-d{background:#fff;border:1.5px solid #E6E2F5;color:#4A4A68;}.cm-fb-d:hover{background:#F8F7FE;}
.cm-fb-sub{background:linear-gradient(135deg,#059669,#10B981);color:#fff;box-shadow:0 3px 10px rgba(5,150,105,.25);}.cm-fb-sub:hover{box-shadow:0 5px 18px rgba(5,150,105,.4);transform:translateY(-1px);}
.cm-fb-n{background:linear-gradient(135deg,#6D4AE8,#8B6FF0);color:#fff;box-shadow:0 3px 10px rgba(109,74,232,.25);}.cm-fb-n:hover{box-shadow:0 5px 18px rgba(109,74,232,.4);transform:translateY(-1px);}
.cm-fb-n:disabled,.cm-fb-n.cm-btn-disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important;pointer-events:none;}

/* --- Validation message --- */
#courseStepValidationMsg{display:flex;align-items:center;gap:5px;flex-basis:100%;justify-content:flex-end;padding-top:6px;font-size:13px;font-weight:600;color:#D97706;line-height:1.4;font-family:'Outfit',sans-serif;}
#courseStepValidationMsg::before{content:'';display:inline-flex;width:13px;height:13px;flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M7 1L13.5 12H.5L7 1z' stroke='%23D97706' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M7 5.5v3' stroke='%23D97706' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.5' r='.6' fill='%23D97706'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;}

/* --- TinyMCE inside the create-course modal --- */
#addCourse .tox-tinymce{border:1.5px solid #E6E2F5!important;border-radius:10px!important;font-family:'Outfit',sans-serif;}
#addCourse .tox-tinymce:focus-within{border-color:#6D4AE8!important;box-shadow:0 0 0 3px rgba(109,74,232,.08)!important;}
#addCourse .tox-toolbar__primary{background:#F8F7FE!important;border-bottom:1px solid #E6E2F5!important;}
#addCourse .tox .tox-tbtn{border-radius:6px!important;}
#addCourse .tox .tox-edit-area__iframe{font-size:14px;}

/* --- Arabic / RTL font override inside modal --- */
html[dir="rtl"] .cm-mh-t h2,
html[dir="rtl"] .cm-mh-t p,
html[dir="rtl"] .cm-sh,
html[dir="rtl"] .cm-sde,
html[dir="rtl"] .cm-snp,
html[dir="rtl"] .cm-fl,
html[dir="rtl"] .cm-fi,
html[dir="rtl"] .cm-fh,
html[dir="rtl"] .cm-sc-n,
html[dir="rtl"] .cm-sc-d,
html[dir="rtl"] .cm-sl,
html[dir="rtl"] .cm-tr-n,
html[dir="rtl"] .cm-tr-d,
html[dir="rtl"] .cm-rc-n,
html[dir="rtl"] .cm-rc-d,
html[dir="rtl"] .cm-pc-n,
html[dir="rtl"] .cm-pc-d,
html[dir="rtl"] .cm-rv-h-t,
html[dir="rtl"] .cm-rv-l,
html[dir="rtl"] .cm-rv-v,
html[dir="rtl"] .cm-rv-ck,
html[dir="rtl"] .cm-tier-n,
html[dir="rtl"] .cm-tier-p,
html[dir="rtl"] .cm-fb,
html[dir="rtl"] .cm-fs,
html[dir="rtl"] .cm-ba,
html[dir="rtl"] #courseStepValidationMsg,
html[dir="rtl"] .cm-lr input,
html[dir="rtl"] .cm-fp-h input,
html[dir="rtl"] .cm-fp textarea,
html[dir="rtl"] .cm-ms-t,
html[dir="rtl"] .cm-ms-badge {
    font-family: 'Cairo', sans-serif;
}

/* --- Responsive --- */
@media (max-width: 575.98px) {
    .cm-mh{padding:12px 14px;}
    .cm-stp{padding:11px 8px;}
    .cm-sl span{display:none;}
    .cm-mb{padding:16px 13px;}
    .cm-mf{padding:9px 13px;}
    .cm-rw,.cm-rw3{flex-direction:column;}
    .cm-pg{grid-template-columns:1fr;}
}
@media (max-width: 767.98px) {
    .cm-modal{border-radius:16px;max-height:calc(100vh - 24px);}
}

/* ================================================================
   MESSAGES / CHAT REDESIGN (msg- prefix, mobile-first)
   ================================================================ */

/* --- Container: .section-msg layout now lives in messages.blade.php --- */

@media (min-width: 768px) and (max-width: 991.98px) {
    .settings-container {
        min-width: 100%;
        padding: 65px 16px;
    }
    body.no-topbar .settings-container {
        padding-top: 10px;
    }
    .message-panel {
        padding-top: 0px;
    }
    #messagesContainer {
        padding-top: 0px !important;
    }
}
.msg-app {
    --msg-accent: #7c3aed;
    max-width: 1080px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    overflow: hidden;
    border-radius: 0;
}

/* --- Sidebar --- */
.msg-sidebar {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #f0ecff;
    border-bottom: 1px solid #f0ecff;
    height: 100%;
    overflow: hidden;
}

.msg-sidebar-header {
    padding: 5px 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    border-bottom: 1px solid #f3f0ff;
}
.msg-sidebar-header-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.msg-sidebar-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.msg-sidebar-header-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.msg-sidebar-header h5 {
    font-size: 20px;
    font-weight: 800;
    color: #1e1b4b;
    letter-spacing: -0.02em;
    margin: 0;
}
.msg-sidebar-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--msg-accent);
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}
.msg-sidebar-btn:hover {
    background: #f5f3ff;
}
@media only screen and (max-width: 991.98px){
    .msg-sidebar-header {
        padding-top: 5px;
        gap: 8px;
    }
    .msg-sidebar-header-actions {
        gap: 8px;
    }
}

/* DND Toggle */
.dnd-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px solid #e5e1f5;
    background: #f8f7ff;
    color: #888;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    transition: all 0.2s ease;
    outline: none;
    letter-spacing: 0.01em;
    width: auto;
    height: auto;
    font-family: 'Outfit', sans-serif;
}
.dnd-toggle:hover {
    background: #eeebff;
}
.dnd-toggle.dnd-active {
    border-color: #7c5cfc;
    background: #f0ecff;
    color: #7c5cfc;
}
.dnd-toggle.dnd-active:hover {
    background: #e8e2ff;
}
.dnd-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    transition: background 0.3s;
    flex-shrink: 0;
}
.dnd-active .dnd-dot {
    background: #7c5cfc;
}

/* Search */
.msg-search {
    padding: 12px 18px;
}
.msg-search-box {
    background: #f8f7ff;
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid transparent;
    transition: all 0.2s;
}
.msg-search-box:focus-within {
    border-color: rgba(124, 58, 237, 0.2);
}
.msg-search-box input {
    border: none;
    background: transparent;
    font-size: 13.5px;
    font-weight: 500;
    color: #1e1b4b;
    width: 100%;
    outline: none;
}
.msg-search-box input::placeholder {
    color: #9ca3af;
}
.msg-search-box svg {
    flex-shrink: 0;
}

/* --- Contact Items --- */
.msg-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none !important;
    border-radius: 0 !important;
    text-decoration: none !important;
}
.msg-contact:hover {
    background: #f8f7ff !important;
}
.msg-contact.active {
    background: linear-gradient(
        135deg,
        var(--msg-accent),
        color-mix(in srgb, var(--msg-accent) 85%, #000)
    ) !important;
}
.msg-contact.active:hover {
    background: linear-gradient(
        135deg,
        var(--msg-accent),
        color-mix(in srgb, var(--msg-accent) 85%, #000)
    ) !important;
}
.msg-contact.active .msg-contact-name,
.msg-contact.active .msg-contact-name a {
    color: #fff !important;
}
.msg-contact.active .msg-contact-preview {
    color: rgba(255, 255, 255, 0.73) !important;
}
.msg-contact.active .msg-contact-time {
    color: rgba(255, 255, 255, 0.67) !important;
}
.msg-contact.active .msg-contact-avatar {
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.15);
}

.msg-contact-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.msg-contact-avatar {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    object-fit: cover;
}
.msg-contact-avatar-wrap .user-online::after,
.msg-contact-avatar-wrap .user-offline::after {
    width: 13px;
    height: 13px;
    border-width: 2.5px;
    bottom: -1px;
    right: -1px;
}

.msg-contact-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.msg-contact-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.msg-contact-name {
    font-weight: 650;
    font-size: 14.5px;
    color: #1e1b4b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}
.msg-contact-name a {
    color: inherit !important;
    text-decoration: none !important;
}
.msg-contact-time {
    font-size: 11.5px;
    color: #9ca3af;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}
.msg-contact-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.msg-contact-preview {
    font-size: 13px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    margin: 0;
}
.msg-contact-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 0 6px;
    background: var(--msg-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-contact.active .msg-contact-badge {
    background: #fff;
    color: var(--msg-accent);
}

.msg-no-chats {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}
.msg-no-chats img {
    max-width: 80px;
    opacity: 0.6;
    margin-bottom: 12px;
}
.msg-no-chats p {
    color: #9ca3af;
    font-size: 14px;
    margin: 0;
}

/* --- Chat Panel --- */
.msg-chat {
    display: flex;
    flex-direction: column;
    background: #faf9ff;
    flex: 1;
    min-width: 0;
    height: 100%;
}

/* Chat Header */
.msg-chat-header {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid #f3f0ff;
    box-shadow: 0 1px 4px rgba(124, 58, 237, 0.03);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    overflow: visible;
}
.msg-chat-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.msg-chat-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.msg-chat-header-name {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}
.msg-chat-header-name a {
    font-weight: 750;
    font-size: 15px;
    color: #1e1b4b;
    text-decoration: none;
}
.msg-chat-header-status {
    font-size: 12px;
    font-weight: 600;
}
.msg-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.msg-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    text-decoration: none !important;
}
.msg-action-btn:hover {
    background: #f5f3ff;
    color: var(--msg-accent);
}
.msg-action-btn.buttonDisabled {
    opacity: 0.4;
    cursor: default;
}
.msg-action-btn.buttonDisabled:hover {
    background: transparent;
    color: #6b7280;
}

/* Call menu button */
.msg-call-wrap {
    position: relative;
    flex-shrink: 0;
}
.msg-call-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 2rem;
    border: 1.5px solid #e5e3f1;
    background: #fff;
    color: #1a1a2e;
    font-family: Outfit, Cairo, sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(.22,1,.36,1);
}
.msg-call-btn:hover {
    border-color: var(--msg-accent);
    color: var(--msg-accent);
    background: #f5f3ff;
}
.msg-call-btn.open {
    border-color: var(--msg-accent);
    color: var(--msg-accent);
    background: #f5f3ff;
}
.msg-call-btn:disabled,
.msg-call-btn.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
.msg-call-chev {
    transition: transform 0.2s;
}
.msg-call-btn.open .msg-call-chev {
    transform: rotate(180deg);
}

/* Call dropdown (desktop) */
.msg-call-drop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    width: 340px;
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e3f1;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.02);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: all 0.2s cubic-bezier(.22,1,.36,1);
}
.msg-call-drop.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}
.msg-call-drop-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 14px 0;
}
.msg-call-drop-head {
    font-size: 14px;
    font-weight: 800;
    color: #1a1a2e;
}
.msg-call-drop-subtitle {
    padding: 2px 14px 8px;
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    line-height: 1.4;
}
.msg-call-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 2rem;
    border: 1px solid #e5e3f1;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}
.msg-call-online-badge.online {
    border-color: rgba(5,150,105,0.25);
    color: #059669;
}
.msg-call-online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
}
.msg-call-online-badge.online .msg-call-online-dot {
    background: #059669;
}
.msg-call-online-badge.busy {
    border-color: rgba(239,68,68,0.25);
    color: #ef4444;
}
.msg-call-online-badge.busy .msg-call-online-dot {
    background: #ef4444;
}

/* Call Request Countdown */
.call-request-countdown {
    text-align: center;
    margin: 12px 0;
}
.call-request-countdown-timer {
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1e293b;
    letter-spacing: 0.02em;
}
.dark-mode .call-request-countdown-timer {
    color: #f1f5f9;
}

/* System Messages in Chat */
.msg-bubble-system .message {
    font-size: 13px;
    line-height: 1.5;
}

.msg-call-drop-section {
    padding: 4px 14px 2px;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.msg-call-drop-sep {
    height: 1px;
    background: #e5e3f1;
    margin: 4px 14px;
}
.msg-call-drop-note {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 6px 14px 12px;
    padding: 8px 10px;
    background: #f5f3ff;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    line-height: 1.4;
}
.msg-call-drop-note svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Call option row */
.msg-call-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s;
    text-decoration: none !important;
    color: inherit !important;
}
.msg-call-option:hover {
    background: #f5f3ff;
}
.msg-call-option:active {
    background: #e5e3f1;
}

.msg-co-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-co-ico.audio {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid rgba(5,150,105,0.18);
}
.msg-co-ico.video {
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid rgba(59,130,246,0.18);
}
.msg-co-ico.live {
    background: #f5f3ff;
    color: var(--msg-accent);
    border: 1px solid rgba(109,74,232,0.12);
}

.msg-co-info {
    flex: 1;
    min-width: 0;
}
.msg-co-name {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
}
.msg-co-desc {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    margin-top: 1px;
    line-height: 1.35;
}
.msg-co-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
    max-width: 45%;
}
.msg-co-price {
    padding: 2px 7px;
    border-radius: 1rem;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.msg-co-price.your {
    background: #ecfdf5;
    color: #059669;
}
.msg-co-price.their {
    background: #fffbeb;
    color: #d97706;
}
.msg-co-action {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
}
.msg-co-action.now {
    color: #059669;
}
.msg-co-action.request {
    color: #d97706;
}

/* How it works card */
.msg-call-hiw {
    margin: 6px 14px 12px;
    padding: 12px;
    background: #f8f7fc;
    border: 1px solid #e5e3f1;
    border-radius: 10px;
}
.msg-call-hiw-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    color: #6d4ae8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.msg-call-hiw-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.msg-call-hiw-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.msg-call-hiw-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6d4ae8;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.msg-call-hiw-step-title {
    font-size: 12px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}
.msg-call-hiw-step-desc {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    line-height: 1.4;
    margin-top: 1px;
}

/* Mobile call sheet - hidden on desktop */
.msg-call-sheet-overlay {
    display: none;
}

@media (max-width: 767.98px) {
    /* Hide dropdown on mobile */
    .msg-call-drop {
        display: none !important;
    }
    /* Show bottom sheet on mobile */
    .msg-call-sheet-overlay {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 1060;
        flex-direction: column;
        justify-content: flex-end;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.25s;
    }
    .msg-call-sheet-overlay.open {
        pointer-events: all;
        opacity: 1;
    }
    .msg-call-sheet-bg {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.35);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .msg-call-sheet-panel {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 18px 18px 0 0;
        border-top: 1px solid #e5e3f1;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(.22,1,.36,1);
        box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
    }
    .msg-call-sheet-overlay.open .msg-call-sheet-panel {
        transform: translateY(0);
    }
    .msg-call-sheet-drag {
        width: 32px;
        height: 3px;
        border-radius: 1rem;
        background: #ddd9ee;
        margin: 10px auto 6px;
    }
    .msg-call-sheet-head {
        padding: 4px 16px 6px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }
    .msg-call-sheet-title {
        font-size: 16px;
        font-weight: 800;
        color: #1a1a2e;
    }
    .msg-call-sheet-panel .msg-call-drop-subtitle {
        padding: 0 0 8px;
    }
    .msg-call-sheet-panel .msg-call-drop-section {
        padding: 6px 16px 4px;
    }
    .msg-call-sheet-panel .msg-call-option {
        padding: 12px 16px;
    }
    .msg-call-sheet-panel .msg-call-drop-sep {
        margin: 4px 16px;
    }
    .msg-call-sheet-panel .msg-call-drop-note {
        margin: 4px 16px 16px;
        padding: 10px 12px;
    }
    .msg-call-sheet-panel .msg-call-hiw {
        margin: 6px 16px 16px;
    }
}

/* Dark mode support */
.dark-mode .msg-call-btn {
    background: #1e1d36;
    border-color: #2a2940;
    color: #e8e6f8;
}
.dark-mode .msg-call-btn:hover,
.dark-mode .msg-call-btn.open {
    background: rgba(124,58,237,0.1);
    border-color: #a78bfa;
    color: #a78bfa;
}
.dark-mode .msg-call-drop {
    background: #1e1d36;
    border-color: #2a2940;
    box-shadow: 0 12px 48px rgba(0,0,0,0.3);
}
.dark-mode .msg-call-drop-head {
    color: #e8e6f8;
}
.dark-mode .msg-call-online-badge {
    border-color: #2a2940;
    color: #5a586e;
}
.dark-mode .msg-call-online-badge.online {
    border-color: rgba(5,150,105,0.3);
    color: #34d399;
}
.dark-mode .msg-call-online-dot {
    background: #3b3960;
}
.dark-mode .msg-call-online-badge.online .msg-call-online-dot {
    background: #34d399;
}
.dark-mode .msg-call-online-badge.busy {
    border-color: rgba(239,68,68,0.3);
    color: #f87171;
}
.dark-mode .msg-call-online-badge.busy .msg-call-online-dot {
    background: #f87171;
}
.dark-mode .msg-call-drop-sep {
    background: #2a2940;
}
.dark-mode .msg-call-drop-note {
    background: rgba(124,58,237,0.08);
}
.dark-mode .msg-call-option:hover {
    background: rgba(124,58,237,0.08);
}
.dark-mode .msg-call-option:active {
    background: rgba(124,58,237,0.15);
}
.dark-mode .msg-co-name {
    color: #e8e6f8;
}
.dark-mode .msg-co-ico.audio {
    background: rgba(5,150,105,0.12);
    border-color: rgba(5,150,105,0.2);
}
.dark-mode .msg-co-ico.video {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.2);
}
.dark-mode .msg-call-hiw {
    background: rgba(124,58,237,0.06);
    border-color: #2a2940;
}
.dark-mode .msg-call-hiw-title {
    color: #a78bfa;
}
.dark-mode .msg-call-hiw-num {
    background: #7c3aed;
}
.dark-mode .msg-call-hiw-step-title {
    color: #e8e6f8;
}
.dark-mode .msg-co-ico.live {
    background: rgba(124,58,237,0.12);
    border-color: rgba(124,58,237,0.15);
}
@media (max-width: 767.98px) {
    .dark-mode .msg-call-sheet-panel {
        background: #1e1d36;
        border-top-color: #2a2940;
    }
    .dark-mode .msg-call-sheet-drag {
        background: #3b3960;
    }
    .dark-mode .msg-call-sheet-title {
        color: #e8e6f8;
    }
}

.msg-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    object-fit: cover;
}

/* Chat Body / Messages area */
.msg-chat-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 20px 8px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.msg-chat-body::-webkit-scrollbar {
    width: 5px;
}
.msg-chat-body::-webkit-scrollbar-track {
    background: transparent;
}
.msg-chat-body::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 10px;
}
.msg-chat-body::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

/* Date separator */
.msg-date-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 16px;
}
.msg-date-sep::before,
.msg-date-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e9e5f5;
}
.msg-date-sep span {
    font-size: 11.5px;
    color: #a5a0c0;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Message Bubbles --- */
.msg-bubble-sent .message {
    padding: 10px 16px !important;
    border-radius: 18px 18px 4px 18px !important;
    color: #fff !important;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
    word-break: break-word;
}
.msg-bubble-sent .message.msg-sent-bg {
    background: var(--msg-accent, #6332C8) !important;
    background: linear-gradient(135deg, var(--msg-accent, #6332C8), color-mix(in srgb, var(--msg-accent, #6332C8) 85%, #000)) !important;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.25);
}
.msg-bubble-sent .message a {
    color: #e0d4ff !important;
    text-decoration: underline !important;
}
.msg-bubble-sent .message.media-container {
    border-radius: 18px 18px 4px 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.msg-bubble-received .message {
    padding: 10px 16px !important;
    border-radius: 18px 18px 18px 4px !important;
    background: #f3f4f6 !important;
    color: #1e1b4b !important;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    word-break: break-word;
}
.msg-bubble-received .message.media-container {
    border-radius: 18px 18px 18px 4px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.msg-bubble-time {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 400;
    margin-top: 2px;
}

/* Delete button */
.msg-bubble-sent .btn-removeMsg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -30px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.15s ease;
    background: none;
    border: none;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    color: #d1d5db;
}
.msg-bubble-sent:hover .btn-removeMsg {
    opacity: 1;
}
.msg-bubble-sent .btn-removeMsg:hover {
    color: #ef4444;
}

/* Received avatar */
.msg-bubble-received .msg-recv-avatar {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

/* --- Input Area --- */
.msg-input-area {
    padding: 12px 16px 16px;
    background: #fff;
    border-top: 1px solid #f3f0ff;
    flex-shrink: 0;
    position: relative;
}
.msg-input-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f7ff;
    border-radius: 18px;
    padding: 10px 12px 10px 16px;
    border: 1.5px solid #ede9fe;
    transition: all 0.2s;
}
.msg-input-box:focus-within {
    border-color: rgba(124, 58, 237, 0.25);
}
.msg-input-box textarea,
.msg-input-box .form-control {
    flex: 1;
    border: none !important;
    background: transparent !important;
    font-size: 14px;
    font-weight: 500;
    color: #1e1b4b;
    padding: 2px 0 !important;
    line-height: 1.4;
    resize: none;
    box-shadow: none !important;
    min-height: unset;
}
.msg-input-box textarea::placeholder {
    color: #9ca3af;
}
.msg-price-box {
    margin-bottom: 0;
    align-items: center;
}
.msg-price-currency {
    font-size: 14px;
    font-weight: 600;
    color: #6d4ae8;
    flex-shrink: 0;
    line-height: 1;
}
.msg-price-box input.form-control {
    text-align: left;
}
.msg-emoji-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    padding: 4px;
    transition: all 0.15s;
    flex-shrink: 0;
}
.msg-emoji-btn:hover {
    color: var(--msg-accent);
}

.msg-input-actions {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 0 4px;
    width: 100%;
}
@media (max-width: 767.98px) {
    .msg-input-box textarea,
    .msg-input-box .form-control {
        font-size: 16px !important;
    }
}
.msg-input-tools {
    display: flex;
    gap: 2px;
}
.msg-attach-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #a5a0c0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}
.msg-attach-btn:hover {
    color: var(--msg-accent);
    background: #f5f3ff;
}
.msg-attach-btn svg {
    width: 18px;
    height: 18px;
}
.msg-attach-btn.active {
    color: var(--msg-accent);
    background: #f5f3ff;
}
.msg-input-tools .np-chip.msg-chip-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 10px;
    justify-content: center;
    gap: 0;
}
.msg-input-tools .np-chip.msg-chip-icon svg {
    width: 18px;
    height: 18px;
}
.msg-input-tools .np-chip.msg-chip-icon.active,
.msg-input-tools .np-chip.msg-chip-icon.btn-active-hover {
    border-color: rgba(124, 58, 237, 0.12);
    background: rgba(124, 58, 237, 0.06);
    color: #8b5cf6;
}

/* Emoji Dropdown - Modern Redesign */
.msg-input-tools .dropdown-emoji {
    border-radius: 16px;
    border: 1px solid #f0ecff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 12px;
    min-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    margin-bottom: 8px;
}
.msg-input-tools .dropdown-emoji .container {
    padding: 0;
    max-width: 100%;
}
.msg-input-tools .dropdown-emoji .row {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.msg-input-tools .dropdown-emoji .col-3 {
    flex: none;
    max-width: none;
    padding: 0;
    width: auto;
}
.msg-input-tools .dropdown-emoji .emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 22px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    user-select: none;
}
.msg-input-tools .dropdown-emoji .emoji:hover {
    background: #f5f3ff;
    transform: scale(1.15);
}
.msg-input-tools .dropdown-emoji .emoji:active {
    transform: scale(0.95);
}
.msg-input-tools .dropdown-emoji::-webkit-scrollbar {
    width: 5px;
}
.msg-input-tools .dropdown-emoji::-webkit-scrollbar-track {
    background: transparent;
}
.msg-input-tools .dropdown-emoji::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 10px;
}
.msg-input-tools .dropdown-emoji::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

/* Dark mode emoji dropdown */
.dark-mode .msg-input-tools .dropdown-emoji {
    background: #1a1932;
    border-color: #252442;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
}
.dark-mode .msg-input-tools .dropdown-emoji .emoji:hover {
    background: rgba(124, 58, 237, 0.12);
}
.dark-mode .msg-input-tools .dropdown-emoji::-webkit-scrollbar-thumb {
    background: #2a2940;
}
.dark-mode .msg-input-tools .dropdown-emoji::-webkit-scrollbar-thumb:hover {
    background: #3b3960;
}

.msg-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: none;
    background: #e5e7eb;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: scale(0.95);
    flex-shrink: 0;
    padding: 0;
}
.msg-send-btn:not(.e-none) {
    background: linear-gradient(
        135deg,
        var(--msg-accent),
        color-mix(in srgb, var(--msg-accent) 85%, #000)
    );
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
    transform: scale(1);
}
.msg-send-btn svg {
    width: 18px;
    height: 18px;
}

/* --- Empty State --- */
.msg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 40px 20px;
}
.msg-empty-icon {
    margin-bottom: 16px;
    color: var(--msg-accent);
    opacity: 0.5;
}
.msg-empty h2 {
    font-size: 22px;
    font-weight: 800;
    color: #1e1b4b;
    margin-bottom: 4px;
}
.msg-empty p {
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 20px;
}
.msg-empty .msg-compose-btn {
    padding: 10px 24px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        var(--msg-accent),
        color-mix(in srgb, var(--msg-accent) 85%, #000)
    );
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
}
.msg-empty .msg-compose-btn:hover {
    box-shadow: 0 6px 24px rgba(124, 58, 237, 0.35);
    transform: translateY(-1px);
}

/* Content locked in chat */
.msg-bubble-received .content-locked {
    border-radius: 18px 18px 18px 4px !important;
}

/* PPV locked button */
.msg-bubble-received .content-locked .btn {
    border-radius: 12px;
}

/* Subscription banner */
.msg-subscription-banner {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    margin: 0;
    background: #f0edff;
    border: 1px solid rgba(109, 74, 232, 0.12);
    border-radius: 0.75rem;
}
.msg-subscription-banner-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: rgba(109, 74, 232, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-subscription-banner-icon svg {
    width: 1rem;
    height: 1rem;
    color: #6D4AE8;
}
.msg-subscription-banner-text {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 500;
    color: #4E4C6A;
    line-height: 1.45;
}
.msg-subscription-banner-text strong {
    font-weight: 700;
    color: #12112A;
}
.msg-subscription-banner-btn {
    padding: 0.45rem 0.85rem;
    border: none;
    border-radius: 0.5rem;
    background: #6D4AE8;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    transition: all 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.msg-subscription-banner-btn:hover {
    background: #8B6FF0;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Dropdown in chat header */
.msg-chat-header .dropdown-menu {
    border-radius: 12px;
    border: 1px solid #f0ecff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    padding: 6px;
}
.msg-chat-header .dropdown-item {
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13.5px;
    transition: background 0.15s;
}

/* Verified badge in messages context */
.msg-verified-badge {
    display: inline-flex;
    vertical-align: middle;
}

/* --- Desktop Overrides --- */
@media (min-width: 768px) {
    .msg-app {
        border-radius: 0;
        box-shadow: none;
        height: 100%;
    }
}

/* ================================================================
   CONSULTATION REMINDER CARDS (cr-*)
   ================================================================ */
.cr-card {
    max-width: 380px;
    width: 100%;
    background: #fff;
    border: 1px solid #ECEAF6;
    border-radius: 1rem;
    overflow: hidden;
    font-family: 'Outfit', 'Cairo', sans-serif;
}
.cr-card-body {
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.cr-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}
.cr-card-icon {
    width: 2.57rem;
    height: 2.57rem;
    border-radius: 0.7rem;
    background: #EDE8FD;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6D4AE8;
}
.cr-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #12112A;
    line-height: 1.3;
}
.cr-card-subtitle {
    font-size: 0.85rem;
    color: #5A5A72;
    margin-top: 0.14rem;
}
.cr-card-time {
    background: #F5F5F9;
    border-radius: 0.57rem;
    padding: 0.57rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.57rem;
    color: #5A5A72;
}
.cr-card-time-value {
    font-size: 0.93rem;
    font-weight: 600;
    color: #12112A;
}
.cr-card-time-label {
    font-size: 0.85rem;
    color: #908EAC;
}
.cr-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.43rem;
    background: #6D4AE8;
    color: #fff;
    border-radius: 0.7rem;
    padding: 0.7rem 1.15rem;
    font-size: 0.93rem;
    font-weight: 500;
    text-decoration: none;
    font-family: 'Outfit', 'Cairo', sans-serif;
    letter-spacing: 0.01em;
    transition: background 0.15s;
}
.cr-card-cta:hover {
    background: #5B3BD4;
    color: #fff;
    text-decoration: none;
}
.cr-card-notice {
    display: flex;
    align-items: center;
    gap: 0.43rem;
    background: #FFF7ED;
    border-radius: 0.57rem;
    padding: 0.57rem 0.85rem;
    color: #BA7517;
}
.cr-card-notice-text {
    font-size: 0.85rem;
    color: #854F0B;
    font-weight: 500;
}
.cr-card-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 1.15rem 0.57rem;
}
.cr-card-footer span {
    font-size: 0.78rem;
    color: #908EAC;
}

/* ================================================================
   CALL STARTED NOTIFICATION (cs-*)
   ================================================================ */
@keyframes cs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.cs-card {
    max-width: 380px;
    width: 100%;
    background: #fff;
    border: 1px solid #ECEAF6;
    border-radius: 1rem;
    overflow: hidden;
    font-family: 'Outfit', 'Cairo', sans-serif;
}
.cs-card-body {
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.cs-card-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.cs-card-icon {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 50%;
    background: #ECFDF5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    color: #059669;
}
.cs-card-icon-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #059669;
    border: 2px solid #fff;
}
.cs-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #12112A;
    line-height: 1.3;
}
.cs-card-live {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.14rem;
}
.cs-card-live-dot {
    width: 0.43rem;
    height: 0.43rem;
    border-radius: 50%;
    background: #059669;
    animation: cs-pulse 1.5s infinite;
}
.cs-card-live-text {
    font-size: 0.85rem;
    color: #059669;
    font-weight: 500;
}
.cs-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.43rem;
    background: #059669;
    color: #fff;
    border-radius: 0.7rem;
    padding: 0.7rem 1.15rem;
    font-size: 0.93rem;
    font-weight: 500;
    text-decoration: none;
    font-family: 'Outfit', 'Cairo', sans-serif;
    letter-spacing: 0.01em;
    transition: background 0.15s;
}
.cs-card-cta:hover {
    background: #047857;
    color: #fff;
    text-decoration: none;
}
.cs-card-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 1.15rem 0.57rem;
}
.cs-card-footer span {
    font-size: 0.78rem;
    color: #908EAC;
}

/* ================================================================
   MESSAGES DARK MODE
   ================================================================ */
.dark-mode .msg-app {
    background: #13122a;
}
.dark-mode .msg-sidebar {
    background: #13122a;
    border-right-color: #1e1d36;
}
.dark-mode .msg-sidebar-header {
    border-bottom-color: #1e1d36;
}
.dark-mode .msg-sidebar-header h5 {
    color: #e8e6f8;
}
.dark-mode .msg-sidebar-btn:hover {
    background: rgba(124, 58, 237, 0.1);
}
.dark-mode .dnd-toggle {
    border-color: #2a2a35;
    background: #18181f;
    color: #555;
}
.dark-mode .dnd-toggle:hover {
    background: #1e1e28;
}
.dark-mode .dnd-toggle.dnd-active {
    border-color: #7c5cfc;
    background: #1a1430;
    color: #a78bfa;
}
.dark-mode .dnd-toggle.dnd-active:hover {
    background: #221a40;
}

.dark-mode .msg-search-box {
    background: #1a1932;
    border-color: #1e1d36;
}
.dark-mode .msg-search-box:focus-within {
    border-color: rgba(124, 58, 237, 0.3);
}
.dark-mode .msg-search-box input {
    color: #e2e0f0;
}
.dark-mode .msg-search-box input::placeholder {
    color: #5a586e;
}

.dark-mode .msg-contact:hover {
    background: rgba(124, 58, 237, 0.08) !important;
}
.dark-mode .msg-contact-name,
.dark-mode .msg-contact-name a {
    color: #e2e0f0 !important;
}
.dark-mode .msg-contact-preview {
    color: #7c7a92 !important;
}
.dark-mode .msg-contact-time {
    color: #5a586e !important;
}
.dark-mode .msg-contact.active .msg-contact-name,
.dark-mode .msg-contact.active .msg-contact-name a {
    color: #fff !important;
}
.dark-mode .msg-contact.active .msg-contact-preview {
    color: rgba(255, 255, 255, 0.73) !important;
}
.dark-mode .msg-contact.active .msg-contact-time {
    color: rgba(255, 255, 255, 0.67) !important;
}
.dark-mode .msg-contact.active .msg-contact-badge {
    background: #fff;
    color: var(--msg-accent);
}

.dark-mode .msg-no-chats p {
    color: #5a586e;
}

.dark-mode .msg-chat {
    background: #100f22;
}
.dark-mode .msg-chat-header {
    background: #13122a;
    border-bottom-color: #1e1d36;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.dark-mode .msg-chat-header-name a {
    color: #e8e6f8 !important;
}
.dark-mode .msg-action-btn {
    color: #5a586e;
}
.dark-mode .msg-action-btn:hover {
    background: rgba(124, 58, 237, 0.1);
    color: #a78bfa;
}

.dark-mode .msg-chat-body::-webkit-scrollbar-thumb {
    background: #2a2940;
}
.dark-mode .msg-chat-body::-webkit-scrollbar-thumb:hover {
    background: #3b3960;
}

.dark-mode .msg-date-sep::before,
.dark-mode .msg-date-sep::after {
    background: #1e1d36;
}
.dark-mode .msg-date-sep span {
    color: #4a4860;
}

.dark-mode .msg-bubble-sent .message {
    box-shadow: 0 2px 14px rgba(124, 58, 237, 0.3) !important;
}
.dark-mode .msg-bubble-sent .message.media-container,
.dark-mode .msg-bubble-received .message.media-container {
    background: transparent !important;
    box-shadow: none !important;
}
.dark-mode .msg-bubble-received .message {
    background: #1e1d30 !important;
    color: #ddd8f0 !important;
    border: 1px solid rgba(124, 58, 237, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}
.dark-mode .msg-bubble-time {
    color: #5a586e;
}
.dark-mode .msg-bubble-sent .btn-removeMsg {
    color: #4b5563;
}
.dark-mode .msg-bubble-sent .btn-removeMsg:hover {
    color: #ef4444;
}

.dark-mode .msg-input-area {
    background: #13122a;
    border-top-color: #1e1d36;
}
.dark-mode .msg-input-box {
    background: #1a1932;
    border-color: #252442;
}
.dark-mode .msg-input-box:focus-within {
    border-color: rgba(124, 58, 237, 0.3);
}
.dark-mode .msg-input-box textarea,
.dark-mode .msg-input-box .form-control {
    color: #e2e0f0 !important;
}
.dark-mode .msg-input-box textarea::placeholder {
    color: #5a586e;
}
.dark-mode .msg-price-currency {
    color: #a78bfa;
}
.dark-mode .msg-emoji-btn {
    color: #5a586e;
}
.dark-mode .msg-emoji-btn:hover {
    color: #a78bfa;
}

.dark-mode .msg-attach-btn {
    color: #4a4860;
}
.dark-mode .msg-attach-btn:hover {
    color: #a78bfa;
    background: rgba(124, 58, 237, 0.1);
}
.dark-mode .msg-input-tools .np-chip.msg-chip-icon.active,
.dark-mode .msg-input-tools .np-chip.msg-chip-icon.btn-active-hover {
    border-color: rgba(139, 92, 246, 0.2);
    background: rgba(139, 92, 246, 0.1);
    color: #c4b5fd;
}
.dark-mode .msg-send-btn {
    background: #1e1d36;
}

.dark-mode .msg-empty h2 {
    color: #e8e6f8;
}
.dark-mode .msg-empty p {
    color: #5a586e;
}

/* -- Consultation Reminder Cards (dark) -- */
.dark-mode .cr-card {
    background: #1e1d30;
    border-color: #2a2940;
}
.dark-mode .cr-card-icon {
    background: #2a2350;
    color: #a78bfa;
}
.dark-mode .cr-card-title {
    color: #e8e6f8;
}
.dark-mode .cr-card-subtitle {
    color: #7c7a92;
}
.dark-mode .cr-card-time {
    background: #16152a;
    color: #7c7a92;
}
.dark-mode .cr-card-time-value {
    color: #e8e6f8;
}
.dark-mode .cr-card-time-label {
    color: #5a586e;
}
.dark-mode .cr-card-cta {
    background: #6D4AE8;
}
.dark-mode .cr-card-cta:hover {
    background: #7C5CFC;
}
.dark-mode .cr-card-notice {
    background: #2a2010;
    color: #D4A041;
}
.dark-mode .cr-card-notice-text {
    color: #D4A041;
}
.dark-mode .cr-card-footer span {
    color: #5a586e;
}

/* -- Call Started Notification (dark) -- */
.dark-mode .cs-card {
    background: #1e1d30;
    border-color: #2a2940;
}
.dark-mode .cs-card-icon {
    background: #0f2a20;
    color: #34d399;
}
.dark-mode .cs-card-icon-dot {
    background: #34d399;
    border-color: #1e1d30;
}
.dark-mode .cs-card-title {
    color: #e8e6f8;
}
.dark-mode .cs-card-live-dot {
    background: #34d399;
}
.dark-mode .cs-card-live-text {
    color: #34d399;
}
.dark-mode .cs-card-cta {
    background: #059669;
}
.dark-mode .cs-card-cta:hover {
    background: #10b981;
}
.dark-mode .cs-card-footer span {
    color: #5a586e;
}

.dark-mode .msg-chat-header .dropdown-menu {
    background: #1a1932;
    border-color: #252442;
}
.dark-mode .msg-chat-header .dropdown-item {
    color: #e2e0f0;
}
.dark-mode .msg-chat-header .dropdown-item:hover {
    background: rgba(124, 58, 237, 0.1);
}

@media (min-width: 768px) {
    .dark-mode .msg-app {
        box-shadow: none;
    }
}

/* ══════════════════════════════════════════════════
   NEW POST MODAL (np-*)
   Design tokens — Light:
     bg:#fff  bgRaised:#f9f9fb  bgInput:#f4f4f6  bgHover:#eeeef1
     text:#18181b  textSec:#52525b  textMuted:#8b8b96  textDim:#b0b0ba
     accent:#7c3aed  accentLight:#8b5cf6
     accentSoft:rgba(124,58,237,.06)  accentBorder:rgba(124,58,237,.12)
     border:#e4e4e9  borderLight:#ededf0  surfaceBorder:#e6e6eb
     green:#16a34a  amber:#d97706  blue:#2563eb
   ══════════════════════════════════════════════════ */

/* ══ Modal Shell ══ */
.np-modal {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e6e6eb;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    background: #f9f9fb;
}

/* ── Header ── */
.np-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #e6e6eb;
    flex-shrink: 0;
}
.np-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.np-header-avatar {
    flex-shrink: 0;
}
.np-header-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    object-fit: cover;
}
.np-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #18181b;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.np-subtitle {
    font-size: 13px;
    color: #71717a;
    margin-top: 0;
    line-height: 1.15;
}
.np-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    background: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.2s;
}
.np-close:hover {
    background: #6d28d9;
    color: white;
}

/* ── Body ── */
.np-body {
    padding: 20px 24px 0 !important;
    min-height: 0;
    background: #f9f9fb;
}

/* ── Textarea ── */
.np-textarea-section {
    position: relative;
    margin-bottom: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px !important;
    border: 1px solid #e0e0e5;
}
.np-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 200px;
    resize: none;
    overflow-y: auto;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #18181b;
    font-size: 16px;
    line-height: 1.7;
    padding: 0 36px 0 0 !important;
    box-shadow: none !important;
}
.np-textarea::placeholder {
    color: #a1a1aa;
}
.np-emoji-wrap {
    position: absolute;
    top: 0;
    right: 0;
}
.np-emoji-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a1a1aa;
    transition: all 0.15s;
}
.np-emoji-btn:hover {
    background: #eeeef1;
    color: #3f3f46;
    border-color: transparent;
}
.np-emoji-btn span {
    display: none;
}

/* ── Media section ── */
.np-media-section {
    margin-bottom: 14px;
}

/* ── Media List (unified upload cards) ── */
.np-media-list {
    padding: 0 16px;
    margin-bottom: 8px;
}
.np-media-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 8px;
    margin-bottom: 2px;
}
.np-media-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.np-media-header-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a26;
    letter-spacing: -0.01em;
}
.np-media-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 100px;
    background: #6d4ae8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.np-media-status {
    font-size: 12px;
    color: #6e6e82;
    font-weight: 500;
}
.np-media-items {
    list-style: none;
    padding: 0;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    white-space: normal !important;
}
/* Override old fileuploader theme wrappers */
.np-media-list .fileuploader-items {
    white-space: normal !important;
}
.np-media-list .np-card.np-card {
    position: static !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    padding-top: 14px !important;
    margin: 0 !important;
    vertical-align: baseline !important;
}

/* ── Media Thumbnail ── */
.np-thumb {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    border-radius: 10px;
    overflow: hidden;
    background: #f0eef5;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.np-thumb .fileuploader-item-image,
.np-thumb .fileuploader-item-image img,
.np-thumb .fileuploader-item-image canvas {
    width: 62px !important;
    height: 62px !important;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.np-thumb .fileuploader-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 11px;
    font-weight: 600;
    color: #6d4ae8;
    text-transform: uppercase;
}
.np-type-label {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1.4;
    letter-spacing: 0.3px;
    backdrop-filter: blur(4px);
}
.np-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.np-play-overlay svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}
.np-thumb-audio {
    background: linear-gradient(135deg, #ede8fd 0%, #f3f0ff 100%);
}
.np-thumb-audio::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%236D4AE8' stroke-width='1.5' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.np-meta-sep {
    color: #c0c0cc;
}
.np-meta-type {
    text-transform: capitalize;
}

/* ── Add More Button (override old fileuploader theme sizing) ── */
.np-media-list .np-add-more.fileuploader-thumbnails-input {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: auto !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    border: 2px dashed #d8d8e2;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    vertical-align: baseline;
}
.np-media-list .np-add-more:hover {
    border-color: #6d4ae8;
    background: #fdfcff;
}
.np-add-more-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #6e6e82;
}
.np-add-more:hover .np-add-more-inner {
    color: #6d4ae8;
}
.np-add-more svg {
    stroke: currentColor;
}

/* Dark mode — Media list */
.dark-mode .np-media-header-title {
    color: #f0f0f2;
}
.dark-mode .np-media-count {
    background: #7c5cfc;
}
.dark-mode .np-media-status {
    color: #8888a0;
}
.dark-mode .np-thumb {
    background: #1e1e2a;
}
.dark-mode .np-thumb-audio {
    background: linear-gradient(135deg, #1c1a30 0%, #18172a 100%);
}
.dark-mode .np-thumb-audio::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23A78BFA' stroke-width='1.5' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
}
.dark-mode .np-media-list .np-add-more.fileuploader-thumbnails-input {
    border-color: #2a2a3a;
    background: transparent;
}
.dark-mode .np-media-list .np-add-more:hover {
    border-color: #7c5cfc;
    background: rgba(124, 92, 252, 0.06);
}
.dark-mode .np-add-more-inner {
    color: #8888a0;
}
.dark-mode .np-add-more:hover .np-add-more-inner {
    color: #a78bfa;
}

/* Responsive — Media cards */
@media (max-width: 575.98px) {
    .np-media-list {
        padding: 0 12px;
    }
    .np-thumb {
        width: 52px;
        height: 52px;
    }
    .np-thumb .fileuploader-item-image,
    .np-thumb .fileuploader-item-image img,
    .np-thumb .fileuploader-item-image canvas {
        width: 52px !important;
        height: 52px !important;
    }
    .np-card {
        padding: 10px 12px;
        gap: 10px;
    }
    .np-fname {
        font-size: 13px;
    }
}

/* ── Poll Section ── */
.np-poll-section {
    padding: 16px;
    border-radius: 14px;
    background: #f9f9fb;
    border: 1px solid #ededf0;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.np-poll-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.np-poll-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: #18181b;
}
.np-poll-title svg {
    color: #8b5cf6;
}
.np-remove-section {
    background: none;
    border: none;
    cursor: pointer;
    color: #71717a;
    font-size: 13px;
    padding: 0;
}
.np-remove-section:hover {
    color: #3f3f46;
}
.np-poll-option-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}
.np-poll-option-num {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #8b5cf6;
    flex-shrink: 0;
}
.np-poll-input {
    border-radius: 10px !important;
    border: 1px solid #e4e4e9 !important;
    background: #ffffff !important;
    color: #18181b;
    font-size: 14px;
}
.np-poll-input:focus {
    border-color: #7c3aed !important;
}
.np-poll-remove-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #e4e4e9;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0b0ba;
    flex-shrink: 0;
}
.np-poll-remove-btn:hover {
    color: #dc2626;
    border-color: #dc2626;
}
.np-add-option-btn {
    padding: 8px 0;
    border: 1px dashed #d4d4d8;
    border-radius: 10px;
    background: transparent;
    color: #71717a;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
}
.np-add-option-btn:hover {
    border-color: #a1a1aa;
    color: #3f3f46;
}
.np-poll-duration {
    margin-top: 4px;
}

/* ── Schedule Section ── */
.np-schedule-section {
    padding: 16px;
    border-radius: 14px;
    background: rgba(217, 119, 6, 0.06);
    border: 1px solid rgba(217, 119, 6, 0.12);
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.np-schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.np-schedule-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: #b45309;
}
.np-schedule-fields {
    display: flex;
    gap: 10px;
}
.np-input {
    border-radius: 10px !important;
    border: 1px solid #e4e4e9 !important;
    background: #ffffff !important;
    font-size: 14px !important;
}
.np-time-input {
    width: 120px !important;
    flex: none !important;
}

/* ── Settings Section ── */
.np-settings-section {
    border-radius: 14px;
    border: 1.5px dashed rgba(99, 50, 200, 0.4);
    margin-bottom: 14px;
    background: rgba(99, 50, 200, 0.03);
    transition: all 0.2s;
    overflow: visible;
}
.np-settings-section.np-settings-open {
    border-color: rgba(99, 50, 200, 0.35);
    border-style: solid;
    background: rgba(99, 50, 200, 0.05);
}
.np-settings-toggle {
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.np-settings-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.np-settings-toggle-left svg {
    color: #8b5cf6;
}
.np-settings-title-bold {
    font-size: 14.5px;
    font-weight: 700;
    color: #18181b;
}
.np-settings-title-sep {
    font-size: 14px;
    color: #d4d4d8;
    margin: 0 2px;
    font-weight: 400;
}
.np-settings-title-sub {
    font-size: 13px;
    font-weight: 400;
    color: #71717a;
}
.np-settings-count {
    width: 23px;
    height: 23px;
    border-radius: 20px;
    background: #7c3aed;
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.np-settings-toggle-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.np-settings-preview {
    display: flex;
    gap: 5px;
}
.np-chevron {
    color: #b0b0ba;
    transition: transform 0.25s;
}
.np-settings-open .np-settings-toggle .np-chevron {
    transform: rotate(180deg);
}

.np-settings-body {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.np-settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.np-settings-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.np-settings-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #52525b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.np-settings-divider {
    width: 1px;
    height: 40px;
    background: #e4e4e9;
    align-self: flex-end;
    margin-bottom: 4px;
}
.np-settings-sep {
    height: 1px;
    background: #ededf0;
}

/* Gender toggle */
.np-gender-toggle {
    display: flex;
    gap: 0;
    background: #fafafa;
    border-radius: 10px;
    padding: 3px;
    border: 1px solid #e4e4e9;
}
.np-gender-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #71717a;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.np-gender-btn svg {
    flex-shrink: 0;
}
.np-gender-btn.active {
    background: white;
    color: #18181b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Tier button */
.np-tier-btn {
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #e4e4e9;
    background: #ffffff;
    color: #3f3f46;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 180px;
    transition: all 0.15s;
}
.np-tier-btn.np-tier-active {
    border-color: rgba(124, 58, 237, 0.35);
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.04);
}

/* Tier info icon + explainer */
.np-tier-info-icon {
    display: inline-flex;
    align-items: center;
    cursor: help;
    color: #b0b0ba;
    margin-left: 4px;
    vertical-align: middle;
    transition: color 0.15s;
}
.np-tier-info-icon:hover {
    color: #7c3aed;
}
.np-tier-explainer {
    font-size: 12px;
    color: #71717a;
    line-height: 1.4;
    margin-top: 4px;
    padding-left: 20px;
}

/* Pricing options */
.np-pricing-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.np-pricing-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.np-pricing-option {
    padding: 10px 13px;
    border-radius: 11px;
    text-align: left;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: transparent;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    transition: all 0.15s;
}
.np-pricing-option:hover {
    background: rgba(0, 0, 0, 0.015);
}
.np-pricing-option.active {
    border-color: rgba(22, 163, 74, 0.12);
    background: rgba(22, 163, 74, 0.06);
}
.np-pricing-radio {
    width: 18px;
    height: 18px;
    border-radius: 18px;
    border: 2px solid #e4e4e9;
    background: transparent;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.np-pricing-option.active .np-pricing-radio {
    border-color: #16a34a;
    background: #16a34a;
}
.np-pricing-check {
    display: none;
}
.np-pricing-option.active .np-pricing-check {
    display: block;
}
.np-pricing-label {
    font-size: 14px;
    font-weight: 600;
    color: #3f3f46;
    line-height: 1.2;
}
.np-pricing-option.active .np-pricing-label {
    color: #18181b;
}
.np-pricing-desc {
    font-size: 12.5px;
    color: #71717a;
    margin-top: 2px;
}

/* Free tiers checkboxes */
.np-free-tiers {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 4px;
    padding-left: 4px;
}
.np-free-tiers-label {
    font-size: 13px;
    font-weight: 700;
    color: #3f3f46;
}
.np-tier-check-btn {
    padding: 10px 14px;
    border-radius: 11px;
    cursor: pointer;
    border: 1.5px solid #ededf0;
    background: #f9f9fb;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    width: 100%;
    transition: all 0.15s;
}
.np-tier-check-btn.active {
    border-color: rgba(124, 58, 237, 0.35);
    background: rgba(124, 58, 237, 0.04);
}
.np-tier-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1.5px solid #e4e4e9;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.np-tier-check-btn.active .np-tier-checkbox {
    border-color: #7c3aed;
    background: #7c3aed;
}
.np-tier-check-info {
    flex: 1;
    min-width: 0;
}
.np-tier-check-name {
    font-size: 14px;
    font-weight: 600;
    color: #3f3f46;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.np-tier-check-btn.active .np-tier-check-name {
    color: #18181b;
}
.np-tier-check-price {
    font-size: 12.5px;
    color: #71717a;
}

/* Price input row */
.np-price-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}
.np-price-label {
    font-size: 13px;
    font-weight: 700;
    color: #3f3f46;
    white-space: nowrap;
}
.np-price-input-wrap {
    position: relative;
    flex: 1;
    max-width: 150px;
}
.np-price-symbol {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #71717a;
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
}
.np-price-symbol-left {
    left: 11px;
}
.np-price-symbol-right {
    right: 11px;
}
.np-price-input {
    width: 100%;
    border-radius: 10px !important;
    border: 1px solid #e4e4e9 !important;
    background: #ffffff !important;
    color: #18181b;
    font-size: 14px !important;
    font-weight: 600;
    padding: 9px 14px !important;
}
.np-price-symbol-left + .np-price-input {
    padding-left: 28px !important;
}
.np-price-input.np-price-input-right {
    padding-right: 28px !important;
}
.np-price-input:focus {
    border-color: #16a34a !important;
}

/* Preview title row */
.np-preview-title-row {
    padding-top: 8px;
}
.np-field-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #52525b;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
}

/* ── Footer ── */
.np-footer {
    padding: 14px 24px 16px;
    border-top: none;
    background: #f9f9fb;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}
.np-footer-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

/* Chip buttons */
.np-chip {
    padding: 6px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #d4d4d8;
    background: transparent;
    color: #52525b;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
}
.np-chip:hover {
    background: #eeeef1;
    color: #3f3f46;
}
.np-chip.active {
    border-color: rgba(124, 58, 237, 0.12);
    background: rgba(124, 58, 237, 0.06);
    color: #8b5cf6;
}
.np-chip.np-schedule-toggle {
    border-color: rgba(217, 119, 6, 0.15);
    background: rgba(217, 119, 6, 0.06);
    color: #b45309;
}
.np-chip.np-schedule-toggle:hover {
    background: rgba(217, 119, 6, 0.1);
    color: #92400e;
}
.np-chip.np-schedule-toggle.active {
    border-color: rgba(217, 119, 6, 0.25);
    background: rgba(217, 119, 6, 0.1);
    color: #92400e;
}
.np-chip svg {
    width: 15px;
    height: 15px;
}

/* Community inline composer: avoid modal-style stretched body spacing */
.card#newPostForm[data-post-modal="community"] .np-modal {
    display: block;
    max-height: none;
    min-height: 0;
}
.card#newPostForm[data-post-modal="community"] .np-body {
    overflow: visible;
    padding-bottom: 14px !important;
}

/* Community inline composer: keep textarea without vertical scrollbar */
.card#newPostForm[data-post-modal="community"] .np-textarea {
    overflow-y: hidden;
}

/* Main new-post modal: prevent forced empty body area and textarea scrollbar */
#newPostForm[data-post-modal="main"] .np-body {
    flex: 0 0 auto !important;
}
#newPostForm[data-post-modal="main"] .np-textarea {
    overflow-y: hidden;
}

/* Topics row */
.np-topics-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    min-width: 0;
}
.np-topic-chip {
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
}
.np-topic-chip:hover {
    background: rgba(124, 58, 237, 0.1);
}
.np-topic-chip svg {
    width: 11px;
    height: 11px;
}
.np-topic-add-btn {
    padding: 6px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    border: 1px dashed rgba(124, 58, 237, 0.25);
    background: rgba(124, 58, 237, 0.05);
    color: #7c3aed;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
}
.np-topic-add-btn:hover {
    border-color: rgba(124, 58, 237, 0.35);
    color: #6d28d9;
    background: rgba(124, 58, 237, 0.1);
}

/* Topic picker popup */
.np-topic-picker {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 300;
    background: white;
    border: 1px solid #e6e6eb;
    border-radius: 14px;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.1);
    min-width: 260px;
}
.np-topic-option {
    padding: 6px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #e4e4e9;
    background: transparent;
    color: #3f3f46;
    transition: all 0.15s;
}
.np-topic-option.selected {
    border-color: rgba(124, 58, 237, 0.15);
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
}
.np-topic-option:hover {
    background: #eeeef1;
}
.np-topic-create-btn {
    font-weight: 700;
}
.np-topic-create-row {
    width: 100%;
}
.np-topic-inline-create {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid #ededf0;
    margin-top: 4px;
}
.np-topic-inline-actions {
    display: flex;
    gap: 4px;
}
.np-topic-save-btn {
    background: #7c3aed;
    color: white;
    border-radius: 8px;
    font-size: 12px;
    padding: 4px 12px;
}
.np-topic-cancel-btn {
    background: transparent;
    color: #8b8b96;
    border: 1px solid #e4e4e9;
    border-radius: 8px;
    font-size: 12px;
    padding: 4px 12px;
}

/* Publish group (schedule + publish) */
.np-publish-group {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

/* Publish button */
.np-publish-btn {
    padding: 10px 26px;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 12px;
    background: #e4e4e7;
    border: none;
    color: #a1a1aa;
    box-shadow: none;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.np-publish-btn.np-publish-ready {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
    cursor: pointer;
}
.np-publish-btn.np-publish-ready:hover {
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
    transform: translateY(-1px);
}
.np-publish-btn.np-publish-wait {
    background: #eeeef1;
    color: #8b8b96;
    cursor: not-allowed;
}
.np-publish-btn.np-upload-waiting {
    background: #eeeef1;
    color: #8b8b96;
    cursor: not-allowed;
    opacity: 0.8;
    pointer-events: none;
}
.np-publish-btn.np-upload-waiting .np-publish-spinner {
    display: inline-block !important;
}
.np-publish-spinner {
    vertical-align: middle;
    margin-right: 4px;
}

/* Badges row */
.np-badges-row {
    justify-content: space-between;
    min-height: 18px;
}
.np-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.np-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid transparent;
}
.np-badge-green {
    background: rgba(22, 163, 74, 0.08);
    color: #15803d;
    border-color: rgba(22, 163, 74, 0.15);
}
.np-badge-amber {
    background: rgba(217, 119, 6, 0.08);
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.15);
}
.np-badge-blue {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.15);
}
.np-badge-accent {
    background: rgba(124, 58, 237, 0.08);
    color: #6d28d9;
    border-color: rgba(124, 58, 237, 0.15);
}
.np-char-count {
    font-size: 12px;
    color: #a1a1aa;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.np-char-count.np-char-over {
    color: #dc2626;
}

/* Tier dropdown overlay */
.np-tier-overlay {
    position: relative;
}
.np-tier-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
}
.np-tier-dropdown {
    position: fixed;
    z-index: 9999;
    background: white;
    border: 1px solid #e6e6eb;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    padding: 8px;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.np-tier-dropdown-title {
    padding: 6px 10px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #71717a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.np-tier-option {
    padding: 11px 14px;
    border-radius: 11px;
    text-align: left;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    transition: all 0.15s;
}
.np-tier-option:hover {
    background: #eeeef1;
}
.np-tier-option.active {
    border-color: rgba(124, 58, 237, 0.12);
    background: rgba(124, 58, 237, 0.06);
}
.np-tier-radio {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 2px solid #e4e4e9;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.np-tier-option.active .np-tier-radio {
    border-color: #7c3aed;
    background: #7c3aed;
}
.np-tier-option-info {
    flex: 1;
    min-width: 0;
}
.np-tier-name {
    font-size: 14.5px;
    font-weight: 600;
    color: #3f3f46;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.np-tier-option.active .np-tier-name {
    color: #18181b;
}
.np-tier-price {
    font-size: 13px;
    color: #71717a;
    margin-top: 1px;
}

/* ── Mobile overrides ── */
@media (max-width: 575.98px) {
    #newPostForm .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }
    #newPostForm .np-modal {
        border-radius: 0;
        min-height: 100vh;
        border: none;
    }
    #newPostForm .np-header {
        padding: 14px 18px;
    }
    #newPostForm .np-header-left > div > .np-title {
        line-height: 1.1;
        margin-bottom: 0;
    }
    #newPostForm .np-header-left > div > .np-subtitle {
        margin-top: 0;
    }
    #newPostForm .np-body {
        padding: 16px 18px 0 !important;
    }
    #newPostForm .np-footer {
        position: sticky;
        bottom: 0;
        z-index: 10;
        padding: 12px 18px 14px;
    }
    .np-chip {
        flex: 1 1 0;
        justify-content: center;
    }
    .np-chip.btnMultipleUpload {
        flex: 1 0 100%;
    }
    .np-publish-btn {
        padding: 10px 18px;
    }
    .np-settings-row {
        flex-direction: column;
        align-items: stretch;
    }
    .np-settings-divider {
        width: 100%;
        height: 1px;
    }
    .np-tier-dropdown {
        width: calc(100vw - 32px);
    }
}

/* ── Form controls in modal ── */
#newPostForm .form-control {
    border-radius: 10px;
    border: 1px solid #e4e4e9;
    background: #f4f4f6;
    color: #18181b;
    font-size: 14px;
    transition: border-color 0.15s;
}
#newPostForm .form-control:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}
#newPostForm .form-control::placeholder {
    color: #a1a1aa;
}
#newPostForm .input-group-text {
    border-radius: 10px;
    background: #f4f4f6;
    border: 1px solid #e4e4e9;
    color: #8b8b96;
    font-weight: 600;
}

/* ══ Poll Styles (np-poll-*) — Feed display ══ */
.np-poll-container {
    margin-bottom: 8px;
}
.np-poll-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin-bottom: 6px;
    border-radius: 11px;
    border: 1px solid #e4e4e9;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
}
.np-poll-votable:hover {
    border-color: rgba(124, 58, 237, 0.35);
    background: rgba(124, 58, 237, 0.04);
}
.np-poll-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(124, 58, 237, 0.06);
    border-radius: 11px;
    transition: width 0.6s ease;
    z-index: 0;
}
.np-poll-voted .np-poll-bar {
    background: rgba(124, 58, 237, 0.12);
}
.np-poll-text {
    position: relative;
    z-index: 1;
    font-size: 14.5px;
    font-weight: 500;
    color: #18181b;
}
.np-poll-pct {
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 700;
    color: #7c3aed;
}
.np-poll-voted {
    border-color: rgba(124, 58, 237, 0.25);
}
.np-poll-results {
    cursor: default;
}
.np-poll-results:hover {
    border-color: #e4e4e9;
    background: transparent;
}
.np-poll-voted:hover {
    border-color: rgba(124, 58, 237, 0.25);
}
.np-poll-meta {
    font-size: 12px;
}

/* ══════════════════════════════════════════════════
   DARK MODE — NEW POST MODAL
   ══════════════════════════════════════════════════ */

/* ── Modal shell ── */
.dark-mode .np-modal {
    background: #18181c;
    border-color: #232329;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.4);
}
.dark-mode .np-header {
    border-bottom-color: #232329;
}
.dark-mode .np-title {
    color: #f0f0f2;
}
.dark-mode .np-subtitle {
    color: #8b8b96;
}
.dark-mode .np-close {
    background: #7c3aed;
    border: none;
    color: white;
}
.dark-mode .np-close:hover {
    background: #6d28d9;
    color: white;
}

/* ── Body ── */
.dark-mode .np-body {
    background: #18181c;
}
.dark-mode .np-textarea-section {
    background: #111114;
    border-color: #2a2a32;
}

/* ── Textarea ── */
.dark-mode .np-textarea {
    color: #f0f0f2 !important;
}
.dark-mode .np-textarea::placeholder {
    color: #5a5a65;
}
.dark-mode .np-emoji-btn {
    color: #5a5a65;
}
.dark-mode .np-emoji-btn:hover {
    background: #222228;
    color: #d4d4d8;
}
.dark-mode .np-char-count {
    color: #5a5a65;
}

/* ── Poll section ── */
.dark-mode .np-poll-section {
    background: #18181c;
    border-color: #222228;
}
.dark-mode .np-poll-title {
    color: #f0f0f2;
}
.dark-mode .np-poll-title svg {
    color: #a78bfa;
}
.dark-mode .np-remove-section {
    color: #8b8b96;
}
.dark-mode .np-remove-section:hover {
    color: #d4d4d8;
}
.dark-mode .np-poll-option-num {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.18);
    color: #a78bfa;
}
.dark-mode .np-poll-input {
    background: #1c1c22 !important;
    border-color: #2a2a32 !important;
    color: #f0f0f2 !important;
}
.dark-mode .np-poll-input:focus {
    border-color: #8b5cf6 !important;
}
.dark-mode .np-poll-remove-btn {
    border-color: #2a2a32;
    color: #6b6b78;
}
.dark-mode .np-poll-remove-btn:hover {
    color: #ef4444;
    border-color: #ef4444;
}
.dark-mode .np-add-option-btn {
    border-color: #3a3a42;
    color: #8b8b96;
}
.dark-mode .np-add-option-btn:hover {
    border-color: #52525b;
    color: #d4d4d8;
}

/* ── Schedule section ── */
.dark-mode .np-schedule-section {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.15);
}
.dark-mode .np-schedule-title {
    color: #f59e0b;
}
.dark-mode .np-input {
    background: #1c1c22 !important;
    border-color: #2a2a32 !important;
    color: #f0f0f2 !important;
}

/* ── Settings section ── */
.dark-mode .np-settings-section {
    background: rgba(139, 92, 246, 0.04);
    border-color: rgba(139, 92, 246, 0.18);
    border-style: dashed;
}
.dark-mode .np-settings-section.np-settings-open {
    border-color: rgba(139, 92, 246, 0.32);
    background: rgba(139, 92, 246, 0.07);
    border-style: solid;
}
.dark-mode .np-settings-title-bold {
    color: #f0f0f2;
}
.dark-mode .np-settings-title-sep {
    color: #3a3a42;
}
.dark-mode .np-settings-title-sub {
    color: #8b8b96;
}
.dark-mode .np-settings-toggle-left svg {
    color: #a78bfa;
}
.dark-mode .np-settings-count {
    background: #8b5cf6;
}
.dark-mode .np-chevron {
    color: #6b6b78;
}
.dark-mode .np-settings-label {
    color: #8b8b96;
}
.dark-mode .np-settings-divider {
    background: #2a2a32;
}
.dark-mode .np-settings-sep {
    background: #222228;
}

/* Gender toggle dark */
.dark-mode .np-gender-toggle {
    background: #1c1c22;
    border-color: #2a2a32;
}
.dark-mode .np-gender-btn {
    color: #8b8b96;
}
.dark-mode .np-gender-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: #f0f0f2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Tier button dark */
.dark-mode .np-tier-btn {
    background: #1c1c22;
    border-color: #3a3a42;
    color: #d4d4d8;
}
.dark-mode .np-tier-btn.np-tier-active {
    border-color: rgba(139, 92, 246, 0.35);
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.06);
}
.dark-mode .np-tier-info-icon {
    color: #6b6b78;
}
.dark-mode .np-tier-info-icon:hover {
    color: #a78bfa;
}
.dark-mode .np-tier-explainer {
    color: #8b8b96;
}

/* Pricing dark */
.dark-mode .np-pricing-option:hover {
    background: rgba(255, 255, 255, 0.02);
}
.dark-mode .np-pricing-option.active {
    border-color: rgba(34, 197, 94, 0.15);
    background: rgba(34, 197, 94, 0.08);
}
.dark-mode .np-pricing-radio {
    border-color: #2a2a32;
}
.dark-mode .np-pricing-option.active .np-pricing-radio {
    border-color: #22c55e;
    background: #22c55e;
}
.dark-mode .np-pricing-label {
    color: #d4d4d8;
}
.dark-mode .np-pricing-option.active .np-pricing-label {
    color: #f0f0f2;
}
.dark-mode .np-pricing-desc {
    color: #8b8b96;
}

/* Free tiers dark */
.dark-mode .np-free-tiers-label {
    color: #d4d4d8;
}
.dark-mode .np-tier-check-btn {
    border-color: #222228;
    background: #18181c;
}
.dark-mode .np-tier-check-btn.active {
    border-color: rgba(139, 92, 246, 0.35);
    background: rgba(139, 92, 246, 0.06);
}
.dark-mode .np-tier-checkbox {
    border-color: #2a2a32;
}
.dark-mode .np-tier-check-btn.active .np-tier-checkbox {
    border-color: #8b5cf6;
    background: #8b5cf6;
}
.dark-mode .np-tier-check-name {
    color: #d4d4d8;
}
.dark-mode .np-tier-check-btn.active .np-tier-check-name {
    color: #f0f0f2;
}
.dark-mode .np-tier-check-price {
    color: #8b8b96;
}

/* Price input dark */
.dark-mode .np-price-label {
    color: #d4d4d8;
}
.dark-mode .np-price-symbol {
    color: #8b8b96;
}
.dark-mode .np-price-input {
    background: #1c1c22 !important;
    border-color: #2a2a32 !important;
    color: #f0f0f2 !important;
}
.dark-mode .np-price-input:focus {
    border-color: #22c55e !important;
}

/* Footer dark */
.dark-mode .np-footer {
    background: #18181c;
    border-top: none;
}
.dark-mode .np-chip {
    border-color: #3a3a42;
    color: #a0a0ab;
}
.dark-mode .np-chip:hover {
    background: #222228;
    color: #d4d4d8;
}
.dark-mode .np-chip.active {
    border-color: rgba(139, 92, 246, 0.18);
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
}
.dark-mode .np-chip.np-schedule-toggle {
    border-color: rgba(245, 158, 11, 0.15);
    background: rgba(245, 158, 11, 0.06);
    color: #f59e0b;
}
.dark-mode .np-chip.np-schedule-toggle:hover {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
}
.dark-mode .np-chip.np-schedule-toggle.active {
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

/* Topics dark */
.dark-mode .np-topic-chip {
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.18);
}
.dark-mode .np-topic-chip:hover {
    background: rgba(139, 92, 246, 0.15);
}
.dark-mode .np-topic-add-btn {
    border-color: rgba(139, 92, 246, 0.22);
    background: rgba(139, 92, 246, 0.06);
    color: #a78bfa;
}
.dark-mode .np-topic-add-btn:hover {
    border-color: rgba(139, 92, 246, 0.32);
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.1);
}
.dark-mode .np-topic-picker {
    background: #111114;
    border-color: #232329;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.55);
}
.dark-mode .np-topic-option {
    border-color: #3a3a42;
    color: #d4d4d8;
}
.dark-mode .np-topic-option.selected {
    border-color: rgba(139, 92, 246, 0.18);
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
}
.dark-mode .np-topic-option:hover {
    background: #222228;
}
.dark-mode .np-topic-inline-create {
    border-top-color: #222228;
}
.dark-mode .np-topic-save-btn {
    background: #8b5cf6;
}
.dark-mode .np-topic-cancel-btn {
    border-color: #3a3a42;
    color: #8b8b96;
}

/* Publish dark */
.dark-mode .np-publish-btn {
    background: #222228;
    color: #5a5a65;
}
.dark-mode .np-publish-btn.np-publish-ready {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
}
.dark-mode .np-publish-btn.np-publish-ready:hover {
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45);
}
.dark-mode .np-publish-btn.np-publish-wait {
    background: #222228;
    color: #6b6b78;
}
.dark-mode .np-publish-btn.np-upload-waiting {
    background: #222228;
    color: #6b6b78;
}

/* Badges dark */
.dark-mode .np-badge-green {
    background: rgba(34, 197, 94, 0.08);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.15);
}
.dark-mode .np-badge-amber {
    background: rgba(245, 158, 11, 0.08);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.15);
}
.dark-mode .np-badge-blue {
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.15);
}
.dark-mode .np-badge-accent {
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.18);
}

/* Tier dropdown dark */
.dark-mode .np-tier-dropdown {
    background: #111114;
    border-color: #232329;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
.dark-mode .np-tier-dropdown-title {
    color: #8b8b96;
}
.dark-mode .np-tier-option:hover {
    background: #222228;
}
.dark-mode .np-tier-option.active {
    border-color: rgba(139, 92, 246, 0.18);
    background: rgba(139, 92, 246, 0.06);
}
.dark-mode .np-tier-radio {
    border-color: #2a2a32;
}
.dark-mode .np-tier-option.active .np-tier-radio {
    border-color: #8b5cf6;
    background: #8b5cf6;
}
.dark-mode .np-tier-name {
    color: #d4d4d8;
}
.dark-mode .np-tier-option.active .np-tier-name {
    color: #f0f0f2;
}
.dark-mode .np-tier-price {
    color: #8b8b96;
}

/* Dark mode form controls */
.dark-mode #newPostForm .form-control {
    background: #1c1c22;
    border-color: #2a2a32;
    color: #f0f0f2;
}
.dark-mode #newPostForm .form-control:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}
.dark-mode #newPostForm .form-control::placeholder {
    color: #47474f;
}
.dark-mode #newPostForm .input-group-text {
    background: #222228;
    border-color: #2a2a32;
    color: #6b6b78;
}
.dark-mode #newPostForm select.form-control {
    color-scheme: dark;
}
.dark-mode #newPostForm input[type="date"],
.dark-mode #newPostForm input[type="time"] {
    color-scheme: dark;
}

/* Dark mode: Poll in feed */
.dark-mode .np-poll-option {
    border-color: #2a2a32;
}
.dark-mode .np-poll-votable:hover {
    border-color: rgba(139, 92, 246, 0.35);
    background: rgba(139, 92, 246, 0.06);
}
.dark-mode .np-poll-bar {
    background: rgba(139, 92, 246, 0.1);
}
.dark-mode .np-poll-voted .np-poll-bar {
    background: rgba(139, 92, 246, 0.18);
}
.dark-mode .np-poll-text {
    color: #f0f0f2;
}
.dark-mode .np-poll-pct {
    color: #a78bfa;
}
.dark-mode .np-poll-voted {
    border-color: rgba(139, 92, 246, 0.25);
}
.dark-mode .np-poll-results:hover {
    border-color: #2a2a32;
    background: transparent;
}
.dark-mode .np-poll-voted:hover {
    border-color: rgba(139, 92, 246, 0.25);
}

/* ══════════════════════════════════════════════════
   POST DROPDOWN MENU — Three-dots menu
   ══════════════════════════════════════════════════ */

/* ── Three-dots trigger button ── */
.post-menu-trigger {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    color: #a1a1aa;
}
.post-menu-trigger:hover {
    background: #f4f4f6;
    color: #52525b;
}
.post-menu-trigger:focus {
    outline: none;
}
.post-menu-trigger svg {
    pointer-events: none;
}

/* ── Dropdown container ── */
.post-dropdown {
    min-width: 200px !important;
    max-width: 240px;
    padding: 6px !important;
    border-radius: 14px !important;
    border: 1px solid #e6e6eb !important;
    background: #fff !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.04) !important;
    animation: postDropdownIn 0.18s ease-out;
}
@keyframes postDropdownIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ── Menu items ── */
.post-dropdown .post-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    border: none;
    width: 100%;
    background: transparent;
    color: #3f3f46;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
    text-decoration: none;
    line-height: 1.3;
    font-family: inherit;
    text-align: left;
}
.post-dropdown .post-menu-item:hover {
    background: rgba(124, 58, 237, 0.06);
    color: #7c3aed;
}
.post-dropdown .post-menu-item:focus {
    outline: none;
}
.post-dropdown .post-menu-item:active {
    transform: scale(0.98);
}

/* Icon wrapper */
.post-menu-item .pm-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.12s;
    background: #f4f4f6;
    color: #71717a;
}
.post-menu-item:hover .pm-icon {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

/* Pin item (accent style) */
.post-dropdown .post-menu-item.pm-pin {
    color: #7c3aed;
    font-weight: 600;
}
.post-dropdown .post-menu-item.pm-pin .pm-icon {
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
}
.post-dropdown .post-menu-item.pm-pin:hover {
    background: rgba(124, 58, 237, 0.06);
    color: #6d28d9;
}
.post-dropdown .post-menu-item.pm-pin:hover .pm-icon {
    background: rgba(124, 58, 237, 0.14);
    color: #6d28d9;
}

/* Unpin variant (muted) */
.post-dropdown .post-menu-item.pm-unpin {
    background: rgba(124, 58, 237, 0.06);
    color: #7c3aed;
    font-weight: 600;
}
.post-dropdown .post-menu-item.pm-unpin .pm-icon {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}
.post-dropdown .post-menu-item.pm-unpin:hover {
    background: rgba(124, 58, 237, 0.1);
    color: #6d28d9;
}

/* Delete item (danger) */
.post-dropdown .post-menu-item.pm-danger {
    color: #dc2626;
}
.post-dropdown .post-menu-item.pm-danger .pm-icon {
    background: rgba(220, 38, 38, 0.06);
    color: #dc2626;
}
.post-dropdown .post-menu-item.pm-danger:hover {
    background: rgba(220, 38, 38, 0.06);
    color: #dc2626;
}
.post-dropdown .post-menu-item.pm-danger:hover .pm-icon {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* Separator */
.post-dropdown .pm-sep {
    height: 1px;
    background: #f0f0f2;
    margin: 4px 8px;
}

/* ── Dark mode ── */
.dark-mode .post-menu-trigger:hover {
    background: #222228;
    color: #d4d4d8;
}
.dark-mode .post-menu-trigger svg path {
    fill: #8b8b96;
}

.dark-mode .post-dropdown {
    background: #18181c !important;
    border-color: #2a2a32 !important;
    box-shadow:
        0 12px 50px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
.dark-mode .post-dropdown .post-menu-item {
    color: #d4d4d8;
}
.dark-mode .post-dropdown .post-menu-item:hover {
    background: rgba(139, 92, 246, 0.08);
    color: #a78bfa;
}
.dark-mode .post-menu-item .pm-icon {
    background: #222228;
    color: #8b8b96;
}
.dark-mode .post-menu-item:hover .pm-icon {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
}

.dark-mode .post-dropdown .post-menu-item.pm-pin {
    color: #a78bfa;
}
.dark-mode .post-dropdown .post-menu-item.pm-pin .pm-icon {
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
}
.dark-mode .post-dropdown .post-menu-item.pm-pin:hover {
    background: rgba(139, 92, 246, 0.08);
    color: #c4b5fd;
}

.dark-mode .post-dropdown .post-menu-item.pm-unpin {
    background: rgba(139, 92, 246, 0.08);
    color: #a78bfa;
}
.dark-mode .post-dropdown .post-menu-item.pm-unpin .pm-icon {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
}

.dark-mode .post-dropdown .post-menu-item.pm-danger {
    color: #ef4444;
}
.dark-mode .post-dropdown .post-menu-item.pm-danger .pm-icon {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}
.dark-mode .post-dropdown .post-menu-item.pm-danger:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
}
.dark-mode .post-dropdown .post-menu-item.pm-danger:hover .pm-icon {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.dark-mode .post-dropdown .pm-sep {
    background: #2a2a32;
}

/* ══════════════════════════════════════════════════
   EDIT POST MODAL — Specific styles
   ══════════════════════════════════════════════════ */

/* ── Attachments section (read-only) ── */
.ep-attachments-section {
    padding: 16px;
    border-radius: 14px;
    background: #f9f9fb;
    border: 1px solid #ededf0;
    margin-bottom: 14px;
}
.ep-attachments-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ep-attachments-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #52525b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ep-attachments-lock-label {
    font-size: 11px;
    color: #a1a1aa;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f4f4f6;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid #ededf0;
}
.ep-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.ep-attachment-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e4e4e9;
    background: white;
    opacity: 0.85;
}
.ep-attachment-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ep-attachment-icon-image {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
}
.ep-attachment-icon-video {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}
.ep-attachment-icon-audio {
    background: rgba(217, 119, 6, 0.08);
    color: #d97706;
}
.ep-attachment-icon-pdf {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}
.ep-attachment-icon-zip {
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
}
.ep-attachment-icon-file {
    background: rgba(107, 114, 128, 0.08);
    color: #6b7280;
}
.ep-attachment-info {
    flex: 1;
    min-width: 0;
}
.ep-attachment-name {
    font-size: 13px;
    font-weight: 600;
    color: #3f3f46;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ep-attachment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.ep-attachment-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 4px;
}
.ep-attachment-size {
    font-size: 11px;
    color: #a1a1aa;
    font-weight: 500;
}

/* Poll locked message */
.ep-poll-locked-msg {
    font-size: 12.5px;
    color: #71717a;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Mobile overrides for edit modal */
@media (max-width: 575.98px) {
    #editPostModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }
    #editPostModal .np-modal {
        border-radius: 0;
        min-height: 100vh;
        border: none;
        max-height: 100vh;
    }
    #editPostModal .np-header {
        padding: 14px 18px;
    }
    #editPostModal .np-body {
        padding: 16px 18px 0 !important;
    }
    #editPostModal .np-footer {
        position: sticky;
        bottom: 0;
        z-index: 10;
        padding: 12px 18px 14px;
    }
    .ep-attachment-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Dark Mode: Edit Post Modal ── */
.dark-mode .ep-attachments-section {
    background: #18181c;
    border-color: #222228;
}
.dark-mode .ep-attachments-title {
    color: #8b8b96;
}
.dark-mode .ep-attachments-lock-label {
    color: #6b6b78;
    background: #1c1c22;
    border-color: #2a2a32;
}
.dark-mode .ep-attachment-item {
    border-color: #2a2a32;
    background: #1c1c22;
}
.dark-mode .ep-attachment-name {
    color: #d4d4d8;
}
.dark-mode .ep-attachment-size {
    color: #6b6b78;
}
.dark-mode .ep-poll-locked-msg {
    color: #8b8b96;
}

/* Edit modal form controls dark */
.dark-mode #editPostModal .form-control {
    background: #1c1c22;
    border-color: #2a2a32;
    color: #f0f0f2;
}
.dark-mode #editPostModal .form-control:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}
.dark-mode #editPostModal .form-control::placeholder {
    color: #47474f;
}
.dark-mode #editPostModal select.form-control {
    color-scheme: dark;
}
.dark-mode #editPostModal input[type="date"],
.dark-mode #editPostModal input[type="time"] {
    color-scheme: dark;
}

/* ======================================
   ZIP Download List — Light Mode
   ====================================== */
.zip-download-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
}
.zip-download-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 6px;
    margin-bottom: 10px;
}
.zip-header-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.zip-download-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #16162a;
}
.zip-file-count {
    font-size: 12px;
    font-weight: 500;
    color: #6d4ae8;
    background: #ede8fd;
    padding: 3px 10px;
    border-radius: 100px;
    font-variant-numeric: tabular-nums;
}
.zip-download-card {
    background: #fff;
    border: 1px solid #e5e5ed;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}
.zip-download-card:hover {
    border-color: #d2d2de;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
/* Icon */
.zip-icon {
    flex-shrink: 0;
    width: 46px;
    height: 56px;
}
.zip-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 6px rgba(109, 74, 232, 0.1));
}
.zi-page {
    fill: #f3f0ff;
}
.zi-fold {
    fill: #e0daf8;
}
.zi-stroke {
    stroke: #c9c0ee;
    fill: none;
}
.zi-teeth {
    fill: #6d4ae8;
}
.zi-badge {
    fill: #6d4ae8;
}
/* Info */
.zip-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.zip-info-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.zip-fname {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: #16162a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zip-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #6a6a80;
}
.zip-meta-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #9e9eb4;
}
/* Actions */
.zip-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.zip-btn {
    height: 34px;
    border: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}
.zip-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.zip-btn-download {
    background: #6d4ae8;
    color: #fff;
    padding: 0 14px;
    box-shadow: 0 2px 8px rgba(109, 74, 232, 0.2);
    text-decoration: none;
}
.zip-btn-download:hover {
    background: #5b38d6;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(109, 74, 232, 0.28);
    transform: translateY(-1px);
}
.zip-btn-download:active {
    transform: translateY(0);
}
.zip-btn-icon {
    width: 34px;
    background: transparent;
    padding: 0;
    border: 1px solid #e5e5ed;
    color: #9e9eb4;
}
.zip-btn-icon:hover {
    border-color: #d2d2de;
    color: #6a6a80;
    background: rgba(0, 0, 0, 0.02);
}
.zip-btn-icon svg {
    width: 14px;
    height: 14px;
}
/* Tooltip */
.zip-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: #fff;
    border: 1px solid #e0e0ea;
    color: #6a6a80;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 7px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 10;
}
.zip-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #e0e0ea;
}
.zip-btn-icon:hover .zip-tip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
/* Copy link check icon hidden by default */
.zip-check-icon {
    display: none;
}
/* Copied state */
.zip-btn-icon.copied {
    border-color: #0f9960 !important;
    color: #0f9960 !important;
    background: rgba(15, 153, 96, 0.06) !important;
}
.zip-btn-icon.copied .zip-tip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    border-color: rgba(15, 153, 96, 0.25);
    color: #0f9960;
}
.zip-btn-icon.copied .zip-link-icon {
    display: none;
}
.zip-btn-icon.copied .zip-check-icon {
    display: block;
}

/* ======================================
   ZIP Download List — Dark Mode
   ====================================== */
.dark-mode .zip-download-title {
    color: #eeeef2;
}
.dark-mode .zip-file-count {
    color: #7c5cfc;
    background: rgba(124, 92, 252, 0.1);
}
.dark-mode .zip-download-card {
    background: #141419;
    border-color: #222230;
    box-shadow: none;
}
.dark-mode .zip-download-card:hover {
    background: #18181e;
    border-color: #2e2e3e;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
}
.dark-mode .zip-fname {
    color: #eeeef2;
}
.dark-mode .zip-meta {
    color: #8c8ca0;
}
.dark-mode .zip-meta-sep {
    background: #55556e;
}
.dark-mode .zi-page {
    fill: #1a1a26;
}
.dark-mode .zi-fold {
    fill: #262638;
}
.dark-mode .zi-stroke {
    stroke: #30304a;
}
.dark-mode .zi-teeth {
    fill: #7c5cfc;
}
.dark-mode .zi-badge {
    fill: #7c5cfc;
}
.dark-mode .zip-icon svg {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
.dark-mode .zip-btn-download {
    background: #7c5cfc;
    box-shadow: 0 2px 10px rgba(124, 92, 252, 0.25);
}
.dark-mode .zip-btn-download:hover {
    background: #9178fd;
    box-shadow: 0 4px 16px rgba(124, 92, 252, 0.35);
}
.dark-mode .zip-btn-icon {
    border-color: #222230;
    color: #55556e;
}
.dark-mode .zip-btn-icon:hover {
    border-color: #2e2e3e;
    color: #8c8ca0;
    background: rgba(255, 255, 255, 0.03);
}
.dark-mode .zip-tip {
    background: #1e1e28;
    border-color: #2e2e3e;
    color: #8c8ca0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.dark-mode .zip-tip::after {
    border-top-color: #2e2e3e;
}
.dark-mode .zip-btn-icon.copied {
    border-color: #34d399 !important;
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.08) !important;
}
.dark-mode .zip-btn-icon.copied .zip-tip {
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

/* ======================================
   File Upload Cards in Modal
   ====================================== */
.np-file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 0 16px;
}

/* -- Card -- */
.np-card {
    background: #fff;
    border: 1px solid #e6e6ed;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition:
        border-color 0.25s,
        box-shadow 0.25s;
    animation: npSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes npSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.np-card:hover {
    border-color: #d0d0da;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.np-card.uploading {
    border-color: rgba(109, 74, 232, 0.22);
    background: linear-gradient(135deg, #fdfcff 0%, #f8f5ff 100%);
}
.np-card.complete {
    border-color: rgba(15, 153, 96, 0.18);
    background: linear-gradient(135deg, #fdfffd 0%, #f5fdf9 100%);
}
.np-card.error {
    border-color: rgba(220, 53, 69, 0.18);
    background: linear-gradient(135deg, #fffdfb 0%, #fef6f6 100%);
}

/* -- File Icon -- */
.np-icon-wrap {
    flex-shrink: 0;
    width: 42px;
    height: 52px;
}
.np-icon-wrap svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 6px rgba(109, 74, 232, 0.08));
}
.np-card .i-page {
    fill: #f3f0ff;
}
.np-card .i-fold {
    fill: #e0daf8;
}
.np-card .i-outline {
    stroke: #c9c0ee;
    fill: none;
}
.np-card .i-accent {
    fill: #6d4ae8;
}
.np-card .i-badge {
    fill: #6d4ae8;
}

.np-card.uploading .i-page {
    fill: #f3f0ff;
}
.np-card.uploading .i-fold {
    fill: #e0daf8;
}
.np-card.uploading .i-outline {
    stroke: #c9c0ee;
}
.np-card.uploading .i-accent {
    fill: #6d4ae8;
}
.np-card.uploading .i-badge {
    fill: #6d4ae8;
}

.np-card.complete .i-page {
    fill: #ecf9f2;
}
.np-card.complete .i-fold {
    fill: #c2edda;
}
.np-card.complete .i-outline {
    stroke: #a3dfc0;
}
.np-card.complete .i-accent {
    fill: #0f9960;
}
.np-card.complete .i-badge {
    fill: #0f9960;
}
.np-card.complete .np-icon-wrap svg {
    filter: drop-shadow(0 2px 6px rgba(15, 153, 96, 0.1));
}

.np-card.error .i-page {
    fill: #fef0f0;
}
.np-card.error .i-fold {
    fill: #f8d0d0;
}
.np-card.error .i-outline {
    stroke: #f0b0b0;
}
.np-card.error .i-accent {
    fill: #dc3545;
}
.np-card.error .i-badge {
    fill: #dc3545;
}
.np-card.error .np-icon-wrap svg {
    filter: drop-shadow(0 2px 6px rgba(220, 53, 69, 0.1));
}

/* -- Info -- */
.np-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.np-info-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.np-fname {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: #1a1a26;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.np-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #6e6e82;
}

/* -- Status Badge -- */
.np-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    flex-shrink: 0;
    padding: 2px 8px 2px 6px;
    border-radius: 100px;
}
.np-badge.uploading {
    color: #6d4ae8;
    background: #ede8fd;
}
.np-badge.complete {
    color: #0f9960;
    background: #e3f9ef;
}
.np-badge.error {
    color: #dc3545;
    background: #fde8ea;
}
.np-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.np-badge.uploading .np-badge-dot {
    background: #6d4ae8;
    animation: npBlink 1.4s ease-in-out infinite;
}
.np-badge.complete .np-badge-dot {
    background: #0f9960;
}
.np-badge.error .np-badge-dot {
    background: #dc3545;
}
@keyframes npBlink {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.7);
    }
}

/* -- Progress Bar -- */
.np-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.np-track {
    flex: 1;
    height: 5px;
    background: #ebebf0;
    border-radius: 100px;
    overflow: hidden;
}
.np-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}
.np-card .np-fill,
.np-card.uploading .np-fill {
    background: linear-gradient(90deg, #7c5cfc, #9b7efd);
}
.np-card.complete .np-fill {
    background: linear-gradient(90deg, #0f9960, #34d399);
}
.np-card.error .np-fill {
    background: linear-gradient(90deg, #dc3545, #f87171);
}

.np-card.uploading .np-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    animation: npShimmer 1.8s infinite;
}
@keyframes npShimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
.np-pct {
    font-size: 12px;
    font-weight: 500;
    color: #6e6e82;
    min-width: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* -- Action Buttons -- */
.np-actions {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
}
.np-act {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #a0a0b2;
    transition: all 0.2s;
}
.np-act svg {
    width: 16px;
    height: 16px;
}
.np-act:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #6e6e82;
}
.np-act-danger:hover {
    background: rgba(220, 53, 69, 0.07);
    color: #dc3545;
}

/* -- Dark Mode -- */
.dark-mode .np-card {
    background: #141419;
    border-color: #222230;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.dark-mode .np-card:hover {
    border-color: #2a2a3a;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.dark-mode .np-card.uploading {
    border-color: rgba(124, 92, 252, 0.3);
    background: linear-gradient(135deg, #18172a 0%, #1c1a30 100%);
}
.dark-mode .np-card.complete {
    border-color: rgba(52, 211, 153, 0.22);
    background: linear-gradient(135deg, #141a18 0%, #152018 100%);
}
.dark-mode .np-card.error {
    border-color: rgba(248, 113, 113, 0.22);
    background: linear-gradient(135deg, #1a1416 0%, #201518 100%);
}

.dark-mode .np-card .i-page {
    fill: #1a1a26;
}
.dark-mode .np-card .i-fold {
    fill: #2a2840;
}
.dark-mode .np-card .i-outline {
    stroke: #3a3858;
}
.dark-mode .np-card .i-accent {
    fill: #7c5cfc;
}
.dark-mode .np-card .i-badge {
    fill: #7c5cfc;
}

.dark-mode .np-card.complete .i-page {
    fill: #142018;
}
.dark-mode .np-card.complete .i-fold {
    fill: #1a3028;
}
.dark-mode .np-card.complete .i-outline {
    stroke: #2a4838;
}
.dark-mode .np-card.complete .i-accent {
    fill: #34d399;
}
.dark-mode .np-card.complete .i-badge {
    fill: #34d399;
}

.dark-mode .np-card.error .i-page {
    fill: #201418;
}
.dark-mode .np-card.error .i-fold {
    fill: #301a20;
}
.dark-mode .np-card.error .i-outline {
    stroke: #482a30;
}
.dark-mode .np-card.error .i-accent {
    fill: #f87171;
}
.dark-mode .np-card.error .i-badge {
    fill: #f87171;
}

.dark-mode .np-fname {
    color: #f0f0f2;
}
.dark-mode .np-meta {
    color: #8888a0;
}
.dark-mode .np-track {
    background: #2a2a3a;
}
.dark-mode .np-pct {
    color: #8888a0;
}
.dark-mode .np-badge.uploading {
    color: #a78bfa;
    background: rgba(124, 92, 252, 0.15);
}
.dark-mode .np-badge.complete {
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
}
.dark-mode .np-badge.error {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
}
.dark-mode .np-badge.uploading .np-badge-dot {
    background: #a78bfa;
}
.dark-mode .np-badge.complete .np-badge-dot {
    background: #34d399;
}
.dark-mode .np-badge.error .np-badge-dot {
    background: #f87171;
}
.dark-mode .np-act {
    color: #666680;
}
.dark-mode .np-act:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #9999b0;
}
.dark-mode .np-act-danger:hover {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
}

/* ── Unified dragdrop uploader colors (story / reel) ──────────── */
/* Align the dragdrop progress bar and status colors with np-card palette */
.fileuploader-theme-dragdrop .fileuploader-progressbar .bar {
    background: linear-gradient(90deg, #7c5cfc, #9b7efd) !important;
    border-radius: 100px;
    position: relative;
    overflow: hidden;
}
.fileuploader-theme-dragdrop .fileuploader-progressbar .bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: npShimmer 1.8s infinite;
}
.fileuploader-theme-dragdrop .fileuploader-progressbar {
    background: #ebebf0;
    border-radius: 100px;
    overflow: hidden;
}
.fileuploader-theme-dragdrop .column-title {
    color: #0f9960;
    font-weight: 600;
}
.dark-mode .fileuploader-theme-dragdrop .fileuploader-progressbar {
    background: #2a2a3a;
}
.dark-mode .fileuploader-theme-dragdrop .column-title {
    color: #34d399;
}

/* ── Unified legacy fileuploader progress bar colors ──────────── */
/* For any remaining legacy uploaders that still use .progress-holder */
.fileuploader .fileuploader-progressbar .bar {
    background: linear-gradient(90deg, #7c5cfc, #9b7efd);
    border-radius: 100px;
}
.dark-mode .fileuploader .fileuploader-progressbar .bar {
    background: linear-gradient(90deg, #a78bfa, #7c5cfc);
}

/* Responsive — ZIP download list */
@media (max-width: 575.98px) {
    .zip-download-card {
        padding: 10px 12px;
        gap: 10px;
    }
    .zip-icon {
        width: 36px;
        height: 44px;
    }
    .zip-icon svg {
        width: 36px;
        height: 44px;
    }
    .zip-fname {
        font-size: 13px;
    }
    .zip-meta {
        font-size: 11px;
    }
    .zip-btn-download span {
        display: none;
    }
    .zip-btn-download {
        padding: 0 10px;
        width: 34px;
        justify-content: center;
    }
    .zip-btn-icon {
        width: 30px;
        height: 30px;
    }
    .zip-actions {
        gap: 4px;
    }
    .zip-tip {
        display: none;
    }
}

.course-finish-content {
    text-align: center;
    padding: var(--space-12) var(--space-6);
}

.course-finish-icon {
    display: inline-flex;
    margin-bottom: var(--space-6);
    animation: scaleIn 500ms ease-out;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.course-finish-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--gray-800);
    margin: 0 0 var(--space-4) 0;
}

.course-finish-text {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--gray-600);
    margin: 0 0 var(--space-8) 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   TIP MODAL REDESIGN
   ============================================ */

#tipForm .modal-dialog {
    max-width: 420px;
}

#tipForm .modal-content {
    border: none;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

#tipForm .card {
    border: none;
    border-radius: 24px;
}

/* Banner */
.tip-modal-banner {
    position: relative;
    padding: 32px 24px 24px;
    background: linear-gradient(135deg, #F5F0FF 0%, #EDE5FF 40%, #E4D9FF 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    overflow: hidden;
}

.tip-modal-banner .tip-bg-icon {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.07;
}

.tip-modal-banner .tip-bg-icon-1 {
    width: 150px;
    height: 150px;
    top: -35px;
    right: -25px;
    transform: rotate(15deg);
}

.tip-modal-banner .tip-bg-icon-2 {
    width: 110px;
    height: 110px;
    bottom: -25px;
    left: -20px;
    transform: rotate(-25deg);
}

.tip-modal-banner .tip-bg-icon-3 {
    width: 50px;
    height: 50px;
    top: 12px;
    left: 40px;
    transform: rotate(35deg);
}

.tip-icon-wrap {
    position: relative;
    z-index: 1;
}

.tip-icon-box {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(109, 74, 232, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(109, 74, 232, 0.1);
}

.tip-icon-inner {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #EDE8FD;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.tip-sparkle {
    position: absolute;
    animation: tipTwinkle 2s ease-in-out infinite;
}

.tip-sparkle svg {
    width: 100%;
    height: 100%;
    color: #6D4AE8;
}
.tip-sparkle:nth-child(1) {
    width: 8px;
    height: 8px;
    top: -4px;
    right: -6px;
    animation-delay: 0s;
}
.tip-sparkle:nth-child(2) {
    width: 6px;
    height: 6px;
    bottom: -2px;
    left: -8px;
    animation-delay: 0.7s;
}
.tip-sparkle:nth-child(3) {
    width: 5px;
    height: 5px;
    top: 6px;
    left: -10px;
    animation-delay: 1.3s;
}

@keyframes tipTwinkle {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(20deg);
    }
}

.tip-banner-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #141428;
    z-index: 1;
    margin: 0;
}

.tip-creator-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    z-index: 1;
    width: 100%;
    max-width: 280px;
}

.tip-creator-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

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

.tip-creator-name {
    font-size: 14px;
    font-weight: 700;
    color: #141428;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tip-creator-handle {
    font-size: 12px;
    color: #9898ae;
    font-weight: 400;
}

/* Modal Body */
.tip-modal-body {
    padding: 22px 24px 8px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tip-section-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #bbbbc8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0;
}

/* Amount Presets */
.tip-amount-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tip-amount-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.tip-preset-btn {
    padding: 14px 4px 12px;
    border: 1.5px solid #e4e4ed;
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.tip-preset-btn:hover {
    border-color: #d0d0dc;
    background: #f5f5f9;
}

.tip-preset-btn.active {
    border-color: #6D4AE8;
    background: rgba(109, 74, 232, 0.06);
    box-shadow: 0 0 0 3px rgba(109, 74, 232, 0.08);
}

.tip-preset-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.tip-preset-icon svg {
    width: 20px;
    height: 20px;
}

.tip-preset-btn:nth-child(1) .tip-preset-icon {
    background: #ede8fd;
    color: #6d4ae8;
}
.tip-preset-btn:nth-child(2) .tip-preset-icon {
    background: #E8DEF8;
    color: #7B5AED;
}
.tip-preset-btn:nth-child(3) .tip-preset-icon {
    background: #ffeceb;
    color: #e04545;
}
.tip-preset-btn:nth-child(4) .tip-preset-icon {
    background: #e0faf6;
    color: #0d9488;
}

.tip-preset-btn.active:nth-child(1) .tip-preset-icon {
    background: #6d4ae8;
    color: #fff;
}
.tip-preset-btn.active:nth-child(2) .tip-preset-icon {
    background: #7B5AED;
    color: #fff;
}
.tip-preset-btn.active:nth-child(3) .tip-preset-icon {
    background: #e04545;
    color: #fff;
}
.tip-preset-btn.active:nth-child(4) .tip-preset-icon {
    background: #0d9488;
    color: #fff;
}

.tip-preset-amount {
    font-size: 14px;
    font-weight: 700;
    color: #5a5a72;
}
.tip-preset-label {
    font-size: 10px;
    font-weight: 500;
    color: #bbbbc8;
    line-height: 1.2;
}

.tip-preset-btn.active .tip-preset-amount {
    color: #5A35D9;
}
.tip-preset-btn.active .tip-preset-label {
    color: #6D4AE8;
    opacity: 0.7;
}

/* Divider */
.tip-custom-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
}

.tip-custom-divider::before,
.tip-custom-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e4e4ed;
}

.tip-custom-divider-text {
    font-size: 12px;
    color: #bbbbc8;
    font-weight: 500;
    white-space: nowrap;
}

/* Custom Amount */
.tip-custom-amount-wrap {
    position: relative;
}

.tip-custom-prefix {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 800;
    color: #9898ae;
    pointer-events: none;
    transition: color 0.2s;
}

.tip-custom-input {
    width: 100%;
    padding: 14px 60px 14px 48px;
    background: #f5f5f9;
    border: 1.5px solid #e4e4ed;
    border-radius: 14px;
    font-size: 22px;
    font-weight: 800;
    color: #141428;
    outline: none;
    transition: all 0.2s;
    letter-spacing: -0.02em;
}

.tip-custom-input:hover {
    border-color: #d0d0dc;
}
.tip-custom-input:focus {
    border-color: #6D4AE8;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(109, 74, 232, 0.08);
}
.tip-custom-input:focus ~ .tip-custom-prefix {
    color: #5A35D9;
}
.tip-custom-input::placeholder {
    color: #bbbbc8;
    font-weight: 600;
    font-size: 18px;
}

.tip-custom-suffix {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 600;
    color: #bbbbc8;
    pointer-events: none;
}

.tip-amount-hint {
    font-size: 11.5px;
    color: #bbbbc8;
    font-weight: 400;
    text-align: center;
}

/* Message Section */
.tip-message-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tip-message-wrap {
    position: relative;
    background: #f5f5f9;
    border: 1.5px solid #e4e4ed;
    border-radius: 14px;
    transition: all 0.2s;
}

.tip-message-wrap:hover {
    border-color: #d0d0dc;
}
.tip-message-wrap:focus-within {
    border-color: #6d4ae8;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(109, 74, 232, 0.07);
}

.tip-message-textarea {
    width: 100%;
    padding: 13px 16px 8px;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 400;
    color: #141428;
    outline: none;
    resize: none;
    min-height: 72px;
    line-height: 1.5;
}

.tip-message-textarea::placeholder {
    color: #bbbbc8;
}

.tip-message-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px 10px;
}

.tip-emoji-toggle-wrap {
    position: relative;
}

.tip-emoji-toggle {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 9px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #bbbbc8;
    transition: all 0.2s;
}

.tip-emoji-toggle:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #5a5a72;
}
.tip-emoji-toggle.active {
    background: rgba(109, 74, 232, 0.07);
    color: #6d4ae8;
}
.tip-emoji-toggle svg {
    width: 20px;
    height: 20px;
}

.tip-char-count {
    font-size: 11.5px;
    color: #bbbbc8;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    padding-right: 4px;
}

.tip-char-count.warn {
    color: #6D4AE8;
}
.tip-char-count.over {
    color: #dc2c27;
}

/* Emoji Picker */
.tip-emoji-picker {
    position: absolute;
    bottom: 44px;
    left: -6px;
    width: 272px;
    background: #fff;
    border: 1px solid #e4e4ed;
    border-radius: 16px;
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.14);
    padding: 14px;
    display: none;
    z-index: 100;
    animation: tipEmojiIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tip-emoji-picker.show {
    display: block;
}

@keyframes tipEmojiIn {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tip-emoji-picker::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 18px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid #e4e4ed;
    border-bottom: 1px solid #e4e4ed;
    transform: rotate(45deg);
}

.tip-emoji-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e4e4ed;
    padding-bottom: 8px;
}

.tip-emoji-tab {
    flex: 1;
    height: 28px;
    border: none;
    border-radius: 7px;
    background: transparent;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.tip-emoji-tab:hover {
    background: #f5f5f9;
}
.tip-emoji-tab.active {
    background: rgba(109, 74, 232, 0.07);
}

.tip-emoji-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    max-height: 150px;
    overflow-y: auto;
}

.tip-emoji-grid::-webkit-scrollbar {
    width: 3px;
}
.tip-emoji-grid::-webkit-scrollbar-track {
    background: transparent;
}
.tip-emoji-grid::-webkit-scrollbar-thumb {
    background: #e4e4ed;
    border-radius: 100px;
}

.tip-emoji-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 7px;
    background: transparent;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}

.tip-emoji-btn:hover {
    background: #f5f5f9;
    transform: scale(1.15);
}

/* Payment Section in Tip Modal */
.tip-payment-section {
    padding: 0 24px;
}

/* Footer */
.tip-modal-footer {
    padding: 16px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-tip-send {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #6D4AE8 0%, #7B5AED 100%);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 3px 16px rgba(109, 74, 232, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-tip-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(109, 74, 232, 0.35);
    color: #fff;
}
.btn-tip-send:active {
    transform: translateY(0);
}
.btn-tip-send svg {
    width: 18px;
    height: 18px;
}

.btn-tip-cancel {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 12px;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: #9898ae;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-tip-cancel:hover {
    color: #5a5a72;
}

.tip-footer-note {
    text-align: center;
    font-size: 11.5px;
    color: #bbbbc8;
    font-weight: 400;
    line-height: 1.4;
}

/* Close button */
.tip-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(109, 74, 232, 0.12);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9898ae;
    transition: all 0.2s;
    z-index: 5;
}

.tip-close-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #141428;
}
.tip-close-btn svg {
    width: 13px;
    height: 13px;
}

@media (max-width: 575.98px) {
    .tip-amount-presets {
        grid-template-columns: repeat(2, 1fr);
    }
    .tip-creator-card {
        max-width: 100%;
    }
}

/* ============================================
   TIP RECEIVED CARD IN MESSAGES
   ============================================ */

.tip-card-msg {
    width: 100%;
    max-width: 340px;
    border-radius: 4px 18px 18px 18px;
    overflow: visible;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    margin-top: 10px;
}

.msg-bubble-sent .tip-card-msg {
    border-radius: 18px 4px 18px 18px;
}

.tip-card-ribbon {
    height: 4px;
    border-radius: 4px 18px 0 0;
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
    background-size: 200% 100%;
    animation: tipShimmerRibbon 3s ease infinite;
}

.msg-bubble-sent .tip-card-ribbon {
    border-radius: 18px 4px 0 0;
}

@keyframes tipShimmerRibbon {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.tip-card-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: #fef3d6;
    border: 1.5px solid rgba(245, 158, 11, 0.2);
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    color: #d97706;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
    white-space: nowrap;
}

.tip-card-label svg {
    width: 13px;
    height: 13px;
}

.tip-card-body-inner {
    background: #fff;
    border: 1px solid #e4e4ed;
    border-top: none;
    border-radius: 0 0 18px 18px;
    padding: 0;
}

.tip-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px 10px;
}

.tip-card-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.tip-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.tip-card-coin-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.3);
}

.tip-card-coin-badge svg {
    width: 10px;
    height: 10px;
    color: #fff;
}

.tip-card-sender-info {
    flex: 1;
    min-width: 0;
}

.tip-card-sender-name {
    font-size: 14px;
    font-weight: 800;
    color: #141428;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.tip-card-sender-action {
    font-weight: 600;
    color: #d97706;
}

.tip-card-timestamp {
    font-size: 12px;
    color: #9898ae;
    font-weight: 400;
    margin-top: 1px;
}

.tip-card-amount-section {
    padding: 4px 16px 12px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.tip-card-amount-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fef3d6 0%, #fdecc8 100%);
    border: 1px solid rgba(245, 158, 11, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.tip-card-amount-icon svg {
    width: 24px;
    height: 24px;
    color: #f59e0b;
}

.tip-card-amount-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #141428;
    line-height: 1;
}

.tip-card-amount-value .tip-currency {
    font-size: 15px;
    font-weight: 600;
    color: #9898ae;
    margin-left: 2px;
}

.tip-card-message-wrap {
    margin: 0 16px 12px;
    padding: 12px 14px;
    background: #f5f5f9;
    border-radius: 12px;
    position: relative;
}

.tip-card-message-wrap::before {
    content: "\201C";
    position: absolute;
    top: 6px;
    left: 10px;
    font-size: 28px;
    color: #e4e4ed;
    line-height: 1;
    font-family: Georgia, serif;
}

.tip-card-message-text {
    font-size: 13px;
    font-weight: 400;
    color: #5a5a72;
    line-height: 1.5;
    padding-left: 20px;
    font-style: italic;
}

.tip-card-actions {
    padding: 0 16px 14px;
}

.btn-tip-thank {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: #6d4ae8;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 2px 10px rgba(109, 74, 232, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.btn-tip-thank:hover {
    background: #5b38d6;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(109, 74, 232, 0.3);
    color: #fff;
}

.btn-tip-thank:active {
    transform: translateY(0);
}
.btn-tip-thank svg {
    width: 16px;
    height: 16px;
}

.btn-tip-thank.thanked {
    background: #0f9960;
    box-shadow: 0 2px 10px rgba(15, 153, 96, 0.25);
    pointer-events: none;
}

.tip-card-thanked-banner {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #e3f9ef;
    border-top: 1px solid rgba(15, 153, 96, 0.1);
    border-radius: 0 0 18px 18px;
}

.tip-card-msg.thanked .tip-card-thanked-banner {
    display: flex;
}

.tip-card-thanked-banner svg {
    width: 15px;
    height: 15px;
    color: #0f9960;
    flex-shrink: 0;
}

.tip-card-thanked-banner span {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f9960;
}

.tip-card-thanked-banner .thanked-time {
    margin-left: auto;
    font-weight: 400;
    font-size: 11.5px;
    color: rgba(15, 153, 96, 0.6);
}

/* ══════════════════════════════════════════════════════════════
   WALL POST V2 — Modern Post Card Redesign
   ══════════════════════════════════════════════════════════════ */

:root {
    --wp-bg: #f2f2f6;
    --wp-card: #ffffff;
    --wp-input-bg: #f5f5f9;
    --wp-border: #eaeaf0;
    --wp-border-hover: #d4d4de;
    --wp-text-1: #111127;
    --wp-text-2: #52526e;
    --wp-text-3: #8e8ea8;
    --wp-text-4: #b5b5c8;
    --wp-brand: #6d4ae8;
    --wp-brand-hover: #5a35d9;
    --wp-brand-dim: rgba(109, 74, 232, 0.06);
    --wp-brand-light: #edebfd;
    --wp-brand-border: rgba(109, 74, 232, 0.14);
    --wp-red: #e8384f;
    --wp-red-dim: rgba(232, 56, 79, 0.07);
    --wp-green: #10a36c;
    --wp-amber: #d97706;
    --wp-radius-card: 20px;
    --wp-radius-sm: 12px;
    --wp-avatar-size: 46px;
    --wp-avatar-comment: 34px;
    --wp-font:
        "Outfit", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ── Post Card Container ── */
.wp-card {
    background: var(--wp-card);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius-card);
    margin-bottom: 20px;
    overflow: visible;
    font-family: var(--wp-font);
    box-shadow: none;
}
.wp-card-inner {
    padding: 18px 20px 0;
}

/* ── Pinned / Pending / Schedule Badges ── */
.wp-card.pinned-post {
    border-color: var(--wp-brand-border);
}
.wp-badge-pin {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--wp-text-3);
    padding-bottom: 10px;
}
.wp-badge-pin svg {
    width: 12px;
    height: 12px;
    fill: var(--wp-text-3);
}
.wp-badge-pending,
.wp-badge-schedule {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--wp-text-3);
    font-style: italic;
    padding-bottom: 10px;
}
.wp-badge-pending i,
.wp-badge-schedule i {
    font-size: 14px;
}

/* ── Post Header ── */
.wp-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wp-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    display: block;
    text-decoration: none;
}
.wp-avatar-wrap img {
    width: var(--wp-avatar-size);
    height: var(--wp-avatar-size);
    border-radius: 12px;
    object-fit: cover;
    border: 2.5px solid var(--wp-card);
    box-shadow: 0 0 0 1.5px var(--wp-brand-border);
    transition: box-shadow 0.2s;
}
.wp-avatar-wrap:hover img {
    box-shadow: 0 0 0 2px var(--wp-brand);
}
.wp-header-info {
    flex: 1;
    min-width: 0;
}
.wp-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.wp-name-row a {
    font-size: 15px;
    font-weight: 700;
    color: var(--wp-text-1);
    text-decoration: none;
    transition: color 0.15s;
}
.wp-name-row a:hover {
    color: var(--wp-brand);
}
.wp-name-row .verified {
    display: inline-flex;
    width: 16px;
    height: 16px;
}
.wp-name-row .verified svg {
    width: 16px;
    height: 16px;
    fill: var(--wp-brand);
}
.wp-meta-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
    font-size: 14px;
    color: var(--wp-text-3);
    font-weight: 400;
}
.wp-meta-row a {
    color: var(--wp-text-3);
    text-decoration: none;
}
.wp-meta-sep {
    width: 2.5px;
    height: 2.5px;
    border-radius: 50%;
    background: var(--wp-text-4);
    display: inline-block;
}
.wp-visibility {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    background: var(--wp-input-bg);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--wp-text-4);
}
.wp-visibility svg {
    width: 10px;
    height: 10px;
}
.wp-menu-btn {
    flex-shrink: 0;
}
/* Override post-menu-trigger when inside wp-card */
.wp-card .post-menu-trigger {
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--wp-border);
    border-radius: 10px;
    background: var(--wp-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--wp-text-4);
    transition: all 0.2s;
    padding: 0;
}
.wp-card .post-menu-trigger:hover {
    background: var(--wp-input-bg);
    color: var(--wp-text-2);
}

/* ── Post Text Body ── */
.wp-text {
    padding: 12px 20px 14px;
}
.wp-text p,
.wp-text .update-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--wp-text-2);
    margin: 0;
    font-weight: 400;
}
.wp-text .mention {
    color: var(--wp-brand);
    font-weight: 600;
    cursor: pointer;
}
.wp-text .hashtag {
    color: var(--wp-brand);
    font-weight: 500;
}
.wp-text-locked p {
    font-weight: 700;
    color: var(--wp-text-1);
}

/* ── Media Block ── */
.wp-media {
}

/* ── Carousel V2 overrides (Bootstrap carousel kept) ── */
.wp-card .carousel-post {
    border-radius: 0;
}
.wp-card .carousel-post .carousel-indicators {
    bottom: 8px;
    margin: 0 auto;
    gap: 5px;
    justify-content: center;
}
.wp-card .carousel-post .carousel-indicators button,
.wp-card .carousel-post .carousel-indicators li {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: all 0.25s;
    margin: 0;
    padding: 0;
}
.wp-card .carousel-post .carousel-indicators button.active,
.wp-card .carousel-post .carousel-indicators li.active {
    background: #fff;
    width: 18px;
    border-radius: 100px;
}
.wp-slide-counter {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(4px);
    z-index: 5;
    pointer-events: none;
}
.wp-card .carousel-control-prev,
.wp-card .carousel-control-next {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.wp-card .carousel-post:hover .carousel-control-prev,
.wp-card .carousel-post:hover .carousel-control-next {
    opacity: 1;
}
.wp-card .carousel-control-prev {
    left: 12px;
    right: auto;
}
.wp-card .carousel-control-next {
    right: 12px;
    left: auto;
}
.wp-card .carousel-control-prev:hover,
.wp-card .carousel-control-next:hover {
    background: rgba(255, 255, 255, 0.88);
    transform: translateY(-50%) scale(1.08);
}

/* Single image in card - no border radius */
.wp-card .post-image {
    border-radius: 0 !important;
}

/* ── Engagement Bar ── */
.wp-engage {
    display: flex;
    align-items: center;
    padding: 8px 20px 10px;
    border-top: 1px solid var(--wp-border);
}
.wp-engage-left {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}
.wp-engage-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: var(--wp-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--wp-text-3);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}
.wp-engage-btn:hover {
    background: var(--wp-input-bg);
    color: var(--wp-text-2);
    text-decoration: none;
}
.wp-engage-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Like active */
.wp-engage-btn.wp-like-active {
    color: var(--wp-red);
}
.wp-engage-btn.wp-like-active svg path {
    fill: var(--wp-red);
    stroke: var(--wp-red);
}
.wp-engage-btn.wp-like-active:hover {
    background: var(--wp-red-dim);
}

/* Tip + Bookmark */
.wp-engage-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}
.wp-engage-btn.wp-bookmark-active {
    color: var(--wp-amber);
}
.wp-engage-btn.wp-bookmark-active svg path {
    fill: var(--wp-amber);
    stroke: var(--wp-amber);
}

/* Like animation */
@keyframes wpHeartPop {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.3);
    }
    60% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
.wp-engage-btn.pop svg {
    animation: wpHeartPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Locked Content Box ── */
.wp-lock-wrap {
    position: relative;
    margin: 0 10px 10px;
    border-radius: 16px;
    overflow: hidden;
    height: 350px;
    margin-top:15px;
}
.wp-lock-bg {
    position: absolute;
    inset: 0;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: blur(18px) saturate(0.6);
    transform: scale(1.08);
}
.wp-lock-frost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
}
.wp-lock-frost.light {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(109,74,232,.06) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(139,111,240,.05) 0%, transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(248,247,254,.88) 50%, rgba(248,247,254,.97) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.wp-lock-frost.dark {
    background:
        radial-gradient(ellipse at 25% 25%, rgba(109,74,232,.12) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 75%, rgba(60,40,130,.08) 0%, transparent 50%),
        linear-gradient(180deg, rgba(18,17,42,.2) 0%, rgba(18,17,42,.6) 45%, rgba(18,17,42,.88) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* Watermark */
.wp-lock-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
}
.wp-lock-watermark svg {
    width: 140%;
    height: 140%;
    transform: rotate(-18deg);
    opacity: .1;
    color: var(--wp-brand);
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.wp-lock-frost.dark .wp-lock-watermark svg {
    opacity: .14;
    color: #fff;
}
/* Shackle animation via SVG path with transform-box */
.wlk-shackle {
    transform-box: fill-box;
    transform-origin: 80% 100%;
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.wp-lock-wrap:hover .wlk-shackle {
    transform: translateY(-8px) rotate(-15deg);
}
/* Content */
.wp-lock-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    width: 100%;
}
/* Type badge */
.wp-lock-type {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--wp-text-3);
    letter-spacing: .02em;
}
.wp-lock-type svg {
    width: 12px;
    height: 12px;
    opacity: .7;
}
.wp-lock-frost.dark .wp-lock-type {
    color: rgba(255,255,255,.5);
}
/* CTA button */
.wp-lock-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 26px;
    border: none;
    border-radius: 12px;
    font-family: var(--wp-font);
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: var(--wp-brand);
    box-shadow: 0 2px 12px rgba(109,74,232,.25), 0 0 0 1px rgba(109,74,232,.1);
    text-decoration: none;
    transition: all .25s cubic-bezier(.22,1,.36,1);
    letter-spacing: -.01em;
    position: relative;
    z-index: 2;
}
.wp-lock-cta:hover {
    background: var(--wp-brand-hover);
    box-shadow: 0 6px 28px rgba(109,74,232,.35), 0 0 0 1px rgba(109,74,232,.15);
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}
.wp-lock-cta:active {
    transform: translateY(0);
    transition-duration: .1s;
}
.wp-lock-cta svg {
    width: 14px;
    height: 14px;
    opacity: .8;
    flex-shrink: 0;
}
.wp-lock-cta:hover .wlk-btn-shackle {
    transform: translateY(-2px) rotate(-12deg);
    transform-origin: right bottom;
}
.wlk-btn-shackle {
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    transform-origin: right bottom;
}
/* Price pill */
.wp-lock-price {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 2px;
    background: rgba(255,255,255,.18);
    border-radius: 7px;
    font-weight: 800;
    letter-spacing: 0;
}
/* Sub-link */
.wp-lock-sub {
    font-size: 11px;
    font-weight: 500;
    color: var(--wp-text-4, var(--wp-text-3));
    position: relative;
    z-index: 2;
}
.wp-lock-sub a {
    color: var(--wp-brand);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s;
}
.wp-lock-sub a:hover { color: var(--wp-brand-hover); }
.wp-lock-frost.dark .wp-lock-sub { color: rgba(255,255,255,.35); }
.wp-lock-frost.dark .wp-lock-sub a { color: rgba(255,255,255,.75); }
.wp-lock-frost.dark .wp-lock-sub a:hover { color: #fff; }
/* Dark mode */
.dark-mode .wp-lock-frost.light {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(109,74,232,.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(20,19,38,.5) 0%, rgba(20,19,38,.88) 50%, rgba(20,19,38,.97) 100%);
}

/* ── Comments Section ── */
.wp-comments {
    border-top: 1px solid var(--wp-border);
    padding: 16px 20px 6px;
}

/* ── Comment Item ── */
.wp-comment {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    animation: wpCommentIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes wpCommentIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.wp-comment-avatar {
    flex-shrink: 0;
    text-decoration: none;
}
.wp-comment-avatar img {
    width: var(--wp-avatar-comment);
    height: var(--wp-avatar-comment);
    border-radius: 7px;
    object-fit: cover;
}
.wp-comment-body {
    flex: 1;
    min-width: 0;
}
.wp-comment-bubble {
    background: var(--wp-input-bg);
    border-radius: 4px 14px 14px 14px;
    padding: 10px 14px;
}
.wp-comment-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
}
.wp-comment-name-row a {
    font-size: 14px;
    font-weight: 700;
    color: var(--wp-text-1);
    text-decoration: none;
    transition: color 0.15s;
}
.wp-comment-name-row a:hover {
    color: var(--wp-brand);
}
.wp-comment-name-row .verified {
    display: inline-flex;
    width: 13px;
    height: 13px;
}
.wp-comment-name-row .verified svg {
    width: 13px;
    height: 13px;
    fill: var(--wp-brand);
}
.wp-comment-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--wp-text-2);
    line-height: 1.5;
    word-break: break-word;
}
.wp-comment-text .mention {
    color: var(--wp-brand);
    font-weight: 600;
    cursor: pointer;
}
.wp-comment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px 0;
    font-size: 14px;
}
.wp-comment-actions .timeAgo {
    font-size: 14px;
    color: var(--wp-text-4);
    font-weight: 400;
}
.wp-comment-actions .replyButton {
    font-size: 14px;
    font-weight: 600;
    color: var(--wp-text-3);
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--wp-font);
    padding: 0;
    transition: color 0.15s;
}
.wp-comment-actions .replyButton:hover {
    color: var(--wp-text-1);
}
.wp-comment-like {
    margin-left: auto;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--wp-text-4);
    transition: all 0.15s;
}
.wp-comment-like:hover {
    color: var(--wp-red);
    background: var(--wp-red-dim);
}
.wp-comment-like.liked {
    color: var(--wp-red);
}
.wp-comment-like .text-red {
    color: var(--wp-red);
}
.wp-comment-like i {
    font-size: 14px;
}

/* Stickers/GIFs in comments */
.wp-comment-bubble img {
    max-width: 200px;
    border-radius: 8px;
    margin-top: 6px;
}

/* ── Nested Replies ── */
.wp-replies {
    padding-left: 44px;
}
.wp-replies .wp-comment .wp-comment-bubble {
    background: rgba(109, 74, 232, 0.04);
}
.wp-replies-toggle {
    padding-left: 44px;
    margin-bottom: 12px;
}
.wp-replies-toggle a {
    font-size: 14px;
    font-weight: 600;
    color: var(--wp-brand);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wp-replies-toggle a:hover {
    text-decoration: underline;
}
.wp-replies-toggle .line-replies {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--wp-border);
    margin-right: 4px;
    vertical-align: middle;
}

/* ── Comment Input ── */
.wp-comment-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 18px;
    border-top: 1px solid var(--wp-border);
}
.wp-comment-input.wp-comment-input-stack {
    display: block;
}
.wp-comment-input.wp-comment-input-stack .wp-comment-input-body {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.wp-comment-input-avatar {
    width: var(--wp-avatar-comment);
    height: var(--wp-avatar-comment);
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
}
.wp-comment-input .inputComment {
    flex: 1;
    padding: 10px 14px;
    background: var(--wp-input-bg);
    border: 1.5px solid var(--wp-border);
    border-radius: var(--wp-radius-sm);
    font-family: var(--wp-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--wp-text-1);
    outline: none;
    transition: all 0.2s;
}
.wp-comment-input .inputComment:hover {
    border-color: var(--wp-border-hover);
}
.wp-comment-input .inputComment:focus {
    border-color: var(--wp-brand);
    background: var(--wp-card);
    box-shadow: 0 0 0 3px var(--wp-brand-dim);
}
.wp-comment-input .inputComment::placeholder {
    color: var(--wp-text-4);
}
.wp-comment-input .comments-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-send-comment {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--wp-brand);
    color: #fff;
    border-radius: var(--wp-radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.1s;
}
.btn-send-comment:hover {
    background: var(--wp-brand-hover);
}
.btn-send-comment:active {
    transform: scale(0.95);
}

/* Reply-to banner */
.wp-reply-to.display-none {
    display: none !important;
}
.wp-reply-to {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--wp-input-bg);
    border-radius: 10px;
    font-size: 14px;
    color: var(--wp-text-2);
    margin: 0 20px 10px;
}
.wp-comment-input.wp-comment-input-stack .wp-reply-to {
    margin: 0 0 10px !important;
}
.wp-reply-to .cancelReply {
    margin-left: auto;
    cursor: pointer;
    color: var(--wp-text-3);
}

/* ── Audio player in post ── */
.wp-audio {
    margin: 0 20px;
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius-sm);
    overflow: hidden;
}

/* ── Load More Comments link ── */
.wp-load-comments {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.wp-load-comments a {
    font-size: 14px;
    font-weight: 600;
    color: var(--wp-text-3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wp-load-comments a:hover {
    color: var(--wp-brand);
}

/* ── Loader Skeleton ── */
.wp-skeleton {
    background: var(--wp-card);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius-card);
    padding: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}
.wp-skeleton .item-loading {
    background: linear-gradient(
        90deg,
        var(--wp-input-bg) 25%,
        var(--wp-border) 50%,
        var(--wp-input-bg) 75%
    );
    background-size: 200% 100%;
    animation: wpShimmer 1.5s infinite;
    border-radius: 8px;
}
@keyframes wpShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ── Load More / Paginator Button ── */
.wp-load-more {
    width: 100%;
    padding: 12px 24px;
    background: var(--wp-brand);
    color: #fff;
    border: none;
    border-radius: var(--wp-radius-sm);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--wp-font);
    cursor: pointer;
    transition: background 0.15s;
}
.wp-load-more:hover {
    background: var(--wp-brand-hover);
}

/* ── Mobile responsive ── */
@media (max-width: 575.98px) {
    .wp-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-bottom: 8px;
    }
    .wp-card-inner {
        padding: 16px 16px 0;
    }
    .wp-text {
        padding: 0 16px 12px;
    }
    .wp-engage {
        padding: 8px 16px 10px;
    }
    .wp-comments {
        padding: 12px 16px 6px;
    }
    .wp-comment-input {
        padding: 12px 16px 16px;
    }
    .wp-reply-to {
        margin: 0 16px 10px;
    }
}

/* ══════════════════════════════════════════════════════════════
   WALL POST V2 — Dark Mode
   ══════════════════════════════════════════════════════════════ */
.dark-mode {
    --wp-bg: #0f0f14;
    --wp-card: #18181c;
    --wp-input-bg: #1e1e24;
    --wp-border: #2a2a34;
    --wp-border-hover: #3a3a48;
    --wp-text-1: #f0f0f4;
    --wp-text-2: #b0b0c0;
    --wp-text-3: #6e6e84;
    --wp-text-4: #4a4a5c;
    --wp-brand: #8b6ff0;
    --wp-brand-hover: #7b5de8;
    --wp-brand-dim: rgba(139, 111, 240, 0.08);
    --wp-brand-light: rgba(139, 111, 240, 0.1);
    --wp-brand-border: rgba(139, 111, 240, 0.2);
    --wp-red: #f87171;
    --wp-red-dim: rgba(248, 113, 113, 0.1);
    --wp-amber: #fbbf24;
}
.dark-mode .wp-card .post-menu-trigger {
    background: var(--wp-card);
    border-color: var(--wp-border);
    color: var(--wp-text-4);
}
.dark-mode .wp-card .post-menu-trigger:hover {
    background: var(--wp-input-bg);
    color: var(--wp-text-2);
}
.dark-mode .wp-lock-frost.light {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(109,74,232,.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(20,19,38,.5) 0%, rgba(20,19,38,.88) 50%, rgba(20,19,38,.97) 100%);
}

/* ══════════════════════════════════════════════════════════════
   WALL POST CHALLENGE CARD (.wpc-*)
   ══════════════════════════════════════════════════════════════ */

/* ── Cover Image ── */
.wpc-card .wp-header {
    margin-bottom: 10px;
}
.wpc-cover {
    display: block;
    position: relative;
    aspect-ratio: 16/8;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}
.wpc-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.wpc-card:hover .wpc-cover img {
    transform: scale(1.03);
}
.wpc-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, transparent 55%);
    pointer-events: none;
}
.wpc-cover-info {
    position: absolute;
    bottom: 14px;
    left: 16px;
    right: 16px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}
.wpc-cover-title {
    font-family: var(--wp-font);
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1.2;
    flex: 1;
    text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.wpc-cover-pills {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Pills */
.wpc-pill {
    padding: 4px 9px;
    border-radius: 6px;
    font-family: var(--wp-font);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 3px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.wpc-pill svg {
    width: 11px;
    height: 11px;
}
.wpc-pill-diff.wpc-diff-all { background: rgba(156,106,255,.55); }
.wpc-pill-diff.wpc-diff-beginner { background: rgba(34,197,94,.55); }
.wpc-pill-diff.wpc-diff-intermediate { background: rgba(245,158,11,.55); }
.wpc-pill-diff.wpc-diff-advanced { background: rgba(239,68,68,.55); }
.wpc-pill-dur { background: rgba(255,255,255,.18); }

/* No-cover title row */
.wpc-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px 4px;
    text-decoration: none;
    color: var(--wp-text-1);
    transition: color .15s;
}
.wpc-title-row:hover { color: var(--wp-brand); text-decoration: none; }
.wpc-title-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--wp-brand-dim, rgba(109,74,232,.06));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wpc-title-icon svg {
    width: 20px;
    height: 20px;
    color: var(--wp-brand);
}
.wpc-title-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.wpc-title-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--wp-text-3);
    font-weight: 500;
    margin-top: 2px;
}
.wpc-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--wp-text-4);
}
.wpc-pill-inline {
    font-weight: 700;
    font-size: 10.5px;
}
.wpc-pill-inline.wpc-diff-all { color: #9c6aff; }
.wpc-pill-inline.wpc-diff-beginner { color: #22c55e; }
.wpc-pill-inline.wpc-diff-intermediate { color: #f59e0b; }
.wpc-pill-inline.wpc-diff-advanced { color: #ef4444; }

/* ── Type badge in header ── */
.wpc-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 700;
    background: rgba(217,119,6,.08);
    color: var(--wp-amber, #d97706);
    border: 1px solid rgba(217,119,6,.12);
}
.wpc-type-badge svg {
    width: 11px;
    height: 11px;
}

/* ── Challenge Body ── */
.wpc-body {
    padding: 14px 20px 16px;
}

/* Description */
.wpc-desc {
    font-size: 13.5px;
    color: var(--wp-text-2);
    line-height: 1.6;
    margin-bottom: 14px;
}
.wpc-desc-more {
    color: var(--wp-brand);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.wpc-desc-more:hover {
    text-decoration: underline;
    color: var(--wp-brand-hover);
}

/* ── Progress bar ── */
.wpc-progress {
    margin-bottom: 14px;
}
.wpc-progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wpc-progress-bar {
    flex: 1;
    height: 6px;
    border-radius: 100px;
    background: var(--wp-border);
    overflow: hidden;
}
.wpc-progress-fill {
    height: 100%;
    border-radius: 100px;
    background: var(--wp-brand);
    transition: width .5s cubic-bezier(.22,1,.36,1);
}
.wpc-progress-fill.wpc-progress-done {
    background: var(--wp-green, #10a36c);
}
.wpc-progress-pct {
    font-size: 12px;
    font-weight: 700;
    color: var(--wp-brand);
    min-width: 32px;
    text-align: right;
}
.wpc-progress-pct-done {
    color: var(--wp-green, #10a36c);
}
.wpc-progress-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--wp-text-3);
    margin-top: 4px;
}
.wpc-progress-meta svg {
    color: var(--wp-amber, #d97706);
}
.wpc-progress-meta-done {
    color: var(--wp-green, #10a36c);
}
.wpc-progress-meta-done svg {
    color: var(--wp-green, #10a36c);
}

/* ── Goals preview ── */
.wpc-goals {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.wpc-goal-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--wp-text-2);
}
.wpc-goal-item svg {
    width: 15px;
    height: 15px;
    color: var(--wp-green, #10a36c);
    flex-shrink: 0;
}
.wpc-goal-more {
    font-size: 12px;
    color: var(--wp-text-4);
    padding-left: 22px;
}

/* ── Stats strip ── */
.wpc-stats {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.wpc-stat {
    flex: 1;
    padding: 10px;
    background: var(--wp-input-bg, #f5f5f9);
    border-radius: 10px;
    text-align: center;
}
.wpc-stat-val {
    font-family: var(--wp-font);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.wpc-stat-brand { color: var(--wp-brand); }
.wpc-stat-amber { color: var(--wp-amber, #d97706); }
.wpc-stat-green { color: var(--wp-green, #10a36c); }
.wpc-stat-label {
    font-size: 10px;
    color: var(--wp-text-3);
    font-weight: 500;
    margin-top: 1px;
}

/* ── Participants preview ── */
.wpc-participants {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.wpc-participants-avatars {
    display: flex;
}
.wpc-p-av {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--wp-card, #fff);
    margin-left: -8px;
    flex-shrink: 0;
}
.wpc-p-av:first-child { margin-left: 0; }
.wpc-p-av img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wpc-p-count {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--wp-brand-light, #edebfd);
    border: 2px solid var(--wp-card, #fff);
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: var(--wp-brand);
    flex-shrink: 0;
}
.wpc-participants-text {
    font-size: 12px;
    color: var(--wp-text-3);
}
.wpc-participants-text strong {
    color: var(--wp-text-2);
}

/* ── CTA Buttons ── */
.wpc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    font-family: var(--wp-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s cubic-bezier(.22,1,.36,1);
    text-decoration: none;
}
.wpc-cta:hover { text-decoration: none; }
.wpc-cta svg {
    width: 17px;
    height: 17px;
}

/* Join (not joined) */
.wpc-cta-join {
    background: var(--wp-brand);
    color: #fff;
    box-shadow: 0 3px 12px rgba(109,74,232,.25);
}
.wpc-cta-join:hover {
    background: var(--wp-brand-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 5px 20px rgba(109,74,232,.3);
}

/* In progress */
.wpc-cta-progress {
    background: var(--wp-brand-dim, rgba(109,74,232,.06));
    color: var(--wp-brand);
    border: 1.5px solid var(--wp-brand-border, rgba(109,74,232,.14));
}
.wpc-cta-progress:hover {
    background: var(--wp-brand);
    color: #fff;
}

/* Completed */
.wpc-cta-completed {
    background: rgba(16,163,108,.07);
    color: var(--wp-green, #10a36c);
    border: 1.5px solid rgba(16,163,108,.15);
}
.wpc-cta-completed:hover {
    background: var(--wp-green, #10a36c);
    color: #fff;
}

/* ── Divider ── */
.wpc-divider {
    height: 1px;
    background: var(--wp-border);
    margin: 0 20px;
}

/* ── Responsive ── */
@media (max-width: 575.98px) {
    .wpc-cover-title { font-size: 16px; }
    .wpc-stats { flex-wrap: wrap; }
    .wpc-stat { min-width: calc(50% - 3px); }
    .wpc-cover { aspect-ratio: 16/9; }
}
@media (max-width: 575.98px) {
    .wpc-card { border-radius: 0; border-left: none; border-right: none; }
}

/* Payzone close button - shared across all payment flows */
.payzone-close-btn {
    position: fixed;
    top: 10px;
    right: max(10px, calc(50% - 490px));
    z-index: 9999;
    background: #6332C8;
    color: transparent;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 0;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.payzone-close-btn::before,
.payzone-close-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: white;
    border-radius: 1px;
}
.payzone-close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.payzone-close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ═══════════════════════════════════════
   CREATE HUB — Desktop Sidebar Button
═══════════════════════════════════════ */
.create-hub-desktop-wrap {
    padding: 2px 0 6px;
}
.create-hub-desktop-btn {
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, #6d4ae8, #8b6ff0);
    border: none;
    border-radius: 14px;
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(109, 74, 232, 0.28);
    transition: all 0.2s;
}
.create-hub-desktop-btn:hover {
    box-shadow: 0 6px 24px rgba(109, 74, 232, 0.42);
    transform: translateY(-1px);
}
.create-hub-desktop-btn:active {
    transform: translateY(0);
}
.create-hub-desktop-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.create-hub-desktop-btn .sidebar_men_icon {
    color: #fff !important;
    margin-left: 0 !important;
}

/* Collapsed sidebar (tablet): icon only */
@media screen and (min-width: 768px) and (max-width: 1270px) {
    .create-hub-desktop-wrap {
        display: flex;
        justify-content: center;
        padding: 0;
        margin: 0 !important;
    }
    .create-hub-desktop-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 10px;
        justify-content: center;
    }
    .create-hub-desktop-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ═══════════════════════════════════════
   CREATE HUB — Desktop Popover
═══════════════════════════════════════ */
.create-hub-pop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.create-hub-pop-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.create-hub-pop {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    background: #fff;
    border: 1.5px solid #e4e4ef;
    border-radius: 16px;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.14),
        0 8px 20px rgba(0, 0, 0, 0.06);
    z-index: 1041;
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    pointer-events: none;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-pop.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.create-hub-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 4px;
}
.create-hub-pop-title {
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f0f24;
}
.create-hub-pop-kbd-hint {
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #bcbcd4;
    display: flex;
    align-items: center;
    gap: 4px;
}
.create-hub-pop-kbd {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    background: #f6f6fb;
    border: 1px solid #e4e4ef;
    color: #8888aa;
    font-family: monospace;
}

.create-hub-pop-group-label {
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8888aa;
    padding: 6px 12px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.create-hub-pop-group-label:first-child {
    padding-top: 8px;
}

.create-hub-pop-options {
    padding: 0 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
}

button.create-hub-pop-opt {
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: inherit;
    text-align: start;
    color: inherit;
    width: 100%;
}

.create-hub-pop-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.16s;
    border: 1.5px solid transparent;
    background: transparent;
}
.create-hub-pop-opt:hover {
    background: #f6f6fb;
    border-color: #e4e4ef;
}
.create-hub-pop-opt:active {
    transform: scale(0.985);
}
.create-hub-pop-opt.is-primary {
    background: #edebfd;
    border-color: rgba(109, 74, 232, 0.18);
}
.create-hub-pop-opt.is-primary:hover {
    background: #e4dffb;
    border-color: rgba(109, 74, 232, 0.22);
}

.create-hub-pop-opt-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.create-hub-pop-opt-icon svg {
    width: 16px;
    height: 16px;
}

/* Icon color variants */
.icon-hub-post {
    background: #edebfd;
    color: #6d4ae8;
    border: 1.5px solid rgba(109, 74, 232, 0.18);
}
.icon-hub-reel {
    background: #fce7f3;
    color: #db2777;
    border: 1.5px solid rgba(219, 39, 119, 0.15);
}
.icon-hub-course {
    background: #dbeafe;
    color: #2563eb;
    border: 1.5px solid rgba(37, 99, 235, 0.12);
}
.icon-hub-product {
    background: #ecfdf5;
    color: #059669;
    border: 1.5px solid rgba(5, 150, 105, 0.15);
}
.icon-hub-consult {
    background: #fdf4ff;
    color: #a855f7;
    border: 1.5px solid rgba(168, 85, 247, 0.15);
}
.icon-hub-story {
    background: #fff7ed;
    color: #ea580c;
    border: 1.5px solid rgba(234, 88, 12, 0.12);
}
.icon-hub-live {
    background: #fef2f2;
    color: #dc2626;
    border: 1.5px solid rgba(220, 38, 38, 0.18);
}
.icon-hub-challenge {
    background: #fef3c7;
    color: #d97706;
    border: 1.5px solid rgba(217, 119, 6, 0.15);
}

.create-hub-pop-opt-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.create-hub-pop-opt-name {
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f0f24;
    line-height: 1.2;
}
.create-hub-pop-opt-desc {
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #8888aa;
    line-height: 1.2;
    margin-top: 1px;
}

/* Live pulse dot */
.create-hub-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #dc2626;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
    animation: createHubPulse 1.5s infinite;
}
@keyframes createHubPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.75);
    }
}

/* Popover entry stagger */
@keyframes createHubPopIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.create-hub-pop.open button.create-hub-pop-opt:nth-of-type(1) {
    animation: createHubPopIn 0.25s 0.02s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-pop.open button.create-hub-pop-opt:nth-of-type(2) {
    animation: createHubPopIn 0.25s 0.05s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-pop.open button.create-hub-pop-opt:nth-of-type(3) {
    animation: createHubPopIn 0.25s 0.08s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-pop.open button.create-hub-pop-opt:nth-of-type(4) {
    animation: createHubPopIn 0.25s 0.11s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-pop.open button.create-hub-pop-opt:nth-of-type(5) {
    animation: createHubPopIn 0.25s 0.14s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-pop.open button.create-hub-pop-opt:nth-of-type(6) {
    animation: createHubPopIn 0.25s 0.17s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-pop.open button.create-hub-pop-opt:nth-of-type(7) {
    animation: createHubPopIn 0.25s 0.20s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-pop.open button.create-hub-pop-opt:nth-of-type(8) {
    animation: createHubPopIn 0.25s 0.23s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-pop.open .create-hub-pop-group-label {
    animation: createHubPopIn 0.25s 0.01s both cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark mode support */
.dark-mode .create-hub-pop,
body.dark-mode .create-hub-pop {
    background: #1a1a2e;
    border-color: #2a2a44;
}
.dark-mode .create-hub-pop-title,
body.dark-mode .create-hub-pop-title {
    color: #fff;
}
.dark-mode .create-hub-pop-opt-name,
body.dark-mode .create-hub-pop-opt-name {
    color: #fff;
}
.dark-mode .create-hub-pop-group-label,
body.dark-mode .create-hub-pop-group-label {
    color: #6a6a88;
}
.dark-mode .create-hub-pop-opt:hover,
body.dark-mode .create-hub-pop-opt:hover {
    background: #2a2a44;
    border-color: #3a3a54;
}
.dark-mode .create-hub-pop-opt.is-primary,
body.dark-mode .create-hub-pop-opt.is-primary {
    background: rgba(109, 74, 232, 0.15);
    border-color: rgba(109, 74, 232, 0.25);
}

/* ═══════════════════════════════════════
   CREATE HUB — Mobile Bottom Sheet
═══════════════════════════════════════ */
.create-hub-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(10, 8, 28, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.create-hub-mobile-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.create-hub-mobile-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.14);
    z-index: 1051;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.create-hub-mobile-sheet.open {
    transform: translateY(0);
}

.create-hub-mobile-drag {
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: #d2d2e4;
    margin: 10px auto 0;
}

.create-hub-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 0;
}
.create-hub-mobile-title {
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f0f24;
}
.create-hub-mobile-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #e4e4ef;
    background: #f6f6fb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8888aa;
    transition: all 0.15s;
}
.create-hub-mobile-close:hover {
    background: #f0f0f8;
    color: #0f0f24;
}
.create-hub-mobile-close svg {
    width: 12px;
    height: 12px;
}

.create-hub-mobile-options {
    padding: 10px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.create-hub-mobile-group-label {
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8888aa;
    padding: 6px 12px 2px;
}
.create-hub-mobile-group-label:first-child {
    padding-top: 0;
}

button.create-hub-mobile-opt {
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: inherit;
    text-align: start;
    color: inherit;
    width: 100%;
}

.create-hub-mobile-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.18s;
    border: 1.5px solid transparent;
    background: transparent;
}
.create-hub-mobile-opt:hover {
    background: #f6f6fb;
    border-color: #e4e4ef;
}
.create-hub-mobile-opt:active {
    transform: scale(0.985);
}
.create-hub-mobile-opt.is-primary {
    background: #edebfd;
    border-color: rgba(109, 74, 232, 0.18);
}
.create-hub-mobile-opt.is-primary:hover {
    background: #e4dffb;
    border-color: rgba(109, 74, 232, 0.25);
}

.create-hub-mobile-opt-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.create-hub-mobile-opt:hover .create-hub-mobile-opt-icon {
    transform: translateY(-1px);
}
.create-hub-mobile-opt-icon svg {
    width: 17px;
    height: 17px;
}

.create-hub-mobile-opt-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.create-hub-mobile-opt-name {
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f0f24;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.create-hub-mobile-opt-desc {
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #8888aa;
    margin-top: 1px;
    line-height: 1.2;
}

.create-hub-mobile-opt-arrow {
    width: 18px;
    height: 18px;
    color: #bcbcd4;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.create-hub-mobile-opt:hover .create-hub-mobile-opt-arrow {
    transform: translateX(2px);
    color: #8888aa;
}

/* Mobile sheet entry animations */
@keyframes createHubSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.create-hub-mobile-sheet.open button.create-hub-mobile-opt:nth-of-type(1) {
    animation: createHubSlideUp 0.32s 0.04s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-mobile-sheet.open button.create-hub-mobile-opt:nth-of-type(2) {
    animation: createHubSlideUp 0.32s 0.08s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-mobile-sheet.open button.create-hub-mobile-opt:nth-of-type(3) {
    animation: createHubSlideUp 0.32s 0.12s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-mobile-sheet.open button.create-hub-mobile-opt:nth-of-type(4) {
    animation: createHubSlideUp 0.32s 0.16s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-mobile-sheet.open button.create-hub-mobile-opt:nth-of-type(5) {
    animation: createHubSlideUp 0.32s 0.20s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-mobile-sheet.open button.create-hub-mobile-opt:nth-of-type(6) {
    animation: createHubSlideUp 0.32s 0.24s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-mobile-sheet.open button.create-hub-mobile-opt:nth-of-type(7) {
    animation: createHubSlideUp 0.32s 0.28s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-mobile-sheet.open button.create-hub-mobile-opt:nth-of-type(8) {
    animation: createHubSlideUp 0.32s 0.32s both cubic-bezier(0.16, 1, 0.3, 1);
}
.create-hub-mobile-sheet.open .create-hub-mobile-group-label {
    animation: createHubSlideUp 0.25s 0.02s both cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mobile toggle button styling */
.mobile-create-hub-toggle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6d4ae8, #8b6ff0) !important;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: "Outfit", "Cairo", sans-serif;
    box-shadow: 0 4px 16px rgba(109, 74, 232, 0.35);
    transition: all 0.2s;
    margin: -8px auto 0;
}
.mobile-create-hub-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(109, 74, 232, 0.5);
}
.mobile-create-hub-toggle:active {
    transform: scale(0.94);
}
.mobile-create-hub-toggle svg {
    width: 22px !important;
    height: 22px !important;
}
.mobile-create-hub-toggle svg rect,
.mobile-create-hub-toggle svg path {
    stroke: #fff !important;
}

/* Dark mode mobile */
.dark-mode .create-hub-mobile-sheet,
body.dark-mode .create-hub-mobile-sheet {
    background: #1a1a2e;
}
.dark-mode .create-hub-mobile-title,
body.dark-mode .create-hub-mobile-title {
    color: #fff;
}
.dark-mode .create-hub-mobile-opt-name,
body.dark-mode .create-hub-mobile-opt-name {
    color: #fff;
}
.dark-mode .create-hub-mobile-group-label,
body.dark-mode .create-hub-mobile-group-label {
    color: #6a6a88;
}
.dark-mode .create-hub-mobile-close,
body.dark-mode .create-hub-mobile-close {
    background: #2a2a44;
    border-color: #3a3a54;
    color: #ccc;
}
.dark-mode .create-hub-mobile-drag,
body.dark-mode .create-hub-mobile-drag {
    background: #3a3a54;
}
.dark-mode .create-hub-mobile-opt:hover,
body.dark-mode .create-hub-mobile-opt:hover {
    background: #2a2a44;
    border-color: #3a3a54;
}
.dark-mode .create-hub-mobile-opt.is-primary,
body.dark-mode .create-hub-mobile-opt.is-primary {
    background: rgba(109, 74, 232, 0.15);
    border-color: rgba(109, 74, 232, 0.25);
}
.dark-mode .create-hub-mobile-overlay,
body.dark-mode .create-hub-mobile-overlay {
    background: rgba(0, 0, 0, 0.6);
}

/* RTL support */
[dir="rtl"] .create-hub-pop-opt-icon,
[dir="rtl"] .create-hub-mobile-opt-icon {
    margin-left: 0;
}
[dir="rtl"] .create-hub-mobile-opt-arrow,
[dir="rtl"] .create-hub-pop-opt-arrow {
    transform: scaleX(-1);
}
[dir="rtl"] .create-hub-mobile-opt:hover .create-hub-mobile-opt-arrow {
    transform: scaleX(-1) translateX(2px);
}
[dir="rtl"] .create-hub-live-dot {
    margin-right: 0;
    margin-left: 4px;
}

@media only screen and (max-width: 767.98px){
    .msg-sidebar{
        order:2 !important;
        border-left: none !important;
        border-right: none !important;
    }
    .msg-chat {
        border-left: none !important;
        border-right: none !important;
    }
    .msg-chat-header {
        margin-top: 8px;
    }
    /*
     * Mobile message action bar
     * Row 1: [Photo/Video/Audio ............] [Emoji]
     * Row 2: [Zip] [PDF] [Prix] [Tip]
     */
    .actions-msgs .msg-input-tools {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 8px;
        width: 100%;
        align-items: stretch;
    }
    /* Unwrap the inner Bootstrap .d-flex so its children join the grid */
    .actions-msgs .msg-input-tools > .d-flex {
        display: contents !important;
    }

    /* --- Row 1 --- */
    .actions-msgs .msg-input-tools .btnMultipleUpload {
        grid-row: 1;
        grid-column: 1 / 4;
        font-size: 12px;
        padding: 8px 12px;
    }
    .actions-msgs .msg-input-tools .btnMultipleUpload svg {
        width: 14px;
        height: 14px;
    }
    .actions-msgs .msg-input-tools .msg-btn-emoji {
        grid-row: 1;
        grid-column: 4 / 5;
        width: auto;
        height: auto;
        padding: 0;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: unset !important;
    }
    .actions-msgs .msg-input-tools .msg-btn-emoji svg {
        width: 18px;
        height: 18px;
    }

    /* --- Row 2 --- */
    .actions-msgs .msg-input-tools .np-chip:not(.btnMultipleUpload):not(.msg-btn-emoji):not(.msg-btn-tip) {
        grid-row: 2;
        font-size: 12px;
        padding: 8px 6px;
        justify-content: center;
    }
    .actions-msgs .msg-input-tools .np-chip:not(.btnMultipleUpload):not(.msg-btn-emoji):not(.msg-btn-tip) svg {
        width: 14px;
        height: 14px;
    }
    .actions-msgs .msg-input-tools .msg-btn-tip {
        grid-row: 2;
        width: 100%;
        height: auto;
        padding: 8px 6px;
        border-radius: 8px !important;
        justify-content: center;
    }
    .actions-msgs .msg-input-tools .msg-btn-tip svg {
        width: 15px;
        height: 15px;
    }

    /* Emoji dropdown spans full width when open */
    .actions-msgs .msg-input-tools .dropdown-emoji {
        grid-column: 1 / -1;
    }
    /* Hide unused mic button */
    .actions-msgs .msg-input-tools .msg-attach-btn {
        display: none !important;
    }
}

/* ============================
   Call Modals (Incoming / Outgoing)
   ============================ */
.modal-call .modal-content-call {
    max-width: 18rem;
    margin: 0 auto;
    border-radius: 1.3rem;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 24px 80px rgba(18,17,42,.3);
    animation: callSlideUp .4s cubic-bezier(.22,1,.36,1) both;
    font-family: 'Outfit', sans-serif;
}
@keyframes callSlideUp {
    from { opacity: 0; transform: translateY(20px) }
    to   { opacity: 1; transform: translateY(0) }
}

/* Top section */
.call-modal-top {
    padding: 2.5rem 1.5rem 1rem;
}
.call-modal-top.incoming-video {
    background: linear-gradient(180deg, rgba(5,150,105,.05) 0%, transparent 100%);
}
.call-modal-top.incoming-audio {
    background: linear-gradient(180deg, rgba(5,150,105,.05) 0%, transparent 100%);
}
.call-modal-top.outgoing {
    background: linear-gradient(180deg, rgba(109,74,232,.05) 0%, transparent 100%);
}

/* Avatar */
.call-modal-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 1.4rem;
    margin: 0 auto .85rem;
    overflow: hidden;
    border: 3px solid #ECFDF5;
}
.call-modal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.call-modal-top.incoming-video .call-modal-avatar,
.call-modal-top.incoming-audio .call-modal-avatar {
    border-color: #ECFDF5;
    animation: callRingGreen 1.8s ease-in-out infinite;
}
.call-modal-top.outgoing .call-modal-avatar {
    border-color: #F0EDFF;
    animation: callRingPurple 2s ease-in-out infinite;
}
@keyframes callRingGreen {
    0%,100% { box-shadow: 0 0 0 0 rgba(5,150,105,.3) }
    50%     { box-shadow: 0 0 0 12px rgba(5,150,105,0) }
}
@keyframes callRingPurple {
    0%,100% { box-shadow: 0 0 0 0 rgba(109,74,232,.3) }
    50%     { box-shadow: 0 0 0 12px rgba(109,74,232,0) }
}

/* Name */
.call-modal-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #12112A;
}

/* Status badge */
.call-modal-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .4rem;
    padding: .3rem .7rem;
    border-radius: 1rem;
    font-size: .7rem;
    font-weight: 600;
}
.call-modal-status.incoming {
    background: #ECFDF5;
    color: #059669;
}
.call-modal-status.outgoing {
    background: #F0EDFF;
    color: #6D4AE8;
}
.call-modal-dot {
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    animation: callBlink 1.2s ease-in-out infinite;
}
.call-modal-dot:nth-child(2) { animation-delay: .2s }
.call-modal-dot:nth-child(3) { animation-delay: .4s }
.call-modal-status.incoming .call-modal-dot { background: #059669 }
.call-modal-status.outgoing .call-modal-dot { background: #6D4AE8 }
@keyframes callBlink {
    0%,100% { opacity: 1 }
    50%     { opacity: .15 }
}

/* Info pill (duration, type, price) */
.call-modal-info {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .65rem;
    padding: .45rem .75rem;
    border-radius: .5rem;
    background: #F3F2FA;
}
.call-modal-info-item {
    display: flex;
    align-items: center;
    gap: .2rem;
    font-size: .65rem;
    font-weight: 600;
    color: #4E4C6A;
}
.call-modal-info-item svg {
    width: .6rem;
    height: .6rem;
    color: #C2C0D6;
}
.call-modal-info-sep {
    width: 1px;
    height: .7rem;
    background: #DDD9EE;
}
.call-modal-info-price {
    font-size: .7rem;
    font-weight: 800;
    color: #6D4AE8;
}

/* Notice message */
.call-modal-msg {
    font-size: .72rem;
    font-weight: 500;
    color: #C2C0D6;
    margin-top: .6rem;
    line-height: 1.45;
    padding: 0 .75rem;
}

/* Action buttons area */
.call-modal-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    padding: 1.25rem 1.5rem 2rem;
}
.call-modal-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}
.call-modal-btn {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s cubic-bezier(.22,1,.36,1);
}
.call-modal-btn svg {
    width: 1.2rem;
    height: 1.2rem;
}
.call-modal-btn.decline {
    background: #DC2626;
    color: #fff;
    box-shadow: 0 4px 14px rgba(220,38,38,.3);
}
.call-modal-btn.decline:hover {
    background: #B91C1C;
    transform: scale(1.08);
}
.call-modal-btn.accept {
    background: #059669;
    color: #fff;
    box-shadow: 0 4px 14px rgba(5,150,105,.3);
}
.call-modal-btn.accept:hover {
    background: #047857;
    transform: scale(1.08);
}
.call-modal-label {
    font-size: .6rem;
    font-weight: 600;
    color: #C2C0D6;
}

/* ========================================
   Live Private Request Modal (lpr-)
   ======================================== */
.lpr-modal {
    border: 1px solid #ECEAF6;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(18,17,42,.25);
}
.lpr-modal .modal-body { overflow: hidden; border-radius: 1.25rem; }

/* Accent */
.lpr-accent {
    height: .25rem;
    background: linear-gradient(90deg, #3B82F6, #6D4AE8, #8B6FF0);
}

/* Header */
.lpr-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1.25rem 1rem;
    position: relative;
}
.lpr-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    border: 1px solid #ECEAF6;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #C2C0D6;
    transition: all .12s;
    padding: 0;
}
html[dir="rtl"] .lpr-close {
    right: auto;
    left: .75rem;
}
.lpr-close:hover {
    background: #F3F2FA;
    color: #4E4C6A;
}
.lpr-close svg { width: .6rem; height: .6rem; }

.lpr-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    overflow: hidden;
    border: 2.5px solid #EFF6FF;
    box-shadow: 0 4px 16px rgba(59,130,246,.12);
    margin-bottom: .65rem;
}
.lpr-avatar img { width: 100%; height: 100%; object-fit: cover; }

.lpr-type-badge {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    border-radius: 2rem;
    background: #EFF6FF;
    border: 1px solid rgba(59,130,246,.18);
    font-size: .6rem;
    font-weight: 700;
    color: #3B82F6;
    margin-bottom: .4rem;
    font-family: "Outfit", "Cairo", sans-serif;
}
.lpr-type-badge svg { width: .6rem; height: .6rem; }

.lpr-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #12112A;
    letter-spacing: -.02em;
    text-align: center;
    font-family: "Outfit", "Cairo", sans-serif;
}
.lpr-subtitle {
    font-size: .72rem;
    font-weight: 500;
    color: #908EAC;
    margin-top: .15rem;
    text-align: center;
}

/* Body */
.lpr-body {
    padding: 0 1.25rem 1.25rem;
}

/* Duration section */
.lpr-dur-section { margin-bottom: 1rem; }
.lpr-dur-label {
    font-size: .7rem;
    font-weight: 700;
    color: #4E4C6A;
    margin-bottom: .45rem;
    display: flex;
    align-items: center;
    gap: .25rem;
    font-family: "Outfit", "Cairo", sans-serif;
}
.lpr-dur-label svg { width: .65rem; height: .65rem; color: #C2C0D6; }

.lpr-dur-pills {
    display: flex;
    gap: .3rem;
    margin-bottom: .45rem;
}
.lpr-dur-pill {
    flex: 1;
    padding: .5rem .3rem;
    border: 1.5px solid #ECEAF6;
    border-radius: .6rem;
    background: #fff;
    text-align: center;
    cursor: pointer;
    transition: all .12s;
}
.lpr-dur-pill:hover {
    border-color: #DDD9EE;
    background: #FAFAFE;
}
.lpr-dur-pill.on {
    border-color: #6D4AE8;
    background: #F0EDFF;
}
.lpr-dur-val {
    font-size: .9rem;
    font-weight: 800;
    color: #12112A;
    font-family: "Outfit", "Cairo", sans-serif;
}
.lpr-dur-pill.on .lpr-dur-val { color: #6D4AE8; }
.lpr-dur-unit {
    font-size: .5rem;
    font-weight: 600;
    color: #C2C0D6;
    margin-top: .05rem;
}
.lpr-dur-pill.on .lpr-dur-unit { color: #A78BFA; }

/* Custom duration input */
.lpr-dur-custom {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.lpr-dur-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .45rem .6rem;
    border: 1.5px solid #DDD9EE;
    border-radius: .55rem;
    background: #fff;
    transition: all .12s;
}
.lpr-dur-input-wrap:focus-within {
    border-color: #6D4AE8;
    box-shadow: 0 0 0 3px rgba(109,74,232,.06);
}
.lpr-dur-input-wrap input {
    width: 3.5rem;
    border: none;
    outline: none;
    background: none;
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: .9rem;
    font-weight: 700;
    color: #12112A;
    text-align: center;
}
.lpr-dur-input-wrap input::placeholder { color: #C2C0D6; }
.lpr-dur-input-wrap span {
    font-size: .7rem;
    font-weight: 600;
    color: #908EAC;
}
.lpr-dur-rate {
    font-size: .65rem;
    font-weight: 600;
    color: #C2C0D6;
    white-space: nowrap;
    font-family: "Outfit", "Cairo", sans-serif;
}
.lpr-dur-rate strong { color: #4E4C6A; }

/* Wallet bar */
.lpr-wallet {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .7rem;
    border-radius: .6rem;
    margin-bottom: .85rem;
    background: #ECFDF5;
    border: 1px solid rgba(5,150,105,.18);
}
.lpr-wallet.insufficient {
    background: #FEF2F2;
    border-color: rgba(220,38,38,.18);
}
.lpr-w-ico {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(5,150,105,.1);
    color: #059669;
}
.lpr-wallet.insufficient .lpr-w-ico {
    background: rgba(220,38,38,.1);
    color: #DC2626;
}
.lpr-w-ico svg { width: .8rem; height: .8rem; }
.lpr-w-info { flex: 1; }
.lpr-w-label {
    font-size: .65rem;
    font-weight: 600;
    color: #059669;
    font-family: "Outfit", "Cairo", sans-serif;
}
.lpr-wallet.insufficient .lpr-w-label { color: #DC2626; }
.lpr-w-balance {
    font-size: .6rem;
    font-weight: 500;
    margin-top: .05rem;
    color: #065F46;
}
.lpr-wallet.insufficient .lpr-w-balance { color: #991B1B; }
.lpr-recharge-link {
    color: #DC2626;
    text-decoration: underline;
    font-weight: 600;
    margin-left: .25rem;
}
html[dir="rtl"] .lpr-recharge-link {
    margin-left: 0;
    margin-right: .25rem;
}
.lpr-w-check { flex-shrink: 0; color: #059669; }
.lpr-wallet.insufficient .lpr-w-check { color: #DC2626; }
.lpr-w-check svg { width: .85rem; height: .85rem; }

/* Price card */
.lpr-price-card {
    border: 1.5px solid #ECEAF6;
    border-radius: .75rem;
    overflow: hidden;
    margin-bottom: .85rem;
}
.lpr-price-card .list-group { border-radius: 0; }
.lpr-price-card .list-group-item {
    border: none;
    border-top: 1px solid #ECEAF6;
    padding: .55rem .75rem;
    font-size: .78rem;
}
.lpr-price-card .list-group-item:first-child { border-top: none; }
.lpr-price-card .list-group-item .row { align-items: center; }
.lpr-price-card .list-group-item small { font-size: .78rem; }
.lpr-price-card .list-group-item:last-child {
    background: #F0EDFF;
}
.lpr-price-card .list-group-item:last-child small {
    font-weight: 700;
    color: #6D4AE8;
}

/* Actions */
.lpr-actions {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.lpr-cta {
    width: 100%;
    padding: .7rem;
    border: none;
    border-radius: .65rem;
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    transition: all .15s cubic-bezier(.22,1,.36,1);
}
.lpr-cta svg { width: .85rem; height: .85rem; }
.lpr-cta.primary {
    background: #6D4AE8;
    color: #fff;
    box-shadow: 0 3px 12px rgba(109,74,232,.25);
}
.lpr-cta.primary:hover {
    background: #8B6FF0;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(109,74,232,.3);
}
.lpr-cta.primary:active { transform: translateY(0); }
.lpr-cta.primary:disabled {
    background: #DDD9EE;
    color: #908EAC;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}
.lpr-cta.secondary {
    background: #fff;
    color: #908EAC;
    border: 1.5px solid #ECEAF6;
}
.lpr-cta.secondary:hover {
    border-color: #DDD9EE;
    color: #4E4C6A;
    background: #FAFAFE;
}

/* Responsive */
@media (max-width: 420px) {
    .lpr-modal { border-radius: 1rem 1rem 0 0; }
    .lpr-modal .modal-body { border-radius: 1rem 1rem 0 0; }
    .lpr-dur-pills { flex-wrap: wrap; }
    .lpr-dur-pill { min-width: calc(25% - .3rem); }
}

.alert .lucide-inline-icon{
    width: unset !important;
    height: unset !important;
}

#showErrorsLogin li {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}
#showErrorsLogin .lucide-inline-host{
    line-height: 1;
}
#showErrorsLogin .lucide-inline-icon{
    height:15px !important;
    width:15px !important;
}
.cf-turnstile{
    text-align:center;
    margin-top: 25px;
}


/* ================================================================
   Target / Funding Goal - Post Creation Form
   ================================================================ */
.np-target-section {
    padding: 16px;
    border-radius: 14px;
    background: #f6f3ff;
    border: 1.5px solid #ddd9ee;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.np-target-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
}
.np-target-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: #6D4AE8;
}
.np-target-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #6D4AE8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.np-target-icon svg { stroke: #fff; width: 12px; height: 12px; }
.np-target-body { display: flex; flex-direction: column; gap: 12px; }
.np-target-field { display: flex; flex-direction: column; gap: 5px; }
.np-target-amount-row { display: flex; align-items: center; gap: 8px; }
.np-target-currency { font-size: 14px; font-weight: 700; color: #4E4C6A; }
.np-target-goal-input { font-weight: 700 !important; font-size: 15px !important; }
.np-target-tiers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.np-target-tier-input { text-align: center; font-weight: 600 !important; font-size: 14px !important; background: #fafafd !important; }
.np-target-toggle.active,
.np-chip.np-target-toggle.active {
    border-color: #6D4AE8 !important;
    background: #ede8fd !important;
    color: #6D4AE8 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 3px rgba(109,74,232,0.08);
}
.np-target-toggle.active svg,
.np-chip.np-target-toggle.active svg { stroke: #6D4AE8; }

/* ================================================================
   Target Card - Post Feed Display (compact)
   ================================================================ */
.wpt {
    margin: 12px 16px 14px;
    border-radius: 1.14rem;
    overflow: hidden;
    border: 1px solid #ECEAF6;
    background: #fff;
}
.wpt--reached { border-color: #D1FAE5; }
.wpt--expired { border-color: #e4e4ed; background: #fafafd; }
.wpt-body { padding: 0.85rem 1rem; }
.wpt-row-top {
    display: flex;
    align-items: center;
    gap: 0.57rem;
    margin-bottom: 0.57rem;
}
.wpt-desc {
    font-size: 0.93rem;
    color: #4E4C6A;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wpt--reached .wpt-desc { color: #047857; }
.wpt--expired .wpt-desc { color: #908EAC; }
.wpt-deadline {
    font-size: 0.78rem;
    color: #908EAC;
    flex-shrink: 0;
}
.wpt-deadline--expired { color: #DC2626; font-weight: 600; }
.wpt-beyond {
    font-size: 0.78rem;
    color: #059669;
    font-weight: 600;
    flex-shrink: 0;
}
.wpt-row-bar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.wpt-bar {
    flex: 1;
    height: 0.43rem;
    background: #F3F2FA;
    border-radius: 0.21rem;
    overflow: hidden;
}
.wpt-bar-fill {
    height: 100%;
    border-radius: 0.21rem;
    background: linear-gradient(90deg, #4C2FB3, #6D4AE8);
    transition: width 0.8s cubic-bezier(.4,0,.2,1);
}
.wpt--reached .wpt-bar { background: #D1FAE5; }
.wpt--reached .wpt-bar-fill { background: linear-gradient(90deg, #059669, #10B981); }
.wpt-amount {
    font-size: 0.85rem;
    font-weight: 800;
    color: #0F0F1A;
    flex-shrink: 0;
}
.wpt--reached .wpt-amount { color: #065F46; }
.wpt-goal {
    font-size: 0.78rem;
    color: #908EAC;
    flex-shrink: 0;
}
.wpt--reached .wpt-goal { color: #047857; }
.wpt-btn {
    width: 100%;
    padding: 0.64rem 0;
    background: #6D4AE8;
    color: #fff;
    border: none;
    font-size: 0.93rem;
    font-weight: 700;
    cursor: pointer;
    font-family: Outfit, Cairo, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.36rem;
    border-bottom-left-radius: 1.14rem;
    border-bottom-right-radius: 1.14rem;
    transition: opacity 0.15s;
}
.wpt-btn:hover { opacity: 0.9; }
.wpt--reached .wpt-btn { background: #059669; }
.wpt-btn--disabled {
    background: #F3F2FA;
    color: #908EAC;
    cursor: default;
    font-weight: 600;
}
.wpt-btn--disabled:hover { opacity: 1; }

/* ================================================================
   Contribute Modal - Summary & Anonymous
   ================================================================ */
.contribute-summary-desc { font-size: 13px; color: #4E4C6A; font-weight: 500; }
.contribute-summary-current { font-size: 13px; font-weight: 700; color: #0F0F1A; }
.contribute-summary-pct { font-size: 12px; font-weight: 600; color: #6D4AE8; }
.contribute-anonymous { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: #4E4C6A; }
.contribute-anonymous input[type=checkbox] { accent-color: #6D4AE8; width: 16px; height: 16px; }
.menuDrop .username-link{
    width: 100% !important;
}
.menuDrop .username-link:hover{
    background: linear-gradient(135deg, #6d4ae8, #8b6ff0) !important;
}