/* =====================================================================
 * iePayConnect – Frontend Stylesheet
 * Version: wird durch IEPAYCONNECT_VERSION gesteuert (Cache-Busting)
 *
 * ── WIE MAN DAS DESIGN ANPASST ──────────────────────────────────────
 *
 * 1. FARBEN & ABSTÄNDE – CSS-Variablen überschreiben
 *    Füge folgendes in dein Theme-CSS ein (z.B. woocommerce.css):
 *
 *    .iepayconnect-payment-instructions {
 *        --ipc-primary:       #f69222;   ← Hauptfarbe
 *        --ipc-radius:        12px;      ← Eckenradius
 *        --ipc-padding:       32px;      ← Innenabstand der Box
 *    }
 *
 *    Mit ieShop-Variablen verknüpfen (empfohlen für ieShop):
 *    .iepayconnect-payment-instructions {
 *        --ipc-primary:        var(--ieShop-accent);
 *        --ipc-primary-light:  var(--ieShop-accent-tint);
 *        --ipc-primary-border: var(--ieShop-accent-border);
 *        --ipc-primary-dark:   var(--ieShop-accent-hover);
 *        --ipc-radius:         var(--ieShop-radius-md);
 *        --ipc-radius-sm:      var(--ieShop-radius-sm);
 *        --ipc-surface:        var(--ieShop-surface);
 *        --ipc-surface-alt:    var(--ieShop-background);
 *        --ipc-border:         var(--ieShop-border);
 *        --ipc-text:           var(--ieShop-text-main);
 *        --ipc-text-muted:     var(--ieShop-text-muted);
 *    }
 *
 * 2. LAYOUT – Reihenfolge und Anordnung der Sektionen
 *    Das Layout basiert auf CSS Grid mit benannten Bereichen.
 *    Jede Sektion hat einen festen Namen (grid-area).
 *    Du kannst die Bereiche frei anordnen – nur mit CSS, kein PHP nötig.
 *
 *    Beispiel: 2 Spalten, QR links statt rechts:
 *    .iepayconnect-payment-instructions {
 *        grid-template-columns: auto 1fr;
 *        grid-template-areas:
 *            "testmode  testmode"
 *            "status    status"
 *            "qr        title"
 *            "qr        amount"
 *            "qr        fiat"
 *            "qr        address"
 *            "ref       ref"
 *            "sender    sender"
 *            "expires   expires"
 *            "notice    notice";
 *    }
 *
 *    Beispiel: Alles einspaltng (wie Mobile-Ansicht):
 *    .iepayconnect-payment-instructions {
 *        grid-template-columns: 1fr;
 *        grid-template-areas:
 *            "status" "title" "amount" "qr"
 *            "fiat" "address" "ref"
 *            "sender" "expires" "notice";
 *    }
 *
 *    ALLE VERFÜGBAREN BEREICHSNAMEN:
 *    ┌──────────────────────────────────────────────────────────────┐
 *    │  testmode  status   title   amount  fiat    rate            │
 *    │  address   qr       ref     sender  expires notice          │
 *    └──────────────────────────────────────────────────────────────┘
 *    Nicht gerenderte Bereiche (z.B. "rate" wenn kein Kurs verfügbar,
 *    "testmode" im Live-Betrieb) hinterlassen keinen leeren Platz.
 *
 * ===================================================================== */


/* ── CSS-Variablen (Defaults – alle hier überschreibbar) ────────────── */
.iepayconnect-payment-instructions {
    /* Hauptfarbe (Standard: WordPress-Blau) */
    --ipc-primary:        #0073aa;
    --ipc-primary-light:  #e8f4fd;
    --ipc-primary-border: #90caf9;
    --ipc-primary-dark:   #005a87;

    /* Erfolg (grün) */
    --ipc-success:        #1b5e20;
    --ipc-success-light:  #e8f5e9;
    --ipc-success-border: #81c784;

    /* Warnung (gelb) */
    --ipc-warning:        #856404;
    --ipc-warning-light:  #fff8e1;
    --ipc-warning-border: #ffe082;

    /* Fehler (rot) */
    --ipc-error:          #b71c1c;
    --ipc-error-light:    #fce4ec;
    --ipc-error-border:   #ef9a9a;

    /* Flächen & Rahmen */
    --ipc-surface:        #ffffff;
    --ipc-surface-alt:    #f8f9fa;
    --ipc-border:         #e0e0e0;

    /* Text */
    --ipc-text:           #222222;
    --ipc-text-muted:     #555555;
    --ipc-label-width:    140px;
    --ipc-qr-column:      270px;

    /* Abstände & Formen */
    --ipc-radius:         6px;
    --ipc-radius-sm:      4px;
    --ipc-gap:            12px;
    --ipc-padding:        24px;
    --ipc-row-padding:    8px 12px;
}


/* ── Grid-Container ─────────────────────────────────────────────────── */
.iepayconnect-payment-instructions {
    background:    var(--ipc-surface-alt);
    border:        2px solid var(--ipc-primary);
    border-radius: var(--ipc-radius);
    padding:       var(--ipc-padding);
    margin:        24px 0;
    font-family:   inherit;

    /* CSS Grid – Standard-Layout: 2 Spalten, QR rechts */
    display:               grid;
    grid-template-columns: minmax(0, 1fr) var(--ipc-qr-column);
    grid-template-areas:
        "testmode  testmode"
        "status    status"
        "title     title"
        "change    change"
        "amount    qr"
        "fiat      qr"
        "rate      qr"
        "address   qr"
        "order     qr"
        "ref       qr"
        "sender    sender"
        "expires   expires"
        "notice    notice";
    gap:           var(--ipc-gap);
    align-items:   start;
}

/* Grid-Area Zuweisung – jeder Bereich hat einen Namen */
.ipc-area--testmode { grid-area: testmode; }
.ipc-area--status   { grid-area: status;   }
.ipc-area--title    { grid-area: title;    }
.ipc-area--amount   { grid-area: amount;   }
.ipc-area--fiat     { grid-area: fiat;     }
.ipc-area--rate     { grid-area: rate;     }
.ipc-area--address  { grid-area: address;  }
.ipc-area--qr       { grid-area: qr;       }
.ipc-area--change-currency { grid-area: change; }
.ipc-area--ref      { grid-area: ref;      }
.ipc-area--order    { grid-area: order;    }
.ipc-area--sender   { grid-area: sender;   }
.ipc-area--expires  { grid-area: expires;  }
.ipc-area--notice   { grid-area: notice;   }


/* ── Testmode-Banner ────────────────────────────────────────────────── */
.ipc-area--testmode {
    background:    var(--ipc-warning-light);
    border:        1px solid var(--ipc-warning-border);
    border-radius: var(--ipc-radius-sm);
    padding:       10px 16px;
    color:         var(--ipc-warning);
    font-weight:   600;
}


/* ── Status-Bar ─────────────────────────────────────────────────────── */
.ipc-area--status {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       12px 16px;
    border-radius: var(--ipc-radius);
    font-weight:   600;
    font-size:     1em;
    transition:    background 0.4s, border-color 0.4s;
}
.iepayconnect-status-pending   { background: var(--ipc-primary-light);  border: 1px solid var(--ipc-primary-border); color: var(--ipc-primary);  }
.iepayconnect-status-confirmed { background: var(--ipc-success-light);  border: 1px solid var(--ipc-success-border); color: var(--ipc-success);  }
.iepayconnect-status-failed    { background: var(--ipc-error-light);    border: 1px solid var(--ipc-error-border);   color: var(--ipc-error);    }
.iepayconnect-status-icon { font-size: 1.3em; line-height: 1; }
.iepayconnect-status-text { flex: 1; }

@keyframes ipc-spin { to { transform: rotate(360deg); } }
.ipc-spinner {
    display:          inline-block;
    width:            18px;
    height:           18px;
    border:           3px solid var(--ipc-primary-border);
    border-top-color: var(--ipc-primary);
    border-radius:    50%;
    animation:        ipc-spin 0.8s linear infinite;
    vertical-align:   middle;
}


/* ── Titel-Bereich ──────────────────────────────────────────────────── */
.iepayconnect-title {
    color:     var(--ipc-primary);
    margin:    0 0 4px;
    font-size: 1.3em;
}
.iepayconnect-subtitle {
    color:     var(--ipc-text-muted);
    margin:    0;
    font-size: 0.95em;
}


/* ── Standard-Infozeile ─────────────────────────────────────────────── */
.iepayconnect-info-row {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    padding:       var(--ipc-row-padding);
    background:    var(--ipc-surface);
    border-radius: var(--ipc-radius-sm);
    border:        1px solid var(--ipc-border);
    box-sizing:    border-box;
    width:         100%;
}
.iepayconnect-label {
    font-weight: 600;
    min-width:   var(--ipc-label-width);
    color:       var(--ipc-text);
    flex-shrink: 0;
}
.iepayconnect-value {
    color:      var(--ipc-text);
    word-break: break-all;
}


/* ── Krypto-Betrag (hervorgehoben) ──────────────────────────────────── */
.ipc-area--amount {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       var(--ipc-row-padding);
    background:    var(--ipc-primary-light);
    border-radius: var(--ipc-radius-sm);
    border:        1px solid var(--ipc-primary);
    box-sizing:    border-box;
    width:         100%;
}
.iepayconnect-amount {
    font-size:   1.15em;
    font-weight: 700;
    color:       var(--ipc-primary);
    word-break:  break-all;
}


/* ── Adresse ────────────────────────────────────────────────────────── */
.iepayconnect-address-wrap {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
    width:       100%;
    min-width:   0;
}
.iepayconnect-address {
    font-size:     0.9em;
    background:    #f0f0f0;
    padding:       6px 10px;
    border-radius: var(--ipc-radius-sm);
    word-break:    break-all;
    flex:          1;
    min-width:     0;
}
.iepayconnect-copy-btn {
    background:    var(--ipc-primary);
    color:         #fff;
    border:        none;
    padding:       6px 14px;
    border-radius: var(--ipc-radius-sm);
    cursor:        pointer;
    font-size:     0.9em;
    white-space:   nowrap;
    transition:    background 0.2s;
}
.iepayconnect-copy-btn:hover { background: var(--ipc-primary-dark); }


/* ── QR-Code Box ────────────────────────────────────────────────────── */
.ipc-area--qr {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             12px;
    padding:         16px 18px;
    background:      var(--ipc-surface);
    border:          3px solid var(--ipc-success);
    border-radius:   var(--ipc-radius);
    width:           100%;
    max-width:       var(--ipc-qr-column);
    justify-self:    stretch;
    align-self:      start;
    position:        sticky;
    top:             20px; /* bleibt beim Scrollen sichtbar */
    box-sizing:      border-box;
}
.ipc-area--qr img {
    display:       block;
    border-radius: var(--ipc-radius-sm);
}
.iepayconnect-qr-currency {
    width:       100%;
    font-weight: 700;
    color:       var(--ipc-text);
    text-align:  center;
    line-height: 1.25;
    font-size:   1.05em;
}
.iepayconnect-qr-hint {
    font-size:  0.8em;
    color:      var(--ipc-text-muted);
    margin:     0;
    text-align: center;
}

/* Wallet-Button (im QR-Bereich) */
.iepayconnect-wallet-btn {
    display:         inline-block;
    background:      var(--ipc-success);
    color:           #fff !important;
    border-radius:   var(--ipc-radius-sm);
    padding:         10px 14px;
    font-weight:     600;
    text-decoration: none;
    font-size:       0.95em;
    text-align:      center;
    width:           100%;
    box-sizing:      border-box;
    transition:      background 0.2s;
}
.iepayconnect-wallet-btn:hover          { background: #125c2a; color: #fff !important; }
.iepayconnect-wallet-btn-note {
    display:     block;
    font-size:   0.78em;
    font-weight: 500;
    line-height: 1.25;
    opacity:     0.9;
}
.iepayconnect-wallet-btn-paid,
.iepayconnect-wallet-btn-paid:hover {
    background:     var(--ipc-success-light);
    color:          var(--ipc-success) !important;
    border:         1px solid var(--ipc-success-border);
    cursor:         default;
    pointer-events: none;
}

/* Währung-ändern-Button (im QR-Bereich) */
.iepayconnect-change-currency-btn {
    display:         inline-block;
    background:      #fff;
    border:          2px solid var(--ipc-primary);
    color:           var(--ipc-primary) !important;
    border-radius:   var(--ipc-radius-sm);
    padding:         7px 12px;
    font-size:       0.9em;
    font-weight:     600;
    text-decoration: none;
    text-align:      center;
    width:           100%;
    box-sizing:      border-box;
    transition:      background 0.2s;
}
.iepayconnect-change-currency-btn:hover {
    background: var(--ipc-primary-light);
    color:      var(--ipc-primary-dark) !important;
}
.ipc-area--change-currency {
    justify-self: end;
    align-self: end;
    width: var(--ipc-qr-column);
    max-width: var(--ipc-qr-column);
    box-sizing: border-box;
}

/* QR bezahlt */
.iepayconnect-qr-paid img           { display: none !important; }
.iepayconnect-qr-paid               { border-color: var(--ipc-success-border); background: var(--ipc-success-light); }
.iepayconnect-qr-paid .iepayconnect-qr-hint { color: var(--ipc-success); font-weight: 700; }


/* ── Referenz-Zeile ─────────────────────────────────────────────────── */
.iepayconnect-ref-row {
    flex-direction: column;
    border-color:   var(--ipc-warning-border);
    background:     var(--ipc-warning-light);
}
.iepayconnect-ref-wrap {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
    width:       100%;
    margin-top:  4px;
}
.iepayconnect-ref-hint {
    margin:      8px 0 0;
    font-size:   0.88em;
    color:       #5d4037;
    line-height: 1.5;
}
.iepayconnect-invoice-id {
    font-size:   0.85em;
    color:       var(--ipc-text-muted);
    font-family: monospace;
}


/* ── Absende-Adresse ────────────────────────────────────────────────── */
.ipc-area--sender {
    background:    var(--ipc-primary-light);
    border:        1px dashed var(--ipc-primary-border);
    border-radius: var(--ipc-radius);
    padding:       14px 16px;
    box-sizing:    border-box;
}
.iepayconnect-sender-intro {
    margin:      0 0 10px;
    font-size:   0.92em;
    color:       var(--ipc-text);
    line-height: 1.5;
}
.ipc-sender-form {
    display:   flex;
    gap:       8px;
    flex-wrap: wrap;
}
.ipc-sender-input {
    flex:           1;
    min-width:      220px;
    padding:        7px 10px;
    border:         1px solid var(--ipc-primary-border);
    border-radius:  var(--ipc-radius-sm);
    font-family:    monospace;
    font-size:      0.95em;
    text-transform: uppercase;
}
.ipc-sender-input:focus     { outline: 2px solid var(--ipc-primary); border-color: var(--ipc-primary); }
.ipc-sender-feedback        { margin-top: 8px; font-size: 0.88em; font-weight: 600; }
.ipc-sender-feedback.ok     { color: var(--ipc-success); }
.ipc-sender-feedback.err    { color: var(--ipc-error); }


/* ── Ablaufzeit / Countdown ─────────────────────────────────────────── */
.ipc-area--expires {
    background:    var(--ipc-warning-light);
    border:        1px solid var(--ipc-warning-border);
    border-radius: var(--ipc-radius-sm);
    padding:       10px 14px;
    display:       flex;
    align-items:   center;
    gap:           8px;
    flex-wrap:     wrap;
}
.iepayconnect-expires-label { font-weight: 600; color: var(--ipc-text-muted); }
.iepayconnect-expires-value { color: var(--ipc-text); }
.iepayconnect-countdown     { font-weight: 700; color: var(--ipc-error); margin-left: auto; }


/* ── Wichtiger Hinweis (unten) ──────────────────────────────────────── */
.ipc-area--notice {
    background:    var(--ipc-surface);
    border-left:   4px solid var(--ipc-warning-border);
    border-radius: 0 var(--ipc-radius-sm) var(--ipc-radius-sm) 0;
    padding:       10px 14px;
    font-size:     0.9em;
    color:         var(--ipc-text-muted);
}

/* ── WooCommerce Checkout: Rechnungsfelder zweispaltig ─────────────── */
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout form.checkout #customer_details .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 12px;
}
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper::before,
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper::after {
    content: none;
    display: none;
}
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper .form-row {
    float: none;
    width: 100% !important;
    margin: 0;
    box-sizing: border-box;
    clear: none;
}
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper .form-row-wide {
    grid-column: auto;
}
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper .form-row input,
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper .form-row select,
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper .form-row textarea,
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper .select2-container {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}
.woocommerce-checkout form.checkout #billing_address_1_field,
.woocommerce-checkout form.checkout #billing_address_2_field,
.woocommerce-checkout form.checkout #billing_phone_field,
.woocommerce-checkout form.checkout #billing_email_field {
    grid-column: auto;
}
.woocommerce-checkout form.checkout #billing_first_name_field { order: 10; }
.woocommerce-checkout form.checkout #billing_last_name_field  { order: 20; }
.woocommerce-checkout form.checkout #billing_address_1_field  { order: 30; }
.woocommerce-checkout form.checkout #billing_address_2_field  { order: 40; }
.woocommerce-checkout form.checkout #billing_postcode_field   { order: 50; }
.woocommerce-checkout form.checkout #billing_city_field       { order: 60; }
.woocommerce-checkout form.checkout #billing_country_field    { order: 70; }
.woocommerce-checkout form.checkout #billing_state_field      { order: 80; }
.woocommerce-checkout form.checkout #billing_email_field      { order: 90; }
.woocommerce-checkout form.checkout #billing_phone_field      { order: 100; }

/* ── WooCommerce Order-Received: Kryptodaten in Bestelldetails ─────── */
.iepayconnect-order-crypto-summary {
    display: inline-flex;
    gap: 14px;
    align-items: baseline;
    justify-content: flex-end;
    white-space: nowrap;
}
.iepayconnect-order-crypto-name,
.iepayconnect-order-crypto-amount {
    font-weight: 700;
}
.iepayconnect-order-crypto-meta {
    display: block;
    color: #555555;
    font-size: 0.86em;
    font-weight: 400;
}

.iepayconnect-overview-crypto strong {
    color: var(--ieShop-primary, var(--ipc-primary));
}

/* Offene Krypto-Zahlung auf Warenkorb/Kasse */
.iepayconnect-open-payment-notice {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--ieShop-border, #d9d9d9);
    border-left: 4px solid var(--ieShop-primary, #f69222);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ieShop-text-main, #222222);
}
.iepayconnect-open-payment-notice strong,
.iepayconnect-open-payment-notice span {
    display: block;
}
.iepayconnect-open-payment-notice span {
    margin-top: 2px;
    font-size: 0.92em;
    color: var(--ieShop-text-muted, #555555);
}
.iepayconnect-open-payment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.iepayconnect-open-payment-actions .button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0 !important;
    max-width: 100%;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    font-size: 0.95em !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center;
    white-space: normal;
}
.iepayconnect-open-payment-primary {
    background: var(--ieShop-primary, #f69222) !important;
    border-color: var(--ieShop-primary, #f69222) !important;
    color: #ffffff !important;
}
.iepayconnect-open-payment-secondary {
    background: #ffffff !important;
    border: 1px solid var(--ieShop-primary, #f69222) !important;
    color: var(--ieShop-text-main, #222222) !important;
}
.iepayconnect-open-payment-notice--changed-cart .iepayconnect-open-payment-secondary {
    border-color: var(--ieShop-border, #d9d9d9) !important;
}

body.iepayconnect-order-received .woocommerce-notice--success {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.iepayconnect-received-text {
    display: inline-block;
}
/* ── Downloads auf der iePayConnect-Zahlungsseite ───────────────────── */
.iepayconnect-downloads {
    margin: 18px 0 18px;
    padding: 0;
}
.iepayconnect-downloads-title {
    margin: 0 0 8px;
    font-size: 1.25em;
    line-height: 1.25;
    color: var(--ieShop-text-main, #222222);
}
.iepayconnect-downloads-table {
    width: 100%;
    border: 1px solid var(--ieShop-border, #d9d9d9);
    border-collapse: collapse;
    background: var(--ieShop-surface, #ffffff);
    font-size: 0.92em;
}
.iepayconnect-downloads-table th,
.iepayconnect-downloads-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ieShop-border, #e5e5e5);
    vertical-align: middle;
    line-height: 1.35;
}
.iepayconnect-downloads-table th {
    background: var(--ieShop-background, #f7f7f7);
    color: var(--ieShop-text-main, #222222);
    font-weight: 700;
    text-align: left;
}
.iepayconnect-downloads-table tr:last-child td {
    border-bottom: 0;
}
.iepayconnect-download-product {
    width: 58%;
}
.iepayconnect-download-expires {
    width: 24%;
    white-space: nowrap;
}
.iepayconnect-download-file {
    width: 18%;
    text-align: right;
    white-space: nowrap;
}
.iepayconnect-downloads-table .iepayconnect-download-file {
    text-align: right;
}
.iepayconnect-download-btn {
    display: inline-block;
    padding: 7px 14px;
    border-radius: var(--ieShop-radius-sm, 4px);
    background: var(--ieShop-accent, #0073aa);
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
}
.iepayconnect-download-btn:hover {
    background: var(--ieShop-accent-hover, #005a87);
    color: #ffffff !important;
}

/* ── WooCommerce Order-Pay: kompakte Produktübersicht beim Währungswechsel ── */
body.woocommerce-order-pay #order_review_heading {
    margin: 18px 0 10px;
    font-size: 1.25em;
    line-height: 1.25;
    color: var(--ieShop-text-main, #222222);
}

body.woocommerce-order-pay form#order_review {
    background: var(--ieShop-surface, #ffffff);
    border: 1px solid var(--ieShop-border, #e0e0e0);
    border-radius: var(--ieShop-radius-md, 6px);
    padding: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

body.woocommerce-order-pay form#order_review table.shop_table {
    margin: 0 0 14px;
    border: 1px solid var(--ieShop-accent-border, #90caf9);
    border-radius: var(--ieShop-radius-md, 6px);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--ieShop-accent-tint, #e8f4fd);
}

body.woocommerce-order-pay form#order_review table.shop_table th,
body.woocommerce-order-pay form#order_review table.shop_table td {
    padding: 8px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    line-height: 1.35;
}

body.woocommerce-order-pay form#order_review table.shop_table tr:first-child th,
body.woocommerce-order-pay form#order_review table.shop_table tr:first-child td {
    border-top: 0;
}

body.woocommerce-order-pay form#order_review table.shop_table thead th {
    background: var(--ieShop-accent, #0073aa);
    color: #ffffff;
    font-size: 0.86em;
    font-weight: 700;
    text-transform: uppercase;
}

body.woocommerce-order-pay form#order_review table.shop_table .product-name {
    font-weight: 600;
}

body.woocommerce-order-pay form#order_review table.shop_table .product-total,
body.woocommerce-order-pay form#order_review table.shop_table tfoot td {
    text-align: right;
    white-space: nowrap;
}

body.woocommerce-order-pay form#order_review table.shop_table tfoot th,
body.woocommerce-order-pay form#order_review table.shop_table tfoot td {
    background: rgba(255, 255, 255, 0.62);
}

body.woocommerce-order-pay form#order_review #payment {
    background: var(--ieShop-background, #f8f9fa);
    border: 1px solid var(--ieShop-border, #e0e0e0);
    border-radius: var(--ieShop-radius-md, 6px);
    padding: 12px;
}

body.woocommerce-order-pay form#order_review #payment ul.payment_methods,
body.woocommerce-order-pay form#order_review #payment div.form-row {
    padding: 0;
    margin: 0;
}

body.woocommerce-order-pay form#order_review #payment div.payment_box {
    margin: 8px 0 12px;
    padding: 12px;
    border-radius: var(--ieShop-radius-sm, 4px);
}

body.woocommerce-order-pay form#order_review #payment .place-order {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.woocommerce-order-pay form#order_review #payment #place_order {
    align-self: flex-start;
    min-width: 220px;
}

body.iepayconnect-order-received .woocommerce-order-details a.button.pay,
body.iepayconnect-order-received .woocommerce-order-details a.woocommerce-button.pay,
body.iepayconnect-order-received a.button.pay[href*="order-pay"] {
    display: none !important;
}


/* ── Responsive: Mobile (unter 600px) ──────────────────────────────── */
@media (max-width: 600px) {
    .iepayconnect-payment-instructions {
        grid-template-columns: 1fr;
        grid-template-areas:
            "testmode"
            "status"
            "title"
            "change"
            "amount"
            "fiat"
            "rate"
            "order"
            "qr"
            "address"
            "ref"
            "sender"
            "expires"
            "notice";
    }
    .ipc-area--qr {
        width:        100%;
        max-width:    none;
        justify-self: stretch;
        position:     static; /* kein sticky auf Mobile */
    }
    .ipc-area--change-currency {
        width:        100%;
        max-width:    none;
        justify-self: stretch;
    }
    .iepayconnect-info-row { flex-direction: column; }
    .iepayconnect-label    { min-width: unset; }
    body.woocommerce-order-pay form#order_review {
        padding: 12px;
    }
    body.woocommerce-order-pay form#order_review table.shop_table {
        font-size: 0.92em;
    }
    body.woocommerce-order-pay form#order_review table.shop_table th,
    body.woocommerce-order-pay form#order_review table.shop_table td {
        padding: 7px 8px;
    }
    body.woocommerce-order-pay form#order_review #payment #place_order {
        width: 100%;
        min-width: 0;
    }
    body.iepayconnect-order-received .woocommerce-notice--success {
        align-items: flex-start;
        flex-direction: column;
    }
    .iepayconnect-open-payment-notice {
        align-items: flex-start;
        flex-direction: column;
    }
    .iepayconnect-open-payment-actions {
        justify-content: flex-start;
        width: 100%;
    }
    .iepayconnect-downloads-table {
        font-size: 0.88em;
    }
    .iepayconnect-downloads-table th,
    .iepayconnect-downloads-table td {
        padding: 7px 8px;
    }
    .iepayconnect-download-product {
        width: 52%;
    }
    .iepayconnect-download-expires {
        width: 25%;
    }
    .iepayconnect-download-file {
        width: 23%;
    }
    .iepayconnect-download-btn {
        padding: 6px 10px;
    }
}

@media (max-width: 600px) {
    .woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
}