/* ---------------------------------------------------------------------------
   Old World Healing — customer portal styling.

   Loaded before each page's own <style> block, so pages keep their layout
   rules while colour and type come from here. The legacy variable names
   (--green, --bg, --panel-bg, --text-dark, --text-body) are kept and pointed
   at brand values: every existing rule in those pages already reads them, so
   the brand reaches the whole portal without rewriting each rule.

   Tokens match assets/admin.css and come from oldworldhealing.com: Fraunces
   for display type, Inter for body, #ee9441 for calls to action, #1a1a1a ink,
   #e6e6e6 borders. The forest green and cream ground are sampled from the
   storefront's own sections.
--------------------------------------------------------------------------- */

:root{
  /* Brand */
  --owh-green:       #1b4a35;
  --owh-green-dark:  #143726;
  --owh-green-soft:  #eef1ea;
  --owh-orange:      #ee9441;
  --owh-orange-dark: #d97f2c;
  --owh-gold:        #b98a45;
  --owh-cream:       #faf6ec;
  --owh-surface:     #ffffff;
  --owh-ink:         #1a1a1a;
  --owh-ink-soft:    #4a4a4a;
  --owh-muted:       #8a8a8a;
  --owh-border:      #e6e6e6;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* The names the existing page CSS already uses, repointed at the brand.
     These were previously declared in each page's own :root; they live here
     now so every page reads one set of values. Pages reference all of them,
     so every one has to be defined or those rules silently do nothing. */
  --text-dark:  var(--owh-ink);
  --text-body:  var(--owh-ink);
  --bg:         var(--owh-cream);
  --panel-bg:   var(--owh-green-soft);
  --green:      var(--owh-green);
  --green-dark: var(--owh-green-dark);
  --value-color: var(--owh-ink);

  /* Cards */
  --card-bg:     var(--owh-surface);
  --card-radius: 10px;
  --card-shadow: 0 1px 2px rgba(26,26,26,.06);

  /* Subscription status pills */
  --pill-bg:            var(--owh-green-soft);
  --pill-text:          var(--owh-green);
  --pill-bg-paused:     #fdf3e3;
  --pill-text-paused:   #8a5a00;
  --pill-bg-cancelled:  #fdecea;
  --pill-text-cancelled:#8b0000;
}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text-body);
  -webkit-font-smoothing:antialiased;
}

/* Display type: headings are the storefront's serif. Page rules still own
   their sizes and spacing; only the face and tracking come from here. */
h1,h2,h3,.logo{
  font-family:var(--font-display);
  letter-spacing:-.01em;
}

/* --- Header -------------------------------------------------------------- */

.header{
  background:var(--owh-surface);
  border-bottom:1px solid var(--owh-border);
  box-shadow:0 1px 0 rgba(26,26,26,.02);
}

.logo{
  gap:10px;
  font-weight:700;
  color:var(--owh-ink);
}

/* Small caps line beside the wordmark, as on the storefront. */
.logo-sub{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--owh-gold);
}

.main-menu{ color:var(--owh-ink-soft) !important; }
.main-menu svg{ stroke:var(--owh-gold) !important; }

/* --- Calls to action ------------------------------------------------------
   The storefront sells with orange buttons and uses green for secondary
   actions, so the portal's primary buttons follow it. */

.submit-btn,
.buy-btn,
.option-btn,
.modal-btn.confirm{
  background:var(--owh-orange) !important;
  border-color:var(--owh-orange) !important;
  color:#231404 !important;
  font-weight:700;
}
.submit-btn:hover,
.buy-btn:hover,
.option-btn:hover,
.modal-btn.confirm:hover{
  background:var(--owh-orange-dark) !important;
  border-color:var(--owh-orange-dark) !important;
}

/* Destructive confirmations stay red, whatever the brand does elsewhere. */
.modal-btn.confirm.danger{
  background:#8b0000 !important;
  border-color:#8b0000 !important;
  color:#fff !important;
}

.back-btn,
.modal-btn.cancel{
  color:var(--owh-green) !important;
  border-color:var(--owh-green) !important;
  background:var(--owh-surface) !important;
  font-weight:700;
}
.back-btn:hover,
.modal-btn.cancel:hover{ background:var(--owh-green-soft) !important; }

/* --- Surfaces ------------------------------------------------------------ */

.panel,
.product,
.cat-card,
.faq-item,
.card{
  background:var(--owh-surface);
  border:1px solid var(--owh-border);
  border-radius:10px;
}

.cat-card{ box-shadow:none; }
.cat-card:hover{ border-color:var(--owh-gold); }
.cat-card svg{ stroke:var(--owh-green); }
.cat-card.active{ background:var(--owh-green); border-color:var(--owh-green); }

/* Status pills */
.pill{ background:var(--owh-green-soft); color:var(--owh-green); font-weight:700; letter-spacing:.06em; }

/* Prices carry the brand green rather than plain black. */
.price{ color:var(--owh-green); font-family:var(--font-display); }

/* Inputs */
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=date],
select,
textarea{
  font-family:var(--font-body);
  border-radius:8px;
}
input:focus,select:focus,textarea:focus{ outline:2px solid var(--owh-green); }

/* --- Responsive header ---------------------------------------------------
   Every customer page declares its own .header (100px tall, 40px padding,
   120px-minimum badge), which is fine on a desktop and overflows a phone.
   This file loads before those page styles, so the phone rules below carry
   !important to win. Nothing here changes the desktop layout. */

html, body{ max-width:100%; overflow-x:hidden; }

.header{ gap:12px; }
.header .logo{ white-space:nowrap; }
.header .user-badge span{ max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:720px){
  .header{
    height:auto !important;
    min-height:60px;
    padding:10px 14px !important;
    gap:8px;
  }
  .header .logo{ font-size:18px !important; gap:6px; }
  .header .logo svg{ width:26px !important; height:26px !important; }
  .header .logo-sub{ font-size:9px; letter-spacing:.12em; }
  .header .main-menu{ font-size:11px !important; letter-spacing:.3px !important; gap:5px !important; }
  .header .main-menu svg{ width:18px !important; height:18px !important; }
  .header .user-badge{ min-width:0 !important; font-size:13px !important; gap:5px !important; }
  .header .user-badge span{ max-width:72px; }
  .header .user-badge svg{ width:18px !important; height:18px !important; }
  .header .header-spacer{ width:60px !important; flex:0 0 60px; }
  main{ padding-left:16px !important; padding-right:16px !important; }
}

@media (max-width:400px){
  .header .logo{ font-size:16px !important; }
  .header .logo-sub{ display:none; }
  .header .user-badge span{ max-width:56px; }
  .header .header-spacer{ width:40px !important; flex-basis:40px; }
}