@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,500&family=Nunito:wght@400;600;700&display=swap');

/* Salão de Chá Docemendoa — paleta viva: creme, framboesa, menta, amêndoa dourada */
:root{
  --cream:#fff8ef;
  --paper:#ffffff;
  --ink:#3a2330;
  --ink-dim:#7b5f6c;
  --ink-faint:#a68f99;
  --hair:rgba(58,35,48,0.12);
  --gold:#d9a441;
  --raspberry:#e0457b;
  --mint:#2bb3a3;
  --peach:#ff8a5c;
  --lilac:#8e6fd8;
  --hero:#5a1f3d;
  --accent:var(--raspberry);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 8% 12%, rgba(224,69,123,0.10), transparent 32%),
    radial-gradient(circle at 92% 30%, rgba(43,179,163,0.12), transparent 34%),
    radial-gradient(circle at 20% 85%, rgba(255,138,92,0.10), transparent 36%),
    var(--cream);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Nunito', sans-serif;
  min-height:100vh;
  padding-bottom:60px;
}

.wrap{max-width:640px; margin:0 auto; padding:0 18px;}

/* ---------- hero (fundo escuro para o logótipo dourado/branco) ---------- */
.hero{
  background:
    radial-gradient(circle at 20% 0%, rgba(224,69,123,0.55), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(43,179,163,0.45), transparent 55%),
    var(--hero);
  color:#fff;
  text-align:center;
  padding:30px 18px 26px;
}
.hero-logo{ width:170px; max-width:60%; height:auto; display:block; margin:0 auto 6px; }
.hero-eyebrow{ font-size:12px; letter-spacing:0.22em; color:#ffd9a0; font-weight:700; }

/* ---------- barra de setores + idiomas ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,248,239,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.topbar-inner{ max-width:640px; margin:0 auto; padding:12px 18px 8px; }

.subtab-row{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;
}
.subtab-btn{
  --c:var(--raspberry);
  flex:none;
  background:var(--paper); border:2px solid var(--c); color:var(--c);
  font-family:'Nunito', sans-serif; font-weight:700; font-size:14px;
  padding:7px 14px; border-radius:999px; cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.subtab-btn:active{ transform:scale(0.96); }
.subtab-btn.active{ background:var(--c); color:#fff; }

.lang-row{ display:flex; gap:6px; flex-wrap:wrap; }
.lang-btn{
  background:none; border:1px solid var(--hair); color:var(--ink-dim);
  font-family:'Nunito', sans-serif; font-size:11px; font-weight:700; letter-spacing:0.05em;
  padding:4px 9px; border-radius:6px; cursor:pointer;
}
.lang-btn:hover{ border-color:var(--accent); color:var(--ink); }
.lang-btn.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.lang-note{ font-size:11px; color:var(--ink-faint); margin-top:4px; font-style:italic; }

/* ---------- cabeçalho do setor ---------- */
.section-head{ text-align:center; padding:30px 0 4px; }
.section-title{
  font-family:'Playfair Display', serif; font-weight:600; font-size:36px;
  margin:0 0 6px; color:var(--accent);
}
.section-sub{ color:var(--ink-dim); font-size:15px; max-width:420px; margin:0 auto; }

/* ---------- destaques ---------- */
.highlights{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.highlight-card{
  background:linear-gradient(135deg, var(--gold), var(--peach));
  color:#fff; padding:16px 18px; border-radius:16px;
  box-shadow:0 6px 18px rgba(217,164,65,0.28);
}
.highlight-title{ font-family:'Playfair Display', serif; font-size:19px; font-weight:600; margin-bottom:4px; }
.highlight-desc{ font-size:14px; line-height:1.55; }
.highlight-price{ margin-top:8px; font-size:15px; font-weight:700; }

/* ---------- grupos / itens ---------- */
.category{
  margin-top:22px; background:var(--paper); border-radius:18px;
  padding:6px 18px 4px; box-shadow:0 2px 14px rgba(58,35,48,0.06);
  border-top:5px solid var(--accent);
}
.cat-head{ padding:14px 0 4px; }
.cat-title{ font-family:'Playfair Display', serif; font-size:21px; font-weight:600; color:var(--accent); }

.item{ display:block; width:100%; text-align:left; background:none; border:none; font:inherit; color:inherit;
  padding:13px 0; border-bottom:1px dashed var(--hair); }
.item:last-child{ border-bottom:none; }
.item-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  width:100%; text-align:left; background:none; border:none; padding:0; font:inherit; color:inherit; }
.item-expandable .item-top{ cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* calculadora de chá ao kg */
.kg-calc{
  margin-top:10px; padding:10px 12px; border-radius:12px;
  background:color-mix(in srgb, var(--accent) 12%, white);
}
.kg-calc-label{ display:block; font-size:13px; font-weight:800; margin-bottom:6px; }
.kg-calc-row{ display:flex; align-items:center; gap:8px; }
.kg-calc-row input{
  width:96px; border:2px solid color-mix(in srgb, var(--accent) 45%, white); border-radius:10px;
  padding:8px 10px; font:700 16px 'Nunito', sans-serif; color:var(--ink); background:#fff; text-align:right;
}
.kg-calc-row input:focus{ outline:none; border-color:var(--accent); }
.kg-calc-unit{ font-weight:700; color:var(--ink-dim); }
.kg-calc-result{ margin-left:auto; font-size:16px; background:#fff; }
.kg-calc-quick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.kg-calc-quick button{
  border:1px solid color-mix(in srgb, var(--accent) 45%, white); background:#fff; color:var(--ink);
  border-radius:999px; padding:5px 12px; font:700 13px 'Nunito', sans-serif; cursor:pointer;
}
.kg-calc-quick button:active{ background:var(--accent); color:#fff; }
.kg-calc-note{ margin-top:8px; font-size:12px; font-style:italic; color:var(--ink-dim); line-height:1.4; }
.price-from{ font-size:11px; font-weight:600; color:var(--ink-dim); }
.item-main{ flex:1; min-width:0; }
.item-name{ font-size:16px; font-weight:600; line-height:1.35; }
.item-bag{ font-size:13px; margin-left:6px; opacity:0.8; }
.item-original{ font-size:12px; color:var(--ink-faint); font-style:italic; margin-top:2px; }
.item-price{
  font-weight:700; font-size:14px; white-space:nowrap;
  background:color-mix(in srgb, var(--accent) 14%, white); color:var(--ink);
  padding:3px 10px; border-radius:999px;
}
.item-chevron{
  flex:none; width:9px; height:9px; margin:0 4px 0 2px; align-self:center;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translateY(-3px); transition:transform .2s ease;
}
.item.open .item-chevron{ transform:rotate(-135deg) translate(-2px, -1px); }
.item-details{ display:none; padding-top:8px; }
.item.open .item-details{ display:block; animation:reveal .2s ease; }
@keyframes reveal{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.item-desc{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-dim); }
.item-takeaway{
  margin-top:10px; font-size:13px;
  background:color-mix(in srgb, var(--gold) 16%, white); padding:8px 12px; border-radius:10px;
}
.item-takeaway-label{ font-weight:800; margin-bottom:2px; }
.item-takeaway-opt{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:6px 0; }
.item-takeaway-opt + .item-takeaway-opt{ border-top:1px dashed rgba(58,35,48,0.15); }
.takeaway-qty{ font-size:15px; font-weight:600; color:var(--ink); }
.item-takeaway .item-price{ background:#fff; }
.tap-hint{ text-align:center; font-size:12px; color:var(--ink-faint); margin-top:10px; }

.empty-note{
  text-align:center; color:var(--ink-dim); font-style:italic; margin-top:26px;
  background:var(--paper); border-radius:18px; padding:28px 18px;
  border:2px dashed color-mix(in srgb, var(--accent) 45%, white);
}

.footnote{ margin-top:40px; font-size:12px; color:var(--ink-faint); text-align:center; line-height:1.6; }

@media (max-width:420px){
  .section-title{ font-size:30px; }
  .item-name{ font-size:15px; }
}


/* ---------- admin.php ---------- */
.admin-body{ padding:24px 0 60px; }
.admin-wrap{ max-width:1080px; }
.login-box{ max-width:300px; margin:70px auto; text-align:center; }
.login-logo{ background:var(--hero); border-radius:18px; padding:16px; margin-bottom:18px; }
.login-logo img{ width:120px; display:block; margin:0 auto; }
.login-box h1{ font-family:'Playfair Display', serif; font-weight:600; font-size:26px; margin:0 0 18px; }
.login-box form{ display:flex; flex-direction:column; gap:10px; }
.login-box input{ border:2px solid var(--hair); border-radius:12px; padding:12px; font-size:18px; text-align:center; letter-spacing:0.3em; background:var(--paper); }
.login-box button, .admin-form-actions button, .admin-form-actions a{
  background:var(--raspberry); color:#fff; border:none; border-radius:12px; padding:12px 18px;
  font:700 15px 'Nunito', sans-serif; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px;
}
.admin-form-actions a.secondary{ background:none; border:2px solid var(--hair); color:var(--ink-dim); }
.error{ color:#c62f4f; font-size:14px; }
.flash{ background:color-mix(in srgb, var(--mint) 16%, white); border:1px solid var(--mint); border-radius:12px; padding:10px 14px; margin-bottom:16px; font-weight:600; }

.admin-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.admin-head h1{ font-family:'Playfair Display', serif; font-weight:600; font-size:28px; margin:0; }
.admin-head-links{ display:flex; gap:14px; }
.admin-head-links a{ color:var(--ink-dim); font-weight:600; font-size:14px; }

.admin-nav{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; border-bottom:2px solid var(--hair); padding-bottom:10px; }
.admin-nav a{ text-decoration:none; color:var(--ink-dim); font-weight:700; padding:8px 14px; border-radius:10px; }
.admin-nav a.active{ background:var(--ink); color:#fff; }

.tab-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.tab-pills a{ text-decoration:none; border:2px solid var(--c); color:var(--c); border-radius:999px; padding:6px 14px; font-weight:700; background:var(--paper); }
.tab-pills a.active{ background:var(--c); color:#fff; }
.tab-pills a span{ opacity:0.75; font-size:12px; margin-left:4px; }

.admin-columns{ display:flex; gap:24px; align-items:flex-start; }
.admin-form-col, .admin-list-col{ flex:1; min-width:0; }
@media (max-width:820px){ .admin-columns{ flex-direction:column; } .admin-form-col, .admin-list-col{ width:100%; } }

.admin-form{ background:var(--paper); border-radius:18px; padding:18px; box-shadow:0 2px 14px rgba(58,35,48,0.06); }
.admin-form h4{ margin:0 0 14px; font-family:'Playfair Display', serif; font-size:20px; font-weight:600; }
.form-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.form-field{ flex:1; min-width:150px; margin-bottom:12px; }
.form-field.narrow{ flex:0 0 120px; min-width:110px; }
.form-field label{ display:block; font-size:12px; font-weight:700; color:var(--ink-dim); margin-bottom:4px; }
.form-field input[type=text], .form-field select, .form-field textarea{
  width:100%; border:2px solid var(--hair); border-radius:10px; padding:10px; background:#fff;
  font:16px 'Nunito', sans-serif; color:var(--ink);
}
.form-field textarea{ resize:vertical; }
.trans-grid .form-field textarea{ margin-top:6px; }
.form-field input[type=color]{ width:100%; height:44px; border:2px solid var(--hair); border-radius:10px; padding:2px; background:#fff; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--raspberry); }
.check{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; margin:4px 0 12px; }
.check input{ width:20px; height:20px; accent-color:var(--raspberry); }
.field-group-label{ font-weight:800; font-size:14px; margin:10px 0 6px; color:var(--ink); }
.trans-details{ margin:4px 0 12px; }
.trans-details summary{ cursor:pointer; font-weight:700; color:var(--raspberry); margin-bottom:8px; }
.trans-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
@media (max-width:480px){ .trans-grid{ grid-template-columns:1fr; } }
.admin-form-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.admin-note{ font-size:13px; color:var(--ink-dim); line-height:1.6; margin:0 0 14px; }

.admin-cat-heading{ font-family:'Playfair Display', serif; font-size:17px; font-weight:600; color:var(--raspberry); margin:18px 0 4px; }
.admin-cat-heading:first-child{ margin-top:0; }
.admin-cat-heading{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:2px solid color-mix(in srgb, var(--raspberry) 25%, white); padding-bottom:4px; margin-bottom:8px; }
.admin-item-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--paper); border-radius:12px; margin-bottom:6px; flex-wrap:wrap; }
.admin-item-row.is-hidden{ opacity:0.55; }
.admin-item-main{ flex:1; min-width:160px; }
.admin-item-info{ font-weight:600; }
.admin-item-info b{ font-weight:700; color:var(--ink-dim); margin-left:6px; font-size:13px; }
.admin-item-meta{ font-size:12px; color:var(--ink-faint); margin-top:2px; }
.tag-hidden{ color:#c62f4f; font-weight:700; }
.swatch{ width:22px; height:22px; border-radius:50%; flex:none; }
.admin-item-actions{ display:flex; gap:4px; flex-wrap:wrap; }
.admin-item-actions form.inline{ display:inline; margin:0; }
.admin-item-actions a, .admin-item-actions button{
  border:1px solid var(--hair); background:#fff; color:var(--ink-dim); border-radius:8px;
  padding:7px 10px; font:600 13px 'Nunito', sans-serif; cursor:pointer; text-decoration:none; min-height:36px;
  display:inline-flex; align-items:center;
}
.admin-item-actions a:hover, .admin-item-actions button:hover{ border-color:var(--raspberry); color:var(--raspberry); }

.takeaway-row{ display:flex; gap:8px; margin-bottom:6px; }
.takeaway-row input{ flex:1; min-width:0; border:2px solid var(--hair); border-radius:10px; padding:10px; font:16px 'Nunito', sans-serif; background:#fff; color:var(--ink); }
.takeaway-row input + input{ flex:0 0 110px; }
.add-row{ background:none; border:2px dashed var(--hair); border-radius:10px; padding:6px 12px; font:700 13px 'Nunito', sans-serif; color:var(--ink-dim); cursor:pointer; }
