/*
|--------------------------------------------------------------------------
| UKMB Global Typography Governance — 04 Oct 2026
|--------------------------------------------------------------------------
| Loaded after page CSS. This file governs FONT FAMILY only; individual
| pages remain free to choose their approved size/spacing where required.
|
| Approved contract:
|   Headings/titles = Playfair Display
|   Body/UI         = Inter
|   Numeric/IDs     = Arial (clean public numeric face)
|   Urdu            = Jameel Noori Nastaleeq Regular (when asset exists)
|--------------------------------------------------------------------------
*/

:root{
    --ukmb-font-heading:"Playfair Display",Georgia,serif;
    --ukmb-font-body:"Inter","Segoe UI",Roboto,Arial,sans-serif;
    --ukmb-font-numeric:Arial,Helvetica,sans-serif;
    --ukmb-font-urdu:"JameelNoori","Jameel Noori Nastaleeq Regular",serif;
}

/* Display typography */
body h1,
body h2,
body h3,
body h4,
body .page-title,
body .section-title,
body .card-title,
body .modal-title,
body .hero-title,
body .ukmb-page-title,
body .ukmb-section-title,
body .ukmb-card-title{
    font-family:var(--ukmb-font-heading)!important;
}

/* Normal website/admin/user interface text */
body,
body p,
body li,
body td,
body th,
body label,
body small,
body a,
body button,
body input,
body select,
body textarea{
    font-family:var(--ukmb-font-body)!important;
}

/* Numeric family — never use a decorative/serif face for counts, IDs,
   prices, statistics, serials, percentages or numeric status values. */
body .ukmb-numeric,
body .ukmb-number,
body .numeric,
body .member-id,
body .reference-id,
body .price,
body .stat-number,
body [class*="count"],
body [class*="number"],
body [class*="amount"],
body [class*="price"],
body [class*="score"]{
    font-family:var(--ukmb-font-numeric)!important;
    font-variant-numeric:tabular-nums lining-nums;
    font-synthesis:none;
}

/* Urdu is the only deliberate language-level exception. */
body .urdu,
body .urdu *,
body .urdu-text,
body .urdu-text *{
    font-family:var(--ukmb-font-urdu)!important;
}

/* The numeric/code exception inside Urdu stays numeric. */
body .urdu .ukmb-numeric,
body .urdu .ukmb-number,
body .urdu .numeric,
body .urdu .member-id,
body .urdu .reference-id,
body .urdu .price,
body .urdu .stat-number{
    font-family:var(--ukmb-font-numeric)!important;
}

/* Emoji/icon glyph exceptions — these are pictograms, not UI typography. */
body .ukmb-member-card__heart span,
body .ukmb-emoji-grid button,
body .ukmb-verified-tick,
body .ukmb-member-card__verified{
    font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
}


/* =========================================================
   SECTION-20261007-03
   URDU PAGE FONT LOCK
   This file loads after page CSS, so the Urdu contract must be enforced
   here as the final authority.
========================================================= */
@font-face{
    font-family:"JameelNoori";
    src:local("Jameel Noori Nastaleeq Regular"),
         local("Jameel Noori Nastaleeq"),
         url("/assets/fonts/JameelNooriNastaleeqRegular.ttf") format("truetype"),
         url("https://cdn.jsdelivr.net/gh/mrafsarnoori/Urdu-Nastaleeq-Font@main/Jameel-Noori-Nastaleeq-Regular.ttf") format("truetype");
    font-style:normal;
    font-weight:400;
    font-display:swap;
}

:root{
    --ukmb-font-urdu:"JameelNoori","Jameel Noori Nastaleeq Regular","Jameel Noori Nastaleeq",serif;
}

/* Dedicated Urdu pages: Jameel is the final text family. */
body .privacy-page-urdu,
body .privacy-page-urdu *,
body .terms-page-urdu,
body .terms-page-urdu *,
body .faqs-page-urdu,
body .faqs-page-urdu *,
body .blog-page-urdu,
body .blog-page-urdu *{
    font-family:var(--ukmb-font-urdu) !important;
}

/* Font Awesome remains Font Awesome, not page typography. */
body .privacy-page-urdu .fa,
body .privacy-page-urdu .fas,
body .privacy-page-urdu .far,
body .privacy-page-urdu .fab,
body .terms-page-urdu .fa,
body .terms-page-urdu .fas,
body .terms-page-urdu .far,
body .terms-page-urdu .fab,
body .faqs-page-urdu .fa,
body .faqs-page-urdu .fas,
body .faqs-page-urdu .far,
body .faqs-page-urdu .fab,
body .blog-page-urdu .fa,
body .blog-page-urdu .fas,
body .blog-page-urdu .far,
body .blog-page-urdu .fab{
    font-family:"Font Awesome 6 Free","Font Awesome 6 Brands" !important;
}

/* Numbers/counters are still numeric glyphs, but Urdu labels remain Jameel. */
body .privacy-page-urdu .ukmb-numeric,
body .privacy-page-urdu .ukmb-number,
body .terms-page-urdu .ukmb-numeric,
body .terms-page-urdu .ukmb-number,
body .faqs-page-urdu .ukmb-numeric,
body .faqs-page-urdu .ukmb-number,
body .blog-page-urdu .ukmb-numeric,
body .blog-page-urdu .ukmb-number{
    font-family:var(--ukmb-font-numeric) !important;
}

/* English UI labels inside Urdu pages remain readable in the approved body face. */
body .privacy-page-urdu .btn-language span,
body .terms-page-urdu .btn-language span,
body .faqs-page-urdu .btn-language span,
body .blog-page-urdu .btn-language span,
body .privacy-page-urdu .btn-consult span,
body .terms-page-urdu .btn-consult span,
body .faqs-page-urdu .btn-consult span,
body .blog-page-urdu .btn-consult span{
    font-family:var(--ukmb-font-body) !important;
    direction:ltr !important;
    text-align:center !important;
}

/* Urdu shared hero is part of the Urdu page contract too. */
body .page-hero.hero-urdu,
body .page-hero.hero-urdu *{
    font-family:var(--ukmb-font-urdu) !important;
}
body .page-hero.hero-urdu .fa,
body .page-hero.hero-urdu .fas,
body .page-hero.hero-urdu .far,
body .page-hero.hero-urdu .fab{
    font-family:"Font Awesome 6 Free","Font Awesome 6 Brands" !important;
}

/* =========================================================
   SECTION-20261007-06
   URDU READABILITY + PROFESSIONAL RTL SIDEBAR CONTRACT
   Final authority: loaded after page-level Urdu styles.
========================================================= */

/* Readable Nastaleeq scale: legal information must remain comfortably readable. */
body .privacy-page-urdu p,
body .privacy-page-urdu li,
body .privacy-page-urdu td,
body .privacy-page-urdu th,
body .terms-page-urdu p,
body .terms-page-urdu li,
body .terms-page-urdu td,
body .terms-page-urdu th,
body .faqs-page-urdu p,
body .faqs-page-urdu li,
body .faqs-page-urdu td,
body .faqs-page-urdu th,
body .blog-page-urdu p,
body .blog-page-urdu li,
body .blog-page-urdu td,
body .blog-page-urdu th{
    font-family:var(--ukmb-font-urdu) !important;
    font-size:1.08rem !important;
    line-height:2.15 !important;
}

body .privacy-page-urdu h2,
body .privacy-page-urdu h3,
body .privacy-page-urdu h4,
body .terms-page-urdu h2,
body .terms-page-urdu h3,
body .terms-page-urdu h4,
body .faqs-page-urdu h2,
body .faqs-page-urdu h3,
body .faqs-page-urdu h4,
body .blog-page-urdu h2,
body .blog-page-urdu h3,
body .blog-page-urdu h4{
    font-family:var(--ukmb-font-urdu) !important;
    line-height:1.75 !important;
}

body .privacy-page-urdu .privacy-nav .nav-link,
body .terms-page-urdu .terms-nav .nav-link,
body .faqs-page-urdu .faqs-nav .nav-link,
body .blog-page-urdu .blog-nav .nav-link{
    direction:ltr !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:12px !important;
    min-height:58px !important;
    padding:12px 18px !important;
    text-align:right !important;
    font-family:var(--ukmb-font-urdu) !important;
    font-size:1.02rem !important;
    line-height:1.8 !important;
}

body .privacy-page-urdu .privacy-nav .nav-link i,
body .terms-page-urdu .terms-nav .nav-link i,
body .faqs-page-urdu .faqs-nav .nav-link i,
body .blog-page-urdu .blog-nav .nav-link i{
    order:2 !important;
    flex:0 0 24px !important;
    width:24px !important;
    min-width:24px !important;
    margin:0 !important;
    text-align:center !important;
    font-family:"Font Awesome 6 Free","Font Awesome 6 Brands" !important;
}

body .privacy-page-urdu .privacy-nav .nav-link span,
body .terms-page-urdu .terms-nav .nav-link span,
body .faqs-page-urdu .faqs-nav .nav-link span,
body .blog-page-urdu .blog-nav .nav-link span{
    order:1 !important;
    flex:1 1 auto !important;
    text-align:right !important;
    direction:rtl !important;
    font-family:var(--ukmb-font-urdu) !important;
}

/* Anonymous Urdu text nodes (privacy/FAQ sidebars) remain the left-side label. */
body .privacy-page-urdu .privacy-nav .nav-link,
body .faqs-page-urdu .faqs-nav .nav-link{
    unicode-bidi:plaintext;
}

/* Sidebar geometry: first flex item stays on the physical RIGHT on desktop. */
body .privacy-page-urdu .privacy-grid,
body .terms-page-urdu .terms-grid,
body .faqs-page-urdu .faqs-grid,
body .blog-page-urdu .blog-grid{
    direction:rtl !important;
    flex-direction:row !important;
    align-items:flex-start !important;
}

body .privacy-page-urdu .privacy-sidebar,
body .terms-page-urdu .terms-sidebar,
body .faqs-page-urdu .faqs-sidebar,
body .blog-page-urdu .blog-sidebar{
    order:1 !important;
}

body .privacy-page-urdu .privacy-main,
body .terms-page-urdu .terms-main,
body .faqs-page-urdu .faqs-main,
body .blog-page-urdu .blog-main{
    order:2 !important;
    direction:rtl !important;
    text-align:right !important;
}

@media (max-width:992px){
    body .privacy-page-urdu .privacy-grid,
    body .terms-page-urdu .terms-grid,
    body .faqs-page-urdu .faqs-grid,
    body .blog-page-urdu .blog-grid{
        flex-direction:column !important;
    }
    body .privacy-page-urdu .privacy-sidebar,
    body .terms-page-urdu .terms-sidebar,
    body .faqs-page-urdu .faqs-sidebar,
    body .blog-page-urdu .blog-sidebar{
        order:1 !important;
        width:100% !important;
    }
    body .privacy-page-urdu .privacy-main,
    body .terms-page-urdu .terms-main,
    body .faqs-page-urdu .faqs-main,
    body .blog-page-urdu .blog-main{
        order:2 !important;
        width:100% !important;
    }
}

@media (max-width:600px){
    body .privacy-page-urdu p,
    body .privacy-page-urdu li,
    body .terms-page-urdu p,
    body .terms-page-urdu li,
    body .faqs-page-urdu p,
    body .faqs-page-urdu li,
    body .blog-page-urdu p,
    body .blog-page-urdu li{
        font-size:1rem !important;
        line-height:2.05 !important;
    }
    body .privacy-page-urdu .privacy-nav .nav-link,
    body .terms-page-urdu .terms-nav .nav-link,
    body .faqs-page-urdu .faqs-nav .nav-link,
    body .blog-page-urdu .blog-nav .nav-link{
        font-size:.98rem !important;
        min-height:54px !important;
        padding:10px 14px !important;
    }
}


/* =========================================================
   SECTION-20261007-07
   URDU SIDEBAR — TERMS REFERENCE LOCK
   The Terms & Conditions Urdu sidebar supplied by the client is the
   visual reference for Privacy, FAQs and Islamic Blog.
   Physical layout: label LEFT, icon RIGHT, compact controlled gap.
========================================================= */
body .privacy-page-urdu .privacy-nav .nav-link,
body .terms-page-urdu .terms-nav .nav-link,
body .faqs-page-urdu .faqs-nav .nav-link,
body .blog-page-urdu .blog-nav .nav-link{
    direction:ltr !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:10px !important;
    padding:12px 16px !important;
    min-height:58px !important;
    text-align:left !important;
    font-family:var(--ukmb-font-urdu) !important;
    font-weight:400 !important;
    font-size:1.02rem !important;
    line-height:1.65 !important;
    letter-spacing:0 !important;
}

body .privacy-page-urdu .privacy-nav .nav-link > span,
body .terms-page-urdu .terms-nav .nav-link > span,
body .faqs-page-urdu .faqs-nav .nav-link > span,
body .blog-page-urdu .blog-nav .nav-link > span{
    order:1 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    direction:rtl !important;
    text-align:left !important;
    white-space:normal !important;
    font-family:var(--ukmb-font-urdu) !important;
    font-weight:400 !important;
}

body .privacy-page-urdu .privacy-nav .nav-link > i,
body .terms-page-urdu .terms-nav .nav-link > i,
body .faqs-page-urdu .faqs-nav .nav-link > i,
body .blog-page-urdu .blog-nav .nav-link > i{
    order:2 !important;
    flex:0 0 24px !important;
    width:24px !important;
    min-width:24px !important;
    margin:0 !important;
    text-align:center !important;
    direction:ltr !important;
    font-family:"Font Awesome 6 Free","Font Awesome 6 Brands" !important;
}

/* Sidebar headings and contact copy remain true Urdu Nastaleeq. */
body .privacy-page-urdu .sidebar-header,
body .terms-page-urdu .sidebar-header,
body .faqs-page-urdu .sidebar-header,
body .blog-page-urdu .sidebar-header,
body .privacy-page-urdu .sidebar-contact,
body .terms-page-urdu .sidebar-contact,
body .faqs-page-urdu .sidebar-contact,
body .blog-page-urdu .sidebar-contact{
    direction:rtl !important;
    text-align:right !important;
}

@media (max-width:600px){
    body .privacy-page-urdu .privacy-nav .nav-link,
    body .terms-page-urdu .terms-nav .nav-link,
    body .faqs-page-urdu .faqs-nav .nav-link,
    body .blog-page-urdu .blog-nav .nav-link{
        min-height:54px !important;
        padding:10px 14px !important;
        font-size:.98rem !important;
        gap:8px !important;
    }
}

/* =========================================================
   SECTION-20261007-08
   URDU SIDEBAR — PRIVACY / FAQS / ISLAMIC BLOG ONLY
   TERMS & CONDITIONS IS THE APPROVED VISUAL REFERENCE AND IS
   LEFT UNCHANGED BY THIS SECTION.

   Required physical relationship:
   ICON = RIGHT  |  SMALL GAP  |  URDU LABEL = IMMEDIATELY LEFT
   Do NOT distribute the label across the full sidebar width.
========================================================= */
body .privacy-page-urdu .privacy-nav .nav-link,
body .faqs-page-urdu .faqs-nav .nav-link,
body .blog-page-urdu .blog-nav .nav-link{
    direction:rtl !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:11px !important;
    text-align:right !important;
}

body .privacy-page-urdu .privacy-nav .nav-link > i,
body .faqs-page-urdu .faqs-nav .nav-link > i,
body .blog-page-urdu .blog-nav .nav-link > i{
    order:1 !important;
    flex:0 0 24px !important;
    width:24px !important;
    min-width:24px !important;
    margin:0 !important;
    text-align:center !important;
}

body .privacy-page-urdu .privacy-nav .nav-link > span,
body .faqs-page-urdu .faqs-nav .nav-link > span,
body .blog-page-urdu .blog-nav .nav-link > span{
    order:2 !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:calc(100% - 35px) !important;
    direction:rtl !important;
    text-align:right !important;
    white-space:normal !important;
    font-family:var(--ukmb-font-urdu) !important;
    font-weight:400 !important;
}

@media (max-width:600px){
    body .privacy-page-urdu .privacy-nav .nav-link,
    body .faqs-page-urdu .faqs-nav .nav-link,
    body .blog-page-urdu .blog-nav .nav-link{
        gap:9px !important;
    }
}

/* =========================================================
   SECTION-20261008-01 | UKMB GLOBAL VISUAL GOVERNANCE PASS
   Scope: public/shared UI only. Locked Urdu content pages and DayFinder
   content remain under their existing page-specific contracts.
   Contract: gold display headings, readable off-white dark-surface copy,
   light-gray page canvas, 3D pill controls, restrained motion, strong contrast.
========================================================= */
:root{
    --ukmb-page-bg:#eef1f2;
    --ukmb-surface:#ffffff;
    --ukmb-surface-soft:#f6f8f8;
    --ukmb-text-dark:#24352f;
    --ukmb-text-offwhite:#f4f3ec;
    --ukmb-title-gold:#d8b45d;
    --ukmb-brand-green:#07594e;
    --ukmb-brand-green-deep:#043d36;
    --ukmb-control-gold:#e4bd59;
    --ukmb-control-gold-deep:#a77a1e;
    --ukmb-motion-fast:.18s ease;
    --ukmb-motion-standard:.32s cubic-bezier(.22,.61,.36,1);
}

/* Public page canvas. Page-specific immersive layouts may override this. */
body:not(:has(.uk-dayfinder-shell)):not(:has(.privacy-page-urdu)):not(:has(.terms-page-urdu)):not(:has(.faqs-page-urdu)):not(:has(.blog-page-urdu)){
    background:var(--ukmb-page-bg);
}

/* Headings: gold only on dark branded surfaces; preserve existing light-page titles. */
.ukmb-header h1,.ukmb-header h2,.ukmb-header h3,
.ukmb-footer h1,.ukmb-footer h2,.ukmb-footer h3,.ukmb-footer h4{
    color:var(--ukmb-title-gold);
}

/* Readable dark-surface copy. */
.ukmb-header .ukmb-brand-slogan,
.ukmb-footer .ukmb-footer-about,
.ukmb-footer .ukmb-footer-slogan{
    color:rgba(255,255,255,.88);
}

/* Shared 3D pill contract for named UKMB controls. */
body:not(:has(.uk-dayfinder-shell)):not(:has(.privacy-page-urdu)):not(:has(.terms-page-urdu)):not(:has(.faqs-page-urdu)):not(:has(.blog-page-urdu)) :is(.ukmb-btn-login,.ukmb-btn-signup,.ukmb-dayfinder-link,.btn-primary,.btn-secondary,.btn-register,.btn-consult-alt,.btn-print,.cta-btn,.whatsapp-btn,.ukmb-mini-action,.ukmb-page-button,.pending-signup-lookup-btn){
    border-radius:999px !important;
    position:relative;
    transform:translateY(0);
    transition:transform var(--ukmb-motion-standard),box-shadow var(--ukmb-motion-standard),filter var(--ukmb-motion-standard);
    box-shadow:0 5px 0 rgba(74,56,17,.42),0 10px 22px rgba(0,45,38,.14),inset 0 1px 0 rgba(255,255,255,.28) !important;
}
body:not(:has(.uk-dayfinder-shell)):not(:has(.privacy-page-urdu)):not(:has(.terms-page-urdu)):not(:has(.faqs-page-urdu)):not(:has(.blog-page-urdu)) :is(.ukmb-btn-login,.ukmb-btn-signup,.ukmb-dayfinder-link,.btn-primary,.btn-secondary,.btn-register,.btn-consult-alt,.btn-print,.cta-btn,.whatsapp-btn,.ukmb-mini-action,.ukmb-page-button,.pending-signup-lookup-btn):hover{
    transform:translateY(-2px);
    filter:saturate(1.04) brightness(1.02);
}
body:not(:has(.uk-dayfinder-shell)):not(:has(.privacy-page-urdu)):not(:has(.terms-page-urdu)):not(:has(.faqs-page-urdu)):not(:has(.blog-page-urdu)) :is(.ukmb-btn-login,.ukmb-btn-signup,.ukmb-dayfinder-link,.btn-primary,.btn-secondary,.btn-register,.btn-consult-alt,.btn-print,.cta-btn,.whatsapp-btn,.ukmb-mini-action,.ukmb-page-button,.pending-signup-lookup-btn):active{
    transform:translateY(2px);
    box-shadow:0 2px 0 rgba(74,56,17,.42),0 5px 12px rgba(0,45,38,.12),inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* Shared social icon tiles: tactile depth + restrained animation. */
.ukmb-social-icons a,.ukmb-footer-social a{
    position:relative;
    border-radius:50% !important;
    box-shadow:0 5px 0 rgba(0,0,0,.18),0 10px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.72) !important;
    transform:translateY(0);
    transition:transform var(--ukmb-motion-standard),box-shadow var(--ukmb-motion-standard),filter var(--ukmb-motion-standard);
    animation:ukmbSocialFloat 4.8s ease-in-out infinite;
    will-change:transform;
}
.ukmb-social-icons a:nth-child(2),.ukmb-footer-social a:nth-child(2){animation-delay:.35s}
.ukmb-social-icons a:nth-child(3),.ukmb-footer-social a:nth-child(3){animation-delay:.70s}
.ukmb-social-icons a:nth-child(4),.ukmb-footer-social a:nth-child(4){animation-delay:1.05s}
.ukmb-social-icons a:nth-child(5),.ukmb-footer-social a:nth-child(5){animation-delay:1.40s}
.ukmb-social-icons a:hover,.ukmb-footer-social a:hover{
    transform:translateY(-4px) scale(1.06);
    box-shadow:0 8px 0 rgba(0,0,0,.16),0 14px 24px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.82) !important;
}
.ukmb-social-icons .fa-tiktok,.ukmb-footer-social .fa-tiktok{
    background:none !important;
    -webkit-background-clip:initial !important;
    background-clip:initial !important;
    -webkit-text-fill-color:initial !important;
    color:#111 !important;
}
@keyframes ukmbSocialFloat{
    0%,100%{transform:translateY(0) scale(1);filter:brightness(1)}
    50%{transform:translateY(-4px) scale(1.035);filter:brightness(1.05)}
}

/* Floating WhatsApp: clean continuous pill, no clipped/cut corner. */
.ukmb-floating-whatsapp{
    border-radius:999px !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
    overflow:visible !important;
    box-sizing:border-box !important;
}
.ukmb-floating-whatsapp::before{border-radius:999px !important;}
.ukmb-wa-business-icon{border-radius:50% !important;overflow:visible !important;}

@media(prefers-reduced-motion:reduce){
    .ukmb-social-icons a,.ukmb-footer-social a{animation:none !important;}
}

/* =========================================================
   SECTION-20261008-02 | PUBLIC SECTION RHYTHM
========================================================= */
.section,.section-lg,.section-sm,
.ukmb-page-section,.legal-section{
    scroll-margin-top:110px;
}

/* =========================================================
   SECTION-20261008-END
========================================================= */


/* =========================================================
   SECTION-20261008-03 | MASTER VISUAL + ACCESSIBILITY PASS
   SOURCE OF TRUTH: 08 Oct 2026 latest public_html package.
   Scope: shared public/admin/user UI only.
   Locked exceptions: Terms/Privacy/FAQs/Blog Urdu sidebars and
   DayFinder remain page-owned and are intentionally excluded.
========================================================= */
:root{
    --ukmb-canvas-light:#eef1f2;
    --ukmb-surface-light:#f8faf9;
    --ukmb-surface-white:#ffffff;
    --ukmb-title-gold:#d8b45d;
    --ukmb-body-offwhite:#f4f3ec;
    --ukmb-body-dark:#24352f;
    --ukmb-brand-green:#07594e;
    --ukmb-brand-green-deep:#043d36;
    --ukmb-3d-shadow:0 5px 0 rgba(56,47,22,.30),0 11px 24px rgba(0,45,38,.14),inset 0 1px 0 rgba(255,255,255,.30);
}

/* Public canvas: light gray, never brilliant white. */
body:not(:has(.uk-dayfinder-shell)):not(:has(.privacy-page-urdu)):not(:has(.terms-page-urdu)):not(:has(.faqs-page-urdu)):not(:has(.blog-page-urdu)){
    background:var(--ukmb-canvas-light);
}

/* Shared action controls: rounded-pull geometry + restrained 3D depth.
   Icon-only controls are intentionally excluded from the pill geometry and
   receive the same depth through their existing component rules. */
body:not(:has(.uk-dayfinder-shell)):not(:has(.privacy-page-urdu)):not(:has(.terms-page-urdu)):not(:has(.faqs-page-urdu)):not(:has(.blog-page-urdu))
:is(
    button,
    input[type="submit"],input[type="button"],input[type="reset"],
    a[class*="btn"],a[class*="button"],
    .header-btn,.team-btn,.table-action-btn,.action-btn,.panel-button,
    .cms-action-btn,.ukmb-toolbar-button,.ukmb-page-button,.ukmb-mini-action,
    .ukmb-primary-button,.ukmb-secondary-button
):not(.ukmb-mobile-toggle):not(.ukmb-dropdown-trigger):not(.icon-only):not(.action-icon):not(.ukmb-action-icon):not(.slider-nav-btn):not(.stories-slider-btn):not(.welcome-close-btn):not(.btn-close):not(.remove-btn):not(.remove-image-btn):not(.featured-card-image):not(.hero-slider-prev):not(.hero-slider-next):not(.stories-prev):not(.stories-next):not(.selected-qr-button):not(.qr-zoom-close):not(.qr-zoom-close-btn):not(.crop-btn):not(.signup-central-crop-modebar button):not(.feature-card-modal-close){
    border-radius:999px !important;
    position:relative;
    box-shadow:var(--ukmb-3d-shadow) !important;
    transition:transform var(--ukmb-motion-standard),box-shadow var(--ukmb-motion-standard),filter var(--ukmb-motion-standard) !important;
}

body:not(:has(.uk-dayfinder-shell)):not(:has(.privacy-page-urdu)):not(:has(.terms-page-urdu)):not(:has(.faqs-page-urdu)):not(:has(.blog-page-urdu))
:is(
    button,input[type="submit"],input[type="button"],input[type="reset"],
    a[class*="btn"],a[class*="button"],.header-btn,.team-btn,.table-action-btn,.action-btn,.panel-button,
    .cms-action-btn,.ukmb-toolbar-button,.ukmb-page-button,.ukmb-mini-action,.ukmb-primary-button,.ukmb-secondary-button
):not(.ukmb-mobile-toggle):not(.ukmb-dropdown-trigger):not(.icon-only):not(.action-icon):not(.ukmb-action-icon):not(.slider-nav-btn):not(.stories-slider-btn):not(.welcome-close-btn):not(.btn-close):not(.remove-btn):not(.remove-image-btn):not(.featured-card-image):not(.hero-slider-prev):not(.hero-slider-next):not(.stories-prev):not(.stories-next):not(.selected-qr-button):not(.qr-zoom-close):not(.qr-zoom-close-btn):not(.crop-btn):not(.signup-central-crop-modebar button):not(.feature-card-modal-close):hover{
    transform:translateY(-2px);
    filter:saturate(1.03) brightness(1.02);
}

/* Every normal content section keeps breathing room from adjacent sections. */
body:not(:has(.uk-dayfinder-shell)):not(:has(.privacy-page-urdu)):not(:has(.terms-page-urdu)):not(:has(.faqs-page-urdu)):not(:has(.blog-page-urdu))
:is(.section,.section-lg,.section-sm,.ukmb-page-section){
    scroll-margin-top:110px;
}

/* Subtle page entrance. Header/footer remain isolated. */
@keyframes ukmbPageReveal{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}
body:not(:has(.uk-dayfinder-shell)):not(:has(.privacy-page-urdu)):not(:has(.terms-page-urdu)):not(:has(.faqs-page-urdu)):not(:has(.blog-page-urdu)) main:not(.ukmb-header):not(.ukmb-footer){
    animation:ukmbPageReveal .52s cubic-bezier(.22,.61,.36,1) both;
}
.user-main{animation:ukmbPageReveal .52s cubic-bezier(.22,.61,.36,1) both;}
.ukmb-shell{animation:ukmbPageReveal .52s cubic-bezier(.22,.61,.36,1) both;}

/* Floating WhatsApp: true pill, no clipping/notch/cut corner. */
.ukmb-floating-whatsapp,
.ukmb-floating-whatsapp::before,
.ukmb-wa-business-icon,
.ukmb-wa-business-icon svg{
    border-radius:999px !important;
}
.ukmb-floating-whatsapp{clip-path:none !important;-webkit-clip-path:none !important;overflow:visible !important;}
.ukmb-wa-business-icon{overflow:visible !important;isolation:isolate;}
.ukmb-wa-business-icon svg{display:block;overflow:visible;}

/* Official social-brand colours on the canonical neutral 3D tile. */
.ukmb-social-icons a,.ukmb-footer-social a{
    background:#d4d9db !important;
    color:#111 !important;
}
.ukmb-social-icons .fa-tiktok,.ukmb-footer-social .fa-tiktok{color:#111 !important;}
.ukmb-social-icons .fa-facebook-f,.ukmb-footer-social .fa-facebook-f{color:#1877F2 !important;}
.ukmb-social-icons .fa-instagram,.ukmb-footer-social .fa-instagram{color:#E1306C !important;}
.ukmb-social-icons .fa-youtube,.ukmb-footer-social .fa-youtube{color:#FF0000 !important;}
.ukmb-social-icons .fa-linkedin-in,.ukmb-footer-social .fa-linkedin-in{color:#0A66C2 !important;}

@media(prefers-reduced-motion:reduce){
    .ukmb-shell,.user-main,
    body:not(:has(.uk-dayfinder-shell)):not(:has(.privacy-page-urdu)):not(:has(.terms-page-urdu)):not(:has(.faqs-page-urdu)):not(:has(.blog-page-urdu)) main:not(.ukmb-header):not(.ukmb-footer){animation:none !important;}
}

/* =========================================================
   SECTION-20261008-END
========================================================= */


/* =========================================================
   SECTION-20261008-04 | REGRESSION GUARDS
   These controls are structural/image controls, not generic
   pill buttons. Their geometry is owned by the component CSS.
========================================================= */
.featured-card-image{
    border-radius:24px 24px 0 0 !important;
    position:relative !important;
    box-shadow:none !important;
    transform:none !important;
}
.hero-slider-prev,
.hero-slider-next,
.stories-prev,
.stories-next{
    position:absolute !important;
    border-radius:50% !important;
    transform:translateY(-50%) !important;
}
.hero-slider-prev:hover,
.hero-slider-next:hover{
    transform:translateY(-50%) scale(1.05) !important;
}
.stories-prev:hover,
.stories-next:hover{
    transform:translateY(-50%) scale(1.05) !important;
}

/* TikTok must remain a clear black glyph on the neutral tile. */
.ukmb-social-icons a .fa-tiktok,
.ukmb-footer-social a .fa-tiktok{
    background:none !important;
    -webkit-background-clip:initial !important;
    background-clip:initial !important;
    -webkit-text-fill-color:#111 !important;
    color:#111 !important;
}

/* Appointment QR trigger is an image viewer, not a normal action pill. */
.selected-qr-button{
    border-radius:14px !important;
    box-shadow:7px 7px 0 rgba(0,0,0,.08),0 10px 22px rgba(0,0,0,.08) !important;
    position:relative !important;
    overflow:hidden !important;
}
.selected-qr-button img{
    border-radius:0 !important;
    object-fit:contain !important;
}
.feature-card-modal-close{
    border-radius:50% !important;
}

/* Payment logos keep their own rectangular proportions; never force a circle crop. */
.payment-card .card-icon{
    width:72px !important;
    height:54px !important;
    border-radius:12px !important;
    background:#f7f5ee !important;
    overflow:hidden !important;
}
.payment-card .card-icon img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
}

@media(max-width:768px){
    .featured-card-image{border-radius:18px 18px 0 0 !important;}
}

/* =========================================================
   SECTION-20261008-END-REGRESSION
========================================================= */

/* =========================================================
   SECTION-20261008-05 | LEGAL / LANGUAGE ACTION BAR POLISH
   Applies uniformly to Terms, Privacy, FAQs and Blog language
   bars. It intentionally overrides page-local tiny/circular
   language buttons without changing their content or sidebars.
========================================================= */
body .button-bar{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:18px !important;
    flex-wrap:wrap !important;
    padding:18px 20px !important;
}
body .button-bar .btn-language,
body .button-bar .btn-consult{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    min-height:46px !important;
    min-width:138px !important;
    box-sizing:border-box !important;
    padding:10px 22px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    line-height:1.15 !important;
    box-shadow:0 5px 0 rgba(56,47,22,.24),0 10px 22px rgba(0,45,38,.12),inset 0 1px 0 rgba(255,255,255,.40) !important;
}
body .button-bar .btn-consult{
    min-width:184px !important;
}
body .button-bar .btn-language i,
body .button-bar .btn-consult i{
    flex:0 0 auto !important;
    line-height:1 !important;
}
body .button-bar .btn-language span,
body .button-bar .btn-consult span{
    display:inline-block !important;
    margin:0 !important;
}
body .button-bar .btn-language:hover,
body .button-bar .btn-consult:hover{
    transform:translateY(-2px) !important;
}
@media(max-width:640px){
    body .button-bar{gap:10px !important;padding:14px 12px !important;}
    body .button-bar .btn-language,
    body .button-bar .btn-consult{
        min-width:0 !important;
        width:auto !important;
        min-height:44px !important;
        padding:9px 16px !important;
        font-size:.82rem !important;
    }
}

/* =========================================================
   SECTION-20261008-06 | CONTACT SERVICE BRANCH-FIRST MODAL
========================================================= */
body .contact-page .service-modal .modal-content{
    max-width:620px !important;
    border-radius:24px !important;
}
body .contact-page .service-modal .modal-header{
    padding:24px 32px !important;
}
body .contact-page .service-modal .modal-header h3{
    font-size:1.55rem !important;
    line-height:1.25 !important;
}
body .contact-page .service-modal .modal-body{
    padding:28px 32px 24px !important;
}
body .contact-page .service-modal .modal-body p{
    font-size:1rem !important;
    line-height:1.75 !important;
}
body .contact-page .service-modal .modal-footer{
    padding:20px 28px 24px !important;
}
body .contact-page .service-modal .modal-btn{
    min-width:190px !important;
    min-height:46px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    box-shadow:0 5px 0 rgba(0,0,0,.20),0 10px 20px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.24) !important;
}
@media(max-width:640px){
    body .contact-page .service-modal{padding:14px !important;}
    body .contact-page .service-modal .modal-content{max-width:100% !important;}
    body .contact-page .service-modal .modal-header{padding:22px 22px !important;}
    body .contact-page .service-modal .modal-body{padding:22px !important;}
    body .contact-page .service-modal .modal-footer{padding:16px 20px 20px !important;}
    body .contact-page .service-modal .modal-btn{width:100% !important;min-width:0 !important;}
}

/* =========================================================
   SECTION-20261008-07 | READABLE BRANCH-FIRST MODAL COPY
========================================================= */
body .contact-page .service-modal .modal-body::before{
    content:'Before viewing branch-specific details, please select the branch you want to use.';
    display:block;
    margin:0 0 12px;
    color:#07594e;
    font-weight:800;
    line-height:1.5;
}


/* =========================================================
   SECTION-20261008-08 | LEGAL ACTION ROW EQUAL-SIZE CONTRACT
   English Privacy / Terms / FAQs / Blog action rows use one geometry.
   The context badge keeps its own gold colour scheme but must occupy the
   same professional footprint as the language and consultation buttons.
========================================================= */
body :is(.privacy-page,.terms-page,.faqs-page,.blog-page) .button-bar > .page-hero-context-badge,
body :is(.privacy-page,.terms-page,.faqs-page,.blog-page) .button-bar .btn-language,
body :is(.privacy-page,.terms-page,.faqs-page,.blog-page) .button-bar .btn-consult{
    width:180px !important;
    min-width:180px !important;
    max-width:180px !important;
    min-height:44px !important;
    height:44px !important;
    box-sizing:border-box !important;
    padding:0 18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    line-height:1 !important;
}
body :is(.privacy-page,.terms-page,.faqs-page,.blog-page) .button-bar > .page-hero-context-badge{
    border:1px solid rgba(200,169,106,.78) !important;
    background:linear-gradient(180deg,#fff8df,#f2dfaa) !important;
    color:#0e425c !important;
    box-shadow:0 4px 0 rgba(130,101,47,.24),0 9px 20px rgba(0,0,0,.09),inset 0 1px 0 rgba(255,255,255,.65) !important;
    font-size:.82rem !important;
    font-weight:700 !important;
    letter-spacing:.1px !important;
}
@media(max-width:640px){
    body :is(.privacy-page,.terms-page,.faqs-page,.blog-page) .button-bar > .page-hero-context-badge,
    body :is(.privacy-page,.terms-page,.faqs-page,.blog-page) .button-bar .btn-language,
    body :is(.privacy-page,.terms-page,.faqs-page,.blog-page) .button-bar .btn-consult{
        width:100% !important;
        min-width:0 !important;
        max-width:320px !important;
        height:44px !important;
    }
}


/* =========================================================
   SECTION-20261009-01
   GLOBAL NUMERIC FACE — PUBLIC WEBSITE
   Client visual preference: one clean, readable numeric face.
   Headings remain Playfair Display; body remains Inter; Urdu remains
   Jameel Noori. Numeric values use the same Arial stack everywhere.
========================================================= */
body .vip-num,
body .vip-code,
body .vip-hero-percent,
body .vip-benefit strong,
body .vip-launch-card strong.vip-num,
body .vip-card-days .vip-num,
body .vip-card-note-discount .vip-num,
body .contact-number,
body .contact-numbers-list,
body .contact-numbers-list p,
body .contact-numbers-list .country-code,
body .price-tag {
    font-family: Arial, Helvetica, sans-serif !important;
    font-variant-numeric: tabular-nums lining-nums;
    font-synthesis: none;
    letter-spacing: normal;
}


/* =========================================================
   SECTION-20261018-01 | PROJECT-WIDE LIGHT NEUTRAL SURFACES
   Preserve UKMB navy/teal and gold brand accents. Only the default
   page canvas and inherited body text are softened for readability;
   intentional dark headers, navigation, cards and status surfaces retain
   their own foreground/background pairings.
========================================================= */
html, body {
    background-color: #eef1ef;
    color: #263b35;
}
body {
    --bg-body: #eef1ef;
    --bg-section: #e9eeeb;
    --bg-card: #ffffff;
    --text-body: #263b35;
    --text-muted: #52645f;
}
.page-content {
    background-color: #eef1ef;
    color: #263b35;
}