/* ============================================================
   BEKOFRESH — EXTRAS CSS
   Styles for Location, Reviews, Support pages plus the small
   pill / footer link additions used on the main site & CS page.
   ============================================================ */

/* ---------- Footer quick links (main site) ---------- */
.footer-quick-links {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 6px 0 8px;
  flex-wrap: wrap;
}
.footer-quick-links a {
  font-size: 13.5px;
  color: var(--text-light, #888);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.footer-quick-links a:hover { color: var(--green, #27AE60); }

/* ---------- "Find our location" link on Coming Soon ---------- */
.cs-loc-link {
  display: inline-block;
  margin: 8px 0 0;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  background: transparent;
  border: 0;
  letter-spacing: 0.2px;
  transition: color 0.2s, transform 0.15s;
}
.cs-loc-link:hover {
  color: #fff;
  transform: translateY(-1px);
}
.cs-loc-link.hidden { display: none; }

/* ---------- Simple header used on Location/Reviews/Support ---------- */
.simple-header {
  position: sticky;
  top: 0;
  background: var(--bg, #fff);
  border-bottom: 1px solid var(--border, #eee);
  z-index: 50;
}

/* ---------- LOCATION PAGE ---------- */
.loc-page { padding: 32px 0 80px; min-height: calc(100vh - 80px); }
.loc-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text, #222);
}
.loc-subtitle {
  text-align: center;
  color: var(--text-light, #888);
  margin: 0 0 28px;
  font-size: 15.5px;
}
.loc-map-wrap {
  max-width: 720px;
  margin: 0 auto 24px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}
#locSatMap {
  width: 100%;
  height: 320px;
}
.loc-go-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 32px;
}
.loc-go-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 999px;
  background: var(--green, #27AE60);
  color: #fff;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.2px;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow:
    0 0 0 4px rgba(39,174,96,0.18),
    0 8px 22px rgba(39,174,96,0.38);
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.loc-go-btn:hover {
  transform: translateY(-2px);
  background: #229954;
  box-shadow:
    0 0 0 5px rgba(39,174,96,0.22),
    0 12px 28px rgba(39,174,96,0.48);
}
.loc-go-btn:active { transform: translateY(0); }

/* Stack of additional branch buttons under the main "Go" button */
.loc-branches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: -12px 0 32px;
}
.loc-branch-btn { font-size: 14.5px; padding: 11px 24px; }

/* Admin: branches repeater */
.admin-branches-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.admin-branch-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr auto;
  gap: 8px;
  align-items: center;
  background: rgba(0,0,0,0.03);
  padding: 8px;
  border-radius: 8px;
}
.admin-branch-row input { width: 100%; }
@media (max-width: 720px) {
  .admin-branch-row { grid-template-columns: 1fr auto; }
  .admin-branch-row input { grid-column: 1 / -2; }
  .admin-branch-row .admin-loc-img-del { grid-column: 2; grid-row: 1 / span 3; }
}
.loc-images {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
}
.loc-img {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-soft, #f7f7f7);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.loc-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.loc-img figcaption {
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--text-light, #666);
  text-align: center;
}
.loc-img-left   { margin-right: auto; }
.loc-img-right  { margin-left: auto; }
.loc-img-center { margin-left: auto; margin-right: auto; }

/* ---------- REVIEWS PAGE ---------- */
.rev-page { padding: 32px 0 80px; min-height: calc(100vh - 80px); }
.rev-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 24px;
}
.rev-overall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 auto 24px;
  padding: 16px 24px;
  background: var(--bg-soft, #fafafa);
  border-radius: 14px;
  max-width: 320px;
}
.rev-overall-num {
  font-size: 38px;
  font-weight: 700;
  color: var(--text, #222);
  line-height: 1;
}
.rev-overall-stars { font-size: 22px; }
.rev-overall-count {
  font-size: 13.5px;
  color: var(--text-light, #888);
}
.rev-star {
  display: inline-block;
  color: #ddd;
}
.rev-star-full { color: #f5b50a; }
.rev-star-half {
  position: relative;
  color: #ddd;
}
.rev-star-half::before {
  content: '★';
  position: absolute;
  inset: 0;
  color: #f5b50a;
  width: 50%;
  overflow: hidden;
}

/* Cycling card */
.rev-cycle {
  max-width: 600px;
  margin: 0 auto 36px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rev-cycle-card {
  width: 100%;
  text-align: center;
  padding: 22px 26px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,0.07);
  border: 1px solid var(--border, #eee);
}
.rev-cycle-stars { font-size: 20px; margin-bottom: 8px; }
.rev-cycle-text {
  font-size: 16px;
  color: var(--text, #333);
  font-style: italic;
  line-height: 1.55;
  margin: 0 0 10px;
}
.rev-cycle-name {
  font-size: 14px;
  color: var(--text-light, #888);
  font-weight: 600;
  margin: 0;
}
.rev-cycle-empty { color: var(--text-light, #aaa); font-style: italic; }
.rev-fade-in { animation: revFade 0.45s ease both; }
@keyframes revFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Submit form */
.rev-form-card {
  max-width: 540px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border, #eee);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.rev-form-card h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
}
.rev-field {
  display: block;
  margin-bottom: 14px;
}
.rev-field > span {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text, #333);
}
.rev-field input,
.rev-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, #ddd);
  border-radius: 10px;
  font-size: 14.5px;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
}
.rev-field input:focus,
.rev-field textarea:focus {
  outline: none;
  border-color: var(--green, #27AE60);
  box-shadow: 0 0 0 3px rgba(39,174,96,0.15);
}
.rev-field textarea { resize: none; min-height: 80px; }
.rev-textarea-wrap { position: relative; }
.rev-textarea-wrap textarea { display: block; width: 100%; padding-bottom: 28px; }
.rev-star-picker {
  display: flex;
  gap: 4px;
  font-size: 28px;
}
.rev-star-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: #ddd;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
}
.rev-star-btn:hover { transform: scale(1.15); }
.rev-star-btn.active { color: #f5b50a; }
.rev-submit-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 0;
  background: var(--green, #27AE60);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.18s, transform 0.15s;
}
.rev-submit-btn:hover { background: var(--green-dark, #1f8c4d); transform: translateY(-1px); }
.rev-msg {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
}
.rev-msg.ok  { background: #e6f7ee; color: #1f8c4d; }
.rev-msg.err { background: #fdecea; color: #c0392b; }

/* ---------- SUPPORT PAGE ---------- */
.sup-page { padding: 32px 0 80px; min-height: calc(100vh - 80px); }
.sup-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
}
.sup-subtitle {
  text-align: center;
  color: var(--text-light, #888);
  margin: 0 0 28px;
  font-size: 15.5px;
}
.sup-form-card {
  max-width: 580px;
  margin: 0 auto;
  padding: 26px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border, #eee);
  box-shadow: 0 6px 22px rgba(0,0,0,0.06);
}
.sup-field {
  display: block;
  margin-bottom: 16px;
}
.sup-field > span {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.sup-field input,
.sup-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border, #ddd);
  border-radius: 10px;
  font-size: 14.5px;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.sup-field input:focus,
.sup-field textarea:focus {
  outline: none;
  border-color: var(--green, #27AE60);
  box-shadow: 0 0 0 3px rgba(39,174,96,0.15);
}
.sup-field textarea { resize: none; min-height: 110px; }

/* Textarea + character-count ring (shows once user passes 40% of limit). */
.sup-textarea-wrap { position: relative; }
.sup-textarea-wrap textarea { display: block; width: 100%; padding-bottom: 28px; }
.char-counter {
  position: absolute;
  bottom: 8px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #777);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  padding: 2px 6px;
  border-radius: 999px;
  pointer-events: none;
  transition: color .2s ease;
}
[dir="rtl"] .char-counter { right: auto; left: 10px; }
.char-ring { transform: rotate(-90deg); flex: none; }
.char-ring-track {
  fill: none;
  stroke: rgba(0,0,0,0.12);
  stroke-width: 3;
}
.char-ring-fill {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 56.55;          /* 2 * pi * 9 ≈ 56.55 */
  stroke-dashoffset: 56.55;
  transition: stroke-dashoffset .15s ease, stroke .2s ease;
}
.char-counter.warn { color: #d97706; }
.char-counter.danger { color: #c0392b; font-weight: 600; }

body.theme-premium .char-counter,
body.theme-luxe    .char-counter {
  background: rgba(20,10,12,0.7);
  color: rgba(245,230,211,0.75);
}
body.theme-premium .char-ring-track,
body.theme-luxe    .char-ring-track { stroke: rgba(245,230,211,0.18); }
body.theme-premium .char-counter.warn,
body.theme-luxe    .char-counter.warn { color: #E0B97A; }
body.theme-premium .char-counter.danger,
body.theme-luxe    .char-counter.danger { color: #ff6b6b; }

.sup-submit-btn {
  display: block;
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  border: 0;
  background: var(--green, #27AE60);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.18s, transform 0.15s;
}
.sup-submit-btn:hover { background: var(--green-dark, #1f8c4d); transform: translateY(-1px); }
.sup-msg {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 14px;
}
.sup-msg.ok  { background: #e6f7ee; color: #1f8c4d; }
.sup-msg.err { background: #fdecea; color: #c0392b; }

/* ---------- Mobile ---------- */
@media (max-width: 560px) {
  .loc-title, .rev-title, .sup-title { font-size: 26px; }
  .loc-subtitle, .sup-subtitle { font-size: 14.5px; padding: 0 12px; }
  .loc-page, .rev-page, .sup-page { padding: 22px 0 60px; }
  #locSatMap { height: 240px; }
  .rev-form-card, .sup-form-card { padding: 18px; margin: 0 12px; }
  .rev-cycle-card { padding: 18px 20px; }
  .footer-quick-links { gap: 16px; font-size: 13px; }
}

/* ============================================================
   ADMIN — Location & Reviews tab styles
   ============================================================ */

/* Reusable layout helpers used in the new admin panels */
.tab-panel .switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
}
.tab-panel .switch-row + .switch-row {
  border-top: 1px solid var(--border, #eee);
  margin-top: 6px;
  padding-top: 14px;
}
.tab-panel .switch-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--green, #27AE60);
}
.tab-panel .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.tab-panel .two-col label,
.tab-panel .card > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #333);
  margin-top: 10px;
}
.tab-panel .two-col input,
.tab-panel .card > label > input {
  width: 100%;
  padding: 8px 10px;
  margin-top: 4px;
  border: 1px solid var(--border, #ddd);
  border-radius: 7px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}
.tab-panel .two-col input:focus,
.tab-panel .card > label > input:focus {
  outline: none;
  border-color: var(--green, #27AE60);
  box-shadow: 0 0 0 3px rgba(39,174,96,0.15);
}
@media (max-width: 560px) {
  .tab-panel .two-col { grid-template-columns: 1fr; }
}

.admin-loc-images-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.admin-loc-image-row {
  display: grid;
  grid-template-columns: 60px 1fr 80px 110px auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: var(--bg-soft, #f7f7f7);
  border-radius: 10px;
}
.admin-loc-image-row img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: #ddd;
}
.admin-loc-image-row input,
.admin-loc-image-row select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border, #ddd);
  border-radius: 7px;
  font-size: 13px;
  background: #fff;
  box-sizing: border-box;
}
.admin-loc-image-row .admin-loc-img-del {
  background: transparent;
  border: 0;
  color: #c0392b;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
}
.admin-loc-image-row .admin-loc-img-del:hover { background: rgba(192,57,43,0.1); }
.admin-loc-add-btn {
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--green, #27AE60);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13.5px;
}
.admin-loc-add-btn:hover { background: var(--green-dark, #1f8c4d); }

@media (max-width: 600px) {
  .admin-loc-image-row {
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "thumb fields del"
      "thumb width width"
      "thumb align align";
  }
  .admin-loc-image-row img       { grid-area: thumb; }
  .admin-loc-image-row > div     { grid-area: fields; }
  .admin-loc-image-row .admin-loc-img-del { grid-area: del; align-self: start; }
  .admin-loc-image-row > input[type="number"] { grid-area: width; }
  .admin-loc-image-row > select  { grid-area: align; }
}

/* Admin reviews list */
.admin-rev-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-rev-row {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border, #eee);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}
.admin-rev-row.unapproved { background: #fff8e6; border-color: #f0d68a; }
.admin-rev-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text-light, #888);
}
.admin-rev-meta strong { color: var(--text, #222); font-size: 14.5px; }
.admin-rev-stars { color: #f5b50a; font-size: 14px; }
.admin-rev-text {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text, #333);
}
.admin-rev-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.admin-rev-actions button {
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--border, #ddd);
  background: #fff;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.15s;
  min-width: 110px;
}
.admin-rev-actions .admin-rev-toggle.on  { background: #1f8c4d; color: #fff; border-color: #1f8c4d; }
.admin-rev-actions .admin-rev-toggle.off { background: #f5f5f5; color: #666; }
.admin-rev-actions .admin-rev-del {
  color: #c0392b;
  border-color: #f1c2bd;
}
.admin-rev-actions .admin-rev-del:hover {
  background: #fdecea;
  border-color: #c0392b;
}

.admin-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--text-light, #999);
  font-size: 14px;
  background: var(--bg-soft, #fafafa);
  border-radius: 10px;
}

/* Admin support tickets */
.admin-sup-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-sup-row {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border, #eee);
  border-radius: 10px;
}
.admin-sup-row.open    { border-left: 4px solid #f5b50a; }
.admin-sup-row.closed  { opacity: 0.65; }
.admin-sup-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-sup-ticket {
  font-family: monospace;
  font-size: 12px;
  color: var(--text-light, #888);
}
.admin-sup-name { font-weight: 700; font-size: 14.5px; }
.admin-sup-contact {
  font-size: 13px;
  color: var(--text-light, #666);
  margin-bottom: 4px;
}
.admin-sup-contact a { color: var(--green, #27AE60); text-decoration: none; }
.admin-sup-msg {
  margin: 6px 0;
  font-size: 14px;
  white-space: pre-wrap;
  line-height: 1.45;
}
.admin-sup-device {
  font-size: 12px;
  color: var(--text-light, #999);
  font-family: monospace;
}
.admin-sup-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.admin-sup-actions button {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--border, #ddd);
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}
.admin-sup-actions .admin-sup-close.active { background: #1f8c4d; color: #fff; border-color: #1f8c4d; }
.admin-sup-actions .admin-sup-del { color: #c0392b; }
.admin-sup-actions .admin-sup-del:hover { background: #fdecea; }

/* ---------- Coming-Soon top header (mirrors main site) ---------- */
.cs-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  padding: 14px 22px;
}
.cs-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
}
.cs-header-logo {
  height: 36px;
  width: auto;
}
.cs-header .cs-nav {
  margin: 0;
  max-width: none;
  justify-content: flex-end;
}

/* Base nav container (used inside the CS header) */
.cs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* CS nav buttons mirror the main-site .translate-btn / .chat-header-btn:
   small pill, 8px 16px, 13.5px label, translucent surface so they sit
   nicely on top of the colourful CS background. */
.cs-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.10);
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .2px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .15s ease;
  box-shadow: none;
}
.cs-nav-btn:hover {
  background: rgba(255,255,255,0.22);
  border-color: #fff;
  color: #fff;
  transform: translateY(-1px);
}
.cs-nav-btn.hidden { display: none !important; }

/* Coming-Soon footer: stack so credit sits as a line BELOW the lang button. */
.cs-footer {
  flex-direction: column;
  gap: 10px;
}

/* Footer credit line (every page) */
.footer-credit, .cs-credit {
  margin: 0;
  font-size: 12px;
  opacity: .8;
  text-align: center;
  letter-spacing: .2px;
}
.cs-credit { color: rgba(255,255,255,.85); }

/* Header nav links (Location / Reviews / Support, etc.) */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.nav-link:hover { background: rgba(0,0,0,.08); }
@media (max-width: 760px) {
  .nav-link span { display: none; }
  .nav-link { padding: 6px; }
}

.page-credit { padding: 18px 12px; text-align: center; }
.page-credit .footer-credit { margin: 0; }

/* ============================================================
   THEME OVERLAYS — REVIEWS & SUPPORT PAGES
   The default extras.css uses bg/border/text vars from style.css,
   so most theme switching happens automatically. These rules just
   refine the cards / inputs / buttons so they feel premium on dark.
   ============================================================ */

/* ----- Premium (red/black/bronze) on review + support ----- */
body.theme-premium .simple-header {
  background: rgba(15, 8, 8, 0.9);
  border-bottom: 1px solid rgba(184,115,51,0.25);
}
body.theme-premium .rev-page,
body.theme-premium .sup-page {
  background:
    radial-gradient(ellipse at top right, rgba(196,30,58,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(184,115,51,0.18) 0%, transparent 55%),
    var(--bg);
}
body.theme-premium .rev-title,
body.theme-premium .sup-title {
  font-family: 'Playfair Display', 'Tajawal', serif;
  color: #F5E6D3;
  letter-spacing: 0.5px;
}
body.theme-premium .sup-subtitle { color: rgba(212,197,176,0.78); }
body.theme-premium .rev-overall {
  background: linear-gradient(135deg, #1A1212 0%, #221816 100%);
  border: 1px solid rgba(184,115,51,0.2);
}
body.theme-premium .rev-overall-num,
body.theme-premium .rev-overall-stars { color: #D4A574; }
body.theme-premium .rev-overall-count { color: rgba(212,197,176,0.7); }
body.theme-premium .rev-cycle-card,
body.theme-premium .rev-form-card,
body.theme-premium .sup-form-card {
  background: linear-gradient(135deg, #1A1212 0%, #221816 100%);
  border: 1px solid rgba(184,115,51,0.25);
  box-shadow: 0 10px 32px rgba(0,0,0,.5);
  color: #F5E6D3;
}
body.theme-premium .rev-form-card h2,
body.theme-premium .sup-form-card label,
body.theme-premium .rev-field span,
body.theme-premium .sup-field span { color: #F5E6D3; }
body.theme-premium .rev-field input,
body.theme-premium .rev-field textarea,
body.theme-premium .sup-field input,
body.theme-premium .sup-field textarea {
  background: #0F0808;
  color: #F5E6D3;
  border: 1px solid rgba(184,115,51,0.3);
}
body.theme-premium .rev-field input:focus,
body.theme-premium .rev-field textarea:focus,
body.theme-premium .sup-field input:focus,
body.theme-premium .sup-field textarea:focus {
  border-color: #B87333;
  box-shadow: 0 0 0 3px rgba(184,115,51,0.18);
  outline: none;
}
body.theme-premium .rev-star-btn { color: rgba(212,165,116,0.4); }
body.theme-premium .rev-star-btn.on,
body.theme-premium .rev-star-btn:hover { color: #D4A574; }
body.theme-premium .rev-submit-btn,
body.theme-premium .sup-submit-btn {
  background: linear-gradient(135deg, #C41E3A 0%, #8B0000 100%);
  color: #fff;
  box-shadow: 0 4px 18px rgba(196,30,58,.5), inset 0 1px 0 rgba(255,255,255,.15);
  border: none;
}
body.theme-premium .rev-submit-btn:hover,
body.theme-premium .sup-submit-btn:hover {
  background: linear-gradient(135deg, #d62a48 0%, #a30808 100%);
  box-shadow: 0 8px 28px rgba(196,30,58,.65);
}
body.theme-premium .rev-cycle-empty { color: rgba(212,197,176,0.7); }
body.theme-premium .beko-tr-tag { color: rgba(212,165,116,0.7); }

/* ============================================================
   LUXE COPPER THEME
   Inspired by the brand imagery (embossed copper plaque on red /
   black diamond pattern, rich coffee-bean tones). This is a more
   cinematic variant of Premium: deeper black surface, warmer copper
   gradients, and subtle diamond-pattern background.
   ============================================================ */
body.theme-luxe {
  --green:       #CD7F32;   /* polished copper accent */
  --green-dark:  #8B5A2B;
  --green-light: #2A1810;
  --orange:      #B91C2C;   /* embossed red */
  --orange-dark: #6F0E18;
  --teal:        #E0B97A;   /* warm highlight */
  --bg:          #0A0507;
  --surface:     #150A0C;
  --dark:        #F5E6D3;
  --text:        #E0CDB0;
  --muted:       #8B7355;
  --border:      #2D1A1F;
  --shadow-sm:   0 2px 14px rgba(0,0,0,.6);
  --shadow-md:   0 10px 36px rgba(0,0,0,.7);
  --shadow-lg:   0 24px 64px rgba(0,0,0,.8);
  background: var(--bg);
  color: var(--text);
}
body.theme-luxe::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(60deg,
      transparent 0 60px,
      rgba(205,127,50,0.025) 60px 61px),
    repeating-linear-gradient(-60deg,
      transparent 0 60px,
      rgba(185,28,44,0.022) 60px 61px);
}
body.theme-luxe > * { position: relative; z-index: 1; }

body.theme-luxe h1,
body.theme-luxe h2,
body.theme-luxe h3,
body.theme-luxe .hero-title,
body.theme-luxe .rev-title,
body.theme-luxe .sup-title {
  font-family: 'Playfair Display', 'Tajawal', serif;
  font-weight: 700;
  letter-spacing: 0.6px;
  background: linear-gradient(180deg, #F5E6D3 0%, #CD7F32 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #F5E6D3;
}

body.theme-luxe .header,
body.theme-luxe .simple-header {
  background: rgba(10,5,7,0.88);
  border-bottom: 1px solid rgba(205,127,50,0.3);
  box-shadow: 0 2px 16px rgba(0,0,0,.5);
}
body.theme-luxe .header.scrolled { background: rgba(10,5,7,0.96); }

body.theme-luxe .translate-btn,
body.theme-luxe .chat-header-btn,
body.theme-luxe .nav-link {
  background: transparent;
  border-color: rgba(205,127,50,0.4);
  color: #E0B97A;
}
body.theme-luxe .translate-btn:hover,
body.theme-luxe .chat-header-btn:hover,
body.theme-luxe .nav-link:hover {
  background: rgba(205,127,50,0.18);
  border-color: #CD7F32;
  color: #F5E6D3;
}
body.theme-luxe .menu-btn {
  background: linear-gradient(135deg, #B91C2C 0%, #6F0E18 100%);
  box-shadow: 0 3px 14px rgba(185,28,44,.45), inset 0 1px 0 rgba(255,255,255,.1);
}

body.theme-luxe .hero {
  background:
    radial-gradient(ellipse at top, rgba(111,14,24,0.9) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(205,127,50,0.35) 0%, transparent 55%),
    linear-gradient(135deg, #0A0507 0%, #1F0810 50%, #2A1810 100%);
}
body.theme-luxe .hero-badge {
  background: rgba(205,127,50,0.18);
  border: 1px solid rgba(224,185,122,0.55);
  color: #F5E6D3;
  letter-spacing: 3px;
}
body.theme-luxe .hero-subtitle { color: rgba(245,230,211,0.85); }

body.theme-luxe .btn-primary {
  background: linear-gradient(135deg, #B91C2C 0%, #6F0E18 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(185,28,44,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
body.theme-luxe .btn-white {
  background: linear-gradient(135deg, #CD7F32 0%, #8B5A2B 100%);
  color: #fff;
}

body.theme-luxe .features { background: var(--bg); }
body.theme-luxe .feature-card {
  background: linear-gradient(135deg, #150A0C 0%, #1F1014 100%);
  border: 1px solid rgba(205,127,50,0.25);
  box-shadow: var(--shadow-sm);
}
body.theme-luxe .feature-card:hover {
  border-color: rgba(205,127,50,0.55);
  box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 0 1px rgba(205,127,50,0.35);
}
body.theme-luxe .feature-card h3 { -webkit-text-fill-color: #F5E6D3; color: #F5E6D3; background: none; }
body.theme-luxe .feature-card p  { color: rgba(224,205,176,0.75); }

body.theme-luxe .cta-strip {
  background: linear-gradient(90deg, #6F0E18 0%, #B91C2C 50%, #8B5A2B 100%);
  border-top: 1px solid rgba(205,127,50,0.35);
  border-bottom: 1px solid rgba(205,127,50,0.35);
}
body.theme-luxe .footer {
  background: #07030A;
  border-top: 1px solid rgba(205,127,50,0.25);
}

/* ----- Luxe styling for review + support pages ----- */
body.theme-luxe .rev-page,
body.theme-luxe .sup-page {
  background:
    radial-gradient(ellipse at top right, rgba(185,28,44,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(205,127,50,0.18) 0%, transparent 55%),
    var(--bg);
}
body.theme-luxe .sup-subtitle { color: rgba(224,205,176,0.78); }
body.theme-luxe .rev-overall {
  background: linear-gradient(135deg, #150A0C 0%, #1F1014 100%);
  border: 1px solid rgba(205,127,50,0.3);
}
body.theme-luxe .rev-overall-num,
body.theme-luxe .rev-overall-stars { color: #E0B97A; }
body.theme-luxe .rev-overall-count { color: rgba(224,205,176,0.7); }
body.theme-luxe .rev-cycle-card,
body.theme-luxe .rev-form-card,
body.theme-luxe .sup-form-card {
  background: linear-gradient(135deg, #150A0C 0%, #1F1014 100%);
  border: 1px solid rgba(205,127,50,0.3);
  box-shadow: 0 12px 36px rgba(0,0,0,.55);
  color: #F5E6D3;
}
body.theme-luxe .rev-form-card h2,
body.theme-luxe .sup-form-card label,
body.theme-luxe .rev-field span,
body.theme-luxe .sup-field span { color: #F5E6D3; }
body.theme-luxe .rev-field input,
body.theme-luxe .rev-field textarea,
body.theme-luxe .sup-field input,
body.theme-luxe .sup-field textarea {
  background: #0A0507;
  color: #F5E6D3;
  border: 1px solid rgba(205,127,50,0.35);
}
body.theme-luxe .rev-field input:focus,
body.theme-luxe .rev-field textarea:focus,
body.theme-luxe .sup-field input:focus,
body.theme-luxe .sup-field textarea:focus {
  border-color: #CD7F32;
  box-shadow: 0 0 0 3px rgba(205,127,50,0.22);
  outline: none;
}
body.theme-luxe .rev-star-btn { color: rgba(224,185,122,0.4); }
body.theme-luxe .rev-star-btn.on,
body.theme-luxe .rev-star-btn:hover { color: #E0B97A; }
body.theme-luxe .rev-submit-btn,
body.theme-luxe .sup-submit-btn {
  background: linear-gradient(135deg, #B91C2C 0%, #6F0E18 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(185,28,44,.55), inset 0 1px 0 rgba(255,255,255,.15);
  border: none;
}
body.theme-luxe .rev-submit-btn:hover,
body.theme-luxe .sup-submit-btn:hover {
  background: linear-gradient(135deg, #d12838 0%, #8b1622 100%);
  box-shadow: 0 8px 30px rgba(185,28,44,.7);
}
body.theme-luxe .beko-tr-tag { color: rgba(224,185,122,0.75); }

/* Luxe coming-soon page tints */
body.theme-luxe .coming-soon-page {
  background:
    radial-gradient(ellipse at top, rgba(111,14,24,0.7) 0%, transparent 55%),
    radial-gradient(ellipse at bottom, rgba(205,127,50,0.35) 0%, transparent 55%),
    linear-gradient(135deg, #0A0507 0%, #1F0810 50%, #2A1810 100%);
}