/* Shared extras: open/closed pill, sticky reserve, cookie banner (ported from the reference ss-extras-css) */

/* ============ OPEN/CLOSED INDICATOR ============ */
.ss-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245, 241, 232, 0.75);
  padding: 4px 10px;
  border: 1px solid rgba(212,175,122, 0.25);
  border-radius: 100px;
  background: rgba(10, 31, 26, 0.4);
  margin-left: 18px;
  white-space: nowrap;
  font-weight: 500;
}
.ss-status .ss-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6a7a70;
  flex-shrink: 0;
}
.ss-status[data-open="true"] .ss-status-dot {
  background: #7ec88a;
  box-shadow: 0 0 0 2px rgba(126, 200, 138, 0.18);
  animation: ssPulse 2.4s ease-in-out infinite;
}
.ss-status[data-open="true"] {
  color: rgba(245, 241, 232, 0.9);
  border-color: rgba(126, 200, 138, 0.35);
}
.ss-status[data-open="false"] {
  color: rgba(245, 241, 232, 0.55);
}
@keyframes ssPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(126, 200, 138, 0.18); }
  50% { box-shadow: 0 0 0 4px rgba(126, 200, 138, 0.05); }
}
@media (max-width: 1024px) {
  .ss-status { font-size: 10px; padding: 3px 9px; margin-left: 12px; }
}
@media (max-width: 720px) {
  .ss-status { display: none; }
}

/* ============ STICKY RESERVE BUTTON (mobile) ============ */
.ss-sticky {
  display: none;
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  z-index: 95;
  background: #81D8D0;
  color: #061612;
  padding: 14px 24px;
  border-radius: 100px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(212,175,122, 0.4);
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.2s ease;
  pointer-events: none;
}
.ss-sticky.visible {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.ss-sticky:hover { background: #A6E3DC; }
.ss-sticky .ss-arrow { margin-left: 6px; font-size: 14px; }
@media (max-width: 900px) {
  .ss-sticky { display: inline-block; }
}

/* ============ COOKIE BANNER ============ */
.ss-cookie {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 105;
  background: rgba(6, 22, 18, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(212,175,122, 0.3);
  padding: 18px 24px;
  font-family: 'Inter', -apple-system, sans-serif;
  color: #f5f1e8;
  display: none;
  animation: ssCookieIn 0.5s cubic-bezier(.2,.7,.2,1);
}
.ss-cookie.show { display: block; }
@keyframes ssCookieIn {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.ss-cookie-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.ss-cookie-text {
  font-size: 13.5px; line-height: 1.6;
  color: rgba(245, 241, 232, 0.82);
  flex: 1 1 320px;
  min-width: 280px;
}
.ss-cookie-text a {
  color: #d4af7a; text-decoration: none;
  border-bottom: 1px solid rgba(212,175,122, 0.4);
}
.ss-cookie-text a:hover { color: #e6c08a; }
.ss-cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.ss-cookie-btn {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 2px;
  border: 1px solid rgba(212,175,122, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.ss-cookie-btn.ss-decline {
  background: transparent;
  color: rgba(245, 241, 232, 0.7);
}
.ss-cookie-btn.ss-decline:hover {
  color: #f5f1e8;
  border-color: rgba(212,175,122, 0.7);
}
.ss-cookie-btn.ss-accept {
  background: #81D8D0;
  color: #061612;
  border-color: #d4af7a;
}
.ss-cookie-btn.ss-accept:hover { background: #A6E3DC; }
@media (max-width: 600px) {
  .ss-cookie { padding: 14px 18px; }
  .ss-cookie-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .ss-cookie-actions { justify-content: flex-end; }
}

/* ---- SUN & MOON logo sizing (the badge needs more height than the reference's wide wordmark to stay legible) ---- */
.nav-logo img{height:50px !important;width:auto !important}
.nav.nav-scrolled .nav-logo img{height:40px !important}
@media (max-width:720px){.nav-logo img{height:42px !important}}
.hero-logo{height:auto !important;width:clamp(84px,12vw,116px) !important;max-width:116px !important}
.footer-logo img{display:block;width:180px;max-width:235px;height:auto;margin:0 0 16px}

/* ---- Sticky mobile reserve (ported from the reference index.html) ---- */
.sticky-reserve {
  display: none;
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  z-index: 100;
  background: #81D8D0;
  color: var(--green-deep);
  padding: 14px 22px 14px 26px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(212,175,122, 0.4);
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  white-space: nowrap;
}
.sticky-reserve.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-reserve:hover {
  background: #e6c690;
  color: var(--green-deep);
}
.sticky-reserve .arrow {
  margin-left: 6px;
  font-size: 14px;
}
@media (max-width: 900px) {
  .sticky-reserve { display: inline-block; }
}

/* ===== Photos: <picture> wrappers take no box of their own, so page CSS that targets the <img> keeps working.
   .sm-fill holds a cover photo where the page used a background-image div. ===== */
picture.sm-pic{display:contents}
.sm-fill{position:relative;overflow:hidden}
.sm-fill img.sm-cover,.ssi-ph img.sm-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ssp-row.ssp-one{grid-template-columns:1fr}
@media (max-width:720px){.ssp-row.ssp-one{display:block;padding:0 20px}.ssp-row.ssp-one .ssp-card{max-width:none;aspect-ratio:4/5}}
.ab-room{margin:28px 0 6px;aspect-ratio:3/2;border-radius:6px;background:#0d221c}


/* Phones: dish names, tags and captions sit in a text area under the photo, never on the food. Same on every food card. */
@media (max-width:720px){
  #main-content .home-dishes .hd-card{aspect-ratio:auto!important;display:flex;flex-direction:column;background:#0f2a23}
  #main-content .home-dishes .hd-card img{position:relative!important;inset:auto;aspect-ratio:1/1;height:auto!important;z-index:0}
  #main-content .home-dishes .hd-card::after{display:none}
  #main-content .home-dishes .hd-body{position:static;padding:14px 16px 16px}
  #main-content .ssi-card{aspect-ratio:auto!important;display:flex;flex-direction:column}
  #main-content .ssi-card .ssi-ph{position:relative!important;inset:auto;aspect-ratio:1/1;height:auto!important}
  #main-content .ssi-card figcaption{position:static!important;padding:14px 16px 18px!important;background:#0d221c!important}
  #main-content .ev-shot{aspect-ratio:auto!important;background:#0d221c}
  #main-content .ev-shot img{aspect-ratio:1/1;height:auto!important}
  #main-content .ev-shot figcaption{position:static!important;background:none!important;padding:9px 10px 11px!important}
}