/* ═══════════════════════════════════════════════════
 * Woo Bakery Abo – Styles v1.3
 * ═══════════════════════════════════════════════════ */

:root {
    --wba-primary: #1b3a5c;
    --wba-primary-light: #2d5a8a;
    --wba-accent: #c0392b;
    --wba-bg: #ffffff;
    --wba-bg-soft: #f8f9fa;
    --wba-text: #2c3e50;
    --wba-text-light: #6c7a89;
    --wba-border: #d5dce4;
    --wba-border-light: #e8ecf0;
    --wba-radius: 4px;
}

.wbp-abo {
    max-width: 860px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, sans-serif;
    color: var(--wba-text);
    font-size: 15px;
    line-height: 1.5;
}

/* ── Sections ── */
.wbp-abo-section { border-top: 2px solid var(--wba-primary); padding: 24px 0 8px 0; margin-bottom: 12px; }
.wbp-abo-section h2 { font-size: 20px; font-weight: 700; color: var(--wba-primary); margin: 0 0 16px 0; }

/* ── Rows ── */
.wbp-abo-row { display: flex; gap: 16px; flex-wrap: wrap; }
.wbp-abo-row-2 > .wbp-abo-field { flex: 1; min-width: 180px; }
.wbp-abo-row-3 > .wbp-abo-field { flex: 1; min-width: 160px; }

/* ── Fields ── */
.wbp-abo-field { margin-bottom: 16px; }
.wbp-abo-field > label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; color: var(--wba-primary); }
.req { color: var(--wba-accent); }

.wbp-abo-field input[type="text"],
.wbp-abo-field input[type="email"],
.wbp-abo-field input[type="tel"],
.wbp-abo-field input[type="number"],
.wbp-abo-field select,
.wbp-abo-field textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--wba-border);
    border-radius: var(--wba-radius); font-size: 15px; background: var(--wba-bg);
    color: var(--wba-text); box-sizing: border-box; transition: border-color .2s;
}
.wbp-abo-field input:focus, .wbp-abo-field select:focus, .wbp-abo-field textarea:focus { outline: none; border-color: var(--wba-primary); }
.wbp-abo-field input.wbp-error, .wbp-abo-field select.wbp-error { border-color: var(--wba-accent); background: #fef8f7; }

.wbp-abo-hint { display: block; font-size: 12px; color: var(--wba-primary); margin-top: 4px; }
.wbp-abo-hint-block { color: var(--wba-text-light); font-size: 14px; margin: 0 0 16px 0; }

/* ── Info box ── */
.wbp-abo-info-box { background: var(--wba-bg-soft); border-left: 3px solid var(--wba-primary); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; line-height: 1.6; color: var(--wba-primary); }

/* ── Radio row ── */
.wbp-abo-radio-row { display: flex; gap: 20px; flex-wrap: wrap; }
.wbp-abo-radio { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }
.wbp-abo-radio input[type="radio"] { margin: 0; accent-color: var(--wba-primary); }

/* ════════════════════════════════════════════
 * BROTE – Zeilen-Layout (1 Zeile = 1 Brot+Form)
 * ════════════════════════════════════════════ */

.wbp-abo-lines-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wbp-abo-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--wba-border-light);
    border-radius: var(--wba-radius);
    padding: 12px 16px;
    background: var(--wba-bg);
    transition: border-color .2s, background .2s;
}

.wbp-abo-line.active {
    border-color: var(--wba-primary);
    background: #f4f7fb;
}

/* Left: checkbox + name + base price */
.wbp-abo-line-left {
    flex: 1;
    min-width: 0;
}

.wbp-abo-line-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.wbp-abo-line-check input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--wba-primary);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.wbp-abo-line-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--wba-primary);
    line-height: 1.3;
}

.wbp-abo-line-base-price {
    display: block;
    margin-left: 26px;
    font-size: 13px;
    color: var(--wba-text-light);
    margin-top: 2px;
}

/* Right: qty + addon + line total */
.wbp-abo-line-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 200px;
}

.wbp-abo-line-fields {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.wbp-abo-lf label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--wba-text-light);
    margin-bottom: 2px;
}

.wbp-abo-lf input[type="number"] {
    width: 64px;
    padding: 6px 8px;
    border: 1px solid var(--wba-border);
    border-radius: var(--wba-radius);
    font-size: 14px;
    box-sizing: border-box;
}

.wbp-abo-lf-addon select {
    min-width: 140px;
    max-width: 200px;
    padding: 6px 8px;
    border: 1px solid var(--wba-border);
    border-radius: var(--wba-radius);
    font-size: 13px;
    box-sizing: border-box;
}

.wbp-abo-line-total {
    font-size: 15px;
    font-weight: 700;
    color: var(--wba-primary);
    white-space: nowrap;
}

/* ── Total bar ── */
.wbp-abo-total-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 20px; padding: 14px 18px; background: var(--wba-bg-soft);
    border: 2px solid var(--wba-primary); border-radius: var(--wba-radius); font-size: 16px;
}
.wbp-abo-total-bar strong { font-size: 20px; color: var(--wba-primary); }

/* ── Checkboxes ── */
.wbp-abo-cblabel { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 14px; line-height: 1.5; }
.wbp-abo-cblabel input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--wba-primary); }

/* ── Submit ── */
.wbp-abo-submit-row { text-align: center; padding: 24px 0 16px 0; }
.wbp-abo-btn-submit {
    display: inline-block; padding: 14px 40px; background: var(--wba-primary);
    color: #fff; font-size: 16px; font-weight: 600; border: none;
    border-radius: var(--wba-radius); cursor: pointer; transition: background .2s;
}
.wbp-abo-btn-submit:hover { background: var(--wba-primary-light); }
.wbp-abo-btn-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ── Messages ── */
.wbp-abo-message { padding: 10px 14px; border-radius: var(--wba-radius); margin-bottom: 14px; font-size: 14px; text-align: left; }
.wbp-abo-message.error { background: #fdf0ef; color: var(--wba-accent); border: 1px solid #f5c6cb; }
.wbp-abo-message.success { background: #eafaf1; color: #27ae60; border: 1px solid #a3d9a5; }

/* ── Success ── */
.wbp-abo-success { text-align: center; padding: 50px 20px; }
.wbp-abo-success-inner { max-width: 500px; margin: 0 auto; }
.wbp-abo-check { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #27ae60; color: #fff; font-size: 32px; margin-bottom: 16px; }
.wbp-abo-success h2 { color: var(--wba-primary); font-size: 22px; margin-bottom: 10px; }
.wbp-abo-success p { color: var(--wba-text-light); font-size: 15px; line-height: 1.6; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .wbp-abo-line { flex-direction: column; gap: 8px; }
    .wbp-abo-line-right { min-width: 100%; align-items: flex-start; }
    .wbp-abo-line-fields { width: 100%; }
    .wbp-abo-row { flex-direction: column; gap: 0; }
    .wbp-abo-row > .wbp-abo-field { min-width: 100% !important; flex: unset !important; }
    .wbp-abo-radio-row { flex-direction: column; gap: 8px; }
    .wbp-abo-total-bar { flex-direction: column; gap: 4px; text-align: center; }
}