:root{
  --hrh-gold:#c8a96a;
  --hrh-gold-light:#e2c98f;
  --hrh-gold-dark:#9c7f43;
  --hrh-brown:#2b1a0f;
  --hrh-text:#6b5847;
  --hrh-cream:#f5efe4;
  --hrh-mx:50%;
  --hrh-my:50%;
}

/* ---------- Trigger button ---------- */
.hrh-open-btn{
  display:inline-block;padding:16px 38px;border:0;cursor:pointer;
  background:var(--hrh-gold);color:var(--hrh-brown);
  font:600 13px/1 inherit;letter-spacing:3px;text-transform:uppercase;
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.hrh-open-btn:hover{
  background:var(--hrh-gold-light);transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(200,169,106,.45);
}

/* ---------- Overlay (hidden until Book Now is clicked) ---------- */
.hrh-overlay{
  position:fixed;inset:0;z-index:999999;
  display:flex;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;
  background:rgba(25,14,7,.72);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s ease, visibility .4s ease;
  perspective:1400px;
}
.hrh-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}

/* ---------- Popup card ---------- */
.hrh-popup{
  position:relative;width:100%;max-width:760px;margin:auto;
  background:var(--hrh-cream);padding:56px 44px 44px;text-align:center;
  font-family:inherit;border:1px solid rgba(200,169,106,.5);
  box-shadow:0 40px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.4) inset;
  transform:translateY(40px) scale(.96);opacity:0;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease, box-shadow .4s ease;
  transform-style:preserve-3d;will-change:transform;
}
.hrh-overlay.is-open .hrh-popup{
  transform:translateY(0) scale(1) rotateX(var(--hrh-rx,0deg)) rotateY(var(--hrh-ry,0deg));
  opacity:1;
}
/* while following the cursor, remove the slow transition so it feels responsive */
.hrh-popup.is-tracking{transition:transform .12s ease-out, box-shadow .4s ease}
.hrh-popup:hover{
  box-shadow:0 50px 100px rgba(0,0,0,.5), 0 0 60px rgba(200,169,106,.35);
}

/* Cursor-following glow */
.hrh-glow{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(circle 280px at var(--hrh-mx) var(--hrh-my),
             rgba(226,201,143,.45), rgba(200,169,106,.12) 45%, transparent 70%);
}
.hrh-popup:hover .hrh-glow{opacity:1}

/* Gold border that lights up near the cursor */
.hrh-popup:before{
  content:'';position:absolute;inset:-1px;pointer-events:none;padding:1px;
  background:radial-gradient(circle 220px at var(--hrh-mx) var(--hrh-my), var(--hrh-gold), transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s ease;
}
.hrh-popup:hover:before{opacity:1}

.hrh-popup > *:not(.hrh-glow):not(.hrh-close){position:relative;z-index:1}

/* Close button */
.hrh-close{
  position:absolute;top:16px;right:16px;z-index:5;width:40px;height:40px;
  border:1px solid rgba(200,169,106,.6);background:transparent;color:var(--hrh-brown);
  font-size:22px;line-height:1;cursor:pointer;transition:.35s ease;
}
.hrh-close:hover{background:var(--hrh-gold);transform:rotate(90deg);box-shadow:0 0 20px rgba(200,169,106,.6)}

/* ---------- Content ---------- */
.hrh-kicker{display:block;color:var(--hrh-gold-dark);font-size:11px;text-transform:uppercase;letter-spacing:4px;margin-bottom:15px}
.hrh-title{font-size:48px;color:var(--hrh-brown);margin:0;font-weight:400;line-height:1.1;transform:translateZ(30px)}
.hrh-divider{width:80px;height:1px;background:var(--hrh-gold);margin:25px auto;position:relative;transition:width .4s ease}
.hrh-divider:after{
  content:'';width:12px;height:12px;border:1px solid var(--hrh-gold);background:var(--hrh-cream);
  position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  transition:box-shadow .4s ease, background .4s ease;
}
.hrh-popup:hover .hrh-divider{width:120px}
.hrh-popup:hover .hrh-divider:after{background:var(--hrh-gold);box-shadow:0 0 14px rgba(200,169,106,.9)}
.hrh-description{max-width:520px;margin:0 auto 35px;color:var(--hrh-text);line-height:1.9;font-size:15px}

.hrh-benefits{
  display:flex;justify-content:center;gap:12px 22px;flex-wrap:wrap;
  margin-top:30px;padding-top:25px;border-top:1px solid rgba(200,169,106,.3);
}
.hrh-benefit{
  font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#866b4a;
  padding:6px 4px;transition:color .3s ease, transform .3s ease, text-shadow .3s ease;
}
.hrh-benefit:hover{color:var(--hrh-brown);transform:translateY(-2px);text-shadow:0 0 14px rgba(200,169,106,.9)}

/* ---------- MotoPress form styling ---------- */
.hrh-popup .mphb_sc_search_availability{margin-top:35px}
.hrh-popup .mphb_sc_search_availability-wrapper{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:flex-end}
.hrh-popup .mphb_sc_search_availability p{margin:0;text-align:left}
.hrh-popup label{
  display:block;margin-bottom:6px;font-size:11px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--hrh-brown);
}
.hrh-popup input[type="text"],
.hrh-popup input[type="date"],
.hrh-popup select{
  width:100%;min-width:140px;padding:14px 16px;background:#fff;color:var(--hrh-brown);
  border:1px solid rgba(200,169,106,.5) !important;border-radius:0;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}
.hrh-popup input:hover,
.hrh-popup select:hover{border-color:var(--hrh-gold) !important;transform:translateY(-2px)}
.hrh-popup input:focus,
.hrh-popup select:focus{
  outline:none;border-color:var(--hrh-gold) !important;
  box-shadow:0 0 0 3px rgba(200,169,106,.25), 0 0 22px rgba(200,169,106,.45);
}
.hrh-popup input[type="submit"]{
  position:relative;overflow:hidden;cursor:pointer;padding:15px 38px;
  background:var(--hrh-gold) !important;border:none !important;color:var(--hrh-brown) !important;
  text-transform:uppercase;letter-spacing:3px;font-weight:600;
  transition:.35s ease !important;
}
.hrh-popup input[type="submit"]:hover{
  background:var(--hrh-gold-light) !important;transform:translateY(-3px);
  box-shadow:0 15px 30px rgba(200,169,106,.45), 0 0 30px rgba(226,201,143,.7);
}

/* =====================================================
   CALENDAR (MotoPress uses the "datepick" plugin; jQuery UI fallback included)
   The calendar is appended to <body>, so these are NOT scoped to .hrh-popup
   ===================================================== */
.datepick-popup,
.mphb-datepick-popup{z-index:9999999 !important}

.mphb-datepick-popup .datepick,
.datepick,
.ui-datepicker{
  background:var(--hrh-cream) !important;
  border:2px solid var(--hrh-gold) !important;border-radius:0 !important;
  box-shadow:0 30px 70px rgba(43,26,15,.5), 0 0 40px rgba(200,169,106,.35) !important;
  padding:0 !important;font-family:inherit !important;color:var(--hrh-brown) !important;
  overflow:hidden;
}

/* Header: dark brown bar with gold month name */
.datepick-month-header,
.datepick-month-header select,
.ui-datepicker-header{
  background:var(--hrh-brown) !important;color:var(--hrh-gold-light) !important;
  font-weight:700 !important;letter-spacing:3px;text-transform:uppercase;font-size:13px !important;
  border:0 !important;border-radius:0 !important;padding:16px 10px !important;
}
.datepick-month{border:0 !important;width:17em !important}
.datepick-month-header{border-bottom:3px solid var(--hrh-gold) !important}

/* Prev / next arrows */
.datepick-nav a,
.datepick-cmd,
.ui-datepicker-prev,.ui-datepicker-next{
  color:var(--hrh-gold-light) !important;background:transparent !important;
  font-weight:700 !important;transition:.3s ease;
}
.datepick-cmd:hover,
.ui-datepicker-prev:hover,.ui-datepicker-next:hover{
  background:var(--hrh-gold) !important;color:var(--hrh-brown) !important;
  box-shadow:0 0 16px rgba(200,169,106,.8);
}

/* Weekday row */
.datepick-month th,
.datepick-month .datepick-week-header,
.ui-datepicker th{
  background:rgba(200,169,106,.22) !important;color:var(--hrh-gold-dark) !important;
  font-size:11px !important;font-weight:700 !important;letter-spacing:2px;text-transform:uppercase;
  padding:10px 0 !important;border:0 !important;
}

/* Day cells */
.datepick-month td,
.ui-datepicker td{border:0 !important;background:transparent !important;padding:2px !important}
.datepick-month td a,
.datepick-month td span,
.ui-datepicker td a,.ui-datepicker td span{
  display:block;padding:10px 0 !important;text-align:center;font-size:14px !important;font-weight:600 !important;
  color:var(--hrh-brown) !important;background:#fff !important;border:1px solid rgba(200,169,106,.25) !important;
  border-radius:0 !important;text-decoration:none !important;transition:.25s ease;
}
/* Hover: gold, lifted, glowing */
.datepick-month td a:hover,
.datepick-month td .datepick-highlight,
.datepick-month td.datepick-highlight a,
.ui-datepicker td a:hover{
  background:var(--hrh-gold) !important;color:var(--hrh-brown) !important;
  transform:translateY(-2px) scale(1.08);position:relative;z-index:2;
  box-shadow:0 8px 18px rgba(200,169,106,.55), 0 0 18px rgba(226,201,143,.8);
}
/* Selected dates */
.datepick-month td.datepick-selected a,
.datepick-month td .datepick-selected,
.ui-datepicker td a.ui-state-active{
  background:var(--hrh-brown) !important;color:var(--hrh-gold-light) !important;
  border-color:var(--hrh-brown) !important;box-shadow:0 0 18px rgba(43,26,15,.5);
}
/* Today */
.datepick-month td.datepick-today a,
.datepick-month td .datepick-today,
.ui-datepicker td a.ui-state-highlight{border:2px solid var(--hrh-gold) !important}
/* Booked / unavailable / past (MotoPress classes) */
.datepick-month td.mphb-booked-date a,
.datepick-month td.mphb-booked-date span,
.datepick-month td.mphb-unselectable-date a,
.datepick-month td.mphb-unselectable-date span,
.datepick-month td.datepick-unselectable span,
.ui-datepicker td.ui-state-disabled span{
  background:rgba(43,26,15,.06) !important;color:rgba(43,26,15,.3) !important;
  text-decoration:line-through !important;border-color:transparent !important;
  box-shadow:none !important;transform:none !important;cursor:not-allowed;
}
/* Empty filler cells */
.datepick-month td.datepick-other-month,
.datepick-month td.datepick-other-month span{background:transparent !important;border:0 !important}

/* ---------- Mobile ---------- */
@media (max-width:600px){
  .hrh-popup{padding:50px 20px 30px}
  .hrh-title{font-size:34px}
  .hrh-popup .mphb_sc_search_availability-wrapper{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  .hrh-popup,.hrh-overlay,.hrh-open-btn{transition:none !important}
}