/* ============================================
   PROMO PAGE STYLES
   Clean, flowing design
   ============================================ */

.promo {
    background: #f5f5f5;
}

    /* ============================================
   MAIN CONTAINER - CONTROLS EVERYTHING
   ============================================ */
    .promo .promo-container {
        max-width: 1140px;
        margin: 0 auto;
        background: #fff;
    }

    /* ============================================
   LOGO
   ============================================ */
    .promo .promo-logo {
        text-align: center;
        padding: 1rem;
        background: #fff;
    }

        .promo .promo-logo img {
            max-width: 130px;
            height: auto;
        }

    /* ============================================
   HEADER IMAGE - EDGE TO EDGE
   ============================================ */
    .promo .promo-hero {
        line-height: 0;
        font-size: 0;
    }

        .promo .promo-hero img,
        .promo .promo-hero picture,
        .promo .promo-hero picture img {
            width: 100%;
            height: auto;
            display: block;
        }

    /* ============================================
   CONTENT PADDING
   ============================================ */
    .promo .promo-body {
        padding: 1.5rem 0.5rem;
    }

    /* ============================================
   TYPOGRAPHY
   ============================================ */
    .promo h1 {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.25;
        margin-bottom: 0.75rem;
        color: #212529;
    }

    .promo h2 {
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.3;
        margin-bottom: 0.625rem;
        color: #212529;
    }

    .promo h3 {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.35;
        margin-bottom: 0.5rem;
        color: #212529;
    }

    .promo h5 {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.4;
        margin-bottom: 0.5rem;
        color: #212529;
    }

    .promo p {
        font-size: 0.9375rem;
        line-height: 1.65;
        margin-bottom: 0.875rem;
        color: #495057;
    }

    .promo .lead {
        font-size: 1rem;
        line-height: 1.6;
        color: #495057;
    }

    .promo b {
        font-weight: 600;
    }

    .promo .small .terms-link {
        text-decoration: none;
    }

    .promo .small,
    .promo small {
        font-size: 0.8125rem;
        color: #6c757d;
    }

    /* ============================================
   AWARDS STRIP - EDGE TO EDGE
   ============================================ */
    .promo .promo-awards {
        line-height: 0;
        font-size: 0;
        background: #fff;
        padding: 0 1.75rem;
    }

        .promo .promo-awards img {
            width: 100%;
            height: auto;
            display: block;
        }

    /* ============================================
   PRODUCT FEATURE BOX
   ============================================ */
    .promo .promo-product {
        margin-top: 2rem;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 1rem;
    }

    .promo .promo-prize-box {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 1rem;
        background: #f8f9fa;
        border: 2px solid #24507f;
        padding: 1rem;
    }

    .promo .promo-product-image {
        text-align: center;
        flex-shrink: 0;
    }

    .promo .promo-product-info h5 {
        font-size: 1.4rem;
    }

    .promo .promo-product-info {
        flex: 1;
    }


        .promo .promo-product-info p:last-child {
            margin-bottom: 0;
        }

    .promo .promo-product-image {
        text-align: center;
        flex-shrink: 0;
    }

    /* ============================================
   FLIPBOOK BROCHURE
   ============================================ */
    .promo .me-thumb .me-fbp {
        display: inline-block;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 1rem;
        background: #f6f6f6;
        text-align: center;
    }

    .promo .me-fbp-links {
        margin-top: 0.5rem;
    }

        .promo .me-fbp-links a {
            display: block;
            font-size: 0.9375rem;
            color: #007bff;
            width: 172px;
            text-decoration: none;
        }

            .promo .me-fbp-links a:hover {
                color: #dc3545;
            }

        .promo .me-fbp-links .btn-download {
            display: inline-block;
            margin-top: 0.25rem;
            font-size: 0.85rem;
            color: #6c757d;
        }

            .promo .me-fbp-links .btn-download::before {
                content: "\f019";
                font-family: "Font Awesome 5 Pro";
                font-weight: 900;
                margin-right: 0.375rem;
            }

            .promo .me-fbp-links .btn-download::after {
                content: "Download PDF";
            }

            .promo .me-fbp-links .btn-download:hover {
                color: #dc3545;
            }

    .promo .promo-product-image img {
        display: block;
        max-width: 420px;
        height: auto;
        margin: 1.5rem 0;
    }

    .promo .promo-product-image .btn {
        float: right;
        font-size: 0.87rem;
        margin-top: 0rem;
    }

        .promo .promo-product-image .btn i {
            font-size: 0.9rem;
        }

    .promo .promo-product-info {
        flex: 1;
    }

        .promo .promo-product-info p:last-child {
            margin-bottom: 0;
        }

    /* ============================================
   CTA BANNER
   ============================================ */
    .promo .promo-cta {
        text-align: center;
    }

        .promo .promo-cta p {
            margin: 0;
            font-size: 1.0625rem;
            font-weight: 600;
            color: #fff;
        }

    /*Facebook */
    .promo .promo-facebook {
        padding-top: 1.5rem;
        text-align: center;
    }

        .promo .promo-facebook h3 {
            margin-bottom: 0.75rem;
        }

        .promo .promo-facebook .fb-page {
            margin: 0 auto;
        }

    .promo .fb-desktop {
        display: none;
    }

    .promo .fb-mobile {
        display: block;
    }

/* ============================================
   JUMP TO FORM BUTTON (Mobile)
   ============================================ */
.promo .promo-jump {
    text-align: center;
    padding: 1rem 1rem;
}

    .promo .promo-jump a {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        color: #000;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .promo .promo-jump a:hover {
            color: #007bff;
        }

    .promo .promo-jump span {
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.25em;
        text-transform: uppercase;
    }

    .promo .promo-jump .scroll-indicator {
        width: 26px;
        height: 42px;
        border: 2px solid rgb(0 0 0 / 63%);
        border-radius: 13px;
        position: relative;
    }

        .promo .promo-jump .scroll-indicator::before {
            content: "";
            position: absolute;
            top: 8px;
            left: 50%;
            width: 3px;
            height: 8px;
            background: rgb(0 0 0 / 63%);
            border-radius: 3px;
            transform: translateX(-50%);
            animation: scroll-smooth 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
        }

@keyframes scroll-smooth {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    80% {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }
}
/* ============================================
   FORM AREA
   ============================================ */
.promo .promo-form {
    padding: 0.5rem 0.2rem;
    background: #fff;
}

.promo .pane {
    padding: 1.5rem 0.5rem;
    text-align: right;
}

/* Form Header */
.promo .form-header {
    background: #24507f;
    color: #fff;
    padding: 0.875rem 1rem;
}

    .promo .form-header h2 {
        margin: 0;
        color: #fff;
        font-weight: 600;
        font-size: 1.15rem;
    }

/* Form Section Box */
.promo .form-section {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.promo .form-section-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid #dee2e6;
}

/* Form Groups */
.promo .form-group {
    margin-bottom: 1rem;
}

    .promo .form-group:last-child {
        margin-bottom: 0;
    }

    .promo .form-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.375rem;
    }

        .promo .form-group label.required::after {
            content: ' *';
            color: #dc3545;
        }

.promo .form-control {
    display: block;
    width: 100%;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
}

    .promo .form-control:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.15);
    }

    .promo .form-control.is-invalid {
        border-color: #dc3545;
    }

    .promo .form-control.is-valid {
        border-color: #28a745;
    }

.promo .form-text {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.promo .invalid-feedback {
    font-size: 0.75rem;
    color: #dc3545;
    margin-top: 0.25rem;
}

/* Form Row */
.promo .form-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.375rem;
    margin-right: -0.375rem;
}

    .promo .form-row > [class*="col"] {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }

/* Terms Section */
.promo .terms-box {
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

    .promo .terms-box.border-success {
        border-color: #28a745;
    }

.promo .form-check {
    position: relative;
    padding-left: 1.5rem;
}

.promo .form-check-input {
    position: absolute;
    left: 0;
    top: 0.25rem;
    margin: 0;
}

.promo .form-check-label {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #495057;
    cursor: pointer;
}

.promo .terms-link {
    color: #007bff;
    text-decoration: underline;
}

    .promo .terms-link:hover {
        color: #0056b3;
    }

/* Submit Area */
.promo .form-submit {
    text-align: center;
    padding-top: 0.5rem;
}

.promo .btn-submit {
    display: inline-block;
    background: #24507f;
    color: #fff;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

    .promo .btn-submit:hover {
        color: #fff;
    }

.promo .btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

    .promo .btn.loading::after {
        content: "";
        position: absolute;
        width: 1.125rem;
        height: 1.125rem;
        top: 50%;
        left: 50%;
        margin: -0.5625rem 0 0 -0.5625rem;
        border: 2px solid rgba(255,255,255,0.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
    }

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

.promo .form-submit .form-text {
    margin-top: 1rem;
}

/* ============================================
   ALERTS
   ============================================ */
.promo .alert {
    padding: 0.875rem 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

    .promo .alert h6 {
        font-size: 0.9375rem;
        font-weight: 600;
        margin-bottom: 0.375rem;
    }

    .promo .alert ul {
        margin: 0;
        padding-left: 1.125rem;
    }

.promo .alert-danger {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.promo .alert-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.promo .alert-warning {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
}

.promo .alert-info {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

/* ============================================
   FOOTER / CONTACT
   ============================================ */
.promo .promo-contact {
    background: #212529;
    color: #fff;
    padding: 1.5rem 1.25rem;
    text-align: center;
}

    .promo .promo-contact h3 {
        color: #fff;
        margin-bottom: 0.5rem;
    }

    .promo .promo-contact p {
        color: rgba(255,255,255,0.8);
    }

    .promo .promo-contact .btn {
        display: inline-block;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        border-radius: 0.25rem;
        text-decoration: none;
        margin: 0.25rem;
    }

    .promo .promo-contact .btn-light {
        background: #fff;
        color: #212529;
    }

        .promo .promo-contact .btn-light:hover {
            background: #f8f9fa;
        }

    .promo .promo-contact .btn-outline-light {
        background: transparent;
        border: 1px solid rgba(255,255,255,0.5);
        color: #fff;
    }

        .promo .promo-contact .btn-outline-light:hover {
            background: rgba(255,255,255,0.1);
        }

/* ============================================
   STATUS PAGES (coming soon, closed, entered)
   ============================================ */
.promo .promo-status {
    text-align: center;
    padding: 2rem 1.25rem;
}

    .promo .promo-status .status-logo {
        max-width: 140px;
        margin-bottom: 1.25rem;
    }

    .promo .promo-status h1,
    .promo .promo-status h2 {
        margin-bottom: 1rem;
    }

    .promo .promo-status .alert {
        text-align: left;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }


/* ============================================
   MEDIA QUERIES
   ============================================ */

/* --------------------------------------------
   max-width: 575.98px (xs and below)
   -------------------------------------------- */
@media (max-width: 768px) {
    .promo .form-header {
        margin: 0rem;
    }

    .promo .btn-submit {
        display: block;
        width: 100%;
    }

    .promo .promo-product-info {
        order: 1;
    }

        .promo .promo-product-info h5 {
            font-size: 1.2rem;
        }

    .promo .promo-product-image {
        order: 2;
    }

        .promo .promo-product-image img {
            max-width: 100%;
        }

    .promo .form-section {
        border-radius: 0px;
    }

    .promo .fb-like,
    .promo .fb-like span,
    .promo .fb-like iframe {
        max-width: 100% !important;
    }
}

/* --------------------------------------------
   min-width: 576px (sm and above)
   -------------------------------------------- */
@media (min-width: 576px) {
    .promo h1 {
        font-size: 1.625rem;
    }

    .promo h2 {
        font-size: 1.375rem;
    }

    .promo .lead {
        font-size: 1.0625rem;
    }

    .promo .promo-body {
        padding: 1.75rem 1.5rem;
    }

    .promo .promo-product {
        padding: 1.5rem;
    }

    .promo .promo-form {
        padding: 0rem 1rem;
    }

    .promo .form-header {
        padding: 1rem 1.25rem;
    }

    .promo .promo-contact {
        padding: 1.75rem 1.5rem;
    }
}

/* --------------------------------------------
   min-width: 768px (md and above)
   -------------------------------------------- */
@media (min-width: 768px) {
    .promo .promo-logo {
        padding: 1.25rem;
    }

        .promo .promo-logo img {
            max-width: 150px;
        }

    .promo .pane {
        text-align: left;
    }

    .promo h1 {
        font-size: 1.875rem;
    }

    .promo h2 {
        font-size: 1.5rem;
    }

    .promo h3 {
        font-size: 1.25rem;
    }

    .promo p {
        font-size: 1rem;
    }

    .promo .lead {
        font-size: 1.125rem;
    }

    .promo .promo-body {
        padding: 2rem 2.25rem;
    }

    .promo .promo-product {
        flex-direction: row;
        align-items: center;
        padding: 1.75rem 2.25rem;
        gap: 1.75rem;
    }

    .promo .fb-desktop {
        display: block;
    }

    .promo .fb-mobile {
        display: none;
    }

    .promo .promo-prize-box {
        flex-direction: row;
        align-items: center;
        gap: 1.75rem;
        padding: 1rem;
    }

    .promo .promo-product-image {
        order: 2;
    }

    .promo .promo-product-info {
        order: 1;
    }

    .promo .promo-cta {
        padding: 1.125rem 1.5rem;
    }

        .promo .promo-cta p {
            font-size: 1.125rem;
        }

    .promo .promo-form {
        margin: 0;
        padding: 0rem 2.25rem;
    }

    .promo .promo-jump {
        display: none;
    }

    .promo .form-header {
        padding: 1rem 1.5rem;
    }

        .promo .form-header h2 {
            font-size: 1.25rem;
        }

    .promo .form-section {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .promo .form-section-title {
        font-size: 1rem;
    }

    .promo .promo-contact {
        padding: 2rem 2.25rem;
    }

    .promo .promo-status {
        padding: 2.5rem 2.25rem;
    }
}

/* --------------------------------------------
   min-width: 992px (lg and above)
   -------------------------------------------- */
@media (min-width: 992px) {
    .promo {
        padding: 1.5rem 1rem;
    }

        .promo .promo-container {
            border-radius: 0.375rem;
            box-shadow: 0 1px 20px rgba(0,0,0,0.08);
            overflow: hidden;
        }

        .promo h1 {
            font-size: 2rem;
        }

        .promo h2 {
            font-size: 1.625rem;
        }

        .promo .promo-body {
            padding: 2.25rem 2.75rem;
        }

        .promo .promo-product {
            padding: 1rem 2.5rem 0rem 2.5rem;
            gap: 2rem;
        }

        .promo .promo-form {
            padding: 1rem 2.75rem;
        }

        .promo .form-header {
            padding: 1.125rem 1.75rem;
        }
}