*{margin:0;padding:0;box-sizing:border-box}
[x-cloak]{display:none!important}
:root{--brand-blue:#0077CC;--brand-teal:#00BFFF;--border-color: var(--brand-blue)}
html {
  overflow-x: hidden !important;
  max-width: 100%;
  touch-action: pan-y;
}
body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden !important;
  overflow-y: auto;
  position: relative;
  color: var(--brand-blue);
  max-width: 100%;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}
/* Ensure media never causes horizontal overflow */
img, video, svg { max-width: 100%; height: auto; }
    .background-elements{position:absolute;width:100%;height:100%;overflow:hidden;z-index:1}
    .wheel{position:absolute;width:100px;height:100px;background:radial-gradient(circle,#2c3e50 30%,#34495e 70%);border-radius:50%;border:8px solid #1a252f}
    .wheel::before,.wheel::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%}
    .wheel::before{width:40px;height:40px;background:#4A90E2;border:3px solid #fff}
    .wheel::after{width:80px;height:80px;border:2px solid #4A90E2;box-shadow:inset 0 0 10px rgba(74,144,226,.3)}
    .wheel1{top:15%;left:10%;animation:rotate 20s linear infinite}
    .wheel2{bottom:20%;right:5%;animation:rotate 25s linear infinite reverse}
    .bubbles{position:absolute;width:100%;height:100%}
    .bubble{position:absolute;background:rgba(255,255,255,.1);border-radius:50%;animation:float 15s infinite ease-in-out}
    .bubble:nth-child(1){width:40px;height:40px;right:10%;animation-delay:0s}
    .bubble:nth-child(2){width:20px;height:20px;right:20%;animation-delay:2s}
    .bubble:nth-child(3){width:60px;height:60px;right:35%;animation-delay:4s}
    .bubble:nth-child(4){width:30px;height:30px;right:50%;animation-delay:6s}
    .bubble:nth-child(5){width:25px;height:25px;right:70%;animation-delay:8s}
    .bubble:nth-child(6){width:45px;height:45px;right:85%;animation-delay:10s}

    .container{text-align:center;background:rgba(255,255,255,.95);padding:28px 24px;border-radius:20px;border:2px solid var(--brand-blue);box-shadow:0 20px 40px rgba(0,0,0,.1);max-width:720px;width:min(720px, 100% - 32px);margin:16px auto;z-index:10;position:relative;backdrop-filter:blur(10px)}
    .logo{margin-bottom:10px}
    .logo .tagline{display:none}
    /* centered logo in hero */
    .logo-centered{display:block;margin:0 auto 6px;width:220px;max-width:60%;height:auto;filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));}

    .coming-soon{margin:14px 0 6px}
    .coming-soon h2{color:var(--brand-blue);font-size:1.6rem;margin-bottom:8px;font-weight:700}
    .coming-soon p{color:var(--brand-blue);font-size:1rem;line-height:1.6;margin-bottom:6px}

    .btn{background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);color:#fff;padding:12px 22px;border-radius:40px;text-decoration:none;font-size:1rem;font-weight:bold;display:inline-flex;align-items:center;gap:10px;transition:all .3s ease;box-shadow:0 5px 15px rgba(37,211,102,.3);border:0;cursor:pointer}
    .btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(37,211,102,.4)}

    .services{margin-top:18px;padding-top:14px;border-top:1px solid var(--border-color)}
    .services h3{color:var(--brand-blue);font-size:1.1rem;margin-bottom:10px;font-weight:700}
    .service-icons{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
    .service-item{display:flex;flex-direction:column;align-items:center;opacity:.8}
    .service-icon{width:44px;height:44px;background:#4A90E2;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:6px;color:#fff;font-size:22px}
    .service-item span{color:var(--brand-blue);font-size:.85rem;font-weight:600}

    /* Booking UI */
    .booking{margin-top:18px;text-align:right}
    html[dir="ltr"] .booking{ text-align:left }
    .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    /* Responsive grid specifically for date + time controls */
    .date-time-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:8px; align-items:center; overflow:hidden }
    .date-time-grid > * { min-width: 0; max-width: 100%; }
    .row{display:flex;flex-direction:column;gap:6px}
    label{font-size:.9rem;color:var(--brand-blue);font-weight:600}
    select,input[type="date"],input[type="time"],input[type="text"],textarea{width:100%;max-width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:10px;background:#fff;font-size:.95rem}
    /* Reduce native control quirks that cause overflow on some iOS/Android browsers */
    input[type="date"], input[type="time"]{ -webkit-appearance: none; appearance: none; }
    /* hide inconsistent native spinners across browsers for number inputs */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
    input[type="number"]{ -moz-appearance:textfield }

    /* Place (service location) selector */
    .place-options { display:flex; gap:10px; align-items:stretch; }
    .place-btn {
      display:flex; align-items:center; gap:10px;
      padding:10px 12px; border:1px solid var(--border-color);
      border-radius:12px; background:#fff; cursor:pointer;
      color:#2c3e50; font-weight:600;
      box-shadow:0 2px 8px rgba(0,0,0,.06);
      transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    }
    .place-btn:hover { transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
    .place-btn.selected {
      border-color:#1f6fb2;
      box-shadow:0 8px 22px rgba(31,111,178,.35);
      background:linear-gradient(180deg,#2f89c6,#1f6fb2);
      color:#ffffff;
    }
    .place-btn.selected .place-icon { filter: invert(1) brightness(1.1); }
    .place-icon { width:28px; height:28px; display:block; }

    /* Addons accordion */
    .accordion{border:1px solid var(--border-color);border-radius:12px;background:linear-gradient(180deg,#f7fbff,#eef6ff)}
    .accordion-toggle{width:100%;background:#3498db;border:0;padding:12px 14px;border-radius:12px;display:flex;align-items:center;gap:10px;cursor:pointer;color:#fff;box-shadow:0 5px 15px rgba(52,152,219,.35);transition:box-shadow .2s ease, transform .2s ease, background .2s ease}
    .accordion-toggle span.title{color:#ffffff;font-weight:700}
    .accordion-toggle .summary{color:rgba(255,255,255,.92);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-inline-start:auto;margin-inline-end:8px;max-width:65%}
    .accordion-toggle .chevron{width:16px;height:16px;display:inline-block;transform:rotate(0);transition:transform .2s ease;color:#ffffff}
    .accordion-toggle .chevron::before{content:"▾";display:block;line-height:1}
    .accordion.open .accordion-toggle{background:#2f89c6;box-shadow:0 5px 15px rgba(52,152,219,.3);color:#fff}
    .accordion.open .accordion-toggle .chevron{transform:rotate(180deg)}
    .accordion-panel{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .2s ease;padding-inline:14px}
    .accordion.open .accordion-panel{padding-bottom:12px}

    /* Gentle blue pulse to encourage clicking when closed */
    @keyframes pulse-blue{0%{box-shadow:0 0 0 0 rgba(52,152,219,.45);transform:scale(1)}60%{box-shadow:0 0 0 10px rgba(52,152,219,0);transform:scale(1.01)}100%{box-shadow:0 0 0 0 rgba(52,152,219,0);transform:scale(1)}}
    .accordion.entry-accordion:not(.open) .accordion-toggle{animation:pulse-blue 2s ease-in-out infinite}
    .accordion.entry-accordion:not(.open) .accordion-toggle:hover{background:#2f89c6}
    .addons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
    .addon{background:#fff;border:1px solid var(--border-color);border-radius:10px;padding:10px;display:flex;gap:10px;align-items:center;color:var(--brand-blue);transition:transform .15s ease, box-shadow .2s ease}
    .addon:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08) }
    html[dir="rtl"] .addon{ direction: rtl }
    html[dir="ltr"] .addon{ direction: ltr }

    .addon-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#f3f7fc;border:1px solid var(--border-color);font-size:16px;flex-shrink:0}
    .addon-name{flex:1;text-align:right;font-size:.95rem;color:var(--brand-blue);font-weight:600}
    html[dir="ltr"] .addon-name{ text-align:left }

    .total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:10px 14px;background:#f3f7fc;border-radius:12px;border:1px solid var(--border-color)}
    .total strong{font-size:1.05rem;color:var(--brand-blue);font-weight:700}
.actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
    .small{font-size:.85rem;color:var(--brand-blue)}

    /* Floating social icons (image only, no circle) */
    .floating-whatsapp{
      position:fixed;bottom:18px;left:18px;z-index:999;
      display:inline-block; width:auto; height:auto; padding:0; line-height:0;
      background:transparent; border-radius:0; box-shadow:none; text-decoration:none;
    }
    .floating-instagram{
      position:fixed;bottom:18px;right:18px;z-index:999;
      display:inline-block; width:auto; height:auto; padding:0; line-height:0;
      background:transparent; border-radius:0; box-shadow:none; text-decoration:none;
    }
    .floating-whatsapp:hover, .floating-instagram:hover{ transform:none; box-shadow:none }

    @keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
    @keyframes float{0%,100%{transform:translateY(100vh) rotate(0);opacity:0}10%,90%{opacity:1}50%{transform:translateY(-100px) rotate(180deg)}}
    @media(max-width:768px){
      /* Avoid horizontal overflow on small screens */
      .container{margin:16px auto;padding:22px 16px}
      .grid{grid-template-columns:1fr}
      .date-time-grid{ grid-template-columns: 1fr }
      .addons{grid-template-columns:1fr}
      .accordion-toggle .summary{max-width:55%}
    }
    /* Add-ons suggest modal tweaks for mobile fit and alignment */
    #addonsSuggestModal .modal-content{ width:92vw; max-width:520px; box-sizing:border-box; display:flex; flex-direction:column; }
    #addonsSuggestList{ flex:1 1 auto; overflow:auto; padding-bottom:8px; }
    #addonsSuggestModal .addons{ grid-template-columns:1fr; }
    /* Use grid for perfect alignment of icon, name, price, qty controls */
    #addonsSuggestModal .addon{
      display:grid;
      grid-template-columns: 32px 1fr auto auto;
      align-items:center;
      gap:10px;
    }
    #addonsSuggestModal .addon .addon-icon{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; grid-column:1; }
    #addonsSuggestModal .addon .addon-name{ grid-column:2; text-align:start; }
    #addonsSuggestModal .addon .addon-price{ grid-column:3; min-width:72px; text-align:end; font-weight:600; color:#1f6fb2; }
    #addonsSuggestModal .addon .qty-controls{ grid-column:4; justify-self:end; display:flex; align-items:center; gap:6px; }
    #addonsSuggestModal .addon .qty-controls input[type="number"],
    #addonsSuggestModal .addon .qty-controls input[type="text"]{ width:50px; text-align:center; }
    #addonsSuggestModal .addon .qty-controls button{ width:32px; height:32px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }

    /* Close button: red */
    #addonsSuggestCloseBtn{ background:#fee2e2; border:1px solid #fca5a5; color:#b91c1c; font-weight:700; }
    #addonsSuggestCloseBtn:hover{ background:#fecaca; border-color:#f87171; color:#991b1b; }

    /* Footer actions: consistent alignment + equal widths */
    .addons-actions{ display:flex !important; gap:8px; justify-content:flex-end; flex-wrap:wrap; position:sticky; bottom:0; background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, #fff 60%); padding-top:8px; border-top:1px solid var(--border-color); }
    .addons-actions .btn{ min-width:220px; height:40px; display:inline-flex; align-items:center; justify-content:center; }
    @media(max-width:480px){
      .addons-actions{ justify-content:stretch; }
      .addons-actions .btn{ flex:1 1 100%; min-width:0; }
    }

    /* Promotion popup */
    #promotionModal.open{ display:flex !important; }
    #promotionModal .promotion-dialog{
      background:#fff;
      color:#1f2937;
      border-radius:18px;
      padding:20px;
      width:min(420px, 92vw);
      box-shadow:0 20px 48px rgba(15,23,42,.28);
      position:relative;
      text-align:center;
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    #promotionModal .promotion-close{
      position:absolute;
      inset-block-start:10px;
      inset-inline-end:10px;
      width:32px;
      height:32px;
      border-radius:50%;
      border:1px solid rgba(148,163,184,.4);
      background:#f8fafc;
      color:#1f2937;
      font-size:18px;
      line-height:1;
      cursor:pointer;
      box-shadow:0 2px 6px rgba(15,23,42,.12);
    }
    #promotionModal .promotion-close:hover{ background:#e2e8f0; }
    #promotionModal .promotion-text{
      font-size:16px;
      line-height:1.5;
      color:#1f2937;
    }
    #promotionModal .promotion-text-top{ font-weight:600; }
    #promotionModal .promotion-text-bottom{ color:#475569; }
    #promotionModal .promotion-image{
      width:100%;
      max-height:360px;
      object-fit:contain;
      border-radius:14px;
      border:1px solid rgba(148,163,184,.35);
      background:#f8fafc;
    }
    #promotionModal .promotion-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:center;
      margin-top:8px;
    }
    #promotionModal .promotion-apply,
    #promotionModal .promotion-dismiss{
      padding:10px 20px;
      border-radius:12px;
      font-weight:600;
      cursor:pointer;
      border:1px solid transparent;
      min-width:120px;
    }
    #promotionModal .promotion-apply{
      background:#2563eb;
      color:#fff;
      box-shadow:0 6px 20px rgba(37,99,235,.25);
      border-color:#2563eb;
    }
    #promotionModal .promotion-apply:hover{ background:#1d4ed8; border-color:#1d4ed8; }
    #promotionModal .promotion-dismiss{
      background:#fff;
      color:#1d4ed8;
      border-color:rgba(37,99,235,.35);
    }
    #promotionModal .promotion-dismiss:hover{ background:#eff6ff; }
    @media(max-width:480px){
      #promotionModal .promotion-actions{ flex-direction:column; }
      #promotionModal .promotion-apply,
      #promotionModal .promotion-dismiss{ width:100%; min-width:0; }
    }

    /* Main service entries — unify add-ons row alignment */
    .service-entry .addon{
      display:grid;
      grid-template-columns: 32px 1fr auto auto;
      align-items:center;
      gap:10px;
    }
    .service-entry .addon .addon-icon{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; grid-column:1; }
    .service-entry .addon .addon-name{ grid-column:2; text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .service-entry .addon .addon-price{ grid-column:3; min-width:72px; text-align:end; font-weight:600; color:#1f6fb2; }
    .service-entry .addon .qty-controls{ grid-column:4; justify-self:end; display:flex; align-items:center; gap:6px; }
    .service-entry .addon .qty-controls input[type="number"],
    .service-entry .addon .qty-controls input[type="text"]{ width:50px; text-align:center; }
    .service-entry .addon .qty-controls button{ width:32px; height:32px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }

    /* Responsive: allow name to breathe on small screens by stacking price/qty */
    @media(max-width:480px){
      .service-entry .addon{ grid-template-columns: 32px 1fr; }
      .service-entry .addon .addon-price{ grid-column:2; justify-self:start; margin-top:4px; }
      .service-entry .addon .qty-controls{ grid-column:2; justify-self:end; margin-top:4px; }
      .service-entry .addon .qty-controls button{ width:28px; height:28px; }
      .service-entry .addon .qty-controls input[type="number"],
      .service-entry .addon .qty-controls input[type="text"]{ width:44px; }
    }

    /* Popup responsive stack too */
    @media(max-width:480px){
      #addonsSuggestModal .addon{ grid-template-columns: 32px 1fr; }
      #addonsSuggestModal .addon .addon-price{ grid-column:2; justify-self:start; margin-top:4px; }
      #addonsSuggestModal .addon .qty-controls{ grid-column:2; justify-self:end; margin-top:4px; }
      #addonsSuggestModal .addon .qty-controls button{ width:28px; height:28px; }
      #addonsSuggestModal .addon .qty-controls input[type="number"],
      #addonsSuggestModal .addon .qty-controls input[type="text"]{ width:44px; }
    }
    .tap-button {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(53,122,189,.35);
}
.tap-button:hover {
  background: linear-gradient(135deg, #357ABD 0%, #2f6fb2 100%);
}
#whatsappBtn {
  display: none;
}
.row-horizontal {
  flex-direction: row !important;
  gap: 10px;
  flex-wrap: wrap;
}
/* User info bordered section */
.user-info-section {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg,#f7fbff,#eef6ff);
  margin-top: 10px;
}
/* inline select + action */
.select-inline { display:flex; align-items:center; gap:8px; }
.select-inline > *:first-child { flex:1 }
.select-inline .btn { margin:0 }
.btn-sm { padding:8px 12px; border-radius:10px; font-size:.9rem }
.select-wrap{ border:1px solid var(--border-color); border-radius:12px; padding:8px; background:#fff; }
.control-wrap{ border:1px solid var(--border-color); border-radius:12px; padding:8px; background:#fff; }
.select-wrap, .control-wrap{ box-shadow:0 2px 8px rgba(0,0,0,.04) }
.select-wrap{ position:relative }
.pkg-details-btn{ position:relative; z-index:1; pointer-events:auto }

/* Inline variant for bordered control groups placed beside labels */
.control-wrap.inline{ display:inline-flex; align-items:center; gap:8px; flex:1 1 auto; }

/* Ambient separator before section labels */
.section-label{ position:relative; padding-top:6px; }
.section-label::before{
  content:"";
  display:block;
  height:1px;
  background: linear-gradient(90deg, rgba(31,111,178,.25), rgba(31,111,178,.06));
  margin:6px 0 6px;
  border-radius:1px;
}
.pkg-details-col { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; user-select:none; }
.pkg-details-col:hover .pkg-hint { text-decoration: underline; }
.pkg-hint { font-size:.85rem; color:var(--brand-teal); line-height:1; white-space:nowrap; font-weight:600; letter-spacing:.1px; }
.pkg-details-col:hover .pkg-hint { text-decoration: underline dotted rgba(0,191,255,.8); }
.pkg-details-btn {
  background: #3498db;
  border: 0;
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(52,152,219,.35);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.pkg-details-btn .icon-info { width:18px; height:18px; display:block; }
.pkg-details-btn:hover { background:#2f89c6; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(52,152,219,.45); }
.pkg-details-btn:focus { outline: 3px solid rgba(52,152,219,.35); outline-offset: 2px; }

/* package details collapsible panel */
.package-details {
  background: #f7fbff;
  border-radius: 10px;
  overflow: hidden;
  max-height: 0;
  padding: 0;
  margin-top: 0;
  border: 0;
  transition: max-height .3s ease, padding .2s ease, margin .2s ease, border-width .2s ease;
}
.package-details.open { padding: 10px 12px; margin-top: 6px; border: 1px solid var(--border-color); }
.package-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.pkg-details-title { font-weight: 700; color: var(--brand-blue); }
.pkg-details-close {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pkg-details-close:hover { background: #f3f7fc; }
.qty-group button {
  background: #f0f0f0;
  border: 1px solid var(--border-color);
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
}
.addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  flex-wrap: nowrap;
}

/* replaced by .addon-name for clarity */
.addon > span:first-child { }
html[dir="ltr"] .addon > span:first-child { }

.qty-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.qty-controls input[type="number"] {
  width: 48px;
  text-align: center;
  padding: 6px 4px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.qty-controls button {
  background: #f0f0f0;
  border: 1px solid var(--border-color);
  padding: 6px 10px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
}
.qty-controls button:hover { background:#e8f2fb; border-color:#2f89c6 }

.addon-price {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--brand-teal);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: left;
  min-width: 48px; 
}
.time-select {
  direction: ltr;
  text-align: right;
}
html[dir="ltr"] .time-select { text-align: left }
.service-entry {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
  background: #fdfefe;
  position: relative;
}
.service-entry .remove-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #e74c3c;
  color: #fff;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  display: none;
}
.service-entry:not(:first-child) .remove-btn {
  display: block;
}
.add-service-btn {
  background: #3498db;
  font-size: 0.95rem;
  padding: 10px 20px;
}

/* Better alignment for the delete button (RTL-aware) */
.service-entry { position: relative; }

/* hide on first, show on added entries */
.service-entry .remove-btn { display: none; }
.service-entry:not(:first-child) .remove-btn { display: inline-flex; }

/* pin to the card corner and size consistently */
.service-entry .remove-btn {
  position: absolute;
  inset-block-start: 12px;   /* top */
  inset-inline-end: 12px;    /* left in RTL, right in LTR */
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  line-height: 1;
  border: 0;
  border-radius: 10px;
  font-size: 0.85rem;
  background: linear-gradient(135deg,#e74c3c,#c0392b);
  color: #fff;
  box-shadow: 0 4px 12px rgba(231,76,60,.25);
  cursor: pointer;
}
.service-entry .remove-btn:hover { transform: translateY(-1px); }

/* reserve space so the button never overlaps content */
.service-entry:not(:first-child) { padding-top: 56px; }

@media (max-width: 768px) {
  .service-entry .remove-btn { inset-block-start: 10px; inset-inline-end: 10px; height: 32px; min-width: 32px; }
  .service-entry:not(:first-child) { padding-top: 48px; }
}

/* remove fixed floating logo from homepage; now centered above */



/* Language toggle button */
.lang-toggle {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 6px 10px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: #fff;
  color: #2c3e50;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.lang-toggle:hover { transform: translateY(-1px) }

/* Place buttons on opposite sides; swap with UI direction */
html[dir="rtl"] #langToggle { left: 8px; right: auto; }
html[dir="rtl"] #loginToggle { right: 8px; left: auto; }
html[dir="ltr"] #langToggle { right: 8px; left: auto; }
html[dir="ltr"] #loginToggle { left: 8px; right: auto; }

/* Map styles */
.map { height: 260px; border-radius: 10px; border: 1px solid var(--border-color); }
.btn-ghost { background:#fff; color:#2c3e50; border:1px solid var(--border-color); box-shadow:none; padding:6px 10px; border-radius:10px; }
.coord-line { margin-top:6px; color: var(--brand-teal); }
#hoursNote { color: var(--brand-teal); }
#discountStatus { color: var(--brand-teal) !important; }
#accountHelp { color: var(--brand-teal) !important; }
#discountSummary { color: var(--brand-teal) !important; }

/* Discount section */
    #discountSection { border:1px solid var(--border-color); border-radius:12px; padding:10px 12px; background:#f7fbff }

    /* Custom area suggestions dropdown (to avoid native datalist overlay issues) */
    .area-suggest{
      position:absolute;
      inset-inline: 0;
      top: calc(100% + 4px);
      background:#fff;
      border:1px solid var(--border-color);
      border-radius:10px;
      box-shadow:0 8px 20px rgba(0,0,0,.08);
      max-height: 240px;
      overflow:auto;
      z-index: 50;
    }
    .area-suggest-item{
      padding:8px 10px;
      cursor:pointer;
    }
    .area-suggest-item:hover, .area-suggest-item[aria-selected="true"]{
      background:#f3f7fc;
    }