/* =============================================================
   SingMyWish — Shared Styles
   Подключается во всех трёх страницах: index / payment / thankyou
   ============================================================= */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
    --brand:      #8B5CF6;
    --brand-light:#A78BFA;
    --brand-dark: #7C3AED;
    --accent:     #EC4899;
    --yellow:     #FBBF24;
    --green:      #10B981;
    --green-light:#D1FAE5;
    --danger:     #EF4444;
    --bg:         #FAF5FF;
    --white:      #ffffff;
    --text:       #1E1B4B;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --border:     rgba(139,92,246,0.1);
    --radius:     16px;
    --sh:         0 2px 12px rgba(139,92,246,0.07);
    --sel-shadow:  0 0 0 3px rgba(139,92,246,0.14);
    --brand-bg:    rgba(139,92,246,0.08);
    --brand-bg-xs: rgba(139,92,246,0.06);
    --border-soft: rgba(139,92,246,0.12);
    --tcard-bg:    rgba(255,255,255,0.85);
    --card-bg:     rgba(255,255,255,0.7);
    --card-shadow: 0 4px 20px rgba(139,92,246,0.07);
}

/* ── Reset ─────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; outline: 0; }
html { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg); color: var(--text);
    width: 100%; min-height: 100vh;
}
picture, picture img { display: block; }

/* ── Layout wrapper ────────────────────────────────────────── */
.wrapper {
    max-width: 440px; width: 100%; min-height: 100vh;
    margin: 0 auto; display: flex; flex-direction: column;
    position: relative; z-index: 1;
}

/* ── Background — animated blobs (payment / thankyou) ─────── */
.bg-mesh {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.bg-mesh .blob {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: 0.5;
    animation: blobFloat 20s ease-in-out infinite alternate;
}
.bg-mesh .blob-1 { width:300px; height:300px; background:rgba(167,139,250,0.25); top:-10%;  left:-10%; }
.bg-mesh .blob-2 { width:250px; height:250px; background:rgba(236,72,153,0.18);  bottom:10%; right:-5%; animation-delay:-7s; }
.bg-mesh .blob-3 { width:200px; height:200px; background:rgba(16,185,129,0.12);  top:50%;   left:50%;  animation-delay:-12s; }

/* ── Background — static blobs (quiz) ─────────────────────── */
.bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg .b { position: absolute; border-radius: 50%; filter: blur(80px); }
.bg .b1 { width:220px; height:220px; background:rgba(196,171,255,0.5); top:-40px;  right:-50px; }
.bg .b2 { width:200px; height:200px; background:rgba(251,191,217,0.5); bottom:-40px; left:-40px; }
.bg .b3 { width:140px; height:140px; background:rgba(167,139,250,0.15); top:45%; left:30%; }

/* ── Header ─────────────────────────────────────────────────── */
.header {
    padding: 16px 20px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--brand-bg);
    position: relative; z-index: 10;
}

/* ── Logo image ─────────────────────────────────────────────── */
.logo-img { display: block; flex-shrink: 0; }

/* Brand block — payment.html / thankyou.html use .header-brand */
.header-brand {
    display: flex; align-items: center; gap: 10px;
}
.header-info { display: flex; flex-direction: column; }
.header-name {
    font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: -0.3px;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.header-tag {
    font-size: 10px; color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* Brand block — index.html uses .hbrand */
.hbrand { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.hlogo  { width:32px; height:32px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.hname  {
    font-size: 15px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.htag { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

/* ── CTA Button (primary) ───────────────────────────────────── */
.cta, .cta-btn {
    width: 100%; padding: 18px; border-radius: var(--radius); border: none;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff; font-size: 17px; font-weight: 800; cursor: pointer;
    transition: all 0.25s; font-family: inherit; letter-spacing: -0.2px;
    box-shadow: 0 8px 32px rgba(139,92,246,0.4);
    position: relative; overflow: hidden;
    display: block; text-decoration: none; text-align: center;
}
.cta::after, .cta-btn::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
    transform: rotate(45deg) translateX(-100%);
    animation: shimmer 3s ease-in-out infinite;
}
.cta:hover:not(:disabled), .cta-btn:hover {
    transform: translateY(-2px); box-shadow: 0 12px 40px rgba(139,92,246,0.5);
}
.cta:active:not(:disabled), .cta-btn:active { transform: scale(.98); }
.cta:disabled { opacity: .35; box-shadow: none; cursor: default; }

/* Secondary variant */
.cta.sec {
    background: transparent; color: var(--text-muted); box-shadow: none;
    font-weight: 500; font-size: 14px; margin-top: 8px;
    position: static; overflow: visible;
}
.cta.sec::after { display: none; }

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes blobFloat {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(20px,-15px) scale(1.05); }
    100% { transform: translate(-10px,10px) scale(0.98); }
}
@keyframes shimmer {
    0%,100% { transform: rotate(45deg) translateX(-100%); }
    50%      { transform: rotate(45deg) translateX(100%); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Testimonial cards (all pages) ─────────────────────────── */
.tcard     { background: var(--tcard-bg); border-radius: var(--radius); padding: 14px 16px; border: 1px solid var(--border); box-shadow: var(--sh); }
.tcard-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tavatar   { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--border-soft); }
.tavatar img { width: 100%; height: 100%; object-fit: cover; }
.tname     { font-size: 13px; font-weight: 700; }
.tstars    { color: var(--yellow); font-size: 11px; letter-spacing: 1px; margin-top: 1px; }
.ttext     { font-size: 12px; color: var(--text-secondary); line-height: 1.6; font-style: italic; }

/* ── Fade-in helpers ────────────────────────────────────────── */
.fi     { animation: fadeUp .4s ease both; }
.fade1  { animation: fadeUp .4s ease       both; }
.fade2  { animation: fadeUp .4s ease  .1s  both; }
.fade3  { animation: fadeUp .4s ease  .2s  both; }
.fade4  { animation: fadeUp .4s ease  .3s  both; }
.fade5  { animation: fadeUp .4s ease  .4s  both; }