/* ── Wrapper ── */
.wppd-wrap { max-width: 100%; width: 100%; margin: 24px 0; font-family: Arial, sans-serif; box-sizing: border-box; }
.wppd-product-image { margin: 0 0 16px; background: transparent; }
.wppd-wrap .wppd-product-image img { display: block !important; width: 100% !important; height: 360px !important; max-height: 360px !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; border-radius: 0; box-shadow: none; }
.wppd-title { color: #1a5276; margin-bottom: 4px; }
.wppd-desc  { color: #555; margin-bottom: 14px; }

/* Bestellformular ohne Popup: bewusst schmaler halten, damit Eingabefelder nicht über die ganze
   (ggf. sehr breite) Seite gestreckt werden. Die Vorschau darüber (Bild/Titel/Text) bleibt breit. */
.wppd-order-panel:not(.wppd-modal-panel) { max-width: 620px; }

/* ── Vorschau (Bild + Titel/Text) ── */
.wppd-preview { margin-bottom: 4px; }
.wppd-preview-body { min-width: 0; }

/* Layout: Bild links/rechts neben dem Text statt darüber */
.wppd-wrap.wppd-layout-left  .wppd-preview,
.wppd-wrap.wppd-layout-right .wppd-preview {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.wppd-wrap.wppd-layout-right .wppd-preview { flex-direction: row-reverse; }
.wppd-wrap.wppd-layout-left  .wppd-product-image,
.wppd-wrap.wppd-layout-right .wppd-product-image {
    flex: 0 0 42%;
    max-width: 42%;
    margin-bottom: 0;
}
.wppd-wrap.wppd-layout-left  .wppd-product-image img,
.wppd-wrap.wppd-layout-right .wppd-product-image img {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1;
}
@media (max-width: 480px) {
    .wppd-wrap.wppd-layout-left  .wppd-preview,
    .wppd-wrap.wppd-layout-right .wppd-preview { flex-direction: column; }
    .wppd-wrap.wppd-layout-left  .wppd-product-image,
    .wppd-wrap.wppd-layout-right .wppd-product-image { flex-basis: auto; max-width: 100%; }
}

/* ── Popup-Bestellformular ── */
.wppd-order-panel.wppd-modal-panel { display: none; }
.wppd-order-panel.wppd-modal-panel.wppd-modal-open {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100001;
    width: min(920px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    padding: 22px 26px 18px;
    border-radius: 10px;
    box-shadow: 0 12px 45px rgba(0,0,0,.35);
}

/* Zwei UNABHAENGIGE Spalten im Popup: links Preis/Menge/Gutschein/Testmodus-Hinweis/Lizenzfeld,
   rechts Kundendaten/AGB/Zahlung/Button. Bewusst echtes Flexbox statt CSS-Grid: bei Grid teilen sich
   beide Spalten gemeinsame Zeilenhoehen, wodurch eine kurze linke Spalte auf die Hoehe der langen
   rechten Spalte gestreckt wuerde (grosse Luecken). Mit Flexbox waechst jede Spalte unabhaengig nur
   so hoch wie ihr eigener Inhalt. Das Lizenz-Domain-Feld liegt dafuer bewusst ausserhalb des <form>
   (in der linken Spalte), bleibt aber ueber das HTML-Attribut form="..." mit dem Formular verknuepft
   und wird beim Absenden ganz normal mit uebermittelt.
   Bei kostenlosen Produkten ohne Lizenzfeld bleibt es einspaltig, siehe .wppd-order-flow-single. */
.wppd-modal-panel .wppd-order-flow {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}
.wppd-modal-panel .wppd-order-flow.wppd-order-flow-single {
    display: block;
    max-width: 460px;
    margin: 0 auto;
}
.wppd-modal-panel .wppd-order-col { flex: 1 1 0; min-width: 0; }
@media (max-width: 680px) {
    .wppd-modal-panel .wppd-order-flow { display: block; }
}

/* Kompaktere Abstände nur innerhalb des Popups – auf der normalen (nicht-Popup) Seite
   bleibt alles wie gewohnt luftig. Ziel: möglichst der komplette Inhalt ohne Scrollen sichtbar. */
.wppd-modal-panel .wppd-price-box       { padding: 8px 12px; margin-bottom: 8px; }
.wppd-modal-panel .wppd-price-box td    { padding: 1px 14px 1px 0; font-size: .88em; }
.wppd-modal-panel .wppd-total td        { padding-top: 4px; }
.wppd-modal-panel .wppd-fields          { padding: 10px 14px; margin-bottom: 8px; }
.wppd-modal-panel .wppd-fields h4       { margin: 0 0 6px; font-size: .92em; }
.wppd-modal-panel .wppd-row             { margin-bottom: 6px; }
.wppd-modal-panel .wppd-row-half        { gap: 6px; }
.wppd-modal-panel .wppd-row label       { margin-bottom: 2px; font-size: .82em; }
.wppd-modal-panel .wppd-row input,
.wppd-modal-panel .wppd-row select      { padding: 5px 9px; font-size: .92em; }
.wppd-modal-panel .wppd-required        { margin-top: 2px; font-size: .78em; }
.wppd-modal-panel .wppd-license-domain-row { padding: 7px 10px; margin-top: 0; margin-bottom: 0; }
.wppd-modal-panel .wppd-license-domain-row .wppd-field-hint { margin: 3px 0 0; font-size: .76em; line-height: 1.3; }
.wppd-modal-panel .wppd-agb-check       { margin: 6px 0; padding: 7px 9px; }
.wppd-modal-panel .wppd-agb-label       { font-size: .8em; line-height: 1.35; gap: 6px; }
.wppd-modal-panel .wppd-testmode-notice { padding: 5px 9px; margin-bottom: 8px; font-size: .82em; }
.wppd-modal-panel .wppd-payment-icons   { margin-bottom: 6px; }
.wppd-modal-panel .wppd-buy-btn         { padding: 10px 20px; margin-top: 2px; font-size: .98em; }
.wppd-modal-panel .wppd-coupon-box h4   { margin-bottom: 4px; }
.wppd-modal-panel .wppd-messages        { margin-bottom: 8px; padding: 7px 10px; }
.wppd-modal-panel .wppd-order-col > *:last-child { margin-bottom: 0; }
.wppd-order-title { margin: 0 0 10px; color: #1a5276; font-size: 1.15em; line-height: 1.3; }

/* Kleinere Bildschirme: Popup nutzt mehr Breite, weniger Innenabstand */
@media (max-width: 600px) {
    .wppd-order-panel.wppd-modal-panel.wppd-modal-open { padding: 16px 16px 14px; width: min(920px, 96vw); max-height: 92vh; }
}

.wppd-modal-close {
    position: sticky;
    top: 0;
    float: right;
    margin: -10px -8px 4px 0;
    width: 32px;
    height: 32px;
    border: none;
    background: #f1f1f1;
    color: #555;
    font-size: 1.4em;
    line-height: 30px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
}
.wppd-modal-close:hover { background: #e2e2e2; color: #222; }
#wppd-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20,20,25,.55);
    z-index: 100000;
}
#wppd-modal-backdrop.wppd-modal-active { display: block; }
body.wppd-modal-lock { overflow: hidden; }

/* ── Produktübersicht (Grid) ── */
.wppd-grid {
    display: grid;
    grid-template-columns: repeat(var(--wppd-grid-cols, 3), 1fr);
    gap: 22px;
    margin: 24px 0;
}
@media (max-width: 760px)  { .wppd-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px)  { .wppd-grid { grid-template-columns: 1fr !important; } }
.wppd-grid-item { min-width: 0; }
.wppd-grid-link {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .15s, transform .15s;
    font-family: Arial, sans-serif;
}
.wppd-grid-link:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-2px); }
.wppd-grid-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; background: #f7f7f7; overflow: hidden; }
.wppd-grid-thumb img { width: 100%; height: 100%; object-fit: contain; }
.wppd-grid-title { display: block; padding: 12px 14px 2px; font-weight: 700; color: #1a5276; }
.wppd-grid-price { display: block; padding: 0 14px 14px; color: #555; font-size: .92em; }
/* Container bleibt im Fluss (kein display:none!), sonst kann das Bestellformular
   nicht mehr als fixiertes Popup erscheinen. Er zeigt selbst aber nichts an,
   da die Vorschau ausgeblendet und das Bestellformular erst per Klick sichtbar wird. */
.wppd-grid-embed { height: 0; overflow: visible; }
.wppd-grid-embed .wppd-preview { display: none; }

/* ── Preisbox ── */
.wppd-price-box { background: #f4f8fc; border: 1px solid #d0e0f0; border-radius: 8px; padding: 14px 18px; width: 100%; box-sizing: border-box; margin-bottom: 18px; }
.wppd-price-box table { border-collapse: collapse; width: 100%; }
.wppd-price-box td { padding: 3px 20px 3px 0; font-size: .95em; }
.wppd-price-box td:last-child { text-align: right; min-width: 110px; }
.wppd-total td { font-weight: 700; font-size: 1.1em; color: #1a5276; border-top: 2px solid #1a5276; padding-top: 8px; }

/* ── AGB-Hinweis ── */
.wppd-agb-note { font-size: .88em; color: #555; margin-bottom: 16px; padding: 8px 12px; background: #f9f9f9; border-left: 3px solid #1a5276; border-radius: 2px; }

/* ── Formular-Felder ── */
.wppd-fields { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 18px; margin-bottom: 16px; }
.wppd-fields h4 { margin: 0 0 14px; color: #1a5276; }
.wppd-row { margin-bottom: 12px; }
.wppd-row label { display: block; font-weight: 600; font-size: .9em; margin-bottom: 4px; }
.wppd-row input,
.wppd-row select { width: 100%; padding: 8px 11px; border: 1px solid #ccc; border-radius: 5px; font-size: .95em; box-sizing: border-box; transition: border-color .15s; }
.wppd-row input:focus,
.wppd-row select:focus { outline: none; border-color: #1a5276; box-shadow: 0 0 0 2px rgba(26,82,118,.15); }
.wppd-row input.wppd-invalid { border-color: #c0392b; background: #fff5f5; }
.wppd-row-half { display: flex; gap: 12px; }
.wppd-row-half > div { flex: 1; }
.wppd-required { color: #888; font-size: .85em; margin: 6px 0 0; }

/* ── Nachrichten ── */
.wppd-messages { padding: 11px 15px; border-radius: 6px; margin-bottom: 14px; font-size: .95em; display: none; }
.wppd-msg-error { background: #fdf0f0; color: #922; border: 1px solid #f5c6cb; }
.wppd-msg-info  { background: #eef4ff; color: #335; border: 1px solid #bee3f8; }
.wppd-msg-ok    { background: #f0faf0; color: #363; border: 1px solid #c3e6cb; }

/* ── Testmodus-Banner ── */
.wppd-testmode-notice { background: #fff8e1; border: 1px solid #ffc107; padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: .9em; }

/* ── Zahlungsmethoden-Icons (nur kostenpflichtig) ── */
.wppd-payment-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.wppd-payment-icons::before {
    content: 'Zahlung per:';
    font-size: .8em;
    color: #888;
    margin-right: 4px;
    white-space: nowrap;
}
.wppd-pay-icon {
    display: inline-flex;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    transition: transform .15s, box-shadow .15s;
    cursor: default;
}
.wppd-pay-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 7px rgba(0,0,0,.18);
}

/* ── JETZT KAUFEN Button (und optisch identischer Popup-Öffnen-Button) ── */
.wppd-buy-btn,
.wppd-trigger-btn {
    display: block;
    width: 100%;
    padding: 15px 28px;
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    margin-top: 6px;
    box-shadow: 0 3px 8px rgba(211,84,0,.35);
    transition: transform .1s, box-shadow .1s, background .2s;
}
.wppd-buy-btn:hover:not(:disabled),
.wppd-trigger-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #d35400 0%, #b94600 100%);
    box-shadow: 0 5px 14px rgba(211,84,0,.45);
    transform: translateY(-1px);
}
.wppd-buy-btn:active:not(:disabled),
.wppd-trigger-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(211,84,0,.3);
}
.wppd-buy-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* ── PayPal-Bereich ── */
.wppd-paypal-area { margin-top: 16px; }

/* ── Spinner ── */
.wppd-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wppd-spin .6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
.wppd-msg-info .wppd-spinner {
    border-color: rgba(51,51,85,.3);
    border-top-color: #335;
}
@keyframes wppd-spin { to { transform: rotate(360deg); } }

/* ── Fehlermeldung (Plugin-Config-Fehler) ── */
.wppd-error { color: #c00; padding: 10px; background: #fde; border-radius: 5px; }

/* ── AGB-Checkbox ── */
.wppd-agb-check {
    margin: 14px 0 12px;
    padding: 12px 14px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
}
.wppd-agb-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: .9em;
    color: #444;
    line-height: 1.5;
}
.wppd-agb-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #1a5276;
}
.wppd-agb-label a { color: #1a5276; }
.wppd-agb-check.wppd-agb-error {
    border-color: #c0392b;
    background: #fff5f5;
}
/* Buy-Button deaktiviert wenn AGB-Pflicht aktiv */
.wppd-buy-btn[data-requires-agb="1"]:not(.wppd-agb-ok) {
    opacity: .55;
    cursor: not-allowed;
}

/* ── UVP / rabattierter Preis ── */
.wppd-uvp-line { margin: -8px 0 14px; font-size: .95em; color: #777; }
.wppd-uvp-old { text-decoration: line-through; color: #999; margin-right: 6px; }
.wppd-uvp-label { font-style: italic; color: #999; font-size: .85em; }

/* ── Live-Rabattzeile in der Preisbox ── */
.wppd-discount-row td { color: #c0392b; font-weight: 600; }

/* ── Menge / Staffelrabatt ── */
.wppd-qty-box { margin-top: -4px; }
.wppd-qty-row input.wppd-qty-input { width: 90px; }
.wppd-tier-hints { list-style: none; margin: 10px 0 0; padding: 0; }
.wppd-tier-hints li { font-size: .85em; color: #1a7a3c; background: #eef9f0; border: 1px solid #c3e6cb; border-radius: 4px; padding: 5px 10px; margin-bottom: 4px; }

/* ── Gutscheincode ── */
.wppd-coupon-box h4 { margin-bottom: 10px; }
.wppd-coupon-row { display: flex; gap: 8px; margin-bottom: 0; }
.wppd-coupon-row input { flex: 1; }
.wppd-coupon-row button { white-space: nowrap; }
.wppd-coupon-msg { margin: 8px 0 0; font-size: .88em; min-height: 1em; }
.wppd-coupon-msg.wppd-coupon-ok    { color: #1a7a3c; }
.wppd-coupon-msg.wppd-coupon-error { color: #c0392b; }

/* ── Bundle ── */
.wppd-bundle-items { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 4px 18px; margin-bottom: 14px; }
.wppd-bundle-item { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #f0f0f0; font-size: .95em; }
.wppd-bundle-item:last-child { border-bottom: none; }
.wppd-bundle-item-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; border: 1px solid #eee; flex-shrink: 0; }
.wppd-bundle-item-name { flex: 1; }
.wppd-bundle-item-price { color: #777; }
.wppd-bundle-savings { color: #1a7a3c; font-weight: 600; }

/* Kostenloser Download Button */
.wppd-free-btn {
    background: #27ae60 !important;
    border-color: #1e8449 !important;
    color: #fff !important;
}
.wppd-free-btn:hover {
    background: #229954 !important;
}