/* ─────────────────────────────────────────────────────────────────────────────
   BHAGYAPHAL — Design System + Widget Styles
   Works inside Elementor sections on both light and dark backgrounds.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --bhp-gold:       #c9a84c;
  --bhp-gold-lt:    #e2c97e;
  --bhp-gold-dim:   rgba(201,168,76,0.3);
  --bhp-violet:     #7c6faa;
  --bhp-violet-lt:  #b0a6d4;
  --bhp-dark-bg:    #12101e;
  --bhp-dark-bg2:   #1a1830;
  --bhp-dark-fg:    #f0e9d8;
  --bhp-dark-fg2:   #a89e8c;
  --bhp-light-bg:   #faf7f2;
  --bhp-light-bg2:  #f0e8d6;
  --bhp-light-fg:   #1a1410;
  --bhp-light-fg2:  #6b5f4a;
  --bhp-radius:     14px;
  --bhp-font-d:     'Cormorant Garamond', Georgia, serif;
  --bhp-font-b:     inherit;
}

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

/* ── WIDGET BASE ─────────────────────────────────────────────────────────────
   .bhp-dark class on a section/container overrides to dark palette          */

.bhp-widget {
  --w-bg:     var(--bhp-light-bg);
  --w-bg2:    var(--bhp-light-bg2);
  --w-fg:     var(--bhp-light-fg);
  --w-fg2:    var(--bhp-light-fg2);
  --w-border: rgba(154,111,30,0.22);
  color: var(--w-fg);
}
.elementor-section.bhp-dark .bhp-widget,
.elementor-column.bhp-dark .bhp-widget,
[class*="e-con"].bhp-dark .bhp-widget,
.bhp-dark .bhp-widget,
.bhp-widget.bhp-dark {
  --w-bg:     var(--bhp-dark-bg);
  --w-bg2:    var(--bhp-dark-bg2);
  --w-fg:     var(--bhp-dark-fg);
  --w-fg2:    var(--bhp-dark-fg2);
  --w-border: rgba(201,168,76,0.2);
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.bhp-btn-primary {
  display: inline-block;
  background: var(--bhp-gold);
  color: #09080f !important;
  border: none; border-radius: 8px;
  padding: 12px 26px;
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: background .2s, transform .15s;
  font-family: var(--bhp-font-b);
}
.bhp-btn-primary:hover { background: var(--bhp-gold-lt); transform: translateY(-2px) }

.bhp-btn-outline {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--bhp-gold-dim);
  color: var(--w-fg);
  border-radius: 8px;
  padding: 11px 24px;
  font-size: 0.85rem;
  cursor: pointer; text-decoration: none;
  transition: all .2s;
  font-family: var(--bhp-font-b);
}
.bhp-btn-outline:hover { border-color: var(--bhp-gold); color: var(--bhp-gold) }

/* ── CARD ────────────────────────────────────────────────────────────────── */
.bhp-card {
  background: var(--w-bg2);
  border: 1px solid var(--w-border);
  border-radius: var(--bhp-radius);
  padding: 28px;
  transition: border-color .2s, transform .2s;
}
.bhp-card:hover { border-color: var(--bhp-gold) }

/* ── SECTION HEADER ─────────────────────────────────────────────────────── */
.bhp-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bhp-gold); margin-bottom: 8px;
  font-family: var(--bhp-font-b);
}
.bhp-widget h2 {
  font-family: var(--bhp-font-d);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 300; line-height: 1.2;
  margin-bottom: 8px;
  color: var(--w-fg);
}
.bhp-widget h3 {
  font-family: var(--bhp-font-d);
  font-size: 1.2rem; font-weight: 400;
  color: var(--w-fg);
}
.bhp-sub { color: var(--w-fg2); margin-bottom: 32px; line-height: 1.7 }

/* ── FORM STYLES ─────────────────────────────────────────────────────────── */
.bhp-form { display: flex; flex-direction: column; gap: 16px }
.bhp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
@media (max-width: 600px) { .bhp-form-row { grid-template-columns: 1fr } }

.bhp-form label {
  display: block;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--w-fg2); margin-bottom: 6px;
  font-family: var(--bhp-font-b);
}
.bhp-form input,
.bhp-form select,
.bhp-form textarea {
  width: 100%; padding: 11px 14px;
  background: var(--w-bg);
  border: 1px solid var(--w-border);
  border-radius: 8px;
  color: var(--w-fg);
  font-family: var(--bhp-font-b); font-size: 0.9rem;
  transition: border-color .2s;
  box-sizing: border-box;
}
.bhp-form input:focus,
.bhp-form select:focus,
.bhp-form textarea:focus {
  outline: none; border-color: var(--bhp-gold);
}

/* ── PANCHANG WIDGET ─────────────────────────────────────────────────────── */
.bhp-panchang-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 28px; flex-wrap: wrap; gap: 14px;
}
.bhp-panch-date span { font-size: 0.85rem; color: var(--w-fg2) }
.bhp-panch-date strong {
  display: block; font-family: var(--bhp-font-d);
  font-size: 1.9rem; font-weight: 300; color: var(--w-fg);
  line-height: 1.1;
}
.bhp-panch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--w-border);
  border-radius: 10px; overflow: hidden;
  margin-bottom: 20px;
}
.bhp-panch-item {
  background: var(--w-bg2);
  padding: 16px 18px;
}
.bhp-panch-label {
  font-size: 0.67rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--w-fg2); margin-bottom: 4px;
}
.bhp-panch-val {
  font-family: var(--bhp-font-d); font-size: 1.05rem;
  color: var(--w-fg);
}
.bhp-panch-val.gold { color: var(--bhp-gold) }
.bhp-panch-times {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--w-border);
  font-size: 0.82rem;
}
.bhp-time-item strong {
  display: block; color: var(--w-fg); font-weight: 600;
  font-size: 0.75rem; margin-bottom: 2px;
}
.bhp-time-item { color: var(--w-fg2) }

/* ── HOROSCOPE WIDGET ────────────────────────────────────────────────────── */
.bhp-sign-strip {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
}
.bhp-sign-pill {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--w-bg2);
  border: 1px solid var(--w-border);
  cursor: pointer; min-width: 68px;
  transition: all .2s;
  font-family: var(--bhp-font-b);
  color: var(--w-fg2);
}
.bhp-sign-pill:hover, .bhp-sign-pill.active {
  border-color: var(--bhp-gold);
  background: rgba(201,168,76,0.08);
  color: var(--bhp-gold);
}
.bhp-sign-glyph { font-size: 1.3rem }
.bhp-sign-name { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase }

.bhp-horo-tabs {
  display: flex; gap: 6px; margin-bottom: 20px;
}
.bhp-horo-tab {
  padding: 7px 16px; border-radius: 6px;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; border: 1px solid var(--w-border);
  background: transparent; color: var(--w-fg2);
  transition: all .2s; font-family: var(--bhp-font-b);
}
.bhp-horo-tab.active { background: var(--bhp-gold); color: #09080f; border-color: var(--bhp-gold) }

.bhp-horo-reading {
  background: var(--w-bg2); border: 1px solid var(--w-border);
  border-radius: var(--bhp-radius); padding: 28px;
}
.bhp-horo-title {
  font-family: var(--bhp-font-d); font-size: 1.5rem; font-weight: 300;
  color: var(--w-fg); margin-bottom: 4px;
}
.bhp-horo-period {
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bhp-gold); margin-bottom: 14px;
}
.bhp-horo-text { color: var(--w-fg2); line-height: 1.75; margin-bottom: 20px }
.bhp-meters { display: flex; gap: 18px; flex-wrap: wrap }
.bhp-meter { min-width: 110px }
.bhp-meter-label {
  font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--w-fg2); margin-bottom: 5px;
}
.bhp-meter-bar { height: 3px; background: var(--w-border); border-radius: 2px; overflow: hidden }
.bhp-meter-fill { height: 100%; border-radius: 2px; background: var(--bhp-gold); transition: width .6s }

/* ── SERVICE CARDS ───────────────────────────────────────────────────────── */
.bhp-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.bhp-service-card {
  background: var(--w-bg2);
  border: 1px solid var(--w-border);
  border-radius: var(--bhp-radius);
  padding: 26px;
  cursor: pointer;
  transition: all .22s;
}
.bhp-service-card:hover { border-color: var(--bhp-gold); transform: translateY(-3px) }
.bhp-svc-icon { font-size: 1.5rem; margin-bottom: 14px }
.bhp-svc-name {
  font-family: var(--bhp-font-d); font-size: 1.2rem; font-weight: 400;
  color: var(--w-fg); margin-bottom: 8px;
}
.bhp-svc-desc { font-size: 0.82rem; color: var(--w-fg2); line-height: 1.65; margin-bottom: 18px }
.bhp-svc-price {
  font-family: var(--bhp-font-d); font-size: 1.5rem; font-weight: 300;
  color: var(--bhp-gold); margin-bottom: 16px;
}
.bhp-svc-price span { font-size: 0.72rem; font-family: var(--bhp-font-b); color: var(--w-fg2) }

/* ── ASTROLOGER CARDS ────────────────────────────────────────────────────── */
.bhp-astro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}
.bhp-astro-card {
  background: var(--w-bg2);
  border: 1px solid var(--w-border);
  border-radius: var(--bhp-radius);
  padding: 24px; text-align: center;
  transition: all .22s;
}
.bhp-astro-card:hover { border-color: var(--bhp-gold); transform: translateY(-3px) }
.bhp-astro-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--w-bg); margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; border: 2px solid var(--w-border);
}
.bhp-astro-name {
  font-family: var(--bhp-font-d); font-size: 1.05rem; font-weight: 400;
  color: var(--w-fg); margin-bottom: 3px;
}
.bhp-astro-spec {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bhp-gold); margin-bottom: 6px;
}
.bhp-astro-exp { font-size: 0.78rem; color: var(--w-fg2); margin-bottom: 12px }
.bhp-astro-rating { color: var(--bhp-gold); font-size: 0.8rem; margin-bottom: 14px }
.bhp-astro-btns { display: flex; gap: 8px }
.bhp-astro-btn {
  flex: 1; padding: 8px; border-radius: 6px;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; border: none; transition: all .2s;
  font-family: var(--bhp-font-b);
}
.bhp-astro-btn.chat { background: var(--bhp-gold); color: #09080f }
.bhp-astro-btn.chat:hover { background: var(--bhp-gold-lt) }
.bhp-astro-btn.call {
  background: transparent;
  border: 1px solid var(--bhp-violet);
  color: var(--bhp-violet-lt);
}
.bhp-astro-btn.call:hover { background: var(--bhp-violet); color: #fff }

/* ── CHECKOUT ────────────────────────────────────────────────────────────── */
.bhp-checkout-wrap {
  max-width: 560px; margin: 0 auto;
}
.bhp-order-summary {
  border-bottom: 1px solid var(--w-border);
  margin-bottom: 24px; padding-bottom: 20px;
}
.bhp-order-title {
  font-family: var(--bhp-font-d); font-size: 1.3rem;
  color: var(--w-fg); margin-bottom: 4px;
}
.bhp-order-price {
  font-family: var(--bhp-font-d); font-size: 2rem; font-weight: 300;
  color: var(--bhp-gold);
}

/* ── UTILITY ─────────────────────────────────────────────────────────────── */
.bhp-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 40px; color: var(--w-fg2); gap: 10px;
  font-size: 0.85rem;
}
.bhp-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--w-border);
  border-top-color: var(--bhp-gold);
  border-radius: 50%;
  animation: bhp-spin .7s linear infinite;
}
@keyframes bhp-spin { to { transform: rotate(360deg) } }

.bhp-error {
  background: rgba(220,50,50,0.1); border: 1px solid rgba(220,50,50,0.3);
  border-radius: 8px; padding: 14px 18px;
  color: #ff8080; font-size: 0.85rem;
}
.bhp-success {
  background: rgba(50,180,80,0.1); border: 1px solid rgba(50,180,80,0.3);
  border-radius: 8px; padding: 14px 18px;
  color: #5fca7a; font-size: 0.85rem;
}

@media (max-width: 480px) {
  .bhp-card { padding: 18px }
  .bhp-horo-reading { padding: 18px }
  .bhp-sign-strip { gap: 6px }
  .bhp-sign-pill { min-width: 58px; padding: 10px 10px }
}

/* ── autocomplete ───────────────────────────────── */
.bhp-autocomplete{position:absolute;top:100%;left:0;right:0;background:var(--w-bg2,#fff);
  border:1px solid var(--w-border,#ddd);border-radius:8px;z-index:9999;max-height:220px;overflow-y:auto;box-shadow:0 4px 20px rgba(0,0,0,.15)}
.bhp-ac-item{padding:10px 14px;cursor:pointer;font-size:.88rem}
.bhp-ac-item:hover{background:var(--bhp-gold,.c9a84c);color:#fff}

/* ── tables ─────────────────────────────────────── */
.bhp-table{width:100%;border-collapse:collapse;font-size:.84rem;margin-top:12px}
.bhp-table th{background:var(--w-bg2,#f5f5f5);padding:8px 10px;text-align:left;font-weight:600;color:var(--w-fg2,#666)}
.bhp-table td{padding:8px 10px;border-top:1px solid var(--w-border,#eee);color:var(--w-fg,#222)}
.bhp-table tr:hover td{background:var(--w-bg2,#fafafa)}

/* ── kundli / match result ───────────────────────── */
.bhp-dasha-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.bhp-dasha-row{display:flex;justify-content:space-between;background:var(--w-bg2,#f5f5f5);
  padding:8px 12px;border-radius:8px;font-size:.84rem}
.bhp-meta-row{margin-top:10px;font-size:.85rem;color:var(--w-fg,#333)}
.bhp-meta-row strong{color:var(--bhp-gold,#c9a84c)}

/* ── match score ─────────────────────────────────── */
.bhp-match-score{text-align:center;padding:20px 0}
.bhp-score-num{font-size:3rem;font-weight:700;color:var(--bhp-gold,#c9a84c);line-height:1}
.bhp-score-num span{font-size:1.4rem;color:var(--w-fg2,#888)}
.bhp-score-label{font-size:1rem;margin-top:6px;color:var(--w-fg,#333)}

/* ── sade sati ───────────────────────────────────── */
.bhp-ss-status{padding:14px 18px;border-radius:10px;font-weight:600;margin-bottom:14px;font-size:.95rem}
.bhp-ss-status.active{background:#fff3cd;color:#856404;border:1px solid #ffc107}
.bhp-ss-status.clear{background:#d4edda;color:#155724;border:1px solid #28a745}

/* ── numerology cards ────────────────────────────── */
.bhp-num-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin:16px 0}
.bhp-num-card{background:var(--w-bg2,#f5f5f5);border-radius:12px;padding:18px 14px;text-align:center;
  border:1px solid var(--w-border,#eee)}
.bhp-num-num{font-size:2.4rem;font-weight:700;color:var(--bhp-gold,#c9a84c);font-family:'Cormorant Garamond',serif;line-height:1}
.bhp-num-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;margin-top:6px;color:var(--w-fg2,#888)}
.bhp-num-desc{font-size:.8rem;color:var(--w-fg,#444);margin-top:8px;line-height:1.4}

/* ── horoscope text ──────────────────────────────── */
.bhp-horo-reading{padding:8px 0}
.bhp-horo-text{line-height:1.7;color:var(--w-fg,#333);margin:12px 0;font-size:.93rem}
.bhp-horo-meta{font-size:.85rem;color:var(--w-fg2,#666);margin-top:10px}
.bhp-horo-meta strong{color:var(--bhp-gold,#c9a84c)}

/* ── chat modal ──────────────────────────────────── */
.bhp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99990;
  display:flex;align-items:center;justify-content:center;padding:20px}
.bhp-modal{background:var(--w-bg,#fff);border-radius:16px;width:100%;max-width:480px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;display:flex;flex-direction:column}
.bhp-modal-head{display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;background:var(--w-bg2,#f5f5f5);font-weight:600;font-size:.95rem}
.bhp-modal-head button{background:none;border:none;cursor:pointer;font-size:1.1rem;color:var(--w-fg2,#666)}
.bhp-modal-body{display:flex;flex-direction:column;height:380px}
.bhp-chat-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.bhp-chat-input-row{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--w-border,#eee)}
.bhp-chat-input-row input{flex:1;border:1px solid var(--w-border,#ddd);border-radius:8px;padding:8px 12px;font-size:.88rem}
.bhp-chat-input-row button{background:var(--bhp-gold,#c9a84c);color:#fff;border:none;border-radius:8px;
  padding:8px 16px;cursor:pointer;font-size:.88rem}
.bhp-msg{display:flex;flex-direction:column;max-width:75%}
.bhp-msg.mine{align-self:flex-end;align-items:flex-end}
.bhp-msg.theirs{align-self:flex-start}
.bhp-msg-sender{font-size:.72rem;color:var(--w-fg2,#888);margin-bottom:2px}
.bhp-msg-text{background:var(--w-bg2,#f5f5f5);padding:8px 12px;border-radius:10px;
  font-size:.88rem;line-height:1.4}
.bhp-msg.mine .bhp-msg-text{background:var(--bhp-gold,#c9a84c);color:#fff}