/* 
===========================================================
CERASUNO BOOKING TOOL – CLEAN + FIXED (ONE FILE)
- Single source (keine Dubletten)
- 20% kleiner via Variablen (kein transform)
- Amenities-Icons: stabil + lesbar (eigenes Pixelmaß, nicht mitskalieren)
- Pills / Date / Summary bleiben wie bisher
===========================================================
*/

:root{
  --cu-accent: #d4a266;      /* Gold */
  --cu-ink: #2a1d0f;         /* Dunkelbraun (Text/Icon) */
  --cu-muted: rgba(0,0,0,0.55);
  --cu-border: rgba(0,0,0,0.08);
  --cu-card: rgba(255,255,255,0.70);

  /* ===== Size scale (20% smaller, NO transform) ===== */
  --cu-scale: 0.8;

  --cu-radius-panel: calc(18px * var(--cu-scale));
  --cu-pad-panel:    calc(16px * var(--cu-scale));
  --cu-gap:          calc(18px * var(--cu-scale));

  --cu-title:        calc(16px * var(--cu-scale));
  --cu-sub:          calc(12px * var(--cu-scale));

  --cu-circle:       calc(54px * var(--cu-scale));   /* QUANDO circle + pills */
  --cu-stroke:       calc(2px * var(--cu-scale));
  --cu-icon:         calc(22px * var(--cu-scale));   /* icon in circles */

  --cu-summary-pad-y: calc(12px * var(--cu-scale));
  --cu-summary-pad-x: calc(14px * var(--cu-scale));

  --cu-price:        calc(24px * var(--cu-scale));
  --cu-cta-h:        calc(54px * var(--cu-scale));
  --cu-cta-r:        calc(16px * var(--cu-scale));
  --cu-cta-fs:       calc(18px * var(--cu-scale));

  /* small spacings */
  --cu-s6:  calc(6px  * var(--cu-scale));
  --cu-s8:  calc(8px  * var(--cu-scale));
  --cu-s10: calc(10px * var(--cu-scale));
  --cu-s12: calc(12px * var(--cu-scale));
  --cu-s14: calc(14px * var(--cu-scale));

  /* ===== CRITICAL FIX: amenities icons must NOT be tiny =====
     These are stroke-icons (lucide-like). If you scale them down to ~14px,
     they become unrecognizable. So keep them at fixed px. */
  --cu-amenity-ico: 24px;     /* try 24–28px */
  --cu-amenity-stroke: 2;
}

/* wrapper */
.cu-booking-widget{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
}

/* layout */
.cu-layout{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--cu-gap);
  align-items: start;
}

/* panels */
.cu-panel{
  background: var(--cu-card);
  border: 1px solid var(--cu-border);
  border-radius: var(--cu-radius-panel);
  padding: var(--cu-pad-panel);
}

.cu-panel-title{
  font-weight: 700;
  margin: 0 0 var(--cu-s12) 0;
  font-size: var(--cu-title);
  letter-spacing: .06em;
  text-transform: uppercase; /* links ist ok, rechts: wenn du kein uppercase willst -> im PHP/HTML, oder hier für .cu-right überschreiben */
}

/* Rechte Spalte: kein uppercase */
.cu-right .cu-panel-title{
  text-transform: none;
  letter-spacing: 0;
}

/* =========================
   QUANDO date trigger (sub above circle)
   ========================= */

.cu-date-trigger{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;     /* sub oben, circle darunter */
  align-items: flex-start;
  gap: var(--cu-s10);
  cursor: pointer;
  text-align: left;
}

.cu-date-meta{
  display: inline-flex;
  align-items: center;
  gap: var(--cu-s8);
}

.cu-date-sub{
  font-size: var(--cu-sub);
  letter-spacing: .08em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cu-muted);
  opacity: 1;
}

.cu-date-ok{
  display: none;
  font-size: var(--cu-sub);
  line-height: 1;
  color: #16a34a;
  transform: translateY(-1px);
}

/* show check when dates set (JS toggles .is-dates-set on .cu-booking-widget) */
.cu-booking-widget.is-dates-set .cu-date-ok{
  display: inline-block;
}

.cu-date-circle{
  width: var(--cu-circle);
  height: var(--cu-circle);
  border-radius: 999px;
  border: var(--cu-stroke) solid var(--cu-accent);
  background: rgba(212,162,102,0.10);
  color: #111; /* calendar icon MUST be black */
  display: grid;
  place-items: center;
}

.cu-date-circle svg{
  width: var(--cu-icon);
  height: var(--cu-icon);
  stroke: currentColor;
  fill: none;
  stroke-width: var(--cu-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================
   Guest pills
   ========================= */

.cu-guests-panel{
  margin-top: var(--cu-s6);
  padding: 0;
  border: 0;
  background: transparent;
}

.cu-guest-block{
  margin-top: var(--cu-s12);
}

.cu-guest-label{
  font-size: var(--cu-sub);
  letter-spacing: .08em;
  opacity: .75;
  margin-bottom: var(--cu-s10);
  font-weight: 700;
  text-transform: uppercase;
}

.cu-pills{
  display: flex;
  gap: var(--cu-s12);
  flex-wrap: wrap;
}

.cu-pill{
  width: var(--cu-circle);
  height: var(--cu-circle);
  border-radius: 999px;
  border: var(--cu-stroke) solid rgba(0,0,0,0.18);
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
}

.cu-pill:active{ transform: scale(.98); }

.cu-pill.is-on{
  border-color: var(--cu-accent);
  background: rgba(212,162,102,0.10);
}

.cu-pill.is-disabled{
  opacity: .35;
  cursor: not-allowed;
}

.cu-pill svg{
  width: var(--cu-icon);
  height: var(--cu-icon);
  stroke: currentColor;
  fill: none;
  stroke-width: var(--cu-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================
   Right summary: offer + amenities
   ========================= */

.cu-offer{
  margin-top: var(--cu-s14);
  padding: var(--cu-summary-pad-y) var(--cu-summary-pad-x);
  border-radius: calc(14px * var(--cu-scale));
  background: rgba(0,0,0,0.03);
}

.cu-offer-title{ font-weight: 800; }

.cu-offer-meta{
  margin-top: var(--cu-s6);
  opacity: .8;
  font-size: calc(14px * var(--cu-scale));
}

.cu-offer-divider{
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: var(--cu-s12) 0;
}

/* Amenities list */
.cu-offer-amenities{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cu-s8) calc(16px * var(--cu-scale));
  font-size: calc(14px * var(--cu-scale));
}

.cu-amenity{
  display: flex;
  align-items: center;
  gap: var(--cu-s10);
  opacity: .92;
}

.cu-amenity-txt{
  line-height: 1.2;
}

/* ===== FIX: Amenities icons stable + centered + not distorted ===== */
.cu-amenity-ico{
  width: var(--cu-amenity-ico);
  height: var(--cu-amenity-ico);
  flex: 0 0 var(--cu-amenity-ico);
  display: inline-grid;
  place-items: center;
  color: var(--cu-ink);
  opacity: .85;
  line-height: 0;
}

.cu-amenity-ico svg{
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Lucide-like icons are stroke icons => force stroke mode */
.cu-amenity-ico svg{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: var(--cu-amenity-stroke) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke; /* keeps stroke readable if browser scales */
}

/* =========================
   Summary blocks (dates / guests)
   ========================= */

.cu-summary-block{
  margin-top: var(--cu-s14);
  padding: var(--cu-summary-pad-y) var(--cu-summary-pad-x);
  border-radius: calc(14px * var(--cu-scale));
  background: rgba(0,0,0,0.04);
}

.cu-summary-label{
  font-weight: 700;
  margin-bottom: var(--cu-s6);
}

.cu-summary-value{
  font-weight: 600;
  opacity: .9;
}

/* guest icons in summary rows */
.cu-summary-item{
  display:flex;
  align-items:center;
  gap: var(--cu-s12);
  margin-top: var(--cu-s10);
}

.cu-summary-item.is-muted{ color:#9aa0a6; }
.cu-summary-item.is-active{ color: var(--cu-accent); }

/* summary icon badge */
.cu-icon{
  width: calc(34px * var(--cu-scale));
  height: calc(34px * var(--cu-scale));
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(0,0,0,0.05);
}

/* glyph via mask */
.cu-icon::before{
  content:"";
  width: calc(16px * var(--cu-scale));
  height: calc(16px * var(--cu-scale));
  display:block;
  background: rgba(0,0,0,0.35);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

/* active/muted styling */
.cu-summary-item.is-active .cu-icon{
  background: rgba(212,162,102,0.22);
}
.cu-summary-item.is-active .cu-icon::before{
  background: var(--cu-ink);
}
.cu-summary-item.is-muted .cu-icon{
  background: rgba(0,0,0,0.04);
}
.cu-summary-item.is-muted .cu-icon::before{
  background: rgba(0,0,0,0.20);
}

/* adult/child/pet glyph masks */
.cu-icon-adult::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Z'/%3E%3Cpath fill='black' d='M4 20a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Z'/%3E%3Cpath fill='black' d='M4 20a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}
.cu-icon-child::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a3.5 3.5 0 1 0-3.5-3.5A3.5 3.5 0 0 0 12 12Z'/%3E%3Cpath fill='black' d='M6 20a6 6 0 0 1 12 0'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a3.5 3.5 0 1 0-3.5-3.5A3.5 3.5 0 0 0 12 12Z'/%3E%3Cpath fill='black' d='M6 20a6 6 0 0 1 12 0'/%3E%3C/svg%3E");
}
.cu-icon-pet::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='4' r='2' fill='black'/%3E%3Ccircle cx='18' cy='8' r='2' fill='black'/%3E%3Ccircle cx='20' cy='16' r='2' fill='black'/%3E%3Cpath fill='black' d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='4' r='2' fill='black'/%3E%3Ccircle cx='18' cy='8' r='2' fill='black'/%3E%3Ccircle cx='20' cy='16' r='2' fill='black'/%3E%3Cpath fill='black' d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z'/%3E%3C/svg%3E");
}

/* =========================
   Price + CTA
   ========================= */

.cu-summary-row{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--cu-summary-pad-y) var(--cu-summary-pad-x);
  border-radius: calc(14px * var(--cu-scale));
  background: rgba(0,0,0,0.04);
  margin-top: var(--cu-s14);
}

.cu-price{
  font-size: var(--cu-price);
  font-weight: 800;
}

.cu-cta{
  margin-top: var(--cu-s14);
  width: 100%;
  height: var(--cu-cta-h);
  border-radius: var(--cu-cta-r);
  border: 0;
  background: var(--cu-accent);
  color: var(--cu-ink);
  font-size: var(--cu-cta-fs);
  font-weight: 800;
  cursor: pointer;
}

.cu-cta:disabled{
  opacity: .35;
  cursor: not-allowed;
}

/* hidden range input */
.cu-range-hidden{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* status hidden (fallback) */
.cu-status{ display:none; }

/* mobile */
@media (max-width: 900px){
  .cu-layout{ grid-template-columns: 1fr; }
}