/* ===========================
   ORDER PAGE (style like info.html)
   Підключення в order.html:
   <link rel="stylesheet" href="styles.css" />
   <link rel="stylesheet" href="order.css" />
=========================== */

:root{
  --bg0:#07070b;
  --bg1:#0b0b10;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.035);
  --strokeSoft:rgba(255,255,255,.08);
  --text:#f3f3f6;
  --muted:rgba(243,243,246,.72);
  --red:#e0182d;
  --redGlow:rgba(224,24,45,.22);
  --shadow: 0 18px 70px rgba(0,0,0,.55);
  --r:22px;
}

*{box-sizing:border-box}

/* page background */
body.order{
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(224,24,45,.18), transparent 55%),
    radial-gradient(900px 520px at 80% 30%, rgba(224,24,45,.10), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  color: var(--text);
  overflow-x:hidden;
}

/* ---------- HEADER (center like you want) ---------- */
body.order .pagehead__inner{
  display:grid;
  grid-template-columns: max-content 1fr max-content;
  align-items:center;
  gap:16px;
}

body.order .pagehead__title{
  justify-self:center;
  text-align:center;
}

body.order .pagehead__title h1{
  margin: 2px 0 6px;
  font-size: 1.6rem;
  line-height: 1.15;
}

body.order .pagehead__title p{
  margin:0;
  max-width: 860px;
}

body.order .pagehead__spacer{
  width: clamp(120px, 14vw, 180px); /* makes title truly centered against back button */
}

/* small screens: stack */
@media (max-width: 720px){
  body.order .pagehead__inner{
    grid-template-columns: 1fr;
    justify-items:start;
  }
  body.order .pagehead__title{
    justify-self:start;
    text-align:left;
    margin-top:10px;
  }
  body.order .pagehead__spacer{display:none;}
}

/* text CASTRO in red */
.brand-red{ color: var(--red); }

/* badges row under title */
.orderHead__badgeRow{
  margin-top: 10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.orderBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(224,24,45,.12);
  border:1px solid rgba(224,24,45,.35);
  font-weight:900;
  font-size:.92rem;
}

/* ---------- MAIN GRID ---------- */
.orderGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  margin-top: 16px;
}
@media (max-width: 980px){
  .orderGrid{ grid-template-columns: 1fr; }
}

/* ---------- CARDS ---------- */
.card{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--strokeSoft);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hd{
  padding:14px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.hd__title{ font-weight:1000; }

.content{ padding:14px; }

.muted{ color:var(--muted); }
.small{ font-size:.88rem; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

/* form rows */
.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 620px){ .row{ grid-template-columns: 1fr; } }

label{ display:block; font-weight:900; margin:0 0 6px; }

.inp, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
  font-weight:700;
}
textarea{ min-height:90px; resize:vertical; }

.hint{
  margin:6px 0 0;
  font-size:.85rem;
  color:rgba(243,243,246,.62);
  font-weight:700;
}

/* IMPORTANT: use .obox instead of .section to avoid conflict with styles.css */
.obox{
  padding:12px;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  margin-top:10px;
}

/* categories */
.cats{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-weight:900;
  transition:.18s;
}
.chip:hover{ transform:translateY(-1px); }
.chip.active{
  border-color: rgba(224,24,45,.55);
  background: rgba(224,24,45,.12);
  box-shadow: 0 10px 28px rgba(224,24,45,.10);
}

/* items */
.items{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width: 980px){ .items{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .items{ grid-template-columns: 1fr; } }

.item{
  cursor:pointer; user-select:none;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  overflow:hidden;
  transition:.18s;
  min-height:164px;
  display:flex;
  flex-direction:column;
}
.item:hover{ transform:translateY(-2px); }
.item.active{
  border-color: rgba(224,24,45,.55);
  box-shadow: 0 16px 34px rgba(224,24,45,.14);
  background: rgba(224,24,45,.08);
}
.thumb{
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:10px;
}
.thumb img{
  max-height:64px;
  max-width:100%;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.5));
}
.itm-body{ padding:10px 10px 12px; display:flex; flex-direction:column; gap:6px; }
.itm-title{ font-weight:1000; }
.price{ font-weight:1000; color:#fff; }
.price small{ color:rgba(243,243,246,.7); font-weight:900; }

/* qty */
.qty-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}
@media (max-width: 520px){ .qty-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.qty{
  cursor:pointer; user-select:none;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding:10px 10px;
  text-align:center;
  font-weight:1000;
  transition:.18s;
  line-height:1.15;
}
.qty:hover{ transform:translateY(-1px); }
.qty.active{
  border-color: rgba(224,24,45,.55);
  background: rgba(224,24,45,.12);
  box-shadow: 0 10px 26px rgba(224,24,45,.12);
}
.qty .d{ display:block; font-size:.85rem; color:rgba(243,243,246,.72); font-weight:900; margin-top:4px; }

/* receipt */
.receipt{ display:flex; flex-direction:column; gap:10px; }
.line{
  display:flex; justify-content:space-between; gap:10px;
  font-weight:900;
  color:rgba(243,243,246,.9);
}
.line span:last-child{ font-weight:1000; }
.sep{ height:1px; background:rgba(255,255,255,.10); margin:2px 0; }

.total{
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(224,24,45,.40);
  background: rgba(224,24,45,.10);
  box-shadow: 0 14px 40px rgba(224,24,45,.10);
}
.total .line{ font-size:1.1rem; }

.btn{
  cursor:pointer;
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color:var(--text);
  font-weight:1000;
  transition:.18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn.primary{
  background: linear-gradient(180deg, rgba(224,24,45,.95), rgba(224,24,45,.70));
  border-color: rgba(224,24,45,.65);
  box-shadow: 0 18px 45px rgba(224,24,45,.22);
}
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.status{
  margin-top:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  font-weight:900;
  color:rgba(243,243,246,.85);
  white-space:pre-wrap;
}

/* ---------- BADGES ALIGN (title centered, badges left) ---------- */
body.order .pagehead__title{
  /* keep title block centered between back and spacer */
  justify-self: center;
  width: min(900px, 100%);   /* ✅ gives badge row real width */
  text-align: center;
}

body.order .orderHead__badgeRow{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start; /* ✅ left */
  width: 100%;
}

/* ---------- HERO LOGO (small) ---------- */
body.order .pagehead__title h1{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

body.order .heroLogo{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  object-fit: cover;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.5));
}

@media (max-width: 720px){
  body.order .pagehead__title{
    width: 100%;
    text-align: left;
  }
  body.order .pagehead__title h1{
    justify-content: flex-start;
  }
}

/* ===============================
   CENTER BADGES (AUTO-CHECK ROW)
   =============================== */

.orderHead__badgeRow{
  width: 100%;
  display: flex;
  justify-content: center !important; /* ← головне */
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

/* про всяк випадок — щоб parent не ламав */
.pagehead__title{
  width: 100%;
  text-align: center;
}

.orderGrid{ align-items: start; }

html, body { height: 100%; }

body.order{
  min-height: 100vh;               /* щоб завжди тягнулось на екран */
  background-color: #07070b;        /* однаковий низ */
  background-attachment: fixed;
}

body.order{
  padding-bottom: 40px;
}

/* ===== SPARKS LAYER ===== */
.sparks{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  background:
    radial-gradient(2px 2px at 10% 80%, rgba(255,210,130,.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 25% 90%, rgba(255,165,90,.75), transparent 60%),
    radial-gradient(2px 2px at 40% 85%, rgba(255,130,90,.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 55% 92%, rgba(255,210,130,.65), transparent 60%),
    radial-gradient(2px 2px at 70% 88%, rgba(255,160,90,.70), transparent 60%),
    radial-gradient(1.4px 1.4px at 85% 95%, rgba(255,210,130,.55), transparent 60%);
  filter: blur(.2px);
  animation: sparksFloat 9s linear infinite;
  mix-blend-mode: screen;
}

/* щоб контент був поверх */
body.order .pagehead,
body.order main,
body.order .container{
  position: relative;
  z-index: 1;
}

@keyframes sparksFloat{
  from{ transform: translateY(0); }
  to{ transform: translateY(-120px); }
}

/* повага до людей, у кого вимкнені анімації */
@media (prefers-reduced-motion: reduce){
  .sparks{ animation: none; opacity:.25; }
}

body.order .pagehead{
  position: relative;
  overflow: hidden;
}

body.order .pagehead::after{
  content:"";
  position:absolute;
  inset:-120px -80px auto -80px;
  height: 320px;
  background: radial-gradient(closest-side, rgba(224,24,45,.22), transparent 70%);
  filter: blur(8px);
  animation: glowPulse 4.2s ease-in-out infinite;
  pointer-events:none;
}

@keyframes glowPulse{
  0%,100%{ transform: scale(1); opacity:.55; }
  50%{ transform: scale(1.08); opacity:.8; }
}

@media (prefers-reduced-motion: reduce){
  body.order .pagehead::after{ animation:none; }
}

/* кнопки/чіпи вже мають hover — зробимо плавніше */
.btn, .chip, .item, .qty{
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* shine на item */
.item{
  position: relative;
}
.item::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 45%, transparent 70%);
  transform: translateX(-120%);
  opacity: 0;
  transition: transform .6s ease, opacity .6s ease;
  pointer-events:none;
}
.item:hover::before{
  transform: translateX(120%);
  opacity: 1;
}