/*
 * Extracted verbatim from webordering/views/layouts/footer.php.
 *
 * The existing site inlines this inside the page body, so it lands after
 * every linked stylesheet. It is linked last in index.html for the same
 * reason - several rules here rely on winning over style.css.
 */
.cashback-highlight {
        display: inline-block;
        margin-top: 10px;
        padding: 8px 14px;
        background: #fff4e5;
        border: 1px solid #ffd591;
        border-radius: 20px;
        color: #d46b08;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
    }

    .cashback-highlight::before {
        content: "🎁 ";
    }

    .modern-auth-modal {
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    }

    .modern-input {
        border-radius: 8px;
        border: 1px solid #dee2e6;
        transition: all 0.3s ease;
    }

    .modern-input:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
    }

    .modern-btn {
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .modern-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }

    /* Password Strength Indicator */
    .password-strength {
        margin-top: -10px;
    }

    .strength-bar {
        height: 4px;
        flex: 1;
        background-color: #e9ecef;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .strength-bar.weak {
        background-color: #dc3545;
    }

    .strength-bar.medium {
        background-color: #ffc107;
    }

    .strength-bar.strong {
        background-color: #28a745;
    }

    .strength-bar.very-strong {
        background-color: #20c997;
    }

    .toggle-password {
        border: none;
        background: transparent;
        padding-right: 10px;
        text-decoration: none;
        margin-right: 10px;
        position: absolute;
        right: 0;
        top: 11px;
    }

    .toggle-password:hover {
        color: #dc3545 !important;
    }

    .toggle-password:focus {
        box-shadow: none;
    }

    /* Select2 Customization */
    .select2-container--default .select2-selection--single {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        height: 58px;
        padding: 16px 12px;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: normal;
        padding-left: 0;
        font-size: 13px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px;
    }

    .select2-container--default.select2-container--focus .select2-selection--single {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
    }

    /* Select2 Invalid State */
    .select2-container.is-invalid + .select2-container .select2-selection {
        border-color: #dc3545;
    }

    .is-invalid ~ .select2-container .select2-selection {
        border-color: #dc3545 !important;
    }

    /* Form Validation States */
    .was-validated .form-control:invalid,
    .form-control.is-invalid {
        border-color: #dc3545;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    .was-validated .form-control:valid,
    .form-control.is-valid {
        border-color: #28a745;
    }

    /* Alert Styles */
    .alert {
        border-radius: 8px;
        border: none;
    }

    /* Loading Spinner */
    .spinner-border-sm {
        width: 1rem;
        height: 1rem;
    }

    /* Responsive adjustments */
    @media (max-width: 576px) {
        .modal-dialog {
            margin: 0.5rem;
        }

        .modal-body {
            padding: 1rem !important;
        }
    }

    .footeractive {
        color: white !important;
    }

/* Breathing room above the footer.
   Every page's main content ends exactly on the footer's top edge. Most pages
   hide it behind their own inner padding, but the menu's category rail runs
   right to the bottom, so the last category sat flush against the dark band. */
#footer {
    margin-top: 40px;
}