/* ═══════════════════════════════════════════
   Reproduction Print Calculator — Frontend
   ═══════════════════════════════════════════ */

#repro-calculator { margin: 1.5rem 0; font-family: inherit; }

/* ── Section ── */
.repro-section {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.repro-section-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #999; margin: 0 0 .9rem;
}

/* ── Media toggle pills ── */
.repro-toggle-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .75rem; }
.repro-toggle {
    padding: 7px 18px; font-size: 13px; border: 1.5px solid #ddd;
    border-radius: 100px; background: #fff; color: #555;
    cursor: pointer; transition: all .15s; font-weight: 500;
}
.repro-toggle:hover  { border-color: #aaa; color: #111; }
.repro-toggle.active { background: #111; border-color: #111; color: #fff; }

/* ── Grid + side preview wrapper ── */
.repro-grid-with-preview {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: .5rem;
}

/* Side image preview — LEFT of grid, square, zero-width when hidden */
.repro-side-preview { display: none !important; }
.repro-side-img { display: none !important; }

/* ── Option grid ── */
.repro-option-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

/* ── Option card ── */
.repro-option-card {
    position: relative;
    border: 1.5px solid #e0e0e0;
    border-radius: 9px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    background: #fff;
    user-select: none;
}
.repro-option-card:hover        { border-color: #bbb; box-shadow: 0 2px 8px rgba(0,0,0,.09); }
.repro-option-card:focus-visible { box-shadow: 0 0 0 3px rgba(17,17,17,.15); }
.repro-option-card.active {
    border-color: #111; border-width: 2px;
    box-shadow: 0 2px 12px rgba(0,0,0,.13);
}
.repro-option-card.active::after {
    content: '✓';
    position: absolute; top: 6px; right: 8px;
    font-size: 11px; font-weight: 700; color: #111;
    background: #fff; border-radius: 50%;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Card thumbnail */
.repro-card-thumb {
    height: 58px; border-radius: 7px 7px 0 0;
    background-size: cover; background-position: center;
    background-color: #f0f0f0;
}
.repro-card-body  { padding: .55rem .75rem; }
.repro-card-name  { font-size: 13px; font-weight: 500; color: #1a1a1a; margin-bottom: 2px; line-height: 1.3; }
.repro-card-price { font-size: 12px; color: #888; }

/* ── Description box (below cards, full section width) ── */
.repro-desc-box {
    background: #fff8e1;
    border: 1px solid #f5c842;
    border-radius: 7px;
    padding: .6rem .9rem;
    font-size: 13px;
    color: #5a4800;
    line-height: 1.6;
    margin-top: .9rem;    /* same feel as section-title margin */
}
.repro-desc-box strong { font-weight: 600; color: #3a3000; }
.repro-desc-box em     { font-style: italic; }

/* ── Info box (area) ── */
.repro-info-box {
    background: #f8f8f8; border-radius: 6px;
    padding: .5rem .75rem; font-size: 13px; color: #555; margin-top: .5rem;
}

/* ── Size inputs ── */
.repro-orig-size  { font-size: 13px; color: #666; margin: 0 0 .75rem; }
.repro-size-hint  { font-size: 12px; color: #888; margin-top: 3px; }
.repro-warn       { color: #b94a1e; }
.repro-size-row   { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.repro-times      { font-size: 22px; color: #ccc; flex-shrink: 0; margin-top: 22px; line-height: 42px; }
.repro-field      { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 100px; }
.repro-field label {
    font-size: 12px; font-weight: 600; color: #666;
    text-transform: uppercase; letter-spacing: .04em;
}
.repro-field input[type="number"] {
    border: 1.5px solid #ddd; border-radius: 7px;
    padding: 8px 12px; font-size: 15px; width: 100%;
    box-sizing: border-box; transition: border-color .15s;
    -moz-appearance: textfield;
}
.repro-field input[type="number"]::-webkit-outer-spin-button,
.repro-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.repro-field input[type="number"]:focus { border-color: #111; outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.repro-err { font-size: 12px; color: #c0392b; min-height: 15px; }

/* ── Options section ── */
.repro-option-block { margin-bottom: .85rem; }
.repro-option-block + .repro-option-block { padding-top: .75rem; border-top: 1px solid #f0f0f0; }
.repro-checkbox-label {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 600; color: #111;
    cursor: pointer; user-select: none; margin-bottom: 0;
}
.repro-checkbox-label input[type="checkbox"] {
    width: 17px; height: 17px; cursor: pointer; accent-color: #111;
}
.repro-suboptions { padding: .75rem 0 0 1.6rem; }

/* PP rate badges */
.repro-pp-rates { display: flex; flex-wrap: wrap; gap: 5px; margin-top: .6rem; }
.repro-pp-rate  { font-size: 11px; background: #f3f3f3; border-radius: 4px; padding: 3px 8px; color: #666; }

/* Rule notice (all-or-none) */
.repro-rule-notice {
    background: #fff8e1; border: 1px solid #f5c842;
    border-radius: 7px; padding: .6rem .9rem;
    font-size: 13px; color: #7a5c00; margin-bottom: .75rem;
}

/* ── Results ── */
.repro-results { border-color: #d0ead8; background: #f8fdf9; }
.repro-result-line {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 6px 0; font-size: 13px; color: #444;
    border-bottom: 1px solid #eaf4ec;
}
.repro-result-line:last-child       { border-bottom: none; }
.repro-result-line span:last-child  { font-weight: 500; white-space: nowrap; text-align: right; }
.repro-total-block  { border-top: 1px solid #c8e6d0; margin-top: .6rem; padding-top: .6rem; }
.repro-total-row    { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; color: #333; }
.repro-vat-row      { font-size: 13px; color: #888; }
.repro-grand-total  { font-size: 18px; font-weight: 700; padding-top: 6px; }
.repro-grand-total strong { color: #1a6e3f; }
.repro-note         { font-size: 11px; color: #aaa; margin: .5rem 0 0; }
.repro-err-global   { background:#fdf2f0; border:1px solid #f5c5bc; border-radius:7px; padding:.5rem .75rem; font-size:13px; color:#c0392b; margin-top:.5rem; }

/* ── WooCommerce cart fee alignment ── */
tr.fee th { font-weight: 500; }
tr.fee td { text-align: right !important; font-weight: 500 !important; font-size: 15px !important; }
tr.fee td .woocommerce-Price-amount,
tr.fee td bdi { font-weight: 500 !important; font-size: 15px !important; text-align: right !important; display: inline !important; }

/* ── Responsive ── */
@media (max-width: 520px) {
    .repro-option-grid { grid-template-columns: 1fr 1fr; }
    .repro-size-row    { flex-direction: column; align-items: stretch; }
    .repro-times       { display: none; }
    .repro-side-preview { display: none !important; }
}

/* ── Recommended sizes ── */
.repro-rec-sizes { margin-bottom: .75rem; }
.repro-rec-label {
    font-size: 12px; font-weight: 600; color: #666;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: .4rem;
}
.repro-rec-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.repro-rec-btn {
    padding: 5px 13px; font-size: 13px; border: 1.5px solid #ddd;
    border-radius: 6px; background: #fff; color: #333;
    cursor: pointer; transition: all .15s; font-weight: 500;
}
.repro-rec-btn:hover  { border-color: #aaa; background: #f8f8f8; }
.repro-rec-btn.active { border-color: #e6cb71; background: #e6cb71; color: #1a1a1a; font-weight:600; }

/* ── Other size collapsible ── */
.repro-custom-size-wrap { margin-top: .75rem; }
.repro-custom-size-toggle {
    font-size: 13px; font-weight: 600; color: #555;
    cursor: pointer; user-select: none; list-style: none;
    padding: .4rem 0; border-top: 1px solid #eee;
    display: flex; align-items: center; gap: .4rem;
}
.repro-custom-size-toggle::-webkit-details-marker { display: none; }
.repro-custom-size-toggle::before { content: '▶'; font-size: 10px; transition: transform .15s; }
details[open] .repro-custom-size-toggle::before { transform: rotate(90deg); }
.repro-custom-size-inner { padding-top: .6rem; }

/* ── Size locked ── */
.repro-size-locked {
    display: inline-flex; align-items: center; gap: 8px;
    background: #f3f3f3; border-radius: 7px;
    padding: .5rem 1rem; font-size: 14px; font-weight: 500; color: #333;
}

/* ── PP color swatch on card ── */
.repro-card-color-swatch {
    height: 32px; border-radius: 7px 7px 0 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

/* ── PP preview notice ── */
.repro-pp-notice {
    font-size: 12px;
    color: #7a5c00;
    background: #fff8e1;
    border: 1px solid #f5c842;
    border-radius: 6px;
    padding: .5rem .75rem;
    margin-top: .5rem;
    line-height: 1.5;
}

/* Recommended size button multiplier label */
.repro-rec-mult {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #888;
    letter-spacing: .04em;
    line-height: 1.2;
    margin-bottom: 1px;
}
.repro-rec-btn.active .repro-rec-mult { color: #6b5a00; }

/* PP notice — capped state (PP too wide for preview) */
.repro-pp-notice--capped {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}
.repro-pp-notice--capped strong {
    font-weight: 600;
}

/* Disabled recommended size button */
.repro-rec-btn--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
    pointer-events: none;
}

/* ── Foreign shipping notice ── */
.repro-foreign-notice {
    background: #f0f7ff;
    border: 1px solid #b8d4f0;
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: 14px;
    color: #1a4a7a;
    line-height: 1.55;
}
.repro-foreign-notice p {
    margin: 0;
}