/* ==========================================================================
   Khushi Dental Care -- Map + working hours (shared: home page and contact page)
   Markup lives in includes/visit-section.php.
   ========================================================================== */

.visit{padding:20px 0 56px}
.visit-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:stretch}

.mapcard{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  min-height:360px;background:var(--panel);
}
/* Live Google embed. It fills the card; the info panel and the pill below
   float over it, so the frame stays draggable everywhere else. */
.map-embed{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Always visible now that the map itself is interactive -- it is the only
   affordance that leaves the page for the full listing. */
.map-open-hint{
  position:absolute;left:16px;bottom:16px;z-index:4;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:100px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(10,21,36,.18);
  font-size:12.5px;font-weight:600;color:var(--teal-800);
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.map-open-hint:hover,.map-open-hint:focus-visible{
  background:#fff;box-shadow:0 10px 26px rgba(10,21,36,.24);
}
.map-open-hint .icon{width:15px;height:15px}

.map-addr{
  color:inherit;border-bottom:1px solid rgba(5,60,66,.28);
  transition:color .22s var(--ease),border-color .22s var(--ease);
}
.map-addr:hover{color:var(--teal-800);border-bottom-color:var(--teal-800)}
/* Auto height, vertically centred — safe to use transform here because the
   reveal target is .mapcard, not this card. */
/* Right-hand side: the Google embed anchors its own place popup to the
   top-left of the frame, and a left-aligned panel lands straight on top of it. */
.map-info{
  position:absolute;z-index:3;right:22px;top:50%;transform:translateY(-50%);width:min(272px,58%);
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:var(--r-lg);padding:22px 20px;box-shadow:var(--shadow-md);
}
.map-info .ruled{font-size:19px;margin-bottom:12px}
.map-info p{font-size:13px;line-height:1.65;color:var(--body);margin-bottom:16px}
.map-info b{color:var(--ink);font-weight:600}
.map-info .btn{align-self:flex-start;font-size:13px;padding:10px 16px}
.map-info .btn:hover .icon{transform:translate(3px,-3px)}

/* The current map artwork carries its own labelled marker, so the decorative
   pin below would read as a second, conflicting location. Kept (not deleted)
   so it can be re-enabled if a plain map screenshot is swapped in. */
.map-pin{display:none}

/* Pin drops in, then keeps a slow ripple */
.map-pin{
  position:absolute;left:62%;top:44%;width:42px;height:42px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--teal-800);color:#fff;box-shadow:0 10px 24px rgba(2,21,34,.32);
}
.map-pin .icon{width:22px;height:22px;position:relative;z-index:1}
.map-pin-ripple{
  position:absolute;inset:0;border-radius:50%;border:2px solid var(--teal-800);
}
.js .map-pin{opacity:0;transform:translateY(-26px) scale(.6)}
.js .mapcard.is-in .map-pin{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) .35s,transform .62s var(--ease) .35s;
}
.js .mapcard.is-in .map-pin-ripple{animation:pinRipple 2.8s ease-out 1.1s infinite}
@keyframes pinRipple{
  0%{opacity:.55;transform:scale(1)}
  70%,100%{opacity:0;transform:scale(2.3)}
}

.hours{
  display:flex;flex-direction:column;
  background:var(--teal-900);color:#fff;border-radius:var(--r-xl);padding:26px 24px;
}
.hours .ruled{display:flex;align-items:center;gap:10px;color:#fff;font-size:20px;margin-bottom:16px}
.hours .ruled::after{background:var(--gold)}
.hours-icon{width:22px;height:22px;color:var(--gold-soft)}
.hours-list{display:grid;gap:2px}
.hours-list li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:9px;font-size:13px;color:#bed2d4;
  transition:background .25s var(--ease);
}
.hours-list li:hover{background:rgba(255,255,255,.05)}
.hours-list b{font-weight:600;color:#fff}
.hours-list li.is-today{background:rgba(200,147,85,.16);color:#f0dcc2}
.hours-list li.is-today span::before{
  content:"Today · ";color:var(--gold-soft);font-weight:600;
}
.hours-emergency{
  display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.10);
}
.hours-emergency-icon{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;
  background:rgba(200,147,85,.18);color:var(--gold-soft);
}
.hours-emergency-icon .icon{width:19px;height:19px}
.hours-emergency b{display:block;font-size:13px;font-weight:600;color:#fff}
.hours-emergency small{font-size:11.5px;color:#a8c0c2}
.hours-note{margin-top:auto;padding-top:16px;font-size:11.5px;line-height:1.6;color:#8fa8ab}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1100px){
  .visit-grid{grid-template-columns:1fr}
  .mapcard{min-height:330px}
}
@media (max-width:760px){
  .map-info{
    position:static;transform:none;width:auto;background:#fff;
    border-radius:0 0 var(--r-xl) var(--r-xl);box-shadow:none;
  }
  .mapcard{min-height:0;display:flex;flex-direction:column}
  .map-embed{position:static;height:260px}
  .map-open-hint{top:190px;bottom:auto;left:12px;padding:8px 12px;font-size:12px}
  .map-pin{top:110px;left:50%;margin-left:-21px}
}
@media (max-width:640px){
  .hours{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){
  .js .mapcard.is-in .map-pin-ripple{animation:none}
  .js .map-pin{opacity:1;transform:none}
}