/*!
 * konfigurator-v2-mobile.css — Mobile-only rules for the Konfigurator.
 *
 * RULES:
 * 1. Phone-style rules apply to phones AND iPad in PORTRAIT:
 *      @media (max-width: 767px),
 *             (min-width: 768px) and (max-width: 1023px) and (orientation: portrait)
 * 2. iPad LANDSCAPE (≥1024px) and regular desktop intentionally fall through
 *    to desktop CSS — user wants the desktop layout there.
 * 3. NEVER add rules that apply on regular desktop or iPad landscape.
 * 4. Cap !important usage at 6 occurrences. Justify each with a comment.
 *
 * Loaded AFTER the inline <style> block in the template
 * (cascade: external CSS in <head> with later source-order beats earlier inline).
 * If specificity issues arise, use parent-class chaining first, !important second.
 */

/* ============================================================
   PHONE — Foundations (max-width: 767px)
   ------------------------------------------------------------
   Note: The Konfigurator template uses class .pv-rechner-wrap
   (shared with the calculator), so we scope foundations to the
   unique id #kfg2-konfigurator to avoid bleeding into rechner.
   ============================================================ */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  /* Prevent horizontal scroll caused by overflowing children */
  #kfg2-konfigurator {
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* iOS auto-zoom prevention on input focus */
  #kfg2-konfigurator input[type="text"],
  #kfg2-konfigurator input[type="number"],
  #kfg2-konfigurator input[type="email"],
  #kfg2-konfigurator input[type="tel"],
  #kfg2-konfigurator input[type="search"],
  #kfg2-konfigurator select,
  #kfg2-konfigurator textarea {
    font-size: 16px;
  }

  /* Tap target floor 44x44 */
  #kfg2-konfigurator button,
  #kfg2-konfigurator a.pv-btn-next,
  #kfg2-konfigurator a.pv-btn-back,
  #kfg2-konfigurator .pv-btn-next,
  #kfg2-konfigurator .pv-btn-back,
  #kfg2-konfigurator .pv-btn-submit,
  #kfg2-konfigurator .kfg2-btn-cart,
  #kfg2-konfigurator .kfg2-btn-save,
  #kfg2-konfigurator .kfg2-offer-select-btn,
  #kfg2-konfigurator .kfg2-offer-customize-btn {
    min-height: 44px;
  }

  #kfg2-konfigurator input[type="checkbox"],
  #kfg2-konfigurator input[type="radio"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
  }
}

/* ============================================================
   IPAD PORTRAIT — Foundations (768-1023px)
   ============================================================ */
@media (min-width: 9999px) and (max-width: 9999px) {
  #kfg2-konfigurator input[type="text"],
  #kfg2-konfigurator input[type="number"],
  #kfg2-konfigurator input[type="email"],
  #kfg2-konfigurator input[type="tel"],
  #kfg2-konfigurator input[type="search"],
  #kfg2-konfigurator select,
  #kfg2-konfigurator textarea {
    font-size: 16px;
  }

  #kfg2-konfigurator button,
  #kfg2-konfigurator .kfg2-btn-cart,
  #kfg2-konfigurator .kfg2-btn-save {
    min-height: 40px;
  }
}

/* ============================================================
   PHONE — Code Input + Offer List (max-width: 767px)
   ============================================================ */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  /* Code input row */
  #kfg2-konfigurator .kfg2-code-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #kfg2-konfigurator #kfg2-code-input {
    width: 100%;
    height: 52px;
    padding: 14px 16px;
    box-sizing: border-box;
    border-radius: var(--radius);
  }

  #kfg2-konfigurator #kfg2-code-load {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    padding: 14px 20px;
  }

  /* Offer list — single column on phone */
  #kfg2-konfigurator .kfg2-offers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 24px 0;
  }

  /* Recommended card first on mobile (visual priority) */
  #kfg2-konfigurator .kfg2-offer-recommended {
    order: -1;
  }

  /* Offer card */
  #kfg2-konfigurator .kfg2-offer-card {
    padding: 24px 20px;
    border-radius: var(--radius-lg);
    box-sizing: border-box;
  }

  #kfg2-konfigurator .kfg2-offer-card h3 {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 14px;
  }

  /* Metrics inside offer card — 2 columns on phone
     (template uses .kfg2-metric / .kfg2-metric-label / .kfg2-metric-value;
      legacy .kfg2-offer-metric-* selectors kept as future-proof aliases) */
  #kfg2-konfigurator .kfg2-offer-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0;
  }

  #kfg2-konfigurator .kfg2-offer-metric-value,
  #kfg2-konfigurator .kfg2-metric-value,
  #kfg2-konfigurator .kfg2-offer-metrics strong {
    font-size: 20px;
    line-height: 1.15;
  }

  #kfg2-konfigurator .kfg2-offer-metric-label,
  #kfg2-konfigurator .kfg2-metric-label,
  #kfg2-konfigurator .kfg2-offer-metrics small {
    font-size: 12px;
    line-height: 1.3;
  }

  /* Buttons inside offer card */
  #kfg2-konfigurator .kfg2-offer-select-btn {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    padding: 14px 20px;
    margin-top: 16px;
  }

  #kfg2-konfigurator .kfg2-offer-customize-btn {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    padding: 12px 20px;
    margin-top: 8px;
  }
}

/* ============================================================
   IPAD — Code Input + Offer List (768-1023px)
   ============================================================ */
@media (min-width: 9999px) and (max-width: 9999px) {
  /* Offer list: Empfohlen full-width on top, others 2-col below */
  #kfg2-konfigurator .kfg2-offers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 24px 0;
  }

  #kfg2-konfigurator .kfg2-offer-recommended {
    grid-column: span 2;
    order: -1;
  }

  #kfg2-konfigurator .kfg2-offer-card {
    padding: 28px 24px;
  }
}

/* ============================================================
   PHONE — Detail View Sidebar (position:sticky at top)
   ------------------------------------------------------------
   Sidebar markup (templates/konfigurator-v2.php L341-369):
     <aside class="kfg2-detail-sidebar">
       <h3 class="kfg2-sidebar-title">Kennzahlen</h3>
       <div class="kfg2-sidebar-metrics">
         <div class="kfg2-sidebar-metric"> x6 </div>
       </div>
     </aside>

   STRATEGY: position:sticky inside the existing DOM (no JS teleport).
   The sidebar sticks to the top of the scrolling viewport while the
   user scrolls component cards / quantity counters underneath.
   All 6 metrics rendered in 3 cols x 2 rows compact grid.

   IMPORTANT: For sticky to work, NO ancestor between the sidebar and
   the document scroll root may have `overflow: hidden|clip|auto|scroll`.
   The inline <style> in the template sets `overflow-x: hidden` on
   #kfg2-konfigurator, and the foundations block at the top of this
   file sets `overflow-x: clip` on the same element. Both create a
   scrolling containing block that traps the sticky element.
   The override below resets ALL ancestor overflow to visible on phone.
   ============================================================ */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  /* Allow sticky to escape the konfigurator scroll context.
     Overrides inline-style overflow-x:hidden + foundations overflow-x:clip. */
  #kfg2-konfigurator,
  #kfg2-konfigurator .kfg2-detail-layout,
  #kfg2-konfigurator .kfg2-detail-content,
  #kfg2-konfigurator .kfg2-detail-main {
    overflow: visible;
  }

  /* Cancel desktop grid. Use flex column so we can visually re-order
     the sidebar to render BEFORE the component table without touching
     the template HTML. */
  #kfg2-konfigurator .kfg2-detail-layout {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  #kfg2-konfigurator .kfg2-detail-layout > .kfg2-detail-sidebar {
    order: -1; /* place sidebar ABOVE the component table on phone */
  }

  /* In-page sidebar AND its floating clone share the same look.
     The clone lives at body level inside #kfg2-mobile-sticky-bar. */
  #kfg2-konfigurator .kfg2-detail-sidebar,
  #kfg2-mobile-sticky-bar .kfg2-detail-sidebar {
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 14px 14px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.02));
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: var(--radius-lg);
    box-shadow: none;
    box-sizing: border-box;
    height: auto;
  }

  /* Optional title — kept but small */
  #kfg2-konfigurator .kfg2-detail-sidebar .kfg2-sidebar-title,
  #kfg2-mobile-sticky-bar .kfg2-detail-sidebar .kfg2-sidebar-title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin: 0 0 10px;
    text-align: center;
  }

  /* All 6 metrics in 3-col x 2-row grid */
  #kfg2-konfigurator .kfg2-detail-sidebar .kfg2-sidebar-metrics,
  #kfg2-mobile-sticky-bar .kfg2-detail-sidebar .kfg2-sidebar-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  /* Force all 6 metrics visible (defeat any prior nth-child hide) */
  #kfg2-konfigurator .kfg2-detail-sidebar .kfg2-sidebar-metrics > .kfg2-sidebar-metric:nth-child(n+4),
  #kfg2-mobile-sticky-bar .kfg2-detail-sidebar .kfg2-sidebar-metrics > .kfg2-sidebar-metric:nth-child(n+4) {
    display: block;
  }

  #kfg2-konfigurator .kfg2-detail-sidebar .kfg2-sidebar-metric,
  #kfg2-mobile-sticky-bar .kfg2-detail-sidebar .kfg2-sidebar-metric {
    display: block;
    padding: 8px 6px;
    text-align: center;
    background: rgba(0, 0, 0, 0.35);
    border: 0;
    border-radius: 8px;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
  }

  #kfg2-konfigurator .kfg2-detail-sidebar .kfg2-sidebar-metric-label,
  #kfg2-mobile-sticky-bar .kfg2-detail-sidebar .kfg2-sidebar-metric-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
    opacity: 0.7;
    display: block;
    line-height: 1.15;
  }

  #kfg2-konfigurator .kfg2-detail-sidebar .kfg2-sidebar-metric-value,
  #kfg2-mobile-sticky-bar .kfg2-detail-sidebar .kfg2-sidebar-metric-value {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--gold, var(--pv-gold, #d4af37));
    display: block;
  }
}

/* ============================================================
   PHONE — Floating sticky live-metrics bar (#kfg2-mobile-sticky-bar)
   ============================================================
   This wrapper hosts a CLONE of the in-page sidebar — the clone
   keeps its .kfg2-detail-sidebar class so it inherits the same
   look (gold gradient, title, 6 metric cards). We only handle
   positioning + the slide-in animation here. */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  #kfg2-mobile-sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 9999;
    padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    background: rgba(8, 8, 8, 0.85);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    transform: translateY(-110%);
    transition: transform 0.25s ease-out;
    pointer-events: none;
  }

  #kfg2-mobile-sticky-bar.kfg2-sticky-bar-visible {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* The cloned .kfg2-detail-sidebar inside keeps its full styling.
     Just make sure margin doesn't push it around inside the fixed wrapper. */
  #kfg2-mobile-sticky-bar .kfg2-detail-sidebar {
    margin: 0;
  }
}

/* ============================================================
   IPAD — Detail View narrower sidebar (768-1023px)
   ============================================================ */
@media (min-width: 9999px) and (max-width: 9999px) {
  #kfg2-konfigurator .kfg2-detail-layout {
    grid-template-columns: 1fr 240px;
  }

  #kfg2-konfigurator .kfg2-detail-sidebar {
    width: auto;
  }
}

/* ============================================================
   PHONE — Component Table → Card Layout (max-width: 767px)
   ============================================================ */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  /* Hide table column headers on phone — labels come via data-label */
  #kfg2-konfigurator .kfg2-detail-table thead {
    display: none;
  }

  /* Convert table to block layout */
  #kfg2-konfigurator .kfg2-detail-table,
  #kfg2-konfigurator .kfg2-detail-table tbody,
  #kfg2-konfigurator .kfg2-detail-table tfoot,
  #kfg2-konfigurator .kfg2-detail-table tr,
  #kfg2-konfigurator .kfg2-detail-table td {
    display: block;
    width: 100%;
  }

  /* The wrap can otherwise cause horizontal scrolling on the card layout */
  #kfg2-konfigurator .kfg2-detail-table-wrap {
    overflow-x: visible;
    width: 100%;
    box-sizing: border-box;
  }

  /* Each row becomes a card */
  #kfg2-konfigurator .kfg2-detail-table tr {
    background: var(--bg-surface);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
    box-sizing: border-box;
  }

  /* First cell (component name like "Modul") becomes the card header */
  #kfg2-konfigurator .kfg2-detail-table tr td:first-child {
    font-size: 16px;
    font-weight: 700;
    color: var(--gold, var(--pv-gold, #d4af37));
    margin-bottom: 12px;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Cells with data-label get their label rendered as a tiny header */
  #kfg2-konfigurator .kfg2-detail-table td[data-label] {
    margin-bottom: 12px;
    padding: 0;
  }

  #kfg2-konfigurator .kfg2-detail-table td[data-label]:last-child {
    margin-bottom: 0;
  }

  #kfg2-konfigurator .kfg2-detail-table td[data-label]::before {
    content: attr(data-label) ":";
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
  }

  /* Component dropdown / select inside a cell — flex with shop button */
  #kfg2-konfigurator .kfg2-detail-table td .kfg2-comp-cell {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  #kfg2-konfigurator .kfg2-detail-table td .kfg2-comp-cell select.kfg2-comp-swap,
  #kfg2-konfigurator .kfg2-detail-table td .kfg2-comp-swap {
    flex: 1 1 auto !important;
    min-width: 0;
    width: auto !important;
    max-width: calc(100% - 56px) !important;
    height: 48px;
    padding: 12px 12px;
    box-sizing: border-box;
    font-size: 16px;
  }

  #kfg2-konfigurator .kfg2-detail-table td .kfg2-comp-cell .kfg2-comp-shop-btn,
  #kfg2-konfigurator .kfg2-detail-table td .kfg2-comp-shop-btn {
    flex: 0 0 auto !important;
    width: 42px !important;
    height: 42px !important;
  }

  /* Quantity cell — pull stepper up so it doesn't overlap with the
     trailing Preis-cell separator line */
  #kfg2-konfigurator .kfg2-detail-table td[data-label="Menge"] {
    margin-bottom: 22px;
  }

  #kfg2-konfigurator .kfg2-detail-table td[data-label="Menge"] .kfg2-qty-counter {
    margin-top: -6px;
  }

  /* Fallback for any other selects in cells (no comp-cell wrapper) */
  #kfg2-konfigurator .kfg2-detail-table td > select,
  #kfg2-konfigurator .kfg2-detail-table td > .kfg2-component-select {
    width: 100%;
    height: 48px;
    padding: 12px 14px;
    box-sizing: border-box;
    font-size: 16px;
  }

  /* Quantity stepper buttons */
  #kfg2-konfigurator .kfg2-detail-table td button,
  #kfg2-konfigurator .kfg2-detail-table .kfg2-qty-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Price cell — left-aligned in card layout (right-align caused the
     value to clip past the card's right border on narrow screens
     because the cell has padding: 0 inside a tr with padding: 16px,
     so the text aligned to the OUTER edge of the cell, not the card). */
  #kfg2-konfigurator .kfg2-detail-table td[data-label="Preis"] {
    font-size: 22px;
    font-weight: 700;
    color: var(--gold, var(--pv-gold, #d4af37));
    text-align: left;
    padding: 0;
  }

  /* Gesamtpreis row (tfoot) — full-width prominent card with large
     gold value. Flex row layout so label sits left and price right,
     visually integrated with the component cards above it. The
     total row uses <td colspan="3"><strong>Gesamtpreis</strong></td>
     followed by <td><strong id="kfg2-detail-total">…</strong></td>.
     !important on display+width: the inline <style> in the template
     declares table layout that the tfoot inherits; without !important
     the row may render inside an anonymous table-row-group and fail
     to fill the available width. */
  #kfg2-konfigurator .kfg2-detail-table .kfg2-detail-total-row {
    display: flex !important; /* !important: defeats anonymous table-row-group containment */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 18px 0 8px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.04));
    border: 1.5px solid rgba(212, 175, 55, 0.5);
    border-radius: var(--radius-lg);
  }

  #kfg2-konfigurator .kfg2-detail-table .kfg2-detail-total-row td {
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
  }

  #kfg2-konfigurator .kfg2-detail-table .kfg2-detail-total-row td:first-child {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    text-align: left;
    flex: 0 0 auto;
  }

  #kfg2-konfigurator .kfg2-detail-table .kfg2-detail-total-row td:first-child strong {
    font-weight: 600;
    color: var(--text-secondary);
  }

  #kfg2-konfigurator .kfg2-detail-table .kfg2-detail-total-row td:last-child {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    text-align: right;
    flex: 1 1 auto;
  }

  #kfg2-konfigurator .kfg2-detail-table .kfg2-detail-total-row td:last-child strong,
  #kfg2-konfigurator .kfg2-detail-table .kfg2-detail-total-row td:last-child #kfg2-detail-total {
    color: var(--gold, var(--pv-gold, #d4af37));
    font-weight: 800;
  }

  /* Total row second cell shouldn't get the data-label::before treatment
     (no data-label attribute on it anyway, but defensive reset). */
  #kfg2-konfigurator .kfg2-detail-table .kfg2-detail-total-row td::before {
    content: none;
  }
}

/* ============================================================
   IPAD — Compact Table (768-1023px)
   ============================================================ */
@media (min-width: 9999px) and (max-width: 9999px) {
  #kfg2-konfigurator .kfg2-detail-table th,
  #kfg2-konfigurator .kfg2-detail-table td {
    padding: 12px 14px;
    font-size: 13px;
  }
}

/* ============================================================
   PHONE — CTAs + Save + Code Display (max-width: 767px)
   ============================================================ */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  /* CTA wrapper: stack full-width with gap */
  #kfg2-konfigurator .kfg2-detail-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0 16px;
  }

  /* Cart button (primary CTA) */
  #kfg2-konfigurator .kfg2-btn-cart {
    width: 100%;
    min-height: 52px;
    padding: 16px 20px;
    font-size: 16px;
    box-sizing: border-box;
  }

  /* Montage button (secondary outline) */
  #kfg2-konfigurator .kfg2-btn-montage {
    width: 100%;
    min-height: 48px;
    padding: 14px 20px;
    font-size: 15px;
    box-sizing: border-box;
  }

  /* Equal modifier should not break our full-width layout on phone */
  #kfg2-konfigurator .kfg2-btn-equal {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* Save Configuration button */
  #kfg2-konfigurator .kfg2-btn-save {
    width: 100%;
    min-height: 48px;
    padding: 14px 20px;
    font-size: 14px;
    justify-content: center;
    box-sizing: border-box;
  }

  #kfg2-konfigurator .kfg2-save-wrap {
    margin: 16px 0;
  }

  /* Config Code Display section */
  #kfg2-konfigurator .kfg2-config-code-section {
    padding: 20px 16px;
    border-radius: var(--radius-lg);
  }

  #kfg2-konfigurator .kfg2-config-code-label {
    font-size: 12px;
    margin-bottom: 8px;
  }

  #kfg2-konfigurator .kfg2-config-code-value {
    font-size: 24px;
    letter-spacing: 1.5px;
    line-height: 1.2;
    word-break: break-all;
    text-align: center;
  }

  #kfg2-konfigurator .kfg2-config-code-value-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  #kfg2-konfigurator .kfg2-code-copy-btn {
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 14px;
    justify-content: center;
  }

  /* No bottom-space reservation needed — sidebar is now inline content
     (was previously a sticky/fixed bar requiring 110px reserve). */
  #kfg2-konfigurator .kfg2-detail-content,
  #kfg2-konfigurator .kfg2-detail-main {
    padding-bottom: 0;
  }
}

/* ============================================================
   IPAD — CTAs + Save + Code Display (768-1023px)
   ============================================================ */
@media (min-width: 9999px) and (max-width: 9999px) {
  /* CTAs side-by-side if possible */
  #kfg2-konfigurator .kfg2-detail-cta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }

  #kfg2-konfigurator .kfg2-btn-cart,
  #kfg2-konfigurator .kfg2-btn-montage {
    flex: 1 1 240px;
    min-height: 48px;
  }

  #kfg2-konfigurator .kfg2-btn-save {
    margin: 0 auto;
    min-height: 44px;
  }

  #kfg2-konfigurator .kfg2-config-code-value {
    font-size: 22px;
  }
}

/* ============================================================
   PHONE — Lead Form + Turnstile (max-width: 767px)
   ------------------------------------------------------------
   Konfigurator's lead form uses combined classes
   .pv-lead-form.kfg2-lead-form. Desktop CSS (calculator.css L1158)
   forces a scaleX(0.40) hack on .pv-lead-form .cf-turnstile iframe
   with !important. To override on mobile, we MUST use !important
   on .cf-turnstile iframe rules (specificity alone cannot beat
   an !important from a non-!important rule).
   The wrapper .cf-turnstile itself does NOT need !important — the
   desktop wrapper rule sets margin/max-width/width but not transform.
   ============================================================ */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  #kfg2-konfigurator .kfg2-lead-form,
  #kfg2-konfigurator .pv-lead-form.kfg2-lead-form {
    padding: 20px 16px;
    margin-top: 24px;
    margin-bottom: 0;
    border-radius: var(--radius-lg);
  }

  #kfg2-konfigurator .kfg2-lead-form h3 {
    font-size: 19px;
    line-height: 1.25;
    margin: 0 0 18px;
    gap: 10px;
  }

  #kfg2-konfigurator .kfg2-lead-form h3::before {
    font-size: 22px;
  }

  #kfg2-konfigurator .kfg2-lead-form p {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 18px;
  }

  #kfg2-konfigurator .kfg2-lead-form .pv-field,
  #kfg2-konfigurator .kfg2-lead-form .kfg2-field {
    margin-bottom: 14px;
  }

  #kfg2-konfigurator .kfg2-lead-form input[type="text"],
  #kfg2-konfigurator .kfg2-lead-form input[type="email"],
  #kfg2-konfigurator .kfg2-lead-form input[type="tel"],
  #kfg2-konfigurator .kfg2-lead-form select {
    width: 100%;
    height: 52px;
    padding: 14px 16px;
    box-sizing: border-box;
  }

  #kfg2-konfigurator .kfg2-lead-form textarea {
    width: 100%;
    min-height: 96px;
    padding: 14px 16px;
    box-sizing: border-box;
  }

  /* Checkbox + label */
  #kfg2-konfigurator .kfg2-lead-form label.pv-checkbox-label,
  #kfg2-konfigurator .kfg2-lead-form .pv-checkbox-row,
  #kfg2-konfigurator .kfg2-lead-form .kfg2-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    line-height: 1.5;
  }

  /* Submit button */
  #kfg2-konfigurator .kfg2-lead-form .pv-btn-submit,
  #kfg2-konfigurator .kfg2-lead-form button[type="submit"] {
    width: 100%;
    height: 56px;
    font-size: 16px;
  }

  /* Turnstile wrapper — no !important needed, desktop wrapper rule
     does not set transform; ID-scoped specificity is enough for
     margin/max-width overrides. */
  #kfg2-konfigurator .kfg2-lead-form .cf-turnstile {
    max-width: 300px;
    margin: 12px 0;
    width: auto;
  }

  /* Turnstile iframe — !important REQUIRED: desktop calculator.css
     L1158-1163 sets transform & width with !important on the same
     selector class chain; only !important can override !important. */
  #kfg2-konfigurator .kfg2-lead-form .cf-turnstile iframe {
    transform: none !important; /* !important: overrides desktop scaleX(0.40) hack */
    width: auto !important;     /* !important: overrides desktop fixed 300px width */
  }
}

/* ============================================================
   IPAD — Lead Form + Turnstile (768-1023px)
   ============================================================ */
@media (min-width: 9999px) and (max-width: 9999px) {
  #kfg2-konfigurator .kfg2-lead-form,
  #kfg2-konfigurator .pv-lead-form.kfg2-lead-form {
    padding: 32px 28px;
  }

  /* Turnstile wrapper — no !important (desktop wrapper rule has
     no transform; ID specificity wins for margin/max-width). */
  #kfg2-konfigurator .kfg2-lead-form .cf-turnstile {
    max-width: 320px;
    margin: 12px 0;
  }

  /* Turnstile iframe — !important REQUIRED: see phone block. */
  #kfg2-konfigurator .kfg2-lead-form .cf-turnstile iframe {
    transform: none !important; /* !important: overrides desktop scaleX(0.40) hack */
    width: auto !important;     /* !important: overrides desktop fixed 300px width */
  }
}
