/**
 * Citation Details & Payment Page - Mobile Optimizations
 * File: citation-details-mobile.css
 * Priority: CRITICAL - Phase 1 fixes for WCAG 2.1 Level AA compliance
 *
 * DOC-CHANGE: 2025-10-19 - Claude - Phase 1 critical accessibility fixes
 *
 * FIXES:
 * 1. Touch target sizes (44px minimum, 56px for primary CTAs)
 * 2. Text size minimum (14px)
 * 3. Typography hierarchy
 * 4. Form field heights
 * 5. Button visibility and contrast
 */

/* ============================================
   CRITICAL FIX #1: Touch Target Sizes
   Target: Citation Details & Payment Pages
   WCAG: 2.5.5 Target Size (Level AAA, Best Practice)
   ============================================ */

@media (max-width: 768px) {

    /* PRIMARY CTA - Continue to Payment Button */
    /* Issue: Was 42px, needs to be 56px minimum */
    .tpp-btn-primary.tpp-btn-large,
    button.tpp-btn-primary.tpp-btn-large,
    .tpp-button-group .tpp-btn-primary,
    button[onclick*="tppProceedToPayment"],
    button[onclick*="tppSubmitPayment"],
    #tpp-submit-payment {
        min-height: 56px !important;
        padding: 16px 28px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
    }

    /* Secondary Buttons - Go Back, Back to Review */
    .tpp-btn-secondary.tpp-btn-large,
    button.tpp-btn-secondary.tpp-btn-large,
    .tpp-button-group .tpp-btn-secondary,
    button[onclick*="tppBackToLookup"],
    button[onclick*="tppBackToReview"] {
        min-height: 48px !important;
        padding: 12px 24px !important;
        font-size: 16px !important;
    }

    /* FAQ Accordion Triggers */
    .tpp-faq-question,
    .tpp-faq-item button,
    button.tpp-faq-question {
        min-height: 56px !important;
        padding: 16px 20px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        font-size: 16px !important;
    }

    /* FAQ Trigger Button (Floating) */
    .tpp-faq-trigger,
    button.tpp-faq-trigger {
        min-height: 56px !important;
        min-width: 56px !important;
        padding: 16px 24px !important;
        font-size: 16px !important;
    }

    /* Contact Method Links/Buttons */
    .tpp-contact-method,
    .tpp-faq-contact-method,
    a.tpp-contact-method,
    a.tpp-faq-contact-method,
    .tpp-contact-methods a,
    .tpp-contact-card a {
        min-height: 48px !important;
        padding: 14px 16px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        text-decoration: none !important;
    }

    /* Navigation Links */
    .tpp-nav-link,
    .tpp-navigation a,
    nav a {
        min-height: 48px !important;
        padding: 12px 20px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Modal Close Button */
    .tpp-modal-close,
    span.tpp-modal-close {
        min-height: 48px !important;
        min-width: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 32px !important;
        line-height: 1 !important;
    }

    /* Action Panel Buttons */
    .tpp-action-panel .tpp-btn,
    .tpp-button-group button,
    .tpp-receipt-actions button {
        min-height: 56px !important;
        padding: 16px 24px !important;
        width: 100% !important;
        margin: 8px 0 !important;
    }

}

/* ============================================
   CRITICAL FIX #2: Text Size Minimum
   Target: All text elements
   WCAG: 1.4.4 Resize Text
   ============================================ */

@media (max-width: 768px) {

    /* Enforce minimum text sizes */
    body,
    .tpp-container {
        font-size: 16px !important;
    }

    /* Small text elements - MINIMUM 14px */
    /* Comprehensive list of all small text selectors */
    small,
    .small,
    .small-text,
    .text-small,
    .tpp-citation-date,
    .tpp-citation-time,
    .tpp-fine-amount-label,
    .tpp-detail-label,
    .tpp-community-name,
    .tpp-speed-limit,
    .tpp-citation-badge,
    .tpp-input-hint,
    .tpp-help-text,
    .tpp-hint,
    .description,
    .tpp-card-description,
    .tpp-tagline,
    .tpp-contact-label,
    .tpp-progress-step span,
    .tpp-security-badge span,
    .tpp-security-message,
    .tpp-secure-logos,
    .tpp-secure-logos span,
    .tpp-header-info,
    .tpp-header-info *,
    .tpp-nav-link,
    .tpp-nav-link * {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Body text and labels */
    p,
    span,
    div,
    label {
        font-size: 16px !important;
    }

    /* Form inputs - 16px prevents iOS zoom */
    input,
    select,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"] {
        font-size: 16px !important;
    }

    /* Links */
    a {
        font-size: 16px !important;
    }

    /* Buttons */
    button,
    .tpp-btn {
        font-size: 16px !important;
    }

}

/* ============================================
   CRITICAL FIX #3: Form Field Heights
   Target: Payment page form fields
   WCAG: 2.5.5 Target Size
   ============================================ */

@media (max-width: 768px) {

    /* All form fields */
    .tpp-form-group input,
    .tpp-form-group select,
    .tpp-form-group textarea,
    .tpp-form-group.modern input,
    input#citation_number,
    input#email,
    input#phone,
    input#cardholder_name {
        min-height: 56px !important;
        padding: 16px 18px !important;
        font-size: 16px !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 8px !important;
        width: 100% !important;
    }

    /* Stripe card element */
    #card-element,
    .tpp-stripe-element,
    .StripeElement,
    .card-element {
        min-height: 56px !important;
        padding: 16px 18px !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 8px !important;
    }

    /* Focus states for form fields */
    .tpp-form-group input:focus,
    .tpp-form-group select:focus,
    .tpp-form-group textarea:focus,
    #card-element:focus,
    .tpp-stripe-element:focus {
        border-color: #2563eb !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    }

    /* Labels */
    .tpp-form-group label,
    .tpp-form-group.modern label {
        font-size: 16px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        display: block !important;
        color: #1e293b !important;
    }

}

/* ============================================
   ENHANCEMENT #4: Improved Button Spacing
   Target: Citation details action panel
   ============================================ */

@media (max-width: 768px) {

    /* Button group layout */
    .tpp-button-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .tpp-button-group .tpp-btn {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Action panel spacing */
    .tpp-action-panel {
        padding: 20px !important;
        margin-top: 24px !important;
    }

}

/* ============================================
   ENHANCEMENT #5: Focus States
   Target: All interactive elements
   WCAG: 2.1.1 Keyboard, 2.4.7 Focus Visible
   ============================================ */

@media (max-width: 768px) {

    /* Enhanced focus states */
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    .tpp-btn:focus,
    .tpp-nav-link:focus,
    .tpp-contact-method:focus,
    .tpp-faq-question:focus {
        outline: 3px solid #2563eb !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
    }

    /* High contrast focus for primary buttons */
    .tpp-btn-primary:focus {
        outline-color: #ffffff !important;
        outline-width: 3px !important;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3) !important;
    }

}

/* ============================================
   ENHANCEMENT #6: Touch Feedback
   Target: All interactive elements
   ============================================ */

@media (max-width: 768px) {

    /* Smooth transitions */
    button,
    a.tpp-btn,
    .tpp-btn,
    .tpp-nav-link,
    .tpp-contact-method,
    .tpp-faq-question {
        transition: all 0.2s ease !important;
    }

    /* Touch feedback (active state) */
    button:active,
    a.tpp-btn:active,
    .tpp-btn:active {
        transform: scale(0.98) !important;
    }

}

/* ============================================
   ENHANCEMENT #7: Citation Details Card
   Target: Citation preview on review step
   ============================================ */

@media (max-width: 768px) {

    /* Citation card spacing */
    .tpp-citation-card,
    .tpp-citation-preview {
        padding: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Citation grid - stack items */
    .tpp-citation-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Detail items */
    .tpp-detail-item {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 12px !important;
        background: #f8fafc !important;
        border-radius: 8px !important;
    }

    .tpp-detail-label {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .tpp-detail-value {
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #0f172a !important;
    }

}

/* ============================================
   ENHANCEMENT #8: Amount Display
   Target: Fine amounts and totals
   ============================================ */

@media (max-width: 768px) {

    /* Amount displays - make prominent */
    .tpp-amount-display,
    .tpp-fine-value,
    .tpp-total-amount,
    .tpp-amount-total,
    #tpp-total-amount,
    #tpp-fine-amount {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #2563eb !important;
        line-height: 1.2 !important;
    }

    /* Fine section */
    .tpp-fine-section {
        background: #f8fafc !important;
        padding: 20px !important;
        border-radius: 12px !important;
        margin-top: 16px !important;
    }

    /* Summary card amounts */
    .tpp-summary-line {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 0 !important;
        font-size: 16px !important;
    }

    .tpp-summary-line.tpp-total {
        border-top: 2px solid #e2e8f0 !important;
        margin-top: 8px !important;
        padding-top: 16px !important;
        font-weight: 700 !important;
        font-size: 18px !important;
    }

}

/* ============================================
   ENHANCEMENT #9: Payment Page Layout
   Target: Payment form and sidebar
   ============================================ */

@media (max-width: 768px) {

    /* Payment layout - stack vertically */
    .tpp-payment-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* Payment sections */
    .tpp-payment-main,
    .tpp-payment-sidebar {
        width: 100% !important;
    }

    /* Form sections */
    .tpp-form-section {
        margin-bottom: 24px !important;
    }

    .tpp-form-section h4 {
        font-size: 18px !important;
        font-weight: 600 !important;
        margin-bottom: 16px !important;
        color: #0f172a !important;
    }

    /* Form rows */
    .tpp-form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

}

/* ============================================
   ENHANCEMENT #10: Modal Improvements
   Target: FAQ and error modals
   ============================================ */

@media (max-width: 768px) {

    /* Modal content */
    .tpp-modal-content {
        width: 95% !important;
        max-width: 500px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        padding: 24px !important;
        margin: 5vh auto !important;
    }

    /* Modal header */
    .tpp-modal-header h2 {
        font-size: 24px !important;
        font-weight: 700 !important;
        margin: 16px 0 8px 0 !important;
    }

    .tpp-modal-header p {
        font-size: 16px !important;
        color: #64748b !important;
    }

    /* FAQ list */
    .tpp-faq-list {
        margin-top: 24px !important;
    }

    .tpp-faq-item {
        margin-bottom: 12px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    /* FAQ answer */
    .tpp-faq-answer {
        padding: 16px 20px !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .tpp-faq-answer p {
        margin-bottom: 12px !important;
        font-size: 16px !important;
    }

    .tpp-faq-answer li {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

}

/* ============================================
   FOR VERY SMALL SCREENS (iPhone SE, etc.)
   ============================================ */

@media (max-width: 375px) {

    /* Adjust button padding for smallest screens */
    .tpp-btn-primary.tpp-btn-large,
    button.tpp-btn-primary.tpp-btn-large {
        padding: 16px 20px !important;
        font-size: 17px !important;
    }

    /* Adjust card padding */
    .tpp-card {
        padding: 16px !important;
    }

    /* Adjust amount display */
    .tpp-amount-display,
    .tpp-fine-value,
    .tpp-total-amount {
        font-size: 22px !important;
    }

}

/* ============================================
   DESKTOP HOVER STATES (769px+)
   Ensure smooth interactions on larger screens
   ============================================ */

@media (min-width: 769px) {

    /* Desktop hover effects */
    .tpp-btn:hover,
    button:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    .tpp-contact-method:hover,
    .tpp-nav-link:hover {
        background: #f1f5f9 !important;
        transform: translateX(2px) !important;
    }

}