/*
Theme Name:   Mimpi Headspa
Theme URI:    https://mimpiheadspa.com
Description:  Child theme for Mimpi Headspa — Japanese head spa in Kuala Lumpur. Built on Hello Elementor. Implements the brand system (deep spa green + cream), Marcellus/Manrope type, fully-rounded pill buttons, and styling for WooCommerce (shop/cart/checkout) and Amelia (booking flow) to match the approved design.
Author:       Mimpi Headspa
Template:     hello-elementor
Version:      3.7.0
Text Domain:  mimpi-headspa
*/

/* =========================================================================
   1. BRAND TOKENS
   Single source of truth. Every color/spacing value in the design lives here.
   Referenced by this file, woocommerce.css and amelia.css.
   ========================================================================= */
:root{
  /* Brand greens */
  --mimpi-green:        #264033;   /* primary — logo background */
  --mimpi-green-dark:   #1b2f24;   /* hover / pressed */
  --mimpi-green-ink:    #131e18;   /* toasts, deepest shade */

  /* Surfaces */
  --mimpi-bg:           #F1ECE1;   /* page background (cream) */
  --mimpi-card:         #FBF8F1;   /* cards / panels */
  --mimpi-accent-soft:  #E7DCC9;   /* soft accent chips */
  --mimpi-border:       #E7DECF;   /* default borders */
  --mimpi-border-2:     #E2D9C8;   /* alt borders (desktop) */
  --mimpi-divider:      #ece4d4;   /* thin dividers inside cards */

  /* Text */
  --mimpi-text:         #24261F;   /* primary text */
  --mimpi-text-2:       #5c5a51;   /* secondary body text */
  --mimpi-muted:        #8A8578;   /* muted / captions */

  /* Accents */
  --mimpi-gold:         #D99A3B;   /* stars / rating / cart badge */
  --mimpi-gold-soft:    #c7b596;   /* membership label gold */
  --mimpi-strike:       #A8A396;   /* struck-through sale price */
  --mimpi-danger:       #a34a3a;   /* log out / destructive */

  /* On-green text */
  --mimpi-on-green:     #f1ece1;
  --mimpi-on-green-2:   #cbc7bb;

  /* Type */
  --mimpi-font-head: 'Marcellus', Georgia, 'Times New Roman', serif;
  --mimpi-font-body: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Shape */
  --mimpi-radius-pill: 100px;
  --mimpi-radius-lg:   24px;
  --mimpi-radius-md:   18px;
  --mimpi-radius-sm:   14px;

  /* Elevation */
  --mimpi-shadow-card: 0 10px 24px -20px rgba(38,64,51,.5);
  --mimpi-shadow-pop:  0 24px 50px -30px rgba(38,64,51,.4);

  /* Decorative image-placeholder gradients (replace areas with real photos) */
  --mimpi-grad-spa:   linear-gradient(158deg,#2c4437,#587a5f 56%,#c9b696);
  --mimpi-grad-card:  linear-gradient(150deg,#37503f,#6d8a71 60%,#cbb995);
  --mimpi-grad-prod:  linear-gradient(150deg,#efe4cf,#d7c19d);
}

/* =========================================================================
   2. BASE
   ========================================================================= */
/* Border-box everywhere. Hello Elementor sets this too, but declaring it here
   means the theme's layouts measure identically outside WordPress (e.g. in
   mockup.html) instead of silently running ~80px wider. */
*, *::before, *::after{ box-sizing: border-box; }

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

h1,h2,h3,h4,.mimpi-serif,
.elementor-widget-heading .elementor-heading-title{
  font-family: var(--mimpi-font-head);
  font-weight: 400;          /* Marcellus only ships one weight */
  letter-spacing: .3px;
  color: var(--mimpi-text);
}

a{ color: var(--mimpi-green); text-decoration: none; }
a:hover{ color: var(--mimpi-green-dark); }

/* Selection */
::selection{ background: var(--mimpi-accent-soft); color: var(--mimpi-green); }

/* =========================================================================
   3. GLOBAL PILL BUTTONS
   Applies to Elementor buttons, WooCommerce buttons and plain <button>.
   Primary = solid green; secondary = cream w/ green outline.
   ========================================================================= */
.mimpi-btn,
.elementor-button,
.wp-block-button__link,
a.button, button.button, .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mimpi-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--mimpi-on-green);
  background: var(--mimpi-green);
  border: 1px solid var(--mimpi-green);
  border-radius: var(--mimpi-radius-pill);
  padding: 15px 30px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.mimpi-btn:hover,
.elementor-button:hover,
.wp-block-button__link:hover,
a.button:hover, button.button:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  background: var(--mimpi-green-dark);
  border-color: var(--mimpi-green-dark);
  color: var(--mimpi-on-green);
}

/* Secondary / outline variant */
.mimpi-btn--ghost,
.elementor-button.is-ghost,
.woocommerce a.button.alt.outline{
  background: var(--mimpi-card);
  color: var(--mimpi-green);
  border: 1px solid var(--mimpi-green);
}
.mimpi-btn--ghost:hover,
.elementor-button.is-ghost:hover{
  background: var(--mimpi-accent-soft);
  color: var(--mimpi-green);
}

/* =========================================================================
   4. REUSABLE BRAND UTILITIES  (use as Elementor CSS classes)
   ========================================================================= */
.mimpi-card{
  background: var(--mimpi-card);
  border: 1px solid var(--mimpi-border);
  border-radius: var(--mimpi-radius-lg);
  box-shadow: var(--mimpi-shadow-card);
}
.mimpi-chip{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mimpi-accent-soft);
  color: var(--mimpi-green);
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  padding: 6px 13px; border-radius: var(--mimpi-radius-pill);
}
.mimpi-chip--onphoto{
  background: rgba(19,30,24,.5);
  color: var(--mimpi-on-green);
  border: 1px solid rgba(240,235,224,.3);
}
.mimpi-eyebrow{
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: var(--mimpi-muted); text-transform: uppercase;
}
.mimpi-price{ font-size: 22px; font-weight: 800; color: var(--mimpi-green); }
.mimpi-price-old{ font-size: 14px; color: var(--mimpi-strike); text-decoration: line-through; }
.mimpi-photo{                       /* gradient placeholder — swap background for real image */
  background: var(--mimpi-grad-spa);
  border-radius: var(--mimpi-radius-md);
  overflow: hidden;
}

/* Rating stars */
.mimpi-stars{ display:inline-flex; align-items:center; gap:4px; color: var(--mimpi-gold); font-weight:700; }

/* Section rhythm helpers */
.mimpi-section{ padding: 60px 0; }
.mimpi-section--tight{ padding: 40px 0; }

/* Membership band */
.mimpi-membership{
  background: var(--mimpi-green);
  color: var(--mimpi-on-green);
  border-radius: 28px;
  padding: 40px;
}
.mimpi-membership .mimpi-membership__label{ color: var(--mimpi-gold-soft); }

/* =========================================================================
   5. HELLO ELEMENTOR RESETS
   Neutralize the parent theme's plain look so cream bg + type show through.
   ========================================================================= */
.page-header, .entry-header .entry-title{ display: none; }   /* Elementor owns page titles */