/* OrderHub Kiirtellimus · style.css v3.0.0 */

:root {
  --oh-bg:       #FAF7F2;
  --oh-card:     #FFFFFF;
  --oh-border:   #E8DFD0;
  --oh-brown:    #3D2B1A;
  --oh-muted:    #9A8570;
  --oh-warm:     #7A6248;
  --oh-accent:   #8B5E3C;
  --oh-green:    #4A7C59;
  --oh-amber:    #B8813A;
  --oh-infobar:  #F2EDE4;
  --oh-pre-bg:   #EDD5B0;
  --oh-pre-txt:  #7A4F1A;
  --oh-kr-bg:    #FFFBF4;
  --oh-kr-border:#E8CFA0;
  --oh-kr-prev:  #F5E8CC;
  --oh-sticky:   #3D2B1A;
  --oh-r: 10px;
}

.oh-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 0 100px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--oh-brown);
  background: var(--oh-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.oh-header {
  text-align: center;
  padding: 24px 16px 14px;
  border-bottom: 1px solid var(--oh-border);
  background: var(--oh-bg);
}
.oh-brand {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oh-muted);
  margin-bottom: 4px;
}
.oh-title {
  font-size: 26px;
  font-weight: 600;
  color: var(--oh-brown);
  margin-bottom: 8px;
}
.oh-badge {
  display: inline-block;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 500;
}
.oh-badge--green  { background: var(--oh-green);  color: #E8F5EE; }
.oh-badge--closed { background: #888; color: #fff; }
.oh-badge--warn   { background: var(--oh-amber); color: #fff; }

/* ── Infobar ─────────────────────────────────────────────────────────────── */
.oh-infobar {
  background: var(--oh-infobar);
  padding: 8px 16px;
  font-size: 12px;
  color: var(--oh-warm);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--oh-border);
}

/* ── Section label ───────────────────────────────────────────────────────── */
.oh-section-label {
  padding: 14px 16px 8px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oh-muted);
  font-weight: 600;
}

/* ── Featured cards ──────────────────────────────────────────────────────── */
.oh-feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 10px;
}
.oh-feat-card {
  background: var(--oh-card);
  border-radius: 14px;
  border: 1px solid var(--oh-border);
  overflow: hidden;
}
.oh-feat-img {
  height: 90px;
  background: #F5E6C8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}
.oh-feat-body {
  padding: 10px 12px 12px;
}
.oh-feat-nimi {
  font-size: 14px;
  font-weight: 600;
  color: var(--oh-brown);
}
.oh-feat-kirj {
  font-size: 11px;
  color: var(--oh-muted);
  margin-top: 2px;
}
.oh-feat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

/* ── List rows ───────────────────────────────────────────────────────────── */
.oh-list { padding: 0 16px; }
.oh-list-row {
  background: var(--oh-card);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--oh-r);
  border: 1px solid var(--oh-border);
  margin-bottom: 8px;
}
.oh-list-emoji { font-size: 22px; width: 32px; text-align: center; }
.oh-list-info  { flex: 1; }
.oh-list-nimi  { font-size: 14px; font-weight: 600; color: var(--oh-brown); }
.oh-list-kirj  { font-size: 11px; color: var(--oh-muted); margin-top: 2px; }

/* ── Shared ──────────────────────────────────────────────────────────────── */
.oh-hind { font-size: 12px; color: var(--oh-warm); font-weight: 500; margin-top: 3px; }
.oh-counter { display: flex; align-items: center; gap: 6px; }
.oh-cbtn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--oh-infobar);
  border: 1px solid var(--oh-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--oh-accent); cursor: pointer;
  flex-shrink: 0; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.oh-cbtn:active { transform: scale(.92); }
.oh-cval { font-size: 15px; font-weight: 600; min-width: 20px; text-align: center; }

/* ── Dividers ────────────────────────────────────────────────────────────── */
.oh-divider-full { height: 4px; background: var(--oh-infobar); margin: 10px 0; }

/* ── Kringel section ─────────────────────────────────────────────────────── */
.oh-kringel-sect { padding: 0 16px 10px; }
.oh-kringel-sect-header { display: flex; align-items: center; gap: 8px; padding: 14px 0 10px; }
.oh-pre-badge {
  background: var(--oh-pre-bg); color: var(--oh-pre-txt);
  font-size: 10px; padding: 3px 8px; border-radius: 10px; font-weight: 600;
}
.oh-kr-card {
  background: var(--oh-kr-bg);
  border-radius: 12px;
  border: 1px solid var(--oh-kr-border);
  padding: 14px;
  margin-bottom: 10px;
}
.oh-kr-card-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.oh-kr-nr { font-size: 14px; font-weight: 600; color: var(--oh-brown); }
.oh-kr-rm {
  background: none; border: none; color: #c00; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.oh-label { font-size: 12px; color: var(--oh-muted); margin-bottom: 6px; margin-top: 10px; display: block; }
.oh-hint  { font-size: 11px; color: #B8A990; font-weight: 400; }
.oh-sort-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.oh-kg-btns   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.oh-sort-btn, .oh-kg-btn {
  background: var(--oh-bg); border: 1px solid var(--oh-border);
  border-radius: 8px; padding: 8px 4px; text-align: center;
  font-size: 12px; color: var(--oh-accent); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.oh-sort-btn.active, .oh-kg-btn.active {
  background: var(--oh-accent); border-color: var(--oh-accent); color: #FAF7F2;
}
.oh-kr-preview {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding: 8px 12px;
  background: var(--oh-kr-prev); border-radius: 8px;
  font-size: 12px; color: var(--oh-pre-txt); font-weight: 500;
}
.oh-add-kringel {
  width: 100%; background: var(--oh-bg); border: 1px dashed #C4A882;
  border-radius: var(--oh-r); padding: 11px; text-align: center;
  font-size: 13px; color: var(--oh-warm); cursor: pointer;
  font-family: inherit;
}

/* ── Tarne ───────────────────────────────────────────────────────────────── */
.oh-tarne-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 10px; }
.oh-tarne-card {
  background: var(--oh-card); border-radius: var(--oh-r); border: 1px solid var(--oh-border);
  padding: 12px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.oh-tarne-card.active { border: 2px solid var(--oh-green); background: #F4F9F6; }
.oh-tarne-icon { font-size: 18px; margin-bottom: 4px; }
.oh-tarne-nimi { font-size: 13px; font-weight: 600; color: var(--oh-brown); }
.oh-tarne-info { font-size: 11px; color: var(--oh-muted); margin-top: 2px; }
.oh-tarne-hind { font-size: 12px; margin-top: 5px; font-weight: 500; color: var(--oh-warm); }
.oh-tarne-hind.free { color: var(--oh-green); }

/* ── Delivery box ────────────────────────────────────────────────────────── */
.oh-delivery-box {
  background: var(--oh-card); border-radius: var(--oh-r); border: 1px solid var(--oh-border);
  padding: 14px 16px; margin: 0 16px 10px;
}
.oh-delivery-label { font-size: 12px; color: var(--oh-muted); margin-bottom: 8px; }
.oh-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.oh-slot {
  background: var(--oh-bg); border: 1px solid var(--oh-border);
  border-radius: 8px; padding: 9px 4px; text-align: center;
  font-size: 12px; font-weight: 500; color: var(--oh-brown);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.oh-slot.active { background: var(--oh-green); border-color: var(--oh-green); color: #E8F5EE; }

/* ── Aadress ─────────────────────────────────────────────────────────────── */
#oh-aadress-wrap { padding: 0 16px 4px; }

/* ── Andmed card ─────────────────────────────────────────────────────────── */
.oh-andmed-card {
  background: var(--oh-card); border-radius: 14px; border: 1px solid var(--oh-border);
  padding: 16px; margin: 0 16px 10px;
}
.oh-toggle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.oh-toggle-btn {
  background: var(--oh-bg); border: 1px solid var(--oh-border);
  border-radius: 8px; padding: 9px; text-align: center;
  font-size: 13px; color: var(--oh-warm); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.oh-toggle-btn.active { background: var(--oh-brown); border-color: var(--oh-brown); color: #FAF7F2; }
.oh-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oh-field-wrap { margin-bottom: 10px; }
.oh-ari-block { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--oh-border); }
.oh-ari-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--oh-muted); font-weight: 600; margin-bottom: 10px; }
.oh-markus-toggle {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; padding-top: 4px; -webkit-tap-highlight-color: transparent;
}
.oh-checkbox {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--oh-border); flex-shrink: 0; margin-top: 2px;
  background: var(--oh-bg);
}
.oh-checkbox.on { background: var(--oh-green); border-color: var(--oh-green); }
.oh-checkbox.on::after { content:'✓'; display:block; text-align:center; color:#fff; font-size:12px; line-height:16px; }
.oh-check-title { font-size: 13px; font-weight: 600; color: var(--oh-brown); }
.oh-check-desc  { font-size: 11px; color: var(--oh-muted); margin-top: 2px; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.oh-input {
  width: 100%; background: var(--oh-bg);
  border: 1px solid var(--oh-border); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; color: var(--oh-brown);
  font-family: inherit; outline: none;
  -webkit-appearance: none;
}
.oh-input:focus { border-color: var(--oh-accent); background: #fff; }
.oh-input.error { border-color: #C0392B; background: #FFF5F5; }
.oh-textarea { min-height: 80px; resize: vertical; margin-top: 8px; }

/* ── Kokku card ──────────────────────────────────────────────────────────── */
.oh-kokku-card {
  background: var(--oh-card); border-radius: 14px; border: 1px solid var(--oh-border);
  padding: 14px 16px; margin: 0 16px 10px;
}
.oh-rida { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.oh-rida-label { color: var(--oh-warm); }
.oh-ridad-empty { font-size: 13px; color: var(--oh-muted); text-align: center; padding: 8px 0; }
.oh-progress-wrap { margin-top: 12px; display: none; }
.oh-progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.oh-progress-txt { font-size: 12px; color: var(--oh-muted); }
.oh-progress-val { font-size: 13px; font-weight: 600; }
.oh-progress-track { height: 6px; background: var(--oh-infobar); border-radius: 3px; overflow: hidden; }
.oh-progress-fill  { height: 100%; border-radius: 3px; transition: width .3s; background: var(--oh-amber); }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.oh-alert { display: none; margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.oh-alert.show { display: block; }
.oh-alert--err  { background: #FFF0F0; color: #C0392B; border: 1px solid #F5C6C6; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.oh-footer {
  text-align: center; font-size: 12px; color: var(--oh-muted);
  padding: 10px 16px 20px;
}

/* ── Sticky bar ──────────────────────────────────────────────────────────── */
.oh-sticky {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--oh-sticky);
  padding: 12px 20px 16px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 100;
  max-width: 600px; margin: 0 auto;
}
.oh-sticky-items { font-size: 11px; color: #C4A882; }
.oh-sticky-sum   { font-size: 20px; font-weight: 600; color: #FAF7F2; line-height: 1.2; }
.oh-pay-btn {
  background: var(--oh-accent); color: #FAF7F2;
  border: none; border-radius: 24px;
  padding: 12px 20px; font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 6px;
  -webkit-tap-highlight-color: transparent;
}
.oh-pay-btn:disabled { opacity: .45; cursor: default; }
.oh-pay-btn:not(:disabled):active { transform: scale(.97); }
.oh-spinner {
  display: none; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50; animation: oh-spin .7s linear infinite;
}
.oh-spinner.show { display: block; }
@keyframes oh-spin { to { transform: rotate(360deg); } }

/* ── Success page ────────────────────────────────────────────────────────── */
.oh-success {
  text-align: center; padding: 60px 20px;
}
.oh-success__icon { font-size: 56px; margin-bottom: 16px; }
.oh-success__h2   { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.oh-success__p    { font-size: 15px; color: var(--oh-warm); margin-bottom: 6px; }
.oh-success__nr   { font-size: 14px; color: var(--oh-muted); margin-bottom: 28px; }
.oh-back-btn {
  display: inline-block; background: var(--oh-brown); color: #FAF7F2;
  padding: 12px 24px; border-radius: 24px; font-size: 14px; text-decoration: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  .oh-sticky { border-radius: 16px 16px 0 0; left: 50%; right: auto; transform: translateX(-50%); width: 600px; }
}
@media (max-width: 360px) {
  .oh-feat-grid   { grid-template-columns: 1fr; }
  .oh-field-row   { grid-template-columns: 1fr; }
  .oh-tarne-grid  { grid-template-columns: 1fr; }
}

/* ── Logo ────────────────────────────────────────────────────────────────── */
.oh-logo-wrap { margin-bottom: 10px; }
.oh-logo { max-height: 60px; width: auto; display: block; margin: 0 auto; }