/* ==================================================================
   YoYo Tattoo Pattaya — light themes (index-690926.php)
   ------------------------------------------------------------------
   Colours only — layout lives in theme-690926-base.css.
   Switchable (theme button). Two variants, picked by <html data-theme>:
     navy ... "White & Navy" — white page, deep-navy styles block + footer
     sky .... "Airy Sky"     — white + soft sky blue everywhere, light footer
   Same logo blue as the dark theme, tuned darker where it sits on white.
   ================================================================== */

:root {
    --c-blue-ice: #e7f6fc;
    --c-blue-lt:  #38bde4;
    --c-blue:     #1596c7;
    --c-blue-dk:  #0b5f86;
    --c-blue-glow: rgba(21, 150, 199, .28);

    --c-ink:      #0b1b2c;     /* deep navy: dark buttons, footer, text on white buttons */
    --c-dark:     #0b1b2c;
    --c-dark-2:   #132a40;
    --c-white:    #ffffff;
    --c-gray:     #f4f8fb;
    --c-gray-2:   #e3edf4;
    --c-text:     #0f1f2f;
    --c-muted:    #5b6c7c;
    --c-soft:     #9fb4c4;
    --c-line:     rgba(15, 45, 75, .10);
    --c-line-dk:  rgba(255, 255, 255, .14);
    --c-gold:     var(--c-blue);
    --c-gold-lt:  var(--c-blue-lt);
    --c-accent:   var(--c-blue);
    --c-heading:  #0b1b2c;
    --rv-chip-fg: var(--c-blue-dk);
    --ph-stripe:  rgba(15, 45, 75, .035);
    --ph-edge:    rgba(15, 45, 75, .12);
    --shadow:     0 24px 60px -30px rgba(11, 40, 70, .35);
    --lift:       0 22px 48px -30px rgba(11, 40, 70, .38);
}

body { background: var(--c-white); color: var(--c-text); }
::selection { background: var(--c-blue); color: #fff; }
.section > .container-xl { position: relative; }

/* Headlines / labels */
.display-title em { color: var(--c-blue); }
.section--dark .display-title em { color: var(--c-blue-lt); }
.eyebrow { color: var(--c-blue); }
.section--dark .eyebrow { color: var(--c-blue-lt); }
.section-head__lead { color: var(--c-muted); }

/* Buttons */
.btn--dark { background: linear-gradient(135deg, var(--c-blue), var(--c-blue-dk)); color: #fff; box-shadow: 0 12px 26px -14px var(--c-blue-glow); }
.btn--dark:hover { background: linear-gradient(135deg, var(--c-blue-lt), var(--c-blue)); color: #fff; }
.round-btn:hover, .section--dark .round-btn:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.link-arrow:hover { color: var(--c-blue); }

/* ---- Header: white glass once scrolled (sections are tagged "dark" for the dark theme) ---- */
.site-header.is-scrolled,
.site-header.is-on-dark.is-scrolled {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 1px 0 var(--c-line), 0 12px 30px -24px rgba(11, 40, 70, .35);
    color: var(--c-ink);
}
.site-header.is-scrolled .lang-switch__btn.is-active { color: #fff; }
.site-header .btn--header,
.is-on-dark .btn--header { background: linear-gradient(135deg, var(--c-blue), var(--c-blue-dk)); color: #fff; }
.site-header .btn--header:hover { background: var(--c-blue-lt); color: #fff; }
.main-nav__link::after { background: var(--c-blue); }
.site-header .brand__badge img { filter: drop-shadow(0 4px 12px rgba(11, 40, 70, .25)); }

.preloader__bar span, .scroll-progress span { background: linear-gradient(90deg, var(--c-blue-dk), var(--c-blue-lt)); }

/* ---- Placeholders: flip the dark slots to light (real photos are not affected) ---- */
img[data-placeholder] { filter: invert(1) hue-rotate(180deg) saturate(.8) brightness(1.02); }
.styles img[data-placeholder] { filter: none; }        /* style cards keep their dark slot + overlay (white text on top) */

/* ---- Ticker ------------------------------------------------------ */
.ticker { background: #fff; border-block: 1px solid var(--c-line); }
.ticker__item { color: var(--c-ink); }
.ticker__item:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1.2px var(--c-blue); }
.ticker__dot { background: var(--c-blue); }

/* ---- About / sections: soft sky light in the corners ------------- */
.about::before, .pf::before, .contact::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(55% 50% at 0% 0%, rgba(56, 189, 228, .12), transparent 70%);
}
.pf::before { background: radial-gradient(50% 60% at 100% 0%, rgba(56, 189, 228, .12), transparent 70%); }
.contact::before { background: radial-gradient(50% 45% at 100% 100%, rgba(56, 189, 228, .10), transparent 70%); }
.about__caption { box-shadow: var(--lift); color: var(--c-blue-dk); }

/* ---- Portfolio / team on white ---------------------------------- */
.pf-item .gallery__open { box-shadow: 0 0 0 1px var(--c-line), var(--lift); }
.pf-item .gallery__open:hover { box-shadow: 0 0 0 1px var(--c-blue), 0 24px 44px -24px var(--c-blue-glow); }
.pf-bar__hand { background: var(--c-blue-ice); }
.team-card__media { box-shadow: 0 0 0 1px var(--c-line), var(--lift); }
.team-card__ig { border-color: var(--c-line); }
.team-card__ig:hover { color: #fff; }

/* ---- Process ------------------------------------------------------ */
.steps__item.is-active .steps__dot { box-shadow: 0 0 0 6px rgba(21, 150, 199, .15); }
.steps__item.is-active .steps__num { color: var(--c-blue); }
.steps__fill { background: linear-gradient(180deg, var(--c-blue-lt), var(--c-blue-dk)); }

/* ---- Reviews: light ------------------------------------------------ */
.reviews.section--dark { background: linear-gradient(180deg, #f1f8fc 0%, #ffffff 70%); color: var(--c-text); }
.reviews::before { background: radial-gradient(60% 50% at 50% 0%, rgba(56, 189, 228, .16), transparent 70%); }
.reviews .section-head__lead { color: var(--c-muted); }
.reviews .display-title em { color: var(--c-blue); }
.reviews .eyebrow { color: var(--c-blue); }
.rv-score { background: linear-gradient(135deg, #e3f5fc, #f7fcfe); box-shadow: inset 0 0 0 1px rgba(21, 150, 199, .22), var(--lift); }
.rv-studio, .rv-card { background: #fff; box-shadow: inset 0 0 0 1px var(--c-line), var(--lift); }
.rv-studio:hover { box-shadow: inset 0 0 0 1px var(--c-blue), 0 22px 44px -24px var(--c-blue-glow); }
.rv-chip { background: var(--c-blue-ice); box-shadow: inset 0 0 0 1px rgba(21, 150, 199, .2); }
.rv-card--ph { background: repeating-linear-gradient(45deg, var(--ph-stripe) 0 14px, transparent 14px 28px), #fff; }
.reviews .stream__item { background: var(--c-gray-2); }

/* ---- Contact ------------------------------------------------------ */
.studio.is-active { box-shadow: 0 18px 40px -26px var(--c-blue-glow); }
.channel { box-shadow: var(--lift); }
.channel--call { --brand: var(--c-blue); }
.field__input:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(21, 150, 199, .16); }
.check input:checked + .check__box { background: var(--c-blue); border-color: var(--c-blue); }
.map__tab.is-active, .map__tab:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.map__card { box-shadow: var(--lift); }

/* ---- Footer / misc --------------------------------------------------- */
.back-top:hover, .social-row__item:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }


/* ==================================================================
   Variant "navy" — White & Navy
   ================================================================== */
html[data-theme="navy"] .styles.section--dark {
    background:
        radial-gradient(70% 60% at 100% 0%, rgba(56, 189, 228, .22), transparent 60%),
        linear-gradient(180deg, #0c1d30 0%, #0a1726 100%);
}
html[data-theme="navy"] .styles .section-head__lead { color: rgba(255, 255, 255, .66); }
html[data-theme="navy"] .styles .xpand::after {
    background:
        linear-gradient(90deg, var(--c-blue), var(--c-blue-lt)) no-repeat 0 0 / calc(var(--st-p, 0) * 100%) 100%,
        rgba(255, 255, 255, .14);
}
html[data-theme="navy"] .artists.section--gray { background: linear-gradient(180deg, #f3f8fb, #ffffff); }
html[data-theme="navy"] .site-footer { background: linear-gradient(180deg, #0c1d30, #07121f); }
html[data-theme="navy"] .preloader { background: #0b1b2c; }


/* ==================================================================
   Variant "sky" — Airy Sky (everything light, rounder, softer)
   ================================================================== */
html[data-theme="sky"] {
    --radius: 18px;
    --c-gray: #f3f9fc;
    --lift: 0 26px 56px -34px rgba(21, 110, 160, .42);
}
html[data-theme="sky"] body { background: #fbfdfe; }
html[data-theme="sky"] .preloader { background: #ffffff; }
html[data-theme="sky"] .preloader__bar { background: rgba(15, 45, 75, .1); }

/* Styles block: light instead of dark */
html[data-theme="sky"] .styles.section--dark { background: linear-gradient(180deg, #eaf6fc 0%, #fbfdfe 100%); color: var(--c-text); }
html[data-theme="sky"] .styles .display-title em { color: var(--c-blue); }
html[data-theme="sky"] .styles .eyebrow { color: var(--c-blue); }
html[data-theme="sky"] .styles .section-head__lead { color: var(--c-muted); }
html[data-theme="sky"] .styles .xpand__panel { border-radius: 20px; box-shadow: var(--lift); }
html[data-theme="sky"] .styles .xpand::after {
    background:
        linear-gradient(90deg, var(--c-blue), var(--c-blue-lt)) no-repeat 0 0 / calc(var(--st-p, 0) * 100%) 100%,
        var(--c-line);
}

/* Alternating airy sections */
html[data-theme="sky"] .pf { background: linear-gradient(180deg, #fbfdfe 0%, #f0f8fc 100%); }
html[data-theme="sky"] .artists.section--gray { background: #fbfdfe; }
html[data-theme="sky"] .process { background: linear-gradient(180deg, #f0f8fc 0%, #fbfdfe 100%); }
html[data-theme="sky"] .reviews.section--dark { background: linear-gradient(180deg, #e6f5fc 0%, #fbfdfe 75%); }
html[data-theme="sky"] .ticker { background: linear-gradient(90deg, #eaf6fc, #fbfdfe 50%, #eaf6fc); }

/* Rounder, softer cards */
html[data-theme="sky"] .pf-item .gallery__open,
html[data-theme="sky"] .team-card__media { border-radius: 22px; }
html[data-theme="sky"] .rv-score,
html[data-theme="sky"] .rv-studio,
html[data-theme="sky"] .rv-card,
html[data-theme="sky"] .studio,
html[data-theme="sky"] .channel,
html[data-theme="sky"] .booking { border-radius: 20px; }
html[data-theme="sky"] .btn,
html[data-theme="sky"] .round-btn { border-radius: 999px; }

/* Light footer */
html[data-theme="sky"] .site-footer { background: linear-gradient(180deg, #eef7fc 0%, #e4f2fa 100%); color: var(--c-muted); }
html[data-theme="sky"] .site-footer__headline,
html[data-theme="sky"] .site-footer__title,
html[data-theme="sky"] .site-footer .brand { color: var(--c-ink); }
html[data-theme="sky"] .site-footer__headline em { color: var(--c-blue); }
html[data-theme="sky"] .site-footer .btn--light { background: linear-gradient(135deg, var(--c-blue), var(--c-blue-dk)); color: #fff; }
html[data-theme="sky"] .footer-rule { background: var(--c-line); }
html[data-theme="sky"] .site-footer__links a:hover { color: var(--c-blue); }
html[data-theme="sky"] .site-footer__bottom { border-top-color: var(--c-line); color: var(--c-muted); }
html[data-theme="sky"] .social-row__item,
html[data-theme="sky"] .back-top { border-color: var(--c-line); color: var(--c-ink); }