/* ==========================================================
   PENANG THERAPY — WHITE THEME (Solid brand accents)
   ========================================================== */

/* Brand picks (solid) */
:root{
  --primary: #E76A80;      /* rosy pink (buttons, focus) */
  --primary-hover: #D85F75;/* slightly deeper on hover */
  --secondary: #7A5A78;    /* optional secondary (dim buttons) */

  --text:   #2b2b2b;
  --muted:  #666666;
  --bg:     #FAFAFA;
  --card:   #FFFFFF;
  --border: #E5E5E5;

  --radius: 10px;
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Optional font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* ===== Base layout ===== */
body{ background: var(--bg); color: var(--text); font-family: var(--font); }

.mbb-netflix-bg{
  min-height: 100vh;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:40px 12px;
}

/* Card (all steps) */
.mbb-card, .mbb-netflix-card{
  width:85%; max-width:620px;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:36px 40px;
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
}

/* Titles */
.mbb-netflix-title, .mbb-card h2{
  margin:0 0 22px;
  font-size:26px; font-weight:700; text-align:center; color:var(--text);
}

/* ===== Inputs ===== */
.mbb-input,
.mbb-card input[type="text"],
.mbb-card input[type="email"],
.mbb-card input[type="password"],
.mbb-card input[type="tel"],
.mbb-card select,
.mbb-card textarea{
  width:100%;
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:12px 14px;
  font-size:15px;
  margin-bottom:18px;
  transition: border-color .2s ease, box-shadow .2s ease;
  outline:none;
}
.mbb-input:focus,
.mbb-card input:focus,
.mbb-card select:focus,
.mbb-card textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(231,106,128,.18);
}

.mbb-card label{ color:var(--muted); font-size:14px; font-weight:500; }
.mbb-small{ color:var(--muted); font-size:13px; }

/* ===== Buttons (SOLID) ===== */
.mbb-btn,
button,
input[type="submit"]{
  display:inline-block; width:100%;
  border:none; border-radius: var(--radius);
  padding:12px 0; font-size:15px; font-weight:700;
  color:#fff; background: var(--primary);
  cursor:pointer;
  box-shadow: 0 4px 12px rgba(231,106,128,.25);
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
}
.mbb-btn:hover,
button:hover,
input[type="submit"]:hover{
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(231,106,128,.32);
}
.mbb-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Secondary (dim) */
.mbb-btn.secondary{
  background:#F4F4F4; color:var(--text); border:1px solid var(--border);
  box-shadow:none;
}
.mbb-btn.secondary:hover{
  background:#fff; border-color: var(--primary); color: var(--primary);
}

/* ===== Links & OR ===== */
.mbb-link{ color: var(--primary); text-decoration:none; font-weight:600; }
.mbb-link:hover{ color: var(--primary-hover); text-decoration: underline; }
.mbb-or{ color:#999; font-weight:700; text-align:center; }

/* ===== Alerts ===== */
.mbb-error{
  background:#FFE8EE; color: var(--primary);
  border:1px solid #FFD6DF; border-radius: var(--radius);
  padding:10px 12px; margin-bottom:16px; font-size:14px;
}
.mbb-success{
  background:#F1FFF5; color:#167c37;
  border:1px solid #B9E3C7; border-radius: var(--radius);
  padding:10px 12px; margin-bottom:16px; font-size:14px;
}

/* ===== Layout helpers ===== */
.mbb-row{ display:flex; gap:10px; }
.mbb-col{ flex:1; }
.mbb-compact{ margin-top:8px; }

/* ===== Password eye — icon-only with small zoom hover ===== */
/* Input wrapper keeps room on right for the eye */
.mbb-input-wrap{ position:relative; }
.mbb-input-wrap .mbb-input{ padding-right:42px; }

/* Eye button: no border, no pill, icon only */
.mbb-eye{
  position:absolute; right:10px; top:50%; transform: translateY(-50%);
  width:22px; height:22px;
  border:none; background:transparent; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: transform .12s ease, opacity .12s ease;
  opacity:.85;
}
.mbb-eye:hover{ transform: translateY(-50%) scale(1.08); opacity:1; }

/* SVG via background; uses currentColor for stroke */
.mbb-eye::before{
  content:""; width:20px; height:20px; display:block;
  background-repeat:no-repeat; background-size:20px 20px;
  color:#7a7a7a; /* icon grey */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%237a7a7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z'/>\
<circle cx='12' cy='12' r='3'/>\
</svg>");
}
.mbb-eye.is-shown::before{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%237a7a7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a21.77 21.77 0 0 1 5.06-6.94'/>\
<path d='M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 8 11 8a21.77 21.77 0 0 1-3.42 4.49'/>\
<path d='M1 1l22 22'/>\
<path d='M14.12 14.12A3 3 0 0 1 9.88 9.88'/>\
</svg>");
}

/* ===== Address / Map ===== */
#mbb-map{
  width:100%; height:200px; border-radius: var(--radius);
  background:#f4f4f4; border:1px solid var(--border); margin-top:10px; display:none;
}
.mbb-agree{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px; }

/* ===== Responsive ===== */
@media (max-width: 480px){
  .mbb-card, .mbb-netflix-card{ padding:28px 24px; }
  .mbb-netflix-title{ font-size:22px; }
  .mbb-btn{ font-size:14px; }
}

/* --- Step 2: Date field visibility & behavior --- */

/* Ensure the real date input is visible in all themes */
#mbb-booking-step #mbb-date {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100%;
}

/* If your site uses Flatpickr or similar, do NOT force calendar always visible.
   Prefer showing only when opened by the picker. */
#mbb-booking-step .flatpickr-calendar { display:none; }
#mbb-booking-step .flatpickr-calendar.open { display:block; }

/* Your wrapper already exists; target the real input ID (not a class that isn't used) */
.mbb-date-field { position:relative; max-width:420px; }
.mbb-date-field #mbb-date { width:100%; }
.mbb-date-field .mbb-date-icon {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  pointer-events:none; opacity:.7;
}

/* --- Step 2: Slots grid and chips --- */

/* Make sure the grid has room so the "loading" text doesn't collapse */
#mbb-slot-grid { min-height:44px; }

/* Your grid/chip styles are good—add keyboard focus and a slightly tighter look */
.mbb-slot-grid-inner{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px; margin-top:8px;
}

.mbb-slot-btn{
  border:1px solid #e8d6b8;
  background:#fff;
  padding:10px 12px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:background .15s ease, outline-color .15s ease, transform .06s ease;
}

.mbb-slot-btn:hover{ background:#fff9f0; transform:translateY(-1px); }
.mbb-slot-btn:focus-visible{
  outline:2px solid #e2b778;
  outline-offset:2px;
}

.mbb-slot-btn.active{
  outline:2px solid #e2b778;
  background:#fff7ea;
}

.mbb-slot-btn.disabled{
  opacity:.5; cursor:not-allowed;
}

/* Empty / loading text */
.mbb-slot-loading,
.mbb-slot-placeholder,
.mbb-slot-empty{
  color:#666; font-size:14px; padding:8px 0;
}

/* --- Buttons state (looks disabled until ready) --- */
#mbb-booking-continue-btn:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
  transform:none !important;
  box-shadow:none !important;
}