@charset "UTF-8";

/**
 * Modern Checkout Page Styles
 * 
 * Purpose: Checkout flow specific components
 * Dependencies: variables.css, forms.modern.css
 * 
 * Components:
 * - Checkout steps (.checkout-steps)
 * - Billing form (.checkout-form)
 * - Order summary (.order-summary)
 * - Payment methods
 * - Trust badges
 * 
 * Mobile-First: Base styles for 375px viewport
 * Breakpoints: sm(576px), md(768px), lg(1024px)
 * 
 * @charset UTF-8
 * @version 1.0.0
 * @date 2026-01-21
 */


/* ============================================================
   CHECKOUT LAYOUT - Mobile-First
   ============================================================ */

/* TODO: Implement .checkout-page
   - Display: flex column (mobile)
   - Display: grid (desktop)
   - Grid columns: 1.5fr 1fr (desktop - form | summary)
   - Gap: 32px
   - Padding: 20px 0
*/


/* ============================================================
   CHECKOUT STEPS INDICATOR
   ============================================================ */

/* TODO: Implement .checkout-steps
   - Display: flex
   - Justify content: space-between
   - Margin bottom: 32px
   - Position: relative
*/

/* TODO: Implement .checkout-steps::before (connecting line)
   - Position: absolute
   - Top: 20px
   - Left: 0
   - Right: 0
   - Height: 2px
   - Background: gray-200
   - Z-index: 0
*/

/* TODO: Implement .checkout-step
   - Display: flex column
   - Align items: center
   - Gap: 8px
   - Position: relative
   - Z-index: 1
   - Flex: 1
*/

/* TODO: Implement .checkout-step__circle
   - Width/height: 40px
   - Border radius: full
   - Background: white
   - Border: 2px solid gray-200
   - Display: flex center
   - Font weight: semibold
   - Color: gray-400
   - Transition: all 200ms
*/

/* TODO: Implement .checkout-step--active .checkout-step__circle
   - Border color: primary
   - Color: primary
   - Background: primary-light
*/

/* TODO: Implement .checkout-step--completed .checkout-step__circle
   - Border color: success
   - Background: success
   - Color: white
   - Checkmark icon instead of number
*/

/* TODO: Implement .checkout-step__label
   - Font size: 12px (mobile), 14px (desktop)
   - Color: text-secondary
   - Text align: center
*/


/* ============================================================
   CHECKOUT FORM
   ============================================================ */

/* TODO: Implement .checkout-form
   - Background: white
   - Border: 1px solid gray-100
   - Border radius: 12px
   - Padding: 24px
*/

/* TODO: Implement .checkout-form__section
   - Padding: 24px 0
   - Border bottom: 1px solid gray-100 (last: none)
*/

/* TODO: Implement .checkout-form__section-title
   - Font size: 18px
   - Font weight: semibold
   - Margin bottom: 20px
*/


/* ============================================================
   SHIPPING/BILLING ADDRESS FORMS
   ============================================================ */

/* TODO: Implement .address-form
   - Display: flex column
   - Gap: 16px
*/

/* TODO: Implement .address-form__row
   - Display: grid
   - Grid columns: 1fr (mobile)
   - Grid columns: 1fr 1fr (desktop)
   - Gap: 16px
*/


/* ============================================================
   PAYMENT METHODS
   ============================================================ */

/* TODO: Implement .payment-methods
   - Display: flex column
   - Gap: 12px
*/

/* TODO: Implement .payment-method
   - Display: flex
   - Align items: center
   - Padding: 16px
   - Border: 2px solid gray-200
   - Border radius: 12px
   - Cursor: pointer
   - Transition: all 200ms
   - Position: relative
*/

/* TODO: Implement .payment-method--selected
   - Border color: primary
   - Background: primary-light
*/

/* TODO: Implement .payment-method__radio
   - Custom radio button
   - Margin right: 12px
*/

/* TODO: Implement .payment-method__icon
   - Width: 40px
   - Height: auto
   - Margin right: 12px
*/

/* TODO: Implement .payment-method__label
   - Flex: 1
   - Font weight: medium
*/

/* TODO: Implement .payment-method__details
   - Display: none
   - Padding: 16px
   - Background: gray-50
   - Border radius: 8px
   - Margin top: 12px
*/

/* TODO: Implement .payment-method--selected .payment-method__details
   - Display: block
*/


/* ============================================================
   ORDER SUMMARY
   ============================================================ */

/* TODO: Implement .order-summary
   - Background: white
   - Border: 1px solid gray-100
   - Border radius: 12px
   - Padding: 24px
   - Position: sticky (desktop)
   - Top: 100px
   - Height: fit-content
*/

/* TODO: Implement .order-summary__title
   - Font size: 18px
   - Font weight: semibold
   - Margin bottom: 20px
   - Padding bottom: 16px
   - Border bottom: 1px solid gray-100
*/

/* TODO: Implement .order-summary__items
   - Display: flex column
   - Gap: 16px
   - Margin bottom: 20px
*/

/* TODO: Implement .order-summary__item
   - Display: flex
   - Gap: 12px
*/

/* TODO: Implement .order-summary__item-image
   - Width: 60px
   - Height: 60px
   - Border radius: 8px
   - Object fit: cover
*/

/* TODO: Implement .order-summary__item-details
   - Flex: 1
*/

/* TODO: Implement .order-summary__item-name
   - Font size: 14px
   - Line clamp: 2
*/

/* TODO: Implement .order-summary__item-quantity
   - Font size: 12px
   - Color: text-secondary
*/

/* TODO: Implement .order-summary__item-price
   - Font size: 14px
   - Font weight: semibold
*/


/* ============================================================
   PRICE BREAKDOWN
   ============================================================ */

/* TODO: Implement .price-breakdown
   - Display: flex column
   - Gap: 12px
   - Padding: 16px 0
   - Border top: 1px solid gray-100
*/

/* TODO: Implement .price-breakdown__row
   - Display: flex
   - Justify content: space-between
   - Font size: 14px
*/

/* TODO: Implement .price-breakdown__row--total
   - Font size: 18px
   - Font weight: bold
   - Padding top: 12px
   - Border top: 1px solid gray-100
   - Margin top: 4px
*/


/* ============================================================
   PLACE ORDER BUTTON
   ============================================================ */

/* TODO: Implement .checkout__submit-btn
   - Width: 100%
   - Button primary large
   - Height: 56px
   - Font size: 16px
   - Margin top: 20px
*/

/* TODO: Implement .checkout__submit-btn--loading
   - Spinner icon
   - Disabled state
*/


/* ============================================================
   TRUST BADGES
   ============================================================ */

/* TODO: Implement .checkout-trust
   - Display: flex
   - Justify content: center
   - Align items: center
   - Gap: 16px
   - Padding: 20px
   - Background: gray-50
   - Border radius: 8px
   - Margin top: 24px
*/

/* TODO: Implement .checkout-trust__item
   - Display: flex column
   - Align items: center
   - Gap: 4px
   - Font size: 12px
   - Color: text-secondary
*/

/* TODO: Implement .checkout-trust__icon
   - Width/height: 24px
   - Color: success
*/


/* ============================================================
   RESPONSIVE - TABLET (768px+)
   ============================================================ */

@media (min-width: 768px) {
    /* TODO: Tablet adjustments
       - 2-column form rows
       - Side-by-side layout begins
    */
}


/* ============================================================
   RESPONSIVE - DESKTOP (1024px+)
   ============================================================ */

@media (min-width: 1024px) {
    /* TODO: Desktop optimizations
       - 2-column grid layout
       - Sticky order summary
       - Wider form inputs
    */
}


/* ============================================================
   NOTES
   ============================================================ */

/**
 * AJAX Dependencies (From ajax-dependencies.md):
 * 
 * Form Submission:
 * - Form ID: #checkout-form
 * - Endpoint: /checkout/process
 * - Validation: client-side + server-side
 * - Loading state on submit button
 * - Toastr for errors
 * 
 * Shipping Calculator:
 * - Trigger: Area/city selection change
 * - Endpoint: /checkout/calculate-shipping
 * - Updates: Shipping cost in summary
 * 
 * Payment Gateway:
 * - Integration: SSLCommerz, bKash, etc.
 * - Data attributes for gateway selection
 * - Redirect handling
 * 
 * Validation:
 * - Real-time field validation
 * - Required field indicators
 * - Error messages below fields
 * - Form-level validation
 * 
 * Integration Points (CRITICAL):
 * - Preserve ALL form field names
 * - Keep CSRF token
 * - Maintain payment gateway integration
 * - Don't break order processing logic
 * 
 * Mobile Optimization:
 * - 16px font inputs (prevent iOS zoom)
 * - Proper input types (tel, email)
 * - Sticky submit button (optional)
 * - Auto-advance between fields
 * 
 * SEO:
 * - No index for checkout page
 * - Secure checkout badge
 * - SSL certificate indicator
 * 
 * Performance:
 * - Lazy load order summary
 * - Debounce shipping calculation
 * - Optimistic UI updates
 * - Loading states
 */