/* Responsive helper rules for Fast and Fun Class Booking
   Adds classes: .ffl-option-mobile, .ffl-price-mobile, .ffl-savings-mobile
   Only adds supplemental styles for screens < 768px to improve legibility and touch targets.
*/

/* Make modal wider on larger screens so the option grid fits comfortably */
.ffl-modal-content {
    max-width: 1024px; /* updated from 900px to 1024px for large screens */
    width: 100%;
    /* Slightly larger padding and improved line-height for desktop */
    padding: 2.5rem; /* override default to give more breathing room */
    font-size: 1rem;
    line-height: 1.45;
    max-height: 85vh; /* ensure modal doesn't exceed viewport */
    box-sizing: border-box;
}

/* Tablet breakpoint: ensure modal is a bit narrower on tablets */
@media (max-width: 1024px) {
    .ffl-modal-content {
        max-width: 840px; /* tablet-optimized modal width */
    }
}

/* Improve vertical centering and peripheral spacing of the modal container */
.ffl-modal {
    align-items: center !important; /* ensure vertical centering */
    padding: 1.5rem !important; /* more space around the modal */
}

/* Smooth entry animation for the modal content */
.ffl-modal-content {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: center top;
    transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease-in-out;
}

.ffl-modal.active .ffl-modal-content {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Header/title tweaks for better hierarchy */
.ffl-modal-title {
    font-size: 1.5rem !important; /* Título claro y legible */
    line-height: 1.25;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.ffl-modal-header {
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

/* Ensure content body text is comfortable to read on desktop */
.ffl-modal-body {
    font-size: 1rem;
    color: inherit;
    line-height: 1.5;
}

/* Ensure modal uses nearly full width on small screens for better fit */
@media (max-width: 767px) {
    .ffl-modal-content {
        max-width: 95% !important;
        width: 95% !important;
        padding: 1.25rem 1rem !important; /* Mejor padding para legibilidad */
    }

    /* Modal title - legible pero no excesivo */
    .ffl-modal-title {
        font-size: 1.35rem !important;
        line-height: 1.3;
        padding-right: 2.5rem; /* Espacio para botón cerrar */
    }

    /* Modal close button - touch target mínimo 44px */
    .ffl-modal-close {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.25rem !important;
    }

    /* Container for each option — gives extra padding/touch area */
    .ffl-option-mobile {
        display: inline-block;
        width: 100%;
        padding: 12px 14px; /* Mejor padding */
        box-sizing: border-box;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    /* Price spans — increase font-size and ensure they wrap on small screens */
    .ffl-price-mobile {
        font-size: 1.125rem !important; /* 18px - precio destacado */
        font-weight: 700;
        display: block;
        margin-top: 6px;
        white-space: normal;
        line-height: 1.3;
    }

    /* Savings spans — same size as price, visible and on its own line */
    .ffl-savings-mobile {
        font-size: 1rem !important; /* 16px */
        font-weight: 700 !important;
        display: block;
        margin-top: 4px;
    }

    /* Make primary buttons easier to tap - mínimo 48px altura */
    .ffl-btn.ffl-btn-primary {
        padding: 14px 20px !important;
        font-size: 1rem !important;
        width: 100%;
        box-sizing: border-box;
        min-height: 48px !important;
    }

    .ffl-booking-option {
        padding: 12px 14px !important; /* Mejor padding */
        gap: 12px !important;
        min-height: 72px !important; /* Touch target mínimo */
        align-items: center !important;
    }

    .ffl-option-image {
        width: 64px !important;
        height: 64px !important;
        flex: 0 0 64px !important;
        border-radius: 8px !important;
    }

    /* Plan title: slightly larger, heavier, tighter line-height for scanability */
    .ffl-option-row.ffl-option-row-1,
    .ffl-option-title {
        font-size: 1.0625rem !important; /* 17px - claro y legible */
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    /* Discounted / current price: more prominent but compact */
    .ffl-current-price,
    .ffl-option-price .ffl-current-price,
    .ffl-precio-oferta {
        font-size: 1.125rem !important; /* 18px */
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    /* Price each line styling */
    .ffl-price-each {
        font-size: 1rem !important; /* 16px */
        font-weight: 700 !important;
        display: block !important;
        margin-top: 2px !important;
        color: #10b981 !important;
    }

    /* "You Save" pill: more legible without taking extra height */
    .ffl-option-col.col-3 .ffl-option-row-1 {
        font-size: 0.9375rem !important; /* 15px */
        font-weight: 700 !important;
        line-height: 1.15 !important;
        padding: 5px 10px !important;
    }

    /* Sub-info / description: mínimo 14px para legibilidad */
    .ffl-option-description {
        font-size: 0.875rem !important; /* 14px mínimo */
        line-height: 1.35 !important;
        margin-top: 0.25rem !important;
        max-height: 2.7em; /* ~2 líneas */
        overflow: hidden;
    }

    /* Tighten the option-grid spacing so content uses horizontal space better */
    .ffl-option-grid { gap: 10px !important; }
    .ffl-option-grid .ffl-option-col { padding: 0 8px !important; }

    /* When option is selected keep compact highlight */
    .ffl-booking-option.ffl-option-selected { transform: translateY(-2px); }

    /* Form labels - mínimo 14px */
    .ffl-form-group label {
        font-size: 0.9375rem !important; /* 15px */
        font-weight: 500;
        margin-bottom: 0.5rem;
    }

    /* Form inputs - 16px para evitar zoom iOS */
    .ffl-form-group input,
    .ffl-form-group textarea {
        font-size: 1rem !important; /* 16px - evita zoom iOS */
        padding: 0.875rem 1rem !important;
        min-height: 48px !important;
    }
}

/* Ensure booking option uses a flexible row layout so image appears on the left and text on the right */
.ffl-booking-option {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    box-sizing: border-box;
    position: relative; /* for radio button positioning */
}

/* Radio button symbols for selection indication */
.ffl-booking-option::before {
    content: '○';
    position: absolute;
    top: 10px;
    right: 15px;
    color: var(--ffl-primary-color);
    font-size: 1.2rem;
    font-weight: bold;
}

.ffl-booking-option.ffl-option-selected::before {
    content: '●';
}

.ffl-booking-option.ffl-option-selected::after {
    content: none; /* remove the default checkmark */
}

/* Bold for Multi-student section */
.ffl-option-col.col-2 .ffl-option-row-1 {
    font-weight: bold;
}

/* Blue color for "You Save" text in desktop grid */
.ffl-option-col.col-3 .ffl-option-row-1 {
    color: #007bff;
}

/* Image sizing inside an option */
.ffl-booking-option .ffl-option-image {
    width: 96px;
    height: 96px;
    object-fit: cover;
    flex: 0 0 96px;
    border-radius: 6px;
}

/* Main content should take remaining space */
.ffl-booking-option .ffl-option-main {
    flex: 1 1 auto;
    min-width: 0; /* allow text-overflow inside flex */
    padding-right: 2rem; /* space for radio button */
}

/* Prevent the first-row (name + price) from wrapping into multiple lines */
.ffl-option-row.ffl-option-row-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Prevent the second-row (Reduced Price) from wrapping */
.ffl-option-row.ffl-option-row-2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On very small screens keep image smaller and adjust font so first row can stay on one line */
@media (max-width: 420px) {
    .ffl-booking-option {
        flex-direction: row; /* keep row layout */
        align-items: flex-start;
    }
    .ffl-booking-option .ffl-option-image {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
    }
    .ffl-option-row.ffl-option-row-1 {
        white-space: nowrap; /* keep no-wrap */
        font-size: 0.9rem; /* slightly smaller to fit */
    }
}

/* Keep existing mobile adjustments (repeat to ensure specificity) */
@media (max-width: 767px) {
    .ffl-booking-option {
        gap: 10px;
    }
    .ffl-booking-option .ffl-option-image {
        width: 80px;
        height: 80px;
        flex: 0 0 80px;
    }
}

/* Original price style (strike-through, red) moved from inline styles to CSS class */
.ffl-original-price {
    text-decoration: line-through;
    color: #c00; /* red */
}

/* Justify level descriptions and limit to 3 lines with read more effect */
.ffl-class-description {
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    cursor: pointer; /* indicate clickable */
}

.ffl-class-description::after {
    content: '... read more';
    position: absolute;
    bottom: 0;
    right: 0;
    background: white;
    padding-left: 5px;
    color: var(--ffl-primary-color);
}

.ffl-class-description.expanded {
    -webkit-line-clamp: none;
}

.ffl-class-description.expanded::after {
    content: 'read less';
}

/* Ensure modal content remains comfortably readable on small screens */
@media (max-width: 420px) {
    .ffl-modal-content {
        padding: 1rem 0.75rem !important;
    }
    .ffl-modal-title {
        font-size: 1.2rem !important; /* Compacto pero legible */
        line-height: 1.25;
    }
    .ffl-modal-header {
        padding-bottom: 0.625rem;
        margin-bottom: 0.875rem;
    }
    /* Form labels - mínimo 14px */
    .ffl-form-group label {
        font-size: 0.875rem !important; /* 14px mínimo */
        font-weight: 600 !important; /* Más peso para compensar tamaño */
    }
    /* Inputs - NUNCA menos de 16px */
    .ffl-form-group input,
    .ffl-form-group textarea {
        font-size: 1rem !important; /* 16px - evita zoom iOS */
        padding: 0.75rem !important;
        min-height: 48px !important;
    }
    /* Botones con touch target adecuado */
    .ffl-btn {
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9375rem !important; /* 15px */
    }
    .ffl-btn.ffl-btn-primary {
        min-height: 48px !important;
        font-size: 1rem !important;
    }
    /* Títulos de opciones */
    .ffl-options-title {
        font-size: 1rem !important;
        font-weight: 600;
    }
    /* Availability info */
    .ffl-availability-info {
        font-size: 1.25rem !important;
        padding: 0.625rem !important;
    }
}

/* ==========================================================================
   NEW RESPONSIVE CLASSES FOR BOOKING OPTIONS (added 2026-01-04)
   Classes: .ffl-option-mobile, .ffl-price-mobile, .ffl-savings-mobile
   Purpose: Improve legibility and touch targets on mobile devices (<768px)
   ========================================================================== */

/* Base styles for new mobile classes (applied at all breakpoints) */
.ffl-option-mobile {
    /* Container for each booking option - base styling */
    box-sizing: border-box;
}

.ffl-price-mobile {
    /* Price display - base styling */
    font-weight: 700;
    font-size: 1.2rem;
    white-space: normal;
}

.ffl-savings-mobile {
    /* Savings badge - base styling */
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
}

/* Mobile-specific enhancements (screens < 768px) */
@media (max-width: 767px) {
    /* Option container: extra padding and touch-friendly sizing */
    .ffl-option-mobile {
        display: flex;
        width: 100%;
        padding: 12px 14px;
        min-height: 80px;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        touch-action: manipulation;
    }

    /* Price: larger font, block display for better line breaks */
    .ffl-price-mobile {
        font-size: 1.2rem !important;
        font-weight: 700;
        display: block;
        margin-top: 4px;
        line-height: 1.3;
    }

    /* Savings: visible color, own line, same size as price */
    .ffl-savings-mobile {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        display: block;
        margin-top: 6px;
        padding: 4px 8px;
        background: #2563eb;
        border-radius: 4px;
    }

    /* Price each line styling */
    .ffl-price-each {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        display: block;
        margin-top: 2px;
    }

    /* Ensure pricebox stacks vertically on mobile */
    .ffl-option-pricebox {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Improve button touch targets */
    .ffl-option-mobile .ffl-btn,
    .ffl-options-actions .ffl-btn {
        min-height: 48px;
        padding: 14px 20px !important;
        font-size: 1.05rem !important;
    }
}

/* Extra small screens (<480px) - further optimizations */
@media (max-width: 479px) {
    .ffl-option-mobile {
        padding: 12px 10px;
        flex-direction: row;
        gap: 10px;
    }

    .ffl-price-mobile {
        font-size: 1.0625rem !important; /* 17px */
        font-weight: 700;
        line-height: 1.3;
    }

    .ffl-savings-mobile {
        font-size: 0.9375rem !important; /* 15px */
        font-weight: 700;
        padding: 4px 8px;
    }

    .ffl-price-each {
        font-size: 1rem !important; /* 16px */
        font-weight: 700;
    }

    /* Stack option content better */
    .ffl-option-mobile .ffl-option-main {
        min-width: 0;
        flex: 1;
    }

    .ffl-option-mobile .ffl-option-title {
        font-size: 1rem !important; /* 16px mínimo para título */
        font-weight: 700;
        line-height: 1.25;
    }

    .ffl-option-mobile .ffl-option-description {
        font-size: 0.875rem !important; /* 14px mínimo */
        line-height: 1.35;
    }

    /* Booking option cards con touch targets adecuados */
    .ffl-booking-option {
        padding: 12px !important;
        min-height: 68px !important;
        gap: 10px !important;
    }

    .ffl-booking-option .ffl-option-image {
        width: 52px !important;
        height: 52px !important;
        flex: 0 0 52px !important;
    }

    .ffl-option-title {
        font-size: 1rem !important;
        line-height: 1.25;
    }

    .ffl-current-price {
        font-size: 1.0625rem !important; /* 17px */
    }

    .ffl-original-price {
        font-size: 0.875rem !important; /* 14px */
    }

    .ffl-oferta-badge {
        font-size: 0.8125rem !important; /* 13px */
        padding: 3px 8px !important;
    }
}

/* ==========================================================================
   READ MORE BUTTON STYLES FOR MOBILE
   ========================================================================== */

/* Extra small screens - make button full width */
@media (max-width: 479px) {
    .ffl-read-more-link {
        display: block !important;
        width: 100%;
        text-align: center;
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* Small mobile screens */
@media (min-width: 480px) and (max-width: 768px) {
    .ffl-read-more-link {
        display: inline-block !important;
        min-width: 120px;
        text-align: center;
    }
}