/* =========================================================================
   City Taxi Karlsruhe – Premium Booking
   Scoped under .ctk-booking so it never clashes with the WordPress theme.
   Palette: graphite base · champagne-gold accent · ivory text · glass cards.
   ====================================================================== */

.ctk-booking *,
.ctk-booking *::before,
.ctk-booking *::after { box-sizing: border-box; }

.ctk-booking {
  /* =====================================================================
     ⭐ BRAND COLOURS — change these 4 lines to match your website.
     --ctk-accent is the main highlight (buttons, prices, taximeter).
     Use your site's primary colour here. Everything else adapts to it.
     ===================================================================== */
  --ctk-accent:    #E6B450;   /* main brand / highlight colour      */
  --ctk-accent-2:  #C9963B;   /* darker shade of the brand colour   */
  --ctk-bg:        #0E1116;   /* section background (dark)          */
  --ctk-bg-2:      #141923;   /* section background gradient end    */

  /* Aliases kept for backwards-compat (point to the brand colour) */
  --ctk-gold:      var(--ctk-accent);
  --ctk-gold-2:    var(--ctk-accent-2);

  /* Supporting tokens (usually no need to touch) */
  --ctk-surface:   rgba(255,255,255,.045);
  --ctk-surface-2: rgba(255,255,255,.07);
  --ctk-border:    rgba(255,255,255,.10);
  --ctk-ivory:     #F4EFE6;
  --ctk-text:      #EAEAEA;
  --ctk-muted:     #9aa3b2;
  --ctk-green:     #34C77B;
  --ctk-red:       #ff6b6b;
  --ctk-radius:    18px;
  --ctk-radius-sm: 12px;
  --ctk-shadow:    0 20px 60px -25px rgba(0,0,0,.7);
  --ctk-glow:      0 0 0 1px color-mix(in srgb, var(--ctk-accent) 35%, transparent),
                   0 14px 40px -12px color-mix(in srgb, var(--ctk-accent) 25%, transparent);

  /* Container query context: the layout reacts to the WIDTH OF THIS BOX,
     not the browser window. That makes it responsive inside any Elementor
     column, sidebar or full-width section. */
  container-type: inline-size;
  container-name: ctk;

  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 56px) clamp(16px, 3vw, 40px);
  color: var(--ctk-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  background:
    radial-gradient(1200px 500px at 80% -10%, color-mix(in srgb, var(--ctk-accent) 14%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(60,90,160,.12), transparent 55%),
    linear-gradient(180deg, var(--ctk-bg), var(--ctk-bg-2));
  border-radius: clamp(20px, 3vw, 32px);
  overflow: hidden;
}
/* Hard guard against horizontal overflow on small screens */
.ctk-booking, .ctk-booking * { min-width: 0; max-width: 100%; }
.ctk-booking img { height: auto; }

/* Thin brand accent bar across the top of the section */
.ctk-booking::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--ctk-accent), var(--ctk-accent-2), transparent);
  opacity: .9;
}

/* ---------- Typography ---------- */
.ctk-booking h2,.ctk-booking h3 { font-family:'Sora',sans-serif; margin:0; letter-spacing:-.02em; color:var(--ctk-ivory); }
.ctk-h1   { font-size: clamp(30px, 5vw, 52px); font-weight: 800; line-height: 1.04; }
.ctk-h3   { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.ctk-eyebrow{
  display:inline-block; font-family:'Sora',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ctk-gold);
  padding:6px 14px; border:1px solid color-mix(in srgb, var(--ctk-accent) 35%, transparent); border-radius:999px;
  background:color-mix(in srgb, var(--ctk-accent) 7%, transparent); margin-bottom:18px;
}
.ctk-sub { color:var(--ctk-muted); max-width:44ch; margin:14px 0 0; font-size:clamp(15px,2vw,18px); }

/* ---------- Hero ---------- */
.ctk-hero { margin-bottom: clamp(24px,4vw,44px); animation: ctk-rise .7s ease both; }
.ctk-trust{ list-style:none; display:flex; flex-wrap:wrap; gap:18px; padding:0; margin:22px 0 0; }
.ctk-trust li{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ctk-text); font-weight:500; }
.ctk-dot{ width:8px; height:8px; border-radius:50%; background:var(--ctk-gold); box-shadow:0 0 12px var(--ctk-gold); }

/* ---------- Layout grid ---------- */
.ctk-grid{ display:grid; grid-template-columns: 1.35fr .9fr; gap: clamp(16px,2.4vw,28px); align-items:start; }
.ctk-info-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:clamp(16px,2vw,22px); margin-top:clamp(20px,3vw,32px); }

/* ---------- Glass cards ---------- */
.ctk-card{
  background: var(--ctk-surface);
  border: 1px solid var(--ctk-border);
  border-radius: var(--ctk-radius);
  padding: clamp(20px, 2.6vw, 30px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--ctk-shadow);
  animation: ctk-rise .7s ease both;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ctk-card:hover { border-color: color-mix(in srgb, var(--ctk-accent) 28%, var(--ctk-border)); }
.ctk-aside{ position:sticky; top:18px; display:flex; flex-direction:column; gap:clamp(16px,2vw,22px); }

/* ---------- Fieldsets / sections ---------- */
.ctk-fs{ border:0; padding:0; margin:0 0 22px; }
.ctk-fs legend{
  display:flex; align-items:center; gap:10px; font-family:'Sora',sans-serif;
  font-weight:700; font-size:15px; color:var(--ctk-ivory); margin-bottom:16px;
}
.ctk-step{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  font-size:13px; font-weight:700; color:#1a1a1a;
  background:linear-gradient(145deg,var(--ctk-gold),var(--ctk-gold-2));
}

/* ---------- Fields & floating labels ---------- */
.ctk-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ctk-field{ position:relative; margin-bottom:14px; }
.ctk-field input,
.ctk-field select,
.ctk-field textarea{
  width:100%; padding:18px 16px 8px; font:inherit; color:var(--ctk-text);
  background:var(--ctk-surface-2); border:1px solid var(--ctk-border);
  border-radius:var(--ctk-radius-sm); outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
.ctk-field textarea{ padding-top:22px; resize:vertical; }
.ctk-field input:focus,
.ctk-field select:focus,
.ctk-field textarea:focus{ border-color:var(--ctk-gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--ctk-accent) 18%, transparent); background:rgba(255,255,255,.09); }

.ctk-field label{
  position:absolute; left:16px; top:15px; color:var(--ctk-muted); font-size:15px;
  pointer-events:none; transition:.18s ease; transform-origin:left;
}
/* Float up when focused or filled */
.ctk-field input:focus + label,
.ctk-field input:not(:placeholder-shown) + label,
.ctk-field textarea:focus + label,
.ctk-field textarea:not(:placeholder-shown) + label,
.ctk-field .ctk-label-static{
  top:6px; font-size:11px; color:var(--ctk-gold); letter-spacing:.03em;
}
.ctk-label-static{ position:absolute; top:6px; left:16px; font-size:11px !important; color:var(--ctk-gold) !important; }

/* date/time/number/select keep static label */
.ctk-select select{ appearance:none; cursor:pointer; }
.ctk-select::after{
  content:""; position:absolute; right:18px; top:22px; width:9px; height:9px;
  border-right:2px solid var(--ctk-muted); border-bottom:2px solid var(--ctk-muted);
  transform:rotate(45deg); pointer-events:none;
}
.ctk-field input.ctk-invalid,
.ctk-field select.ctk-invalid{ border-color:var(--ctk-red); box-shadow:0 0 0 3px rgba(255,107,107,.15); }
.ctk-err{ color:var(--ctk-red); font-size:12px; margin:4px 2px 0; }
.ctk-manual-toggle{ display:inline-block; margin:-4px 2px 14px; font-size:12px; color:var(--ctk-gold);
  text-decoration:none; border-bottom:1px dashed color-mix(in srgb, var(--ctk-accent) 50%, transparent); cursor:pointer; }
.ctk-manual-toggle:hover{ color:#f3cd7e; }
.ctk-manual-toggle[hidden]{ display:none; }

/* ---------- Toggles ---------- */
.ctk-toggles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.ctk-toggle{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--ctk-text);
  padding:12px 14px; border:1px solid var(--ctk-border); border-radius:var(--ctk-radius-sm);
  background:var(--ctk-surface-2); transition:border-color .2s, background .2s; }
.ctk-toggle:hover{ border-color:color-mix(in srgb, var(--ctk-accent) 40%, transparent); }
.ctk-toggle input{ position:absolute; opacity:0; }
.ctk-toggle span{ width:38px; height:22px; border-radius:999px; background:rgba(255,255,255,.18);
  position:relative; flex:0 0 auto; transition:background .2s; }
.ctk-toggle span::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:#fff; transition:transform .2s; }
.ctk-toggle input:checked + span{ background:linear-gradient(145deg,var(--ctk-gold),var(--ctk-gold-2)); }
.ctk-toggle input:checked + span::after{ transform:translateX(16px); }
.ctk-toggle input:focus-visible + span{ box-shadow:0 0 0 3px color-mix(in srgb, var(--ctk-accent) 30%, transparent); }

/* ---------- Progress ---------- */
.ctk-progress{ height:4px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-bottom:24px; }
#ctk-progress-bar{ display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--ctk-gold),var(--ctk-gold-2)); transition:width .35s ease; }

/* ---------- Buttons ---------- */
.ctk-btn{
  position:relative; width:100%; border:0; cursor:pointer; font:inherit; font-weight:700;
  font-family:'Sora',sans-serif; color:#1a1a1a; padding:17px 22px; border-radius:var(--ctk-radius-sm);
  background:linear-gradient(145deg,var(--ctk-gold),var(--ctk-gold-2));
  box-shadow:0 12px 30px -10px color-mix(in srgb, var(--ctk-accent) 50%, transparent); transition:transform .15s, box-shadow .2s, filter .2s;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.ctk-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -10px color-mix(in srgb, var(--ctk-accent) 60%, transparent); filter:brightness(1.05); }
.ctk-btn:active{ transform:translateY(0); }
.ctk-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.ctk-btn[disabled]{ opacity:.7; cursor:not-allowed; transform:none; }
.ctk-btn-ghost{ background:transparent; color:var(--ctk-ivory); border:1px solid var(--ctk-border); box-shadow:none; }
.ctk-spinner{ width:18px; height:18px; border:2px solid rgba(0,0,0,.35); border-top-color:#1a1a1a;
  border-radius:50%; display:none; animation:ctk-spin .7s linear infinite; }
.ctk-btn.is-loading .ctk-btn-label{ opacity:.5; }
.ctk-btn.is-loading .ctk-spinner{ display:inline-block; }
.ctk-legal{ font-size:11px; color:var(--ctk-muted); text-align:center; margin:12px 0 0; }

/* ---------- Taximeter (signature) ---------- */
.ctk-meter{ background:linear-gradient(160deg, color-mix(in srgb, var(--ctk-accent) 10%, transparent), rgba(255,255,255,.04)); }
.ctk-meter-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.ctk-meter-title{ font-family:'Sora',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ctk-muted); }
.ctk-badges{ display:flex; gap:6px; }
.ctk-badge{ font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,.1); color:var(--ctk-text); border:1px solid var(--ctk-border); }
.ctk-badge-gold{ background:color-mix(in srgb, var(--ctk-accent) 18%, transparent); color:var(--ctk-gold); border-color:color-mix(in srgb, var(--ctk-accent) 40%, transparent); }
.ctk-meter-value{ display:flex; align-items:baseline; gap:8px; margin:8px 0 4px; }
.ctk-meter-cur{ font-size:18px; color:var(--ctk-muted); }
.ctk-meter-num{ font-family:'Roboto Mono',monospace; font-weight:700; font-size:clamp(40px,7vw,60px);
  color:var(--ctk-ivory); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1; }
.ctk-meter-eur{ font-family:'Roboto Mono',monospace; font-size:30px; color:var(--ctk-gold); font-weight:700; }
.ctk-meter-note{ font-size:13px; color:var(--ctk-muted); margin:0 0 16px; }
.ctk-breakdown{ margin:0; border-top:1px solid var(--ctk-border); padding-top:14px; }
.ctk-breakdown > div{ display:flex; justify-content:space-between; padding:6px 0; font-size:14px; }
.ctk-breakdown dt{ color:var(--ctk-muted); margin:0; }
.ctk-breakdown dd{ margin:0; color:var(--ctk-text); font-variant-numeric:tabular-nums; }
.ctk-disclaimer{ font-size:11px; color:var(--ctk-muted); margin:14px 0 0; line-height:1.5; }

/* ---------- Summary ---------- */
.ctk-sum-list{ margin:0; }
.ctk-sum-list > div{ display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px dashed var(--ctk-border); font-size:14px; }
.ctk-sum-list dt{ color:var(--ctk-muted); margin:0; flex:0 0 auto; }
.ctk-sum-list dd{ margin:0; text-align:right; color:var(--ctk-text); word-break:break-word; }
.ctk-sum-total{ border-bottom:0 !important; margin-top:6px; }
.ctk-sum-total dt{ color:var(--ctk-ivory) !important; font-weight:700; }
.ctk-sum-total dd{ color:var(--ctk-gold) !important; font-weight:700; font-size:18px; font-family:'Roboto Mono',monospace; }

/* ---------- Info blocks ---------- */
.ctk-svc{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ctk-svc li{ display:flex; align-items:center; gap:10px; font-size:14px; }
.ctk-ic{ display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--ctk-surface-2); border:1px solid var(--ctk-border); font-size:17px; }
.ctk-largeinfo ul{ margin:8px 0; padding-left:18px; color:var(--ctk-text); }
.ctk-largeinfo li{ margin:6px 0; }
.ctk-largeinfo strong{ color:var(--ctk-gold); }
.ctk-hl{ margin-top:12px; padding:10px 14px; border-radius:var(--ctk-radius-sm);
  background:rgba(52,199,123,.12); border:1px solid rgba(52,199,123,.3); color:#bff3d6; font-size:13px; }
.ctk-cancel .ctk-price{ font-family:'Roboto Mono',monospace; font-weight:700; font-size:30px; color:var(--ctk-gold); margin:6px 0 0; }

/* ---------- Custom address autocomplete dropdown (new Places API) ---------- */
.ctk-ac{
  list-style:none; margin:6px 0 0; padding:6px; position:absolute; left:0; right:0; top:100%;
  z-index:100000; background:#161b25; border:1px solid var(--ctk-border); border-radius:12px;
  box-shadow:var(--ctk-shadow); max-height:280px; overflow:auto;
}
.ctk-ac[hidden]{ display:none; }
.ctk-ac-item{
  padding:10px 12px; border-radius:8px; font-size:14px; color:#cfd6e2; cursor:pointer;
  display:flex; align-items:center; gap:8px;
}
.ctk-ac-item::before{ content:"📍"; font-size:13px; opacity:.7; }
.ctk-ac-item:hover{ background:color-mix(in srgb, var(--ctk-accent) 14%, transparent); color:var(--ctk-ivory); }

/* ---------- Honeypot ---------- */
.ctk-hp{ position:absolute !important; left:-9999px !important; opacity:0; height:0; overflow:hidden; }

/* ---------- Success modal ---------- */
.ctk-modal{ position:fixed; inset:0; z-index:99999; display:grid; place-items:center;
  background:rgba(8,10,14,.7); backdrop-filter:blur(6px); padding:20px; animation:ctk-fade .25s ease; }
.ctk-modal[hidden]{ display:none; }
.ctk-modal-card{ background:var(--ctk-bg-2); border:1px solid var(--ctk-border); border-radius:22px;
  padding:38px 30px; text-align:center; max-width:420px; width:100%; box-shadow:var(--ctk-shadow); animation:ctk-pop .4s ease; }
.ctk-modal-card h3{ margin:18px 0 8px; font-size:22px; }
.ctk-modal-card p{ color:var(--ctk-muted); margin:0 0 6px; }
.ctk-modal-no{ margin:14px 0 22px; font-size:14px; }
.ctk-modal-no strong{ color:var(--ctk-gold); font-family:'Roboto Mono',monospace; }
.ctk-check{ width:72px; height:72px; }
.ctk-check circle{ stroke:var(--ctk-green); stroke-width:3; stroke-dasharray:151; stroke-dashoffset:151; animation:ctk-draw .5s .1s ease forwards; }
.ctk-check path{ stroke:var(--ctk-green); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:48; stroke-dashoffset:48; animation:ctk-draw .4s .5s ease forwards; }

/* ---------- Animations ---------- */
@keyframes ctk-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes ctk-spin{ to{ transform:rotate(360deg); } }
@keyframes ctk-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ctk-pop{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:scale(1); } }
@keyframes ctk-draw{ to{ stroke-dashoffset:0; } }

/* ===================== RESPONSIVE =====================
   These use CONTAINER queries (@container) so the layout adapts to the
   width of the booking box itself — it works whether you drop it into a
   full-width section, a half-width column, or a narrow sidebar.
   ====================================================== */
@container ctk (max-width: 920px) {
  .ctk-grid      { grid-template-columns: 1fr; }
  .ctk-aside     { position: static; }
  .ctk-info-grid { grid-template-columns: 1fr 1fr; }
}
@container ctk (max-width: 600px) {
  .ctk-row,
  .ctk-toggles   { grid-template-columns: 1fr; }
  .ctk-svc       { grid-template-columns: 1fr 1fr; }
  .ctk-info-grid { grid-template-columns: 1fr; }
  .ctk-h1        { font-size: clamp(26px, 8vw, 34px); }
}
@container ctk (max-width: 380px) {
  .ctk-svc       { grid-template-columns: 1fr; }
  .ctk-meter-num { font-size: 34px; }
}

/* Browsers without container-query support: fall back to viewport widths */
@supports not (container-type: inline-size) {
  @media (max-width: 980px) {
    .ctk-grid      { grid-template-columns: 1fr; }
    .ctk-aside     { position: static; }
    .ctk-info-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .ctk-row, .ctk-toggles { grid-template-columns: 1fr; }
    .ctk-svc               { grid-template-columns: 1fr; }
  }
}

/* Mobile: edge-to-edge section */
@media (max-width: 560px) {
  .ctk-booking { padding: 22px 14px; border-radius: 0; }
}

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

/* ---------- Google Places autocomplete dropdown (dark theme) ---------- */
.pac-container{ background:#161b25; border:1px solid var(--ctk-border); border-radius:12px; margin-top:6px;
  box-shadow:var(--ctk-shadow); font-family:'Inter',sans-serif; overflow:hidden; z-index:100000; }
.pac-item{ color:#cfd6e2; border-top:1px solid rgba(255,255,255,.06); padding:8px 12px; }
.pac-item:hover,.pac-item-selected{ background:color-mix(in srgb, var(--ctk-accent) 12%, transparent); }
.pac-item-query{ color:var(--ctk-ivory); }
.pac-matched{ color:var(--ctk-gold); }
.pac-icon{ filter:invert(.7); }