@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

html, body {
    font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

        :root {
            /* La Cucina brand — terracotta & sage */
            --terracotta: #c0563f;
            --terracotta-dark: #9e3f2c;
            --terracotta-muted: #d4896f;
            /* Stepper active (tan / gold from UI ref) */
            --stepper-active: #c0914c;
            --stepper-active-dark: #a67a3d;
            --sage: #93a681;
            --sage-dark: #6d7b62;
            --sage-soft: #c5d0bb;
            --cream: #faf6ef;
            --cream-warm: #fffefb;
            /* Legacy aliases (buttons & accents) */
            --gold: var(--terracotta);
            --gold-dark: var(--terracotta-dark);
            --gold-soft: var(--terracotta-muted);
            --panel: #f4f1eb;
            --panel-2: #eef1ea;
            --surface: #ffffff;
            --border-input: #d8cfc4;
            --border-card: rgba(143, 159, 130, 0.35);
            --text: #1f1c18;
            --text-muted: #5c554c;
            --summary-fs: 14px;
            --radius-lg: 18px;
            --radius-xl: 22px;
            --shadow-card: 0 4px 28px rgba(58, 48, 36, 0.08), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
            --font-ui: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
            font-size: 18px;
            color: var(--text);
            background: #0f0e0c;
        }
        .hero {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            /* New background (no photo) */
            background:
                radial-gradient(1100px 560px at 60% 0%, rgba(147, 166, 129, 0.26) 0%, transparent 62%),
                radial-gradient(900px 520px at 15% 10%, rgba(192, 86, 63, 0.18) 0%, transparent 58%),
                linear-gradient(180deg, #faf6ef 0%, #efe6d8 55%, #e7ddcf 100%);
            padding: 24px 16px 46px;
        }
        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(420px 220px at 82% 18%, rgba(255, 255, 255, 0.60) 0%, transparent 70%),
                radial-gradient(520px 260px at 20% 12%, rgba(255, 255, 255, 0.46) 0%, transparent 72%);
            pointer-events: none;
        }
        /* Photo slider background layers */
        .hero-bg-layer { display: block; }
        .hero-bg-layer.active { opacity: 0.22; }
        .hero-overlay { display: block; background: rgba(255, 255, 255, 0.22); }
        .hero-bg-layer {
            position: absolute;
            inset: 0;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            opacity: 0;
            transition: opacity 1.1s ease;
            transform: scale(1.02);
        }
        /* صورة الخلفية أوضح مع طبقة لون واحدة موحّدة فوقها */
        .hero-bg-layer.active { opacity: 0.62; }
        .hero-overlay {
            position: absolute;
            inset: 0;
            background: rgba(10, 9, 8, 0.56);
            pointer-events: none;
        }
        .hero-top-bar {
            position: relative;
            z-index: 3;
            max-width: 1080px;
            margin: 0 auto;
            padding: 14px 20px 0;
            min-height: 100px;
        }
        /* اللوجو في الزاوية اليمنى العليا (يمين الشاشة) — مبدّل اللغة أعلى اليسار */
        .hero-top-bar .lang-switch {
            position: absolute;
            top: 22px;
            left: max(16px, env(safe-area-inset-left));
            margin: 0;
            z-index: 4;
        }
        .site-logo {
            position: absolute;
            top: 12px;
            right: max(14px, env(safe-area-inset-right));
            z-index: 4;
            flex-shrink: 0;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px 18px 12px;
            min-width: min(200px, 46vw);
            max-width: 240px;
            border-radius: 14px;
            background: var(--terracotta);
            background-image: radial-gradient(ellipse 120% 90% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 55%);
            box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
            text-decoration: none;
            color: inherit;
            direction: ltr;
            transition: transform 0.15s ease, box-shadow 0.2s ease;
        }
        .site-logo:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
        }
        .site-logo:focus-visible {
            outline: 3px solid rgba(255, 255, 255, 0.85);
            outline-offset: 3px;
        }
        .site-logo__title {
            margin: 0;
            font-family: "Merriweather", Georgia, serif;
            font-size: clamp(20px, 4.2vw, 26px);
            font-weight: 700;
            letter-spacing: 0.02em;
            line-height: 1.15;
            color: #fff;
        }
        .site-logo__tag {
            margin: 6px 0 0;
            font-family: var(--font-ui);
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.94);
        }
        /* صورة الشعار الكاملة (LC + إكليل + اسم المطعم) — خلفية كريمية خفيفة */
        .site-logo.site-logo--image {
            padding: 10px 14px;
            min-width: auto;
            max-width: min(220px, 46vw);
            background: rgba(249, 243, 235, 0.96);
            border: 1px solid rgba(178, 74, 44, 0.18);
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
        }
        .site-logo.site-logo--image:hover {
            box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26);
        }
        .site-logo.site-logo--image:focus-visible {
            outline-color: var(--terracotta);
        }
        .site-logo__img {
            display: block;
            width: auto;
            max-width: 100%;
            max-height: 96px;
            height: auto;
            object-fit: contain;
        }
        .lang-switch {
            width: fit-content;
            display: flex;
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 999px;
            overflow: hidden;
            flex-shrink: 0;
        }
        .lang-switch button { border: 0; color: var(--cream); background: transparent; padding: 7px 14px; font-size: 12px; font-family: var(--font-ui); font-weight: 600; }
        .lang-switch button.active { background: rgba(255, 255, 255, 0.22); }
        .hero-content { max-width: 1080px; margin: 28px auto 0; text-align: center; position: relative; z-index: 2; }
        .subtitle { color: #e8d1a6; letter-spacing: 4px; margin-bottom: 10px; font-size: 14px; }
        h1 {
            margin: 0;
            font-size: clamp(34px, 6vw, 60px);
            font-weight: 700;
            color: #5b4a36;
            text-shadow: none;
        }
        .tagline { margin: 12px 0 26px; color: rgba(250, 246, 239, 0.92); font-size: clamp(15px, 2.2vw, 22px); font-family: "Merriweather", Georgia, serif; }
        .booking-flow-stack {
            width: 100%;
            max-width: 100%;
            margin-inline: auto;
        }
        .stepper {
            margin: 0 0 18px;
            padding-top: 14px;
            display: flex;
            width: 100%;
            gap: 12px;
            flex-wrap: nowrap;
            align-items: stretch;
            justify-content: stretch;
        }
        .step-pill {
            position: relative;
            flex: 1 1 0;
            min-width: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: rgba(250, 246, 239, 0.86);
            color: #3a332b;
            border: 1px solid rgba(156, 141, 121, 0.35);
            border-radius: 999px;
            padding: 16px 14px;
            font-size: clamp(18px, 2.1vw, 24px);
            font-weight: 700;
            box-shadow: 0 10px 26px rgba(48, 38, 26, 0.10);
            backdrop-filter: blur(6px);
            transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }
        .step-pill.active {
            background: linear-gradient(135deg, var(--sage-dark) 0%, var(--sage) 100%);
            border-color: rgba(109, 123, 98, 0.45);
            box-shadow: 0 12px 32px rgba(109, 123, 98, 0.30);
            color: #fffefb;
        }
        .step-pill .step-ico {
            width: 20px;
            height: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
        }
        .step-pill .step-ico svg { width: 20px; height: 20px; }

        .step-progress {
            width: min(980px, 100%);
            margin: 8px auto 10px;
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
        }

        .step-progress__seg {
            height: 7px;
            flex: 1;
            border-radius: 999px;
            background: rgba(156, 141, 121, 0.22);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(156, 141, 121, 0.18);
            transition: filter .2s ease, opacity .2s ease;
            opacity: .55;
        }
        .step-progress__seg--1 { background: linear-gradient(90deg, rgba(192, 86, 63, 0.92), rgba(192, 86, 63, 0.65)); }
        .step-progress__seg--2 { background: linear-gradient(90deg, rgba(192, 145, 76, 0.92), rgba(192, 145, 76, 0.65)); }
        .step-progress__seg--3 { background: linear-gradient(90deg, rgba(109, 123, 98, 0.92), rgba(109, 123, 98, 0.65)); }

        /* default: only first highlighted */
        .hero[data-step="1"] .step-progress__seg--1 { opacity: 1; filter: saturate(1.15); }
        .hero[data-step="2"] .step-progress__seg--1,
        .hero[data-step="2"] .step-progress__seg--2 { opacity: 1; filter: saturate(1.15); }
        .hero[data-step="3"] .step-progress__seg--1,
        .hero[data-step="3"] .step-progress__seg--2,
        .hero[data-step="3"] .step-progress__seg--3 { opacity: 1; filter: saturate(1.15); }
        .booking-form {
            background: rgba(250, 246, 239, 0.90);
            color: var(--text);
            border-radius: var(--radius-xl);
            padding: 38px;
            min-height: 300px;
            text-align: right;
            border: 1px solid rgba(156, 141, 121, 0.28);
            box-shadow: 0 18px 46px rgba(48, 38, 26, 0.14);
            position: relative;
            backdrop-filter: blur(6px);
            font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
        }
        .booking-form::before {
            content: "";
            position: absolute;
            top: 0;
            left: 16px;
            right: 16px;
            height: 5px;
            border-radius: 0 0 8px 8px;
            background: linear-gradient(90deg, var(--terracotta) 0%, var(--terracotta) 50%, var(--sage) 50%, var(--sage) 100%);
            opacity: 1;
        }
        .hidden { display: none; }
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .grid { display: grid; gap: 18px; }
        .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .field label {
            display: block;
            color: #4a4238;
            margin-bottom: 15px;
            font-size: 20px;
            font-weight: 800;
            line-height: 1.45;
        }
        .label-icon { font-size: 18px; line-height: 1; opacity: .9; }
        .field input, .field select, .field textarea {
            width: 100%;
            border: 3px solid #9a8468;
            border-radius: 12px;
            padding: 16px 15px;
            background: #fff;
            font-size: 20px;
            color: #1f1b17;
            min-height: 58px;
            box-shadow:
                0 2px 10px rgba(47, 39, 28, 0.09),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
        }
        .field input::placeholder,
        .field textarea::placeholder {
            color: #5c5348;
            font-size: 18px;
            opacity: 1;
        }
        .field input:focus, .field select:focus, .field textarea:focus {
            outline: none;
            border-color: #a6743a;
            box-shadow:
                0 0 0 4px rgba(187, 147, 87, 0.22),
                0 3px 12px rgba(47, 39, 28, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
        }
        .booking-date-input,
        .booking-time-input {
            border-width: 2px !important;
            border-color: #a18c71 !important;
            border-radius: 14px !important;
            background-color: #fffefb !important;
            padding-inline-end: 46px !important;
            font-weight: 600;
            letter-spacing: 0.02em;
            transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
        }
        .booking-date-input:focus,
        .booking-time-input:focus {
            border-color: #8f7250 !important;
            box-shadow:
                0 0 0 5px rgba(187, 147, 87, 0.2),
                0 6px 16px rgba(70, 56, 40, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
            background-color: #fff;
        }
        .booking-date-input::-webkit-calendar-picker-indicator,
        .booking-time-input::-webkit-calendar-picker-indicator {
            opacity: .85;
            cursor: pointer;
            filter: contrast(1.05) saturate(1.1);
        }
        .field select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding-inline-end: 52px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2340382D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: left 14px center;
            background-size: 18px 18px;
        }
        /* #occasion removed from the UI (kept in step 3 as "Special Occasions"). */
        .counter-control {
            width: 100%;
            border: 3px solid #9a8468;
            border-radius: 12px;
            background: #fff;
            min-height: 58px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            box-shadow:
                0 2px 10px rgba(47, 39, 28, 0.09),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
        }
        .counter-btn {
            width: 40px;
            height: 40px;
            border: 2px solid #b8996a;
            border-radius: 10px;
            background: #fff7ec;
            color: #5c4020;
            font-size: 26px;
            line-height: 1;
            cursor: pointer;
        }
        .counter-value {
            font-size: 21px;
            font-weight: 800;
            color: #2e2820;
            min-width: 32px;
            text-align: center;
        }
        .counter-caption {
            font-size: 20px;
            font-weight: 700;
            color: #4a4238;
            margin-inline-start: 9px;
        }
        .field textarea { min-height: 88px; resize: vertical; }
        .field-sublabel {
            display: block;
            color: #7a6f62;
            margin: 14px 0 10px;
            font-size: 13px;
            font-weight: 600;
        }
        .dietary-card--modern {
            background: linear-gradient(145deg, var(--surface) 0%, #fbf8f3 100%);
            border: 1px solid var(--border-card);
            border-radius: var(--radius-lg);
            padding: 20px 22px;
            margin-bottom: 18px;
            box-shadow: var(--shadow-card);
            position: relative;
            overflow: hidden;
        }
        .dietary-card--modern::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            top: 12px;
            bottom: 12px;
            width: 4px;
            border-radius: 0 4px 4px 0;
            background: linear-gradient(180deg, var(--terracotta) 0%, var(--sage) 100%);
            opacity: 0.95;
        }
        .dietary-modern-layout {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 14px 18px;
            align-items: start;
            position: relative;
        }
        .dietary-modern-icon-wrap {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, #eef3fb 0%, #f6ecda 100%);
            border: 1px solid #e2d8c8;
            box-shadow: 0 4px 12px rgba(44, 88, 148, 0.12);
            flex-shrink: 0;
        }
        .dietary-modern-icon-wrap svg {
            width: 26px;
            height: 26px;
            color: #315a96;
        }
        .dietary-modern-main { min-width: 0; }
        .dietary-modern-title {
            margin: 0;
            font-family: "Merriweather", Georgia, "Times New Roman", serif;
            font-size: 17px;
            font-weight: 800;
            color: #231e18;
            letter-spacing: 0.02em;
            line-height: 1.3;
        }
        .dietary-modern-sub {
            margin: 6px 0 0;
            font-size: 13px;
            color: #7a7167;
            line-height: 1.45;
            font-weight: 600;
        }
        .diet-summary-inline {
            display: none;
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.75);
            border: 1px solid #eadfce;
            font-size: 13px;
            color: #524a41;
            font-weight: 600;
            line-height: 1.5;
        }
        .diet-summary-inline.has-detail { display: block; }
        .dietary-modern-cta {
            align-self: center;
        }
        .dietary-modern-cta .btn-diet-add {
            margin-inline-start: 0;
            white-space: nowrap;
        }
        .notes-card {
            background: linear-gradient(145deg, var(--surface) 0%, #fbf8f3 100%);
            border: 1px solid var(--border-card);
            border-radius: var(--radius-lg);
            padding: 20px 22px;
            margin-bottom: 22px;
            box-shadow: var(--shadow-card);
            position: relative;
            overflow: hidden;
        }
        .notes-card::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            top: 12px;
            bottom: 12px;
            width: 4px;
            border-radius: 0 4px 4px 0;
            background: linear-gradient(180deg, var(--sage) 0%, var(--terracotta) 100%);
            opacity: 0.92;
        }
        .notes-card-inner {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 14px 18px;
            align-items: start;
            position: relative;
        }
        .notes-card-icon-wrap {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, #f3f7fd 0%, #faf4ea 100%);
            border: 1px solid #e2d8c8;
            flex-shrink: 0;
        }
        .notes-card-icon-wrap svg {
            width: 26px;
            height: 26px;
            color: #b88943;
        }
        .notes-card-title {
            margin: 0;
            font-family: "Merriweather", Georgia, "Times New Roman", serif;
            font-size: 17px;
            font-weight: 800;
            color: #231e18;
            line-height: 1.3;
        }
        .notes-card-sub {
            margin: 6px 0 0;
            font-size: 13px;
            color: #7a7167;
            font-weight: 600;
            line-height: 1.45;
        }
        .notes-preview {
            margin: 14px 0 0;
            padding: 14px 16px;
            border-radius: 14px;
            background: var(--surface);
            border: 1.5px solid var(--border-input);
            font-size: 14px;
            color: #6a6258;
            line-height: 1.5;
            min-height: 52px;
        }
        .notes-preview.has-text {
            border-color: var(--gold-soft);
            color: #3d362c;
            font-weight: 600;
        }
        .btn-diet-add {
            flex-shrink: 0;
            margin-inline-start: auto;
            border: 2px solid #2a2622;
            background: var(--surface);
            border-radius: 12px;
            padding: 10px 18px;
            font-size: 13px;
            font-weight: 800;
            color: #1c1814;
            cursor: pointer;
            transition: border-color .15s, background .15s, transform .08s;
        }
        .btn-diet-add:hover { border-color: var(--gold); background: #fffdfb; }
        .btn-diet-add:active { transform: translateY(1px); }
        .btn-diet-add:focus-visible { outline: 2px solid #c79a50; outline-offset: 2px; }
        .notes-modal-body {
            padding: 22px 20px 24px;
            background: #fff;
        }
        .notes-modal-body label {
            display: block;
            font-size: 14px;
            font-weight: 800;
            color: #3a3229;
            margin-bottom: 10px;
        }
        .notes-modal-body textarea {
            width: 100%;
            min-height: 160px;
            border: 2px solid #cdbda3;
            border-radius: 12px;
            padding: 14px;
            font-size: 15px;
            font-family: inherit;
            color: #222;
            resize: vertical;
            background: #fff;
        }
        .notes-modal-body textarea:focus {
            outline: none;
            border-color: #bb9357;
            box-shadow: 0 0 0 3px rgba(199, 154, 80, 0.18);
        }
        /* Notes popup: remove top strip and tidy layout */
        .notes-modal .diet-modal-header {
            display: none;
        }
        .notes-modal .notes-modal-sheet {
            border-radius: 18px;
            overflow: hidden;
        }
        .notes-modal .diet-modal-footer {
            background: #fff;
            border-top: 1px solid #ebe3d8;
        }
        @media (max-width: 560px) {
            .dietary-modern-layout,
            .notes-card-inner {
                grid-template-columns: 1fr;
            }
            .dietary-modern-cta,
            .notes-card-inner > .btn-diet-add {
                justify-self: stretch;
                width: 100%;
            }
            .dietary-modern-cta .btn-diet-add,
            .notes-card-inner > .btn-diet-add {
                width: 100%;
                margin-inline-start: 0;
            }
        }
        .diet-modal {
            position: fixed;
            inset: 0;
            z-index: 200;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .25s ease, visibility .25s ease;
        }
        .diet-modal:not(.hidden) {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .diet-modal.hidden {
            display: none !important;
            opacity: 0;
            visibility: hidden;
        }
        .diet-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }
        .diet-modal-sheet {
            position: relative;
            width: min(620px, 100%);
            max-height: min(88vh, 720px);
            background: #f5ebe0;
            border-radius: 18px 18px 0 0;
            box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.25);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transform: translateY(100%);
            transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .diet-modal:not(.hidden) .diet-modal-sheet { transform: translateY(0); }
        @media (min-width: 641px) {
            .diet-modal { align-items: center; }
            .diet-modal-sheet {
                border-radius: 18px;
                transform: translateY(12px);
                opacity: 0;
            }
            .diet-modal:not(.hidden) .diet-modal-sheet { transform: translateY(0); opacity: 1; transition: opacity .25s ease, transform .28s cubic-bezier(0.4, 0, 0.2, 1); }
        }
        .diet-modal-header {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            background: linear-gradient(180deg, #9cad93 0%, #7f8f74 55%, #6b7c61 100%);
            color: #fff;
            font-weight: 800;
            font-size: 14px;
            letter-spacing: 0.06em;
            direction: ltr;
        }
        .diet-modal-header button {
            border: none;
            background: transparent;
            color: #fff;
            font: inherit;
            cursor: pointer;
            padding: 6px 4px;
        }
        .diet-modal-header button:hover { opacity: 0.9; text-decoration: underline; text-underline-offset: 3px; }
        .diet-modal-tabs {
            display: flex;
            align-items: stretch;
            background: #f2e9de;
            border-bottom: 1px solid #d8cbbc;
            flex-shrink: 0;
        }
        .diet-modal-tab {
            flex: 1;
            border: none;
            background: transparent;
            padding: 14px 12px;
            font-size: 14px;
            font-weight: 800;
            color: #5c5247;
            cursor: pointer;
            position: relative;
        }
        .diet-modal-tab + .diet-modal-tab { border-inline-start: 1px solid #d8cbbc; }
        .diet-modal-tab.active {
            color: #1b1410;
        }
        .diet-modal-tab.active::after {
            content: "";
            position: absolute;
            inset-inline: 12px;
            bottom: 0;
            height: 3px;
            background: #1b1410;
            border-radius: 2px 2px 0 0;
        }
        .diet-modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            padding-bottom: 26px;
        }
        .diet-pane.hidden { display: none; }
        .allergy-chip-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 12px;
            margin-bottom: 4px;
        }
        .allergy-chip {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 11px 16px;
            border: 0;
            border-radius: 999px;
            background: linear-gradient(180deg, #98aa8d 0%, #7f8f74 50%, #6b7c61 100%);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.02em;
            cursor: pointer;
            box-shadow: 3px 4px 0 rgba(79, 92, 70, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
            transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
            max-width: 100%;
        }
        .allergy-chip:hover { filter: brightness(1.05); }
        .allergy-chip:active { transform: translateY(1px); box-shadow: 2px 2px 0 rgba(79, 92, 70, 0.35); }
        .allergy-chip:focus-visible { outline: 2px solid #c79a50; outline-offset: 2px; }
        .allergy-chip[aria-pressed="true"] {
            background: linear-gradient(180deg, var(--sage-dark) 0%, #4a5540 55%, #3d4636 100%);
            box-shadow: 2px 3px 0 rgba(62, 44, 24, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }
        .allergy-chip-label { text-align: start; line-height: 1.25; }
        .allergy-chip-dot {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.92);
            background: transparent;
            flex-shrink: 0;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
        }
        .allergy-chip[aria-pressed="true"] .allergy-chip-dot {
            background: #fff;
            box-shadow: inset 0 0 0 4px #5c4225;
            border-color: #fffaf2;
        }
        /* مناسبات خاصة — شرائح تان / أبيض */
        .occasions-chip-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 12px;
            margin-bottom: 4px;
        }
        .occasions-chip {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 11px 16px;
            border: 2px solid #6f815f;
            border-radius: 999px;
            background: linear-gradient(180deg, #a8b79c 0%, #8fa181 50%, #748666 100%);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            font-family: "Merriweather", Georgia, "Times New Roman", serif;
            letter-spacing: 0.02em;
            cursor: pointer;
            box-shadow: 2px 3px 0 rgba(79, 92, 70, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.2);
            max-width: 100%;
            transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
        }
        .occasions-chip:hover { filter: brightness(1.04); }
        .occasions-chip:active { transform: translateY(1px); }
        .occasions-chip:focus-visible { outline: 2px solid #8fa181; outline-offset: 2px; }
        .occasions-chip[aria-pressed="true"] {
            background: linear-gradient(180deg, #7f8f74 0%, #66785c 100%);
            border-color: #596a4f;
            box-shadow: 2px 2px 0 rgba(65, 78, 57, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
        .occasions-chip-label { text-align: start; line-height: 1.25; }
        .occasions-chip-dot {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.92);
            background: transparent;
            flex-shrink: 0;
        }
        .occasions-chip[aria-pressed="true"] .occasions-chip-dot {
            background: #fff;
            box-shadow: inset 0 0 0 4px #66785c;
            border-color: #fffaf2;
        }
        .occasions-modal .occasions-modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 18px 16px 12px;
            background: #fff;
        }
        .occasions-modal-footer {
            flex-shrink: 0;
            padding: 16px 20px 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            background: #fff;
            border-top: 1px solid #ebe3d8;
        }
        .btn-occasions-cancel {
            min-width: 180px;
            padding: 14px 30px;
            border: none;
            border-radius: 999px;
            background: linear-gradient(180deg, #9cad93 0%, #7f8f74 55%, #6b7c61 100%);
            color: #fff;
            font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(86, 98, 79, 0.28);
        }
        .btn-occasions-save {
            min-width: 220px;
            padding: 14px 40px;
            border: none;
            border-radius: 999px;
            background: linear-gradient(180deg, #9cad93 0%, #7f8f74 55%, #6b7c61 100%);
            color: #fff;
            font-family: "Merriweather", Georgia, "Times New Roman", serif;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(86, 98, 79, 0.35);
        }
        .btn-occasions-cancel:hover,
        .btn-occasions-save:hover { filter: brightness(1.05); }
        .btn-occasions-cancel:active,
        .btn-occasions-save:active { transform: translateY(1px); }

        .diet-modal-footer {
            flex-shrink: 0;
            padding: 16px 20px 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fff;
            border-top: 1px solid #ebe3d8;
        }

        .diet-modal-footer-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            width: 100%;
        }

        .btn-diet-footer {
            min-width: 180px;
            padding: 14px 32px;
            border: none;
            border-radius: 999px;
            font-family: "Merriweather", Georgia, "Times New Roman", serif;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(160, 122, 68, 0.25);
        }

        .btn-diet-footer--primary {
            background: linear-gradient(180deg, #9cad93 0%, #7f8f74 55%, #6b7c61 100%);
            color: #fff;
        }

        .btn-diet-footer--secondary {
            background: linear-gradient(180deg, #a3b295 0%, #93a681 55%, #6d7b62 100%);
            color: #fff;
            box-shadow: 0 6px 20px rgba(109, 123, 98, 0.22);
        }

        .btn-diet-footer:hover { filter: brightness(1.05); }
        .btn-diet-footer:active { transform: translateY(1px); }
        .form-section-title { margin: 18px 0 12px; font-size: 16px; color: #3e3528; font-weight: 700; }
        .form-section-title.centered {
            text-align: center;
            font-family: "Merriweather", Georgia, "Times New Roman", serif;
            font-size: 28px;
            font-weight: 800;
            letter-spacing: .2px;
            margin: 10px 0 26px;
        }
        .actions { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-start; }
        .actions.actions-centered { justify-content: center; }
        /* Step 1 primary CTA tweaks */
        #step-1 .actions.actions-centered { margin-top: 24px; }
        #search-slots.btn {
            min-width: 240px;
            padding: 16px 44px;
            font-size: 18px;
            border-radius: 14px;
        }
        .btn { border: 0; background: var(--sage-dark); color: #fff; font-size: 20px; font-weight: 700; border-radius: 12px; padding: 14px 34px; cursor: pointer; min-width: 180px; }
        .btn:hover { background: #56624f; }
        .btn-secondary {
            background: var(--sage);
            color: #fff;
        }
        .btn-secondary:hover {
            background: var(--sage-dark);
        }
        #availability.availability:not(.hidden) { margin-top: 14px; }
        .availability-picker {
            margin-top: 0;
            padding: 0;
            border-radius: 14px;
            border: 1px solid #e5dac9;
            background: linear-gradient(180deg, #fffefb 0%, #faf6ef 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
            overflow: hidden;
        }
        .availability-date-line {
            margin: 0;
            padding: 12px 16px;
            font-size: 14px;
            font-weight: 800;
            color: #453d32;
            border-bottom: 1px solid #eae1d4;
            font-family: "Merriweather", Georgia, "Times New Roman", serif;
        }
        .slot-acc { border-bottom: 1px solid #ebe3d6; }
        .slot-acc:last-of-type { border-bottom: none; }
        .slot-acc-trigger {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 13px 14px;
            margin: 0;
            border: none;
            background: #f4f0e8;
            cursor: pointer;
            font-family: "Merriweather", Georgia, "Times New Roman", serif;
            font-size: 14px;
            font-weight: 800;
            color: #383129;
            text-align: start;
        }
        .slot-acc-trigger:hover { background: #efe9de; }
        .slot-acc-trigger .slot-acc-label { flex: 1; }
        .slot-acc-chevron svg {
            width: 18px;
            height: 18px;
            color: #6b6358;
            transition: transform 0.22s ease;
        }
        .slot-acc-trigger[aria-expanded="false"] .slot-acc-chevron svg {
            transform: rotate(-90deg);
        }
        .slot-acc-panel { padding: 4px 14px 16px; background: #fffdf9; }
        .slot-acc-trigger[aria-expanded="false"] + .slot-acc-panel { display: none; }
        .slot-grid-cards,
        .slot-grid-booked-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .slot-card-available {
            border: none;
            border-radius: 14px;
            background: linear-gradient(158deg, var(--terracotta) 0%, #b54a32 45%, var(--terracotta-dark) 100%);
            color: #fff;
            padding: 14px 18px;
            min-width: 132px;
            flex: 1 1 132px;
            max-width: 180px;
            cursor: pointer;
            font-family: inherit;
            box-shadow: 0 4px 16px rgba(120, 90, 52, 0.28);
            transition: transform 0.12s ease, box-shadow 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
            transform-origin: center center;
        }
        .slot-card-available:hover { box-shadow: 0 6px 20px rgba(120, 90, 52, 0.36); }
        .slot-card-available:active { transform: translateY(1px); }
        .slot-grid-cards .slot-card-available:not(.active) {
            opacity: 0.86;
            filter: saturate(0.9);
        }
        .slot-card-available.active {
            outline: 3px solid rgba(255, 255, 255, 0.95);
            box-shadow: 0 12px 34px rgba(100, 74, 44, 0.52);
            transform: scale(1.08);
            opacity: 1;
            filter: saturate(1.12);
            z-index: 2;
        }
        .slot-card-time {
            display: block;
            font-size: 20px;
            font-weight: 800;
            letter-spacing: 0.04em;
            line-height: 1.2;
        }
        .slot-card-available.active .slot-card-time {
            font-size: 24px;
        }
        .slot-card-meta {
            margin-top: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            opacity: 0.94;
        }
        .slot-info-ico {
            flex-shrink: 0;
            opacity: 0.9;
        }
        .slot-card-booked {
            border-radius: 14px;
            border: 1px solid #ebe2d6;
            background: linear-gradient(180deg, #fdfbf7 0%, #f7f1e8 100%);
            padding: 14px 18px;
            min-width: 132px;
            flex: 1 1 132px;
            max-width: 180px;
            text-align: center;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
        }
        .slot-card-booked-time {
            display: block;
            font-size: 17px;
            font-weight: 800;
            color: #7a7065;
            letter-spacing: 0.03em;
        }
        .slot-booked-badge {
            margin-top: 10px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.04em;
            color: #9a5c48;
        }
        .slot-empty-msg {
            margin: 8px 0 0;
            padding: 12px;
            font-size: 13px;
            font-weight: 600;
            color: #7a7167;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
            border: 1px dashed #d8cbb8;
        }
        .slot-empty-msg.hidden { display: none; }
        .addons-list {
            margin-top: 14px;
            display: grid;
            gap: 12px;
            font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
            color: #1f2937;
            font-weight: 600;
        }
        .addon-item { background: #fff; border: 1px solid #dfd2bf; border-radius: 12px; padding: 12px; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
        .addon-title { font-weight: 600; color: #1f2937; margin-bottom: 4px; }
        .addon-price { color: #1f2937; font-size: 13px; font-weight: 600; }
        .qty-box { display: flex; align-items: center; gap: 8px; }
        .qty-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d1b188; background: #fff7ec; color: #1f2937; font-size: 18px; line-height: 1; cursor: pointer; font-weight: 600; }
        .qty-value { min-width: 18px; text-align: center; font-weight: 600; color: #1f2937; }
        .checkbox { display: flex; gap: 12px; align-items: flex-start; color: #1f2937; font-size: 14px; margin-top: 0; line-height: 1.5; font-weight: 600; }
        .checkbox input {
            flex-shrink: 0;
            margin-top: 2px;
            width: 22px;
            height: 22px;
            border-radius: 7px;
            accent-color: #2a9d8f;
            cursor: pointer;
        }
        .step3-reading-root {
            background: var(--cream);
            border-radius: var(--radius-xl);
            padding: 32px 28px 36px;
            box-shadow: var(--shadow-card);
            border: 1px solid var(--border-card);
        }
.step3-reading-root,
.step3-reading-root * {
    font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    color: #1f2937; /* text-gray-800 */
    font-weight: 600; /* font-semibold */
}
        .step3-title {
            margin: 0 0 28px;
            font-family: "Merriweather", Georgia, "Times New Roman", serif;
            font-size: clamp(20px, 2.4vw, 24px);
            font-weight: 800;
            color: #231e18;
            letter-spacing: 0.02em;
            line-height: 1.35;
        }
        .step3-reading-root .grid.grid-3 {
            gap: 22px 26px;
            margin-bottom: 8px;
        }
        .step3-reading-root .field label {
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-muted);
        }
        .step3-reading-root .field input {
            min-height: 54px;
            padding: 14px 16px;
            border-radius: 15px;
            border: 1.5px solid var(--border-input);
            background: var(--surface);
            font-size: 15px;
            box-shadow: 0 1px 0 rgba(255,255,255,.75) inset;
        }
        .step3-reading-root .field input:focus {
            border-color: var(--gold-soft);
            box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.15);
        }
        .step3-reading-root .dietary-card--modern::before,
        .step3-reading-root .notes-card::before {
            background: linear-gradient(180deg, var(--gold) 0%, #daa95a 55%, var(--gold-dark) 100%);
            opacity: 1;
            width: 4px;
        }
        .step3-reading-root .notes-card { margin-bottom: 0; }
        .step3-agreements {
            display: flex;
            flex-direction: column;
            gap: 18px;
            margin: 32px 0 28px;
            padding-top: 8px;
            border-top: 1px solid rgba(212, 196, 176, 0.45);
        }
        .step3-agreements .checkbox { margin-top: 0; }
        .summary-panel {
            margin-top: 4px;
            background: var(--surface);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-card);
            box-shadow: 0 8px 36px rgba(55, 44, 30, 0.07);
            overflow: hidden;
        }
        .summary-panel-head {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 14px 18px 10px;
            background: linear-gradient(180deg, #fffefb 0%, #faf6f0 100%);
            border-bottom: 1px solid rgba(232, 223, 212, 0.9);
            position: relative;
        }
        .summary-panel-title {
            margin: 0;
            font-size: 26px;
            font-weight: 800;
            line-height: 1.25;
            color: #2d261f;
            text-align: center;
        }
        .summary-panel-deco {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 12px;
            border: 1.5px solid var(--gold-soft);
            background: linear-gradient(145deg, #fff9f0 0%, #f5ebe0 100%);
            color: var(--gold-dark);
            flex-shrink: 0;
        }
        .summary-panel-deco svg {
            width: 22px;
            height: 22px;
        }
        .btn-text-zoom {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 9px 14px;
            border: 2px solid var(--gold-soft);
            border-radius: 12px;
            background: var(--surface);
            color: #4a4135;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            font-family: "Merriweather", Georgia, "Times New Roman", serif;
            transition: border-color .15s, background .15s;
            position: absolute;
            inset-inline-start: 16px;
            top: 50%;
            transform: translateY(-50%);
        }
        .btn-text-zoom:hover { border-color: var(--gold); background: #fffdfb; }
        .btn-text-zoom[aria-pressed="true"] {
            background: #f7efe4;
            border-color: var(--gold);
            color: #5a4728;
        }
        .btn-text-zoom svg { flex-shrink: 0; opacity: .95; }
        .step3-reading-root.is-text-large .summary-box { font-size: 16px; }
        .step3-reading-root.is-text-large .checkbox { font-size: 15px; }
        .step3-reading-root.is-text-large .step3-title { font-size: clamp(21px, 2.6vw, 26px); }
        .step3-reading-root.is-text-large .field label,
        .step3-reading-root.is-text-large .field-sublabel { font-size: 16px; }
        .step3-reading-root.is-text-large .field input,
        .step3-reading-root.is-text-large .field select,
        .step3-reading-root.is-text-large .field textarea { font-size: 17px; }
        .summary-box {
            margin-top: 0;
            background: #fff;
            border: 1px solid #dbcab0;
            border-radius: 12px;
            padding: 12px;
            color: #3d352a;
            font-size: 14px;
        }
        .summary-panel .summary-box {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 16px 20px 22px;
            font-size: var(--summary-fs);
        }
        .summary-panel .summary-line {
            padding-block: 14px;
        }
        .summary-line {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 16px;
            padding: 12px 0;
            border-bottom: 1px solid #efe8dc;
            font-size: inherit;
        }
        .summary-line span:first-child {
            color: var(--text-muted);
            font-weight: 700;
            font-size: 13px;
        }
        .summary-line strong {
            font-weight: 800;
            color: #1f1a14;
            text-align: end;
            font-size: 15px;
            letter-spacing: 0.02em;
        }
        .summary-line:last-child {
            border-bottom: 0;
            padding-bottom: 4px;
        }
        .summary-line:last-child strong {
            color: var(--gold-dark);
            font-size: 16px;
        }
        .step3-reading-root.is-text-large .summary-line { padding: 14px 0; }
        .step3-reading-root.is-text-large .dietary-modern-title,
        .step3-reading-root.is-text-large .notes-card-title { font-size: 19px; }
        .step3-reading-root.is-text-large .dietary-modern-sub,
        .step3-reading-root.is-text-large .notes-card-sub { font-size: 14px; }
        .step3-reading-root.is-text-large .diet-summary-inline,
        .step3-reading-root.is-text-large .notes-preview { font-size: 14px; }
        .btn-confirm-wa {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            min-width: 240px;
            padding: 16px 40px;
            font-size: 17px;
            font-weight: 800;
            border-radius: 16px;
            box-shadow: 0 8px 28px rgba(166, 132, 66, 0.35), 0 1px 0 rgba(255,255,255,.2) inset;
        }
        .btn-confirm-wa:hover {
            box-shadow: 0 10px 32px rgba(166, 132, 66, 0.42), 0 1px 0 rgba(255,255,255,.2) inset;
        }
        .btn-confirm-wa .wa-icon { flex-shrink: 0; opacity: .98; width: 24px; height: 24px; }
        .step3-actions-stack {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 14px;
            margin-top: 28px;
            width: 100%;
            justify-content: center;
        }
        .step3-submit-wrap { margin-top: 0; margin-bottom: 0; }
        .step3-back-wrap {
            margin-top: 0;
            justify-content: center;
            width: auto;
        }
        .btn-back-step {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            flex-direction: row;
        }
        .btn-back-step .btn-back-icon {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
        }
        [dir="rtl"] .btn-back-step .btn-back-icon {
            transform: scaleX(-1);
        }
        .features { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; color: #3a332b; }
        .feature {
            border: 1px solid rgba(156, 141, 121, 0.25);
            border-radius: 16px;
            padding: 14px 14px;
            background: rgba(250, 246, 239, 0.88);
            box-shadow: 0 10px 26px rgba(48, 38, 26, 0.10);
            backdrop-filter: blur(6px);
            display: flex;
            align-items: center;
            gap: 12px;
            text-align: start;
        }
        .feature-ico {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(147, 166, 129, 0.18);
            border: 1px solid rgba(109, 123, 98, 0.22);
            color: #51604a;
            flex-shrink: 0;
        }
        .feature-ico svg { width: 22px; height: 22px; }
        .feature-copy { min-width: 0; }
        .feature strong { display: block; margin-bottom: 6px; color: #3a332b; font-weight: 800; }
        .feature span { font-size: 13px; color: #6b6358; font-weight: 600; }

        /* قائمة التواصل العائمة */
        .social-fab {
            position: fixed;
            bottom: 22px;
            inset-inline-end: 22px;
            z-index: 150;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 11px;
            pointer-events: none;
        }
        .social-fab > * {
            pointer-events: auto;
        }
        .social-fab__links {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 11px;
            margin: 0;
            padding: 0;
            list-style: none;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease;
        }
        .social-fab.is-open .social-fab__links {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .social-fab__link {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 5px 18px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            color: inherit;
            text-decoration: none;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .social-fab__link:hover {
            transform: scale(1.06);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
        }
        .social-fab__link:focus-visible {
            outline: 3px solid var(--stepper-active);
            outline-offset: 3px;
        }
        .social-fab__link svg {
            width: 24px;
            height: 24px;
            display: block;
        }
        .social-fab__toggle {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            background: linear-gradient(145deg, #115e67 0%, #0a3d45 100%);
            color: #fff;
            box-shadow: 0 8px 26px rgba(10, 61, 69, 0.45);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s ease, box-shadow 0.2s ease;
        }
        .social-fab__toggle:hover {
            box-shadow: 0 10px 30px rgba(10, 61, 69, 0.5);
        }
        .social-fab__toggle:active {
            transform: scale(0.96);
        }
        .social-fab__toggle:focus-visible {
            outline: 3px solid rgba(255, 255, 255, 0.85);
            outline-offset: 3px;
        }
        .social-fab__icon-open,
        .social-fab__icon-close {
            width: 26px;
            height: 26px;
        }
        .social-fab.is-open .social-fab__icon-open {
            display: none;
        }
        .social-fab:not(.is-open) .social-fab__icon-close {
            display: none;
        }

        @media (max-width: 900px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .booking-form { min-height: 380px; } }
        @media (max-width: 560px) {
            .hero-top-bar { padding: 10px 12px 0; min-height: 88px; }
            .hero-top-bar .lang-switch { top: 14px; left: max(10px, env(safe-area-inset-left)); }
            .site-logo { top: 10px; right: max(10px, env(safe-area-inset-right)); padding: 8px 12px 10px; min-width: auto; }
            .site-logo.site-logo--image { max-width: min(168px, 48vw); padding: 6px 10px; }
            .site-logo__img { max-height: 72px; }
            .hero-content { margin-top: 42px; }
            .grid-4, .grid-3, .grid-2, .features { grid-template-columns: 1fr; }
            .booking-form { min-height: 420px; padding: 22px 16px; }
            .step3-reading-root { padding: 24px 18px 28px; }
            .step3-actions-stack { flex-direction: column; }
            .step3-submit-wrap,
            .step3-back-wrap { width: 100%; }
            .step3-submit-wrap .btn,
            .step3-back-wrap .btn { min-width: 100%; width: min(100%, 340px); }
            .stepper { gap: 8px; padding-top: 12px; }
            .step-pill {
                padding: 12px 8px;
                font-size: clamp(12px, 3.2vw, 15px);
                gap: 6px;
            }
            .step-pill .step-no {
                width: 26px;
                height: 26px;
                font-size: 12px;
            }
            .step-pill.active::after {
                border-left-width: 7px;
                border-right-width: 7px;
                border-top-width: 8px;
                top: -6px;
            }
            .social-fab {
                bottom: 16px;
                inset-inline-end: 14px;
            }
            .social-fab__toggle {
                width: 54px;
                height: 54px;
            }
            .social-fab__link {
                width: 46px;
                height: 46px;
            }
        }