/*
 * Google Ads Potenzial-Rechner – v1.8
 * Slider-Stil übernommen aus dem Original-Widget (Google Ads Widget.rtf):
 * 22px brand-blue Thumb mit 2px white border + Softshadow, 6px rounded track.
 */

.attia-gcalc{display:flex;flex-direction:column;gap:clamp(22px, 3vw, 32px)}

.attia-gcalc-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
  gap:clamp(28px, 3vw, 44px);
  align-items:start;
}
@media (max-width: 820px){.attia-gcalc-grid{grid-template-columns:1fr;gap:clamp(24px, 4vw, 32px)}}

/* ============================================================ */
/* LEFT: input rows                                              */
/* ============================================================ */
.attia-gcalc-inputs{display:flex;flex-direction:column;gap:clamp(18px, 2vw, 24px)}

.attia-gcalc-row{
  display:flex;flex-direction:column;gap:12px;
  padding:clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 22px);
  background:var(--at-card-inner);
  border:1px solid var(--at-card-inner-border);
  border-radius:var(--at-radius-sm);
  transition:border-color .2s ease;
}
.attia-gcalc-row:focus-within{border-color:rgba(41,101,199,.4)}

.attia-gcalc-row-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.attia-gcalc-label{
  flex:1 1 auto;min-width:0;
  font-family:var(--at-font-head);font-weight:700;color:#fff;
  font-size:14.5px;line-height:1.35;cursor:pointer;
}

/* Pill-style number input. Themes (ThemeHT etc) tend to slap a generic
   background:#fff on input[type=number] – we use !important throughout so
   our dark-pill styling wins without custom per-theme overrides. */
.attia-gcalc-num{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:10px 16px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:var(--at-radius-pill) !important;
  transition:border-color .2s ease,box-shadow .2s ease;
  min-height:44px;
  box-sizing:border-box;
}
.attia-gcalc-num:focus-within{
  border-color:var(--at-blue-1) !important;
  box-shadow:0 0 0 3px rgba(41,101,199,.2) !important;
}
.attia-gcalc-input{
  width:80px !important;
  background:transparent !important;
  background-color:transparent !important;
  border:none !important;
  box-shadow:none !important;
  text-align:right !important;
  font-family:var(--at-font-head) !important;
  font-weight:800 !important;
  font-size:15px !important;
  color:#fff !important;
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
  height:auto !important;
  line-height:1.3 !important;
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
@media (min-width: 1080px){.attia-gcalc-input{width:100px !important}}
.attia-gcalc-input:focus{outline:none !important;box-shadow:none !important}
.attia-gcalc-input::-webkit-outer-spin-button,
.attia-gcalc-input::-webkit-inner-spin-button{-webkit-appearance:none !important;margin:0 !important}
.attia-gcalc-unit{
  color:var(--at-text-muted) !important;
  font-family:var(--at-font-head) !important;
  font-weight:700 !important;
  font-size:14px !important;
  line-height:1 !important;
}

/* ============================================================ */
/* SLIDER – based on the Google Ads Widget.rtf reference.
   !important on every property because ThemeHT-style parent themes
   inject aggressive input[type=range]/thumb rules (white bg, flat thumb)
   that otherwise take over once they match the same selector specificity. */
/* ============================================================ */
.attia-gcalc-range{
  -webkit-appearance:none !important;
  appearance:none !important;
  width:100% !important;height:6px !important;
  background:rgba(255,255,255,.12);
  border-radius:999px !important;
  outline:none !important;
  cursor:pointer !important;
  margin:4px 0 0 !important;
  padding:0 !important;
  border:none !important;
  display:block !important;
  /* The linear-gradient fill is painted by JS, see gads-calc.js paintSlider() */
}
.attia-gcalc-range::-webkit-slider-runnable-track{
  width:100% !important;height:6px !important;
  cursor:pointer !important;
  background:transparent !important;
  border:none !important;
}
.attia-gcalc-range::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  appearance:none !important;
  height:22px !important;width:22px !important;
  border-radius:50% !important;
  background:#2965C7 !important;
  background-color:#2965C7 !important;
  background-image:none !important;
  border:2px solid #ffffff !important;
  cursor:pointer !important;
  margin-top:-8px !important;
  box-shadow:0 4px 8px rgba(41,101,199,.4) !important;
  transition:transform .1s ease, box-shadow .15s ease;
}
.attia-gcalc-range::-webkit-slider-thumb:hover{transform:scale(1.1)}
.attia-gcalc-range:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 4px rgba(41,101,199,.3), 0 4px 8px rgba(41,101,199,.4) !important;
}
.attia-gcalc-range::-moz-range-track{
  width:100% !important;height:6px !important;
  background:transparent !important;
  border-radius:999px !important;
  border:none !important;
}
.attia-gcalc-range::-moz-range-thumb{
  height:22px !important;width:22px !important;
  border-radius:50% !important;
  background:#2965C7 !important;
  border:2px solid #ffffff !important;
  box-shadow:0 4px 8px rgba(41,101,199,.4) !important;
  cursor:pointer !important;
}

/* ============================================================ */
/* RIGHT: result column                                          */
/* ============================================================ */
.attia-gcalc-result{
  display:flex;flex-direction:column;gap:18px;
  padding:clamp(26px, 3vw, 38px);
  background:linear-gradient(160deg, rgba(100,233,255,.06) 0%, rgba(41,101,199,.08) 100%);
  border:1px solid rgba(100,233,255,.2);
  border-radius:var(--at-radius-sm);
  position:sticky;top:20px;
}

.attia-gcalc-hero{
  text-align:center;padding:6px 0 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.attia-gcalc-hero-label{
  color:var(--at-text-subtle);font-size:12.5px;
  text-transform:uppercase;letter-spacing:.5px;font-weight:700;
  margin-bottom:10px;
}
.attia-gcalc-hero-value{
  font-family:var(--at-font-head);
  font-size:clamp(22px, 3vw, 38px);font-weight:800;
  color:var(--at-success);line-height:1.05;
  font-variant-numeric:tabular-nums;
  transition:color .2s ease;
  /* Stop multi-million euro values from blowing out the sticky result card.
     white-space:nowrap keeps the "€" glued to the digits; container queries
     would be cleaner but the smaller clamp does the job for realistic inputs. */
  white-space:nowrap;
  max-width:100%;
  display:block;
}
.attia-gcalc-hero-sub{
  color:var(--at-text-muted);font-size:13.5px;margin-top:10px;line-height:1.5;
}
.attia-gcalc-hero-sub strong{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}

.attia-gcalc-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.attia-gcalc-stat{
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  display:flex;flex-direction:column;gap:4px;
}
.attia-gcalc-stat-label{
  color:var(--at-text-subtle);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.3px;font-weight:700;
}
.attia-gcalc-stat-value{
  font-family:var(--at-font-head);font-weight:800;color:#fff;
  font-size:17px;font-variant-numeric:tabular-nums;
}
.attia-gcalc-stat.is-budget{background:rgba(41,101,199,.18);border-color:rgba(41,101,199,.35)}
.attia-gcalc-stat.is-budget .attia-gcalc-stat-value{color:#bad7ff}
.attia-gcalc-stat.is-roas .attia-gcalc-stat-value{color:var(--at-accent)}

/* ============================================================ */
/* Light theme                                                   */
/* ============================================================ */
.attia-tool-section.is-light .attia-gcalc-row{background:#f8fafc;border-color:#e5e7eb}
.attia-tool-section.is-light .attia-gcalc-label{color:#0f172a}
.attia-tool-section.is-light .attia-gcalc-num{background:#fff;border-color:#cbd5e1}
.attia-tool-section.is-light .attia-gcalc-num:focus-within{border-color:#2965c7;box-shadow:0 0 0 3px rgba(41,101,199,.15)}
.attia-tool-section.is-light .attia-gcalc-input{color:#0f172a}
.attia-tool-section.is-light .attia-gcalc-unit{color:#64748b}
.attia-tool-section.is-light .attia-gcalc-range{background:#e2e8f0}
.attia-tool-section.is-light .attia-gcalc-range::-webkit-slider-thumb{
  background:#2965c7;border-color:#fff;box-shadow:0 4px 6px rgba(41,101,199,.25);
}
.attia-tool-section.is-light .attia-gcalc-range::-moz-range-thumb{
  background:#2965c7;border-color:#fff;box-shadow:0 4px 6px rgba(41,101,199,.25);
}
.attia-tool-section.is-light .attia-gcalc-result{
  background:linear-gradient(160deg,#eff6ff 0%,#ecfdf5 100%);
  border-color:#bfdbfe;
}
.attia-tool-section.is-light .attia-gcalc-hero-label,
.attia-tool-section.is-light .attia-gcalc-stat-label{color:#64748b}
.attia-tool-section.is-light .attia-gcalc-hero-value{color:#059669}
.attia-tool-section.is-light .attia-gcalc-hero-sub{color:#475569}
.attia-tool-section.is-light .attia-gcalc-hero-sub strong{color:#0f172a}
.attia-tool-section.is-light .attia-gcalc-stat{background:#fff;border-color:#e5e7eb}
.attia-tool-section.is-light .attia-gcalc-stat-value{color:#0f172a}
.attia-tool-section.is-light .attia-gcalc-stat.is-budget{background:#dbeafe;border-color:#93c5fd}
.attia-tool-section.is-light .attia-gcalc-stat.is-budget .attia-gcalc-stat-value{color:#1e40af}
.attia-tool-section.is-light .attia-gcalc-stat.is-roas .attia-gcalc-stat-value{color:#2965c7}

/* ============================================================ */
/* Mobile                                                        */
/* ============================================================ */
@media (max-width: 560px){
  .attia-gcalc-row-head{flex-wrap:wrap;gap:10px}
  .attia-gcalc-label{width:100%}
  .attia-gcalc-num{width:100%;justify-content:flex-end}
  .attia-gcalc-input{width:auto;flex:1}
  .attia-gcalc-hero-value{font-size:clamp(28px, 9vw, 38px)}
  .attia-gcalc-stats{grid-template-columns:1fr}
  .attia-gcalc-result{position:static}
}