/* wt_app_theme.css – jádro stylů certifikační aplikace (převzato z app.html) pro stránky voucher.php a pay.php */
:root{
    --wine:#781D26; --wine-2:#9C2530; --wine-deep:#4A1119;
    --parchment:#FAFAF8; --card:#FFFFFF; --gold:#C4A66B; --gold-light:#DCC79A;
    --gold-text:#8A6B34;
    --sage:#2F7D46; --ink:#2C2C2C; --line: rgba(44,32,24,0.13);
    --shadow-sm: 0 2px 8px rgba(44,26,20,0.06);
    --shadow-md: 0 10px 24px rgba(44,26,20,0.09);
    --shadow-lg: 0 22px 50px rgba(44,26,20,0.13);
    --radius-lg:24px; --radius-md:16px; --radius-sm:10px; --radius-pill:999px;
  }
*{box-sizing:border-box;}
body{ margin:0; min-height:100vh; color:var(--ink); font-family:'Work Sans', sans-serif;
        display:flex; justify-content:center; padding:56px 20px;
        background:
          radial-gradient(1100px 550px at 12% -12%, rgba(196,166,107,0.14), transparent 58%),
          radial-gradient(900px 650px at 105% 0%, rgba(120,29,38,0.06), transparent 55%),
          var(--parchment); }
.frame{ width:100%; max-width:740px; }
.eyebrow{ font-family:'Work Sans', sans-serif; font-weight:700; text-transform:uppercase;
    letter-spacing:0.09em; color:var(--gold-text); font-size:12.5px; margin:0 0 10px 0; }
h1{ font-family:'Fraunces', serif; font-weight:700; font-size:34px; line-height:1.12; margin:0 0 8px 0;
    color:var(--wine); letter-spacing:-0.01em; }
.subtitle{ font-size:15px; opacity:0.9; margin:0 0 8px 0; max-width:60ch; line-height:1.6; }
.intro-note{ font-size:13px; opacity:0.75; margin:0 0 24px 0; max-width:60ch; }
.panel{ background:var(--card); border:none; border-radius:var(--radius-lg); padding:44px 40px;
    position:relative; overflow:hidden; box-shadow:var(--shadow-lg);
    animation:panelIn .45s cubic-bezier(.2,.7,.3,1) both; }
.panel::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px;
    background:linear-gradient(90deg, var(--gold), var(--wine) 55%, var(--wine-2)); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.hidden{ display:none; }
.node-topics{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 16px 0; padding:0; }
.node-topics li{ font-size:11px; font-weight:600; background:rgba(196,166,107,0.18); color:var(--gold-text);
    border:none; border-radius:var(--radius-pill); padding:6px 13px; opacity:0.95; }
button{ font-family:'Work Sans', sans-serif; }
button.primary{ font-weight:700; font-size:14.5px; background:linear-gradient(135deg, var(--wine), var(--wine-2));
    color:#fff; border:none; padding:14px 28px; border-radius:var(--radius-pill); cursor:pointer; letter-spacing:0.01em;
    box-shadow:0 8px 18px rgba(120,29,38,0.22); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
button.primary:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 11px 22px rgba(120,29,38,0.28); filter:brightness(1.04); }
button.primary:active:not(:disabled){ transform:translateY(0); }
button.primary:disabled{ opacity:0.35; cursor:not-allowed; box-shadow:none; }
button.ghost{ font-weight:600; font-size:13.5px; background:transparent; color:var(--wine); border:1.5px solid var(--line);
    padding:12px 22px; border-radius:var(--radius-pill); cursor:pointer; transition:border-color .18s ease, background .18s ease, transform .18s ease; }
button.ghost:hover{ border-color:var(--wine); background:rgba(120,29,38,0.04); transform:translateY(-1px); }
button.small{ padding:9px 16px; font-size:12.5px; }
button.danger{ color:#B3372E; border-color:rgba(179,55,46,0.45); }
button.danger:hover{ background:rgba(179,55,46,0.08); border-color:#B3372E; }
.info-box{ margin-top:10px; padding:22px 24px; background:linear-gradient(165deg, rgba(196,166,107,0.11), rgba(120,29,38,0.02));
    border:1px solid var(--line); border-radius:var(--radius-md); }
.info-box h3{ font-family:'Fraunces', serif; font-weight:700; font-size:15.5px; margin:0 0 10px 0; color:var(--wine); }
.info-box ul{ margin:0; padding-left:18px; font-size:13.5px; line-height:1.75; }
.unlock-box{ margin-top:28px; padding:22px 24px; border-top:none; background:rgba(120,29,38,0.03); border-radius:var(--radius-md); }
.unlock-box label{ font-size:13px; font-weight:600; margin-bottom:8px; display:block; }
.unlock-row{ display:flex; gap:10px; flex-wrap:wrap; }
input[type=text], input[type=email], input[type=tel]{ padding:13px 15px; border:1.5px solid var(--line);
    border-radius:var(--radius-sm); font-size:15px; background:rgba(20,12,8,0.03); color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease; }
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus{ outline:none; border-color:var(--wine);
    box-shadow:0 0 0 4px rgba(120,29,38,0.10); }
.unlock-row input{ flex:1; min-width:180px; margin-bottom:0; }
.unlock-msg{ font-size:13px; margin-top:10px; font-weight:600; }
.unlock-msg.ok{ color:var(--sage); }
.unlock-msg.err{ color:var(--wine); }
label{ display:block; font-size:13px; font-weight:600; margin-bottom:7px; }
.note{ font-size:13px; opacity:0.75; margin-top:16px; line-height:1.6; }
.lang-switch button{ font-family:'Work Sans', sans-serif; font-size:12px; font-weight:700; background:transparent;
    border:1.5px solid var(--line); color:var(--ink); opacity:0.6; padding:6px 14px; border-radius:var(--radius-pill);
    cursor:pointer; transition:all .15s ease; }
.lang-switch button.active{ opacity:1; border-color:transparent; color:#fff;
    background:linear-gradient(135deg, var(--wine), var(--wine-2)); }
.wt-brand-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.wt-brand{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wt-brand-icon{ flex:0 0 auto; display:block; width:32px; height:32px; }
.wt-brand-mark{ font-family:'Work Sans', sans-serif; font-weight:800; font-size:26px; letter-spacing:-0.01em;
    color:var(--ink); }
.wt-brand-tag{ font-family:'Work Sans', sans-serif; font-weight:600; font-size:11.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--ink); opacity:0.7; }
.shop-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.shop-head h2{ font-family:'Fraunces', serif; font-weight:700; font-size:21px; color:var(--wine); margin:0; }
.shop-sub{ font-size:13px; opacity:0.72; margin:0 0 18px 0; }
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; }
.shop-group-heading{ grid-column:1 / -1; font-family:'Fraunces', serif; font-weight:700; font-size:15px;
    color:var(--wine); margin:14px 0 0 0; letter-spacing:0.02em; }
.shop-group-heading:first-child{ margin-top:0; }
.shop-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:16px 15px 15px 15px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
    transition:transform .18s ease, box-shadow .18s ease; }
.shop-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.shop-card-level{ font-size:10.5px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
    color:var(--gold-text); margin:0 0 6px 0; }
.shop-card-title{ font-family:'Fraunces', serif; font-weight:700; font-size:14.5px; margin:0 0 10px 0;
    line-height:1.3; min-height:2.6em; }
.shop-card-price{ font-family:'Fraunces', serif; font-weight:700; font-size:21px; color:var(--wine); margin:0 0 12px 0; }
.shop-card.free .shop-card-price{ color:var(--sage); }
.shop-card-perks{ list-style:none; margin:0 0 14px 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.shop-card-perks li{ font-size:11px; line-height:1.35; color:var(--ink); opacity:0.78; display:flex; align-items:flex-start; gap:6px; }
.shop-card-perks li::before{ content:"✓"; color:var(--gold-text); font-weight:700; flex:0 0 auto; }
.shop-card button{ width:100%; margin-top:auto; }
.shop-card.owned{ opacity:0.82; }
.shop-card-owned-tag{ font-size:11.5px; font-weight:700; color:var(--sage); display:flex; align-items:center;
    gap:5px; margin-top:auto; padding:10px 0 2px 0; }
.shop-card-owned-tag svg{ width:13px; height:13px; flex:0 0 auto; }
@media (max-width: 560px){
    .wt-topbar{ flex-wrap:wrap; }
    .wt-brand-row{ gap:10px; }
    .wt-brand-mark{ font-size:20px; }
  }
@media (max-width: 560px){
    .shop-section{ padding:20px 16px 18px 16px; }
    .shop-grid{ grid-template-columns:repeat(2, 1fr); }
    .shop-bundle{ padding:20px 16px 16px 16px; }
    .shop-bundle button{ width:100%; }
  }