/*
Theme Name: Green Tower Dental Clinic
Theme URI: https://greentowerclinicdubai.com
Author: Praveen P P
Description: Premium dental clinic theme for Green Tower Dental Clinic Dubai. Glassmorphic design with cyan-purple gradient, multilingual-ready (EN/AR/RU; English-only mode on by default).
Version: 2.2
Requires at least: 5.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: gtcdxb-theme
Domain Path: /languages
*/

        * { scroll-behavior: smooth; }
        
        /* Modern Color Scheme */
        :root {
            --primary: #06B6D4;        /* Cyan */
            --primary-light: #0EA5E9;  /* Sky Blue */
            --primary-dark: #0891B2;   /* Dark Cyan */
            --accent: #8B5CF6;         /* Purple */
            --accent-light: #A78BFA;   /* Light Purple */
            --accent-dark: #7C3AED;    /* Dark Purple */
            --success: #10B981;        /* Emerald */
            --warning: #F59E0B;        /* Amber */
            --light: #F0F9FF;          /* Alice Blue */
            --light-gray: #F3F4F6;     /* Light Gray */
            --dark: #0F172A;           /* Dark Slate */
        }
        
        body {
            background: linear-gradient(135deg, #F0F9FF 0%, #F5F3FF 50%, #F0FDF4 100%);
            background-attachment: fixed;
        }
        
        /* Glassmorphism Effect */
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
        }
        
        /* Modern Buttons */
        .btn-primary { 
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.75rem;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4);
        }
        
        .btn-primary:hover::before {
            left: 100%;
        }
        
        .btn-secondary { 
            border: 2px solid var(--primary);
            color: var(--primary);
            background: transparent;
            padding: 0.75rem 1.5rem;
            border-radius: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .btn-secondary:hover {
            background: rgba(6, 182, 212, 0.1);
            transform: translateY(-2px);
        }
        
        /* Modal Styling */
        .modal { 
            display: none; 
            position: fixed; 
            z-index: 1000; 
            left: 0; 
            top: 0; 
            width: 100%; 
            height: 100%; 
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(139, 92, 246, 0.1));
            backdrop-filter: blur(5px);
        }
        
        .modal.show { display: flex; }
        
        .modal-content { 
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            margin: auto; 
            padding: 2.5rem; 
            border-radius: 1.5rem; 
            max-width: 600px; 
            max-height: 90vh; 
            overflow-y: auto;
            border: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 20px 60px rgba(6, 182, 212, 0.15);
            animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes slideUp { 
            from { 
                transform: translateY(50px); 
                opacity: 0; 
            } 
            to { 
                transform: translateY(0); 
                opacity: 1; 
            } 
        }

        /* Mobile-Optimized Modal */
        @media (max-width: 640px) {
            .modal-content {
                margin: auto;
                padding: 1.5rem;
                max-width: calc(100% - 2rem);
                max-height: 100vh;
                width: 100%;
                border-radius: 1rem;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            .modal-content input,
            .modal-content textarea,
            .modal-content select {
                font-size: 16px !important;
                padding: 0.75rem !important;
                height: 3rem;
                width: 100%;
            }

            .modal-content label {
                font-size: 0.95rem !important;
                margin-bottom: 0.5rem !important;
            }

            .modal-content button {
                font-size: 1rem !important;
                padding: 0.75rem 1.5rem !important;
                min-height: 44px;
                min-width: 44px;
            }

            .modal-content .flex {
                gap: 0.75rem;
                flex-wrap: wrap;
            }

            .modal-content h2 {
                font-size: 1.5rem !important;
                margin-bottom: 1rem;
            }

            .modal-content h3 {
                font-size: 1.25rem !important;
                margin-bottom: 0.75rem;
            }
        }

        /* Desktop Modal */
        @media (min-width: 641px) {
            .modal-content {
                max-width: 600px;
            }
        }
        
        /* Section Titles */
        .section-title { 
            font-size: 2.25rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
        }
        
        .section-subtitle { 
            font-size: 1.125rem;
            color: #6B7280;
            margin-bottom: 3rem;
        }
        
        /* Cards */
        .card-hover { 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 1.25rem;
        }
        
        .card-hover:hover { 
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
        }
        
        /* Gradient Text */
        .gradient-text { 
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* Before/After Slider */
        .before-after-slider { 
            position: relative; 
            overflow: hidden; 
            width: 100%; 
            border-radius: 1.25rem;
        }
        
        .before-after-slider img { 
            display: block; 
            width: 100%; 
            border-radius: 1.25rem;
        }
        
        .img-wrapper { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            overflow: hidden;
            border-radius: 1.25rem;
        }
        
        .img-wrapper.after { 
            left: 50%; 
            width: 50%; 
        }
        
        .slider-handle { 
            position: absolute; 
            left: 50%; 
            top: 0; 
            height: 100%; 
            width: 3px; 
            background: linear-gradient(90deg, var(--primary), var(--accent));
            cursor: ew-resize; 
            transform: translateX(-2px);
            box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
        }
        
        .slider-handle::before { 
            content: ''; 
            position: absolute; 
            left: -30px; 
            top: 50%; 
            transform: translateY(-50%); 
            width: 60px; 
            height: 60px; 
            background: rgba(255, 255, 255, 0.95);
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center;
            box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
        }
        
        /* Stats Counter */
        .stats-counter { 
            text-align: center; 
        }
        
        .counter-number { 
            font-size: 2.25rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* Animations */
        .fade-in { 
            animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes fadeIn { 
            from { 
                opacity: 0; 
                transform: translateY(20px); 
            } 
            to { 
                opacity: 1; 
                transform: translateY(0); 
            } 
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .float {
            animation: float 3s ease-in-out infinite;
        }
        
        /* Floating CTAs */
        .floating-btn { 
            position: fixed; 
            z-index: 999; 
            bottom: 30px; 
            width: 60px; 
            height: 60px; 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 24px; 
            color: white;
            border: none;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            backdrop-filter: blur(10px);
        }
        
        .floating-btn:hover { 
            transform: scale(1.15) translateY(-5px);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
        }
        
        /* Colours only. Positions and sizes are set together in the
           FLOATING LAYER block near the end of this file, so that every
           corner-pinned element is laid out in one place. */

        .floating-whatsapp {
            background: linear-gradient(135deg, #25D366 0%, #20BA58 100%);
        }

        .floating-book {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
        }

        .floating-phone {
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        }

        @media (max-width: 768px) {
            .floating-btn { font-size: 20px; }
        }
        
        /* Award & Service Cards */
        .award-badge { 
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 1.25rem; 
            padding: 1.5rem;
            display: flex; 
            align-items: center; 
            justify-content: center; 
            height: 100px; 
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.6);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        
        .award-badge:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(6, 182, 212, 0.15);
            border-color: var(--primary);
        }
        
        .service-cta-card { 
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 1.25rem; 
            padding: 2rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.6);
            text-align: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .service-cta-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(6, 182, 212, 0.2);
        }
        
        .service-cta-card i {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* Navigation */
        nav {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }
        
        nav a:hover {
            color: var(--primary);
        }
        
        /* Input Fields */
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="date"],
        input[type="number"],
        textarea,
        select {
            width: 100%;
            padding: 0.875rem;
            margin: 0.5rem 0 1rem 0;
            border: 2px solid rgba(6, 182, 212, 0.2);
            border-radius: 0.75rem;
            background: rgba(255, 255, 255, 0.8);
            font-size: 1rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(5px);
        }
        
        input:focus,
        textarea:focus,
        select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
            background: rgba(255, 255, 255, 0.95);
        }
        
        /* Swiper Pagination */
        .swiper-pagination-bullet-active {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important;
        }
        
        /* Global Color Overrides - New Fluid Scheme */
        .bg-blue-50 { background-color: rgba(6, 182, 212, 0.08) !important; }
        .bg-blue-600, .bg-blue-700 { 
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
            box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3) !important;
        }
        .text-blue-600 { color: var(--primary) !important; }
        .border-blue-600 { border-color: var(--primary) !important; }
        
        .bg-purple-50 { background-color: rgba(139, 92, 246, 0.08) !important; }
        .bg-purple-600, .bg-purple-700 { 
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%) !important;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important;
        }
        .text-purple-600 { color: var(--accent) !important; }
        .border-purple-600 { border-color: var(--accent) !important; }
        
        .bg-green-50 { background-color: rgba(16, 185, 129, 0.08) !important; }
        .bg-green-600 { background: linear-gradient(135deg, var(--success) 0%, #34d399 100%) !important; }
        .text-green-600 { color: var(--success) !important; }
        .border-green-600 { border-color: var(--success) !important; }
        
        .bg-orange-50 { background-color: rgba(245, 158, 11, 0.08) !important; }
        .bg-orange-600 { background: linear-gradient(135deg, var(--warning) 0%, #fcd34d 100%) !important; }
        .text-orange-600 { color: var(--warning) !important; }
        .border-orange-600 { border-color: var(--warning) !important; }
        
        .bg-red-500, .bg-red-600 { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; }
        .text-red-600 { color: #b91c1c !important; } /* #ef4444 was 3.76:1 on white, under AA */
        .border-red-600 { border-color: #ef4444 !important; }
        
        /* Service Cards Glassmorphism */
        .bg-blue-50, .bg-purple-50, .bg-green-50 {
            backdrop-filter: blur(10px) !important;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
        }
        
        /* Section Backgrounds - Fluid Gradients */
        .bg-gradient-to-r {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
        }
        
        .bg-gray-100 {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
        }
        /* Service Cards */
        .service-card {
            transition: all 0.3s ease;
            opacity: 1;
            transform: translateY(0);
        }

        .service-card img {
            transition: transform 0.3s ease;
        }

        .service-card:hover img {
            transform: scale(1.05);
        }

        .filter-btn {
            transition: all 0.3s ease;
        }

        .filter-btn:hover:not(.active) {
            background: linear-gradient(135deg, #06B6D4 0%, #0EA5E9 100%) !important;
            color: white !important;
        }

        @media (max-width: 640px) {
            .service-card {
                max-width: 100%;
            }
            
            .filter-btn {
                font-size: 0.75rem !important;
                padding: 0.5rem 1rem !important;
            }

            .service-grid {
                grid-template-columns: 1fr !important;
            }
        }

        /* Auto-hide Topbar and Navbar on Scroll */
        .topbar {
            transition: transform 0.3s ease-in-out;
        }

        .topbar.hide {
            transform: translateY(-100%);
        }

        .navbar {
            transition: transform 0.3s ease-in-out;
        }

        /* Sit directly under the top bar, however tall it wraps (phones:
           ~52px). The fixed top-8 / md:top-10 classes overlapped it.
           nav.navbar outranks those single-class utilities. */
        nav.navbar { top: var(--topbar-h, 2.5rem); }
        body.admin-bar nav.navbar { top: calc(32px + var(--topbar-h, 2.5rem)); }
        @media screen and (max-width: 782px) {
            body.admin-bar nav.navbar { top: calc(46px + var(--topbar-h, 2.5rem)); }
        }

        /* The navbar stays on screen: it only moves up into the space the
           hidden top bar leaves (--topbar-h is measured in main.js). */
        .navbar.hide {
            transform: translateY(calc(-1 * var(--topbar-h, 40px)));
        }


/* ============================================================
 * WordPress admin bar offset
 * The admin bar is fixed at top:0 and 32px tall (46px on mobile,
 * where it is also fixed rather than scrolling away). Our own
 * fixed topbar and navbar sit underneath it without this.
 * ============================================================ */

body.admin-bar .topbar { top: 32px; }
body.admin-bar .navbar { top: 72px; }

@media screen and (max-width: 782px) {
	body.admin-bar .topbar { top: 46px; }
	body.admin-bar .navbar { top: 80px; }
}

/* ============================================================
 * Back to top
 * ============================================================ */

.back-to-top {
	position: fixed;
	border: 0;
	border-radius: 9999px;
	background: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%);
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	z-index: 55;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(15, 23, 42, .26);
}

.back-to-top:focus-visible {
	outline: 3px solid rgba(6, 182, 212, .5);
	outline-offset: 2px;
}

/* Position and RTL mirroring live in the FLOATING LAYER block below. */

@media print { .back-to-top { display: none; } }

/* ============================================================
 * Card images: always fill their frame without distorting
 * ============================================================ */

.card-hover img,
.service-card img,
.doctor-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Doctor portraits: bias toward the upper part so faces are not cropped. */
.doctor-photo img,
.gtcdxb-doctor-photo img {
	object-position: center 22%;
}

/* Fixed aspect frames so a mixed-size media library still looks even. */
.media-frame-4x3 { aspect-ratio: 4 / 3; overflow: hidden; }
.media-frame-1x1 { aspect-ratio: 1 / 1; overflow: hidden; }
.media-frame-3x4 { aspect-ratio: 3 / 4; overflow: hidden; }

/* ============================================================
 * Modal: lighter animation, tighter form spacing
 * ============================================================ */

.modal {
	opacity: 0;
	transition: opacity .22s ease;
}

.modal.show {
	opacity: 1;
}

.modal .modal-content,
.modal > div {
	transition: transform .26s cubic-bezier(.16, 1, .3, 1), opacity .26s ease;
}

.modal:not(.show) .modal-content,
.modal:not(.show) > div {
	transform: translateY(14px) scale(.985);
	opacity: 0;
}

.modal.show .modal-content,
.modal.show > div {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* Tighter vertical rhythm inside modal forms. */
.modal form .mb-4 { margin-bottom: .65rem; }
.modal form .mb-6 { margin-bottom: .9rem; }

.modal form label {
	margin-bottom: .25rem;
	font-size: .8125rem;
	line-height: 1.3;
}

.modal form input,
.modal form select,
.modal form textarea {
	padding: .5rem .75rem;
	font-size: .9375rem;
	line-height: 1.4;
	border-radius: .5rem;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.modal form input:focus,
.modal form select:focus,
.modal form textarea:focus {
	outline: none;
	border-color: #06B6D4;
	box-shadow: 0 0 0 3px rgba(6, 182, 212, .16);
}

.modal form textarea { min-height: 76px; resize: vertical; }

.modal-content {
	max-height: 86vh;
	overflow-y: auto;
	padding: 1.5rem;
}

@media (max-width: 640px) {
	.modal-content { padding: 1.15rem; max-height: 90vh; }
	.modal form .mb-4 { margin-bottom: .55rem; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.modal,
	.modal .modal-content,
	.modal > div,
	.back-to-top {
		transition: none;
	}
}

/* ============================================================
 * Hero media
 * ============================================================ */

.hero-media { position: relative; }

.hero-media img,
.hero-media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* YouTube facade: poster plus a play button. The iframe is only
   inserted on click, so an unwatched video costs nothing on load. */
.hero-youtube {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.hero-youtube iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 1rem;
}

.hero-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, .92);
	color: #0891B2;
	font-size: 24px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 28px rgba(15, 23, 42, .28);
	transition: transform .22s cubic-bezier(.16, 1, .3, 1), background .22s ease;
}

/* Nudge the triangle so it looks centred inside the circle. */
.hero-play i { margin-left: 4px; }

.hero-youtube:hover .hero-play {
	transform: translate(-50%, -50%) scale(1.08);
	background: #fff;
}

.hero-play:focus-visible {
	outline: 3px solid rgba(6, 182, 212, .6);
	outline-offset: 3px;
}

@media (max-width: 640px) {
	.hero-play { width: 58px; height: 58px; font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-play { transition: none; }
}

/* ============================================================
 * FLOATING LAYER — coordinated positions
 *
 * Everything pinned to the viewport corners is laid out here in
 * one place, so nothing lands on top of anything else. Earlier
 * rules set these positions piecemeal and collided.
 *
 * Layout:
 *   right column, bottom row  →  phone, then WhatsApp at the corner
 *   left column, bottom       →  Book appointment
 *   left column, above Book   →  Back to top
 *   language switcher         →  lives in the header, not here
 *
 * Arabic mirrors the whole thing left-for-right.
 * ============================================================ */

:root {
	--fl-gap: 30px;                 /* distance from the viewport edge   */
	--fl-size: 60px;                /* button diameter                   */
	--fl-stack: 74px;               /* vertical step between stacked btns */
	--fl-row: 70px;                 /* horizontal step between row btns   */
	--fl-safe: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 768px) {
	:root {
		--fl-gap: 18px;
		--fl-size: 50px;
		--fl-stack: 62px;
		--fl-row: 60px;
	}
}

.floating-btn,
.back-to-top {
	width: var(--fl-size);
	height: var(--fl-size);
}

/* --- Right column: phone and WhatsApp, side by side --- */

.floating-whatsapp {
	right: var(--fl-gap);
	left: auto;
	bottom: calc(var(--fl-gap) + var(--fl-safe));
}

.floating-phone {
	right: calc(var(--fl-gap) + var(--fl-row));
	left: auto;
	bottom: calc(var(--fl-gap) + var(--fl-safe));
}

/* --- Left column: Book, with Back to top stacked above it --- */

.floating-book {
	left: var(--fl-gap);
	right: auto;
	bottom: calc(var(--fl-gap) + var(--fl-safe));
}

.back-to-top {
	left: var(--fl-gap);
	right: auto;
	bottom: calc(var(--fl-gap) + var(--fl-stack) + var(--fl-safe));
	z-index: 998;               /* just under .floating-btn's 999 */
}

/* --- Arabic: mirror the whole layer --- */

.gtml-rtl .floating-whatsapp {
	left: var(--fl-gap);
	right: auto;
}

.gtml-rtl .floating-phone {
	left: calc(var(--fl-gap) + var(--fl-row));
	right: auto;
}

.gtml-rtl .floating-book,
.gtml-rtl .back-to-top {
	right: var(--fl-gap);
	left: auto;
}

/* --- Very narrow screens: drop the phone button --- */
/* The top bar already carries a tap-to-call link, so nothing is lost. */

@media (max-width: 360px) {
	.floating-phone { display: none; }
}

/* --- Header language switcher --- */

.gtcdxb-header-switcher {
	// display: inline-flex;
	vertical-align: middle; display: none!important;

}

.gtcdxb-header-switcher .gtml-switcher {
	background: transparent;
	border: 1px solid rgba(6, 182, 212, .3);
	padding: 2px;
}

.gtcdxb-header-switcher .gtml-lang {
	padding: 4px 10px;
	font-size: 12px;
}

/* In the dark top bar the default dark text disappears. */
.topbar .gtcdxb-header-switcher .gtml-switcher {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .22);
}

.topbar .gtcdxb-header-switcher .gtml-lang {
	color: rgba(255, 255, 255, .85);
}

.topbar .gtcdxb-header-switcher .gtml-lang:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.topbar .gtcdxb-header-switcher .gtml-lang.gtml-active {
	background: linear-gradient(135deg, #0E7490 0%, #6D28D9 100%);
	color: #fff;
}

@media (max-width: 640px) {
	.gtcdxb-header-switcher .gtml-lang {
		padding: 3px 7px;
		font-size: 11px;
	}
}

/* ============================================================
 * LOGO SIZING
 * A custom logo uploaded at full resolution will otherwise
 * stretch the navbar to whatever height the image is.
 * ============================================================ */

/*
 * Brand block: logo + title + tagline, left of the navbar on every device.
 * The logo height follows the navbar row (64px phone, 80px desktop) minus
 * breathing room; the Customizer can make it smaller via --gt-logo-h.
 */
.gtcdxb-brand {
	display: flex;
	align-items: center;
	gap: .3rem;
	min-width: 0;
	flex: 1 1 auto;
	margin-right: auto;
	color: #0F172A;
	text-decoration: none;
}

.gtml-rtl .gtcdxb-brand {
	margin-right: 0;
	margin-left: auto;
}

.gtcdxb-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.gtcdxb-logo img,
.gtcdxb-logo .custom-logo {
	display: block;
	height: min(var(--gt-logo-h-m, 46px), 48px);
	width: auto;
	max-width: 110px;
	object-fit: contain;
}

.gtcdxb-logo-fallback {
	width: 42px;
	height: 42px;
	justify-content: center;
	border-radius: .6rem;
	background: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%);
	color: #fff;
	font-size: 1.15rem;
}

.gtcdxb-brand-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	line-height: 1.15;
}

.gtcdxb-brand-name {
	font-weight: 800;
	font-size: .95rem;
	letter-spacing: -.01em;
	color: #0F172A;
	/* Up to two lines on narrow phones, then an ellipsis. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gtcdxb-brand-tagline {
	margin-top: 2px;
	font-size: .6875rem;
	font-weight: 500;
	color: #64748B;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (min-width: 768px) {
	.gtcdxb-brand { gap: .45rem; flex: 0 1 auto; }
	.gtcdxb-logo img,
	.gtcdxb-logo .custom-logo {
		height: min(var(--gt-logo-h, 60px), 64px);
		max-width: 200px;
	}
	.gtcdxb-logo-fallback { width: 52px; height: 52px; font-size: 1.4rem; }
	.gtcdxb-brand-name { font-size: 1.2rem; -webkit-line-clamp: 1; white-space: nowrap; }
	.gtcdxb-brand-tagline { font-size: .78rem; }
}

/* Between tablet and the full menu the links need the room. */
@media (min-width: 1024px) and (max-width: 1180px) {
	.gtcdxb-brand-tagline { display: none; }
}
/* Keep the navbar a predictable height regardless of the logo. */
.navbar .max-w-7xl > .flex {
	min-height: 64px;
}

@media (min-width: 768px) {
	.navbar .max-w-7xl > .flex {
		min-height: 80px;
	}
}

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

.gtcdxb-menu-toggle {
	width: 42px;
	height: 42px;
	border: 1px solid rgba(6, 182, 212, .28);
	border-radius: .6rem;
	background: rgba(6, 182, 212, .06);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.gtcdxb-menu-toggle span {
	display: block;
	width: 19px;
	height: 2px;
	border-radius: 2px;
	background: #0F172A;
	transition: transform .24s ease, opacity .18s ease;
}

.gtcdxb-menu-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.gtcdxb-menu-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.gtcdxb-menu-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.gtcdxb-menu-toggle:focus-visible {
	outline: 3px solid rgba(6, 182, 212, .5);
	outline-offset: 2px;
}

.gtcdxb-mobile-menu {
	border-top: 1px solid rgba(15, 23, 42, .08);
	background: #fff;
	max-height: calc(100vh - 160px);
	overflow-y: auto;
}

.gtcdxb-mobile-menu[hidden] {
	display: none;
}

.gtcdxb-mobile-menu-list {
	list-style: none;
	margin: 0;
	padding: .5rem 1rem 1rem;
}

.gtcdxb-mobile-menu-list li {
	border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.gtcdxb-mobile-menu-list li:last-child {
	border-bottom: 0;
}

.gtcdxb-mobile-menu-list a {
	display: block;
	padding: .85rem .25rem;
	font-size: 1rem;
	font-weight: 600;
	color: #0F172A;
	text-decoration: none;
}

.gtcdxb-mobile-menu-list a:hover,
.gtcdxb-mobile-menu-list a:focus {
	color: #0891B2;
	text-decoration: none;
}

/* ============================================================
 * CONTRAST LIFT
 *
 * The original palette leaned on gray-600 for body text over
 * tinted backgrounds, which lands around 4.1:1 — under the
 * WCAG AA threshold of 4.5:1 for normal text. Section
 * backgrounds were also washing out on bright screens.
 * ============================================================ */

:root {
	--text-body:  #334155;   /* was #4B5563 */
	--text-muted: #475569;
	--text-head:  #0B1220;   /* was #0F172A */
}

body {
	color: var(--text-body);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-head);
}

/* Body copy: darker, so it clears AA on tinted panels. */
.text-gray-600 { color: #475569 !important; }
.text-gray-500 { color: #64748B !important; }
.text-gray-700 { color: #334155 !important; }

/* Headings and strong labels. */
.text-gray-900 { color: #0B1220 !important; }
.text-gray-800 { color: #1E293B !important; }

/* Section titles carry the gradient; deepen it so it reads
   against white rather than glowing. */
.gradient-text {
	background: linear-gradient(135deg, #0891B2 0%, #7C3AED 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Glass panels were too transparent over pale backgrounds. */
.glass {
	background: rgba(255, 255, 255, .86);
	border: 1px solid rgba(15, 23, 42, .07);
	box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

/* Cards get a defined edge instead of fading into the page. */
.card-hover,
.service-card {
	background: #fff;
	border: 1px solid rgba(15, 23, 42, .08);
}

.card-hover:hover,
.service-card:hover {
	border-color: rgba(6, 182, 212, .35);
}

/* Primary button.
   White on cyan-600 measures 3.68:1, under the 4.5:1 AA threshold for
   normal-size text. cyan-700 reaches 5.36:1, so the gradient starts there.
   The violet end is 7.10:1, comfortably clear. */
.btn-primary {
	background: linear-gradient(135deg, #0E7490 0%, #6D28D9 100%);
	color: #fff;
}

.btn-primary:hover {
	background: linear-gradient(135deg, #155E75 0%, #5B21B6 100%);
}

/* Small pill buttons inside cards carry the same gradient. */
.service-card .btn-primary,
.card-hover .btn-primary {
	background: linear-gradient(135deg, #0E7490 0%, #6D28D9 100%);
}

/* Links inside body copy need to be visibly links. */
.prose a,
.entry-content a {
	color: #0E7490;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Footer: lift the muted grey, which was the worst offender
   at roughly 3.2:1 on the dark background. */
footer.bg-gray-900 { color: #CBD5E1; }
footer .text-gray-400 { color: #CBD5E1 !important; }
footer .text-gray-500 { color: #94A3B8 !important; }
footer .text-gray-300 { color: #E2E8F0 !important; }

/* Top bar links. */
.topbar { background: #0B1220; }
.topbar a { color: #E2E8F0; }
.topbar a:hover { color: #22D3EE; }

/* Form fields: a visible border rather than a hairline. */
input, select, textarea {
	border-color: #CBD5E1;
}

input::placeholder,
textarea::placeholder {
	color: #64748B;
	opacity: 1;
}

/* Honour a user's explicit request for more contrast. */
@media (prefers-contrast: more) {
	.text-gray-600 { color: #1E293B !important; }
	.glass { background: #fff; border-color: rgba(15, 23, 42, .2); }
	.card-hover, .service-card { border-color: rgba(15, 23, 42, .25); }
}

/* ============================================================
 * FOOTER CLINIC LOCATIONS
 * ============================================================ */

.gtcdxb-location-card {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: 1rem 1.1rem;
	border-radius: .75rem;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.gtcdxb-location-card:hover,
.gtcdxb-location-card:focus {
	background: rgba(6, 182, 212, .13);
	border-color: rgba(6, 182, 212, .45);
	transform: translateY(-2px);
	text-decoration: none;
}

.gtcdxb-location-pin {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 9999px;
	background: linear-gradient(135deg, #0E7490 0%, #6D28D9 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

.gtcdxb-location-body {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.gtcdxb-location-body strong {
	color: #fff;
	font-size: .95rem;
	line-height: 1.35;
}

.gtcdxb-location-city {
	color: #CBD5E1;
	font-size: .8125rem;
}

.gtcdxb-location-cta {
	color: #22D3EE;
	font-size: .8125rem;
	font-weight: 600;
	margin-top: .25rem;
}

.gtcdxb-location-cta i {
	font-size: .7rem;
	margin-left: .25rem;
}

.gtml-rtl .gtcdxb-location-cta i {
	margin-left: 0;
	margin-right: .25rem;
}

@media (prefers-reduced-motion: reduce) {
	.gtcdxb-location-card { transition: none; }
	.gtcdxb-location-card:hover { transform: none; }
}

/* ============================================================
 * BEFORE / AFTER COMPARISON
 * ============================================================ */

.before-after-slider {
	background: #E2E8F0;
	user-select: none;
	touch-action: pan-y;
}

.before-after-slider img {
	display: block;
	object-fit: cover;
	pointer-events: none;
}

.before-after-slider .slider-handle {
	width: 3px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
	transform: translateX(-50%);
	z-index: 3;
}

/* Grip dot on the handle, so it reads as draggable. */
.before-after-slider .slider-handle::after {
	content: "\\f337";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	border-radius: 9999px;
	background: #fff;
	color: #0891B2;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 10px rgba(15, 23, 42, .28);
}

.ba-label {
	position: absolute;
	bottom: 12px;
	padding: 3px 10px;
	border-radius: 9999px;
	background: rgba(11, 18, 32, .78);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	z-index: 2;
}

.ba-label-before { left: 12px; }
.ba-label-after  { right: 12px; }

.ba-caption {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	padding: 5px 10px;
	border-radius: .4rem;
	background: rgba(11, 18, 32, .72);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	z-index: 2;
}

/* ============================================================
 * SKIP LINK
 * Visible only on keyboard focus. First tab stop on every page.
 * ============================================================ */

.skip-link {
	position: absolute;
	left: 0;
	top: 0;
	/* Hidden by clipping, not by moving it off-screen: a -9999px offset
	   stretches the page sideways in right-to-left (Arabic) layout. */
	transform: translateY(-120%);
	z-index: 100000;
	padding: 12px 20px;
	background: #0B1220;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 8px 0;
}

.skip-link:focus {
	transform: none;
	outline: 3px solid #22D3EE;
	outline-offset: -3px;
	color: #fff;
}

/* ============================================================
 * BREADCRUMBS
 * ============================================================ */

.gtcdxb-breadcrumbs {
	padding: 14px 0;
	font-size: .8125rem;
	border-bottom: 1px solid rgba(15, 23, 42, .07);
	background: #fff;
}

.gtcdxb-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gtcdxb-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.gtcdxb-breadcrumbs a {
	color: #0E7490;
	text-decoration: none;
}

.gtcdxb-breadcrumbs a:hover,
.gtcdxb-breadcrumbs a:focus {
	text-decoration: underline;
}

.gtcdxb-breadcrumbs [aria-current="page"] {
	color: #475569;
}

.breadcrumb-sep {
	color: #CBD5E1;
}

/* ============================================================
 * STICKY MOBILE CONVERSION BAR
 *
 * Phones are where most clinic traffic lands, and a patient with
 * toothache wants to call, not scroll. Shown below 768px only.
 * ============================================================ */

.mobile-cta-bar {
	display: none;
}

@media (max-width: 767px) {

	.mobile-cta-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		background: #fff;
		border-top: 1px solid rgba(15, 23, 42, .1);
		box-shadow: 0 -2px 14px rgba(15, 23, 42, .1);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.mobile-cta {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 9px 4px;
		border: 0;
		background: none;
		color: #334155;
		font-size: .6875rem;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		cursor: pointer;
		/* 48px minimum target, WCAG 2.2 AA */
		min-height: 52px;
	}

	.mobile-cta i {
		font-size: 17px;
		line-height: 1;
	}

	.mobile-cta:hover,
	.mobile-cta:focus {
		text-decoration: none;
		background: rgba(14, 116, 144, .07);
	}

	.mobile-cta:focus-visible {
		outline: 3px solid rgba(14, 116, 144, .5);
		outline-offset: -3px;
	}

	.mobile-cta-call     { color: #6D28D9; }
	.mobile-cta-whatsapp { color: #128C4A; }
	.mobile-cta-map      { color: #0E7490; }

	.mobile-cta-book {
		background: linear-gradient(135deg, #0E7490 0%, #6D28D9 100%);
		color: #fff;
	}

	.mobile-cta-book:hover,
	.mobile-cta-book:focus {
		background: linear-gradient(135deg, #155E75 0%, #5B21B6 100%);
		color: #fff;
	}

	/* The bar occupies the bottom strip, so the other floating
	   controls move up clear of it and the page gains bottom padding. */
	body { padding-bottom: 58px; }

	.floating-whatsapp,
	.floating-phone,
	.floating-book { bottom: calc(var(--fl-gap) + 58px + var(--fl-safe)); }

	.back-to-top { bottom: calc(var(--fl-gap) + var(--fl-stack) + 58px + var(--fl-safe)); }
}

@media print {
	.mobile-cta-bar { display: none; }
}

/* ============================================================
 * GOOGLE REVIEWS PANEL
 * ============================================================ */

.gt-reviews {
	background: #fff;
	border: 1px solid rgba(15, 23, 42, .09);
	border-radius: 14px;
	padding: 28px;
	text-align: center;
	max-width: 620px;
	margin: 0 auto;
}

.gt-reviews-mark {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: #0B1220;
	font-size: 1.0625rem;
	margin-bottom: 8px;
}

.gt-reviews-mark .g-blue   { color: #4285F4; }
.gt-reviews-mark .g-red    { color: #EA4335; }
.gt-reviews-mark .g-yellow { color: #FBBC05; }
.gt-reviews-mark .g-green  { color: #34A853; }

.gt-reviews p {
	color: #475569;
	font-size: .9375rem;
	margin: 0 0 18px;
}

.gt-reviews-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}


/* ============================================================
 * TRANSFORMATION CAROUSEL — small before/after cards
 * ============================================================ */

.ba-swiper { padding-bottom: 36px; }

.ba-card {
	background: #fff;
	border-radius: .75rem;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
	height: 100%;
}

.ba-card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #f1f5f9;
}

.ba-card-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}

.ba-card-half {
	position: relative;
	overflow: hidden;
}

.ba-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A composite already carries its own labels: show it whole. */
.ba-card-single img { object-fit: contain; background: #fff; }

.ba-card .ba-label {
	bottom: 8px;
	padding: 2px 7px;
	font-size: 10px;
}

.ba-card .ba-label-before { left: 8px; }
.ba-card .ba-label-after  { right: auto; left: 8px; }

.ba-card-caption {
	padding: .6rem .8rem;
	font-size: .8125rem;
	font-weight: 600;
	color: #0F172A;
	text-align: center;
}

.ba-pagination.swiper-pagination { bottom: 0; }

/* ============================================================
 * GOOGLE REVIEW CARDS (testimonials slider)
 * ============================================================ */

.gt-review-card {
	display: flex;
	flex-direction: column;
}

.gt-review-card .gt-review-text {
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gt-review-source {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	color: #64748B;
}

.gt-review-source .fa-google { color: #4285F4; }


/* ============================================================
 * PAYMENTS AND INSURANCE — logo ticker
 * Two identical tracks slide left together; when the first has
 * moved its full width the loop restarts invisibly.
 * ============================================================ */

.gt-partners {
	padding: 2.25rem 0 2.5rem;
	background: #fff;
	border-top: 1px solid rgba(15, 23, 42, .06);
	border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.gt-partners-title {
	margin: 0;
	text-align: center;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #0F172A;
}

.gt-partners-sub {
	margin: .35rem 0 1.4rem;
	text-align: center;
	font-size: .875rem;
	color: #64748B;
}

.gt-marquee {
	display: flex;
	overflow: hidden;
	/* Fade the logos in and out at the edges. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.gt-marquee-track {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 1rem;
	margin: 0;
	padding: 0 .5rem;
	list-style: none;
	animation: gt-marquee var(--gt-marquee-time, 30s) linear infinite;
}

.gt-marquee:hover .gt-marquee-track,
.gt-marquee:focus-within .gt-marquee-track {
	animation-play-state: paused;
}

@keyframes gt-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/*
 * Arabic: keep the track laid out left-to-right (in RTL the tracks start at
 * the right edge and the slide would push both off-screen), and run the
 * motion the other way so it still flows with the reading direction.
 */
.gtml-rtl .gt-marquee { direction: ltr; }
.gtml-rtl .gt-marquee-track { animation-direction: reverse; }

.gt-partner {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 72px;
	padding: .6rem 1rem;
	background: #fff;
	border: 1px solid #E2E8F0;
	border-radius: .75rem;
}

.gt-partner img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.gt-partner-name {
	font-size: .8125rem;
	font-weight: 700;
	color: #334155;
	text-align: center;
}

@media (max-width: 640px) {
	.gt-partners { padding: 1.75rem 0 2rem; }
	.gt-partner { width: 120px; height: 60px; padding: .5rem .75rem; }
}

/* No motion wanted: a still, centred, wrapping row instead. */
@media (prefers-reduced-motion: reduce) {
	.gt-marquee { justify-content: center; -webkit-mask-image: none; mask-image: none; }
	.gt-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; flex-shrink: 1; }
	.gt-marquee-track[aria-hidden="true"] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gt-partner-dup { display: none; } }


/* ============================================================
 * FORM GUARD: honeypot, consent, note
 * ============================================================ */

.gt-hp {
	/* Clipped in place (not moved off-screen) so it cannot widen RTL pages. */
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gt-consent {
	display: flex;
	gap: .55rem;
	align-items: flex-start;
	margin: .25rem 0 .5rem;
	font-size: .78rem;
	line-height: 1.45;
	color: #475569;
	cursor: pointer;
}

.gt-consent input {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	accent-color: #0E7490;
}

.gt-consent a { color: #0E7490; text-decoration: underline; }

.gt-form-note {
	margin: 0 0 .9rem;
	font-size: .72rem;
	color: #94A3B8;
}

/* Inline UAE dirham symbol (no icon font has it yet). */
.gt-aed-icon {
	display: block;
	width: 1em;
	height: 1em;
	margin: 0 auto .75rem;
	font-size: 1.875rem;
	color: #2563EB;
}

.gt-disclaimer { margin: .75rem auto 1.5rem; max-width: 42rem; text-align: center; font-size: .75rem; color: #64748B; }

/* Card titles that open the doctor / service page. */
.gt-card-link { color: inherit; text-decoration: none; }
.gt-card-link:hover { color: #0E7490; }
.gt-card-link-arrow { font-size: .75em; margin-inline-start: .25rem; opacity: .6; transition: transform .15s ease; }
.gt-card-link:hover .gt-card-link-arrow { transform: translateX(3px); opacity: 1; }
.gtml-rtl .gt-card-link-arrow { transform: scaleX(-1); }

/* Desktop header between 1024 and 1280px: menu, switcher and brand share the row. */
@media (min-width: 768px) {
	.gtcdxb-brand-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.navbar .btn-primary { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.gtcdxb-brand { max-width: 250px; }
	.gtcdxb-brand-name { font-size: 1rem; }
	.navbar .lg\:flex.space-x-6 > * + *,
	.navbar ul.space-x-6 > * + * { margin-left: 1rem !important; }
	.gtml-rtl .navbar ul.space-x-6 > * + * { margin-left: 0 !important; margin-right: 1rem !important; }
}

/* ============================================================
 * 2.2 — DHA/MOHAP FZ81708 corrections
 * ============================================================ */

/* About: the stat cards are gone, so the clinic carousel takes the full
   column and roughly matches the height of the text beside it. */
.gt-about-carousel { height: 300px; }
@media (min-width: 768px)  { .gt-about-carousel { height: 380px; } }
@media (min-width: 1024px) { .gt-about-carousel { height: 460px; } }

/* English-only mode: belt and braces if a widget or shortcode prints a switcher. */
.gt-english-only .gtml-switcher,
.gt-english-only .gtml-switcher-select,
.gt-english-only .gtcdxb-header-switcher { display: none !important; }