/* ============================================
   Twórcy-opinii.pl - Design system + utilities
   ============================================
   Tailwind via CDN. Tutaj tylko: design tokens,
   keyframes, micro-interactions, niestandardowe
   komponenty których nie da się czysto w Tailwindzie.
*/

:root {
    /* Brand */
    --c-brand-50:  #E8F7EF;
    --c-brand-100: #C9EED7;
    --c-brand-200: #92DBAA;
    --c-brand-300: #59C580;
    --c-brand-400: #2EB565;
    --c-brand-500: #22A958;   /* primary */
    --c-brand-600: #1A8C46;
    --c-brand-700: #156F38;
    --c-brand-800: #11572D;

    /* Accent / orange */
    --c-accent-50:  #FFF6E5;
    --c-accent-100: #FFE4B0;
    --c-accent-300: #FFB100;
    --c-accent-500: #FF8A00;
    --c-accent-600: #E66E00;

    /* Google palette (subtle echoes) */
    --c-g-blue:   #4285F4;
    --c-g-green:  #34A853;
    --c-g-yellow: #FBBC05;
    --c-g-red:    #EA4335;

    /* Neutrals */
    --c-ink:   #0F172A;
    --c-ink-2: #1E293B;
    --c-muted: #475569;
    --c-line:  #E2E8F0;
    --c-bg:    #FFFFFF;
    --c-bg-2:  #F8FAFC;
    --c-bg-3:  #F1F5F9;

    /* Effects */
    --r-sm: 8px;
    --r:    14px;
    --r-lg: 22px;
    --r-xl: 28px;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --shadow:    0 4px 12px rgba(15,23,42,.08);
    --shadow-lg: 0 20px 40px -12px rgba(15,23,42,.18);
    --shadow-brand: 0 8px 24px -6px rgba(34,169,88,.35);
}

html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

/* ============ Buttons ============ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; cursor:pointer; border:none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background:var(--c-brand-500); color:#fff; padding:.85rem 1.5rem; border-radius:var(--r); box-shadow:var(--shadow-brand); }
.btn-primary:hover { background:var(--c-brand-600); box-shadow: 0 12px 28px -6px rgba(34,169,88,.45); }
.btn-accent { background: linear-gradient(135deg, #FFB100, #FF8A00); color:#1a1a1a; padding:.85rem 1.5rem; border-radius:var(--r); box-shadow: 0 8px 24px -6px rgba(255,138,0,.45); }
.btn-accent:hover { filter: brightness(1.05); }
.btn-ghost { background:transparent; color:var(--c-ink); padding:.65rem 1rem; border-radius:var(--r); }
.btn-outline { background:#fff; color:var(--c-ink); padding:.8rem 1.4rem; border:1.5px solid var(--c-line); border-radius:var(--r); }
.btn-outline:hover { border-color: var(--c-brand-400); color: var(--c-brand-600); }
.btn-lg { font-size: 1.05rem; padding: 1rem 1.7rem; border-radius: var(--r-lg); }

/* ============ Cards ============ */
.card { background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:1.5rem; box-shadow:var(--shadow-sm); }
.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* ============ Phone notification animation ============ */
.phone-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 9/19;
    background: linear-gradient(180deg, #0F172A, #1E293B);
    border-radius: 36px;
    padding: 14px;
    box-shadow: 0 30px 60px -20px rgba(15,23,42,.45), 0 0 0 4px #0a0f1c inset;
    margin: 0 auto;
    overflow: hidden;
    flex-shrink: 0;
}
/* On small screens, cap phone height so it fits comfortably in viewport */
@media (max-width: 768px) {
    .phone-frame {
        max-width: 260px;
        aspect-ratio: 9/16;
    }
}
.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #34A853 0%, #4285F4 100%);
    border-radius: 22px;
    position: relative;
    overflow: hidden;
}
.phone-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 22px;
    background: #0a0f1c;
    border-radius: 20px;
    z-index: 5;
}

/* ====== Notification stack animation ====== */
.notif-stack {
    position: absolute;
    top: 50px;
    left: 8px;
    right: 8px;
    bottom: 16px;
}
.notif {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
    transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
    will-change: transform, opacity;
}
.notif[data-slot="enter"] { transform: translateY(-60px); opacity: 0; }
.notif[data-slot="0"]     { transform: translateY(0)             scale(1);   opacity: 1;   z-index: 7; }
.notif[data-slot="1"]     { transform: translateY(70px)          scale(.96); opacity: .92; z-index: 6; }
.notif[data-slot="2"]     { transform: translateY(135px)         scale(.92); opacity: .78; z-index: 5; }
.notif[data-slot="3"]     { transform: translateY(195px)         scale(.88); opacity: .60; z-index: 4; }
.notif[data-slot="4"]     { transform: translateY(250px)         scale(.84); opacity: .42; z-index: 3; }
.notif[data-slot="5"]     { transform: translateY(300px)         scale(.80); opacity: .25; z-index: 2; }
.notif[data-slot="exit"]  { transform: translateY(360px)         scale(.74); opacity: 0;   z-index: 1; }
.notif .ic {
    flex: 0 0 32px;
    height: 32px;
    background: linear-gradient(135deg, #34A853, #1A8C46);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}
.notif .meta { flex: 1; min-width: 0; }
.notif .title { font-size: .78rem; font-weight: 700; color:#0F172A; }
.notif .body  { font-size: .72rem; color:#475569; line-height:1.35; margin-top: 2px; }
.notif .time  { font-size: .65rem; color:#94A3B8; }

/* ============ Stars ============ */
.stars { display:inline-flex; gap:2px; }
.stars svg { width: 18px; height: 18px; fill: #FBBC05; }

/* ============ Trust ribbon ============ */
.trust-ticker {
    display:flex; gap:3rem;
    animation: scroll-left 35s linear infinite;
    white-space: nowrap;
    width: max-content;
}
@keyframes scroll-left { 0% {transform: translateX(0)} 100% {transform: translateX(-50%)} }

/* ============ Pricing slider ============ */
.pricing-card {
    border: 2px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 1.3rem 1.1rem;
    background: #fff;
    cursor: pointer;
    transition: all .15s ease;
    position: relative;
}
.pricing-card:hover { border-color: var(--c-brand-300); }
.pricing-card.is-selected {
    border-color: var(--c-brand-500);
    background: linear-gradient(180deg, #fff, #f4fbf7);
    box-shadow: var(--shadow-brand);
}
.pricing-card.popular::before {
    content: 'NAJPOPULARNIEJSZY';
    position: absolute; top:-12px; left:50%; transform:translateX(-50%);
    background: linear-gradient(135deg, #FFB100, #FF8A00);
    color:#1a1a1a; font-size:.6rem; font-weight:800; letter-spacing:.08em;
    padding:.25rem .55rem; border-radius:999px; box-shadow:0 4px 10px rgba(255,138,0,.4);
}

/* ============ Section helpers ============ */
.section { padding: 4rem 0; }
@media (min-width: 768px) { .section { padding: 6rem 0; } }
.eyebrow { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .75rem; background:var(--c-brand-50); color:var(--c-brand-700); font-size:.78rem; font-weight:700; border-radius:999px; letter-spacing:.02em; }
.eyebrow-accent { background:var(--c-accent-50); color:#9A4400; }

/* ============ Toast / micro ============ */
.fade-up { animation: fade-up .6s ease both; }
@keyframes fade-up { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0)} }
.pulse-dot { width:8px; height:8px; min-width:8px; min-height:8px; aspect-ratio:1; border-radius:50%; background:#22A958; box-shadow: 0 0 0 0 rgba(34,169,88,.6); animation: pulse 1.8s infinite; flex:none; display:inline-block; }
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,169,88,.6); }
    70%  { box-shadow: 0 0 0 14px rgba(34,169,88,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,169,88,0); }
}

/* ============ Form ============ */
.input {
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r);
    padding: .85rem 1rem;
    font-size: 1rem;
    color: var(--c-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus { outline: none; border-color: var(--c-brand-400); box-shadow: 0 0 0 4px rgba(34,169,88,.15); }

/* Custom select arrow indicator */
select.input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2322A958' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px;
    padding-right: 2.5rem;
    cursor: pointer;
    border-color: var(--c-brand-400);
}
select.input:hover { border-color: var(--c-brand-500); }
select.input:focus { border-color: var(--c-brand-500); box-shadow: 0 0 0 4px rgba(34,169,88,.18); }

/* Green accent for "własne teksty" - normal neutral, brand green only when checked */
.option-blue {
    border-color: var(--c-line);
    background: #fff;
}
.option-blue:hover { border-color: var(--c-brand-300); background: rgba(34,169,88,.04); }
.option-blue:has(:checked) {
    border-color: var(--c-brand-500);
    background: rgba(34, 169, 88, .08);
}
.option-blue input[type="checkbox"] { accent-color: #22A958 !important; }
.option-blue:has(:checked) .surcharge { color: var(--c-brand-700) !important; }
.option-blue .surcharge { color: var(--c-brand-600); }
/* ========= App checkbox: explicit class .cbx ========= */
input.cbx[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    border: 2px solid #22A958 !important;
    border-radius: 0 !important;
    background: #fff !important;
    cursor: pointer !important;
    position: relative !important;
    transition: background .15s ease !important;
    flex: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
input.cbx[type="checkbox"]:checked {
    background: #22A958 !important;
    border-color: #22A958 !important;
}
input.cbx[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 2px !important;
    width: 6px !important;
    height: 11px !important;
    border: solid #fff !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: rotate(45deg) !important;
    background: transparent !important;
}
/* Green variant: .cbx.cbx-green = "Własne teksty" */
input.cbx.cbx-green[type="checkbox"] {
    border-color: #22A958 !important;
}
input.cbx.cbx-green[type="checkbox"]:checked {
    background: #22A958 !important;
    border-color: #22A958 !important;
}

/* ========= App checkboxes — robust pattern =========
   The real <input> is visually hidden; a sibling <span class="checkbox-fake">
   draws the box + checkmark. Pseudo-elements on a real <span> render on every
   browser/platform, unlike ::after on a replaced <input> (iOS Safari & others
   drop it and fall back to the native widget — that was the reported bug).
   These exact rules are mirrored as critical CSS in layouts/main.php <head>, so
   the checkout never shows a native checkbox even if this cached file is briefly
   stale. The legacy `.cbx` rules above are kept only as a fallback for any
   stale-cached HTML that still ships the old markup. */
input.checkbox-real {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}
.checkbox-fake {
    flex: none !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #22A958 !important;
    border-radius: 0 !important;
    background: #fff !important;
    position: relative !important;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
input.checkbox-real:checked + .checkbox-fake {
    background: #22A958 !important;
    border-color: #22A958 !important;
}
input.checkbox-real:checked + .checkbox-fake::after {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 2px !important;
    width: 6px !important;
    height: 11px !important;
    border: solid #fff !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: rotate(45deg) !important;
    background: transparent !important;
}
input.checkbox-real:focus-visible + .checkbox-fake {
    outline: 2px solid #22A958;
    outline-offset: 2px;
}
/* green variant — "Własne teksty opinii" on /opinie-google */
input.checkbox-real.cbx-green + .checkbox-fake { border-color: #22A958 !important; }
input.checkbox-real.cbx-green:checked + .checkbox-fake {
    background: #22A958 !important;
    border-color: #22A958 !important;
}

/* ====== UGC actor carousel ====== */
.actor-carousel {
    position: relative;
    overflow: hidden;
    padding: 1rem 0;
}
.actor-track {
    display: flex;
    gap: 1rem;
    animation: actor-scroll 40s linear infinite;
    width: max-content;
}
.actor-card {
    position: relative;
    width: 260px;
    aspect-ratio: 3 / 4;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    flex-shrink: 0;
    background: #0F172A;
    isolation: isolate;
}
.actor-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}
/* Bottom gradient for readability of name/tag */
.actor-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(15,23,42,.85) 100%);
    pointer-events: none;
    z-index: 1;
}
.actor-card .meta, .actor-card .live { z-index: 2; }

/* ====== Case study slider (manual nav) ====== */
.case-slider { position: relative; }
.case-slider .slides {
    display: flex;
    overflow: hidden;
    scroll-behavior: smooth;
    border-radius: var(--r-xl);
}
.case-slide {
    flex: 0 0 100%;
    min-width: 0;
}
.case-arrow {
    position: absolute; top: 45%;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--c-line);
    color: var(--c-ink);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease;
    z-index: 5;
}
.case-arrow:hover { border-color: var(--c-brand-400); transform: scale(1.08); }
.case-arrow.prev { left: -22px; }
.case-arrow.next { right: -22px; }
.case-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.5rem;
}
.case-dot {
    width: 32px; height: 4px;
    background: var(--c-line);
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    padding: 0;
}
.case-dot.is-active { background: var(--c-brand-500); transform: scaleY(1.5); }
@media (max-width: 768px) {
    .case-arrow.prev { left: 6px; }
    .case-arrow.next { right: 6px; }
}
.actor-card .meta {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: .9rem;
    background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
    color: #fff;
}
.actor-card .meta .nm { font-weight: 700; font-size: .9rem; }
.actor-card .meta .tag { font-size: .7rem; opacity: .85; }
.actor-card .live {
    position: absolute; top: 10px; right: 10px;
    background: #EA4335; color: #fff;
    font-size: 10px; font-weight: 700;
    letter-spacing: .1em;
    padding: 3px 8px; border-radius: 999px;
    display: flex; align-items: center; gap: 4px;
}
.actor-card .live::before { content:''; width:6px; height:6px; background:#fff; border-radius:50%; animation:pulse 1.5s infinite; }
@keyframes actor-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.actor-carousel:hover .actor-track { animation-play-state: paused; }
.input.is-invalid { border-color: var(--c-g-red); box-shadow: 0 0 0 4px rgba(234,67,53,.12); }
.label { font-size: .85rem; font-weight: 600; color: var(--c-ink-2); margin-bottom: .35rem; display: block; }
.help { font-size: .8rem; color: var(--c-muted); margin-top: .35rem; }
.error { color: var(--c-g-red); font-size: .82rem; margin-top: .3rem; }

/* ============ Google-style review card ============ */
.gr-card { background:#fff; border:1px solid var(--c-line); border-radius: var(--r-lg); padding:1.2rem; box-shadow: var(--shadow-sm); }
.gr-avatar { width:40px; height:40px; border-radius:50%; background: linear-gradient(135deg,#4285F4,#34A853); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.gr-name { font-weight:700; color: var(--c-ink); font-size:.95rem; }
.gr-meta { color: var(--c-muted); font-size:.78rem; }

/* ============ Modal ============ */
.modal-backdrop { position:fixed; inset:0; background: rgba(15,23,42,.55); z-index:50; display:flex; align-items:center; justify-content:center; padding: 1rem; }
.modal { background:#fff; border-radius: var(--r-xl); padding: 1.5rem; max-width: 480px; width:100%; box-shadow: var(--shadow-lg); }

/* ============ FAQ accordion ============ */
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-q { width:100%; text-align:left; padding: 1.1rem 0; font-weight: 600; color: var(--c-ink); display:flex; justify-content:space-between; gap:1rem; align-items:center; background:transparent; border:none; cursor:pointer; }
.faq-a { color: var(--c-muted); padding-bottom: 1rem; line-height: 1.6; display: none; }
.faq-item.is-open .faq-a { display: block; animation: fade-up .25s ease both; }
.faq-toggle { flex-shrink: 0; transition: transform .2s; }
.faq-item.is-open .faq-toggle { transform: rotate(45deg); }

/* ============ Loader ============ */
.spin {
    width: 22px; height: 22px;
    border: 3px solid rgba(255,255,255,.35);
    border-top-color: #fff; border-radius: 50%;
    animation: rot 1s linear infinite;
}
@keyframes rot { to { transform: rotate(360deg); } }

/* ============ Header sticky ============ */
header.sticky-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--c-line);
}

/* ============ Float anim ============ */
.float-y { animation: float-y 6s ease-in-out infinite; }
@keyframes float-y { 0%,100% {transform: translateY(0)} 50% {transform: translateY(-12px)} }