/**
 * @file        assets/css/abo-form.css
 * @location    /assets/css/abo-form.css
 * @description All styles for the subscription order form.
 *              Every selector prefixed .abo_ to avoid collisions.
 *              Requires Bootstrap 5 utility classes in HTML.
 *              Keyframe names prefixed aboF_ to avoid global collisions.
 * @version     1.0.0
 * @changelog
 *   1.0.0  2026-03-10  Extracted verbatim from page-abo-form-include.php
 *                      inline <style> block (lines 70-978). Keyframe names
 *                      namespaced. Added :focus-visible rules for WCAG 2.2 AA.
 *                      Added prefers-reduced-motion and prefers-contrast blocks.
 */

/* ── ROOT VARIABLES ─────────────────────────────────────────────────── */
:root {
    --abo_primary:      #A8A7CD;
    --abo_primary-dark: #44569E;
    --abo_accent:       #4A90E2;
    --abo_accent-dark:  #2E5BBA;
    --abo_dark:         #1a1a1a;
    --abo_light:        #f8fafc;
    --abo_gray-50:      #f9fafb;
    --abo_gray-100:     #f3f4f6;
    --abo_gray-200:     #e5e7eb;
    --abo_gray-300:     #d1d5db;
    --abo_gray-400:     #9ca3af;
    --abo_gray-500:     #6b7280;
    --abo_gray-600:     #4b5563;
    --abo_gray-700:     #374151;
    --abo_gray-800:     #1f2937;
    --abo_gray-900:     #111827;
    --abo_card-bg:      #dc3545;
    --abo_success:      #28a745;
    --abo_warning:      #ffc107;
    --abo_info:         #17a2b8;
    --abo_error:        #dc3545;
    --abo_error-border: #f87171;
}

/* ── CONTAINER ──────────────────────────────────────────────────────── */
.abo_container {
    background: linear-gradient(135deg, var(--abo_gray-50) 0%, var(--abo_light) 100%);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    margin: 15px auto;
    max-width: 1200px;
    animation: aboF_fadeInUp 0.4s cubic-bezier(0.4,0,0.2,1);
}

@keyframes aboF_fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.abo_title {
    text-align: center;
    margin-bottom: 20px;
    color: var(--abo_gray-800);
    font-size: 2rem;
    font-weight: 600;
}

/* ── SUBSCRIPTION CARDS ─────────────────────────────────────────────── */
.abo_card {
    background: linear-gradient(135deg, var(--abo_card-bg), rgba(220,53,69,.95));
    color: var(--abo_light);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    border: 2px solid transparent;
}

.abo_card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 8px 16px rgba(0,0,0,.12);
    border-color: rgba(255,255,255,.15);
}

.abo_card.selected {
    background: linear-gradient(135deg, var(--abo_success), rgba(40,167,69,.95));
    box-shadow: 0 0 20px rgba(40,167,69,.3);
    border-color: rgba(255,255,255,.25);
}

.abo_card:focus-within {
    outline: 3px solid rgba(255,255,255,.8);
    outline-offset: 2px;
}

.abo_card h3           { font-size: 1.8rem; margin: 8px 0; font-weight: 600; }
.abo_variant-title     { font-size: 1.15rem; margin-bottom: 10px; opacity: .9; font-weight: 500; }

/* ── FEATURES LIST ──────────────────────────────────────────────────── */
.abo_features          { list-style: none; padding: 0; margin: 15px 0; }

.abo_features li {
    margin: 10px 0;
    padding-left: 32px;
    position: relative;
    line-height: 1.5;
    opacity: .95;
    font-size: .9rem;
    transition: padding-left 0.3s ease;
}

.abo_features li i {
    position: absolute;
    left: 0; top: 2px;
    width: 22px; height: 22px;
    background: rgba(255,255,255,.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    color: var(--abo_light);
    border: 1px solid rgba(255,255,255,.2);
}

.abo_card:hover .abo_features li { padding-left: 35px; }

/* ── CUSTOM CHECKBOX ────────────────────────────────────────────────── */
.abo_checkbox { display: none; }

.abo_checkbox_label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.15));
    border: 1.5px solid rgba(255,255,255,.4);
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 500;
    margin: 10px 0;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.abo_checkbox_label:hover {
    background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.25));
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    border-color: rgba(255,255,255,.6);
}

.abo_checkmark {
    width: 20px; height: 20px;
    border: 1.5px solid var(--abo_light);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    margin-right: 8px;
    background: rgba(255,255,255,.1);
    transition: all 0.3s ease;
}

.abo_checkbox:checked + .abo_checkbox_label {
    background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.3));
    border-color: var(--abo_light);
}

.abo_checkbox:checked + .abo_checkbox_label .abo_checkmark {
    background: var(--abo_light);
    transform: scale(1.05);
}

.abo_checkbox:checked + .abo_checkbox_label .abo_checkmark::after {
    content: '\F26A';
    font-family: 'bootstrap-icons';
    color: var(--abo_success);
    font-size: 14px;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    animation: aboF_checkBounce 0.3s ease;
}

@keyframes aboF_checkBounce {
    from { opacity: 0; transform: translate(-50%,-50%) scale(0); }
    to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* ── FORM SECTION (hidden until card selected) ──────────────────────── */
.abo_form_section        { display: none; margin-top: 20px; opacity: 0; }
.abo_form_section.show   { display: block; animation: aboF_fadeInSection 0.4s ease forwards; }

@keyframes aboF_fadeInSection {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.abo_form_group          { margin-bottom: 15px; }

.abo_form_group label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: var(--abo_gray-700);
    font-size: .9rem;
}

.abo_form_group input,
.abo_form_group select {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--abo_gray-300);
    border-radius: 6px;
    font-size: .95rem;
    background: white;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.abo_form_group input:focus,
.abo_form_group select:focus {
    outline: none;
    border-color: var(--abo_accent);
    box-shadow: 0 0 0 2px rgba(74,144,226,.1);
}

.abo_form_group input:focus-visible,
.abo_form_group select:focus-visible {
    outline: 3px solid var(--abo_accent);
    outline-offset: 2px;
}

/* ── VALIDATION ERROR STATE ─────────────────────────────────────────── */
.abo_form_group input.error,
.abo_form_group select.error {
    border-color: var(--abo_error-border) !important;
    box-shadow: 0 0 0 2px rgba(248,113,113,.15) !important;
}

.abo_form_group input.error:focus,
.abo_form_group select.error:focus {
    border-color: var(--abo_error) !important;
    box-shadow: 0 0 0 3px rgba(220,53,69,.2) !important;
}

/* ── MATH CAPTCHA ───────────────────────────────────────────────────── */
.abo_math_section {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-radius: 10px;
    padding: 18px;
    margin: 20px 0;
    border: 1.5px solid #fbbf24;
    display: none;
}

.abo_math_section.show { display: block; animation: aboF_expand 0.3s ease; }

.abo_math_section h4 {
    color: #92400e;
    margin-bottom: 12px;
    font-size: 1.1rem;
    display: flex; align-items: center; gap: 8px;
}

.abo_math_equation {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

.abo_math_equation_display {
    background: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 1.2rem; font-weight: 600;
    color: var(--abo_gray-800);
    border: 2px solid #fbbf24;
    min-width: 120px; text-align: center;
    box-shadow: 0 2px 4px rgba(251,191,36,.1);
}

.abo_math_equation span { font-size: 1.2rem; font-weight: 500; color: #92400e; }

.abo_math_answer {
    width: 100px; padding: 10px;
    font-size: 1.1rem; text-align: center; font-weight: 600;
    background: white;
    border: 2px solid #fbbf24;
    border-radius: 8px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.abo_math_answer:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,.2);
    outline: none;
}

.abo_math_answer:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
}

.abo_math_help {
    display: block; margin-top: 8px;
    color: #92400e; font-size: .85rem; opacity: .8;
}

.abo_refresh_math {
    background: none;
    border: 1px solid #fbbf24;
    color: #92400e;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: .9rem;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 0.3s, border-color 0.3s;
}

.abo_refresh_math:hover      { background: rgba(251,191,36,.1); border-color: #f59e0b; }
.abo_refresh_math:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

/* ── BUTTONS ────────────────────────────────────────────────────────── */
.abo_btn {
    background: linear-gradient(135deg, var(--abo_card-bg), #c82333);
    border: none;
    padding: 12px 28px;
    font-size: 1.05rem; font-weight: 500;
    border-radius: 25px;
    color: var(--abo_light);
    cursor: pointer;
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 3px 10px rgba(220,53,69,.25);
    text-transform: uppercase; letter-spacing: .5px;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.abo_btn:hover        { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(220,53,69,.35); }
.abo_btn:focus-visible { outline: 3px solid var(--abo_accent); outline-offset: 3px; }
.abo_btn:disabled     { background: linear-gradient(135deg, var(--abo_gray-400), var(--abo_gray-500)); cursor: not-allowed; box-shadow: none; opacity: .5; }

/* ── SELECTION PROMPT & PRICE ───────────────────────────────────────── */
.abo_selection_prompt {
    background: linear-gradient(135deg, #fff8dc, #fffacd);
    border: 1.5px solid #ffd700;
    color: #856404;
    padding: 12px; border-radius: 8px;
    text-align: center; margin: 15px 0; font-size: .95rem;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

.abo_price_combo {
    background: var(--abo_success);
    color: var(--abo_light);
    border-radius: 10px; padding: 12px;
    text-align: center; margin-top: 15px;
    display: none; font-size: 1.1rem;
    transition: all 0.3s ease;
}

.abo_price_combo.show { display: block; animation: aboF_slideInUp 0.3s ease; }

@keyframes aboF_slideInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── PASSWORD SECTION ───────────────────────────────────────────────── */
.abo_password_section {
    background: linear-gradient(135deg, #e8f4f8, #f0f9ff);
    border-radius: 10px; padding: 18px; margin: 20px 0;
    border: 1.5px solid #bee3f8; display: none;
}

.abo_password_section.show { display: block; animation: aboF_expand 0.3s ease; }
.abo_password_section h4   { color: var(--abo_accent-dark); margin-bottom: 12px; font-size: 1.1rem; }

.abo_password_wrapper { position: relative; }

.abo_password_toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none;
    color: var(--abo_gray-500); cursor: pointer;
    padding: 4px 8px; z-index: 10;
    transition: color 0.3s, background 0.3s;
}

.abo_password_toggle:hover {
    color: var(--abo_accent);
    background: rgba(74,144,226,.1);
    border-radius: 4px;
}

.abo_password_toggle:focus-visible { outline: 2px solid var(--abo_accent); outline-offset: 2px; }
.abo_password_toggle i             { font-size: 18px; transition: transform 0.3s ease; }
.abo_password_toggle:hover i       { transform: scale(1.1); }
.abo_form_group.password-field input { padding-right: 48px; }

/* Password strength */
.abo_password_strength      { margin-top: 6px; display: none; }
.abo_password_strength.show { display: block; }
.abo_password_strength_bar  { height: 3px; background: var(--abo_gray-200); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.abo_password_strength_fill { height: 100%; transition: all 0.3s ease; border-radius: 3px; }
.abo_password_strength_text { font-size: .8rem; font-weight: 500; }
.strength-weak   { background: var(--abo_error);   width: 25%; }
.strength-fair   { background: var(--abo_warning);  width: 50%; }
.strength-good   { background: var(--abo_info);     width: 75%; }
.strength-strong { background: var(--abo_success);  width: 100%; }

/* ── PRINT QUANTITY ─────────────────────────────────────────────────── */
.abo_quantity {
    display: none; margin-top: 12px; padding: 12px;
    background: rgba(255,255,255,.1); border-radius: 6px;
}

.abo_quantity label  { color: var(--abo_light); margin-bottom: 4px; display: block; font-size: .9rem; }
.abo_quantity select { background: white; color: var(--abo_dark); padding: 6px 10px; }

/* ── ALTERNATIVE INVOICE ────────────────────────────────────────────── */
.abo_alt_invoice_wrapper {
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border-radius: 10px; padding: 15px; margin: 15px 0;
    border: 1.5px solid #81c784;
    box-shadow: 0 2px 6px rgba(76,175,80,.15);
    transition: box-shadow 0.3s;
}

.abo_alt_invoice_wrapper:hover { box-shadow: 0 3px 10px rgba(76,175,80,.2); }

.abo_alt_invoice_checkbox {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; padding: 4px; border-radius: 6px;
    transition: background 0.3s;
}

.abo_alt_invoice_checkbox:hover { background: rgba(76,175,80,.08); }

.abo_alt_invoice_checkbox input[type="checkbox"] {
    appearance: none;
    width: 22px; height: 22px; flex-shrink: 0;
    cursor: pointer; background: white;
    border: 1.5px solid #4caf50; border-radius: 4px;
    position: relative; transition: all 0.3s ease;
}

.abo_alt_invoice_checkbox input[type="checkbox"]:checked  { background: #4caf50; border-color: #388e3c; }

.abo_alt_invoice_checkbox input[type="checkbox"]:checked::after {
    content: '\F26A'; font-family: 'bootstrap-icons';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    color: white; font-size: 14px;
}

.abo_alt_invoice_checkbox input[type="checkbox"]:focus-visible { outline: 3px solid #4caf50; outline-offset: 2px; }

.abo_alt_invoice_checkbox label {
    color: #2e7d32; font-size: .95rem; font-weight: 500;
    cursor: pointer; margin: 0;
    display: flex; align-items: center; gap: 6px;
}

.abo_alt_invoice {
    display: none; margin-top: 15px; padding: 15px;
    background: white; border-radius: 8px; border: 1.5px solid #81c784;
}

.abo_alt_invoice.show { display: block; animation: aboF_expand 0.3s ease; }

@keyframes aboF_expand {
    from { opacity: 0; transform: scaleY(0.95); transform-origin: top; }
    to   { opacity: 1; transform: scaleY(1); }
}

/* ── TERMS & SECURITY BADGE ─────────────────────────────────────────── */
.abo_terms_wrapper {
    background: linear-gradient(135deg, var(--abo_gray-100), var(--abo_gray-50));
    border-radius: 8px; padding: 15px; margin: 15px 0;
    border: 1px solid var(--abo_gray-200);
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.abo_security_badge {
    display: flex; align-items: center; gap: 6px;
    color: var(--abo_success); font-size: .85rem;
    margin-top: 8px; opacity: .7;
}

/* ── LOADING INDICATOR ──────────────────────────────────────────────── */
.abo_loading        { display: none; text-align: center; padding: 15px; }
.abo_loading.active { display: block; }
.abo_loading i      { font-size: 1.5rem; color: var(--abo_accent); animation: aboF_spin 1s linear infinite; }

@keyframes aboF_spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── LAYOUT UTILITIES ───────────────────────────────────────────────── */
.abo_row      { display: flex; flex-wrap: wrap; margin: -8px; }
.abo_col-md-6 { flex: 0 0 50%; max-width: 50%; padding: 8px; }
.required     { color: var(--abo_error); }

/* ── TOAST NOTIFICATIONS ────────────────────────────────────────────── */
.abo_toast_container {
    position: fixed; bottom: 20px; right: 20px;
    z-index: 9999; max-width: 320px;
}

.abo_toast {
    background: white; border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    margin-bottom: 8px; padding: 12px;
    display: flex; align-items: flex-start; gap: 10px;
    animation: aboF_slideInRight 0.3s ease-out;
    position: relative; overflow: hidden;
}

@keyframes aboF_slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.abo_toast.fade-out { animation: aboF_slideOutRight 0.3s ease-out forwards; }

@keyframes aboF_slideOutRight {
    to { transform: translateX(100%); opacity: 0; }
}

.abo_toast_icon {
    flex-shrink: 0; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 12px;
}

.abo_toast.success .abo_toast_icon { background: var(--abo_success); color: white; }
.abo_toast.error   .abo_toast_icon { background: var(--abo_error);   color: white; }
.abo_toast.warning .abo_toast_icon { background: var(--abo_warning);  color: white; }
.abo_toast.info    .abo_toast_icon { background: var(--abo_info);     color: white; }

.abo_toast_content { flex: 1; }
.abo_toast_title   { font-weight: 500; margin-bottom: 2px; color: var(--abo_gray-800); font-size: .9rem; }
.abo_toast_message { color: var(--abo_gray-600); font-size: .85rem; }

.abo_toast_close {
    position: absolute; top: 6px; right: 6px;
    background: none; border: none; color: var(--abo_gray-400);
    cursor: pointer; padding: 2px; font-size: 16px;
    transition: color 0.2s;
}
.abo_toast_close:hover      { color: var(--abo_gray-600); }
.abo_toast_close:focus-visible { outline: 2px solid var(--abo_accent); outline-offset: 1px; }

.abo_toast_progress {
    position: absolute; bottom: 0; left: 0; height: 2px;
    animation: aboF_progress 5s linear;
}

.abo_toast.success .abo_toast_progress { background: var(--abo_success); }
.abo_toast.error   .abo_toast_progress { background: var(--abo_error); }
.abo_toast.warning .abo_toast_progress { background: var(--abo_warning); }
.abo_toast.info    .abo_toast_progress { background: var(--abo_info); }

@keyframes aboF_progress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .abo_col-md-6             { flex: 0 0 100%; max-width: 100%; }
    .abo_container            { padding: 15px; }
    .abo_title                { font-size: 1.5rem; }
    .abo_card h3              { font-size: 1.5rem; }
    .abo_math_equation        { flex-direction: column; align-items: stretch; }
    .abo_math_equation_display,
    .abo_math_answer          { width: 100%; }
}

/* ── HIGH CONTRAST ───────────────────────────────────────────────────── */
@media (prefers-contrast: high) {
    .abo_card,
    .abo_alt_invoice_wrapper,
    .abo_math_section,
    .abo_password_section,
    .abo_terms_wrapper { border-width: 3px; }
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .abo_container,
    .abo_card,
    .abo_form_section,
    .abo_math_section,
    .abo_password_section,
    .abo_price_combo,
    .abo_toast,
    .abo_btn {
        animation: none !important;
        transition: none !important;
    }
}

/* ── PRINT ───────────────────────────────────────────────────────────── */
@media print {
    .abo_toast_container { display: none; }
    .abo_btn  { background: white; color: black; border: 1px solid black; box-shadow: none; }
    .abo_card { background: white; color: black; border: 1px solid #ccc; }
}