/**
 * CHECKOUT PAGE - COMPLETELY ISOLATED CSS
 * This file contains ALL styling for the checkout page with zero dependencies
 * on other CSS files. Uses maximum specificity to override everything.
 */

/* =======================
   BASE RESET FOR CHECKOUT
   ======================= */
body .checkout-page,
body .checkout-page *,
=======================*/ body .checkout-page .bg-gradient-to-br {
    background: linear-gradient(to bottom right, #0066CC, #003d7a) !important;
    border-radius: 0.75rem !important;
    /* 12px - rounded-xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
    color: white !important;
    position: relative !important;
    z-index: 102 !important;
}

@media (min-width: 768px) {
    body .checkout-page .bg-gradient-to-br {
        border-radius: 1rem !important;
        /* 16px - rounded-2xl */
        padding: 1.5rem !important;
        margin-bottom: 2rem !important;
    }
}

/* =======================
   MAIN FORM CARD
   ======================= */
body .checkout-page .bg-white.rounded-2xl {
    background-color: white !important;
    border-radius: 1rem !important;
    /* 16px */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid #f1f5f9 !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 102 !important;
}

/* =======================
   FORM INPUTS
   ======================= */
body .checkout-page input[type="text"],
body .checkout-page input[type="email"],
body .checkout-page input[type="tel"],
body .checkout-page input[type="number"],
body .checkout-page select,
body .checkout-page textarea {
    width: 100% !important;
    padding: 0.875rem 1rem !important;
    /* py-3.5 px-4 */
    border-radius: 0.75rem !important;
    /* rounded-xl */
    border: 1px solid #e2e8f0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #1e293b !important;
    background-color: white !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

body .checkout-page input:focus,
body .checkout-page select:focus,
body .checkout-page textarea:focus {
    border-color: #0066CC !important;
    ring: 2px !important;
    ring-color: rgba(0, 102, 204, 0.2) !important;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2) !important;
}

body .checkout-page input.border-red-500 {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #ef4444 !important;
}

/* =======================
   LABELS
   ======================= */
body .checkout-page label {
    display: block !important;
    font-size: 0.875rem !important;
    /* text-sm */
    font-weight: 700 !important;
    /* font-bold */
    color: #374151 !important;
    /* text-gray-700 */
    margin-bottom: 0.5rem !important;
}

/* =======================
   BUTTONS
   ======================= */
body .checkout-page button[type="button"],
body .checkout-page button[type="submit"] {
    font-weight: 700 !important;
    padding: 1rem 2.5rem !important;
    border-radius: 0.75rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    border: none !important;
    font-size: 1.125rem !important;
    /* text-lg */
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

/* Primary Blue Button */
body .checkout-page .bg-blue-600 {
    background-color: #0066CC !important;
    color: white !important;
    box-shadow: 0 10px 15px -3px rgba(0, 102, 204, 0.3) !important;
}

body .checkout-page .bg-blue-600:hover {
    background-color: #0052a3 !important;
    transform: translateY(-2px) !important;
}

/* Green Submit Button */
body .checkout-page .bg-green-600 {
    background-color: #16a34a !important;
    color: white !important;
    box-shadow: 0 10px 15px -3px rgba(22, 163, 74, 0.3) !important;
    padding: 1.25rem 3rem !important;
    font-size: 1.25rem !important;
}

body .checkout-page .bg-green-600:hover {
    background-color: #15803d !important;
    transform: translateY(-2px) !important;
}

/* Back/Secondary Buttons */
body .checkout-page .text-gray-500 {
    color: #6b7280 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.75rem 1.5rem !important;
}

body .checkout-page .text-gray-500:hover {
    color: #1f2937 !important;
}

/* =======================
   WIZARD STEPS
   ======================= */
body .checkout-page .bg-gray-50 {
    background-color: #f9fafb !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 1.5rem !important;
}

/* Step Indicators */
body .checkout-page .w-12.h-12 {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

/* =======================
   GRID LAYOUTS
   ======================= */
body .checkout-page .grid {
    display: grid !important;
}

body .checkout-page .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

body .checkout-page .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (min-width: 768px) {
    body .checkout-page .md\\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body .checkout-page .md\\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

body .checkout-page .gap-4 {
    gap: 1rem !important;
}

body .checkout-page .gap-5 {
    gap: 1.25rem !important;
}

body .checkout-page .gap-6 {
    gap: 1.5rem !important;
}

/* =======================
   SPACING UTILITIES
   ======================= */
body .checkout-page .mb-1 {
    margin-bottom: 0.25rem !important;
}

body .checkout-page .mb-2 {
    margin-bottom: 0.5rem !important;
}

body .checkout-page .mb-3 {
    margin-bottom: 0.75rem !important;
}

body .checkout-page .mb-4 {
    margin-bottom: 1rem !important;
}

body .checkout-page .mb-6 {
    margin-bottom: 1.5rem !important;
}

body .checkout-page .mb-8 {
    margin-bottom: 2rem !important;
}

body .checkout-page .mb-10 {
    margin-bottom: 2.5rem !important;
}

body .checkout-page .mt-1 {
    margin-top: 0.25rem !important;
}

body .checkout-page .mt-3 {
    margin-top: 0.75rem !important;
}

body .checkout-page .mt-4 {
    margin-top: 1rem !important;
}

body .checkout-page .mt-6 {
    margin-top: 1.5rem !important;
}

body .checkout-page .mt-8 {
    margin-top: 2rem !important;
}

body .checkout-page .mt-10 {
    margin-top: 2.5rem !important;
}

body .checkout-page .pt-3 {
    padding-top: 0.75rem !important;
}

body .checkout-page .pt-4 {
    padding-top: 1rem !important;
}

body .checkout-page .pt-6 {
    padding-top: 1.5rem !important;
}

body .checkout-page .pt-10 {
    padding-top: 2.5rem !important;
}

body .checkout-page .pb-4 {
    padding-bottom: 1rem !important;
}

body .checkout-page .p-4 {
    padding: 1rem !important;
}

body .checkout-page .p-5 {
    padding: 1.25rem !important;
}

body .checkout-page .p-6 {
    padding: 1.5rem !important;
}

body .checkout-page .px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

body .checkout-page .px-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

body .checkout-page .px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

body .checkout-page .py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

body .checkout-page .py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

body .checkout-page .py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

body .checkout-page .py-5 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

@media (min-width: 768px) {
    body .checkout-page .md\\:p-6 {
        padding: 1.5rem !important;
    }

    body .checkout-page .md\\:p-8 {
        padding: 2rem !important;
    }

    body .checkout-page .md\\:p-10 {
        padding: 2.5rem !important;
    }
}

/* =======================
   TEXT UTILITIES
   ======================= */
body .checkout-page .text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
}

body .checkout-page .text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

body .checkout-page .text-base {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

body .checkout-page .text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
}

body .checkout-page .text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

body .checkout-page .text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
}

body .checkout-page .text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
}

body .checkout-page .font-normal {
    font-weight: 400 !important;
}

body .checkout-page .font-medium {
    font-weight: 500 !important;
}

body .checkout-page .font-semibold {
    font-weight: 600 !important;
}

body .checkout-page .font-bold {
    font-weight: 700 !important;
}

body .checkout-page .text-white {
    color: white !important;
}

body .checkout-page .text-gray-400 {
    color: #9ca3af !important;
}

body .checkout-page .text-gray-500 {
    color: #6b7280 !important;
}

body .checkout-page .text-gray-600 {
    color: #4b5563 !important;
}

body .checkout-page .text-gray-700 {
    color: #374151 !important;
}

body .checkout-page .text-gray-800 {
    color: #1f2937 !important;
}

body .checkout-page .text-gray-900 {
    color: #111827 !important;
}

body .checkout-page .text-blue-600 {
    color: #0066CC !important;
}

body .checkout-page .text-blue-700 {
    color: #003d7a !important;
}

body .checkout-page .text-red-500 {
    color: #ef4444 !important;
}

body .checkout-page .uppercase {
    text-transform: uppercase !important;
}

body .checkout-page .tracking-wide {
    letter-spacing: 0.025em !important;
}

body .checkout-page .tracking-wider {
    letter-spacing: 0.05em !important;
}

body .checkout-page .truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* =======================
   BORDER UTILITIES
   ======================= */
body .checkout-page .border {
    border-width: 1px !important;
}

body .checkout-page .border-2 {
    border-width: 2px !important;
}

body .checkout-page .border-t {
    border-top-width: 1px !important;
}

body .checkout-page .border-t-2 {
    border-top-width: 2px !important;
}

body .checkout-page .border-b {
    border-bottom-width: 1px !important;
}

body .checkout-page .border-gray-100 {
    border-color: #f3f4f6 !important;
}

body .checkout-page .border-gray-200 {
    border-color: #e5e7eb !important;
}

body .checkout-page .border-blue-100 {
    border-color: #dbeafe !important;
}

body .checkout-page .border-blue-200 {
    border-color: #bfdbfe !important;
}

body .checkout-page .border-blue-500 {
    border-color: #0066CC !important;
}

body .checkout-page .border-amber-200 {
    border-color: #fde68a !important;
}

body .checkout-page .border-dashed {
    border-style: dashed !important;
}

body .checkout-page .rounded-lg {
    border-radius: 0.5rem !important;
}

body .checkout-page .rounded-xl {
    border-radius: 0.75rem !important;
}

body .checkout-page .rounded-2xl {
    border-radius: 1rem !important;
}

body .checkout-page .rounded-full {
    border-radius: 9999px !important;
}

/* =======================
   BACKGROUND UTILITIES
   ======================= */
body .checkout-page .bg-white {
    background-color: white !important;
}

body .checkout-page .bg-gray-50 {
    background-color: #f9fafb !important;
}

body .checkout-page .bg-blue-50 {
    background-color: #eff6ff !important;
}

body .checkout-page .bg-blue-500 {
    background-color: #0066CC !important;
}

body .checkout-page .bg-amber-50 {
    background-color: #fffbeb !important;
}

/* =======================
   FLEX UTILITIES
   ======================= */
body .checkout-page .flex {
    display: flex !important;
}

body .checkout-page .inline-flex {
    display: inline-flex !important;
}

body .checkout-page .flex-col {
    flex-direction: column !important;
}

body .checkout-page .flex-wrap {
    flex-wrap: wrap !important;
}

body .checkout-page .items-start {
    align-items: flex-start !important;
}

body .checkout-page .items-center {
    align-items: center !important;
}

body .checkout-page .items-end {
    align-items: flex-end !important;
}

body .checkout-page .justify-start {
    justify-content: flex-start !important;
}

body .checkout-page .justify-end {
    justify-content: flex-end !important;
}

body .checkout-page .justify-between {
    justify-content: space-between !important;
}

body .checkout-page .gap-2 {
    gap: 0.5rem !important;
}

body .checkout-page .gap-3 {
    gap: 0.75rem !important;
}

body .checkout-page .gap-4 {
    gap: 1rem !important;
}

body .checkout-page .flex-1 {
    flex: 1 1 0% !important;
}

body .checkout-page .flex-shrink-0 {
    flex-shrink: 0 !important;
}

/* =======================
   SHADOW UTILITIES
   ======================= */
body .checkout-page .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

body .checkout-page .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

body .checkout-page .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* =======================
   POSITION & DISPLAY
   ======================= */
body .checkout-page .relative {
    position: relative !important;
}

body .checkout-page .absolute {
    position: absolute !important;
}

body .checkout-page .block {
    display: block !important;
}

body .checkout-page .hidden {
    display: none !important;
}

@media (min-width: 640px) {
    body .checkout-page .sm\\:block {
        display: block !important;
    }
}

@media (min-width: 768px) {
    body .checkout-page .md\\:col-span-2 {
        grid-column: span 2 / span 2 !important;
    }
}

/* =======================
   CHECKBOX & RADIO
   ======================= */
body .checkout-page input[type="checkbox"],
body .checkout-page input[type="radio"] {
    width: 1.5rem !important;
    height: 1.5rem !important;
    border-radius: 0.25rem !important;
    border: 1px solid #d1d5db !important;
    color: #0066CC !important;
    cursor: pointer !important;
}

body .checkout-page input[type="radio"] {
    border-radius: 50% !important;
}

body .checkout-page input[type="checkbox"]:focus,
body .checkout-page input[type="radio"]:focus {
    ring: 2px !important;
    ring-color: #0066CC !important;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2) !important;
}

/* =======================
   ENSURE CHECKOUT IS ABOVE EVERYTHING
   ======================= */
body:has(.checkout-page) footer {
    z-index: 50 !important;
}

body:has(.checkout-page) header,
body:has(.checkout-page) nav,
body:has(.checkout-page) .header,
body:has(.checkout-page) .main-header {
    z-index: 90 !important;
}

/* Keep modals/datepickers above checkout */
.modal,
.daterangepicker,
.select2-dropdown,
[role="dialog"] {
    z-index: 10000 !important;
}