/**
 * Loxford Brochure – Frontend CSS
 *
 * Scoped under .lb-* namespaced selectors.
 * Designed to complement EduPress / LearnPress styling without conflict.
 *
 * @package Loxford_Brochure
 * @version 1.0.0
 */

/* ──────────────────────────────────────────────────────────────────────────
 * 1. CSS CUSTOM PROPERTIES
 * ────────────────────────────────────────────────────────────────────────── */
:root {
    --lb-primary:       #ff6b35;      /* brand accent — overrideable */
    --lb-primary-dark:  #e05520;
    --lb-text:          #1a1a2e;
    --lb-text-muted:    #64748b;
    --lb-bg:            #ffffff;
    --lb-border:        #e2e8f0;
    --lb-error:         #e53e3e;
    --lb-success:       #38a169;
    --lb-radius:        12px;
    --lb-radius-sm:     8px;
    --lb-shadow:        0 20px 60px rgba(0, 0, 0, 0.18),
                        0 4px  16px rgba(0, 0, 0, 0.10);
    --lb-transition:    0.22s ease;
    --lb-font:          -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 2. DOWNLOAD BROCHURE BUTTON
 * ────────────────────────────────────────────────────────────────────────── */
.lb-brochure-btn-wrap {
    width: 100%;
    margin-top: 10px;
}

/* Ensure no theme or plugin injects an icon via pseudo-elements */
.lb-brochure-btn::before,
.lb-brochure-btn::after {
    content: none !important;
    display: none !important;
}

.lb-brochure-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;

    width:           100%;
    padding:         13px 20px;

    /* Outlined orange */
    background:      transparent;
    border:          2px solid var(--lb-primary);
    border-radius:   var(--lb-radius-sm);
    color:           var(--lb-primary);

    font-family:     var(--lb-font);
    font-size:       15px;
    font-weight:     600;
    letter-spacing:  0.02em;
    line-height:     1.4;
    text-align:      center;
    cursor:          pointer;

    transition:      background  var(--lb-transition),
                     color       var(--lb-transition),
                     box-shadow  var(--lb-transition),
                     transform   var(--lb-transition);
}

.lb-brochure-btn:hover,
.lb-brochure-btn:focus-visible {
    /* Solid orange fill on hover */
    background:  var(--lb-primary);
    color:       #ffffff;
    border-color: var(--lb-primary);
    outline:     none;
    box-shadow:  0 4px 14px rgba(255, 107, 53, 0.35);
    transform:   translateY(-1px);
}

.lb-brochure-btn:active {
    background:  var(--lb-primary-dark);
    border-color: var(--lb-primary-dark);
    color:       #ffffff;
    transform:   translateY(0);
    box-shadow:  none;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 3. MODAL OVERLAY
 * ────────────────────────────────────────────────────────────────────────── */
.lb-modal-overlay {
    position:    fixed;
    inset:       0;
    z-index:     99999;
    background:  rgba(10, 10, 30, 0.65);
    backdrop-filter: blur(4px);

    display:        flex;
    align-items:    center;
    justify-content:center;
    padding:        16px;

    /* Animation */
    animation: lb-fade-in 0.18s ease both;
}

@keyframes lb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lb-modal-overlay[hidden] {
    display: none;
}

/* Prevent body scroll when modal is open */
body.lb-modal-open {
    overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 4. MODAL CARD
 * ────────────────────────────────────────────────────────────────────────── */
.lb-modal {
    position:  relative;
    width:     100%;
    max-width: 480px;

    background:    var(--lb-bg);
    border-radius: var(--lb-radius);
    box-shadow:    var(--lb-shadow);
    padding:       40px 36px 36px;

    animation: lb-slide-up 0.22s ease both;
    font-family: var(--lb-font);
}

@keyframes lb-slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Close button ────────────────────────────────────────────────────────── */
.lb-modal-close {
    position: absolute;
    top:      14px;
    right:    16px;

    width:    34px;
    height:   34px;
    border:   none;
    border-radius: 50%;

    background:  transparent;
    color:       var(--lb-text-muted);
    font-size:   22px;
    line-height: 1;
    cursor:      pointer;
    padding:     0;

    display:         flex;
    align-items:     center;
    justify-content: center;

    transition: background var(--lb-transition), color var(--lb-transition);
}

.lb-modal-close:hover,
.lb-modal-close:focus-visible {
    background: var(--lb-border);
    color:      var(--lb-text);
    outline:    none;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 5. MODAL HEADER
 * ────────────────────────────────────────────────────────────────────────── */
.lb-modal-header {
    text-align:   center;
    margin-bottom: 28px;
}

.lb-modal-title {
    margin:      0 0 8px;
    font-size:   22px;
    font-weight: 700;
    color:       var(--lb-text);
    line-height: 1.3;
}

.lb-modal-subtitle {
    margin:    0;
    font-size: 14px;
    color:     var(--lb-text-muted);
    line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 6. FORM ELEMENTS
 * ────────────────────────────────────────────────────────────────────────── */
.lb-form-group {
    margin-bottom: 18px;
}

.lb-form-group label {
    display:        block;
    margin-bottom:  6px;
    font-size:      13px;
    font-weight:    600;
    color:          var(--lb-text);
    letter-spacing: 0.01em;
}

.lb-req {
    color:       var(--lb-error);
    margin-left: 2px;
}

.lb-optional {
    font-weight: 400;
    color:       var(--lb-text-muted);
    font-size:   12px;
    margin-left: 4px;
}

.lb-input {
    display:   block;
    width:     100%;
    padding:   11px 14px;

    border:        1.5px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    background:    #f8fafc;

    font-family: var(--lb-font);
    font-size:   15px;
    color:       var(--lb-text);
    line-height: 1.4;

    transition: border-color var(--lb-transition),
                box-shadow   var(--lb-transition),
                background   var(--lb-transition);

    box-sizing: border-box;
}

.lb-input:focus {
    outline:      none;
    border-color: var(--lb-primary);
    background:   #fff;
    box-shadow:   0 0 0 3px rgba(255, 107, 53, 0.15);
}

.lb-input.lb-input-error {
    border-color: var(--lb-error);
    box-shadow:   0 0 0 3px rgba(229, 62, 62, 0.12);
}

/* ── Field-level error text ──────────────────────────────────────────────── */
.lb-field-error {
    display:     block;
    margin-top:  5px;
    font-size:   12px;
    color:       var(--lb-error);
    font-weight: 500;
}

/* ── Form-level alert ────────────────────────────────────────────────────── */
.lb-alert {
    padding:       10px 14px;
    border-radius: var(--lb-radius-sm);
    font-size:     13px;
    font-weight:   500;
    margin-bottom: 16px;
}

.lb-alert-error {
    background: #fff5f5;
    color:      var(--lb-error);
    border:     1px solid #fed7d7;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 7. BUTTONS
 * ────────────────────────────────────────────────────────────────────────── */
.lb-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;

    padding:       13px 24px;
    border:        none;
    border-radius: var(--lb-radius-sm);

    font-family:   var(--lb-font);
    font-size:     15px;
    font-weight:   600;
    line-height:   1.4;
    cursor:        pointer;
    text-decoration: none;

    transition: background  var(--lb-transition),
                box-shadow  var(--lb-transition),
                transform   var(--lb-transition);
}

.lb-btn-primary {
    background: var(--lb-primary);
    color:      #fff;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.30);
}

.lb-btn-primary:hover,
.lb-btn-primary:focus-visible {
    background: var(--lb-primary-dark);
    box-shadow: 0 6px 18px rgba(255, 107, 53, 0.40);
    outline:    none;
    transform:  translateY(-1px);
    color:      #fff;
}

.lb-btn-primary:active {
    transform: translateY(0);
}

.lb-btn-primary:disabled {
    opacity:    0.65;
    cursor:     not-allowed;
    transform:  none;
    box-shadow: none;
}

.lb-form-submit {
    margin-bottom: 0;
    margin-top:    6px;
}

.lb-form-submit .lb-btn {
    width: 100%;
}

/* ── Download button ─────────────────────────────────────────────────────── */
.lb-btn-download {
    width:         100%;
    justify-content: center;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.lb-btn-spinner {
    display:        inline-block;
    width:          16px;
    height:         16px;
    border:         2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius:  50%;
    animation:      lb-spin 0.65s linear infinite;
    flex-shrink:    0;
}

.lb-btn-spinner[hidden] {
    display: none;
}

@keyframes lb-spin {
    to { transform: rotate(360deg); }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 8. SUCCESS STEP
 * ────────────────────────────────────────────────────────────────────────── */
#lb-step-success[hidden] {
    display: none;
}

.lb-success-icon {
    width:  70px;
    height: 70px;
    margin: 0 auto 16px;
}

.lb-checkmark-circle {
    stroke:            var(--lb-success);
    stroke-width:      2;
    stroke-dasharray:  166;
    stroke-dashoffset: 166;
    animation:         lb-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards;
}

.lb-checkmark-check {
    stroke:            var(--lb-success);
    stroke-width:      2;
    stroke-linecap:    round;
    stroke-linejoin:   round;
    stroke-dasharray:  48;
    stroke-dashoffset: 48;
    animation:         lb-stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.55s forwards;
}

@keyframes lb-stroke {
    to { stroke-dashoffset: 0; }
}

.lb-download-action {
    margin-top: 8px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 9. RESPONSIVE
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .lb-modal {
        padding: 28px 20px 24px;
    }

    .lb-modal-title {
        font-size: 19px;
    }
}