/*!
 * ==========================================================
 * Hospital theme
 * Application CSS — single consolidated file
 * ==========================================================
 * Everything except per-entity styles lives here (tokens,
 * base, layout, header/footer, components, blocks, pages).
 * Entity styles stay next to their PHP in entities/{e}/style.css
 * — that separation is intentional (see project notes).
 * ==========================================================
 */



/* ==========================================================
   TOKENS
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Design Tokens
 * ==========================================================
 */


/* ---------- borders.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Design System - Borders
 * ==========================================================
 */

.border{
    border:var(--border-width-thin) solid var(--border-default);
}

.border-0{
    border:0;
}

.border-thin{
    border-width:var(--border-width-thin);
}

.border-medium{
    border-width:var(--border-width-medium);
}

.border-thick{
    border-width:var(--border-width-thick);
}

.border-light{
    border-color:var(--border-light);
}

.border-default{
    border-color:var(--border-default);
}

.border-strong{
    border-color:var(--border-strong);
}

.border-top{
    border-top:var(--border-width-thin) solid var(--border-default);
}

.border-right{
    border-right:var(--border-width-thin) solid var(--border-default);
}

.border-bottom{
    border-bottom:var(--border-width-thin) solid var(--border-default);
}

.border-left{
    border-left:var(--border-width-thin) solid var(--border-default);
}

/* ---------- breakpoints.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Design System - Breakpoints
 * ==========================================================
 */

/* Mobile */
@media (max-width:575.98px){

    .hide-mobile{
        display:none !important;
    }

}

/* Tablet */
@media (min-width:576px) and (max-width:991.98px){

    .hide-tablet{
        display:none !important;
    }

}

/* Desktop */
@media (min-width:992px){

    .hide-desktop{
        display:none !important;
    }

}

/* Wide */
@media (min-width:1400px){

    .container{
        max-width:1400px;
    }

}


/* ---------- grid.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Design System - Grid
 * ==========================================================
 */

.container{
    width:100%;
    max-width:1200px;
    margin-inline:auto;
    padding-inline:var(--space-content);
}

.container-sm{
    max-width:768px;
}

.container-md{
    max-width:992px;
}

.container-lg{
    max-width:1200px;
}

.container-xl{
    max-width:1400px;
}

.grid{
    display:grid;
    gap:var(--space-component);
}

.grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.grid-auto{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

@media (max-width:767.98px){

    .grid-2,
    .grid-3,
    .grid-4{
        grid-template-columns:1fr;
    }

}


/* ---------- icons.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Design System - Icons
 * ==========================================================
 */

.icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1em;
    height:1em;
    flex-shrink:0;
    color:currentColor;
    fill:currentColor;
}

.icon-xs{font-size:.75rem;}
.icon-sm{font-size:1rem;}
.icon-md{font-size:1.25rem;}
.icon-lg{font-size:1.5rem;}
.icon-xl{font-size:2rem;}

.icon-primary{color:var(--icon-primary);}
.icon-secondary{color:var(--icon-secondary);}
.icon-muted{color:var(--icon-muted);}

.icon-leading{margin-right:var(--space-inline);}
.icon-trailing{margin-left:var(--space-inline);}


/* ---------- layers.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Design System - Layers
 * ==========================================================
 */

.layer-base{
    z-index:var(--layer-base);
}

.layer-header{
    z-index:var(--layer-header);
}

.layer-navigation{
    z-index:var(--layer-navigation);
}

.layer-dropdown{
    z-index:var(--layer-dropdown);
}

.layer-popup{
    z-index:var(--layer-popup);
}

.layer-modal{
    z-index:var(--layer-modal);
}

.layer-toast{
    z-index:var(--layer-toast);
}

.layer-system{
    z-index:var(--layer-system);
}


/* ---------- motion.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Design System - Motion
 * ==========================================================
 */

.motion{
    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        opacity var(--transition-normal),
        transform var(--transition-normal);
}

.motion-fast{
    transition:all var(--transition-fast);
}

.motion-slow{
    transition:all var(--transition-slow);
}

.fade-in{
    opacity:1;
}

.fade-out{
    opacity:0;
}

.scale-hover:hover{
    transform:scale(1.02);
}

.lift-hover:hover{
    transform:translateY(-2px);
}

.press:active{
    transform:scale(.98);
}

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

}


/* ---------- radius.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Design System - Radius
 * ==========================================================
 */

.radius-none{
    border-radius:var(--radius-none);
}

.radius-xs{
    border-radius:var(--radius-xs);
}

.radius-sm{
    border-radius:var(--radius-sm);
}

.radius-md{
    border-radius:var(--radius-md);
}

.radius-lg{
    border-radius:var(--radius-lg);
}

.radius-xl{
    border-radius:var(--radius-xl);
}

.radius-round{
    border-radius:var(--radius-round);
}


/* ---------- shadows.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Design System - Shadows
 * ==========================================================
 */

.shadow-none{
    box-shadow:none;
}

.shadow-xs{
    box-shadow:var(--shadow-xs);
}

.shadow-sm{
    box-shadow:var(--shadow-sm);
}

.shadow-md{
    box-shadow:var(--shadow-md);
}

.shadow-lg{
    box-shadow:var(--shadow-lg);
}

.shadow-card{
    box-shadow:var(--shadow-card);
}

.shadow-dropdown{
    box-shadow:var(--shadow-dropdown);
}

.shadow-modal{
    box-shadow:var(--shadow-modal);
}


/* ---------- spacing.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Design System - Spacing
 * ==========================================================
 */

.region{
    padding-block:var(--space-region);
}

.region-sm{
    padding-block:var(--space-block);
}

.region-lg{
    padding-block:var(--space-10);
}

.section{
    margin-bottom:var(--space-block);
}

.section:last-child{
    margin-bottom:0;
}

.stack-xs > * + *{
    margin-top:var(--space-2);
}

.stack-sm > * + *{
    margin-top:var(--space-3);
}

.stack-md > * + *{
    margin-top:var(--space-4);
}

.stack-lg > * + *{
    margin-top:var(--space-5);
}

.stack-xl > * + *{
    margin-top:var(--space-7);
}

.cluster{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-component);
}

.inline{
    display:flex;
    align-items:center;
    gap:var(--space-inline);
}


/* ---------- typography.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Design System - Typography
 * ==========================================================
 */

.display-xl{
    font-family:var(--font-family-heading);
    font-size:var(--font-size-display-xl);
    font-weight:var(--font-weight-bold);
    line-height:var(--line-height-display);
    letter-spacing:var(--letter-spacing-tight);
}

.display-lg{
    font-family:var(--font-family-heading);
    font-size:var(--font-size-display-lg);
    font-weight:var(--font-weight-bold);
    line-height:var(--line-height-display);
    letter-spacing:var(--letter-spacing-tight);
}

.display-md{
    font-family:var(--font-family-heading);
    font-size:var(--font-size-display-md);
    font-weight:var(--font-weight-bold);
    line-height:var(--line-height-display);
}

.page-title{
    font-family:var(--font-family-heading);
    font-size:var(--font-size-page-title);
    font-weight:var(--font-weight-bold);
    line-height:var(--line-height-heading);
}

.section-title{
    font-family:var(--font-family-heading);
    font-size:var(--font-size-section-title);
    font-weight:var(--font-weight-bold);
    line-height:var(--line-height-heading);
}

.subsection-title{
    font-family:var(--font-family-heading);
    font-size:var(--font-size-subsection-title);
    font-weight:var(--font-weight-semibold);
    line-height:var(--line-height-heading);
}

.card-title{
    font-size:var(--font-size-card-title);
    font-weight:var(--font-weight-semibold);
    line-height:var(--line-height-heading);
}

.card-subtitle{
    font-size:var(--font-size-card-subtitle);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-compact);
}

.lead{
    font-size:var(--font-size-lead);
    line-height:var(--line-height-body);
}

.body-lg{
    font-size:var(--font-size-body-lg);
    line-height:var(--line-height-body);
}

.body{
    font-size:var(--font-size-body);
    line-height:var(--line-height-body);
}

.body-sm{
    font-size:var(--font-size-body-sm);
    line-height:var(--line-height-body);
}

.label{
    font-size:var(--font-size-label);
    font-weight:var(--font-weight-medium);
}

.caption{
    font-size:var(--font-size-caption);
    line-height:var(--line-height-compact);
}

.meta{
    font-size:var(--font-size-meta);
    font-weight:var(--font-weight-medium);
    letter-spacing:var(--letter-spacing-wide);
}

.helper{
    font-size:var(--font-size-helper);
    line-height:var(--line-height-compact);
}


/* ---------- variables.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Design System - Variables (Design Tokens)
 * ==========================================================
 * Brand colors — rebranded to a green-white palette to match
 * a client-selected reference design (medical/clinic feel):
 *   - Primary green: var(--brand-primary) (was blue #2454E0 originally)
 *   - Teal accent:   var(--brand-secondary) (kept — still coherent with green)
 *   - Alert red:     #B8121F — reserved for emergency use only,
 *                     not used decoratively in the new system
 * Everything else (spacing, radius, shadows, type scale) is a
 * fresh, modern scale built to satisfy every var(--...) already
 * referenced across assets/css/**.
 * ========================================================== */

:root {

    /* ----------------------------------------------------
       1. Brand color ramps
    ---------------------------------------------------- */

    --white: #fff;

    --brand-primary: #059669;
    --brand-primary-dark: #047857;
    --brand-primary-light: #ECFDF5;
    --brand-accent: #13AB7B;
    --brand-secondary: #0EA5B7;
    --brand-cta: #FF8A4C;
    --brand-cta-alt: #FE8B4B;
    --brand-cta-deep: #D97706;
    --brand-primary-rgb: 5,150,105;
    --brand-accent-rgb: 19,171,123;
    --brand-secondary-rgb: 14,165,183;
    --brand-cta-rgb: 255,138,76;
    --primary-500-rgb: 16,185,129;
    --brand-accent-t1: #DBF0E9;
    --brand-accent-t2: #E8F3EF;
    --brand-accent-t3: #CFE6DC;
    --brand-accent-t4: #D9EAE2;
    --brand-accent-t5: #EAF6F1;
    --brand-accent-t6: #9BD5BF;
    --brand-accent-t7: #D3EBE1;
    --brand-accent-t8: #B3DDCC;
    --brand-accent-t9: #EEF6F2;
    --brand-accent-t10: #DDF0E9;
    --brand-accent-t11: #E4F3EE;
    --brand-accent-t12: #E7F6F0;
    --brand-accent-t13: #E2EFEA;
    --brand-accent-d1: #0F8A63;
    --brand-accent-d2: #3B9670;
    --brand-accent-d3: #0E8F66;
    --brand-accent-d4: #23694C;
    --brand-accent-d5: #0F8C63;

    --primary-50:  var(--brand-primary-light);
    --primary-100: #D1FAE5;
    --primary-200: #A7F3D0;
    --primary-300: #6EE7B7;
    --primary-400: #34D399;
    --primary-500: #10B981;  /* main brand green */
    --primary-600: var(--brand-primary);  /* used for buttons and accents */
    --primary-700: var(--brand-primary-dark);
    --primary-800: #065F46;
    --primary-900: #064E3B;

    --teal-50:  #E5F8FA;
    --teal-100: #BFEDF1;
    --teal-200: #92E0E7;
    --teal-300: #5FCEDA;
    --teal-400: #2FBACB;
    --teal-500: var(--brand-secondary);  /* refreshed accent teal */
    --teal-600: #0B8494;
    --teal-700: #08636F;

    --gray-50:  #FAFAFA;
    --gray-100: #F1F1F1;  /* border, from old site */
    --gray-200: #E5E5E5;  /* border, from old site */
    --gray-300: #D4D4D4;
    --gray-400: #A8A9AB;
    --gray-500: #78797B;  /* icon border, from old site */
    --gray-600: #5C5D5F;
    --gray-700: #454547;
    --gray-800: #333333;  /* dark badge bg, from old site */
    --gray-900: #1A1A1B;

    --red-50:  #FDEBEC;
    --red-500: #E11D2E;   /* refreshed danger red */
    --red-600: #B8121F;   /* deeper red — reserved for emergency use only */

    --green-50:  #E9F9EF;
    --green-500: #16A34A; /* refreshed success green */

    --amber-50:  #FFF3E5;
    --amber-500: #D97706; /* refreshed warning amber */


    /* ----------------------------------------------------
       2. Semantic colors
    ---------------------------------------------------- */

    --color-primary: var(--primary-600);
    --color-info:     var(--teal-500);
    --color-success:  var(--green-500);
    --color-warning:  var(--amber-500);
    --color-danger:   var(--red-500);

    --text-primary:   var(--gray-800);
    --text-secondary: var(--gray-600);
    --text-muted:      var(--gray-500);
    --text-inverse:    var(--white);

    --surface-page:    var(--white);
    --surface-section:  var(--gray-50);
    --surface-card:      var(--white);
    --surface-overlay:   rgba(26, 26, 27, 0.6);

    --border-light:  var(--gray-100);
    --border-default: var(--gray-200);
    --border-strong:  var(--gray-400);

    --icon-primary:  var(--primary-600);
    --icon-secondary: var(--teal-500);
    --icon-muted:      var(--gray-500);


    /* ----------------------------------------------------
       3. Spacing scale (4px base grid)
    ---------------------------------------------------- */

    --space-1: 0.25rem;   /* 4px  */
    --space-2: 0.5rem;    /* 8px  */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 1.75rem;   /* 28px */
    --space-7: 2rem;      /* 32px */
    --space-8: 2.5rem;    /* 40px */
    --space-10: 4rem;     /* 64px */

    --space-inline:    var(--space-3);
    --space-component: var(--space-4);
    --space-content:   var(--space-5);
    --space-block:      var(--space-7);
    /* Bloklar arasındakı aralıq: səhifə konstruktordan yığılır,
       ona görə hər bloka ayrıca yox, ümumi ölçüyə baxılır. */
    --space-region:     5.5rem;


    /* ----------------------------------------------------
       4. Radius scale
    ---------------------------------------------------- */

    --radius-none:  0;
    --radius-xs:    calc(0.25rem * var(--rs, 1));
    --radius-sm:    calc(0.375rem * var(--rs, 1));
    --radius-md:    calc(0.5rem * var(--rs, 1));
    --radius-lg:    calc(0.75rem * var(--rs, 1));
    --radius-xl:    calc(1rem * var(--rs, 1));
    --radius-round: 50%;
    --radius-pill:  999px;

    --radius-button: var(--radius-sm);
    --radius-input:  var(--radius-sm);
    --radius-card:   var(--radius-lg);
    --radius-modal:  var(--radius-xl);


    /* ----------------------------------------------------
       5. Borders
    ---------------------------------------------------- */

    --border-width-thin:   1px;
    --border-width-medium: 2px;
    --border-width-thick:  4px;


    /* ----------------------------------------------------
       6. Shadows
    ---------------------------------------------------- */

    --shadow-xs: 0 1px 2px rgba(26, 26, 27, 0.06);
    --shadow-sm: 0 2px 4px rgba(26, 26, 27, 0.08);
    --shadow-md: 0 6px 12px rgba(26, 26, 27, 0.10);
    --shadow-lg: 0 12px 24px rgba(26, 26, 27, 0.12);

    --shadow-card:     var(--shadow-sm);
    --shadow-dropdown: var(--shadow-md);
    --shadow-modal:    var(--shadow-lg);


    /* ----------------------------------------------------
       7. Typography
    ---------------------------------------------------- */

    --font-family-base:    'Open Sans', Arial, Helvetica, sans-serif;
    --font-family-heading: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:      700;

    --line-height-compact: 1.2;
    --line-height-heading: 1.3;
    --line-height-body:     1.6;
    --line-height-display:  1.15;

    --letter-spacing-tight: -0.01em;
    --letter-spacing-wide:   0.02em;

    /* Type scale */
    --font-size-caption:         0.75rem;   /* 12px */
    --font-size-helper:          0.8125rem; /* 13px */
    --font-size-meta:            0.875rem;  /* 14px */
    --font-size-label:           0.875rem;  /* 14px */
    --font-size-input:           0.9375rem; /* 15px */
    --font-size-button:          0.9375rem; /* 15px */
    --font-size-body-sm:         0.9375rem; /* 15px */
    --font-size-body:            1rem;      /* 16px */
    --font-size-body-lg:         1.125rem;  /* 18px */
    --font-size-lead:            1.25rem;   /* 20px */
    --font-size-card-subtitle:   1rem;      /* 16px */
    --font-size-card-title:      1.125rem;  /* 18px */
    --font-size-h4:              1.375rem;  /* 22px */
    --font-size-subsection-title: 1.5rem;    /* 24px */
    --font-size-section-title:   1.875rem;  /* 30px */
    --font-size-page-title:      2.25rem;   /* 36px */
    --font-size-display-sm:      2.25rem;   /* 36px */
    --font-size-display-md:      2.75rem;   /* 44px */
    --font-size-display-lg:      3.25rem;   /* 52px */
    --font-size-display-xl:      4rem;      /* 64px */


    /* ----------------------------------------------------
       8. Motion
    ---------------------------------------------------- */

    --transition-fast:   0.15s;
    --transition-normal: 0.25s;
    --transition-slow:    0.4s;

    --motion-normal: var(--transition-normal);
    --motion-easing:  cubic-bezier(0.4, 0, 0.2, 1);


    /* ----------------------------------------------------
       9. Z-index layers
    ---------------------------------------------------- */

    --layer-base:       0;
    --layer-header:      100;
    --layer-navigation:  200;
    --layer-dropdown:    300;
    --layer-popup:        400;
    --layer-toast:        500;
    --layer-modal:        600;
    --layer-system:       700;

}



/* ==========================================================
   BASE
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Base Styles
 * ==========================================================
 */


/* ---------- reset.css ---------- */

/*!
 * Reset System
 */

*,
*::before,
*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    font-size:16px;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

/* An anchor jump must not hide the section heading under the sticky header;
   the offset is set once for every page-builder section, so no block handles it itself. */
.has-sticky-header :is(section, .toc-block)[id] {
    scroll-margin-top: 100px;
}

body{
    min-width:320px;
    font-family:var(--font-family-base);
    font-size:var(--font-size-body);
    color:var(--text-primary);
    background:var(--surface-page);
    line-height:var(--line-height-body);
}

img,
picture,
svg,
video,
canvas{
    display:block;
    max-width:100%;
}

img{
    height:auto;
}

a{
    color:inherit;
    text-decoration:none;
}

/* The global reset above makes links invisible inside body copy —
   fine for nav/card/button-style links which get their own explicit
   styling, but any link a WYSIWYG editor drops into actual prose
   text needs to visibly read as a link. Scoped to every place on the
   site that renders editor content (wp_kses_post() output). */
.rich-content a,
.doctor-single__content a,
.doctor-single__content--boxed a,
.doctor-single__review-text a,
.doctor-single__review-reply-text a,
.documents-block__card-description a {
    color: var(--brand-accent);
    text-decoration: underline;
}

.rich-content a:hover,
.doctor-single__content a:hover,
.doctor-single__content--boxed a:hover,
.doctor-single__review-text a:hover,
.doctor-single__review-reply-text a:hover,
.documents-block__card-description a:hover {
    color: var(--brand-accent-d5);
}

/* A link that points straight at a .pdf (or other file) reads better
   with a small file icon in front — added automatically by CSS from
   the href itself, so editors just insert a normal link in the
   WYSIWYG and never have to touch an <img> tag. */
.rich-content a[href$=".pdf" i],
.doctor-single__content a[href$=".pdf" i],
.doctor-single__content--boxed a[href$=".pdf" i] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.rich-content a[href$=".pdf" i]::before,
.doctor-single__content a[href$=".pdf" i]::before,
.doctor-single__content--boxed a[href$=".pdf" i]::before {
    content: "";
    flex-shrink: 0;
    width: 56px;
    height: 58px;
    background-image: url("../images/icons/document-save.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

ul,
ol{
    list-style:none;
}

table{
    width:100%;
    border-collapse:collapse;
}

button,
input,
select,
textarea{
    font:inherit;
    color:inherit;
}

button{
    cursor:pointer;
    background:none;
    border:0;
}

textarea{
    resize:vertical;
}

:focus-visible{
    outline:2px solid var(--color-primary);
    outline-offset:2px;
}

[hidden]{
    display:none !important;
}


/* ---------- utilities.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Base - Utilities
 * ----------------------------------------------------------
 * Version : 1.0
 * Author  : HC Hospital
 * ==========================================================
 */




/* ==========================================================
   LAYOUT
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Layout System
 * ==========================================================
 */


/* ---------- container.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Layout System - Container
 * ==========================================================
 */

.container{
    width:100%;
    max-width:1200px;
    margin-inline:auto;
    padding-inline:var(--space-content);
}

.container-sm{
    max-width:576px;
}

.container-md{
    max-width:768px;
}

.container-lg{
    max-width:1200px;
}

.container-xl{
    max-width:1400px;
}

.container-fluid{
    width:100%;
    max-width:none;
    padding-inline:var(--space-content);
}

.container-none{
    max-width:none;
    padding-inline:0;
}


/* ---------- content.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Layout System - Content
 * ==========================================================
 */

.content{
    width:100%;
    max-width:100%;
}

.content-narrow{
    max-width:720px;
    margin-inline:auto;
}

.content-default{
    max-width:960px;
    margin-inline:auto;
}

.content-wide{
    max-width:1200px;
    margin-inline:auto;
}

.content-full{
    max-width:none;
    width:100%;
}

.content-center{
    margin-inline:auto;
}

.content-left{
    margin-left:0;
    margin-right:auto;
}

.content-right{
    margin-left:auto;
    margin-right:0;
}


/* ---------- footer-layout.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Layout System - Footer Layout
 * ==========================================================
 */

.site-footer{
    width:100%;
}

.footer-top{
    width:100%;
}

.footer-main{
    width:100%;
}

.footer-bottom{
    width:100%;
}

.footer-container{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--space-block);
}

.footer-column{
    min-width:0;
}

.footer-brand{
    display:flex;
    flex-direction:column;
    gap:var(--space-component);
}

.footer-navigation{
    display:flex;
    flex-direction:column;
    gap:var(--space-content);
}

.footer-bottom-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-component);
    padding-block:var(--space-content);
}

@media (max-width:991.98px){

    .footer-container{
        grid-template-columns:1fr;
    }

    .footer-bottom-container{
        flex-direction:column;
        align-items:flex-start;
    }

}


/* ---------- footer.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Layout - Footer
 * ----------------------------------------------------------
 * Version : 1.0
 * Author  : HC Hospital
 * ==========================================================
 */



/* ---------- header-layout.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Layout System - Header Layout
 * ==========================================================
 */

.site-header{
    width:100%;
}

.header-top{
    width:100%;
}

.header-main{
    width:100%;
}

.header-bottom{
    width:100%;
}

.header-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-component);
    min-height:80px;
}

.header-brand{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.header-navigation{
    display:flex;
    align-items:center;
    flex:1 1 auto;
    justify-content:center;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:var(--space-inline);
    flex-shrink:0;
}

@media (max-width:991.98px){

    .header-container{
        flex-wrap:wrap;
        min-height:auto;
    }

    .header-navigation{
        width:100%;
        justify-content:flex-start;
    }

}


/* ---------- header.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Layout - Header
 * ----------------------------------------------------------
 * Version : 1.0
 * Author  : HC Hospital
 * ==========================================================
 */



/* ---------- region.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Layout System - Region
 * ==========================================================
 */

.site-header{
    position:relative;
    width:100%;
}

.site-main{
    position:relative;
    flex:1 1 auto;
    width:100%;
}

.site-footer{
    position:relative;
    width:100%;
}

.page-header{
    width:100%;
}

.page-content{
    width:100%;
}

.page-sidebar{
    width:100%;
}

.region{
    width:100%;
}

.region-hidden{
    display:none;
}


/* ---------- section.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Layout System - Section
 * ==========================================================
 */

.section{
    position:relative;
    padding-block:var(--space-region);
}

.section-sm{
    padding-block:var(--space-block);
}

.section-lg{
    padding-block:var(--space-10);
}

.section-first{
    padding-top:0;
}

.section-last{
    padding-bottom:0;
}

.section-full{
    min-height:100vh;
}

.section-light{
    background:var(--surface-section);
}

.section-dark{
    background:var(--gray-900);
    color:var(--text-inverse);
}

.section-primary{
    background:var(--color-primary);
    color:var(--text-inverse);
}


/* ---------- sidebar.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Layout System - Sidebar
 * ==========================================================
 */

.layout-sidebar-right{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:var(--space-block);
}

.layout-sidebar-left{
    display:grid;
    grid-template-columns:320px minmax(0,1fr);
    gap:var(--space-block);
}

.layout-two-sidebars{
    display:grid;
    grid-template-columns:280px minmax(0,1fr) 280px;
    gap:var(--space-block);
}

.layout-full{
    display:block;
}

.sidebar{
    width:100%;
}

.sidebar-left{
    grid-column:1;
}

.sidebar-right{
    grid-column:-1;
}

.main-content{
    min-width:0;
}

@media (max-width:991.98px){

    .layout-sidebar-right,
    .layout-sidebar-left,
    .layout-two-sidebars{
        grid-template-columns:1fr;
    }

    .sidebar-left,
    .sidebar-right{
        grid-column:auto;
    }

}


/* ---------- wrapper.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Layout System - Wrapper
 * ==========================================================
 */

.site-wrapper{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.page-wrapper{
    width:100%;
    flex:1 1 auto;
}

.content-wrapper{
    width:100%;
}

.inner-wrapper{
    width:100%;
    max-width:100%;
    margin-inline:auto;
}

.center-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
}

.split-wrapper{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-component);
}

.stack-wrapper{
    display:flex;
    flex-direction:column;
    gap:var(--space-component);
}



/* ==========================================================
   PARTS (header/footer/nav)
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Site Chrome — topbar, navigation, mobile menu, footer
 * ==========================================================
 */

.site-topbar {
    font-size: var(--font-size-meta);
    background-color: var(--gray-50);
}

#site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--white);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* ==========================================================
   MOBILE SEARCH ROW ("row 2") + MOBILE BOTTOM NAV
   Row 1 (#site-header) always stays put; these two hide when
   scrolling down and slide back in when scrolling up — height
   of row 1 is read by JS into --mobile-header-height so row 2
   sticks in the right spot regardless of its actual height.
   ========================================================== */

.mobile-ticker {
    position: sticky;
    top: calc(var(--mobile-header-height, 64px) - 2px);
    z-index: 1025;
    overflow: hidden;
    background-color: var(--brand-accent-t1);
    padding-block: var(--space-1);
}

.mobile-ticker__track {
    display: flex;
    width: max-content;
    animation: mobile-ticker-scroll 18s linear infinite;
}

.mobile-ticker__text {
    flex-shrink: 0;
    padding-inline: var(--space-4);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
}

@keyframes mobile-ticker-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.mobile-search-bar {
    position: sticky;
    top: calc(var(--mobile-header-height, 64px) + var(--mobile-ticker-height, 0px) - 2px);
    z-index: 1020;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.mobile-search-bar.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.mobile-search-bar__field {
    position: relative;
    display: flex;
    align-items: center;
}

.mobile-search-bar__input {
    background-color: #F5F5F5;
    border: none;
    border-radius: var(--radius-pill, 999px);
    padding-right: 2.5rem;
    height: 36px;
}

.mobile-search-bar__input:focus {
    background-color: #F5F5F5;
    box-shadow: 0 0 0 2px rgba(var(--brand-accent-rgb), 0.25);
}

.mobile-search-bar__field-icon {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-primary);
    pointer-events: none;
}

.mobile-search-bar__toggle {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background-color: var(--white);
    border-top: 1.2px solid rgba(0, 0, 0, 0.35);
    padding-top: 8px;
    padding-bottom: var(--space-2);
    padding-inline: var(--space-3);
    overflow: visible;
}

.mobile-bottom-nav__notch {
    position: absolute;
    top: -16px;
    left: 50%;
    width: 80px;
    height: 28px;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: visible;
}

.mobile-bottom-nav.is-hidden {
    transform: translateY(calc(100% + 40px));
}

.mobile-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1 1 0;
    border: none;
    background: none;
    padding: var(--space-1) 0;
    margin-top: 6px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
}

.mobile-bottom-nav__icon {
    width: 22px;
    height: 22px;
}

.mobile-bottom-nav__item--cta {
    position: relative;
    margin-top: -20px;
    color: var(--brand-accent);
    font-weight: var(--font-weight-semibold);
}

.mobile-bottom-nav__cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-round);
    background-color: var(--brand-accent);
    box-shadow: 0 6px 14px rgba(var(--brand-accent-rgb), 0.4);
}

body {
    padding-bottom: 0;
}

@media (max-width: 991.98px) {

    body {
        padding-bottom: 74px;
    }

}

.site-topbar__logo-desktop,
.site-topbar__logo-mobile {
    width: auto;
}

.site-topbar__logo-mobile {
    max-width: 11rem;
    height: auto !important;
    max-height: 35px;
}

.site-topbar__phone-link {
    color: inherit;
}

.site-topbar__phone-link:hover .site-topbar__phone-number {
    text-decoration: underline;
}

.site-topbar__phone-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.site-topbar__phone-label,
.site-topbar__hours-label {
    font-size: var(--font-size-caption);
}

.site-topbar__phone-number,
.site-topbar__hours-value {
    font-size: var(--font-size-body-sm);
    color: var(--text-primary);
}

.site-topbar__cta,
.site-topbar__hotline,
.site-topbar__address {
    padding-inline: var(--space-5);
    white-space: nowrap;
    width: 180px;
    justify-content: center;
}

.site-topbar__hotline {
    background-color: var(--brand-cta-alt);
    border-color: var(--brand-cta-alt);
    color: var(--white);
}

.site-topbar__hotline:hover {
    filter: brightness(0.95);
    color: var(--white);
}

/* Hotline number (icon + number) and the account button at the right end */
.site-topbar__phone {
    gap: var(--space-2);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.125rem;
    white-space: nowrap;
}

.site-topbar__phone-icon {
    flex: 0 0 auto;
    color: var(--color-primary);
}

.site-topbar__phone:hover {
    color: var(--color-primary);
}

.site-topbar__account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 180px;
    padding-inline: var(--space-4);
    background-color: var(--white);
    border: var(--border-width-thin, 1px) solid var(--border-default);
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.site-topbar__account:hover,
.site-topbar__account:focus-visible {
    background-color: var(--white);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.site-topbar__account-icon {
    flex: 0 0 auto;
    color: var(--color-primary);
}

.site-topbar__account-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-topbar__user {
    position: relative;
}

.site-topbar__user > summary {
    width: auto;
    min-width: 180px;
    max-width: 230px;
    list-style: none;
    cursor: pointer;
}

.site-topbar__user > summary::-webkit-details-marker {
    display: none;
}

.site-topbar__account-caret {
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}

.site-topbar__user[open] .site-topbar__account-caret {
    transform: rotate(180deg);
}

.site-topbar__user[open] > summary {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.site-topbar__user-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    min-width: 100%;
    padding: var(--space-2) 0;
    background: var(--white);
    border: var(--border-width-thin, 1px) solid var(--border-default);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.site-topbar__user-item {
    display: block;
    padding: var(--space-2) var(--space-4);
    color: var(--text-primary);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.site-topbar__user-item:hover,
.site-topbar__user-item:focus-visible {
    background: var(--surface-muted, #f3f6f5);
    color: var(--color-primary);
}

.site-topbar__user-item--logout {
    border-top: var(--border-width-thin, 1px) solid var(--border-light, #eef1f0);
    color: #b42318;
}

@media (min-width: 992px) and (max-width: 1199.98px) {

    .site-topbar__container {
        flex-wrap: nowrap !important;
    }

    .site-topbar__right,
    .site-topbar__actions {
        flex-wrap: nowrap !important;
        gap: var(--space-3) !important;
    }

    .site-topbar__logo-desktop {
        height: 32px;
        width: auto;
    }

    .site-topbar__cta,
    .site-topbar__address,
    .site-topbar__account {
        width: auto;
        padding-inline: var(--space-4);
    }
}

/* A bit more pronounced than Bootstrap's .shadow-sm utility class
   already on the element in the markup — needs !important to win,
   since .shadow-sm itself is declared with !important. */
.site-navigation.shadow-sm {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}

.site-navigation__menu {
    min-width: 0; /* lets the flex container shrink instead of overflowing */
}

.site-navigation__menu .navbar-nav {
    flex-wrap: wrap; /* items wrap to a second line instead of running off screen */
    row-gap: var(--space-2);
    justify-content: space-between;
    width: 100%;
}

.site-navigation__menu .navbar-nav .menu-item > a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    font-size: 1.0625rem; /* 17px (was 15px) */
    white-space: nowrap;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.site-navigation__menu .navbar-nav .menu-item > a:hover {
    color: var(--color-primary);
    background-color: var(--primary-50);
}

.site-navigation__menu .navbar-nav .current-menu-item > a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.site-navigation__search {
    flex: 0 0 auto;
    width: 15rem;
}

.site-navigation__search-field {
    position: relative;
    width: 100%;
}

.site-navigation__search-input {
    width: 100%;
    padding: 0.55rem 2.75rem 0.55rem 1.1rem;
    background-color: var(--brand-surface);
    border: none;
    border-radius: var(--radius-pill, 999px);
    font-size: 0.9375rem;
    -webkit-appearance: none;
    appearance: none;
}

.site-navigation__search-input::-webkit-search-decoration,
.site-navigation__search-input::-webkit-search-cancel-button,
.site-navigation__search-input::-webkit-search-results-button,
.site-navigation__search-input::-webkit-search-results-decoration {
    display: none;
}

.site-navigation__search-input::placeholder {
    color: #7D7D7D;
}

.site-navigation__search-input:focus {
    background-color: #fff;
    box-shadow: 0 0 0 2px var(--color-primary, var(--brand-accent));
}

.site-navigation__search-icon {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: #232323;
    pointer-events: none;
}

.site-mobile-menu__list .menu-item > a {
    display: block;
    padding-block: var(--space-3);
    color: var(--text-primary);
    border-bottom: var(--border-width-thin) solid var(--border-light);
}

.site-footer-main a {
    text-decoration: none;
}

.site-footer-main a:hover {
    color: var(--color-primary) !important;
}

.site-footer-main__heading {
    font-size: var(--font-size-body);
    color: var(--text-primary);
}

.site-footer-main__socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.site-footer-main__social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-round);
    color: var(--white) !important;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.site-footer-main__social:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    color: var(--white) !important;
}

.site-footer-main__social .dashicons {
    font-size: 1.1rem;
    width: auto;
    height: auto;
}

.site-footer-main__list a {
    color: inherit;
}

.site-footer-main__list li {
    margin-bottom: var(--space-2);
}


/* ==========================================================
   COMPONENT: accordion
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Component System - Accordion
 * ==========================================================
 */

/* ==========================================================================
   Accordion
   ========================================================================== */

.accordion{
    display:flex;
    flex-direction:column;
}

/*
 * Sual-cavab blokları saytda hər yerdə eyni görünür — referans
 * səhifədəki kimi: kart deyil, nazik xətlərlə ayrılmış sətirlər.
 *
 * Qonşu elementlərin arasında iki xətt üst-üstə düşməsin deyə
 * yuxarı sərhəd yalnız birincidə qalır.
 */

.accordion-item{
    background:transparent;

    border:0;
    border-top:1px solid rgba(0,0,0,.2);
    border-bottom:1px solid rgba(0,0,0,.2);
    border-radius:0;
}

.accordion-item+.accordion-item{
    border-top:0;
}

.accordion-item:hover{
    box-shadow:none;
}

/* ==========================================================================
   Header
   ========================================================================== */

.accordion-header{
    width:100%;
    margin:0;
}

.accordion-button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-component);

    width:100%;
    min-height:0;

    padding:15px 0;

    background:transparent;
    border:0;
    box-shadow:none;

    font-family:var(--font-family-heading);
    font-size:24px;
    font-weight:var(--font-weight-semibold);
    line-height:1.3;

    /* Bağlı sual yaşıl, açıq sual tünd — oxucu bir baxışda harada
       olduğunu görür. */
    color:var(--color-primary);

    text-align:start;

    cursor:pointer;

    transition:var(--transition-fast);
}

.accordion-button:not(.collapsed){
    background:transparent;
    box-shadow:none;
    color:var(--text-primary);
}

.accordion-button:hover{
    background:transparent;
}

/*
 * Bootstrap düyməyə fokus düşəndə mavi çərçivə çəkir
 * (.accordion-button:focus). Siçanla klikdən sonra o, bağlanmış
 * bölmənin üstündə qalır və səhv seçilmiş element təəssüratı
 * yaradır.
 *
 * Çərçivə tamamilə silinmir: siçan üçün söndürülür, klaviatura
 * üçün saxlanılır. Tab ilə gəzən adam hansı sualın üzərində
 * olduğunu görməlidir — əks halda blok klaviatura ilə
 * istifadəolunmaz olur.
 */
.accordion-button:focus{
    outline:0;
    box-shadow:none;
}

.accordion-button:focus-visible{
    background:transparent;
    outline:2px solid var(--color-primary);
    outline-offset:-2px;
}

.accordion-button.collapsed:hover{
    color:var(--primary-700,var(--brand-primary-dark));
}

/* ==========================================================================
   Icon
   ========================================================================== */

/*
 * Dairənin içindəki «+» və «−» iki fon zolağı ilə çəkilir: üfüqi
 * zolaq həmişə görünür, şaquli isə yalnız bağlı vəziyyətdə. Şəkil
 * deyil, ona görə ekran böyüdüləndə bulanmır və rəngi dəyişəndə
 * yeni fayl lazım olmur.
 *
 * Bootstrap açıq düymənin ::after-ını ayrıca, daha spesifik
 * qaydayla şəkilə qaytarır və 180 dərəcə çevirir — hər iki
 * vəziyyət açıq yazılmasa, minusun yanında şevron peyda olur.
 */
.accordion-button::after{
    flex:0 0 auto;

    width:40px;
    height:40px;

    background-color:var(--color-primary);
    background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
    background-repeat:no-repeat;
    background-position:center,center;
    background-size:12px 2px,2px 12px;

    border-radius:50%;

    content:"";

    transform:none;
    transition:background-size var(--motion-fast,.15s) var(--motion-easing,ease);
}

.accordion-button:not(.collapsed)::after{
    background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
    background-size:12px 2px,0 0;
    transform:none;
}

.accordion{
    --bs-accordion-btn-icon:none;
    --bs-accordion-btn-active-icon:none;
    --bs-accordion-btn-icon-transform:none;
}

.accordion-icon{
    display:none;
}

/* ==========================================================================
   Content
   ========================================================================== */

.accordion-body{
    padding:0 1.25rem 30px 0;

    font-size:var(--font-size-body);
    line-height:1.75;
    color:var(--text-secondary);
}

.accordion-content{
    display:none;

    padding:0 1.25rem 30px 0;
}

.accordion-content.is-active{
    display:block;
}

/* ==========================================================================
   Borderless
   ========================================================================== */

.accordion-borderless .accordion-item{
    border:0;
    box-shadow:none;
}

/* ==========================================================================
   Compact
   ========================================================================== */

.accordion-sm .accordion-button{
    padding:1rem 0;
    font-size:1.0625rem;
}

.accordion-lg .accordion-button{
    padding:1.5rem 0;
}

@media all and (max-width:1150px){

    .accordion-button{
        font-size:22px;
    }
}

@media all and (max-width:768px){

    .accordion-button{
        font-size:16px;
        padding:12px 0;
    }

    .accordion-button::after{
        width:30px;
        height:30px;
        background-size:10px 2px,2px 10px;
    }

    .accordion-button:not(.collapsed)::after{
        background-size:10px 2px,0 0;
    }

    .accordion-body{
        padding:0 0 20px;
        font-size:14px;
    }
}

/* ==========================================================
   COMPONENT: alert
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Component System - Alert
 * ==========================================================
 */

.alert{
    display:flex;
    align-items:flex-start;
    gap:var(--space-component);

    width:100%;

    padding:var(--space-component);

    border:var(--border-width-thin) solid transparent;
    border-radius:var(--radius-card);

    line-height:var(--line-height-body);
}

.alert-icon{
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    width:24px;
    height:24px;
}

.alert-content{
    flex:1 1 auto;
    min-width:0;
}

.alert-title{
    margin-bottom:var(--space-2);

    font-size:var(--font-size-card-title);
    font-weight:var(--font-weight-semibold);
}

.alert-text{
    color:inherit;
}

.alert-close{
    display:flex;
    align-items:center;
    justify-content:center;

    width:32px;
    height:32px;

    margin-left:auto;

    cursor:pointer;

    border-radius:50%;

    transition:var(--transition-fast);
}

.alert-close:hover{
    background:rgba(0,0,0,.08);
}

/* ==========================================================================
   Variants
   ========================================================================== */

.alert-primary{
    color:var(--color-primary);
    background:var(--primary-50);
    border-color:var(--primary-200);
}

.alert-success{
    color:var(--color-success);
    background:var(--green-50);
    border-color:#BBF7D0;
}

.alert-warning{
    color:#92400E;
    background:var(--amber-50);
    border-color:#FDE68A;
}

.alert-danger{
    color:var(--color-danger);
    background:var(--red-50);
    border-color:#FECACA;
}

.alert-info{
    color:var(--color-info);
    background:var(--teal-50);
    border-color:#A5F3FC;
}

/* ==========================================================
   COMPONENT: avatar
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Component System - Avatar
 * ==========================================================
 */

/* ==========================================================================
   Avatar
   ========================================================================== */

.avatar{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
    flex-shrink:0;

    width:48px;
    height:48px;

    border-radius:50%;

    background:var(--surface-section);

    color:var(--text-primary);

    font-weight:var(--font-weight-semibold);
    font-size:var(--font-size-body);

    user-select:none;
}

.avatar img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* ==========================================================================
   Sizes
   ========================================================================== */

.avatar-xs{
    width:24px;
    height:24px;

    font-size:.625rem;
}

.avatar-sm{
    width:32px;
    height:32px;

    font-size:.75rem;
}

.avatar-md{
    width:48px;
    height:48px;

    font-size:var(--font-size-body);
}

.avatar-lg{
    width:64px;
    height:64px;

    font-size:1.25rem;
}

.avatar-xl{
    width:96px;
    height:96px;

    font-size:2rem;
}

/* ==========================================================================
   Shapes
   ========================================================================== */

.avatar-rounded{
    border-radius:var(--radius-md);
}

.avatar-square{
    border-radius:0;
}

/* ==========================================================================
   Status
   ========================================================================== */

.avatar-status{
    position:relative;
}

.avatar-status::after{
    content:"";

    position:absolute;

    right:2px;
    bottom:2px;

    width:12px;
    height:12px;

    border:2px solid var(--surface-card);
    border-radius:50%;

    background:var(--gray-400);
}

.avatar-online::after{
    background:var(--color-success);
}

.avatar-away::after{
    background:var(--color-warning);
}

.avatar-busy::after{
    background:var(--color-danger);
}

.avatar-offline::after{
    background:var(--gray-500);
}

/* ==========================================================
   COMPONENT: badge
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Component System - Badge
 * ==========================================================
 */

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:24px;
    padding:.25rem .75rem;

    font-size:var(--font-size-caption);
    font-weight:var(--font-weight-semibold);
    line-height:1;

    border-radius:var(--radius-round);

    white-space:nowrap;
}

.badge-primary{
    background:var(--color-primary);
    color:var(--text-inverse);
}

.badge-secondary{
    background:var(--surface-section);
    color:var(--text-primary);
}

.badge-success{
    background:var(--color-success);
    color:var(--text-inverse);
}

.badge-warning{
    background:var(--color-warning);
    color:var(--text-inverse);
}

.badge-danger{
    background:var(--color-danger);
    color:var(--text-inverse);
}

.badge-info{
    background:var(--color-info);
    color:var(--text-inverse);
}

.badge-outline{
    background:transparent;
    color:var(--color-primary);
    border:var(--border-width-thin) solid var(--color-primary);
}

.badge-sm{
    min-height:20px;
    padding:.125rem .5rem;
    font-size:.6875rem;
}

.badge-lg{
    min-height:30px;
    padding:.375rem 1rem;
    font-size:var(--font-size-label);
}

/* ==========================================================
   COMPONENT: button
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Component System - Button
 * ==========================================================
 */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-inline);

    min-height:44px;
    padding:.75rem 1.5rem;

    font-size:var(--font-size-button);
    font-weight:var(--font-weight-medium);
    line-height:1;

    border:var(--border-width-thin) solid transparent;
    border-radius:var(--radius-button);

    cursor:pointer;
    user-select:none;
    text-decoration:none;

    transition:var(--transition-normal);
}

/* Modifier: pill shape. Add it to any .btn that must be fully rounded (top bar,
   pill panels, CTA buttons) without changing --radius-button for ordinary buttons. */
.btn-pill {
    border-radius: var(--radius-pill, 999px) !important;
}

.btn-primary{
    background:var(--color-primary);
    color:var(--text-inverse);
}

.btn-primary:hover{
    filter:brightness(.95);
}

/* Bootstrap utility classes are overridden so they follow our palette
   instead of Bootstrap's hard-coded blue. */
.bg-primary{
    background-color:var(--color-primary) !important;
}

.text-primary{
    color:var(--color-primary) !important;
}

.border-primary{
    border-color:var(--color-primary) !important;
}

.btn-secondary{
    background:var(--surface-section);
    color:var(--text-primary);
    border-color:var(--border-default);
}

.btn-outline{
    background:transparent;
    color:var(--color-primary);
    border-color:var(--color-primary);
}

.btn-text{
    background:transparent;
    color:var(--color-primary);
    padding-inline:0;
}

.btn-sm{
    min-height:36px;
    padding:.5rem 1rem;
}

.btn-lg{
    min-height:52px;
    padding:1rem 2rem;
}

.btn-block{
    display:flex;
    width:100%;
}

.btn:disabled,
.btn-disabled{
    opacity:.5;
    pointer-events:none;
}

/* ==========================================================
   COMPONENT: card
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Component System - Card
 * ==========================================================
 */

.card{
    display:flex;
    flex-direction:column;
    background:var(--surface-card);
    border:var(--border-width-thin) solid var(--border-light);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-card);
    overflow:hidden;
    transition:var(--transition-normal);
}

.card:hover{
    box-shadow:var(--shadow-dropdown);
}

.card-header{
    padding:var(--space-component);
    border-bottom:var(--border-width-thin) solid var(--border-light);
}

.card-body{
    flex:1 1 auto;
    padding:var(--space-component);
}

.card-footer{
    padding:var(--space-component);
    border-top:var(--border-width-thin) solid var(--border-light);
}

.card-title{
    margin:0 0 var(--space-content);
}

.card-subtitle{
    margin-bottom:var(--space-component);
    color:var(--text-secondary);
}

.card-text{
    color:var(--text-primary);
}

.card-image{
    display:block;
    width:100%;
    height:auto;
}

.card-actions{
    display:flex;
    align-items:center;
    gap:var(--space-inline);
    margin-top:var(--space-component);
}


/* ==========================================================
   COMPONENT: entity-layout (slider/carousel/list)
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Component: Entity Layout Variants
 * ==========================================================
 * Shared layout wrappers for entity listing blocks
 * (doctors, centers, equipment, services) on the Page Builder.
 * Works with whatever card markup EntityManager::card() renders
 * inside — this only controls the outer arrangement.
 * ========================================================== */


/* ==========================================================
   1. Slider (CSS-only horizontal scroll, no JS)
   ========================================================== */

.entity-slider {
    position: relative;
}

.entity-slider__track {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.entity-slider__item {
    flex: 0 0 auto;
    width: 85%;
    scroll-snap-align: start;
}

@media (min-width: 576px) {

    .entity-slider__item {
        width: 60%;
    }

}

@media (min-width: 992px) {

    .entity-slider__item {
        width: calc((100% - (2 * var(--space-4))) / 3);
    }

    .entity-slider__item--cols-2 {
        width: calc((100% - var(--space-4)) / 2);
    }

    .entity-slider__item--cols-4 {
        width: calc((100% - (3 * var(--space-4))) / 4);
    }

}


/* ==========================================================
   2. Carousel (Bootstrap carousel, grouped cards per slide)
   ========================================================== */

.entity-carousel {
    padding-bottom: var(--space-5);
}

.entity-carousel .carousel-item {
    padding-inline: var(--space-2);
}

.entity-carousel .carousel-control-prev,
.entity-carousel .carousel-control-next {
    width: 3rem;
    height: 3rem;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--surface-card);
    border-radius: var(--radius-round);
    box-shadow: var(--shadow-md);
    opacity: 1;
}

.entity-carousel .carousel-control-prev {
    left: -1.5rem;
}

.entity-carousel .carousel-control-next {
    right: -1.5rem;
}

.entity-carousel .carousel-control-prev-icon,
.entity-carousel .carousel-control-next-icon {
    filter: invert(1) grayscale(100);
    width: 1.25rem;
    height: 1.25rem;
}

.entity-carousel .carousel-indicators {
    position: static;
    margin-top: var(--space-4);
}

.entity-carousel .carousel-indicators [data-bs-target] {
    background-color: var(--gray-300);
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
}

.entity-carousel .carousel-indicators .active {
    background-color: var(--color-primary);
}

@media (max-width: 575.98px) {

    .entity-carousel .carousel-control-prev,
    .entity-carousel .carousel-control-next {
        display: none;
    }

}


/* ==========================================================
   3. List (single-column vertical stack)
   ========================================================== */

.entity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ==========================================================
   COMPONENT: link
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Component System - Link
 * ==========================================================
 */

.link{
    color:var(--color-primary);
    text-decoration:none;
    transition:var(--transition-normal);
}

.link:hover{
    text-decoration:underline;
}

.link-muted{
    color:var(--text-secondary);
}

.link-inverse{
    color:var(--text-inverse);
}

.link-icon{
    display:inline-flex;
    align-items:center;
    gap:var(--space-inline);
}

.link-external::after{
    content:"↗";
    margin-left:.35rem;
    font-size:.85em;
}

.link-disabled{
    opacity:.5;
    pointer-events:none;
    text-decoration:none;
}

.link-block{
    display:block;
}

.link-underline{
    text-decoration:underline;
}

.link-no-underline{
    text-decoration:none;
}


/* ==========================================================
   COMPONENT: list
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Component System - List
 * ==========================================================
 */

/* ==========================================================================
   Base
   ========================================================================== */

.list{
    display:flex;
    flex-direction:column;

    margin:0;
    padding:0;

    list-style:none;
}

.list-item{
    display:flex;
    align-items:flex-start;
    gap:var(--space-content);

    padding:var(--space-content) 0;
}

/* ==========================================================================
   Divided
   ========================================================================== */

.list-divided .list-item{
    border-bottom:var(--border-width-thin) solid var(--border-light);
}

.list-divided .list-item:last-child{
    border-bottom:0;
}

/* ==========================================================================
   Inline
   ========================================================================== */

.list-inline{
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    gap:var(--space-component);
}

.list-inline .list-item{
    padding:0;
}

/* ==========================================================================
   Ordered / Unordered
   ========================================================================== */

.list-disc{
    list-style:disc;
    padding-left:1.5rem;
}

.list-decimal{
    list-style:decimal;
    padding-left:1.5rem;
}

/* ==========================================================================
   Icon List
   ========================================================================== */

.list-icon{
    display:flex;
    align-items:flex-start;
    gap:var(--space-inline);
}

.list-icon .icon{
    flex-shrink:0;
    margin-top:.15rem;
}

/* ==========================================================================
   Sizes
   ========================================================================== */

.list-sm .list-item{
    padding:var(--space-2) 0;
}

.list-lg .list-item{
    padding:var(--space-5) 0;
}

/* ==========================================================================
   States
   ========================================================================== */

.list-hover .list-item{
    transition:var(--transition-fast);
}

.list-hover .list-item:hover{
    background:var(--surface-section);
}

/* ==========================================================
   BLOCKS
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Block Styles
 * ==========================================================
 */


/* ---------- cta.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Block System - CTA
 * ==========================================================
 */

.cta{
    padding-block:var(--space-region);
}

.cta-container{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-block);

    padding:var(--space-8);

    background:#fff;
    color:#000;
    border:1px solid rgba(0,0,0,.1);

    border-radius:var(--radius-xl);
    overflow:hidden;
}

.cta-image{
    flex:0 0 auto;
    align-self:flex-end;
    width:auto;
    margin-bottom:calc(-1 * var(--space-8));
}

.cta-image img{
    display:block;
    width:100%;
    height:400px;
    object-fit:contain;
}

.cta-content{
    flex:1 1 320px;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-component);
}

.cta-title{
    margin:0;
    color:inherit;
}

.cta-text{
    margin:0;
    color:inherit;
    opacity:.9;
    max-width:60ch;
}

.cta-actions{
    flex:0 0 auto;
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-inline);
    justify-content:flex-start;
    margin-top:var(--space-component);
}

.cta-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 32px;
    min-height:42px;
    text-decoration:none;
    text-align:center;
    background-color:var(--brand-accent-t1);
    border-radius:calc(40px * var(--rs, 1));
    border:none;
    cursor:pointer;
    font-weight:700;
    color:#000;
    transition:.2s;
}

.cta-button:hover{
    color:#fff;
    background-color:var(--brand-accent);
}

.cta-button--outline{
    background-color:transparent;
    border:1px solid rgba(0,0,0,.2);
}

.cta-button--outline:hover{
    color:#fff;
    background-color:var(--brand-accent);
    border-color:var(--brand-accent);
}

@media (max-width:991.98px){
    .cta-container{
        flex-direction:column;
        text-align:center;
    }

    .cta-content{
        align-items:center;
    }

    .cta-actions{
        justify-content:center;
    }
}


/* ---------- faq.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Block System - FAQ
 * ==========================================================
 */

.faq{
    padding-block:var(--space-region);
}

.faq-container{
    max-width:900px;
    margin-inline:auto;
}

.faq-header{
    margin-bottom:var(--space-block);
    text-align:center;
}

.faq-title{
    margin:0 0 var(--space-component);
}

.faq-text{
    margin:0;
    color:var(--text-secondary);
}

.faq-list{
    display:flex;
    flex-direction:column;
    gap:var(--space-component);
}

.faq-item{
    background:var(--surface-card);
    border:var(--border-width-thin) solid var(--border-light);
    border-radius:var(--radius-card);
    overflow:hidden;
}

.faq-question{
    width:100%;
}

.faq-answer{
    padding:0 var(--space-component) var(--space-component);
    color:var(--text-secondary);
}


/* ==========================================================
   FAQ: the whole block sits in a grey panel
   ==========================================================
   The same panel as the grey sections of a disease page
   (var(--brand-surface), radius-xl, padding space-7). The panel
   is drawn by ::before inside the container's content box, so its
   edges line up with the other panels of the page; the container
   only gets extra padding for the text. Every entity page and the
   Page Builder FAQ block use it, centre skins included. */

:is(
    .condition-single__faq,
    .service-single__faq,
    .symptom-single__faq,
    .article-single__faq,
    .specialty-single__block:has(.specialty-single__faq),
    .faq-section
)> .container {
    --faq-gutter: var(--space-content, 1.5rem);

    position: relative;
    isolation: isolate;
    padding: var(--space-7, 2rem) calc(var(--faq-gutter) + var(--space-7, 2rem));
}

:is(
    .condition-single__faq,
    .service-single__faq,
    .symptom-single__faq,
    .article-single__faq,
    .specialty-single__block:has(.specialty-single__faq),
    .faq-section
)> .container::before {
    content: "";
    position: absolute;
    inset: 0 var(--faq-gutter);
    z-index: -1;
    background: var(--brand-surface);
    border-radius: var(--radius-xl, 1rem);
}

/* The specialty page paints the whole FAQ section near-white: the panel is enough. */
section.specialty-single__block--alt:has(.specialty-single__faq) {
    background: transparent;
}

/* The heading opens the panel; the accordion's lines and «+» stay as everywhere. */
:is(
    .condition-single__faq,
    .service-single__faq,
    .symptom-single__faq,
    .article-single__faq,
    .specialty-single__block:has(.specialty-single__faq),
    .faq-section
)> .container > :first-child {
    margin-top: 0;
}

@media (max-width: 767.98px) {
    :is(
        .condition-single__faq,
        .service-single__faq,
        .symptom-single__faq,
        .article-single__faq,
        .specialty-single__block:has(.specialty-single__faq),
        .faq-section
    )> .container {
        padding: var(--space-5, 1.5rem) calc(var(--faq-gutter) + var(--space-5, 1.5rem));
    }
}

/* An opened answer sits on white inside the grey panel; the questions
   keep their own look (lines and «+», or a centre skin's pills). */
:is(
    .condition-single__faq,
    .service-single__faq,
    .symptom-single__faq,
    .article-single__faq,
    .specialty-single__block:has(.specialty-single__faq),
    .faq-section
) > .container .accordion-collapse > .accordion-body {
    background: #fff;
    border-radius: var(--radius-lg, .75rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
    margin-bottom: var(--space-4, 1rem);
}

/* Centre skins draw each question as a pill: the answer under it is white,
   without the skin's dividing rule (the white already separates it). */
.skin-dental .faq-section > .container .accordion .accordion-body,
.skin-eko .faq-section > .container .accordion .accordion-body {
    margin: 0 var(--space-3, .75rem) var(--space-3, .75rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
}

.skin-dental .faq-section > .container .accordion .accordion-body > :first-child {
    padding-top: 0;
    border-top: 0;
}
/* Questions look like a centre's: no dividing lines and no round «+», the
   question in plain text with a small triangle; a closed question turns
   into a green pill under the pointer, an opened one is bold with the
   triangle up. Centre skins have this already. */
:is(.condition-single__faq, .service-single__faq, .symptom-single__faq, .article-single__faq, .specialty-single__block:has(.specialty-single__faq), .faq-section):not(:is(.skin-dental, .skin-eko) *) > .container .accordion {
    gap: 10px;
}

:is(.condition-single__faq, .service-single__faq, .symptom-single__faq, .article-single__faq, .specialty-single__block:has(.specialty-single__faq), .faq-section):not(:is(.skin-dental, .skin-eko) *) > .container .accordion .accordion-item,
:is(.condition-single__faq, .service-single__faq, .symptom-single__faq, .article-single__faq, .specialty-single__block:has(.specialty-single__faq), .faq-section):not(:is(.skin-dental, .skin-eko) *) > .container .accordion .accordion-item + .accordion-item {
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    box-shadow: none;
}

:is(.condition-single__faq, .service-single__faq, .symptom-single__faq, .article-single__faq, .specialty-single__block:has(.specialty-single__faq), .faq-section):not(:is(.skin-dental, .skin-eko) *) > .container .accordion .accordion-header {
    margin: 0;
}

:is(.condition-single__faq, .service-single__faq, .symptom-single__faq, .article-single__faq, .specialty-single__block:has(.specialty-single__faq), .faq-section):not(:is(.skin-dental, .skin-eko) *) > .container .accordion .accordion-button {
    position: relative;
    background: transparent;
    color: var(--text-primary, #212529);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 15px 60px 15px 30px;
    border-radius: var(--radius-pill, 999px);
    box-shadow: none;
    transition: background-color .2s, color .2s;
}

:is(.condition-single__faq, .service-single__faq, .symptom-single__faq, .article-single__faq, .specialty-single__block:has(.specialty-single__faq), .faq-section):not(:is(.skin-dental, .skin-eko) *) > .container .accordion .accordion-button.collapsed:hover {
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
}

:is(.condition-single__faq, .service-single__faq, .symptom-single__faq, .article-single__faq, .specialty-single__block:has(.specialty-single__faq), .faq-section):not(:is(.skin-dental, .skin-eko) *) > .container .accordion .accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--text-primary, #212529);
    font-weight: 600;
}

:is(.condition-single__faq, .service-single__faq, .symptom-single__faq, .article-single__faq, .specialty-single__block:has(.specialty-single__faq), .faq-section):not(:is(.skin-dental, .skin-eko) *) > .container .accordion .accordion-button::after {
    content: "";
    position: absolute;
    right: 30px;
    top: 50%;
    width: 0;
    height: 0;
    margin: 0;
    transform: translateY(-50%);
    background: none;
    -webkit-mask: none;
    mask: none;
    border-radius: 0;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: currentColor transparent transparent transparent;
}

:is(.condition-single__faq, .service-single__faq, .symptom-single__faq, .article-single__faq, .specialty-single__block:has(.specialty-single__faq), .faq-section):not(:is(.skin-dental, .skin-eko) *) > .container .accordion .accordion-button:not(.collapsed)::after {
    border-width: 0 5px 8px 5px;
    border-color: transparent transparent var(--color-primary) transparent;
}

:is(.condition-single__faq, .service-single__faq, .symptom-single__faq, .article-single__faq, .specialty-single__block:has(.specialty-single__faq), .faq-section):not(:is(.skin-dental, .skin-eko) *) > .container .accordion .accordion-collapse > .accordion-body {
    margin: 0 var(--space-3, .75rem) var(--space-3, .75rem);
    font-size: 1rem;
}
/* The panel takes the skin's own grey, as its other panels do. */
.skin-dental .faq-section > .container::before {
    background: var(--dent-bg, var(--brand-surface));
}

.skin-eko .faq-section > .container::before {
    background: var(--eko-light, var(--brand-surface));
}
/* ---------- gallery.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Block System - Gallery
 * ==========================================================
 */

.gallery{
    padding-block:var(--space-region);
}

.gallery-container{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-component);
}

.gallery-item{
    overflow:hidden;
    border-radius:var(--radius-card);
    background:var(--surface-card);
}

.gallery-image{
    display:block;
    width:100%;
    height:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    transition:transform var(--transition-normal);
}

.gallery-item:hover .gallery-image{
    transform:scale(1.05);
}

@media (max-width:991.98px){
    .gallery-container{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:575.98px){
    .gallery-container{
        grid-template-columns:1fr;
    }
}


/* ---------- hero.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Block System - Hero
 * ==========================================================
 */

.hero{
    position:relative;
    overflow:hidden;
    padding-block:var(--space-10);
    background:var(--surface-page);
}

.hero-container{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,560px);
    align-items:center;
    gap:var(--space-8);
}

.hero-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-component);
}

.hero-subtitle{
    margin:0;
}

.hero-title{
    margin:0;
    max-width:12ch;
}

.hero-text{
    max-width:60ch;
    color:var(--text-secondary);
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-inline);
}

.hero-media{
    position:relative;
}

.hero-image{
    display:block;
    width:100%;
    height:auto;
    border-radius:var(--radius-xl);
}

@media (max-width:991.98px){
    .hero-container{
        grid-template-columns:1fr;
    }

    .hero-content{
        order:2;
    }

    .hero-media{
        order:1;
    }

    .hero-title{
        max-width:none;
    }
}


/* ---------- partners.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Block System - Partners
 * ==========================================================
 */

.partners{
    padding-block:var(--space-region);
}

.partners-container{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:var(--space-block);
    align-items:center;
}

.partner-item{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:var(--space-component);

    background:var(--surface-card);

    border:var(--border-width-thin) solid var(--border-light);
    border-radius:var(--radius-card);

    transition:var(--transition-normal);
}

.partner-item:hover{
    border-color:var(--color-primary);
    box-shadow:var(--shadow-card);
}

.partner-logo{
    display:block;

    max-width:100%;
    max-height:80px;

    object-fit:contain;

    filter:grayscale(100%);
    opacity:.8;

    transition:var(--transition-normal);
}

.partner-item:hover .partner-logo{
    filter:none;
    opacity:1;
}

@media (max-width:991.98px){

    .partners-container{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

@media (max-width:575.98px){

    .partners-container{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

/* ---------- video.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Block System - Video
 * ==========================================================
 */

.video{
    padding-block:var(--space-region);
}

.video-container{
    max-width:1200px;
    margin-inline:auto;
}

.video-wrapper{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-xl);
    background:var(--surface-card);
    box-shadow:var(--shadow-card);
    aspect-ratio:16/9;
}

.video-frame,
.video-wrapper iframe,
.video-wrapper video{
    width:100%;
    height:100%;
    display:block;
    border:0;
}

.video-caption{
    margin-top:var(--space-component);
    text-align:center;
    color:var(--text-secondary);
}

.video-play{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}


/* ---------- image.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Block System - Image
 * ==========================================================
 */

.image-block{
    padding-block:var(--space-region);
}

.image-container{
    display:flex;
    flex-direction:column;
    gap:var(--space-component);
}

.image-figure{
    margin:0;
}

.image{
    display:block;
    width:100%;
    height:auto;
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-card);
}

.image-cover{
    aspect-ratio:16/9;
    object-fit:cover;
}

.image-caption{
    margin-top:var(--space-2);
    text-align:center;
    font-size:var(--font-size-body-sm);
    color:var(--text-secondary);
}

.image-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-component);
}

.image-rounded .image{
    border-radius:var(--radius-xl);
}

@media (max-width:767.98px){
    .image-grid{
        grid-template-columns:1fr;
    }
}


/* ---------- text.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Block System - Text
 * ==========================================================
 */

.text-block{
    padding-block:var(--space-region);
}

.text-container{
    max-width:840px;
    margin-inline:auto;
}

.text-header{
    margin-bottom:var(--space-block);
}

.text-title{
    margin:0 0 var(--space-component);
}

.text-subtitle{
    margin:0;
    color:var(--text-secondary);
}

.text-content{
    color:var(--text-primary);
    line-height:var(--line-height-body);
}

.text-content > * + *{
    margin-top:var(--space-component);
}

.text-content img{
    max-width:100%;
    height:auto;
    border-radius:var(--radius-card);
}

.text-content blockquote{
    margin:var(--space-block) 0;
    padding-left:var(--space-component);
    border-left:4px solid var(--color-primary);
    color:var(--text-secondary);
}

.text-footer{
    margin-top:var(--space-block);
}



/* ==========================================================
   BLOCK LAYOUT STYLES (unfinished layout_style feature)
   ========================================================== */

/*!
 * ==========================================================
 * Hospital theme
 * Block Layout Styles (unfinished 'layout_style' feature —
 * grid/slider/carousel alt. layouts for entity blocks;
 * kept per product decision, not yet wired to a PHP switch
 * except doctors_block/centers_block/equipment_block, which
 * already use the Entity Layout component instead)
 * ==========================================================
 */


/* ---------- doctor.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Block System - Equipment
 * ==========================================================
 */

.equipment{
    padding-block:var(--space-region);
}

.equipment-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-block);
}

.equipment-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:var(--surface-card);
    border:var(--border-width-thin) solid var(--border-light);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-card);
    transition:var(--transition-normal);
}

.equipment-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-dropdown);
}

.equipment-image{
    display:block;
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
}

.equipment-body{
    display:flex;
    flex-direction:column;
    flex:1;
    gap:var(--space-component);
    padding:var(--space-block);
}

.equipment-title{
    margin:0;
}

.equipment-description{
    color:var(--text-secondary);
}

.equipment-specs{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-inline);
    font-size:var(--font-size-body-sm);
    color:var(--text-muted);
}

.equipment-actions{
    margin-top:auto;
    display:flex;
    gap:var(--space-inline);
    flex-wrap:wrap;
}

@media (max-width:991.98px){
    .equipment-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:575.98px){
    .equipment-grid{
        grid-template-columns:1fr;
    }
}


/* ---------- service.css ---------- */



/* ---------- center.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Block System - Center
 * ==========================================================
 */

.center{
    padding-block:var(--space-region);
}

.center-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-block);
}

.center-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:var(--surface-card);
    border:var(--border-width-thin) solid var(--border-light);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-card);
    transition:var(--transition-normal);
}

.center-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-dropdown);
}

.center-image{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    display:block;
}

.center-body{
    display:flex;
    flex-direction:column;
    flex:1;
    gap:var(--space-component);
    padding:var(--space-block);
}

.center-title{
    margin:0;
}

.center-description{
    color:var(--text-secondary);
}

.center-meta{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-inline);
    color:var(--text-muted);
    font-size:var(--font-size-body-sm);
}

.center-actions{
    margin-top:auto;
    display:flex;
    gap:var(--space-inline);
    flex-wrap:wrap;
}

@media (max-width:991.98px){
    .center-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:575.98px){
    .center-grid{
        grid-template-columns:1fr;
    }
}


/* ---------- department.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Block System - Doctor
 * ==========================================================
 */

.doctor{
    padding-block:var(--space-region);
}

.doctor-card{
    display:flex;
    flex-direction:column;
    background:var(--white);
    border:var(--border-width-thin) solid var(--border-default);
    border-radius:var(--radius-lg);
    padding: 15px;
    min-width: 260px;
    min-height: 330px;
    transition:var(--transition-normal);
}

.doctor-card:hover{
    border-color: var(--color-primary);
    box-shadow: 0 10px 24px rgba(26, 26, 27, 0.16);
}

.doctor-card__link-overlay {
    color: inherit;
    text-decoration: none;
}

.doctor-card__top {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.doctor-card__languages {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    gap: var(--space-2);
}

.doctor-card__photo-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    flex-shrink: 0;
}

.doctor-card__photo-figure {
    position: relative;
    margin: 0;
}

.doctor-card__rank-badge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px var(--space-1);
    background-color: rgba(0, 0, 0, 0.55);
    color: var(--white);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-align: center;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.doctor-card__photo {
    flex-shrink: 0;
    width: 130px;
    height: 172px;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.doctor-card__top-info {
    min-width: 0;
}

.doctor-card__name {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.doctor-card__stats {
    margin: 0;
    flex-wrap: wrap;
    font-size: var(--font-size-caption);
}

.doctor-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) 0 0;
}

.doctor-card__specialty-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.doctor-card__specialty-pill.doctor-single__specialty-pill {
    margin: 0;
    padding: 2px var(--space-2);
    font-size: 10px;
}

.doctor-card__specialty-pill.doctor-single__specialty-pill:hover {
    background-color: var(--gray-50);
    color: var(--text-primary);
}

.doctor-card__icon-badges {
    display: flex;
    gap: var(--space-2);
}

.doctor-card__footer {
    margin-top: auto;
    padding: 0;
}

.doctor-card__cta {
    display: block;
    width: 100%;
    border: none;
    border-radius: var(--radius-pill, 999px);
    background-color: var(--brand-accent-t1);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-body-sm);
    padding: 8px var(--space-4);
    text-align: center;
    transition: filter var(--transition-fast);
}

.doctor-card__cta:hover {
    filter: brightness(0.97);
}

/* Doctor listing page: real auto-fill grid instead of Bootstrap's
   fixed-fraction columns, so cards keep their min-width and simply
   wrap to a new row when there isn't room, rather than squishing
   narrower than they can legibly display. */
.doctor-archive__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 576px) {
    .doctor-archive__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .doctor-archive__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.doctor-archive__item {
    width: auto;
    max-width: none;
    flex: none;
}


/* ---------- equipment.css ---------- */

/*!
 * ==========================================================
 * Hospital theme
 * Block System - Service
 * ==========================================================
 */

.service{
    padding-block:var(--space-region);
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-block);
}

.service-card{
    display:flex;
    flex-direction:column;
    height:100%;
    background:var(--surface-card);
    border:var(--border-width-thin) solid var(--border-light);
    border-radius:var(--radius-card);
    overflow:hidden;
    box-shadow:var(--shadow-card);
    transition:var(--transition-normal);
}

.service-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-dropdown);
}

.service-image{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    display:block;
}

.service-body{
    display:flex;
    flex-direction:column;
    flex:1;
    gap:var(--space-component);
    padding:var(--space-block);
}

.service-title{
    margin:0;
}

.service-text{
    margin:0;
    color:var(--text-secondary);
}

.service-actions{
    margin-top:auto;
    display:flex;
    gap:var(--space-inline);
    flex-wrap:wrap;
}

@media (max-width:991.98px){
    .service-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:575.98px){
    .service-grid{
        grid-template-columns:1fr;
    }
}



/* ==========================================================
   PAGE: single-page
   ========================================================== */

<?php
defined('ABSPATH') || exit;

/*
 * Template Name: Single Page
 *
 * Generic content page template — for simple, standalone informational
 * pages that are neither a Hub Page (Page Builder blocks) nor an
 * Entity Page (single-{entity}.php). Examples: Terms of Use, Privacy
 * Policy, About Us (text-only), etc. Just a title and rich-text content.
 */

get_header();

?>

<main class="single-page">

    <?php if (have_posts()) : ?>

        <?php while (have_posts()) : the_post(); ?>

            <article class="single-page__article">

                <header class="single-page__header">

                    <div class="single-page__container container">

                        <h1 class="single-page__title">

                            <?php the_title(); ?>

                        </h1>

                        <?php

                        $modified = get_the_modified_date();
                        $published = get_the_date();

                        if ($modified && $modified !== $published) :

                        ?>

                            <p class="single-page__updated text-muted">

                                Son yenilənmə:
                                <time datetime="<?php echo esc_attr(get_the_modified_date('c')); ?>">
                                    <?php echo esc_html($modified); ?>
                                </time>

                            </p>

                        <?php endif; ?>

                    </div>

                </header>

                <div class="single-page__body">

                    <div class="single-page__container container">

                        <div class="single-page__content">

                            <?php the_content(); ?>

                        </div>

                    </div>

                </div>

            </article>

        <?php endwhile; ?>

    <?php else : ?>

        <div class="single-page__container container py-5">

            <p class="alert alert-light" role="status">

                Məzmun tapılmadı.

            </p>

        </div>

    <?php endif; ?>

</main>

<?php

get_footer();

/* ==========================================================
   ENTITIES (kept separate — colocated with their PHP)
   ========================================================== */

@import url('../../entities/doctor/style.css');
@import url('../../entities/article/style.css');
@import url('../../entities/condition/style.css');
@import url('../../entities/service/style.css');
@import url('../../entities/symptom/style.css');
@import url('../../entities/center/style.css');
@import url('../../entities/department/style.css');
@import url('../../entities/equipment/style.css');
@import url('../../entities/faq/style.css');
@import url('../../entities/partner/style.css');
@import url('../../entities/promotion/style.css');
@import url('../../entities/review/style.css');
@import url('../../entities/vacancy/style.css');


/* ==========================================================
   APPOINTMENT FORM
   ========================================================== */

.appointment-form__honeypot {
    display: none !important;
}


/* ==========================================================
   SHARING
   ========================================================== */

.entity-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-5);
    border-top: var(--border-width-thin) solid var(--border-light);
}

.entity-share__label {
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.entity-share__link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border: var(--border-width-thin) solid var(--border-default);
    background: none;
    color: var(--text-primary);
    font-size: var(--font-size-meta);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.entity-share__link:hover {
    background-color: var(--primary-50);
    color: var(--color-primary);
}


/* ==========================================================
   REACTIONS
   ========================================================== */

.entity-reaction {
    padding-block: var(--space-5);
    text-align: center;
}

.entity-reaction__button--done {
    opacity: 0.7;
    pointer-events: none;
}

.entity-reaction__count {
    opacity: 0.7;
}


/* ==========================================================
   COMMENTS
   ========================================================== */

.entity-comments {
    padding-block: var(--space-7);
    background-color: var(--surface-section);
}

.entity-comments__container .comment-list {
    list-style: none;
    padding-left: 0;
}

.entity-comments__container .comment-form input[type="text"],
.entity-comments__container .comment-form input[type="email"],
.entity-comments__container .comment-form textarea {
    width: 100%;
    padding: var(--space-3);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-input);
    margin-bottom: var(--space-3);
}

.entity-comments__container .comment-form-comment label,
.entity-comments__container .comment-form-author label,
.entity-comments__container .comment-form-email label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-medium);
}


.sh-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4, 1rem);
}

.sh-form > * {
    margin: 0;
}

.sh-form__field--wide,
.sh-form__consent,
.sh-form__submit {
    grid-column: 1 / -1;
}

.sh-form__consent {
    margin-bottom: 0;
}

.sh-form .sh-form__consent:has(+ .sh-form__consent) {
    margin-bottom: 0;
}

.sh-form__field .form-label {
    display: block;
    margin-bottom: var(--space-2, 0.5rem);
}

.sh-form .sh-form__textarea {
    border-radius: var(--radius-card, 0.75rem);
    resize: vertical;
}

.sh-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: 0.4rem;
    background-color: #fff;
    border-radius: var(--radius-pill, 999px);
}

.sh-file__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.sh-file__btn {
    flex-shrink: 0;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-pill, 999px);
    background-color: var(--gray-100);
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sh-file__btn:hover {
    background-color: var(--gray-200, #e5e8e6);
}

.sh-file__input:focus-visible + .sh-file__btn {
    outline: 2px solid var(--color-primary, var(--brand-accent));
    outline-offset: 2px;
}

.sh-file__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #7D7D7D;
    font-size: var(--font-size-body);
}

.sh-file.is-filled .sh-file__name {
    color: var(--text-primary);
}

.sh-form__trap {
    display: none !important;
}

.sh-form-title {
    margin-bottom: var(--space-4, 1rem);
}

.sh-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sh-rating {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    min-height: 3.25rem;
}

.sh-rating__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.sh-rating__star,
.sh-stars__item {
    display: block;
    background: var(--gray-300, #d0d5d2);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.sh-rating__star {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sh-rating__input:checked + .sh-rating__star,
.sh-rating__star:has(~ .sh-rating__input:checked),
.sh-rating__star:hover,
.sh-rating__star:has(~ .sh-rating__star:hover) {
    background: var(--amber-500, #f5a524);
}

.sh-rating__input:focus-visible + .sh-rating__star {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.sh-stars {
    display: inline-flex;
    gap: 2px;
}

.sh-stars__item {
    width: 0.95rem;
    height: 0.95rem;
}

.sh-stars__item.is-on {
    background: var(--amber-500, #f5a524);
}

.sh-card {
    display: flex;
    gap: var(--space-4, 1rem);
    padding: var(--space-5, 1.5rem);
    background: var(--surface-card, #fff);
    border-radius: var(--radius-card, 0.75rem);
}

.sh-avatar {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
    font-weight: 700;
}

.sh-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.sh-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    margin-bottom: var(--space-2, 0.5rem);
}

.sh-badge {
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
}

.sh-date {
    color: var(--text-secondary);
}

.sh-text {
    overflow-wrap: anywhere;
}

.sh-text > :last-child {
    margin-bottom: 0;
}

.sh-review__reply {
    margin-top: var(--space-3, 0.75rem);
    margin-left: var(--space-7, 2rem);
}

.sh-review__media {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-2, 0.5rem);
}

.sh-review__rel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 0.25rem) var(--space-4, 1rem);
    margin: 0 0 var(--space-2, 0.5rem);
    color: var(--text-secondary);
}

.sh-review__rel a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

.sh-review__media a {
    color: var(--color-primary);
    font-weight: 600;
}

@media (max-width: 575.98px) {

    .sh-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .sh-card {
        padding: var(--space-4, 1rem);
    }

    .sh-review__reply {
        margin-left: var(--space-4, 1rem);
    }
}

/* ==========================================================
   REVIEWS SLIDER (parts/reviews-slider.php)
   Latest reviews of a doctor / center as a horizontal strip of
   cards on a light band: heading + total on the left, arrows and
   "Write a review" on the right. The strip scrolls by touch;
   card-slider.js drives the arrows.
   ========================================================== */

.reviews-slider__frame {
    position: relative;
    padding: var(--space-6) var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
    background-color: var(--gray-100);
}

.reviews-slider__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}

.reviews-slider__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
}

.reviews-slider__heading {
    margin: 0;
}

.reviews-slider__count {
    color: var(--text-muted);
}

.reviews-slider__count strong {
    color: var(--color-primary);
}

.reviews-slider__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.reviews-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-round);
    background-color: var(--white);
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.reviews-slider__arrow:hover:not(:disabled) {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--white);
}

.reviews-slider__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.reviews-slider__write {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    margin-left: var(--space-2);
    padding: 0 var(--space-5);
    border: none;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    color: var(--white);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: filter var(--transition-fast);
}

.reviews-slider__write:hover {
    filter: brightness(0.92);
}

.reviews-slider__arrow:focus-visible,
.reviews-slider__write:focus-visible {
    outline: 2px solid var(--brand-primary-dark);
    outline-offset: 2px;
}

.reviews-slider__notice {
    margin-bottom: var(--space-4);
}

/* Three cards on a desktop, two on a tablet, one and a bit on a phone
   (the next card peeks out, so it is clear the strip scrolls). */
.reviews-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3);
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: var(--space-1) var(--space-1) var(--space-2);
    margin: calc(-1 * var(--space-1));
}

.reviews-slider__track::-webkit-scrollbar {
    display: none;
}

.reviews-slider__slide {
    display: flex;
    scroll-snap-align: start;
}

.reviews-slider__all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.reviews-slider__all:hover {
    text-decoration: underline;
}

.reviews-slider__empty {
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background-color: var(--white);
    color: var(--text-muted);
    text-align: center;
    font-size: var(--font-size-body-lg);
}

/* ---- One review card ---- */

.rv-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-5);
    border-radius: var(--radius-card, var(--radius-lg));
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
}

/* A large quotation mark in the corner: reads as "a review" at a glance. */
.rv-slide::after {
    content: '\201D';
    position: absolute;
    top: var(--space-2);
    right: var(--space-4);
    color: var(--gray-200);
    color: color-mix(in srgb, var(--color-primary) 22%, transparent);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 4.5rem;
    line-height: 1;
    pointer-events: none;
}

.rv-slide__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-right: var(--space-7);
}

.rv-slide__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rv-slide__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv-slide__date {
    color: var(--text-secondary);
}

.rv-slide__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--text-primary);
}

.rv-slide__text p {
    margin: 0 0 var(--space-2);
}

.rv-slide__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--gray-200);
}

.rv-slide__reply {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--font-size-body-sm);
}

.rv-slide__reply::before {
    content: '\2713';
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.rv-slide__more {
    margin-left: auto;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-body-sm);
    text-decoration: none;
}

.rv-slide__more:hover {
    text-decoration: underline;
}

@media (max-width: 991.98px) {

    .reviews-slider__track {
        grid-auto-columns: calc((100% - var(--space-4)) / 2);
    }

}

@media (max-width: 767.98px) {

    .reviews-slider__frame {
        padding: var(--space-5) var(--space-4) var(--space-4);
    }

    /* Phone: the heading on its own line, the button full width below. */
    .reviews-slider__actions {
        width: 100%;
    }

    .reviews-slider__write {
        flex: 1 1 auto;
        justify-content: center;
        margin-left: 0;
        order: -1;
    }

    .reviews-slider__arrow {
        display: none;
    }

    .reviews-slider__track {
        grid-auto-columns: 85%;
    }

}
/* ==========================================================
   CALLBACK FLOAT BUTTON
   Floating actions: the main round button (callback, or the
   chat when the assistant is on) and, in "chat + call" mode,
   a smaller callback button stacked above it.
   ========================================================== */

.float-actions {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: var(--layer-toast);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.callback-float-button {
    --float-color: var(--brand-cta-alt);

    position: relative;

    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-round);
    border: none;
    padding: 0;

    background-color: var(--float-color);
    color: var(--white);
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: var(--shadow-lg);
    cursor: pointer;

    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.callback-float-button:hover {
    transform: scale(1.08);
    filter: brightness(0.92);
}

.callback-float-button:focus-visible {
    outline: var(--border-width-medium) solid var(--brand-primary-dark);
    outline-offset: 3px;
}

.callback-float-button--chat {
    --float-color: var(--brand-primary-dark);
}

/* The smaller callback button above the chat button: no rings,
   the main button keeps the attention. */
.callback-float-button--secondary {
    width: 2.75rem;
    height: 2.75rem;
}

.callback-float-button--secondary::before,
.callback-float-button--secondary::after {
    content: none;
}

.callback-float-button .assistant-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.callback-float-button--secondary .assistant-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Pulsing rings: two pseudo-elements with a time offset,
   so the rings spread one after another. */
.callback-float-button::before,
.callback-float-button::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-round);
    border: 2px solid var(--float-color);
    animation: callback-pulse 1.8s ease-out infinite;
    pointer-events: none;
}

.callback-float-button::after {
    animation-delay: 0.9s;
}

@keyframes callback-pulse {

    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }

}

/* Chat button: every 6 s the icon gives a short "calling" wiggle,
   then rests. Stops while the chat panel is open. */
.callback-float-button--chat .assistant-icon {
    transform-origin: 50% 60%;
    animation: assistant-wiggle 6s ease-in-out 2s infinite;
}

.callback-float-button--chat[aria-expanded="true"] .assistant-icon {
    animation: none;
}

@keyframes assistant-wiggle {

    0%, 14%, 100% {
        transform: rotate(0) scale(1);
    }

    2% {
        transform: rotate(-14deg) scale(1.12);
    }

    4% {
        transform: rotate(12deg) scale(1.12);
    }

    6% {
        transform: rotate(-10deg) scale(1.1);
    }

    8% {
        transform: rotate(8deg) scale(1.06);
    }

    10% {
        transform: rotate(-4deg) scale(1.03);
    }

}

@media (prefers-reduced-motion: reduce) {

    .callback-float-button::before,
    .callback-float-button::after {
        animation: none;
        content: none;
    }

    .callback-float-button--chat .assistant-icon {
        animation: none;
    }

    .callback-float-button {
        transition: none;
    }

}

/* Below lg the bottom bar (fixed, 74px, above the toast layer) is on
   screen: lift the button over it instead of hiding behind it. The
   secondary callback button is dropped: the bar has a call link. */
@media (max-width: 991.98px) {

    .float-actions {
        bottom: calc(74px + var(--space-3));
    }

    .callback-float-button--secondary {
        display: none;
    }

}

@media (max-width: 575.98px) {

    .float-actions {
        right: var(--space-4);
    }

    .callback-float-button {
        width: 3rem;
        height: 3rem;
    }

    .callback-float-button .assistant-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

}

/* Sistem → Modullar: AI assistant without «Mobil cihazlarda göstər» */
@media (max-width: 991.98px) {
    .callback-float-button--chat.is-desktop-only {
        display: none;
    }
}
/* ==========================================================
   ASSISTANT WIDGET
   AI chat panel (parts/assistant-widget.php, assets/js/assistant.js).
   Desktop: a card in the bottom-right corner. Below lg: a full-screen
   sheet; while it is open the page is locked and the bottom bar and
   floating buttons are hidden.
   ========================================================== */

.assistant {
    /* Above the bottom bar (1030), header (1050) and the site modals (1060):
       the panel closes itself before it opens one. */
    --assistant-layer: 1070;

    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: var(--assistant-layer);

    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: calc(100vw - var(--space-5) * 2);
    height: min(600px, calc(100vh - 120px));

    background-color: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-family-base);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow-modal);
    overflow: hidden;

    opacity: 0;
    transform: translateY(var(--space-4));
    transition: opacity var(--transition-normal) var(--motion-easing), transform var(--transition-normal) var(--motion-easing);
}

.assistant[hidden],
.assistant [hidden] {
    display: none !important;
}

.assistant.is-open {
    opacity: 1;
    transform: none;
}

.assistant:focus {
    outline: none;
}

.assistant :focus-visible {
    outline: var(--border-width-medium) solid var(--brand-primary-dark);
    outline-offset: 2px;
}

.assistant-icon {
    flex-shrink: 0;
}

/* While the panel is open the corner belongs to it. */
body.assistant-open .float-actions {
    display: none;
}

/* ---------- Header ---------- */

.assistant__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    background-color: var(--brand-primary-dark);
    color: var(--text-inverse);
}

.assistant__header :focus-visible {
    outline-color: var(--white);
}

.assistant__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-round);
    background-color: color-mix(in srgb, var(--white) 18%, transparent);
}

.assistant__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.assistant__title {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-compact);
    color: inherit;
}

.assistant__subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-caption);
    line-height: var(--line-height-compact);
}

.assistant__tools {
    display: flex;
    flex-shrink: 0;
}

.assistant__tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-round);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.assistant__tool:hover {
    background-color: color-mix(in srgb, var(--white) 18%, transparent);
    color: inherit;
}

/* ---------- Notice under the header ---------- */

.assistant__disclaimer {
    flex-shrink: 0;
    margin: 0;
    padding: var(--space-2) var(--space-4);
    max-height: 5.5em;
    overflow-y: auto;
    background-color: var(--brand-primary-light);
    border-bottom: var(--border-width-thin) solid var(--border-default);
    color: var(--text-secondary);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-heading);
}

.assistant__disclaimer a {
    color: var(--brand-primary-dark);
    text-decoration: underline;
}

/* ---------- Messages ---------- */

.assistant__messages {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
    padding: var(--space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--surface-section);
}

.assistant__msg {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 88%;
}

.assistant__msg--user {
    align-self: flex-end;
    align-items: flex-end;
}

.assistant__msg--bot,
.assistant__msg--system {
    align-self: flex-start;
    align-items: flex-start;
}

.assistant__msg--emergency,
.assistant__msg--system {
    max-width: 100%;
}

.assistant__bubble {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-body);
    overflow-wrap: anywhere;
}

.assistant__msg--user .assistant__bubble {
    background-color: var(--brand-primary-dark);
    color: var(--text-inverse);
    border-bottom-right-radius: var(--radius-xs);
}

.assistant__msg--bot .assistant__bubble {
    background-color: var(--surface-card);
    border: var(--border-width-thin) solid var(--border-default);
    border-bottom-left-radius: var(--radius-xs);
}

.assistant__msg--system .assistant__bubble {
    background-color: var(--amber-50);
    border: var(--border-width-thin) solid var(--amber-500);
    color: var(--text-primary);
}

/* Typing indicator */

.assistant__msg--typing .assistant__bubble {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding-block: var(--space-3);
}

.assistant__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-round);
    background-color: var(--gray-500);
    animation: assistant-dot 1.2s ease-in-out infinite;
}

.assistant__dot:nth-child(3) {
    animation-delay: 0.15s;
}

.assistant__dot:nth-child(4) {
    animation-delay: 0.3s;
}

@keyframes assistant-dot {

    0%,
    60%,
    100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-0.25rem);
    }

}

/* ---------- Cards and actions inside an answer ---------- */

.assistant__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}

.assistant__card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background-color: var(--surface-card);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-card);
}

.assistant__card-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    overflow: hidden;
    border-radius: var(--radius-round);
    background-color: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    font-weight: var(--font-weight-bold);
}

.assistant__card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.assistant__card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.assistant__card-title {
    font-size: var(--font-size-meta);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    overflow-wrap: anywhere;
}

.assistant__card-subtitle,
.assistant__card-price {
    font-size: var(--font-size-helper);
    line-height: var(--line-height-heading);
    color: var(--text-secondary);
}

.assistant__card-price {
    font-weight: var(--font-weight-semibold);
    color: var(--brand-primary-dark);
}

.assistant__card-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 2.75rem;
    padding-inline: var(--space-1);
    color: var(--brand-primary-dark);
    font-size: var(--font-size-helper);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
}

.assistant__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.assistant__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    border: var(--border-width-medium) solid var(--brand-primary-dark);
    border-radius: var(--radius-button);
    background-color: var(--surface-card);
    color: var(--brand-primary-dark);
    font-family: inherit;
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-compact);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--transition-fast);
}

.assistant__action:hover {
    filter: brightness(0.94);
    color: var(--brand-primary-dark);
}

.assistant__action--primary {
    background-color: var(--brand-primary-dark);
    color: var(--text-inverse);
}

.assistant__action--primary:hover {
    color: var(--text-inverse);
}

.assistant__action--danger {
    border-color: var(--red-600);
    background-color: var(--red-600);
    color: var(--text-inverse);
}

.assistant__action--danger:hover {
    color: var(--text-inverse);
}

/* ---------- Emergency answer ---------- */

.assistant__alert {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background-color: var(--red-50);
    border: var(--border-width-medium) solid var(--red-600);
    border-radius: var(--radius-card);
    color: var(--gray-900);
}

.assistant__alert-title {
    color: var(--red-600);
    font-size: var(--font-size-body);
}

.assistant__alert-text {
    margin: 0;
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-body);
    overflow-wrap: anywhere;
}

.assistant__sos-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-button);
    background-color: var(--red-600);
    color: var(--text-inverse);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-bold);
    text-align: center;
    text-decoration: none;
}

.assistant__sos-button:hover {
    color: var(--text-inverse);
    filter: brightness(0.92);
}

.assistant__alert-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--red-600);
    font-size: var(--font-size-meta);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
}

/* ---------- Quick questions ---------- */

.assistant__chips {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: var(--space-2);
    max-height: 7.5rem;
    padding: var(--space-2) var(--space-4);
    overflow-y: auto;
    background-color: var(--surface-section);
}

.assistant__chip {
    min-height: 2.25rem;
    padding: var(--space-1) var(--space-3);
    border: var(--border-width-thin) solid var(--brand-primary-dark);
    border-radius: var(--radius-pill);
    background-color: var(--surface-card);
    color: var(--brand-primary-dark);
    font-family: inherit;
    font-size: var(--font-size-helper);
    line-height: var(--line-height-heading);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.assistant__chip:hover {
    background-color: var(--brand-primary-dark);
    color: var(--text-inverse);
}

/* ---------- Input ---------- */

.assistant__form {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--space-2);
    flex-shrink: 0;
    padding: var(--space-3) var(--space-4) var(--space-2);
    background-color: var(--surface-card);
    border-top: var(--border-width-thin) solid var(--border-default);
}

.assistant__input {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    max-height: 7.5rem;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width-thin) solid var(--border-strong);
    border-radius: var(--radius-input);
    background-color: var(--surface-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-size-body);
    line-height: var(--line-height-heading);
    resize: none;
}

.assistant__input::placeholder {
    color: var(--text-muted);
}

.assistant__send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-round);
    background-color: var(--brand-primary-dark);
    color: var(--text-inverse);
    cursor: pointer;
    transition: filter var(--transition-fast);
}

.assistant__send:hover:not(:disabled) {
    filter: brightness(0.92);
}

.assistant__send:disabled {
    background-color: var(--gray-300);
    color: var(--gray-700);
    cursor: not-allowed;
}

.assistant__counter {
    grid-column: 1 / -1;
    justify-self: end;
    color: var(--text-secondary);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-compact);
}

.assistant__counter.is-near {
    color: var(--red-600);
    font-weight: var(--font-weight-semibold);
}

/* Bots fill every field they find; people never see this one. */
.assistant__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---------- Emergency line ---------- */

.assistant__sos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    padding: 0 var(--space-4);
    background-color: var(--surface-section);
    border-top: var(--border-width-thin) solid var(--border-default);
    color: var(--text-secondary);
    font-size: var(--font-size-helper);
}

.assistant__sos a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--red-600);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
}

.assistant__sos-call {
    font-size: var(--font-size-body);
}

/* ---------- Phones: full-screen sheet ---------- */

@media (max-width: 991.98px) {

    body.assistant-open {
        overflow: hidden;
    }

    body.assistant-open #mobile-bottom-nav {
        display: none;
    }

    .assistant {
        inset: 0;
        width: auto;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        border: none;
        border-radius: 0;
        box-shadow: none;
        transform: translateY(var(--space-7));
    }

    .assistant__header {
        padding-top: calc(var(--space-2) + env(safe-area-inset-top, 0px));
    }

    .assistant__chips {
        flex-wrap: nowrap;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .assistant__chips::-webkit-scrollbar {
        display: none;
    }

    .assistant__chip {
        flex-shrink: 0;
        min-height: 2.75rem;
        padding-inline: var(--space-4);
        white-space: nowrap;
    }

    .assistant__form {
        padding-bottom: var(--space-2);
    }

    .assistant__sos {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

}

@media (prefers-reduced-motion: reduce) {

    .assistant {
        transition: none;
        transform: none;
    }

    .assistant__dot {
        animation: none;
        opacity: 0.7;
    }

}

/* ==========================================================
   LICENSES BLOCK
   ========================================================== */

.licenses-block__title {
    font-weight: var(--font-weight-bold);
}

.licenses-block__card {
    background-color: var(--brand-accent-t1);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
}

.licenses-block__thumbs {
    display: flex;
    align-items: flex-end;
}

.licenses-block__thumb {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    background-color: transparent;
    margin-left: -1.5rem;
    transition: transform var(--transition-fast);
}

.licenses-block__thumb:first-child {
    margin-left: 0;
}

.licenses-block__thumb:hover {
    transform: translateY(-4px);
}

.licenses-block__description {
    color: var(--text-primary);
    font-size: var(--font-size-body-lg);
}

.licenses-block__button {
    border-radius: var(--radius-md);
    padding-inline: var(--space-5);
}

@media (max-width: 767.98px) {

    .licenses-block__card {
        padding: var(--space-5);
    }

    .licenses-block__thumbs {
        margin-bottom: var(--space-4);
    }

}


/* ==========================================================
   WIDER CONTAINER
   ========================================================== */

@media (min-width: 1400px) {

    .container,
    .container-xxl,
    .container-xl,
    .container-lg {
        max-width: 1440px;
    }

}


/* ==========================================================
   BREADCRUMBS + PAGE HEADER
   ========================================================== */

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-meta);
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
}

.breadcrumbs__item:not(:last-child)::after {
    content: '/';
    margin-inline: var(--space-2);
    color: var(--text-muted);
}

.breadcrumbs__link {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumbs__link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.breadcrumbs__current {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.page-header {
    padding-block: var(--space-5) var(--space-4);
    background-color: var(--white);
}

/* A block right after the page title can have a smaller top padding:
   the title already gives air above. */
.page-header + section.py-5 {
    padding-top: var(--space-4) !important;
}

.page-header__title {
    margin-top: var(--space-3);
    margin-bottom: 0;
    font-size: var(--font-size-display-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.page-header--with-anchors {
    border-bottom: var(--border-width-thin) solid var(--border-light);
}

/* Anchor menu under the H1. There can be many links, so on narrow screens the row
   does not wrap but scrolls sideways and the header does not grow to half the screen. */
.page-header__anchors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-7);
    margin-top: var(--space-5);
}

.page-header__anchor {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    white-space: nowrap;
}

.page-header__anchor:hover {
    color: var(--color-primary);
    text-decoration: none;
}

@media (max-width: 767.98px) {

    .page-header__anchors {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: var(--space-5);
        padding-bottom: var(--space-2);
        scrollbar-width: none;
    }

    .page-header__anchors::-webkit-scrollbar {
        display: none;
    }

}

/* Breadcrumbs used on their own (entity pages, before their own hero/intro):
   a small gap. */
.entities-breadcrumbs {
    padding-block: var(--space-4) 0;
}

@media (max-width: 575.98px) {

    .page-header__title {
        font-size: var(--font-size-section-title);
    }

}


/* ==========================================================
   PROMOTION BANNER
   ========================================================== */

.promotion-banner {
    background-color: var(--gray-50);
    padding-block: var(--space-6) var(--space-4);
    margin-block: var(--space-6);
}

.promotion-banner__slides {
    display: grid;
}

.promotion-banner__slides > .promotion-banner__card {
    grid-area: 1 / 1;
}

.promotion-banner__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.25fr) minmax(180px, 0.7fr);
    grid-template-areas: "title body media";
    align-items: center;
    column-gap: var(--space-6);
    min-height: 140px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--white);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.06);
}

.promotion-banner__card--no-image {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.25fr);
    grid-template-areas: "title body";
}

.promotion-banner__head {
    grid-area: title;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background-color: var(--pb-bg, var(--brand-primary));
    color: var(--pb-fg, var(--white));
}

.promotion-banner__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

.promotion-banner__link {
    color: inherit;
    text-decoration: none;
}

.promotion-banner__link:hover,
.promotion-banner__link:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.promotion-banner__body {
    grid-area: body;
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    padding-block: var(--space-4);
}

.promotion-banner__card--no-image .promotion-banner__body {
    padding-right: var(--space-6);
}

.promotion-banner__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.promotion-banner__item {
    position: relative;
    padding-left: 1.25rem;
    line-height: 1.35;
}

.promotion-banner__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--brand-cta-deep);
}

.promotion-banner__cta {
    padding: 0.55rem 1.5rem;
    border-radius: var(--radius-pill, 999px);
    background-color: var(--brand-cta-deep);
    color: var(--white);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.promotion-banner__cta:hover,
.promotion-banner__cta:focus-visible {
    color: var(--white);
    text-decoration: none;
    filter: brightness(0.93);
}

.promotion-banner__media {
    grid-area: media;
    align-self: stretch;
    min-height: 140px;
    position: relative;
}

.promotion-banner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promotion-banner--multi .promotion-banner__card {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.promotion-banner--multi .promotion-banner__card.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.promotion-banner__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--space-3);
}

.promotion-banner__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--brand-cta-deep);
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s ease, width 0.2s ease;
}

.promotion-banner__dot.is-active {
    width: 20px;
    border-radius: calc(4px * var(--rs, 1));
    opacity: 1;
}

.promotion-banner__dot:focus-visible {
    outline: 2px solid var(--brand-cta-deep);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .promotion-banner {
        padding-block: var(--space-4) var(--space-3);
        margin-block: var(--space-4);
    }

    .promotion-banner__card,
    .promotion-banner__card--no-image {
        grid-template-columns: minmax(0, 1fr) 104px;
        grid-template-areas:
            "title media"
            "body media";
        column-gap: 0;
        min-height: 0;
    }

    .promotion-banner__card--no-image {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "body";
    }

    .promotion-banner__head {
        padding: var(--space-3) var(--space-4) var(--space-4);
    }

    .promotion-banner__title {
        font-size: 1.15rem;
    }

    .promotion-banner__body {
        align-self: start;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4) var(--space-4);
    }

    .promotion-banner__card--no-image .promotion-banner__body {
        padding-right: var(--space-4);
    }


    .promotion-banner__media {
        min-height: 100%;
    }
}

/* Phones: the promotion image column is hidden; only the title and items are shown. */
@media (max-width: 767.98px) {
    .promotion-banner__card,
    .promotion-banner__card--no-image {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "body";
    }

    .promotion-banner__body {
        padding-right: var(--space-4);
    }

    .promotion-banner__media {
        display: none;
    }

    .promotion-banner {
        padding-block: var(--space-2);
        margin-block: var(--space-3);
    }

    .promotion-banner__card,
    .promotion-banner__card--no-image {
        grid-template-areas: "title";
    }

    .promotion-banner__body,
    .promotion-banner__dots {
        display: none;
    }

    .promotion-banner__head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
        min-height: 56px;
    }

    .promotion-banner__title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.95rem;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .promotion-banner__cta {
        flex: 0 0 auto;
        padding: 0.35rem 0.9rem;
        font-size: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .promotion-banner--multi .promotion-banner__card,
    .promotion-banner--multi .promotion-banner__card.is-active {
        transition: none;
    }
}


/* ==========================================================
   GLOBAL HEADING WEIGHT
   ========================================================== */

/* The page title (H1) keeps its own rule (.page-header__title); only H2 and smaller
   are changed here, and blocks and entities use dozens of heading classes.
   !important on purpose: otherwise font-weight would have to change in every heading class. */
h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold) !important;
}


/* ==========================================================
   FOOTER BOTTOM (copyright box + warning banner) —
   matches the reference site's .footer__box / .footer__footnote
   / .footer__warning structure and values exactly.
   ========================================================== */

.site-footer-bottom {
    background-color: #fff;
}

.site-footer-bottom__box {
    display: flex;
    align-items: flex-start;
    padding: var(--space-8) 0 var(--space-2);
    border-bottom: var(--border-width-thin) solid rgba(0, 0, 0, 0.1);
}

.site-footer-bottom__logo-link {
    flex-shrink: 0;
    display: block;
    margin: 0 var(--space-6) var(--space-4) 0;
    width: 208px;
}

.site-footer-bottom__logo {
    display: block;
    width: 100%;
    height: auto;
}

.site-footer-bottom__footnote {
    display: flex;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 20px;
}

.site-footer-bottom__text {
    margin: 0 var(--space-4);
}

.site-footer-bottom__text p {
    margin: 0 0 var(--space-4);
}

.site-footer-bottom__text p:first-child {
    margin-top: 0;
}

.site-footer-bottom__text a {
    color: var(--brand-accent);
    text-decoration: none;
}

.site-footer-bottom__text a:hover {
    text-decoration: underline;
}

.site-footer-bottom__warning {
    height: 120px;
    overflow: hidden;
}

.site-footer-bottom__warning div {
    padding: var(--space-4) 0 0;
    text-transform: uppercase;
    color: #D2DCD7;
    text-align: center;
    font-size: 28px;
    transform: scaleY(2);
    white-space: nowrap;
    height: 60px;
}

@media (max-width: 1400px) {

    .site-footer-bottom__warning div {
        font-size: 24px;
    }

}

@media (max-width: 1150px) {

    .site-footer-bottom__warning div {
        font-size: 20px;
        white-space: normal;
    }

}

@media (max-width: 768px) {

    .site-footer-bottom__box {
        flex-direction: column;
    }

    .site-footer-bottom__logo-link {
        margin-right: 0;
    }

}

@media (max-width: 480px) {

    .site-footer-bottom__warning div {
        font-size: 12px;
    }

}


/* ==========================================================
   MOBILE MENU (topbar toggle + search-on-top layout)
   ========================================================== */

.site-topbar__toggle {
    flex-shrink: 0;
    border-color: var(--text-primary);
    background-color: var(--white);
    padding: 0.55rem 0.7rem;
}

.site-topbar__toggle .navbar-toggler-icon,
.mobile-search-bar__toggle .navbar-toggler-icon {
    width: 3.5rem;
    height: 3.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.mobile-search-bar__toggle {
    flex-shrink: 0;
    border-color: var(--text-primary);
    background-color: var(--white);
    padding: 0.55rem 0.7rem;
}

@media (max-width: 991.98px) {

    .site-topbar__container {
        flex-wrap: nowrap !important;
        min-height: 64px;
    }

    .site-topbar__info {
        min-width: 0;
        overflow: hidden;
        flex-wrap: nowrap !important;
    }

    .site-topbar__phone-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

}

/* Full-screen panel: scrolls on its own, close button always on top */
.site-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1080;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background-color: var(--white);
}

.site-mobile-menu.collapsing {
    height: auto !important;
    transition: none;
}

.site-mobile-menu__head {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--white);
    border-bottom: var(--border-width-thin) solid var(--border-light);
}

.site-mobile-menu__head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
}

.site-mobile-menu__title {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.site-mobile-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-right: -0.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
}

.site-mobile-menu__close:hover,
.site-mobile-menu__close:focus-visible {
    background: var(--gray-50, #f5f7f6);
    color: var(--color-primary);
}

.site-mobile-menu__container {
    padding-bottom: calc(var(--space-6, 1.75rem) + env(safe-area-inset-bottom, 0px)) !important;
}

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

.site-mobile-menu__account {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-3, 0.75rem);
}

.site-mobile-menu__account-button {
    display: inline-flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    height: 3rem;
    padding: 0 var(--space-5, 1.5rem);
    background: var(--white);
    border: var(--border-width-thin, 1px) solid var(--border-default);
    border-radius: var(--radius-pill, 999px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
}

.site-mobile-menu__account-button svg {
    flex: 0 0 auto;
    color: var(--color-primary);
}

.site-mobile-menu__account-button:hover,
.site-mobile-menu__account-button:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.site-mobile-menu__account-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-mobile-menu__logout {
    flex: 0 0 auto;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    color: #b42318;
    font-weight: 600;
    text-decoration: none;
}

.site-mobile-menu__search-input {
    border-radius: var(--radius-input);
}

.site-mobile-menu__list {
    flex-direction: column;
}

.site-mobile-menu__list .menu-item > a {
    display: block;
    padding: var(--space-3) 0;
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    border-bottom: var(--border-width-thin) solid var(--border-light);
}


/* ==========================================================
   TOPBAR QUICK ACTIONS (mobile-only round buttons)
   ========================================================== */

.site-topbar__quick-action {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 2rem;
    padding-inline: 1.1rem;
    border-radius: var(--radius-pill, 999px);
    color: var(--white);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.site-topbar__quick-action:hover {
    filter: brightness(0.95);
    color: var(--white);
}

.site-topbar__quick-action--address {
    background-color: var(--color-primary);
}

.site-topbar__quick-action--hotline {
    background-color: transparent;
    color: var(--text-primary);
    padding-inline: 0;
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
}

.site-topbar__quick-action-icon {
    flex-shrink: 0;
}


/* ==========================================================
   TOPBAR — RESULTS LINK (placeholder, the form will be added later)
   ========================================================== */

.site-topbar__results-link {
    color: var(--color-primary);
    font-size: var(--font-size-meta);
}

.site-topbar__results-link:hover {
    color: var(--color-primary);
    text-decoration: underline !important;
}

.site-mobile-menu__results-link {
    color: var(--color-primary);
    font-size: var(--font-size-body-sm);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-width-thin) solid var(--border-light);
}



/* ==========================================================
   Visually hidden
   ==========================================================
   Text that belongs in the markup but not on screen — icon-only
   buttons keep their labels this way, so a screen reader still
   announces "Facebook" where a sighted reader sees a glyph.
   Neither this class nor Bootstrap's .visually-hidden was defined
   anywhere in the theme, so icon-only controls had no accessible
   name at all.
   ========================================================== */

.screen-reader-text,
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}


/* ==========================================================
   COMPONENT: pagination
   ==========================================================
   paginate_links() nömrələri sadə <a> və <span> kimi verir.
   Tema onları heç yerdə oformlamırdı, ona görə bütün arxiv
   səhifələrinin altında sıra ilə düzülmüş adi linklər görünürdü.
   Qayda ümumi yazılır — məqalələr, simptomlar, xidmətlər və
   qalan arxivlər eyni səhifələməni alsın.
   ========================================================== */

.page-numbers{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:2.75rem;
    height:2.75rem;
    padding:0 .75rem;
    margin:0 .25rem;

    background:var(--surface-card,#fff);
    border:var(--border-width-thin) solid var(--border-light);
    border-radius:var(--radius-pill,999px);

    color:var(--text-primary);
    font-weight:var(--font-weight-medium);
    text-decoration:none;

    transition:var(--transition-fast);
}

.page-numbers:hover,
.page-numbers:focus-visible{
    border-color:var(--color-primary);
    color:var(--color-primary);
}

.page-numbers.current{
    background:var(--color-primary);
    border-color:var(--color-primary);
    color:var(--text-inverse,#fff);
}

/* Aralıq nişanı düymə deyil — çərçivəsiz qalır. */
.page-numbers.dots{
    background:none;
    border-color:transparent;
    min-width:1.5rem;
    padding:0;
}

.page-numbers.prev,
.page-numbers.next{
    padding:0 1.25rem;
}

@media (max-width:575.98px){

    /* Dar ekranda yalnız cari səhifə, qonşuları və oxlar qalır:
       on nömrə bir-birinin altına düşüb iki sətir tutur. */
    .page-numbers{
        min-width:2.25rem;
        height:2.25rem;
        margin:0 .125rem;
        padding:0 .5rem;
    }

    .page-numbers.prev,
    .page-numbers.next{
        padding:0 .75rem;
    }
}


/* Paginate_links() wrapper used by the article and drug archives. */
.article-archive__pagination{
    display:flex;
    justify-content:center;
}


/* ==========================================================
   COMPONENT: entity table of contents
   ==========================================================
   Uzun sənəd səhifələrində hero ilə ilk bölmə arasındakı panel.
   `parts/entity-toc.php` ilə birlikdə işləyir; simptom və ixtisas
   səhifələri eyni komponentdən istifadə edir.
   ========================================================== */

.entity-toc-wrap{
    padding-block:var(--space-4);
}

.entity-toc{
    display:flex;
    align-items:flex-start;
    gap:var(--space-5);

    background:color-mix(in srgb, var(--brand-accent) 9%, #fff);
    border-radius:var(--radius-xl);
    padding:var(--space-6) var(--space-7);
}

.entity-toc__icon{
    flex:0 0 auto;
    color:var(--color-primary);
    margin-top:.15rem;
}

/* Sütunlar: siyahı yuxarıdan aşağı oxunur, sonra növbəti sütuna
   keçir. */
.entity-toc__list{
    flex:1 1 auto;
    columns:3;
    column-gap:var(--space-7);
    margin:0;
    padding:0;
    list-style:none;
}

.entity-toc__item{
    break-inside:avoid;
    margin-bottom:.125rem;
}

/*
 * Əlifba göstəricisindəki kimi: daxili boşluq həmişə var, fon isə
 * yalnız kursor altında — sətir yerini dəyişmir, sadəcə yaşıl
 * həbə çevrilir. Mənfi kənar boşluq mətni sütunun sol xəttində
 * saxlayır.
 */
.entity-toc__link{
    display:inline-block;

    margin-inline-start:-.875rem;
    padding:.3rem .875rem;

    border-radius:var(--radius-pill,999px);

    color:var(--text-primary);
    background-color:transparent;
    text-decoration:none;

    transition:background-color .15s ease,color .15s ease;
}

.entity-toc__link:hover,
.entity-toc__link:focus-visible{
    background-color:var(--color-primary);
    color:var(--text-inverse,#fff);
    text-decoration:none;
    outline:none;
}

@media (max-width:991.98px){

    .entity-toc__list{
        columns:2;
    }
}

@media (max-width:575.98px){

    .entity-toc{
        padding:var(--space-5);
        gap:var(--space-4);
    }

    .entity-toc__list{
        columns:1;
    }
}

/*
 * ==========================================================
 * Long lists: compact view and a "show all" button
 * ==========================================================
 * The list itself stays complete (search engines and Ctrl+F see it); only its
 * height is limited and the text fades out at the bottom.
 * ==========================================================
 */

[data-expandable].is-collapsed{
    position:relative;
    max-height:17rem;
    overflow:hidden;
}

/* Panels with their own background: the gradient follows it. */
.specialty-single__conditions-index[data-expandable].is-collapsed::after,
.doctor-single__conditions-index[data-expandable].is-collapsed::after,
.condition-single__siblings[data-expandable].is-collapsed::after{
    background:linear-gradient(to bottom,rgba(246,248,247,0),var(--brand-surface));
}

[data-expandable].is-collapsed::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:5rem;
    background:linear-gradient(to bottom,rgba(255,255,255,0),var(--surface-muted,var(--brand-surface)));
    pointer-events:none;
}

/* Düymə sətrin sağ kənarında dayanır: siyahı soldan oxunur, düymə
   isə onun davamı deyil, idarəetmədir. */
.hospital-expand{
    display:inline-flex;
    align-items:center;
    margin-top:var(--space-4,1rem);
    margin-left:auto;
    padding:var(--space-2,.5rem) var(--space-5,1.5rem);
    border:1px solid var(--color-primary);
    border-radius:var(--radius-pill,999px);
    background:none;
    color:var(--color-primary);
    font-weight:var(--font-weight-semibold,600);
    cursor:pointer;
    transition:background var(--transition-fast),color var(--transition-fast);
}

/* Düymə öz sətrini tutur və sağa dayanır. `float` əvəzinə blok
   göstəricisi: float qonşu bölmələrin axınına qarışırdı. */
.hospital-expand{
    display:flex;
    width:max-content;
}

.hospital-expand:hover,
.hospital-expand:focus-visible{
    background:var(--color-primary);
    color:var(--text-inverse,#fff);
}

/*
 * ==========================================================
 * Əsas menyu: ikinci səviyyə
 * ==========================================================
 * Alt siyahı üstündəki bəndin altından açılır. Klaviatura ilə
 * gəzənlər üçün də: fokus bəndin içindən çıxmayana qədər açıq
 * qalır.
 * ==========================================================
 */

.site-navigation .navbar-nav > li {
    position: relative;
}

.site-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    display: block;
    min-width: 15rem;
    margin: 0;
    padding: var(--space-2, .5rem);
    list-style: none;
    background: var(--surface-card, #fff);
    border-radius: var(--radius-card, .75rem);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);

    /* Görünməyən vəziyyət: display:none fokusu da kəsirdi. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(.35rem);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.site-navigation .navbar-nav > li:hover > .sub-menu,
.site-navigation .navbar-nav > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-navigation .sub-menu a {
    display: block;
    padding: var(--space-2, .5rem) var(--space-4, 1rem);
    border-radius: var(--radius-sm, .5rem);
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.4;
}

.site-navigation .sub-menu a:hover,
.site-navigation .sub-menu a:focus-visible {
    background: var(--surface-muted, var(--brand-surface));
    color: var(--color-primary);
}

/* Alt siyahısı olan bənddə kiçik ox */
.site-navigation .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: .4em;
    height: .4em;
    margin-left: .45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-.1em);
}

/* Sağ kənara yaxın bəndin siyahısı ekrandan çıxmasın */
.site-navigation .navbar-nav > li:nth-last-child(-n+2) .sub-menu {
    left: auto;
    right: 0;
}


/* Dar ekranda bloklar arası aralıq kiçilir: telefonda geniş
   boşluqlar səhifəni uzadır, oxumağa kömək etmir. */
@media (max-width: 767.98px) {

    :root {
        --space-region: 3.5rem;
    }
}


/* ==========================================================
   SH MODAL
   ========================================================== */

html.sh-modal-open {
    overflow: hidden;
}

.sh-modal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 1rem);
    opacity: 0;
    transition: opacity 0.22s ease;
}

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

.sh-modal.is-open {
    opacity: 1;
}

.sh-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 27, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.sh-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    background: var(--surface-card, #fff);
    border-radius: var(--radius-card, 0.75rem);
    box-shadow: 0 24px 64px rgba(26, 26, 27, 0.28), 0 4px 14px rgba(26, 26, 27, 0.1);
    transform: translateY(14px) scale(0.97);
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
    outline: none;
}

.sh-modal.is-open .sh-modal__dialog {
    transform: none;
}

.sh-modal__close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sh-modal__close:hover {
    background: var(--gray-200);
}

.sh-modal__close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.sh-modal__panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-5, 1.5rem) var(--space-5, 1.5rem) var(--space-6, 1.75rem);
}

.sh-modal__head {
    margin-bottom: var(--space-5, 1.5rem);
    padding-right: 2.5rem;
}

.sh-modal__title {
    margin: 0 0 0.35rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}

.sh-modal__sub {
    margin: 0;
    font-size: var(--font-size-meta, 0.875rem);
    line-height: 1.5;
    color: var(--text-secondary);
}

.sh-modal__success {
    text-align: center;
    padding-top: var(--space-8, 2.5rem);
}

.sh-modal__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: var(--space-4, 1rem);
    border-radius: 50%;
    background: var(--primary-100, var(--primary-100));
    color: var(--primary-600, var(--brand-primary));
}

.sh-modal__success .sh-modal__title {
    outline: none;
}

.sh-modal__success .sh-modal__sub {
    margin-bottom: var(--space-5, 1.5rem);
}

.sh-form--modal {
    gap: var(--space-4, 1rem);
}

.sh-form--modal .feedback-form-block__input {
    min-height: 3rem;
    padding: 0.7rem 1.1rem;
    background-color: var(--gray-50, #FAFAFA);
    border: 1px solid var(--gray-200, #E5E5E5);
    font-family: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.sh-form--modal .feedback-form-block__input:focus {
    background-color: #fff;
    border-color: var(--color-primary, var(--brand-accent));
    box-shadow: 0 0 0 3px rgba(var(--primary-500-rgb), 0.18);
}

.sh-form--modal .sh-form__textarea {
    min-height: 5.5rem;
}

.sh-form--modal select.feedback-form-block__input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2378797B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
}

.sh-form--modal .feedback-form-block__input[aria-invalid="true"],
.sh-phone:has([aria-invalid="true"]) {
    border-color: var(--red-500, #E11D2E);
    box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.12);
}

.sh-phone {
    display: flex;
    align-items: stretch;
    background: var(--gray-50, #FAFAFA);
    border: 1px solid var(--gray-200, #E5E5E5);
    border-radius: var(--radius-pill, 999px);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.sh-phone:focus-within {
    background: #fff;
    border-color: var(--color-primary, var(--brand-accent));
    box-shadow: 0 0 0 3px rgba(var(--primary-500-rgb), 0.18);
}

.sh-phone__prefix {
    display: flex;
    align-items: center;
    padding: 0 0.75rem 0 1.1rem;
    border-right: 1px solid var(--gray-200, #E5E5E5);
    font-weight: 600;
    color: var(--text-secondary);
}

.sh-form--modal .sh-phone__input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: 0 var(--radius-pill, 999px) var(--radius-pill, 999px) 0;
    box-shadow: none;
}

.sh-form--modal .sh-phone__input:focus,
.sh-form--modal .sh-phone__input[aria-invalid="true"] {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.sh-form__error {
    margin: 0.4rem 0 0 1rem;
    font-size: var(--font-size-helper, 0.8125rem);
    line-height: 1.35;
    color: var(--red-500, #E11D2E);
}

.sh-form__error[hidden] {
    display: none;
}

.sh-form .sh-form__error--general {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-card, 0.75rem);
    background: var(--red-50, #FDEBEC);
}

.sh-form--modal .sh-form__consent {
    margin-bottom: 0;
}

.sh-form__button {
    position: relative;
    justify-content: center;
    gap: 0.6rem;
}

.sh-form__button:disabled {
    opacity: 0.75;
    cursor: progress;
    filter: none;
}

.sh-form__spinner {
    display: none;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sh-spin 0.7s linear infinite;
}

.sh-form__button.is-loading .sh-form__spinner {
    display: inline-block;
}

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

@media (max-width: 575.98px) {

    .sh-modal {
        align-items: flex-end;
        padding: 0;
    }

    .sh-modal__dialog {
        max-width: none;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: calc(1.25rem * var(--rs, 1)) calc(1.25rem * var(--rs, 1)) 0 0;
        transform: translateY(100%);
    }

    .sh-modal__panel {
        padding: var(--space-5, 1.5rem) var(--space-4, 1rem) calc(var(--space-5, 1.5rem) + env(safe-area-inset-bottom, 0px));
    }

    .sh-form__button,
    .sh-modal__done {
        width: 100%;
        justify-content: center;
    }

    .sh-modal__success-icon {
        width: 4rem;
        height: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .sh-modal,
    .sh-modal__dialog {
        transition: none;
    }

    .sh-modal__dialog,
    .sh-modal.is-open .sh-modal__dialog {
        transform: none;
    }

    .sh-form__spinner {
        animation-duration: 1.6s;
    }
}


/* 3413: neutral placeholder for condition/symptom pictures (hospital_image_placeholder()) */
.media-placeholder {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(135deg, var(--brand-primary-light, var(--brand-primary-light)) 0%, var(--brand-accent-t2, color-mix(in srgb, var(--brand-accent) 12%, #fff)) 100%);
    color: var(--brand-primary, var(--brand-primary));
}

.media-placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
}

.media-placeholder__blob {
    fill: currentColor;
    opacity: .07;
}

.media-placeholder__disc {
    fill: #fff;
    opacity: .9;
}

.media-placeholder__sign {
    fill: currentColor;
    opacity: .55;
}


/* Medical reviewer line (E-E-A-T), parts/medical-reviewer.php */
.medical-reviewer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-muted);
    min-width: 0;
}

.medical-reviewer__photo {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--brand-primary-light);
}

.medical-reviewer__photo--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-primary-dark);
}

.medical-reviewer__text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.medical-reviewer__label {
    font-weight: 600;
}

.medical-reviewer__name {
    color: var(--brand-primary-dark);
    font-weight: 600;
    text-decoration: none;
}

.medical-reviewer__name:hover,
.medical-reviewer__name:focus-visible {
    color: var(--brand-primary);
    text-decoration: underline;
}

.medical-reviewer__sep {
    margin: 0 4px;
}

.page-header__meta .medical-reviewer {
    margin-top: 10px;
}

@media (max-width: 575.98px) {
    .medical-reviewer__date {
        display: block;
    }

    .medical-reviewer__sep {
        display: none;
    }
}

/* ==========================================================
   A–Z ARCHIVES (condition, symptom, medterm, service):
   "how many per page" select at the right end of the letter
   row, and the pager under the list. Driven by card-slider.js.
   ========================================================== */

.az-per-page {
    flex: 0 0 auto;
    margin-left: auto;
}

.az-per-page select {
    height: 2.75rem;
    padding: 0 2.25rem 0 var(--space-4, 1rem);
    background: var(--brand-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%234E6A58' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.9rem center;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.az-per-page select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.az-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4, 1rem);
    margin-top: var(--space-6, 1.75rem);
}

.az-pager[hidden] {
    display: none;
}

.az-pager__button {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.az-pager__button:disabled {
    opacity: .35;
    cursor: default;
}

.az-pager__state {
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold, 600);
}

@media (max-width: 767.98px) {

    .az-per-page,
    .az-per-page select {
        width: 100%;
    }
}

/* ==================================================================
 * Layout presets (25.10/26.10, Brand::HEADERS / HEROES) — body classes
 * hdr-band | hdr-menu | hdr-center and hero-wide | hero-split.
 * Defaults print no class, so the standard look is untouched.
 * ================================================================== */

/* --- Header: coloured top band --- */
.hdr-band .site-topbar { background-color: var(--brand-primary-dark); color: #fff; border-color: transparent !important; }
.hdr-band .site-topbar__phone, .hdr-band .site-topbar__phone-icon, .hdr-band .site-topbar__quick-action, .hdr-band .site-topbar__logo-link { color: #fff; }
.hdr-band .site-topbar .btn-primary { background-color: #fff; border-color: #fff; color: var(--brand-primary-dark); }
.hdr-band .site-topbar .btn-primary:hover { background-color: var(--brand-primary-light); border-color: var(--brand-primary-light); color: var(--brand-primary-dark); }
.hdr-band .site-topbar__account { background-color: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.hdr-band .site-topbar__account:hover { background-color: rgba(255, 255, 255, .12); color: #fff; }

/* --- Header: coloured menu bar --- */
.hdr-menu .site-navigation { background-color: var(--brand-primary) !important; }
.hdr-menu .site-navigation .navbar-nav > .menu-item > a,
.hdr-menu .site-navigation .navbar-nav > .menu-item > .nav-link { color: #fff; }
.hdr-menu .site-navigation .navbar-nav > .menu-item > a:hover,
.hdr-menu .site-navigation .navbar-nav > .current-menu-item > a,
.hdr-menu .site-navigation .navbar-nav > .current-menu-ancestor > a { color: #fff; opacity: .85; text-decoration: underline; text-underline-offset: .35em; }
.hdr-menu .site-navigation .dropdown-toggle::after { border-top-color: #fff; }
.hdr-menu .site-navigation__search-field, .hdr-menu .site-navigation__search input { background-color: rgba(255, 255, 255, .95); }

/* --- Header: logo in the centre (desktop) --- */
@media (min-width: 992px) {
    .hdr-center .site-topbar__container { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; }
    .hdr-center .site-topbar__right { display: contents !important; }
    .hdr-center .site-topbar__info { grid-column: 1; grid-row: 1; justify-self: start; }
    .hdr-center .site-topbar__logo { grid-column: 2; grid-row: 1; justify-self: center; }
    .hdr-center .site-topbar__actions { grid-column: 3; grid-row: 1; justify-self: end; }
    .hdr-center .site-navigation__menu .navbar-nav { justify-content: center; width: 100%; }
}

/* --- Home first screen: wide photo, text over it, tiles below --- */
@media (min-width: 992px) {
    .hero-wide .home-hero__grid { display: block !important; }
    .hero-wide .home-hero__card { position: relative; display: flex !important; flex-direction: column; justify-content: flex-end; min-height: 26rem; overflow: hidden; }
    .hero-wide .home-hero__card-media { position: absolute; inset: 0; min-height: 0 !important; }
    .hero-wide .home-hero__card-media img { width: 100%; height: 100% !important; min-height: 0 !important; object-fit: cover; }
    .hero-wide .home-hero__card-body { position: relative; z-index: 1; flex: none; height: auto !important; align-self: flex-start; max-width: 32rem; margin: auto 2rem 2rem; padding: 1.75rem 2rem; background: rgba(255, 255, 255, .94); border-radius: var(--radius-xl); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
    .hero-wide .home-hero__side { display: block !important; margin-top: 1.5rem; }
    .hero-wide .home-hero__tiles { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: auto !important; }
    .hero-wide .home-hero__notice { margin-top: 1.25rem; }
}

/* --- Home first screen: text left, photo right, tiles below --- */
@media (min-width: 992px) {
    .hero-split .home-hero__grid { display: block !important; }
    .hero-split .home-hero__card { display: grid !important; grid-template-columns: 1fr 1.15fr; grid-template-rows: auto !important; align-items: stretch; overflow: hidden; background: var(--brand-primary-light); }
    .hero-split .home-hero__card-media { order: 2; min-height: 22rem !important; }
    .hero-split .home-hero__card-media img { width: 100%; height: 100% !important; object-fit: cover; }
    .hero-split .home-hero__card-body { order: 1; display: flex; flex-direction: column; justify-content: center; padding: 2.5rem 3rem; }
    .hero-split .home-hero__card-title { font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
    .hero-split .home-hero__side { display: block !important; margin-top: 1.5rem; }
    .hero-split .home-hero__tiles { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: auto !important; }
    .hero-split .home-hero__notice { margin-top: 1.25rem; }
}

/* ==========================================================
   INFO BAR — strip above the header (parts/info-bar.php).
   Colours come from presets (.info-bar--*) or, for «custom»,
   from --info-bar-bg / --info-bar-color set inline.
   ========================================================== */

.info-bar {
    --info-bar-bg: var(--brand-primary);
    --info-bar-color: var(--white);
    --info-bar-alpha: 88%;
    position: relative;
    z-index: 1031;
    /* Slightly see-through: the colour is mixed with transparency, the page shows through softly. */
    background-color: var(--info-bar-bg);
    background-color: color-mix(in srgb, var(--info-bar-bg) var(--info-bar-alpha), transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
    color: var(--info-bar-color);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.45;
}

.info-bar--info    { --info-bar-bg: #1D4ED8; --info-bar-color: #fff; }
.info-bar--success { --info-bar-bg: #047857; --info-bar-color: #fff; }
.info-bar--warning { --info-bar-bg: #FEF3C7; --info-bar-color: #78350F; }
.info-bar--danger  { --info-bar-bg: #B8121F; --info-bar-color: #fff; }
.info-bar--dark    { --info-bar-bg: #1F2937; --info-bar-color: #fff; }

.info-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 50px;
    padding-block: 0.625rem;
}

.info-bar__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.info-bar__icon svg,
.info-bar__img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.info-bar__mask {
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: var(--info-bar-icon) center / contain no-repeat;
    mask: var(--info-bar-icon) center / contain no-repeat;
}

.info-bar__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.875rem;
    min-width: 0;
}

.info-bar__text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.info-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.info-bar__link:hover,
.info-bar__link:focus-visible {
    color: inherit;
    background-color: rgba(255, 255, 255, 0.16);
}

.info-bar--warning .info-bar__link:hover,
.info-bar--warning .info-bar__link:focus-visible {
    background-color: rgba(120, 53, 15, 0.08);
}

.info-bar__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.8;
    cursor: pointer;
}

.info-bar__close:hover,
.info-bar__close:focus-visible {
    opacity: 1;
    background-color: rgba(127, 127, 127, 0.18);
}

/* The bar is part of the sticky header: anchor jumps need that much more room. */
.has-sticky-header:has(.info-bar) :is(section, .toc-block)[id] {
    scroll-margin-top: 150px;
}

/* Close button present: keep the content centred in the free space. */
.info-bar__inner:has(.info-bar__close) .info-bar__icon { margin-left: auto; }

@media (max-width: 991.98px) {

    .info-bar {
        font-size: 0.9375rem;
    }

    .info-bar__inner {
        justify-content: flex-start;
        gap: 0.5rem;
        min-height: 44px;
        padding-block: 0.375rem;
    }

    .info-bar__inner:has(.info-bar__close) .info-bar__icon { margin-left: 0; }

    .info-bar__link {
        padding: 0.25rem 0.75rem;
        font-size: 0.875rem;
    }
}

@media print {
    .info-bar { display: none; }
}