/* ==========================================================================
   gls-components.css
   Shared UI components, added in Phase 2. One file, loaded on every page,
   so these styles stop being duplicated inside each page's <style> block.

   Contents
     1. Design tokens
     2. Floating contact rail (phone / WhatsApp / WeChat)
     3. WeChat QR modal
     4. Language toggle
     5. Practice-area modal scroll fix
     6. Dynamic team grid
     7. Printable ID card (admin only)
   Nothing here changes the existing look of the site — it only adds the new
   components and fixes the modal overflow.
   ========================================================================== */

:root {
    --gls-burgundy: #800020;
    --gls-burgundy-dark: #5c0017;
    --gls-burgundy-soft: #7a1e2e;
    --gls-gold: #c5a059;
    --gls-ink: #10141b;
    --gls-muted: #666;
    --gls-line: #e8e8e8;
    --gls-whatsapp: #25d366;
    --gls-wechat: #09b83e;
    --gls-radius: 8px;
    --gls-shadow: 0 10px 30px rgba(16, 20, 27, .16);
    --gls-float-z: 99990;
}

/* ==========================================================================
   2. FLOATING CONTACT RAIL
   ========================================================================== */

.gls-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: var(--gls-float-z);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    font-family: inherit;
}

.gls-float-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.gls-float-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 26px;
    background: var(--gls-burgundy);
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: var(--gls-shadow);
    cursor: pointer;
    overflow: hidden;
    max-width: 52px;
    transition: max-width .32s cubic-bezier(.4, 0, .2, 1),
                background-color .2s ease,
                transform .2s ease;
    font-family: inherit;
}

.gls-float-btn:hover,
.gls-float-btn:focus-visible {
    max-width: 300px;
    transform: translateY(-2px);
    color: #fff !important;
    text-decoration: none !important;
}

.gls-float-btn:focus-visible {
    outline: 3px solid var(--gls-gold);
    outline-offset: 2px;
}

.gls-float-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.gls-float-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 20px;
    white-space: nowrap;
    line-height: 1.25;
    text-align: left;
}

.gls-float-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.gls-float-text small {
    font-size: 11px;
    opacity: .82;
    color: #fff;
}

/* Channel colours */
.gls-float-whatsapp { background: var(--gls-whatsapp); }
.gls-float-whatsapp:hover { background: #1fb955; }
.gls-float-wechat   { background: var(--gls-wechat); }
.gls-float-wechat:hover { background: #079c34; }
.gls-float-phone    { background: var(--gls-burgundy); }
.gls-float-phone:hover { background: var(--gls-burgundy-dark); }

/* Mobile trigger — hidden on desktop, where the rail is always visible.
   Coloured and shaped like the WhatsApp button itself (see the icon swap
   in floating-contact.php) so it reads as "chat with us" at a glance
   instead of a generic message bubble. */
.gls-float-trigger {
    display: none;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--gls-whatsapp);
    color: #fff;
    box-shadow: var(--gls-shadow);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, background-color .2s ease;
}

.gls-float-trigger:focus-visible {
    outline: 3px solid var(--gls-gold);
    outline-offset: 2px;
}

.gls-float-trigger-close { display: none; }
.gls-float.is-open .gls-float-trigger { background: var(--gls-burgundy-dark); }
.gls-float.is-open .gls-float-trigger-open { display: none; }
.gls-float.is-open .gls-float-trigger-close { display: block; }

@media (max-width: 767px) {
    .gls-float {
        right: 14px;
        bottom: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .gls-float-trigger { display: inline-flex; }

    /* Collapsed by default on phones so the rail never covers content */
    .gls-float-stack {
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px) scale(.94);
        transform-origin: bottom right;
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
        pointer-events: none;
    }

    .gls-float.is-open .gls-float-stack {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    /* Labels always visible once expanded — no hover on touch devices */
    .gls-float-btn {
        max-width: 260px;
        height: 48px;
    }

    .gls-float-icon { flex-basis: 48px; width: 48px; height: 48px; }
    .gls-float-text strong { font-size: 13px; }
}

/* Keep the rail clear of the existing back-to-top button */
.gototop { z-index: calc(var(--gls-float-z) - 10); }

@media (max-width: 767px) {
    .gototop { bottom: 82px !important; }
}

@media print {
    .gls-float, .gls-wechat-modal { display: none !important; }
}

/* ==========================================================================
   3. WECHAT QR MODAL
   ========================================================================== */

.gls-wechat-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--gls-float-z) + 10);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.gls-wechat-modal[hidden] { display: none; }

.gls-wechat-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 20, 27, .72);
    backdrop-filter: blur(2px);
}

.gls-wechat-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 340px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 12px;
    padding: 30px 26px 24px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.gls-wechat-close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 30px;
    line-height: 1;
    color: #9aa1ac;
    cursor: pointer;
    padding: 4px 8px;
}

.gls-wechat-close:hover { color: var(--gls-ink); }

.gls-wechat-panel h3 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    color: var(--gls-ink);
}

.gls-wechat-hint {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--gls-muted);
}

.gls-wechat-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--gls-line);
    border-radius: 10px;
    margin-bottom: 18px;
}

.gls-wechat-qr img,
.gls-wechat-qr canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.gls-wechat-id {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
}

.gls-wechat-id-label { color: var(--gls-muted); }

.gls-wechat-id code {
    background: #f4f5f7;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    color: var(--gls-ink);
}

.gls-wechat-copy {
    border: 1px solid var(--gls-line);
    background: #fff;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    color: var(--gls-burgundy);
    font-weight: 600;
}

.gls-wechat-copy:hover { background: #faf7f8; }

/* ==========================================================================
   4. LANGUAGE TOGGLE
   ========================================================================== */

.gls-lang-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    overflow: hidden;
    vertical-align: middle;
}

.gls-lang-opt {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.6;
    color: inherit !important;
    text-decoration: none !important;
    transition: background-color .18s ease, color .18s ease;
}

.gls-lang-opt + .gls-lang-opt {
    border-left: 1px solid rgba(255, 255, 255, .28);
}

.gls-lang-opt:hover { background: rgba(255, 255, 255, .14); }

.gls-lang-opt.is-active {
    background: var(--gls-gold);
    color: var(--gls-ink) !important;
}

/* On the scrolled/white nav the border needs to darken to stay visible */
.ftco-nav.scrolled .gls-lang-toggle { border-color: rgba(16, 20, 27, .2); }
.ftco-nav.scrolled .gls-lang-opt + .gls-lang-opt { border-left-color: rgba(16, 20, 27, .15); }
.ftco-nav.scrolled .gls-lang-opt:hover { background: rgba(16, 20, 27, .06); }

.gls-lang-toggle-item { display: inline-flex; align-items: center; }

/* The off-canvas copy (inside the side menu) is only a fallback now that a
   persistent copy lives on the main nav bar itself (see
   .gls-lang-toggle-mobile below) — hide it on mobile so the switch isn't
   duplicated once the panel is open. Desktop is untouched. */
@media (max-width: 991px) {
    .gls-lang-toggle-item {
        display: none !important;
    }
}

/* ==========================================================================
   4b. MOBILE-VISIBLE LANGUAGE TOGGLE
   A second, always-reachable copy of the switch that sits on the main nav
   bar next to the hamburger button, so it never requires opening the side
   menu first. Hidden on desktop, where the in-nav copy already shows.
   ========================================================================== */

.gls-lang-toggle-mobile {
    display: none;
}

@media (max-width: 991px) {
    .gls-lang-toggle-mobile {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        margin-right: 12px;
    }

    /* Sits on the same dark/transparent nav bar as the hamburger, so it
       uses the same light-on-dark styling as the desktop pill by default. */
    .gls-lang-toggle-mobile .gls-lang-toggle {
        border-color: rgba(255, 255, 255, .35);
    }
    .gls-lang-toggle-mobile .gls-lang-opt {
        padding: 5px 11px;
        font-size: 12px;
    }

    /* Once the nav bar turns solid/white on scroll, flip to dark text. */
    .ftco-nav.gls-nav-scrolled .gls-lang-toggle-mobile .gls-lang-toggle,
    .ftco-nav.scrolled .gls-lang-toggle-mobile .gls-lang-toggle {
        border-color: rgba(16, 20, 27, .2);
    }
}

/* Chinese renders better with a slightly larger body size and a font stack
   that includes the common CJK faces. Scoped to :lang so English is untouched. */
:lang(zh) body,
html[lang^="zh"] body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
    letter-spacing: 0;
}

html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3 {
    letter-spacing: .01em;
}

/* ==========================================================================
   5. PRACTICE-AREA MODAL SCROLL FIX
   The dialog previously had no height limit, so on short viewports the
   bottom of a long practice description was simply cut off and unreachable.
   Capping the height and letting the BODY scroll (header/footer stay put)
   fixes it without changing the design.
   ========================================================================== */

.mfp-wrap {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.mfp-container {
    padding-top: 24px;
    padding-bottom: 24px;
}

.gls-popup-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    border-radius: 8px;
    overflow: hidden;   /* keeps the rounded corners while the body scrolls */
}

.gls-popup-dialog .gls-modal-header,
.gls-popup-dialog .gls-modal-footer {
    flex: 0 0 auto;     /* pinned: they never scroll away */
}

.gls-popup-dialog .gls-modal-body {
    flex: 1 1 auto;
    min-height: 0;      /* required for overflow to work inside a flex child */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;  /* stops the page behind scrolling too */
}

/* Visible, non-intrusive scrollbar so users know there IS more content */
.gls-popup-dialog .gls-modal-body::-webkit-scrollbar { width: 8px; }
.gls-popup-dialog .gls-modal-body::-webkit-scrollbar-track { background: #f4f4f4; }
.gls-popup-dialog .gls-modal-body::-webkit-scrollbar-thumb {
    background: #cfcfcf;
    border-radius: 4px;
}
.gls-popup-dialog .gls-modal-body::-webkit-scrollbar-thumb:hover { background: var(--gls-gold); }

.gls-popup-dialog .gls-modal-body {
    scrollbar-width: thin;
    scrollbar-color: #cfcfcf #f4f4f4;
}

/* Soft fade at the bottom hinting that the content continues */
.gls-popup-dialog .gls-modal-body::after {
    content: '';
    display: block;
    height: 4px;
}

@media (max-width: 767px) {
    .mfp-container { padding-left: 12px; padding-right: 12px; }
    .gls-popup-dialog { max-height: calc(100vh - 32px); }
    .gls-popup-dialog .gls-modal-header { padding: 22px 22px; }
    .gls-popup-dialog .gls-modal-body { padding: 22px; }
}

/* On very short landscape phones, give the body nearly the whole screen */
@media (max-height: 460px) {
    .gls-popup-dialog { max-height: calc(100vh - 16px); }
    .gls-popup-dialog .gls-modal-header { padding: 14px 22px; }
    .gls-popup-dialog .gls-modal-header h2 { font-size: 18px; }
}

/* ==========================================================================
   6. DYNAMIC TEAM GRID
   Matches the existing .gls-advisor-card look, but works with a photo coming
   from the database instead of hardcoded initials.
   ========================================================================== */

.gls-avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.gls-team-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--gls-muted);
    font-size: 15px;
}

/* ==========================================================================
   7. PRINTABLE ID CARD  (admin-id-card.php)
   Sized to CR80 — the standard credit-card / ID-badge size, 85.6 x 54 mm.
   ========================================================================== */

.gls-idcard {
    width: 85.6mm;
    height: 54mm;
    background: #fff;
    border-radius: 3mm;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    display: flex;
    overflow: hidden;
    position: relative;
    font-family: "Inter", Arial, sans-serif;
    color: var(--gls-ink);
}

.gls-idcard-left {
    width: 26mm;
    background: var(--gls-burgundy);
    padding: 3mm 2mm;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2mm;
}

.gls-idcard-photo {
    width: 20mm;
    height: 24mm;
    object-fit: cover;
    border-radius: 1.5mm;
    border: .5mm solid #fff;
    background: #eee;
}

.gls-idcard-initials {
    width: 20mm;
    height: 24mm;
    border-radius: 1.5mm;
    border: .5mm solid #fff;
    background: var(--gls-burgundy-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7mm;
    font-weight: 700;
}

.gls-idcard-code {
    font-size: 2.4mm;
    letter-spacing: .3mm;
    color: var(--gls-gold);
    font-weight: 700;
    text-align: center;
}

.gls-idcard-right {
    flex: 1;
    padding: 3mm 3mm 2mm;
    display: flex;
    flex-direction: column;
}

.gls-idcard-firm {
    font-size: 2.6mm;
    font-weight: 700;
    letter-spacing: .4mm;
    text-transform: uppercase;
    color: var(--gls-burgundy);
    margin-bottom: 1mm;
}

.gls-idcard-name {
    font-size: 4.4mm;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1mm;
}

.gls-idcard-name-zh {
    font-size: 3.2mm;
    color: #444;
    margin: 0 0 1mm;
}

.gls-idcard-role {
    font-size: 2.8mm;
    color: #555;
    line-height: 1.3;
}

.gls-idcard-bottom {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2mm;
}

.gls-idcard-meta {
    font-size: 2.1mm;
    color: #777;
    line-height: 1.4;
}

.gls-idcard-qr {
    width: 17mm;
    height: 17mm;
    flex: 0 0 17mm;
}

.gls-idcard-qr canvas,
.gls-idcard-qr img {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Back of the card */
.gls-idcard-back {
    flex-direction: column;
    padding: 4mm;
    justify-content: space-between;
}

.gls-idcard-back-text {
    font-size: 2.3mm;
    line-height: 1.5;
    color: #444;
}

.gls-idcard-strip {
    background: var(--gls-burgundy);
    color: #fff;
    font-size: 2.3mm;
    padding: 1.5mm 3mm;
    text-align: center;
    letter-spacing: .3mm;
}

/* ==========================================================================
   7b. EMPLOYEE QR CODE CARD  (admin-id-card.php)
   ========================================================================== */

.gls-qr-card {
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}

.gls-qr-card-employee {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
}

.gls-qr-card-photo {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    background: #eee;
    flex-shrink: 0;
}

.gls-qr-card-initials {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gls-burgundy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.gls-qr-card-name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--gls-ink);
}

.gls-qr-card-meta {
    font-size: 13px;
    color: var(--gls-muted);
    margin-top: 2px;
}

.gls-qr-box {
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gls-qr-box canvas,
.gls-qr-box img {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

@media print {
    body { background: #fff !important; }
    .gls-no-print { display: none !important; }
    .gls-idcard { box-shadow: none; border: .2mm solid #ccc; page-break-inside: avoid; }
    .gls-idcard-sheet { gap: 6mm; }
    @page { margin: 10mm; }
}