:root {
    --ej-page-base: #f5eee8;
    --ej-page-text: #251812;
    --ej-page-muted: #75665d;
    --ej-page-heading: #8f3f1a;
    --ej-page-accent: #bf6430;
    --ej-page-accent-strong: #8f3514;
    --ej-page-accent-soft: #ffc48d;
    --ej-page-surface: rgba(255, 253, 249, 0.66);
    --ej-page-surface-strong: rgba(255, 253, 249, 0.84);
    --ej-page-surface-subtle: rgba(255, 246, 238, 0.48);
    --ej-page-border: rgba(126, 61, 30, 0.16);
    --ej-page-highlight: rgba(255, 255, 255, 0.72);
    --ej-page-shadow: rgba(72, 25, 8, 0.18);
    --ej-page-input: rgba(255, 255, 255, 0.72);
    --ej-page-input-border: rgba(126, 61, 30, 0.18);
    --ej-page-button-text: #fffaf6;
    --ej-page-focus: rgba(191, 100, 48, 0.24);
    --ej-page-light-layer-opacity: 1;
    --ej-page-dark-layer-opacity: 0;
    --ej-page-theme-duration: 800ms;
    --ej-page-theme-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="dark"] {
    --ej-page-base: #020803;
    --ej-page-text: #e1e8e3;
    --ej-page-muted: #9eaca2;
    --ej-page-heading: #dfffb5;
    --ej-page-accent: #c4ff38;
    --ej-page-accent-strong: #35d04f;
    --ej-page-accent-soft: #d8ff7d;
    --ej-page-surface: rgba(5, 18, 9, 0.66);
    --ej-page-surface-strong: rgba(4, 20, 10, 0.84);
    --ej-page-surface-subtle: rgba(12, 43, 21, 0.48);
    --ej-page-border: rgba(196, 255, 56, 0.15);
    --ej-page-highlight: rgba(224, 255, 198, 0.11);
    --ej-page-shadow: rgba(0, 0, 0, 0.54);
    --ej-page-input: rgba(2, 12, 6, 0.72);
    --ej-page-input-border: rgba(196, 255, 56, 0.16);
    --ej-page-button-text: #071108;
    --ej-page-focus: rgba(196, 255, 56, 0.22);
    --ej-page-light-layer-opacity: 0;
    --ej-page-dark-layer-opacity: 1;
}

body.ej-glass-page {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    overflow-x: hidden;
    color: var(--ej-page-text);
    background-color: var(--ej-page-base);
    transition:
        color var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        background-color var(--ej-page-theme-duration) var(--ej-page-theme-ease);
}

body.ej-glass-page::before,
body.ej-glass-page::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    transition: opacity var(--ej-page-theme-duration) var(--ej-page-theme-ease);
}

body.ej-glass-page::before {
    opacity: var(--ej-page-light-layer-opacity);
    background:
        radial-gradient(circle at 12% 8%, rgba(217, 136, 65, 0.34), transparent 32%),
        radial-gradient(circle at 88% 78%, rgba(115, 54, 18, 0.24), transparent 34%),
        linear-gradient(145deg, #fffdf9 0%, #f6eee7 54%, #efe2d8 100%);
}

body.ej-glass-page::after {
    opacity: var(--ej-page-dark-layer-opacity);
    background:
        radial-gradient(circle at 12% 10%, rgba(196, 255, 56, 0.17), transparent 31%),
        radial-gradient(circle at 88% 74%, rgba(53, 208, 79, 0.16), transparent 34%),
        radial-gradient(circle at 54% 108%, rgba(8, 122, 56, 0.24), transparent 40%),
        #020803;
}

body.ej-glass-page main,
body.ej-glass-page .main-content-wrapper {
    position: relative;
    z-index: 1;
}

.ej-glass-page .accommodation-header,
.ej-glass-page .experience-header,
.ej-glass-page .store-header {
    background: transparent;
    border-color: transparent;
}

.ej-glass-page .accommodation-brand,
.ej-glass-page .experience-brand,
.ej-glass-page .store-brand {
    border: 1px solid var(--ej-page-border);
    border-radius: 16px;
    background: var(--ej-page-surface);
    color: var(--ej-page-accent);
    box-shadow:
        0 14px 38px -20px var(--ej-page-shadow),
        inset 0 1px 0 var(--ej-page-highlight);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    transition:
        color var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        background var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        border-color var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        box-shadow var(--ej-page-theme-duration) var(--ej-page-theme-ease);
}

.ej-glass-page .booking-hero,
.ej-glass-page .experience-hero,
.ej-glass-page .store-coming-soon,
.ej-glass-page .glass-panel,
.ej-glass-page .booking-search-shell,
.ej-glass-page .filter-panel,
.ej-glass-page .padel-main-panel,
.ej-glass-page .padel-side-card,
.ej-glass-page .padel-summary-card,
.ej-glass-page .padel-form-block,
.ej-glass-page .padel-confirmation,
.ej-glass-page .stay-profile-card,
.ej-glass-page .booking-dialog,
.ej-glass-page .experience-article-card {
    border: 1px solid var(--ej-page-border);
    background: linear-gradient(145deg, var(--ej-page-highlight), var(--ej-page-surface));
    box-shadow:
        0 26px 64px -34px var(--ej-page-shadow),
        inset 0 1px 0 var(--ej-page-highlight);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    transition:
        color var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        background var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        border-color var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        box-shadow var(--ej-page-theme-duration) var(--ej-page-theme-ease);
}

.ej-glass-page .stay-card,
.ej-glass-page .padel-club-card,
.ej-glass-page .experience-card,
.ej-glass-page .store-card,
.ej-glass-page .accommodation-summary-card,
.ej-glass-page .accommodation-payment-card,
.ej-glass-page .padel-picker-block,
.ej-glass-page .padel-cliq-box {
    border-color: var(--ej-page-border);
    background: var(--ej-page-surface-strong);
    color: var(--ej-page-text);
    box-shadow:
        0 20px 48px -30px var(--ej-page-shadow),
        inset 0 1px 0 var(--ej-page-highlight);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    transition:
        transform 240ms ease,
        color var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        background var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        border-color var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        box-shadow var(--ej-page-theme-duration) var(--ej-page-theme-ease);
}

.ej-glass-page .stay-card:hover,
.ej-glass-page .padel-club-card:hover,
.ej-glass-page .experience-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 30px 60px -30px var(--ej-page-shadow),
        inset 0 1px 0 var(--ej-page-highlight);
}

.ej-glass-page h1,
.ej-glass-page h2,
.ej-glass-page h3,
.ej-glass-page .page-title,
.ej-glass-page .store-title,
.ej-glass-page .padel-hero-copy strong,
.ej-glass-page .stay-card h2 a,
.ej-glass-page .experience-card h2 {
    color: var(--ej-page-heading);
    transition: color var(--ej-page-theme-duration) var(--ej-page-theme-ease);
}

.ej-glass-page p,
.ej-glass-page li,
.ej-glass-page label,
.ej-glass-page .text-gray-500,
.ej-glass-page .text-gray-600,
.ej-glass-page .text-gray-800,
.ej-glass-page .stay-meta,
.ej-glass-page .stay-location,
.ej-glass-page .experience-meta,
.ej-glass-page .padel-card-address,
.ej-glass-page .padel-section-title p {
    color: var(--ej-page-muted);
    transition: color var(--ej-page-theme-duration) var(--ej-page-theme-ease);
}

.ej-glass-page .eyebrow,
.ej-glass-page .store-eyebrow,
.ej-glass-page .padel-hero-copy > p,
.ej-glass-page .badge,
.ej-glass-page .experience-read-more {
    color: var(--ej-page-accent);
}

.ej-glass-page input,
.ej-glass-page select,
.ej-glass-page textarea {
    border-color: var(--ej-page-input-border);
    background: var(--ej-page-input);
    color: var(--ej-page-text);
    box-shadow: inset 0 1px 0 var(--ej-page-highlight);
    transition:
        color var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        background var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.ej-glass-page input::placeholder,
.ej-glass-page textarea::placeholder {
    color: var(--ej-page-muted);
    opacity: 0.78;
}

.ej-glass-page input:focus,
.ej-glass-page select:focus,
.ej-glass-page textarea:focus {
    border-color: var(--ej-page-accent);
    outline: none;
    box-shadow: 0 0 0 4px var(--ej-page-focus);
}

.ej-glass-page select option {
    color: #20150f;
    background: #fffdf9;
}

html[data-theme="dark"] .ej-glass-page select option {
    color: #e1e8e3;
    background: #071108;
}

.ej-glass-page .search-btn,
.ej-glass-page .book-btn,
.ej-glass-page .store-action,
.ej-glass-page .experience-contact-links a,
.ej-glass-page .padel-directions-link,
.ej-glass-page .padel-login-required a {
    border-color: transparent;
    background: linear-gradient(135deg, var(--ej-page-accent), var(--ej-page-accent-strong));
    color: var(--ej-page-button-text);
    box-shadow:
        0 14px 28px -14px var(--ej-page-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition:
        transform 200ms ease,
        color var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        background var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        box-shadow var(--ej-page-theme-duration) var(--ej-page-theme-ease);
}

.ej-glass-page .search-btn:hover,
.ej-glass-page .book-btn:hover,
.ej-glass-page .store-action:hover,
.ej-glass-page .experience-contact-links a:hover,
.ej-glass-page .padel-directions-link:hover,
.ej-glass-page .padel-login-required a:hover {
    transform: translateY(-2px);
    color: var(--ej-page-button-text);
    box-shadow:
        0 20px 34px -14px var(--ej-page-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.ej-glass-page .store-action.is-secondary,
.ej-glass-page .experience-back,
.ej-glass-page .padel-back-button,
.ej-glass-page .clear-btn {
    border-color: var(--ej-page-border);
    background: var(--ej-page-surface);
    color: var(--ej-page-accent);
    box-shadow: inset 0 1px 0 var(--ej-page-highlight);
}

.ej-glass-page .trust-row > span,
.ej-glass-page .stay-badges > span,
.ej-glass-page .padel-card-meta > span {
    border-color: var(--ej-page-border);
    background: var(--ej-page-surface-subtle);
    color: var(--ej-page-muted);
}

.ej-glass-page .site-footer,
.ej-glass-page .experience-results-header {
    border-color: var(--ej-page-border);
    color: var(--ej-page-muted);
}

.about-page.ej-glass-page .main-content-wrapper main > :is(section:first-of-type, .about-download-panel) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 210, 176, 0.22);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(116, 54, 27, 0.58), rgba(54, 18, 8, 0.50));
    box-shadow:
        0 34px 78px -34px rgba(43, 10, 2, 0.72),
        inset 0 1px 0 rgba(255, 231, 211, 0.18),
        inset 0 -1px 0 rgba(255, 151, 82, 0.08);
    padding: clamp(24px, 4vw, 52px);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    transition:
        color var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        background var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        border-color var(--ej-page-theme-duration) var(--ej-page-theme-ease),
        box-shadow var(--ej-page-theme-duration) var(--ej-page-theme-ease);
}

.about-page.ej-glass-page .main-content-wrapper main > :is(section:first-of-type, .about-download-panel)::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 46%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 244, 234, 0.14), rgba(255, 244, 234, 0));
    pointer-events: none;
    transition: background var(--ej-page-theme-duration) var(--ej-page-theme-ease);
}

html[data-theme="dark"] .about-page.ej-glass-page .main-content-wrapper main > :is(section:first-of-type, .about-download-panel) {
    border-color: rgba(196, 255, 56, 0.17);
    background:
        linear-gradient(145deg, rgba(26, 74, 22, 0.54), rgba(2, 22, 9, 0.58));
    box-shadow:
        0 34px 78px -34px rgba(0, 0, 0, 0.82),
        inset 0 1px 0 rgba(211, 255, 149, 0.16),
        inset 0 -1px 0 rgba(53, 208, 79, 0.08);
}

html[data-theme="dark"] .about-page.ej-glass-page .main-content-wrapper main > :is(section:first-of-type, .about-download-panel)::before {
    background: linear-gradient(180deg, rgba(211, 255, 149, 0.11), rgba(211, 255, 149, 0));
}


@media (max-width: 760px) {
    .ej-glass-page .booking-hero,
    .ej-glass-page .store-coming-soon,
    .ej-glass-page .experience-hero {
        border-radius: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ej-glass-page,
    body.ej-glass-page::before,
    body.ej-glass-page::after,
    .ej-glass-page * {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}