/* =================================================================
   🎨 HOTEL LAXMI — REVIEW HELPER
   Traditional Marathi restaurant theme (maroon + gold + cream)
   ================================================================= */

:root{
  --maroon-900:#5C0E0E;
  --maroon-800:#7A1414;
  --maroon-700:#8B1A1A;
  --maroon-600:#A02020;
  --gold-700:#A67C00;
  --gold-600:#C69A21;
  --gold-500:#D4A521;
  --gold-400:#E8BC4A;
  --gold-300:#F2D67B;
  --cream-100:#FFFDF7;
  --cream-200:#FBF6E9;
  --cream-300:#F5ECD5;
  --green-700:#146B32;
  --green-600:#1B7A3E;
  --green-500:#2A9152;
  --ink-900:#2B1A0F;
  --ink-700:#5A4232;
  --ink-500:#8A7460;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-pill:999px;
  --ease:cubic-bezier(.4,0,.2,1);
  --shadow-soft:0 12px 32px -12px rgba(92,14,14,.18);
  --shadow-hover:0 20px 44px -16px rgba(92,14,14,.28);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  font-family:'Mukta','Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink-900);
  min-height:100vh;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(212,165,33,.12), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(139,26,26,.10), transparent 60%),
    linear-gradient(180deg, var(--cream-100) 0%, var(--cream-200) 60%, var(--cream-300) 100%);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* Devanagari-friendly font for headings */
h1,h2,.slogan,.subtitle{font-family:'Tiro Devanagari Marathi','Mukta',serif;}

/* ---------- Lotus watermark ---------- */
.watermark{
  position:fixed;
  top:-40px;
  right:-40px;
  font-size:340px;
  opacity:.04;
  pointer-events:none;
  z-index:0;
  user-select:none;
  transform:rotate(-15deg);
}

/* ---------- Wrap ---------- */
.wrap{
  position:relative;
  z-index:1;
  max-width:640px;
  margin:0 auto;
  padding:32px 20px 60px;
}

/* ---------- HEADER ---------- */
.header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin-bottom:8px;
}

.logo-wrap{
  width:140px;
  height:140px;
  border-radius:50%;
  background:var(--cream-100);
  padding:6px;
  box-shadow:
    0 0 0 3px var(--gold-500),
    0 0 0 6px var(--maroon-700),
    0 0 0 8px var(--gold-500),
    0 18px 40px -12px rgba(92,14,14,.35);
  animation:logoIn .6s var(--ease) both;
}
@keyframes logoIn{
  from{transform:scale(.85);opacity:0;}
  to{transform:scale(1);opacity:1;}
}
.logo-wrap img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

.name-box{
  text-align:center;
  background:linear-gradient(180deg, var(--cream-100), var(--cream-200));
  border:2px solid var(--gold-500);
  border-radius:var(--radius-lg);
  padding:20px 24px 18px;
  width:100%;
  box-shadow:var(--shadow-soft);
  position:relative;
}
.name-box::before,
.name-box::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:2px;
  background:var(--gold-500);
}
.name-box::before{top:-1px;}
.name-box::after{bottom:-1px;}

#bizName{
  margin:0;
  font-size:clamp(28px,6vw,38px);
  font-weight:700;
  color:var(--maroon-800);
  letter-spacing:-0.01em;
  line-height:1.15;
}

.subtitle{
  margin:6px 0 0;
  font-size:clamp(18px,3.5vw,22px);
  font-weight:600;
  color:var(--green-600);
  letter-spacing:.02em;
}

.address{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:10px 0 0;
  font-size:15px;
  color:var(--ink-700);
  font-weight:500;
}
.address i{color:var(--maroon-700);font-size:13px;}

/* ---------- Divider ---------- */
.divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:26px 0 22px;
  color:var(--gold-500);
}
.divider .line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.divider i{font-size:16px;}

/* ---------- Language toggle ---------- */
.lang-nav{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:26px;
  padding:6px;
  background:var(--cream-200);
  border:1px solid var(--gold-400);
  border-radius:var(--radius-pill);
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
  box-shadow:var(--shadow-soft);
}
.lang-btn{
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--ink-700);
  background:transparent;
  border:none;
  border-radius:var(--radius-pill);
  padding:9px 20px;
  min-height:40px;
  cursor:pointer;
  transition:all .2s var(--ease);
}
.lang-btn:hover{color:var(--maroon-700);}
.lang-btn.active{
  background:linear-gradient(135deg, var(--maroon-700), var(--maroon-600));
  color:var(--cream-100);
  box-shadow:0 6px 16px -6px rgba(139,26,26,.5);
}
.lang-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(212,165,33,.5);
}

/* ---------- Star section ---------- */
.star-section{
  text-align:center;
  margin-bottom:28px;
}
.section-title{
  margin:0 0 6px;
  font-size:clamp(20px,4vw,24px);
  font-weight:700;
  color:var(--maroon-800);
}
.section-sub{
  margin:0 0 20px;
  font-size:14px;
  color:var(--ink-500);
  font-weight:500;
}

.star-row{
  display:flex;
  justify-content:center;
  gap:6px;
  margin:0 auto;
  padding:16px 12px;
  background:var(--cream-100);
  border:2px solid var(--gold-400);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  width:fit-content;
  max-width:100%;
}
.star-btn{
  font-size:clamp(36px,9vw,48px);
  line-height:1;
  color:var(--cream-300);
  background:transparent;
  border:none;
  padding:4px 6px;
  cursor:pointer;
  transition:transform .15s var(--ease), color .15s var(--ease), text-shadow .15s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.star-btn:hover{
  transform:scale(1.12);
  color:var(--gold-400);
}
.star-btn.active{
  color:var(--gold-500);
  text-shadow:0 4px 14px rgba(212,165,33,.55);
  transform:scale(1.06);
}
.star-btn:active{transform:scale(.96);}
.star-btn:focus-visible{
  outline:none;
  border-radius:8px;
  box-shadow:0 0 0 3px rgba(212,165,33,.55);
}

/* ---------- Reviews ---------- */
.reviews-section{
  margin-bottom:32px;
}
.reviews-section .section-title,
.reviews-section .section-sub{
  text-align:center;
}

.reviews-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:18px;
}

.review-card{
  background:var(--cream-100);
  border:2px solid var(--gold-300);
  border-radius:var(--radius-lg);
  padding:18px 20px;
  cursor:pointer;
  transition:all .22s var(--ease);
  box-shadow:var(--shadow-soft);
  -webkit-tap-highlight-color:transparent;
}
.review-card:hover{
  transform:translateY(-3px);
  border-color:var(--gold-500);
  box-shadow:var(--shadow-hover);
}
.review-card:active{transform:translateY(-1px) scale(.995);}
.review-card:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(212,165,33,.55), var(--shadow-soft);
}

.review-card.copied{
  border-color:var(--green-500);
  background:linear-gradient(180deg, #F3FBF5, #E8F7EE);
  animation:copiedPulse .5s var(--ease);
}
@keyframes copiedPulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.02);}
  100%{transform:scale(1);}
}

.review-stars{
  display:flex;
  align-items:center;
  gap:3px;
  margin-bottom:10px;
  font-size:15px;
  color:var(--gold-500);
}
.review-stars .fa-regular{color:var(--cream-300);}
.rating-badge{
  margin-left:8px;
  font-size:12px;
  font-weight:700;
  color:var(--maroon-700);
  background:rgba(212,165,33,.18);
  border:1px solid var(--gold-400);
  border-radius:var(--radius-pill);
  padding:2px 9px;
}

.review-text{
  margin:0 0 12px;
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink-900);
  font-weight:500;
}

.review-hint{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-500);
  padding-top:12px;
  border-top:1px dashed var(--gold-300);
  transition:color .2s var(--ease);
}
.review-card:hover .review-hint{color:var(--maroon-700);}
.review-card.copied .review-hint{color:var(--green-700);}
.review-hint i{font-size:13px;}

/* ---------- CTA ---------- */
.cta-section{
  text-align:center;
  padding-top:8px;
}
.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  color:var(--cream-100);
  background:linear-gradient(135deg, var(--maroon-700), var(--maroon-600));
  border:2px solid var(--gold-500);
  border-radius:var(--radius-pill);
  padding:16px 32px;
  min-height:56px;
  cursor:pointer;
  width:100%;
  max-width:400px;
  box-shadow:0 16px 32px -12px rgba(139,26,26,.5), inset 0 1px 0 rgba(255,255,255,.15);
  transition:all .2s var(--ease);
  letter-spacing:.02em;
}
.cta-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 40px -14px rgba(139,26,26,.6), inset 0 1px 0 rgba(255,255,255,.2);
}
.cta-btn:active{transform:translateY(0);}
.cta-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(212,165,33,.6), 0 16px 32px -12px rgba(139,26,26,.5);
}
.cta-btn i{font-size:20px;color:var(--gold-300);}

.cta-hint{
  margin:14px auto 0;
  font-size:13.5px;
  font-style:italic;
  color:var(--ink-500);
  max-width:400px;
  line-height:1.5;
}

/* ---------- Footer / slogan ---------- */
.footer{
  margin-top:36px;
  text-align:center;
  padding-top:24px;
  border-top:1px solid var(--gold-300);
}
.slogan{
  margin:0;
  font-size:clamp(17px,3.5vw,20px);
  font-weight:600;
  color:var(--maroon-700);
  letter-spacing:.01em;
}
.slogan::before,
.slogan::after{
  content:"🪷";
  font-size:14px;
  margin:0 10px;
  opacity:.6;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%, 30px);
  display:flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg, var(--green-700), var(--green-600));
  color:#fff;
  font-size:14px;
  font-weight:600;
  padding:14px 22px;
  border-radius:var(--radius-pill);
  box-shadow:0 20px 40px -12px rgba(20,107,50,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  z-index:100;
  max-width:90vw;
}
.toast.show{opacity:1;transform:translate(-50%, 0);}
.toast i{font-size:16px;}

/* ---------- Reminder banner ---------- */
.reminder{
  position:fixed;
  left:50%;
  top:20px;
  transform:translate(-50%, -100px);
  display:flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color:var(--maroon-900);
  font-size:14px;
  font-weight:700;
  padding:12px 22px;
  border-radius:var(--radius-pill);
  box-shadow:0 20px 40px -12px rgba(212,165,33,.6);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  z-index:100;
  max-width:92vw;
  text-align:center;
}
.reminder.show{opacity:1;transform:translate(-50%, 0);}
.reminder i{font-size:16px;}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}

/* ---------- Small phones ---------- */
@media (max-width:400px){
  .wrap{padding:24px 14px 50px;}
  .logo-wrap{width:120px;height:120px;}
  .name-box{padding:16px 18px 14px;}
  .lang-btn{padding:8px 16px;font-size:13px;}
  .review-card{padding:16px;}
}

/* =================================================================
   ✨ TAP-TO-COPY ENHANCEMENTS
   ================================================================= */

/* Card entrance animation */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.review-card {
  animation: cardIn .35s var(--ease) both;
  position: relative;
  overflow: hidden;
}

/* Ripple effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(212, 165, 33, 0.35);
  pointer-events: none;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
}
.ripple.animate {
  animation: rippleOut .6s ease-out;
}
@keyframes rippleOut {
  0%   { transform: scale(0);  opacity: 0.6; }
  100% { transform: scale(22); opacity: 0;   }
}

/* Hover state — stronger, more inviting */
.review-card:hover .review-hint {
  color: var(--maroon-700);
  font-weight: 700;
}
.review-card:hover .review-hint i {
  transform: translateY(-2px);
  transition: transform .2s var(--ease);
}

/* Copied state — bigger, more satisfying */
.review-card.copied {
  border-color: var(--green-500);
  background: linear-gradient(135deg, #F3FBF5 0%, #E8F7EE 100%);
  transform: scale(1.01);
  box-shadow: 0 24px 48px -16px rgba(20, 107, 50, 0.35);
  animation: copiedPop .45s var(--ease);
}
@keyframes copiedPop {
  0%   { transform: scale(1);    }
  45%  { transform: scale(1.03); }
  100% { transform: scale(1.01); }
}

.review-card.copied .review-hint {
  color: var(--green-700);
  font-weight: 700;
}

/* Error state — shake */
.review-card.error {
  border-color: var(--maroon-600);
  background: linear-gradient(135deg, #FFF5F5 0%, #FFEBEB 100%);
  animation: shake .45s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: translateX(0);    }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px);  }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px);  }
}
.review-card.error .review-hint {
  color: var(--maroon-700);
}

/* =================================================================
   🎬 FULL-SCREEN OVERLAY
   ================================================================= */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 29, 47, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.overlay.show {
  opacity: 1;
  pointer-events: all;
}

.overlay-card {
  background: linear-gradient(180deg, var(--cream-100), var(--cream-200));
  border: 2px solid var(--gold-500);
  border-radius: 28px;
  padding: 36px 32px 24px;
  max-width: 360px;
  width: calc(100% - 48px);
  text-align: center;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: scale(.9);
  transition: transform .35s var(--ease);
}
.overlay.show .overlay-card {
  transform: scale(1);
}

.overlay-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.overlay-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-600), var(--green-500));
  color: #fff;
  font-size: 34px;
  margin-bottom: 4px;
  box-shadow: 0 12px 24px -8px rgba(20, 107, 50, 0.5);
  animation: checkPop .5s var(--ease);
}
@keyframes checkPop {
  0%   { transform: scale(0);    opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

.overlay-text strong {
  font-family: 'Tiro Devanagari Marathi', 'Mukta', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--maroon-800);
  letter-spacing: -.01em;
}

.overlay-stars {
  font-size: 24px;
  letter-spacing: 3px;
  color: var(--gold-500);
  filter: drop-shadow(0 2px 6px rgba(212, 165, 33, 0.5));
}

.overlay-sub {
  font-size: 15px;
  color: var(--ink-700);
  font-weight: 500;
  margin-top: 4px;
}

.overlay-progress {
  margin-top: 24px;
  height: 4px;
  width: 100%;
  background: rgba(212, 165, 33, 0.2);
  border-radius: 999px;
  overflow: hidden;
}
.overlay-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-500), var(--maroon-700));
  border-radius: 999px;
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  .review-card,
  .ripple,
  .overlay-card,
  .overlay-check,
  .overlay-bar {
    animation: none !important;
    transition: none !important;
  }
}
/* =================================================================
   📱 iOS & MOBILE SAFARI FIXES
   ================================================================= */

/* ---------- Safe area insets (notch, home bar) ---------- */
.wrap {
  padding-top: calc(32px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(20px + env(safe-area-inset-left, 0px));
  padding-right: calc(20px + env(safe-area-inset-right, 0px));
}

/* Toast + reminder above home bar */
.toast {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.reminder {
  top: calc(20px + env(safe-area-inset-top, 0px));
}

/* Overlay full-screen on iOS */
.overlay {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- Prevent iOS zoom on input focus / tap ---------- */
.review-card,
.star-btn,
.lang-btn,
.cta-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;  /* removes 300ms tap delay */
}

/* Allow text selection ONLY on review text (in case user wants to copy manually) */
.review-text {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ---------- iOS momentum scroll for reviews ---------- */
.reviews-list {
  -webkit-overflow-scrolling: touch;
}

/* ---------- Font smoothing (iOS looks too thin without this) ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Fix iOS 100vh bug (address bar shifts) ---------- */
body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  min-height: -webkit-fill-available;
}

/* ---------- Prevent body scroll when overlay is open ---------- */
body.overlay-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ---------- Bigger tap targets on small phones ---------- */
@media (max-width: 480px) {
  .star-btn {
    font-size: 44px;
    padding: 6px 4px;
  }
  .review-card {
    padding: 18px 16px;
  }
  .lang-btn {
    padding: 10px 18px;
    font-size: 14px;
  }
  .review-text {
    font-size: 15px;
  }
}

/* ---------- Landscape mode on phones ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .wrap { padding-top: 20px; padding-bottom: 30px; }
  .logo-wrap { width: 100px; height: 100px; }
  .header { gap: 12px; margin-bottom: 12px; }
}

/* ---------- iOS Safari smooth scroll fix ---------- */
@supports (-webkit-touch-callout: none) {
  html {
    scroll-behavior: auto;  /* iOS Safari has issues with smooth + redirects */
  }
}

/* ---------- Fonts fallback for older Android ---------- */
body {
  font-family: 'Mukta',
               -apple-system, BlinkMacSystemFont,   /* iOS + macOS */
               'Segoe UI',                            /* Windows */
               'Roboto', 'Helvetica Neue', 'Arial',  /* Android + fallback */
               sans-serif;
}