/* =========================================================
   AstroPath – layout responsywny (appbar + produkty fix)
   ========================================================= */

/* Zmienne */
:root{
  --bg:#0a0d1a; --fg:#eaf1ff; --muted:#a9b1c7; --brand:#8ec5ff; --accent:#b38cff;
  --card:#111633; --line:#223;

  /* Zodiak – rozmiar kafelków (square) */
  --z-size: 140px;   /* desktop: 6 kolumn -> 2 rzędy × 6 */
  --z-gap: 12px;

  /* Free 3-card – wysokość slotu na kartę (karta centrowana pion/poziom) */
  --card-slot: clamp(260px, 34vw, 420px);
}

/* ===== BASE ===== */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.55 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.section{margin:28px 0}
.section--card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  max-width:1600px;
  margin:28px auto;
}

/* ===== HEADER / APPBAR ===== */
.header{
  position:sticky; top:0; z-index:1000;
  background:rgba(10,13,26,.85);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header__inner{
  display:flex; flex-wrap:wrap;
  gap:12px 16px;
  align-items:center; justify-content:space-between;
  padding:10px 0;
}

/* Brand */
.brand h1{margin:0;font-size:22px}
.tagline{font-size:12px;color:var(--muted)}

/* Nawigacja */
.nav{
  display:flex; gap:12px; align-items:center;
  flex:1 1 auto; min-width:40%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none}
.nav a{
  padding:8px 10px; border-radius:10px; white-space:nowrap;
}

/* Języki (flagi) */
.lang{
  display:flex; gap:8px; align-items:center;
  overflow-x:auto; max-width:100%;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.lang::-webkit-scrollbar{display:none}
.lang img{
  width:22px;height:22px;border-radius:50%;
  cursor:pointer;opacity:.9; flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
.lang img:hover{opacity:1}

/* Drobny „fade” na końcach scrollerów */
.header .is-scrollable::after,
.header .is-scrollable::before{
  content:""; position:sticky; top:0;
  width:18px; height:30px; align-self:stretch; pointer-events:none;
}
.header .is-scrollable::before{left:0; background:linear-gradient(90deg, rgba(10,13,26,.85), transparent)}
.header .is-scrollable::after{right:0; background:linear-gradient(270deg, rgba(10,13,26,.85), transparent)}

/* HERO */
.hero{background:radial-gradient(80% 100% at 50% 0%, rgba(142,197,255,.20), transparent 70%)}
.hero .hero-content{max-width:880px;margin:0 auto;text-align:center}
.hero h2{font-size:32px;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 20px}

.btn{
  background:linear-gradient(90deg,var(--brand),var(--accent));
  border:none;color:#0b0f1e;padding:10px 16px;border-radius:12px;cursor:pointer;font-weight:700
}
.btn:hover{filter:brightness(1.05)}
.btn.outline{background:transparent;border:1px solid var(--brand);color:var(--fg)}
.btn.tiny{padding:4px 8px;border-radius:8px;font-size:12px}
.btn.disabled,.btn:disabled{opacity:.5;cursor:not-allowed}

/* ===== FREE 3-CARD ===== */
.free-reading .cards-row{
  display: grid;
  grid-template-columns: repeat(3, auto); /* 3 kolumny dopasowane do szer. kart */
  gap: 18px;
  justify-content: center;
  align-items: start;
  margin: 16px 0;
}

/* PANEL KARTY: slot na kartę + miejsce na podpis */
.card{
  display: grid;
  grid-template-rows: var(--card-slot) auto;  /* stała wys. na kartę + podpis pod spodem */
  justify-items: center;                      /* poziome centrum */
  align-items: center;                        /* pionowe centrum karty w slocie */
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  perspective: 1000px;                        /* dla flipu 3D */
}

/* --- FLIP 3D DWUSTRONNY (bez odwracania napisów) --- */
/* Struktura tworzona przez JS:
   .card
     .flip
       .flip-inner (rotates)
         .face.face--front  (zawiera <img class="tarot-card">)
         .face.face--back   (tło z obrazem pleców) */
.card .flip{
  position: relative;
  height: 100%;
  width: auto;
  aspect-ratio: 300/501;
}
.card .flip-inner{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .5s ease;
}
/* Przed losowaniem pokazujemy TYŁ */
.card .flip.show-back .flip-inner{ transform: rotateY(180deg); }

.card .face{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;               /* klucz: brak lustrzanek */
}
.card .face--front{ transform: rotateY(0); }
.card .face--back{
  transform: rotateY(180deg);
  background: center/contain no-repeat;      /* obraz pleców ustawiany w JS */
  border-radius: 10px;
}

/* KARTA (obraz frontu) – zawsze centrowana w slocie */
.tarot-card{
  height: 100%;               /* wypełnia wysokość slota */
  width: auto;
  aspect-ratio: 300/501;
  object-fit: contain;
  background: #e8e0d0;
  border-radius: 10px;
}
/* usuwamy stare animacje/klasy, żeby nie kolidowały */
.tarot-card.is-flip,
.tarot-card.is-flip-out,
.tarot-card.is-flip-in{ animation:none !important; }
.tarot-card.flip{ transform:none !important; }

/* PODPIS/OPIS POD KARTĄ */
.card-meaning{
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  max-width: 32ch;
  display: none;               /* ukryty przed odkryciem */
}
/* po odkryciu karty pokazujemy podpis (NIE przesuwa karty w górę) */
.card.revealed .card-meaning{ display:block; }

.free-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.hint,.date{color:var(--muted);font-size:13px}

/* wyśrodkowania nagłówka, daty i hinta */
.center{text-align:center}
.free-reading h3.center{margin:0 0 8px}
.free-reading #reading-date{display:block;text-align:center;margin:0 0 16px;opacity:.9}
.free-reading .hint.center{max-width:820px;margin:12px auto 0;text-align:center;opacity:.9}

/* ===== OFERTA / SERVICES ===== */
.services .services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  justify-items: stretch;
}

.service {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(12px, 2vw, 16px);
}
.service .media{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:12px;
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:10px;
}
.service .media img{max-width:90%;max-height:90%;object-fit:contain;object-position:center}
.service .price{font-weight:700}
.service .btn{width:100%;justify-content:center}
.service.highlight{outline:2px solid var(--accent);box-shadow:0 0 20px rgba(179,140,255,.25)}

/* ===== ABOUT ===== */
.about-wrap{display:grid;grid-template-columns:1.2fr 2fr;gap:16px;align-items:start}
.about-photo{width:100%;height:auto;border-radius:14px;object-fit:cover;box-shadow:0 8px 26px rgba(0,0,0,.22)}
.about-text p{margin:8px 0}

/* ===== MOON ===== */
.moon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:10px}
.moon-card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:12px}
.moon-emoji{font-size:28px;line-height:1}

/* ===== ZODIAKI ===== */
.horoscope-picker{
  display:grid;
  grid-template-columns:repeat(6, var(--z-size));
  gap:var(--z-gap);
  margin:12px auto 16px;
  justify-content:center;
  align-content:center;
}
.hs-btn{
  width:var(--z-size); aspect-ratio:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:#fff;color:#0a0d1b;
  border:1px solid rgba(0,0,0,.12);border-radius:16px;padding:14px;cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s, border-color .15s
}
.hs-btn img{width:40px;height:40px;object-fit:contain}
.hs-btn span{font-size:14px;text-align:center}
.hs-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.hs-btn.active{background:linear-gradient(180deg, rgba(99,91,255,.18), #fff);border-color:rgba(99,91,255,.55);box-shadow:0 10px 30px rgba(99,91,255,.25)}

.horoscope-card{background:rgba(13,16,32,.65);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px}
.horoscope-card .hs-title{margin:0 0 6px}
.horoscope-card p{margin:6px 0}

/* ===== DREAMS ===== */
.dreams-wrap{display:grid;grid-template-columns:1.2fr 2fr;gap:16px;align-items:center}
.dreams-media{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:10px}
.dreams-media img{width:100%;height:auto;border-radius:10px}

/* ===== INNE ===== */
.emoji{margin-right:.4rem}

/* NOTE & FOOTER */
.note{color:var(--muted);text-align:center}
.footer{border-top:1px solid var(--line);padding:16px 0;color:var(--muted)}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer .sep{margin:0 8px;color:#445}

/* Płatności – małe ikonki */
.pay-logos {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.pay-logos img {
  height: 22px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  background: #fff;
  padding: 4px 6px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.pay-logos img:hover { opacity: 1; }

/* Dialog */
.dialog.hidden{display:none}
.dialog{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; z-index:999
}
.dialog-box{
  background:#0d1020;color:#fff;border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:18px;width:min(420px,92%);
  box-shadow:0 20px 60px rgba(0,0,0,.45)
}
.dialog-box .row{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}

/* =========================================================
   BREAKPOINTS
   ========================================================= */

/* Tablet */
@media (max-width: 1024px){
  :root{ --z-size:126px; }
  .horoscope-picker{ grid-template-columns:repeat(4, var(--z-size)); }
  .about-wrap{grid-template-columns:1fr}
}

/* <=980: siatka usług płynna */
@media (max-width: 980px){
  .services .services-grid{
    grid-auto-flow:row;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:clamp(12px, 2.4vw, 20px);
    justify-items:center;
  }
  .service{max-width:240px}
}

/* Mobile */
@media (max-width: 720px){
  :root{
    --z-size:110px;
    --card-slot: clamp(220px, 45vw, 340px); /* niższy slot na tel. */
  }
  .horoscope-picker{ grid-template-columns:repeat(3, var(--z-size)); }

  .hero h2{font-size:26px}
  .brand h1{font-size:19px}
  .tagline{display:none}

  .free-reading .cards-row{gap:12px}

  .services .services-grid{
    grid-auto-flow:row;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px; justify-items:center;
  }
  .service{max-width:200px}
  .service .media{aspect-ratio:4 / 3; padding:8px}

  .nav, .lang{padding-bottom:6px}
}

/* Bardzo małe telefony */
@media (max-width: 380px){
  .services .services-grid{gap:10px}
  .service{max-width:180px}
  .hs-btn img{width:34px;height:34px}
  .hs-btn span{font-size:13px}
}

/* =========================================================
   Preferencje dostępności
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* WIĘKSZY WIDGET + KONTRAST TEKSTU */
.hint-chat{
  max-width: 820px;          /* było 680px */
  padding: 1rem 1.25rem;     /* było .75/.1 */
}
.hint-chat img{
  width: 56px; height: 56px; /* było 42px */
}
.hint-chat .hint-bubble{
  color: #111;               /* czarny tekst na białym tle */
  font-size: 0.98rem;
}
.hint-chat .hint-cta{
  color: #0ea5e9;            /* akcent linkowy */
  text-decoration: underline;
}
.hint-chat .hint-badge{
  background:#22c55e;        /* zieleń */
  color:#fff;                /* na znaczku zostawiamy białą czcionkę */
}

/* CZYTELNE OPINIE NA BIAŁYM TLE */
.reviews .rev{
  background:#fff;
  color:#111;                /* bazowy kolor tekstu */
}
.reviews .rev .text{ color:#111; opacity:1; }
.reviews .rev .name{ color:#374151; }             /* subtelnie ciemniejszy */
.reviews .rev .stars{ color:#f59e0b; font-weight:700; } /* złote gwiazdki */

/* Wymuś ciemny kolor tekstu w modalu, niezależnie od tła */
.modal { color: #111; }
.modal__title { color: #111; }
.modal { color: #111; }
.modal__title { color: #111; }
.modal__body p, .modal__body strong { color: #111; }

/* Zachowaj poprawne kolory przycisków */
.modal__buy { background:#111; color:#fff !important; }
.modal__close { background:#f4f4f4; color:#111 !important; }


@media (max-width: 720px){
  .wrap{ padding: 0 14px; }
  .section--card{ padding: 16px; }

  /* Hero bardziej kompaktowy */
  .hero h2{ font-size: 22px; line-height: 1.25; }
  .hero p{ font-size: 14px; }

  /* Karty usług ciaśniejsze */
  .services .services-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }
  .service{
    padding: 10px;
    max-width: 100%;
  }
  .service .media{ aspect-ratio: 4 / 3; padding: 6px; }
  .service h4{ font-size: 14px; line-height: 1.2; margin: 8px 0; }
  .service .price{ font-size: 13px; }
  .service .btn{ font-size: 13px; padding: 8px 10px; border-radius: 10px; }

  /* Zmniejsz „slot” na darmowe karty, żeby nie pchało layoutu w dół */
  :root{ --card-slot: clamp(180px, 38vw, 260px); }

  /* Zodiaki – mniejsze kafelki, mniej przerw */
  :root{ --z-size: 96px; --z-gap: 8px; }
  .hs-btn{ padding: 10px; }
  .hs-btn img{ width: 32px; height: 32px; }
  .hs-btn span{ font-size: 12px; }
}

@media (max-width: 380px){
  .services .services-grid{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .service h4{ font-size: 13px; }
  .service .btn{ font-size: 12px; padding: 7px 8px; }
  :root{ --z-size: 88px; }
}

/* Nie pozwól obrazkom/sekcjom „rozpychać” kontenera na mobile */
img{ max-width:100%; height:auto; }
.section--card{ overflow: hidden; }



.moon-today {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: .35rem 0 1rem;
  padding: .35rem .6rem;
  border: 1px solid #eee;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  font-weight: 600;
  color: #222; /* 🔹 ciemniejszy tekst */
}

.moon-today .emoji {
  font-size: 1.1rem;
  line-height: 1;
}

.moon-today .date {
  color: #444;      /* 🔹 ciemniejszy szary zamiast opacity */
  font-weight: 500;
}

.moon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .moon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .moon-grid {
    grid-template-columns: 1fr;
  }
}

/* invalid field highlight */
.is-invalid, [aria-invalid="true"] {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 2px rgba(255,107,107,.15);
}
.btn.loading { position: relative; pointer-events: none; opacity: .8; }