body, html {
    font-family: "Cairo", sans-serif;
    direction: rtl;
    min-height: 1080px;
}

.cairo{
    font-family: "Cairo", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.footer-title h5,
.footer-contant ul li,
.subfooter .footer-left p {
    font-family: "Cairo", sans-serif;
}

.tap-top {
    bottom: 135px;
    right: auto;
    left: 27px;
}

.FixPhoto {
    transform: scaleX(1) !important;
}
.TopLogo{
    max-width:190px
}
.breadcrumb-main {
    background-color: #014488;
    padding: 10px 0;
    color: #FFF;
}
    .breadcrumb-main .breadcrumb-contain h2,
    .breadcrumb-main .breadcrumb-contain ul li a{
        color:#FFF;
    }
.section-big-py-space {
    padding-top: 10px;
    padding-bottom: 50px;
}
.header7 {
    padding-top: 0;
    padding-bottom: 0;
}
.access-card-soft {
    border: 0;
    border-radius: 18px
}

.access-icon-badge {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FEE2E2;
    color: #B91C1C;
}
.header7 .header-contain .icon-block ul.theme-color li i {
    color: #FFF !important;
    font-size: 20px;
}
.header7 .header-contain .icon-block ul.theme-color li {
    margin: 10px;
}
.menuTitleSpan {
    font-size: 11px;
    color: #FFF;
    margin-top: 5px;
    display:none
}

/* ======================================================================================================= */
/* =========================================================================== MyNotificationsPage */
/* ======================================================================================================= */
/* ============ Light (Default) ============ */
.mynotifications.page {
    background: #F6F7F9;
}

.mynotifications.header-title {
    color: #111827;
}

.mynotifications.subtle {
    color: #6B7280;
}

.mynotifications.panel {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
}

.mynotifications.toolbar {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
}

.mynotifications.item {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
}

    .mynotifications.item:hover {
        background: #F9FAFB;
        border-color: #D1D5DB;
    }

    .mynotifications.item.unread {
        background: #F0FDFA;
        border-color: #99F6E4;
    }

.mynotifications.icon-badge {
    background: #EEF2FF;
    color: #3730A3;
}

    .mynotifications.icon-badge.info {
        background: #E0F2FE;
        color: #0369A1;
    }

    .mynotifications.icon-badge.success {
        background: #ECFDF5;
        color: #047857;
    }

    .mynotifications.icon-badge.warn {
        background: #FFF7ED;
        color: #C2410C;
    }

    .mynotifications.icon-badge.danger {
        background: #FFF1F2;
        color: #BE123C;
    }

.mynotifications.unread-dot {
    background: #0D9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}

.mynotifications.item-title {
    color: #111827;
}

.mynotifications.item-body {
    color: #6B7280;
}

.mynotifications.item-meta {
    color: #9CA3AF;
}

.mynotifications.chev {
    color: #9CA3AF;
}

.mynotifications.empty {
    color: #6B7280;
}

.mynotifications.empty-icon {
    background: #F3F4F6;
    color: #6B7280;
}


/* ============ Dark (body has class="dark") ============ */
.dark .mynotifications.page {
    background: #0F141A;
}

.dark .mynotifications.header-title {
    color: #FFFFFF;
}

.dark .mynotifications.subtle {
    color: #A7B0BC;
}

.dark .mynotifications.panel {
    background: #141B23;
    border-color: #223041;
}

.dark .mynotifications.toolbar {
    background: #141B23;
    border-color: #223041;
}

.dark .mynotifications.item {
    background: #0F141A;
    border-color: #223041;
}

    .dark .mynotifications.item:hover {
        background: #111827;
        border-color: #2A3B52;
    }

    .dark .mynotifications.item.unread {
        background: rgba(13,148,136,.10);
        border-color: rgba(94,234,212,.35);
    }

.dark .mynotifications.icon-badge {
    background: #1C2A4A;
    color: #A5B4FC;
}

    .dark .mynotifications.icon-badge.info {
        background: #0B2239;
        color: #93C5FD;
    }

    .dark .mynotifications.icon-badge.success {
        background: #062B1F;
        color: #34D399;
    }

    .dark .mynotifications.icon-badge.warn {
        background: #2B1806;
        color: #FDBA74;
    }

    .dark .mynotifications.icon-badge.danger {
        background: #2B0B12;
        color: #FDA4AF;
    }

.dark .mynotifications.unread-dot {
    background: #5EEAD4;
    box-shadow: 0 0 0 3px rgba(94,234,212,.10);
}

.dark .mynotifications.item-title {
    color: #FFFFFF;
}

.dark .mynotifications.item-body {
    color: #A7B0BC;
}

.dark .mynotifications.item-meta {
    color: #91A0B4;
}

.dark .mynotifications.chev {
    color: #A7B0BC;
}

.dark .mynotifications.empty {
    color: #A7B0BC;
}

.dark .mynotifications.empty-icon {
    background: #0F141A;
    border: 1px solid #223041;
    color: #A7B0BC;
}



/* ===================== Light (Default) ===================== */
.myfavorite.page {
    background: #ffffff;
}

.myfavorite.header-card {
    border: 1px solid #E5E5E5;
    background: #ffffff;
    border-radius: 14px;
    padding: 12px;
}

.myfavorite.header-title {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}

.myfavorite.list-card {
    border: 1px solid #E5E5E5;
    background: #ffffff;
    border-radius: 14px;
    padding: 10px;
}

.myfavorite.items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.myfavorite.item {
    border: 1px solid #EFEFEF;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

    .myfavorite.item:hover {
        background: #F9FAFB;
        border-color: #E5E7EB;
        transform: translateY(-1px);
    }

/* row LTR to fix delete-left / logo-right */
.myfavorite.item-row {
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 10px;
}

.myfavorite.delete-form {
    margin: 0;
    flex: 0 0 auto;
}

.myfavorite.delete-btn {
    border: 0;
    background: transparent;
    color: #DC2626;
    font-size: 18px;
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

    .myfavorite.delete-btn:hover {
        background: rgba(220,38,38,.08);
    }

.myfavorite.name-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.myfavorite.name {
    direction: rtl;
    text-align: right;
    font-size: 14px;
    font-weight: 800;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.myfavorite.logo-wrap {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
}

.myfavorite.logo {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
    background: #F3F4F6;
}

.myfavorite.empty {
    padding: 24px 10px;
    text-align: center;
    color: #6B7280;
}

.myfavorite.empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    margin: 0 auto 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3F4F6;
    color: #6B7280;
    font-size: 22px;
}

.myfavorite.empty-text {
    font-weight: 700;
}

/* Overlay */
.myfavorite.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 2000;
}

.myfavorite.overlay-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    color: #fff;
}

.myfavorite.overlay-text {
    font-size: 14px;
}


/* ===================== Dark (body.dark) ===================== */
.dark .myfavorite.page {
    background: #121212;
}

.dark .myfavorite.header-card {
    background: #1B1B1B;
    border-color: #2A2A2A;
}

.dark .myfavorite.header-title {
    color: #ffffff;
}

.dark .myfavorite.list-card {
    background: #1B1B1B;
    border-color: #2A2A2A;
}

.dark .myfavorite.item {
    background: #202020;
    border-color: #2A2A2A;
}

    .dark .myfavorite.item:hover {
        background: #232323;
        border-color: #3A3A3A;
    }

.dark .myfavorite.name {
    color: #ffffff;
}

.dark .myfavorite.logo {
    background: #2A2A2A;
}
/* ===================== Light (Default) ===================== */
.showoneadvertising.page {
    background: #F6F7F9;
}

/* Hero */
.showoneadvertising.hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    background: #fff;
}

.showoneadvertising.hero-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .showoneadvertising.hero-img {
        height: 230px;
    }
}

.showoneadvertising.hero-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 12px;
    background: rgba(0,0,0,.40);
}

.showoneadvertising.badge-sponsored {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F59E0B;
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
}

.showoneadvertising.hero-title {
    margin-top: 8px;
    color: #fff;
    font-weight: 900;
    font-size: 18px;
    text-align: center;
}

/* Main card */
.showoneadvertising.main-card {
    margin-top: -20px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 14px;
}

/* Advertiser */
.showoneadvertising.advertiser {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 30px;
}

.showoneadvertising.advertiser-avatar {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: #EEF2FF;
    color: #3730A3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 22px;
    flex: 0 0 auto;
}

.showoneadvertising.advertiser-label {
    font-size: 12px;
    color: #6B7280;
}

.showoneadvertising.advertiser-name {
    font-size: 16px;
    font-weight: 900;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.showoneadvertising.advertiser-city {
    font-size: 12px;
    color: #6B7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description */
.showoneadvertising.desc {
    margin-top: 12px;
    color: #4B5563;
    font-size: 13px;
    line-height: 1.9;
    white-space: pre-line;
}

.showoneadvertising.divider {
    height: 1px;
    background: #E5E7EB;
    opacity: .7;
    margin: 12px 0;
}

/* Info */
.showoneadvertising.info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.showoneadvertising.info-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.showoneadvertising.info-ic {
    width: 28px;
    display: flex;
    justify-content: center;
    margin-top: 2px;
    font-size: 14px;
}

.showoneadvertising.info-text {
    color: #374151;
    font-size: 13px;
    line-height: 1.8;
}

.showoneadvertising.info-muted {
    color: #6B7280;
    font-size: 12px;
}

.showoneadvertising.ic-purple {
    color: #7C3AED;
}

/* Visit card */
.showoneadvertising.visit-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #2563EB;
    color: #fff;
    text-decoration: none;
    border-radius: 18px;
    padding: 12px 14px;
}

    .showoneadvertising.visit-card:hover {
        filter: brightness(.97);
        color: #fff;
    }

    .showoneadvertising.visit-card.disabled {
        background: #93C5FD;
        cursor: not-allowed;
    }

.showoneadvertising.visit-text {
    font-weight: 900;
    font-size: 15px;
    text-align: center;
    flex: 1 1 auto;
}

.showoneadvertising.visit-ic {
    flex: 0 0 auto;
}

/* Error */
.showoneadvertising.error-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 16px;
}

.showoneadvertising.error-title {
    color: #111827;
    font-weight: 900;
}

/* ===================== Dark (body.dark) ===================== */
.dark .showoneadvertising.page {
    background: #0F141A;
}

.dark .showoneadvertising.hero {
    border-color: #223041;
    background: #141B23;
}

.dark .showoneadvertising.main-card {
    background: #141B23;
    border-color: #223041;
}

.dark .showoneadvertising.advertiser-avatar {
    background: #1F2937;
    color: #A5B4FC;
}

.dark .showoneadvertising.advertiser-label {
    color: #9CA3AF;
}

.dark .showoneadvertising.advertiser-name {
    color: #FFFFFF;
}

.dark .showoneadvertising.advertiser-city {
    color: #9CA3AF;
}

.dark .showoneadvertising.desc {
    color: #D1D5DB;
}

.dark .showoneadvertising.divider {
    background: #223041;
}

.dark .showoneadvertising.info-text {
    color: #E5E7EB;
}

.dark .showoneadvertising.info-muted {
    color: #9CA3AF;
}

.dark .showoneadvertising.error-card {
    background: #141B23;
    border-color: #223041;
}

.dark .showoneadvertising.error-title {
    color: #fff;
}

/* ======================================= */
/* ==================== MyBusiness Page */
/* ======================================= */

/* ============ Light (Default) ============ */

/* الحاوية الرئيسية للصفحة */
.MyBusiness-Page {
    background-color: #F6F7F9; /* Light=#F6F7F9 */
    min-height: 100vh;
    padding-bottom: 80px; /* مسافة للزر العائم */
    position: relative;
}

/* 1. Header Card */
.MyBusiness-HeaderCard {
    background-color: #FFFFFF; /* Light=White */
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* خفيف جداً لأن StrokeThickness=0 */
}

.MyBusiness-IconBadge {
    width: 44px;
    height: 44px;
    background-color: #E0F2FE; /* Light=#E0F2FE */
    border-radius: 16px;
    color: #0369A1; /* Light=#0369A1 */
    font-size: 18px;
}

.MyBusiness-Title {
    font-family: 'Cairo', sans-serif;
    font-size: 18px;
    font-weight: 700; /* Bold */
    color: #111827; /* Light=#111827 */
}

.MyBusiness-Subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280; /* Light=#6B7280 */
}

/* 2. Empty State Card */
.MyBusiness-EmptyState {
    background-color: #FFF1F2; /* Light=#FFF1F2 */
    border-radius: 18px;
}

.MyBusiness-EmptyIconBadge {
    width: 40px;
    height: 40px;
    background-color: #FFE4E6; /* Light=#FFE4E6 */
    border-radius: 14px;
    color: #BE123C; /* Light=#BE123C */
    font-size: 16px;
}

.MyBusiness-EmptyTitle {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #9F1239; /* Light=#9F1239 */
}

.MyBusiness-EmptySubtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: #9F1239; /* Light=#9F1239 */
}

/* 3. Business Card (List Item) */
.MyBusiness-Card {
    background-color: #FFFFFF; /* Light=White */
    border-radius: 18px;
    /* Shadow Brush="#25000000" */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
    height: 100%; /* لضمان تساوي الارتفاع في الـ Grid */
}

    .MyBusiness-Card:hover {
        transform: translateY(-3px);
    }

.MyBusiness-LogoBox {
    width: 58px;
    height: 58px;
    background-color: #F3F4F6; /* Light=#F3F4F6 */
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.MyBusiness-ItemTitle {
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #111827; /* Light=#111827 */
    margin-bottom: 4px;
}

.MyBusiness-EyeIcon {
    font-size: 12px;
    color: #6B7280; /* Light=#6B7280 */
}

.MyBusiness-ViewText {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280; /* Light=#6B7280 */
}

.MyBusiness-ArrowBox {
    width: 42px;
    height: 42px;
    background-color: #EEF2FF; /* Light=#EEF2FF */
    border-radius: 14px;
    color: #3730A3; /* Light=#3730A3 */
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .MyBusiness-ArrowBox:hover {
        background-color: #E0E7FF;
    }

/* 4. Floating Add Button */
.MyBusiness-FabBtn {
    position: fixed;
    bottom: 30px;
    left: 30px; /* RTL placement similar to End in Mobile */
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background-color: #08992a; /* ثابت */
    color: #FFFFFF;
    font-size: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    transition: transform 0.2s;
}

    .MyBusiness-FabBtn:hover {
        background-color: #e67e00;
        transform: scale(1.1);
        color: #FFFFFF;
    }


/* ============ dark ============ */

/* تغيير خلفية الصفحة */
.dark .MyBusiness-Page {
    background-color: #0F141A; /* Dark=#0F141A */
}

/* 1. Header Card Dark */
.dark .MyBusiness-HeaderCard {
    background-color: #141B23; /* Dark=#141B23 */
    color: #FFFFFF;
}

.dark .MyBusiness-IconBadge {
    background-color: #0B2239; /* Dark=#0B2239 */
    color: #93C5FD; /* Dark=#93C5FD */
}

.dark .MyBusiness-Title {
    color: #FFFFFF; /* Dark=White */
}

.dark .MyBusiness-Subtitle {
    color: #A7B0BC; /* Dark=#A7B0BC */
}

/* 2. Empty State Dark */
.dark .MyBusiness-EmptyState {
    background-color: #2B0B12; /* Dark=#2B0B12 */
}

.dark .MyBusiness-EmptyIconBadge {
    background-color: #3B0F18; /* Dark=#3B0F18 */
    color: #FDA4AF; /* Dark=#FDA4AF */
}

.dark .MyBusiness-EmptyTitle,
.dark .MyBusiness-EmptySubtitle {
    color: #FDA4AF; /* Dark=#FDA4AF */
}

/* 3. Business Card Dark */
.dark .MyBusiness-Card {
    background-color: #141B23; /* Dark=#141B23 */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5); /* Shadow darker for dark mode */
}

.dark .MyBusiness-LogoBox {
    background-color: #0F141A; /* Dark=#0F141A */
}

.dark .MyBusiness-ItemTitle {
    color: #FFFFFF; /* Dark=White */
}

.dark .MyBusiness-EyeIcon,
.dark .MyBusiness-ViewText {
    color: #A7B0BC; /* Dark=#A7B0BC */
}

.dark .MyBusiness-ArrowBox {
    background-color: #1F2937; /* Dark=#1F2937 */
    color: #A5B4FC; /* Dark=#A5B4FC */
}

    .dark .MyBusiness-ArrowBox:hover {
        background-color: #374151;
    }

/* ======================================= */
/* ==================== OneBusinessView Page */
/* ======================================= */

/* ============ Light (Default) ============ */

.OneBusinessView-Page {
    background-color: #F2F3F5; /* Light=#F2F3F5 */
    min-height: 100vh;
}

/* 1. Cover Section */
.OneBusinessView-CoverSection {
    height: 350px;
    width: 100%;
    overflow: hidden;
}

.OneBusinessView-CoverImage {
    height: 100%;
    width: 100%;
}

.OneBusinessView-BackBtn {
    top: 12px;
    right: 12px; /* RTL Start */
    background-color: rgba(0, 0, 0, 0.5); /* #80000000 */
    color: #FFFFFF;
    padding: 8px 12px;
    border-radius: 12px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    transition: background-color 0.2s;
}

    .OneBusinessView-BackBtn:hover {
        background-color: rgba(0, 0, 0, 0.7);
        color: #FFFFFF;
    }

    .OneBusinessView-BackBtn i {
        font-size: 16px;
    }

/* 2. Info Card (Overlap) */
.OneBusinessView-InfoCard {
    margin-top: -30px; /* Negative margin to overlap cover */
    background-color: #FFFFFF; /* Light=White */
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.13); /* Shadow Brush #22000000 */
    position: relative;
    z-index: 2;
    max-width: 800px; /* Limit width on desktop */
}

.OneBusinessView-LogoBox {
    width: 52px;
    height: 52px;
    background-color: #F3F4F6; /* Light=#F3F4F6 */
    border: 1px solid #E5E7EB; /* Light=#E5E7EB */
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
}

.OneBusinessView-Name {
    font-family: 'Cairo', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #111827; /* Light=#111827 */
}

.OneBusinessView-SubInfo {
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: #6B7280; /* Light=#6B7280 */
}

    .OneBusinessView-SubInfo i {
        font-size: 14px;
    }

/* 3. Actions Grid */
.OneBusinessView-ActionsContainer {
    background-color: #FFFFFF; /* Light=White */
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.13);
}

.OneBusinessView-ActionBtn {
    background-color: #F3F4F6; /* Light=#F3F4F6 */
    border-radius: 14px;
    transition: transform 0.2s, background-color 0.2s;
    border: none;
    height: 52px; /* Fixed height like MAUI */
}

    .OneBusinessView-ActionBtn:hover {
        transform: translateY(-2px);
        background-color: #e5e7eb;
    }

    .OneBusinessView-ActionBtn:active {
        opacity: 0.7; /* TouchBehavior PressedOpacity */
    }

.OneBusinessView-BtnText {
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #111827; /* Light=#111827 */
}

/* Icon Colors (Light) */
.OneBusinessView-Icon-Teal {
    color: #0F766E;
    font-size: 18px;
}

.OneBusinessView-Icon-Blue {
    color: #0369A1;
    font-size: 18px;
}

.OneBusinessView-Icon-Indigo {
    color: #3730A3;
    font-size: 18px;
}

.OneBusinessView-Icon-Rose {
    color: #BE123C;
    font-size: 18px;
}

.OneBusinessView-Icon-Orange {
    color: #C2410C;
    font-size: 18px;
}

.OneBusinessView-Icon-Emerald {
    color: #047857;
    font-size: 18px;
}


/* ============ dark ============ */

.dark .OneBusinessView-Page {
    background-color: #0F0F10; /* Dark=#0F0F10 */
}

/* 2. Info Card Dark */
.dark .OneBusinessView-InfoCard {
    background-color: #141B23; /* Dark=#141B23 */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.dark .OneBusinessView-LogoBox {
    background-color: #0F141A; /* Dark=#0F141A */
    border-color: #223041; /* Dark=#223041 */
}

.dark .OneBusinessView-Name {
    color: #FFFFFF; /* Dark=White */
}

.dark .OneBusinessView-SubInfo {
    color: #A7B0BC; /* Dark=#A7B0BC */
}

/* 3. Actions Grid Dark */
.dark .OneBusinessView-ActionsContainer {
    background-color: #141B23; /* Dark=#141B23 */
}

.dark .OneBusinessView-ActionBtn {
    background-color: #0F141A; /* Dark=#0F141A */
}

    .dark .OneBusinessView-ActionBtn:hover {
        background-color: #1a232e;
    }

.dark .OneBusinessView-BtnText {
    color: #FFFFFF; /* Dark=White */
}

/* Icon Colors (Dark) */
.dark .OneBusinessView-Icon-Teal {
    color: #5EEAD4;
}

.dark .OneBusinessView-Icon-Blue {
    color: #93C5FD;
}

.dark .OneBusinessView-Icon-Indigo {
    color: #A5B4FC;
}

.dark .OneBusinessView-Icon-Rose {
    color: #FDA4AF;
}

.dark .OneBusinessView-Icon-Orange {
    color: #FDBA74;
}

.dark .OneBusinessView-Icon-Emerald {
    color: #34D399;
}
/* ======================================= */
/* ==================== EditBusinessData Page */
/* ======================================= */

/* ============ Light (Default) ============ */

.EditBusinessData-Page {
    background-color: #F6F7F9; /* Light=#F6F7F9 */
    min-height: 100vh;
}

/* 1. Header */
.EditBusinessData-HeaderCard {
    background-color: #FFFFFF; /* Light=White */
    border-radius: 18px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.EditBusinessData-IconBadge {
    width: 42px;
    height: 42px;
    background-color: #EEF2FF; /* Light=#EEF2FF */
    border-radius: 16px;
    color: #3730A3; /* Light=#3730A3 */
    font-size: 20px;
}

.EditBusinessData-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #111827; /* Light=#111827 */
}

.EditBusinessData-Subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280; /* Light=#6B7280 */
}

/* 2. Form Card */
.EditBusinessData-FormCard {
    background-color: #FFFFFF; /* Light=White */
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.EditBusinessData-SectionTitle {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #111827; /* Light=#111827 */
}

/* Icons for Sections */
.EditBusinessData-SectionIcon-Blue {
    color: #2563EB;
    font-size: 14px;
}

.EditBusinessData-SectionIcon-Green {
    color: #059669;
    font-size: 14px;
}

.EditBusinessData-SectionIcon-Orange {
    color: #F97316;
    font-size: 14px;
}

.EditBusinessData-SectionIcon-Sky {
    color: #0EA5E9;
    font-size: 14px;
}

/* Inputs & Labels */
.EditBusinessData-Label {
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: #4B5563; /* Light=#4B5563 */
    margin-bottom: 6px;
}

.EditBusinessData-Input {
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    border-radius: 8px; /* تقريبي لتصميم الماوي */
    border: 1px solid #D1D5DB;
    padding: 10px;
}

    .EditBusinessData-Input:focus {
        border-color: #3730A3;
        box-shadow: 0 0 0 3px rgba(55, 48, 163, 0.1);
    }

.EditBusinessData-Divider {
    background-color: #E5E7EB; /* Light=#E5E7EB */
    opacity: 0.8;
}

/* Map Button */
.EditBusinessData-MapBtn {
    background-color: #FF8C00; /* Orange */
    border: none;
    border-radius: 12px;
    height: 44px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
}

    .EditBusinessData-MapBtn:hover {
        background-color: #e67e00;
        color: white;
    }

/* Save Button */
.EditBusinessData-SaveBtn {
    background-color: #008080; /* Teal */
    color: white;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 15px;
    height: 50px;
    border-radius: 16px;
    transition: background-color 0.2s;
}

    .EditBusinessData-SaveBtn:hover {
        background-color: #006666;
        color: white;
    }

/* ============ dark ============ */

.dark .EditBusinessData-Page {
    background-color: #0F141A; /* Dark=#0F141A */
}

/* Header Dark */
.dark .EditBusinessData-HeaderCard {
    background-color: #141B23; /* Dark=#141B23 */
    color: white;
}

.dark .EditBusinessData-IconBadge {
    background-color: #1F2937; /* Dark=#1F2937 */
    color: #A5B4FC; /* Dark=#A5B4FC */
}

.dark .EditBusinessData-Title {
    color: #FFFFFF; /* Dark=White */
}

.dark .EditBusinessData-Subtitle {
    color: #A7B0BC; /* Dark=#A7B0BC */
}

/* Form Dark */
.dark .EditBusinessData-FormCard {
    background-color: #141B23; /* Dark=#141B23 */
}

.dark .EditBusinessData-SectionTitle {
    color: #FFFFFF; /* Dark=White */
}

.dark .EditBusinessData-SectionIcon-Blue {
    color: #60A5FA;
}

.dark .EditBusinessData-SectionIcon-Green {
    color: #6EE7B7;
}

.dark .EditBusinessData-SectionIcon-Orange {
    color: #FDBA74;
}

.dark .EditBusinessData-SectionIcon-Sky {
    color: #7DD3FC;
}

.dark .EditBusinessData-Label {
    color: #D1D5DB; /* Dark=#D1D5DB */
}

.dark .EditBusinessData-Input {
    background-color: #0F141A; /* Dark bg for inputs */
    border-color: #374151;
    color: #FFFFFF;
}

    .dark .EditBusinessData-Input:focus {
        border-color: #A5B4FC;
        background-color: #1a232e;
    }

.dark .EditBusinessData-Divider {
    background-color: #223041; /* Dark=#223041 */
}

/* Buttons Dark */
.dark .EditBusinessData-SaveBtn {
    /* Teal matches well in dark usually, or adjust brightness */
    opacity: 0.9;
}
/* ==================== Map Modal CSS ==================== */

/* ارتفاع الخريطة */
.EditBusinessData-MapContainer {
    height: 400px;
    width: 100%;
    z-index: 1;
}

/* Modal Styling Light */
.EditBusinessData-ModalContent {
    border-radius: 18px;
    border: none;
    overflow: hidden; /* ليأخذ الهيدر الفوتر الانحناء */
}

.EditBusinessData-ModalTitle {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.EditBusinessData-ConfirmBtn {
    background-color: #008080; /* Teal */
    border: none;
    font-family: 'Cairo', sans-serif;
}

    .EditBusinessData-ConfirmBtn:hover {
        background-color: #006666;
    }

.EditBusinessData-CancelBtn {
    font-family: 'Cairo', sans-serif;
}


/* ============ dark Mode for Modal ============ */

.dark .EditBusinessData-ModalContent {
    background-color: #141B23; /* Dark Background */
    color: #FFFFFF;
}

.dark .EditBusinessData-ModalTitle {
    color: #FFFFFF;
}

.dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* جعل زر الإغلاق أبيض */
}

/* (اختياري) تعتيم الخريطة قليلاً في الوضع الليلي لتريح العين */
.dark .leaflet-layer,
.dark .leaflet-control-zoom-in,
.dark .leaflet-control-zoom-out,
.dark .leaflet-control-attribution {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
/* ======================================= */
/* ==================== AddBusiness Page */
/* ======================================= */

/* ============ Light (Default) ============ */

.AddBusiness-Page {
    background-color: #F6F7F9; /* Light=#F6F7F9 */
    min-height: 100vh;
}

/* Card */
.AddBusiness-Card {
    background-color: #FFFFFF; /* Light=White */
    border: 1px solid #E5E7EB; /* Light=#E5E7EB */
    border-radius: 14px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.AddBusiness-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

/* Inputs */
.AddBusiness-Label {
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

.AddBusiness-Input {
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    padding: 10px;
}

    .AddBusiness-Input:focus {
        border-color: #3730A3;
        box-shadow: 0 0 0 3px rgba(55, 48, 163, 0.1);
    }

/* Map Info Box */
.AddBusiness-MapInfoBox {
    background-color: #D1E7DD;
    border: 1px solid #BADBCC;
    border-radius: 10px;
    color: #0F5132;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
}

.AddBusiness-MapBtn {
    background-color: #FF8C00; /* Orange */
    border: none;
    border-radius: 12px;
    height: 44px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

    .AddBusiness-MapBtn:hover {
        background-color: #e67e00;
        color: white;
    }

/* Action Buttons */
.AddBusiness-Btn {
    border-radius: 12px; /* كما في الماوي */
    padding: 12px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 15px;
}

.btn-teal {
    background-color: #008080; /* Teal */
    color: white;
}

    .btn-teal:hover {
        background-color: #006666;
        color: white;
    }


/* ============ Map Modal (Scoped) ============ */
.AddBusiness-ModalContent {
    border-radius: 18px;
    border: none;
    overflow: hidden;
}

.AddBusiness-ModalTitle {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.AddBusiness-ConfirmBtn {
    background-color: #008080;
    border: none;
    font-family: 'Cairo', sans-serif;
}

.AddBusiness-CancelBtn {
    font-family: 'Cairo', sans-serif;
}


/* ============ dark ============ */

.dark .AddBusiness-Page {
    background-color: #0F141A; /* Dark=#0F141A */
}

.dark .AddBusiness-Card {
    background-color: #1A1A1A; /* Dark=#1A1A1A */
    border-color: #222;
    color: white;
}

.dark .AddBusiness-Title {
    color: white;
    border-bottom-color: #333 !important;
}

.dark .AddBusiness-Label {
    color: white;
}

.dark .AddBusiness-Input {
    background-color: #262626;
    border-color: #444;
    color: white;
}

    .dark .AddBusiness-Input:focus {
        border-color: #A5B4FC;
        background-color: #333;
    }

/* Map Dark */
.dark .AddBusiness-MapInfoBox {
    background-color: #1F2937;
    border-color: #374151;
    color: #A5B4FC;
}

/* Modal Dark */
.dark .AddBusiness-ModalContent {
    background-color: #1A1A1A;
    color: white;
}

.dark .AddBusiness-ModalTitle {
    color: white;
}

.dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
/* ======================================= */
/* ==================== WorkDayEdit Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.WorkDayEdit-Page {
    background-color: #F6F7F9; /* Light=#F6F7F9 */
    min-height: 100vh;
}

/* Header */
.WorkDayEdit-HeaderCard {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.WorkDayEdit-IconBadge {
    width: 42px;
    height: 42px;
    background-color: #ECFDF5; /* Teal-ish Light */
    border-radius: 16px;
    color: #047857;
    font-size: 20px;
}

.WorkDayEdit-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.WorkDayEdit-Subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280;
}

/* Day Card */
.WorkDayEdit-DayCard {
    border: 1px solid #E5E7EB;
}

.WorkDayEdit-TextPrimary {
    color: #111827;
}

/* Slot Chips */
.slot-chip {
    transition: background-color 0.2s;
    border: 1px solid #E5E7EB;
}

    .slot-chip:hover {
        background-color: #E5E7EB !important; /* Darken slightly */
    }

/* Buttons */
.btn-light-teal {
    background-color: #ECFDF5;
    color: #047857;
    border: none;
    border-radius: 12px;
}

    .btn-light-teal:hover {
        background-color: #d1fae5;
        color: #047857;
    }

.WorkDayEdit-SaveBtn {
    border-radius: 14px;
    padding: 12px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
}

/* Modal */
.WorkDayEdit-ModalContent {
    border-radius: 18px;
}

.WorkDayEdit-ModalTitle {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
}

.WorkDayEdit-Input {
    border-radius: 8px;
    border-color: #D1D5DB;
}

.btn-text-secondary {
    color: #6B7280;
    font-family: 'Cairo', sans-serif;
}

.btn-text-danger {
    color: #DC2626;
    font-family: 'Cairo', sans-serif;
}


/* ============ dark ============ */

.dark .WorkDayEdit-Page {
    background-color: #0F141A;
}

.dark .WorkDayEdit-HeaderCard {
    background-color: #141B23;
    color: white;
}

.dark .WorkDayEdit-IconBadge {
    background-color: #064E3B; /* Darker Teal */
    color: #34D399;
}

.dark .WorkDayEdit-Title {
    color: white;
}

.dark .WorkDayEdit-Subtitle {
    color: #A7B0BC;
}

.dark .WorkDayEdit-DayCard {
    background-color: #141B23 !important; /* Override bootstrap bg-white */
    border-color: #223041;
}

.dark .WorkDayEdit-TextPrimary {
    color: white;
}

.dark .slot-chip {
    background-color: #0F141A !important;
    border-color: #223041;
    color: #E5E7EB;
}

    .dark .slot-chip:hover {
        background-color: #1F2937 !important;
    }

.dark .btn-light-teal {
    background-color: #062B1F;
    color: #34D399;
}

.dark .WorkDayEdit-ModalContent {
    background-color: #141B23;
    color: white;
}

.dark .WorkDayEdit-ModalTitle {
    color: white;
}

.dark .WorkDayEdit-Input {
    background-color: #1F2937;
    border-color: #374151;
    color: white;
}

.dark .btn-close {
    filter: invert(1);
}
/* ======================================= */
/* ==================== SocialMedia Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.SocialMedia-Page {
    background-color: #F6F7F9;
    min-height: 100vh;
}

/* Header */
.SocialMedia-HeaderCard {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.SocialMedia-IconBadge {
    width: 42px;
    height: 42px;
    background-color: #E0F2FE; /* Sky Light */
    border-radius: 16px;
    color: #0369A1;
    font-size: 20px;
}

.SocialMedia-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.SocialMedia-Subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280;
}

/* Cards */
.SocialMedia-Card {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.SocialMedia-SectionTitle {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

/* Form */
.SocialMedia-Label {
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    color: #4B5563;
}

.SocialMedia-Input {
    border-radius: 12px;
    background-color: #F3F4F6;
    border: 1px solid transparent;
    padding: 10px 15px;
    font-family: 'Cairo', sans-serif;
}

    .SocialMedia-Input:focus {
        background-color: #FFFFFF;
        border-color: #3730A3;
        box-shadow: none;
    }

.SocialMedia-Btn {
    border-radius: 14px;
    padding: 10px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
}

/* List Items */
.SocialMedia-Item {
    border-color: #E5E7EB !important;
    transition: background-color 0.2s;
}

    .SocialMedia-Item:hover {
        background-color: #F9FAFB;
    }

.btn-light-danger {
    background-color: #FEE2E2;
    color: #B91C1C;
    border: none;
}

    .btn-light-danger:hover {
        background-color: #FCA5A5;
        color: #7F1D1D;
    }


/* ============ dark ============ */
.dark .SocialMedia-Page {
    background-color: #0F141A;
}

.dark .SocialMedia-HeaderCard {
    background-color: #141B23;
    color: white;
}

.dark .SocialMedia-IconBadge {
    background-color: #0B2239;
    color: #93C5FD;
}

.dark .SocialMedia-Title {
    color: white;
}

.dark .SocialMedia-Subtitle {
    color: #A7B0BC;
}

.dark .SocialMedia-Card {
    background-color: #141B23;
    color: white;
}

.dark .SocialMedia-SectionTitle {
    color: white;
}

.dark .SocialMedia-Label {
    color: #D1D5DB;
}

.dark .SocialMedia-Input {
    background-color: #1F2A37;
    color: white;
}

    .dark .SocialMedia-Input:focus {
        background-color: #374151;
        border-color: #A5B4FC;
    }

.dark .SocialMedia-Item {
    border-color: #223041 !important;
}

    .dark .SocialMedia-Item:hover {
        background-color: #1F2937;
    }

.dark h6.text-dark {
    color: white !important;
}

.dark .btn-light-danger {
    background-color: #2B0B12;
    color: #FDA4AF;
}

    .dark .btn-light-danger:hover {
        background-color: #4C0519;
    }
/* ============ Back Button Style ============ */

/* Light Mode */
.SocialMedia-BackBtn {
    width: 42px;
    height: 42px;
    background-color: #F3F4F6; /* Gray-100 */
    border-radius: 12px;
    color: #374151; /* Gray-700 */
    font-size: 18px;
    transition: background-color 0.2s, color 0.2s;
}

    .SocialMedia-BackBtn:hover {
        background-color: #E5E7EB; /* Gray-200 */
        color: #111827;
    }

/* Dark Mode */
.dark .SocialMedia-BackBtn {
    background-color: #1F2937; /* Gray-800 */
    color: #D1D5DB; /* Gray-300 */
}

    .dark .SocialMedia-BackBtn:hover {
        background-color: #374151; /* Gray-700 */
        color: #FFFFFF;
    }
/* ======================================= */
/* ==================== Albums Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.Albums-Page {
    background-color: #F6F7F9;
    min-height: 100vh;
}

/* Header */
.Albums-HeaderCard {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.Albums-IconBadge {
    width: 42px;
    height: 42px;
    background-color: #FCE7F3; /* Pink Light for albums */
    border-radius: 16px;
    color: #BE123C;
    font-size: 20px;
}

.Albums-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.Albums-Subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280;
}

/* Back Button */
.Albums-BackBtn {
    width: 42px;
    height: 42px;
    background-color: #F3F4F6;
    border-radius: 12px;
    color: #374151;
    font-size: 18px;
    transition: 0.2s;
}

    .Albums-BackBtn:hover {
        background-color: #E5E7EB;
        color: #111827;
    }

/* Usage Card */
.Albums-UsageCard {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.Albums-UsageBadge {
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
}

.bg-light-teal {
    background-color: #ECFDF5;
}

.text-teal {
    color: #047857;
}

.bg-light-danger {
    background-color: #FEF2F2;
}

.text-danger {
    color: #DC2626;
}

/* Album Item Card */
.Albums-ItemCard {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    transition: transform 0.2s;
}

    .Albums-ItemCard:hover {
        transform: translateY(-4px);
    }

.Albums-CoverBox {
    height: 140px; /* Equivalent to 120 in Maui but bigger for web */
    background-color: #F3F4F6;
}

.Albums-CountBadge {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

.Albums-ItemTitle {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.Albums-ItemDesc {
    font-family: 'Cairo', sans-serif;
    color: #6B7280;
}

/* Add New Card */
.Albums-AddCard {
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px dashed #D1D5DB;
    border-radius: 18px;
    min-height: 220px; /* To match album card height approx */
    transition: 0.2s;
}

    .Albums-AddCard:hover {
        background-color: #FFFFFF;
        border-color: #008080;
    }

.Albums-AddIcon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #008080;
    color: white;
    font-size: 20px;
}


/* ============ dark ============ */

.dark .Albums-Page {
    background-color: #0F141A;
}

.dark .Albums-HeaderCard {
    background-color: #141B23;
    color: white;
}

.dark .Albums-IconBadge {
    background-color: #3B0F18;
    color: #FDA4AF;
}

.dark .Albums-Title {
    color: white;
}

.dark .Albums-Subtitle {
    color: #A7B0BC;
}

.dark .Albums-BackBtn {
    background-color: #1F2937;
    color: #D1D5DB;
}

    .dark .Albums-BackBtn:hover {
        background-color: #374151;
        color: white;
    }

.dark .Albums-UsageCard {
    background-color: #141B23;
    color: white;
}

.dark .bg-light-teal {
    background-color: #062B1F;
    color: #34D399;
}

.dark .bg-light-danger {
    background-color: #450A0A;
    color: #FECACA;
}

.dark .Albums-ItemCard {
    background-color: #141B23;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.dark .Albums-CoverBox {
    background-color: #0F141A;
}

.dark .Albums-ItemTitle {
    color: white;
}

.dark .Albums-ItemDesc {
    color: #A7B0BC;
}

.dark .Albums-AddCard {
    border-color: #374151;
    background-color: rgba(20, 27, 35, 0.5);
}

    .dark .Albums-AddCard:hover {
        background-color: #141B23;
        border-color: #34D399;
    }
/* ======================================= */
/* ==================== Photos Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.Photos-Page {
    background-color: #F6F7F9;
    min-height: 100vh;
}

/* Header */
.Photos-HeaderCard {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.Photos-IconBadge {
    width: 42px;
    height: 42px;
    background-color: #F3E8FF; /* Purple Light */
    border-radius: 16px;
    color: #9333EA;
    font-size: 20px;
}

.Photos-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.Photos-Subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280;
}

/* Back Button */
.Photos-BackBtn {
    width: 42px;
    height: 42px;
    background-color: #F3F4F6;
    border-radius: 12px;
    color: #374151;
    font-size: 18px;
    transition: 0.2s;
}

    .Photos-BackBtn:hover {
        background-color: #E5E7EB;
        color: #111827;
    }

/* Usage Badge */
.Photos-UsageBadge {
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
}

.bg-light-teal {
    background-color: #ECFDF5;
}

.text-teal {
    color: #047857;
}

.bg-light-danger {
    background-color: #FEF2F2;
}

.text-danger {
    color: #DC2626;
}

/* Photo Item Card */
.Photos-ItemCard {
    background-color: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.2s;
    border: 1px solid #E5E7EB;
}

    .Photos-ItemCard:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

.Photos-ImageBox {
    height: 150px;
    background-color: #F3F4F6;
    cursor: zoom-in;
}

.x-small {
    font-size: 10px;
}

/* Upload Card */
.Photos-AddCard {
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px dashed #D1D5DB;
    border-radius: 14px;
    min-height: 205px; /* Adjust to match photo item height approx */
    transition: 0.2s;
}

    .Photos-AddCard:hover {
        background-color: #FFFFFF;
        border-color: #008080;
    }

.Photos-AddIcon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #008080;
    color: white;
    font-size: 20px;
}

/* Delete Button */
.btn-light-danger {
    background-color: #FEE2E2;
    color: #B91C1C;
    border: none;
    width: 32px;
    height: 32px;
}

    .btn-light-danger:hover {
        background-color: #FCA5A5;
        color: #7F1D1D;
    }


/* ============ dark ============ */

.dark .Photos-Page {
    background-color: #0F141A;
}

.dark .Photos-HeaderCard {
    background-color: #141B23;
    color: white;
}

.dark .Photos-IconBadge {
    background-color: #3B0764;
    color: #D8B4FE;
}

.dark .Photos-Title {
    color: white;
}

.dark .Photos-Subtitle {
    color: #A7B0BC;
}

.dark .Photos-BackBtn {
    background-color: #1F2937;
    color: #D1D5DB;
}

    .dark .Photos-BackBtn:hover {
        background-color: #374151;
        color: white;
    }

.dark .bg-light-teal {
    background-color: #062B1F;
    color: #34D399;
}

.dark .bg-light-danger {
    background-color: #450A0A;
    color: #FECACA;
}

.dark .Photos-ItemCard {
    background-color: #141B23;
    border-color: #223041;
}

    .dark .Photos-ItemCard:hover {
        background-color: #1F2937;
    }

.dark .Photos-ImageBox {
    background-color: #0F141A;
}

.dark .Photos-ItemCard .bg-white {
    background-color: #141B23 !important;
    border-top-color: #223041 !important;
}

.dark .Photos-ItemCard .text-dark {
    color: white !important;
}

.dark .Photos-AddCard {
    border-color: #374151;
    background-color: rgba(20, 27, 35, 0.5);
}

    .dark .Photos-AddCard:hover {
        background-color: #141B23;
        border-color: #34D399;
    }

.dark .btn-light-danger {
    background-color: #2B0B12;
    color: #FDA4AF;
}

    .dark .btn-light-danger:hover {
        background-color: #4C0519;
    }
/* ======================================= */
/* ==================== Upgrade Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.Upgrade-Page {
    background-color: #F6F7F9;
    min-height: 100vh;
}

/* Header */
.Upgrade-HeaderCard {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.Upgrade-IconBadge {
    width: 42px;
    height: 42px;
    background-color: #FEF3C7; /* Amber Light */
    border-radius: 16px;
    color: #D97706;
    font-size: 20px;
}

.Upgrade-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.Upgrade-Subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280;
}

/* Back Button */
.Upgrade-BackBtn {
    width: 42px;
    height: 42px;
    background-color: #F3F4F6;
    border-radius: 12px;
    color: #374151;
    font-size: 18px;
    transition: 0.2s;
}

    .Upgrade-BackBtn:hover {
        background-color: #E5E7EB;
        color: #111827;
    }

/* Cards */
.Upgrade-Card {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.Upgrade-CurrentCard {
    background-color: #008080; /* Teal Primary */
    border-radius: 18px;
    box-shadow: 0 4px 10px rgba(0,128,128,0.3);
}

.Upgrade-SectionTitle {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

/* Plan Selection Box */
.Upgrade-PlanBox {
    transition: 0.2s;
    background-color: #FFFFFF;
    border-color: #E5E7EB;
}

    .Upgrade-PlanBox:hover {
        border-color: #0EA5E9; /* Sky Blue on hover */
        background-color: #F0F9FF;
    }

.bg-light-primary {
    background-color: #F0F9FF !important; /* Light Sky */
}

.bg-light-success {
    background-color: #ECFDF5 !important; /* Light Green for Current Plan */
}

.border-primary {
    border-color: #0EA5E9 !important;
}

.Upgrade-PlanRadio input:checked + .Upgrade-PlanBox {
    /* Styles handled by JS class toggling for border/bg */
}

/* Inputs */
.Upgrade-Input {
    border-radius: 10px;
    background-color: #F9FAFB;
    border: 1px solid #D1D5DB;
    padding: 10px 14px;
    font-family: 'Cairo', sans-serif;
}

    .Upgrade-Input:focus {
        background-color: #FFFFFF;
        border-color: #008080;
        box-shadow: 0 0 0 3px rgba(0,128,128,0.1);
    }

.btn-teal {
    background-color: #008080;
    color: white;
    transition: 0.2s;
}

    .btn-teal:hover {
        background-color: #006666;
        color: white;
    }

    .btn-teal:disabled {
        background-color: #A3CFCF;
    }

.btn-light-teal {
    background-color: #ECFDF5;
    color: #047857;
    border: none;
}

    .btn-light-teal:hover {
        background-color: #D1FAE5;
    }

.num-to-copy {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
}


/* ============ dark ============ */

.dark .Upgrade-Page {
    background-color: #0F141A;
}

.dark .Upgrade-HeaderCard {
    background-color: #141B23;
    color: white;
}

.dark .Upgrade-IconBadge {
    background-color: #451A03;
    color: #FCD34D;
}

.dark .Upgrade-Title {
    color: white;
}

.dark .Upgrade-Subtitle {
    color: #A7B0BC;
}

.dark .Upgrade-BackBtn {
    background-color: #1F2937;
    color: #D1D5DB;
}

    .dark .Upgrade-BackBtn:hover {
        background-color: #374151;
        color: white;
    }

.dark .Upgrade-Card {
    background-color: #141B23;
    color: white;
}

.dark .Upgrade-CurrentCard {
    background-color: #141B23; /* Or keep teal but darker */
    border: 1px solid #008080;
}

.dark .Upgrade-SectionTitle {
    color: white;
}

.dark .Upgrade-PlanBox {
    background-color: #1F2937;
    border-color: #374151;
    color: white;
}

    .dark .Upgrade-PlanBox:hover {
        background-color: #0F141A;
        border-color: #0EA5E9;
    }

.dark .bg-light-primary {
    background-color: #0C4A6E !important; /* Dark Sky */
}

.dark .bg-light-success {
    background-color: #064E3B !important; /* Dark Green */
}

.dark .Upgrade-Input {
    background-color: #1F2937;
    border-color: #374151;
    color: white;
}

    .dark .Upgrade-Input:focus {
        background-color: #111827;
        border-color: #2DD4BF;
    }

.dark .bg-light {
    background-color: #1F2937 !important;
}

.dark .text-dark {
    color: white !important;
}

/* ======================================= */
/* ==================== QR Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.Qr-Page {
    background-color: #F6F7F9;
    min-height: 100vh;
}

/* Header */
.Qr-HeaderCard {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.Qr-IconBadge {
    width: 42px;
    height: 42px;
    background-color: #E0E7FF; /* Indigo Light */
    border-radius: 16px;
    color: #4338CA;
    font-size: 20px;
}

.Qr-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.Qr-Subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280;
}

/* Back Button */
.Qr-BackBtn {
    width: 42px;
    height: 42px;
    background-color: #F3F4F6;
    border-radius: 12px;
    color: #374151;
    font-size: 18px;
    transition: 0.2s;
}

    .Qr-BackBtn:hover {
        background-color: #E5E7EB;
        color: #111827;
    }

/* Main Card */
.Qr-Card {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.Qr-Container {
    border: 1px solid #E5E7EB;
}

/* Center Logo styling if needed manually */
.Qr-CenterLogo {
    width: 50px;
    height: 50px;
    background-color: white;
    padding: 2px;
    border-radius: 8px;
}

.btn-teal {
    background-color: #008080;
    color: white;
    transition: 0.2s;
}

    .btn-teal:hover {
        background-color: #006666;
        color: white;
    }

.x-small {
    font-size: 11px;
}


/* ============ dark ============ */

.dark .Qr-Page {
    background-color: #0F141A;
}

.dark .Qr-HeaderCard {
    background-color: #141B23;
    color: white;
}

.dark .Qr-IconBadge {
    background-color: #312E81;
    color: #A5B4FC;
}

.dark .Qr-Title {
    color: white;
}

.dark .Qr-Subtitle {
    color: #A7B0BC;
}

.dark .Qr-BackBtn {
    background-color: #1F2937;
    color: #D1D5DB;
}

    .dark .Qr-BackBtn:hover {
        background-color: #374151;
        color: white;
    }

.dark .Qr-Card {
    background-color: #141B23;
    color: white;
}

.dark .text-dark {
    color: white !important;
}

.dark .Qr-Container {
    border-color: #374151;
    /* QR background stays white usually for scanability */
}

/* ======================================= */
/* ==================== Statistics Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.Stats-Page {
    background-color: #F6F7F9;
    min-height: 100vh;
}

/* Header */
.Stats-HeaderCard {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.Stats-IconBadge {
    width: 44px;
    height: 44px;
    background-color: #E0F2FE; /* Sky Light */
    border-radius: 16px;
    color: #0369A1;
    font-size: 18px;
}

.Stats-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.Stats-Subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280;
}

/* Back Button */
.Stats-BackBtn {
    width: 42px;
    height: 42px;
    background-color: #F3F4F6;
    border-radius: 12px;
    color: #374151;
    font-size: 18px;
    transition: 0.2s;
}

    .Stats-BackBtn:hover {
        background-color: #E5E7EB;
        color: #111827;
    }

/* Cards */
.Stats-Card {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: transform 0.2s;
    height: 100%; /* For grid uniformity */
}

    .Stats-Card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    }

/* Icons */
.Stats-ItemIcon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.Stats-Label {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280;
}

.Stats-Value {
    font-family: 'Cairo', sans-serif;
    font-size: 18px;
    font-weight: 700;
}

/* Colors */



/* ============ dark ============ */

.dark .Stats-Page {
    background-color: #0F141A;
}

.dark .Stats-HeaderCard {
    background-color: #141B23;
    color: white;
}

.dark .Stats-IconBadge {
    background-color: #0B2239;
    color: #93C5FD;
}

.dark .Stats-Title {
    color: white;
}

.dark .Stats-Subtitle {
    color: #A7B0BC;
}

.dark .Stats-BackBtn {
    background-color: #1F2937;
    color: #D1D5DB;
}

    .dark .Stats-BackBtn:hover {
        background-color: #374151;
        color: white;
    }

.dark .Stats-Card {
    background-color: #141B23;
    color: white;
}

.dark .Stats-Label {
    color: #A7B0BC;
}

.dark .Stats-Value {
    color: white !important;
}
/* ======================================= */
/* ==================== OffersAdmin Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.OffersAdmin-Page {
    background-color: #F6F7F9;
    min-height: 100vh;
}

/* Header */
.OffersAdmin-HeaderCard {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.OffersAdmin-IconBadge {
    width: 44px;
    height: 44px;
    background-color: #FFF7ED; /* Orange Light */
    border-radius: 16px;
    color: #C2410C;
    font-size: 18px;
}

.OffersAdmin-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.OffersAdmin-Subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280;
}

.OffersAdmin-BackBtn {
    width: 42px;
    height: 42px;
    background-color: #F3F4F6;
    border-radius: 12px;
    color: #374151;
    font-size: 18px;
}

    .OffersAdmin-BackBtn:hover {
        background-color: #E5E7EB;
        color: #111827;
    }

/* Usage Card */
.OffersAdmin-Card {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.divide-cols > div:not(:last-child) {
    border-left: 1px solid #E5E7EB; /* RTL divide */
}

/* Tabs */
.OffersAdmin-Tabs .nav-link {
    border-radius: 12px;
    padding: 10px;
    margin: 0 5px;
    color: #4B5563;
    background-color: #E5E7EB;
    transition: 0.2s;
}

    .OffersAdmin-Tabs .nav-link.active {
        background-color: #2563EB;
        color: white;
    }

/* Item Card */
.OffersAdmin-ItemCard {
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    border-color: #E5E7EB !important;
    transition: 0.2s;
}

    .OffersAdmin-ItemCard:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

.OffersAdmin-ImgBox {
    width: 90px;
    height: 70px;
    background-color: #F3F4F6;
    border-radius: 12px;
}

/* Add Card */
.OffersAdmin-AddCard {
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px dashed #D1D5DB;
    border-radius: 18px;
    min-height: 110px;
    transition: 0.2s;
}

    .OffersAdmin-AddCard:hover {
        background-color: #FFFFFF;
        border-color: #FF8C00;
    }

.OffersAdmin-AddIcon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FF8C00;
    color: white;
    font-size: 18px;
}

/* Modal */
.OffersAdmin-ModalContent {
    border-radius: 18px;
}

.OffersAdmin-Input {
    background-color: #F9FAFB;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    padding: 10px;
    font-family: 'Cairo', sans-serif;
}

/* Buttons Colors */
.btn-light-indigo {
    background-color: #EEF2FF;
}

.text-indigo {
    color: #4338CA;
}

.btn-light-indigo:hover {
    background-color: #E0E7FF;
}

.btn-light-danger {
    background-color: #FEF2F2;
}

.text-danger {
    color: #DC2626;
}

.btn-light-danger:hover {
    background-color: #FEE2E2;
}


/* ============ dark ============ */

.dark .OffersAdmin-Page {
    background-color: #0F141A;
}

.dark .OffersAdmin-HeaderCard {
    background-color: #141B23;
    color: white;
}

.dark .OffersAdmin-IconBadge {
    background-color: #2B1806;
    color: #FDBA74;
}

.dark .OffersAdmin-Title {
    color: white;
}

.dark .OffersAdmin-Subtitle {
    color: #A7B0BC;
}

.dark .OffersAdmin-BackBtn {
    background-color: #1F2937;
    color: #D1D5DB;
}

    .dark .OffersAdmin-BackBtn:hover {
        background-color: #374151;
        color: white;
    }

.dark .OffersAdmin-Card {
    background-color: #141B23;
    color: white;
}

.dark .divide-cols > div:not(:last-child) {
    border-left-color: #223041;
}

.dark .text-dark {
    color: white !important;
}

.dark .OffersAdmin-Tabs .nav-link {
    background-color: #223041;
    color: #9CA3AF;
}

    .dark .OffersAdmin-Tabs .nav-link.active {
        background-color: #2563EB;
        color: white;
    }

.dark .OffersAdmin-ItemCard {
    background-color: #141B23 !important;
    border-color: #223041 !important;
}

.dark .OffersAdmin-ImgBox {
    background-color: #0F141A;
}

.dark .OffersAdmin-AddCard {
    border-color: #374151;
    background-color: rgba(20, 27, 35, 0.5);
}

    .dark .OffersAdmin-AddCard:hover {
        background-color: #141B23;
        border-color: #FF8C00;
    }

.dark .btn-light-indigo {
    background-color: #1F2937;
    color: #A5B4FC;
}

.dark .btn-light-danger {
    background-color: #2B0B12;
    color: #FDA4AF;
}

.dark .OffersAdmin-ModalContent {
    background-color: #141B23;
    color: white;
}

.dark .OffersAdmin-Input {
    background-color: #1F2937;
    border-color: #374151;
    color: white;
}
/* ======================================= */
/* ==================== Public Offers Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.PublicOffers-Page {
    background-color: #F6F7F9;
    min-height: 100vh;
}

/* Header */
.PublicOffers-HeaderCard {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.PublicOffers-IconBadge {
    width: 44px;
    height: 44px;
    background-color: #FFF7ED; /* Orange Light */
    border-radius: 16px;
    color: #C2410C;
    font-size: 18px;
}

.PublicOffers-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.PublicOffers-Subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280;
}

/* Tabs */
.PublicOffers-Tabs .nav-link {
    border-radius: 12px;
    padding: 12px;
    margin: 0 5px;
    color: #4B5563;
    background-color: #E5E7EB;
    transition: 0.2s;
}

    .PublicOffers-Tabs .nav-link.active {
        background-color: #2563EB;
        color: white;
    }

/* Offer List Card */
.PublicOffers-Card {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    border: 1px solid transparent;
    transition: transform 0.2s;
}

    .PublicOffers-Card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.06);
        border-color: #E5E7EB;
    }

.PublicOffers-ImgBox {
    width: 92px;
    height: 72px;
    background-color: #F3F4F6;
    border-radius: 16px;
}

.PublicOffers-Name {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.PublicOffers-ArrowBox {
    width: 42px;
    height: 42px;
    background-color: #EEF2FF;
    color: #3730A3;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* === Modal Styles === */
.PublicOffers-ModalContent {
    border: none;
    border-radius: 0;
}

.PublicOffers-CloseBtn {
    position: absolute;
    top: 20px;
    left: 20px; /* RTL -> Left */
    z-index: 1050;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.PublicOffers-ModalImgContainer {
    position: relative;
    background-color: #000; /* Black background for image area */
}

.PublicOffers-ZoomHint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.6);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    pointer-events: none;
}

.PublicOffers-DetailIcon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Colors */
.bg-light-teal {
    background-color: #ECFDF5;
}

.text-teal {
    color: #047857;
}

.bg-light-danger {
    background-color: #FEF2F2;
}

.text-danger {
    color: #DC2626;
}

.bg-light-primary {
    background-color: #EFF6FF;
}

.text-primary {
    color: #2563EB !important;
}


/* ============ dark ============ */

.dark .PublicOffers-Page {
    background-color: #0F141A;
}

.dark .PublicOffers-HeaderCard {
    background-color: #141B23;
    color: white;
}

.dark .PublicOffers-IconBadge {
    background-color: #2B1806;
    color: #FDBA74;
}

.dark .PublicOffers-Title {
    color: white;
}

.dark .PublicOffers-Subtitle {
    color: #A7B0BC;
}

.dark .PublicOffers-Tabs .nav-link {
    background-color: #223041;
    color: #9CA3AF;
}

    .dark .PublicOffers-Tabs .nav-link.active {
        background-color: #2563EB;
        color: white;
    }

.dark .PublicOffers-Card {
    background-color: #141B23;
    color: white;
}

.dark .PublicOffers-ImgBox {
    background-color: #0F141A;
}

.dark .PublicOffers-Name {
    color: white;
}

.dark .PublicOffers-ArrowBox {
    background-color: #1F2937;
    color: #A5B4FC;
}

/* Dark Modal */
.dark .PublicOffers-ModalContent .bg-white {
    background-color: #141B23 !important;
    color: white !important;
}

.dark .text-dark {
    color: white !important;
}

.dark .btn-close {
    filter: invert(1);
    background-color: rgba(0,0,0,0.5);
}
/* ======================================= */
/* ==================== MainCategory Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.Categories-Page {
    background-color: #F6F7F9;
    min-height: 100vh;
}

.Categories-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #0B2239;
}

/* Card Style */
.Categories-Card {
    background-color: #FFFFFF;
    border: 1px solid #E6E8EC;
    border-radius: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

    .Categories-Card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        border-color: #B85E2A; /* Highlight color from Maui title */
    }

/* Image */
.Categories-ImgBox {
    height: 180px; /* Increased slightly for web better look */
    background-color: #F3F4F6;
    border-bottom: 1px solid #E6E8EC;
}

/* Typography */
.Categories-ItemTitle {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #B85E2A; /* Orange/Brown from Maui */
}

.Categories-ItemDesc {
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #8C5A3C; /* Muted Brown from Maui */
    /* Limit lines if description is too long */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ============ dark ============ */

.dark .Categories-Page {
    background-color: #0F141A;
}

.dark .Categories-Title {
    color: white;
}

.dark .Categories-Card {
    background-color: #141B23;
    border-color: #223041;
}

    .dark .Categories-Card:hover {
        background-color: #1F2937;
        border-color: #FFB27A;
    }

.dark .Categories-ImgBox {
    background-color: #0F141A;
    border-bottom-color: #223041;
}

.dark .Categories-ItemTitle {
    color: #FFB27A;
}
/* Lighter Orange */
.dark .Categories-ItemDesc {
    color: #D0B8AA;
}

.dark .text-dark {
    color: white !important;
}

.dark .border-top {
    border-top-color: #223041 !important;
}
/* ======================================= */
/* ==================== SubCategory Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.SubCategory-Page {
    background-color: #F6F7F9;
    min-height: 100vh;
}

.SubCategory-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #0B2239;
}

/* Horizontal Tabs Scroll */
.SubCategory-TabsContainer {
    /* Hide scrollbar for cleaner look if desired */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

    .SubCategory-TabsContainer ::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

/* Tab Buttons */
.btn-subcat {
    background-color: #EEF2F6;
    color: #101828;
    border: none;
    border-radius: 14px;
    padding: 8px 16px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    white-space: nowrap; /* Prevent wrapping */
    transition: 0.2s;
}

    .btn-subcat:hover {
        background-color: #E0E7FF;
    }

    .btn-subcat.active {
        background-color: #0B2239;
        color: white;
    }

/* Business Card */
.SubCategory-Card {
    transition: transform 0.2s, box-shadow 0.2s;
    border-color: #E6E8EC !important;
}

    .SubCategory-Card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

.SubCategory-LogoBox {
    width: 90px;
    height: 70px;
}

.SubCategory-ItemTitle {
    font-family: 'Cairo', sans-serif;
    color: #101828;
}

.SubCategory-ItemDesc {
    font-family: 'Cairo', sans-serif;
    line-height: 1.4;
    color: #475467;
}

/* Utility to limit lines */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ============ dark ============ */

.dark .SubCategory-Page {
    background-color: #0F141A;
}

.dark .SubCategory-Title {
    color: white;
}

/* Tabs Dark */
.dark .btn-subcat {
    background-color: #1F2A37;
    color: #D1D5DB;
}

    .dark .btn-subcat:hover {
        background-color: #374151;
    }

    .dark .btn-subcat.active {
        background-color: #3B82F6; /* Brighter blue for active in dark */
        color: white;
    }

/* Card Dark */
.dark .SubCategory-Card {
    background-color: #141B23 !important;
    border-color: #223041 !important;
}

    .dark .SubCategory-Card:hover {
        background-color: #1F2A37 !important;
    }

.dark .SubCategory-LogoBox {
    background-color: #1F2A37 !important;
    border-color: #223041 !important;
}

.dark .SubCategory-ItemTitle {
    color: white;
}

.dark .SubCategory-ItemDesc {
    color: #9CA3AF;
}
/* ======================================= */
/* ==================== Public Menus Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.PublicMenus-Page {
    background-color: #F6F7F9;
    min-height: 100vh;
}

/* Header */
.PublicMenus-HeaderCard {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.PublicMenus-IconBadge {
    width: 44px;
    height: 44px;
    background-color: #FFF7ED; /* Orange Light */
    border-radius: 16px;
    color: #C2410C;
    font-size: 18px;
}

.PublicMenus-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.PublicMenus-Subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: #6B7280;
}

/* Back Button */
.PublicMenus-BackBtn {
    width: 42px;
    height: 42px;
    background-color: #F3F4F6;
    border-radius: 12px;
    color: #374151;
    font-size: 18px;
    transition: 0.2s;
}

    .PublicMenus-BackBtn:hover {
        background-color: #E5E7EB;
        color: #111827;
    }

/* Menu Card */
.PublicMenus-Card {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    border: 1px solid transparent;
    transition: transform 0.2s;
    border: 1px solid #0a6569;
}

    .PublicMenus-Card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.06);
        border-color: #6e0e0e;
    }

.PublicMenus-MenuTitle {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.PublicMenus-MenuDesc {
    font-family: 'Cairo', sans-serif;
    color: #6B7280;
}

.PublicMenus-ArrowBox {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    font-size: 16px;
}


/* ============ dark ============ */

.dark .PublicMenus-Page {
    background-color: #0F141A;
}

.dark .PublicMenus-HeaderCard {
    background-color: #141B23;
    color: white;
}

.dark .PublicMenus-IconBadge {
    background-color: #2B1806;
    color: #FDBA74;
}

.dark .PublicMenus-Title {
    color: white;
}

.dark .PublicMenus-Subtitle {
    color: #A7B0BC;
}

.dark .PublicMenus-BackBtn {
    background-color: #1F2937;
    color: #D1D5DB;
}

    .dark .PublicMenus-BackBtn:hover {
        background-color: #374151;
        color: white;
    }

.dark .PublicMenus-Card {
    background-color: #141B23;
    color: white;
}

    .dark .PublicMenus-Card:hover {
        background-color: #1F2937;
        border-color: #223041;
    }

.dark .PublicMenus-MenuTitle {
    color: white;
}

.dark .PublicMenus-MenuDesc {
    color: #A7B0BC;
}

.dark .PublicMenus-ArrowBox {
    color: #A7B0BC;
}
/* ======================================= */
/* ==================== MenusAdmin Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.MenusAdmin-Page {
    background-color: #F6F7F9;
    min-height: 100vh;
}

/* Header */
.MenusAdmin-HeaderCard {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.MenusAdmin-IconBadge {
    width: 44px;
    height: 44px;
    background-color: #E0F2FE; /* Sky Light */
    border-radius: 16px;
    color: #0369A1;
    font-size: 18px;
}

.MenusAdmin-Title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #111827;
}

.MenusAdmin-Subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #6B7280;
}

.MenusAdmin-BackBtn {
    width: 42px;
    height: 42px;
    background-color: #F3F4F6;
    border-radius: 12px;
    color: #374151;
    font-size: 18px;
}

    .MenusAdmin-BackBtn:hover {
        background-color: #E5E7EB;
        color: #111827;
    }

/* Usage Card */
.MenusAdmin-Card {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.divide-cols > div:not(:last-child) {
    border-left: 1px solid #E5E7EB;
}

/* Item Card */
.MenusAdmin-ItemCard {
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    border: 1px solid #236d18 !important;
    transition: 0.2s;
    background-color: #e4ffd2 !important;
}

    .MenusAdmin-ItemCard:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

/* Add Card */
.MenusAdmin-AddCard {
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px dashed #D1D5DB;
    border-radius: 18px;
    min-height: 180px; /* Adjust to match item height approx */
    transition: 0.2s;
}

    .MenusAdmin-AddCard:hover {
        background-color: #FFFFFF;
        border-color: #008080;
    }

.MenusAdmin-AddIcon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #008080;
    color: white;
    font-size: 18px;
}

/* Buttons */
.btn-light-teal {
    background-color: #F0FDFA;
}

.text-teal {
    color: #0F766E;
}

.btn-light-teal:hover {
    background-color: #CCFBF1;
}

.btn-light-indigo {
    background-color: #EEF2FF;
}

.text-indigo {
    color: #4338CA;
}

.btn-light-indigo:hover {
    background-color: #E0E7FF;
}

.btn-light-danger {
    background-color: #FEF2F2;
}

.text-danger {
    color: #DC2626;
}

.btn-light-danger:hover {
    background-color: #FEE2E2;
}

/* Modal & Input */
.MenusAdmin-ModalContent {
    border-radius: 18px;
}

.MenusAdmin-Input {
    background-color: #F9FAFB;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    padding: 10px;
    font-family: 'Cairo', sans-serif;
}


/* ============ dark ============ */

.dark .MenusAdmin-Page {
    background-color: #0F141A;
}

.dark .MenusAdmin-HeaderCard {
    background-color: #141B23;
    color: white;
}

.dark .MenusAdmin-IconBadge {
    background-color: #0B2239;
    color: #93C5FD;
}

.dark .MenusAdmin-Title {
    color: white;
}

.dark .MenusAdmin-Subtitle {
    color: #A7B0BC;
}

.dark .MenusAdmin-BackBtn {
    background-color: #1F2937;
    color: #D1D5DB;
}

    .dark .MenusAdmin-BackBtn:hover {
        background-color: #374151;
        color: white;
    }

.dark .MenusAdmin-Card {
    background-color: #141B23;
    color: white;
}

.dark .divide-cols > div:not(:last-child) {
    border-left-color: #223041;
}

.dark .text-dark {
    color: white !important;
}

.dark .MenusAdmin-ItemCard {
    background-color: #141B23 !important;
    border-color: #223041 !important;
}

.dark .badge {
    background-color: #1F2937 !important;
    color: #D1D5DB !important;
    border-color: #374151 !important;
}

.dark .MenusAdmin-AddCard {
    border-color: #374151;
    background-color: rgba(20, 27, 35, 0.5);
}

    .dark .MenusAdmin-AddCard:hover {
        background-color: #141B23;
        border-color: #34D399;
    }

.dark .btn-light-teal {
    background-color: #062B1F;
    color: #34D399;
}

.dark .btn-light-indigo {
    background-color: #1F2937;
    color: #A5B4FC;
}

.dark .btn-light-danger {
    background-color: #2B0B12;
    color: #FDA4AF;
}

.dark .MenusAdmin-ModalContent {
    background-color: #141B23;
    color: white;
}

.dark .MenusAdmin-Input {
    background-color: #1F2937;
    border-color: #374151;
    color: white;
}



/* ======================================= */
/* ==================== MenuDesigner Page */
/* ======================================= */

/* ============ Light (Default) ============ */
.Designer-Page {
    background-color: #F6F7F9;
    min-height: 100vh;
}

.Designer-HeaderCard, .Designer-Card {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.Designer-IconBadge {
    width: 44px;
    height: 44px;
    background-color: #E0F2FE;
    border-radius: 16px;
    color: #0369A1;
    font-size: 18px;
}

.Designer-Title {
    font-family: 'Cairo';
    font-weight: 700;
    color: #111827;
}

.Designer-Subtitle {
    font-family: 'Cairo';
    font-size: 12px;
    color: #6B7280;
}

.Designer-BackBtn {
    width: 42px;
    height: 42px;
    background-color: #F3F4F6;
    border-radius: 12px;
    color: #374151;
    font-size: 18px;
}

/* Tabs */
.btn-cat-tab {
    background-color: #F9FAFB;
    color: #111827;
    border: 1px solid #E5E7EB;
    border-radius: 50px;
    padding: 8px 16px;
    font-family: 'Cairo';
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: 0.2s;
}

    .btn-cat-tab:hover {
        background-color: #EEF2FF;
        border-color: #3730A3;
    }

    .btn-cat-tab.active {
        background-color: #008080;
        color: white;
        border-color: #008080;
    }

/* Item Card */
.Designer-ItemCard {
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    border-color: #E5E7EB !important;
}

.Designer-ImgBox {
    width: 95px;
    height: 75px;
    background-color: #F3F4F6;
    border-radius: 14px;
}

/* FAB */
.Designer-FabBtn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 56px;
    height: 56px;
    background-color: #008080;
    color: white;
    border-radius: 28px;
    border: none;
    font-size: 20px;
    transition: transform 0.2s;
    z-index: 100;
}

    .Designer-FabBtn:hover {
        transform: scale(1.1);
        background-color: #006666;
    }

/* Colors */
.text-teal {
    color: #0F766E !important;
}

.btn-teal {
    background-color: #008080;
    color: white;
}

    .btn-teal:hover {
        background-color: #006666;
        color: white;
    }

.btn-light-indigo {
    background-color: #EEF2FF;
    color: #4338CA;
    border: none;
}

.btn-light-warning {
    background-color: #FFF7ED;
    color: #C2410C;
    border: none;
}

.btn-light-danger {
    background-color: #FEF2F2;
    color: #DC2626;
    border: none;
}

.Designer-Input {
    background-color: #F9FAFB;
    border: 1px solid #D1D5DB;
}

/* ============ Dark ============ */
.dark .Designer-Page {
    background-color: #0F141A;
}

.dark .Designer-HeaderCard, .dark .Designer-Card {
    background-color: #141B23;
    color: white;
}

.dark .Designer-Title {
    color: white;
}

.dark .Designer-ItemCard {
    background-color: #141B23 !important;
    border-color: #223041 !important;
}

.dark .text-dark {
    color: white !important;
}

.dark .btn-cat-tab {
    background-color: #1F2937;
    border-color: #374151;
    color: #D1D5DB;
}

    .dark .btn-cat-tab.active {
        background-color: #008080;
        color: white;
    }

.dark .Designer-Input {
    background-color: #1F2937;
    border-color: #374151;
    color: white;
}