/* ─────────────────────────────────────────────
   OCHRE MOROCCO — Booking Modal v1.0
   ───────────────────────────────────────────── */
.bk-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .25s}
.bk-overlay.bk-open{opacity:1;pointer-events:all}
.bk-modal{background:#fff;border-radius:20px;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.28);display:flex;flex-direction:column;transform:translateY(24px) scale(.97);transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.bk-overlay.bk-open .bk-modal{transform:none}

/* Header */
.bk-header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px 14px;border-bottom:1px solid #f0ebe4;flex-shrink:0}
.bk-brand{font-weight:700;font-size:.9rem;color:#1a1a1a;display:flex;align-items:center;gap:7px}
.bk-brand i{color:#c8922b}
.bk-close{background:none;border:none;cursor:pointer;font-size:1.5rem;color:#aaa;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .15s,color .15s}
.bk-close:hover{background:#f5f5f5;color:#333}

/* Banner */
.bk-banner{background:linear-gradient(135deg,#c8922b 0%,#a87020 100%);color:#fff;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.bk-banner-name{font-weight:700;font-size:.95rem;line-height:1.3}
.bk-banner-price{font-size:.82rem;opacity:.9;white-space:nowrap;font-weight:600}

/* Steps */
.bk-steps{display:flex;align-items:center;justify-content:center;padding:14px 22px 4px;gap:0;flex-shrink:0}
.bk-step{display:flex;flex-direction:column;align-items:center;gap:3px;opacity:.38;transition:opacity .25s}
.bk-step--active{opacity:1}
.bk-step-num{width:26px;height:26px;border-radius:50%;background:#eee;color:#999;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;transition:background .25s,color .25s}
.bk-step--active .bk-step-num{background:#c8922b;color:#fff}
.bk-step-lbl{font-size:.68rem;font-weight:600;color:#aaa}
.bk-step--active .bk-step-lbl{color:#c8922b}
.bk-step-sep{flex:1;height:2px;background:#eee;min-width:20px;max-width:56px;margin:0 6px 16px}

/* Body */
.bk-body{padding:14px 22px 8px;flex:1;min-height:0}
.bk-hidden{display:none!important}

/* Fields */
.bk-field{margin-bottom:13px}
.bk-label{display:block;font-size:.8rem;font-weight:600;color:#444;margin-bottom:4px}
.bk-req{color:#e53935;margin-left:2px}
.bk-input{width:100%;padding:10px 13px;border:1.5px solid #e0d8cf;border-radius:10px;font-size:.88rem;font-family:inherit;background:#faf8f5;color:#1a1a1a;transition:border-color .2s,box-shadow .2s;outline:none}
.bk-input:focus{border-color:#c8922b;box-shadow:0 0 0 3px rgba(200,146,43,.12);background:#fff}
.bk-input--error{border-color:#e53935!important;box-shadow:0 0 0 3px rgba(229,57,53,.08)!important}
.bk-textarea{resize:vertical;min-height:76px}
.bk-err{color:#e53935;font-size:.72rem;margin-top:3px;min-height:14px}

/* Buttons */
.bk-btn-primary{width:100%;padding:13px;margin-top:6px;background:linear-gradient(135deg,#c8922b,#a87020);color:#fff;border:none;border-radius:12px;font-size:.92rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .2s,transform .1s;font-family:inherit}
.bk-btn-primary:hover{opacity:.91;transform:translateY(-1px)}
.bk-btn-back{background:none;border:none;cursor:pointer;color:#999;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:6px;padding:8px 0;margin-top:6px;transition:color .2s;font-family:inherit}
.bk-btn-back:hover{color:#444}

/* Summary */
.bk-summary{background:#faf8f5;border-radius:12px;padding:13px;margin-bottom:14px;border:1px solid #f0ebe4}
.bk-sum-title{font-weight:700;font-size:.82rem;color:#c8922b;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.bk-sum-row{display:flex;justify-content:space-between;font-size:.8rem;padding:4px 0;border-bottom:1px solid #f0ebe4}
.bk-sum-row:last-child{border:none}
.bk-sum-k{color:#888}
.bk-sum-v{font-weight:600;color:#333;text-align:right;max-width:58%;word-break:break-word}
.bk-sum-total{display:flex;justify-content:space-between;font-size:.95rem;font-weight:800;color:#1a1a1a;padding-top:9px;margin-top:4px;border-top:2px solid #c8922b}

/* Payment options */
.bk-pay-heading{font-size:.82rem;font-weight:700;color:#555;margin-bottom:10px}
.bk-pay-opts{display:flex;flex-direction:column;gap:9px}
.bk-pay-opt{display:flex;align-items:center;gap:13px;background:#faf8f5;border:1.5px solid #e0d8cf;border-radius:14px;padding:13px 15px;cursor:pointer;text-align:left;width:100%;transition:border-color .2s,box-shadow .2s,background .2s;font-family:inherit}
.bk-pay-opt:hover{border-color:#c8922b;background:#fff;box-shadow:0 4px 16px rgba(200,146,43,.14)}
.bk-pay-opt:disabled{opacity:.6;cursor:not-allowed}
.bk-pay-ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.bk-pay-ico--wa{background:#e8f5e9;color:#25d366}
.bk-pay-ico--cash{background:#e8f5e9;color:#1e6b3c}
.bk-pay-ico--card{background:#fff3e0;color:#c8922b}
.bk-pay-info{flex:1}
.bk-pay-info strong{display:block;font-size:.88rem;color:#1a1a1a;font-weight:700}
.bk-pay-info small{font-size:.75rem;color:#888}
.bk-pay-opt .fa-chevron-right{color:#ccc;font-size:.78rem}

/* Step 3 */
.bk-success-ico{text-align:center;font-size:3.2rem;margin:10px 0 6px}
.bk-success-title{text-align:center;font-size:1.2rem;font-weight:800;color:#1a1a1a;margin-bottom:7px}
.bk-success-msg{text-align:center;font-size:.85rem;color:#666;margin-bottom:14px;line-height:1.6}
.bk-success-box{background:#faf8f5;border-radius:12px;padding:13px;margin-bottom:14px;border:1px solid #f0ebe4}
.bk-confirm-row{display:flex;align-items:center;gap:9px;font-size:.83rem;padding:6px 0;border-bottom:1px solid #f0ebe4;color:#444}
.bk-confirm-row:last-child{border:none}
.bk-confirm-row i{color:#c8922b;width:15px;flex-shrink:0}
.bk-confirm-total{font-weight:800;color:#1a1a1a;font-size:.92rem}
.bk-confirm-total i{color:#1e6b3c}
.bk-btn-pay{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;background:linear-gradient(135deg,#1e6b3c,#155a30);color:#fff;border-radius:12px;font-size:.92rem;font-weight:700;text-decoration:none;margin-bottom:10px;transition:opacity .2s}
.bk-btn-pay:hover{opacity:.9}
.bk-pay-alt{text-align:center;font-size:.83rem;color:#666;margin-bottom:10px}
.bk-pay-alt a{color:#25d366;font-weight:700}

/* Footer */
.bk-footer-bar{border-top:1px solid #f0ebe4;padding:11px 22px;font-size:.7rem;color:#bbb;text-align:center;flex-shrink:0}
.bk-footer-bar i{color:#c8922b}

/* Scrollbar */
.bk-modal::-webkit-scrollbar{width:4px}
.bk-modal::-webkit-scrollbar-thumb{background:#e0d8cf;border-radius:4px}

/* Override existing .btn-book to brand gold */
.btn-book{background:linear-gradient(135deg,#c8922b,#a87020)!important;color:#fff!important;border:none;cursor:pointer;font-family:inherit}
.btn-book:hover{opacity:.88!important}

@media(max-width:540px){
  .bk-modal{border-radius:20px 20px 0 0;max-height:96vh}
  .bk-overlay{align-items:flex-end;padding:0}
}


/* ═══════════════════════════════════════════════════════════════
   LOCATION SECTION
   ═══════════════════════════════════════════════════════════════ */
.loc-section {
  background: #fff;
  padding: 72px 24px;
  border-top: 1px solid #eee;
}
.loc-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}
.loc-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #1a1a1a;
  margin: 6px 0 28px;
  line-height: 1.25;
}
.loc-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 30px;
}
.loc-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #f7f3ee;
  border-radius: 14px;
  padding: 16px 20px;
  transition: box-shadow .2s;
}
.loc-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.07); }
.loc-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #c8922b, #a87020);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
}
.loc-icon.loc-icon-green { background: linear-gradient(135deg, #25853d, #1e6b3c); }
.loc-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.55;
}
.loc-text strong {
  font-size: .75rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .7px;
}
.loc-text span, .loc-text a {
  font-size: .92rem;
  color: #1a1a1a;
}
.loc-text a:hover { color: #c8922b; }
.btn-directions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #c8922b, #a87020);
  color: #fff;
  padding: 13px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(200,146,43,.35);
  transition: transform .18s, box-shadow .18s;
}
.btn-directions:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(200,146,43,.45);
}
.loc-map {
  border-radius: 20px;
  overflow: hidden;
  height: 430px;
  box-shadow: 0 8px 40px rgba(0,0,0,.12);
  position: relative;
}
.loc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── MAP PLACEHOLDER CARD ── */
.loc-map-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f7f3ee 0%, #ede5d8 100%);
  border-radius: 20px; height: 430px; text-align: center; padding: 40px;
  box-shadow: 0 8px 40px rgba(0,0,0,.08);
}
.map-pin-icon { font-size: 3.8rem; color: var(--gold,#c8922b); margin-bottom: 16px; }
.loc-map-card h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 8px; color: #1a1a1a; }
.loc-map-card p  { color: #666; margin-bottom: 28px; line-height: 1.6; font-size: .9rem; }
.btn-open-map {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg,#c8922b,#a87020); color: #fff;
  padding: 13px 28px; border-radius: 50px; font-weight: 700; font-size: .92rem;
  text-decoration: none; box-shadow: 0 4px 20px rgba(200,146,43,.35);
  margin-bottom: 12px; transition: transform .18s, box-shadow .18s;
}
.btn-open-map:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(200,146,43,.45); }
.btn-visit-web {
  display: inline-flex; align-items: center; gap: 8px;
  background: #1a1a1a; color: #fff; padding: 11px 24px;
  border-radius: 50px; font-weight: 600; font-size: .85rem;
  text-decoration: none; transition: background .2s;
}
.btn-visit-web:hover { background: #333; }

/* ── HEADER RIGHT + LANG SWITCHER (shared across all pages) ── */
.header-right { display: flex; align-items: center; gap: 10px; }
.hide-sm { display: inline-flex; }
.lang-switcher { position: relative; }
.lang-switcher-btn {
  background: #f4f0ea; border: 1.5px solid #e0d4c0;
  color: #1a1a1a; padding: 6px 12px; border-radius: 20px;
  font-size: .78rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 5px; font-family: inherit;
  transition: background .18s; white-space: nowrap;
}
.lang-switcher-btn:hover { background: #ede5d8; }
.lang-switcher-btn .fa-globe { color: #c8922b; }
.lang-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border-radius: 12px;
  box-shadow: 0 6px 28px rgba(0,0,0,.16);
  padding: 6px; min-width: 140px; display: none; z-index: 9999;
  border: 1px solid #f0e8d8;
}
.lang-dropdown.open { display: flex; flex-direction: column; }
.lang-option {
  background: none; border: none; padding: 9px 14px; border-radius: 8px;
  cursor: pointer; font-size: .84rem; font-weight: 500;
  color: #333; text-align: left; transition: background .15s; width: 100%;
}
.lang-option:hover, .lang-option.active { background: #f7f0e6; color: #c8922b; font-weight: 700; }

@media (max-width: 820px) {
  .loc-inner { grid-template-columns: 1fr; gap: 32px; }
  .loc-map, .loc-map-card { height: 260px; }
  .loc-title { font-size: 1.45rem; }
  .loc-section { padding: 48px 20px; }
}
@media (max-width: 768px) {
  .hide-sm { display: none !important; }
  .lang-dropdown { right: auto; left: 0; }
}