/* ================================================================
   MASAHA STORAGE — Responsive Styles
   File: assets/css/responsive.css
   Version: 2.0.0
   
   Mobile-first responsive overrides for every component.
   Breakpoints:
     Large Desktop : > 1200px (minor tweaks)
     Desktop→Tablet: ≤ 992px  (sidebar collapses, grids reflow)
     Tablet→Mobile : ≤ 768px  (single column, reduced sizing)
     Small Mobile  : ≤ 576px  (compact everything)
   
   Plus: touch targets, high contrast, print.
   ================================================================ */

/* ================================================================
   1. LARGE DESKTOP (> 1200px)
   ================================================================ */
@media (min-width: 1201px) {
    .masaha-booking-container {
        max-width: var(--m-container-xl);
        padding-left: var(--m-sp-8);
        padding-right: var(--m-sp-8);
    }

    .masaha-storage-card__image {
        min-height: 200px;
    }

    .masaha-storage-card__image img {
        max-height: 170px;
    }
}

/* ================================================================
   2. DESKTOP → TABLET  (≤ 992px)
   ================================================================ */
@media (max-width: 992px) {

    /* -- Layout: sidebar moves below steps -- */
    .masaha-content-wrapper {
        grid-template-columns: 1fr;
        gap: var(--m-sp-6);
    }

    .masaha-summary-sidebar {
        position: static;
        max-height: none;
        order: -1;
    }

    .masaha-summary-card {
        /* Horizontal compact mode on tablet */
    }

    /* -- Progress tracker: smaller -- */
    .masaha-progress-tracker {
        padding: var(--m-sp-4) var(--m-sp-5);
    }

    .masaha-step-icon {
        width: 40px;
        height: 40px;
        font-size: var(--m-text-sm);
    }

    .masaha-step-label {
        font-size: 11px;
        max-width: 70px;
    }

    .masaha-progress-connector {
        height: 40px;
    }

    /* -- Storage grid: 2 columns -- */
    .masaha-storage-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--m-sp-5);
    }

    /* -- Duration grid: 2 columns -- */
    .masaha-duration-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--m-sp-3);
    }

    /* -- Addons: keep 2 columns -- */
    .masaha-addons-grid {
        gap: var(--m-sp-3);
    }

    /* -- AC features: keep 2 columns -- */
    .masaha-ac-features {
        gap: var(--m-sp-2);
    }

    /* -- Review panel -- */
    .masaha-review-header {
        padding: var(--m-sp-5);
    }

    .masaha-review-section {
        padding: var(--m-sp-4) var(--m-sp-5);
    }

    /* -- Step headers -- */
    .masaha-step-header {
        margin-bottom: var(--m-sp-6);
    }

    /* -- Form row stays 2-column -- */
    .masaha-form-row {
        gap: var(--m-sp-4);
    }

    /* -- Payment options -- */
    .masaha-payment-option {
        min-width: 90px;
        padding: var(--m-sp-3) var(--m-sp-4);
    }

    /* -- Confirmed page -- */
    .masaha-next-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    /* -- Invoice -- */
    .masaha-invoice-body {
        padding: 24px;
    }
}

/* ================================================================
   3. TABLET → MOBILE  (≤ 768px)
   ================================================================ */
@media (max-width: 768px) {

    /* -- Base spacing tightens -- */
    .masaha-booking-main {
        padding-top: 72px;
    }

    .masaha-booking-container {
        padding: var(--m-sp-4) var(--m-sp-4);
    }

    /* -- Progress tracker: hide labels, smaller dots -- */
    .masaha-progress-tracker {
        padding: var(--m-sp-3) var(--m-sp-4);
    }

    .masaha-step-label {
        display: none;
    }

    .masaha-step-icon {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .masaha-progress-connector {
        height: 36px;
        padding: 0;
    }

    .masaha-progress-step.active .masaha-step-icon {
        transform: scale(1.1);
    }

    .masaha-step-check {
        font-size: 11px;
    }

    /* -- Storage grid: single column -- */
    .masaha-storage-grid {
        grid-template-columns: 1fr;
        gap: var(--m-sp-5);
    }

    .masaha-storage-card:hover {
        box-shadow: var(--m-card-shadow-hover);
    }

    .masaha-storage-card__image {
        min-height: 160px;
        padding: var(--m-sp-3) var(--m-sp-5);
    }

    .masaha-storage-card__image img {
        max-height: 130px;
    }

    /* Specs: stay 2-column but tighter */
    .masaha-specs-grid {
        padding: var(--m-sp-3);
        gap: var(--m-sp-1-5);
    }

    .masaha-spec {
        padding: var(--m-sp-1-5) var(--m-sp-2);
    }

    /* What fits: single column on mobile */
    .masaha-fits-grid {
        grid-template-columns: 1fr;
        gap: var(--m-sp-1);
    }

    /* Popular ribbon: smaller */
    .masaha-popular-ribbon {
        font-size: 10px;
        padding: var(--m-sp-1) var(--m-sp-3) var(--m-sp-1) var(--m-sp-2);
    }

    /* Badge: slightly smaller */
    .masaha-badge {
        font-size: 10px;
        padding: 3px var(--m-sp-2);
    }

    /* Quantity controls: slightly smaller */
    .masaha-qty-btn {
        width: 38px;
        height: 38px;
    }

    .masaha-qty-input {
        font-size: var(--m-text-lg);
    }

    .masaha-price-amount {
        font-size: var(--m-text-2xl);
    }

    /* -- Duration grid: 2 columns -- */
    .masaha-duration-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--m-sp-3);
    }

    .masaha-duration-card {
        padding: var(--m-sp-4);
    }

    .masaha-duration-card__icon {
        width: 44px;
        height: 44px;
        font-size: var(--m-text-lg);
    }

    /* -- Addons: single column -- */
    .masaha-addons-grid {
        grid-template-columns: 1fr;
        gap: var(--m-sp-3);
    }

    .masaha-addon-card__header {
        padding: var(--m-sp-3) var(--m-sp-4);
    }

    .masaha-addon-icon {
        width: 44px;
        height: 44px;
    }

    .masaha-addon-icon i {
        font-size: var(--m-text-lg);
    }

    .masaha-addon-card__footer {
        padding: var(--m-sp-2-5) var(--m-sp-4);
    }

    /* -- AC section -- */
    .masaha-ac-card__header {
        flex-wrap: wrap;
        padding: var(--m-sp-4) var(--m-sp-4);
        gap: var(--m-sp-3);
    }

    .masaha-ac-price {
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        gap: var(--m-sp-2);
        padding-top: var(--m-sp-2);
        border-top: 1px solid var(--m-border-light);
    }

    html[dir="rtl"] .masaha-ac-price {
        text-align: right;
    }

    .masaha-ac-price strong {
        font-size: var(--m-text-lg);
    }

    .masaha-ac-card__body {
        padding: 0 var(--m-sp-4) var(--m-sp-4);
    }

    .masaha-ac-features {
        grid-template-columns: 1fr;
        gap: var(--m-sp-2);
    }

    .masaha-ac-units-note {
        padding: var(--m-sp-2-5) var(--m-sp-4);
    }

    /* -- Form: stack columns -- */
    .masaha-form-row {
        grid-template-columns: 1fr;
        gap: var(--m-sp-4);
    }

    .masaha-form-section {
        padding: var(--m-sp-5);
    }

    /* -- Terms scroll: shorter -- */
    .masaha-terms-scroll {
        max-height: 180px;
        padding: var(--m-sp-4);
    }

    /* -- Review -- */
    .masaha-review-header {
        padding: var(--m-sp-4) var(--m-sp-5);
    }

    .masaha-review-header-icon {
        width: 40px;
        height: 40px;
    }

    .masaha-review-header-icon i {
        font-size: var(--m-text-lg);
    }

    .masaha-review-section {
        padding: var(--m-sp-4) var(--m-sp-4);
    }

    .masaha-review-totals {
        padding: var(--m-sp-4) var(--m-sp-4);
    }

    /* -- Step navigation: stack on mobile -- */
    .masaha-step-nav {
        flex-direction: column-reverse;
        gap: var(--m-sp-3);
        margin-top: var(--m-sp-8);
    }

    .masaha-step-nav .masaha-btn {
        width: 100%;
    }

    /* -- Step headers -- */
    .masaha-step-header-text h2 {
        font-size: var(--m-text-lg);
    }

    .masaha-step-number {
        width: 40px;
        height: 40px;
        font-size: var(--m-text-lg);
    }

    /* -- OTP: smaller digits -- */
    .masaha-otp-digit {
        width: var(--m-otp-size-mobile);
        height: var(--m-otp-size-mobile);
        font-size: var(--m-text-xl);
    }

    .masaha-otp-inputs {
        gap: 8px;
    }

    /* -- Payment methods: wrap tighter -- */
    .masaha-payment-options {
        gap: var(--m-sp-2);
    }

    .masaha-payment-option {
        min-width: 75px;
        max-width: 130px;
        padding: var(--m-sp-3);
    }

    .masaha-payment-option img {
        max-height: 30px;
        max-width: 65px;
    }

    /* -- Payment iframe -- */
    .masaha-payment-iframe {
        min-height: 480px;
    }

    /* -- Coupon section -- */
    .masaha-coupon-section {
        padding: var(--m-sp-5);
    }

    .masaha-coupon-section::before,
    .masaha-coupon-section::after {
        width: 18px;
        height: 18px;
    }

    .masaha-coupon-section::before { left: -10px; }
    .masaha-coupon-section::after { right: -10px; }

    html[dir="rtl"] .masaha-coupon-section::before { right: -10px; left: auto; }
    html[dir="rtl"] .masaha-coupon-section::after { left: -10px; right: auto; }

    /* -- Overlays: tighter padding -- */
    .masaha-processing-card,
    .masaha-success-card {
        padding: var(--m-sp-8) var(--m-sp-6);
    }

    .masaha-processing-icon,
    .masaha-success-checkmark {
        width: 64px;
        height: 64px;
    }

    .masaha-processing-icon i,
    .masaha-success-checkmark i {
        font-size: 28px;
    }

    .masaha-success-details {
        flex-direction: column;
        gap: var(--m-sp-3);
    }

    /* -- Verify card: tighter -- */
    .masaha-verify-card {
        padding: var(--m-sp-8) var(--m-sp-6);
    }

    .masaha-verify-icon-ring {
        width: 72px;
        height: 72px;
    }

    .masaha-verify-icon-ring i {
        font-size: 26px;
    }

    .masaha-verify-title {
        font-size: var(--m-text-xl);
    }

    .masaha-verify-trust {
        flex-wrap: wrap;
        gap: var(--m-sp-3);
        justify-content: center;
    }

    /* -- Toast: full width -- */
    .masaha-toast-container {
        right: var(--m-sp-3);
        left: var(--m-sp-3);
        max-width: none;
        width: auto;
    }

    /* -- Confirmed page -- */
    .masaha-next-steps {
        grid-template-columns: 1fr;
        gap: var(--m-sp-4);
    }

    .masaha-confirmed-hero {
        padding: var(--m-sp-8) var(--m-sp-6);
    }

    .masaha-confirmed-row {
        padding: var(--m-sp-3) var(--m-sp-4);
    }

    /* -- Failed page -- */
    .masaha-failed-card {
        padding: var(--m-sp-8) var(--m-sp-6);
    }

    .masaha-failed-icon {
        width: 64px;
        height: 64px;
    }

    .masaha-failed-icon i {
        font-size: 28px;
    }

    /* -- Result page -- */
    .masaha-result-card {
        padding: var(--m-sp-8) var(--m-sp-6);
    }

    .masaha-result-details {
        grid-template-columns: 1fr;
    }

    /* -- Summary sidebar (now stacked) -- */
    .masaha-summary-card {
        border-radius: var(--m-radius-lg);
    }

    /* -- Info banners -- */
    .masaha-info-banner {
        padding: var(--m-sp-3) var(--m-sp-4);
        font-size: var(--m-text-sm);
    }

    /* -- Partner logos -- */
    .masaha-partner-logos {
        gap: var(--m-sp-5);
    }

    .masaha-partner-logos img {
        max-height: 24px;
    }
}

/* ================================================================
   4. SMALL MOBILE  (≤ 576px)
   ================================================================ */
@media (max-width: 576px) {

    /* -- Even tighter spacing -- */
    .masaha-booking-container {
        padding: var(--m-sp-3) var(--m-sp-3);
    }

    /* -- Step header: stack vertically -- */
    .masaha-step-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--m-sp-2);
    }

    .masaha-step-number {
        width: 36px;
        height: 36px;
        font-size: var(--m-text-md);
    }

    .masaha-step-header-text h2 {
        font-size: var(--m-text-md);
    }

    .masaha-step-badge {
        font-size: 10px;
    }

    /* -- Duration: 2 columns tighter -- */
    .masaha-duration-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--m-sp-2);
    }

    .masaha-duration-card {
        padding: var(--m-sp-3);
        gap: var(--m-sp-2);
    }

    .masaha-duration-card__icon {
        width: 38px;
        height: 38px;
        font-size: var(--m-text-md);
    }

    .masaha-duration-card__text strong {
        font-size: var(--m-text-sm);
    }

    /* -- Coupon: stack input + button -- */
    .masaha-coupon-input-group {
        flex-direction: column;
        gap: var(--m-sp-2);
    }

    .masaha-coupon-input-group .masaha-input {
        border-radius: var(--m-input-radius);
    }

    .masaha-coupon-input-group .masaha-btn {
        border-radius: var(--m-input-radius);
        width: 100%;
    }

    html[dir="rtl"] .masaha-coupon-input-group .masaha-input,
    html[dir="rtl"] .masaha-coupon-input-group .masaha-btn {
        border-radius: var(--m-input-radius);
    }

    /* -- Review rows: allow wrapping -- */
    .masaha-review-row {
        flex-wrap: wrap;
        gap: var(--m-sp-1);
    }

    .masaha-review-row > span:first-child {
        flex-basis: 100%;
        font-size: var(--m-text-xs);
    }

    .masaha-review-edit {
        margin-left: auto;
    }

    html[dir="rtl"] .masaha-review-edit {
        margin-left: 0;
        margin-right: auto;
    }

    /* -- Payment methods: 3 across, smaller -- */
    .masaha-payment-options {
        gap: var(--m-sp-1-5);
    }

    .masaha-payment-option {
        min-width: 60px;
        max-width: none;
        flex: 1;
        padding: var(--m-sp-2-5);
    }

    .masaha-payment-option img {
        max-height: 24px;
        max-width: 55px;
    }

    /* Hide coming-soon text, keep overlay */
    .masaha-coming-soon span {
        font-size: 9px;
        padding: 2px var(--m-sp-2);
    }

    /* -- OTP: tighter -- */
    .masaha-otp-digit {
        width: 40px;
        height: 40px;
        font-size: var(--m-text-lg);
        border-radius: var(--m-radius);
    }

    .masaha-otp-inputs {
        gap: 6px;
    }

    /* -- Verify card -- */
    .masaha-verify-card {
        padding: var(--m-sp-6) var(--m-sp-4);
    }

    .masaha-verify-icon-ring {
        width: 64px;
        height: 64px;
        margin-bottom: var(--m-sp-5);
    }

    .masaha-verify-icon-ring i {
        font-size: 22px;
    }

    .masaha-verify-icon-ring::before {
        inset: -6px;
    }

    .masaha-verify-title {
        font-size: var(--m-text-lg);
    }

    .masaha-verify-subtitle {
        font-size: var(--m-text-sm);
    }

    .masaha-verify-trust {
        flex-direction: column;
        gap: var(--m-sp-2);
        align-items: center;
    }

    /* -- Buttons full-width everywhere -- */
    .masaha-btn--lg {
        height: 50px;
        font-size: var(--m-text-base);
    }

    /* -- Forms: tighter -- */
    .masaha-form-section {
        padding: var(--m-sp-4);
    }

    .masaha-form-section__title {
        font-size: var(--m-text-base);
        margin-bottom: var(--m-sp-4);
        padding-bottom: var(--m-sp-3);
    }

    /* -- Guarantee -- */
    .masaha-guarantee {
        flex-direction: column;
        text-align: center;
        gap: var(--m-sp-3);
    }

    .masaha-guarantee i {
        font-size: var(--m-text-xl);
    }

    /* -- Security notice -- */
    .masaha-security-notice {
        flex-direction: column;
        text-align: center;
        gap: var(--m-sp-3);
    }

    /* -- Overlays -- */
    .masaha-processing-card,
    .masaha-success-card {
        padding: var(--m-sp-6) var(--m-sp-5);
        width: 95%;
    }

    .masaha-success-card h2 {
        font-size: var(--m-text-xl);
    }

    /* -- Invoice print: tighter -- */
    .masaha-invoice-meta {
        grid-template-columns: 1fr;
    }

    .masaha-invoice-header {
        flex-direction: column;
        gap: 16px;
    }

    .masaha-invoice-title {
        text-align: left;
    }

    html[dir="rtl"] .masaha-invoice-title {
        text-align: right;
    }

    /* -- Partner logos -- */
    .masaha-partner-logos {
        gap: var(--m-sp-4);
    }

    .masaha-partner-logos img {
        max-height: 20px;
    }
}

/* ================================================================
   5. ULTRA SMALL (≤ 360px) — Older/smaller phones
   ================================================================ */
@media (max-width: 360px) {
    .masaha-otp-digit {
        width: 36px;
        height: 36px;
        font-size: var(--m-text-md);
    }

    .masaha-otp-inputs {
        gap: 4px;
    }

    .masaha-progress-tracker {
        padding: var(--m-sp-2-5) var(--m-sp-3);
    }

    .masaha-step-icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .masaha-storage-card__header h3 {
        font-size: var(--m-text-lg);
    }

    .masaha-qty-btn {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .masaha-price-amount {
        font-size: var(--m-text-xl);
    }
}

/* ================================================================
   6. TOUCH DEVICES — Larger tap targets
   ================================================================ */
@media (hover: none) and (pointer: coarse) {
    /* Ensure 44px minimum touch target */
    button,
    .masaha-btn,
    .masaha-qty-btn,
    .masaha-addon-qty-btn,
    .masaha-addon-toggle-btn,
    .masaha-payment-option,
    .masaha-duration-card,
    .masaha-review-edit,
    a.masaha-link {
        min-height: 44px;
        min-width: 44px;
    }

    /* Disable hover-dependent transforms */
    .masaha-storage-card:hover {
        box-shadow: var(--m-card-shadow);
    }

    .masaha-storage-card:hover .masaha-storage-card__image img {
        transform: none;
    }

    .masaha-addon-card:hover {
        transform: none;
    }

    .masaha-duration-card:hover {
        transform: none;
    }
}

/* ================================================================
   7. LANDSCAPE PHONES — Avoid verify card overflow
   ================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .masaha-verify-section {
        padding: var(--m-sp-4);
        align-items: flex-start;
        min-height: auto;
    }

    .masaha-verify-card {
        padding: var(--m-sp-5) var(--m-sp-6);
    }

    .masaha-verify-icon-ring {
        width: 56px;
        height: 56px;
        margin-bottom: var(--m-sp-4);
    }

    .masaha-verify-icon-ring i {
        font-size: 20px;
    }

    .masaha-verify-icon-ring::before {
        display: none;
    }

    .masaha-verify-trust {
        margin-top: var(--m-sp-4);
        padding-top: var(--m-sp-3);
    }
}

/* ================================================================
   8. HIGH CONTRAST
   ================================================================ */
@media (prefers-contrast: high) {
    .masaha-storage-card {
        border-width: 3px;
        border-color: #000;
    }

    .masaha-btn--primary {
        border: 2px solid #000;
    }

    .masaha-btn--outline {
        border-width: 3px;
    }

    .masaha-duration-card {
        border-width: 3px;
    }

    .masaha-addon-card {
        border-width: 3px;
    }

    .masaha-payment-option {
        border-width: 3px;
    }

    .masaha-otp-digit {
        border-width: 3px;
    }

    .masaha-form-group .masaha-input,
    .masaha-input-group {
        border-width: 3px;
    }

    .masaha-review-panel {
        border-width: 2px;
        border-color: #000;
    }

    .masaha-summary-card {
        border-width: 2px;
        border-color: #000;
    }
}

/* ================================================================
   9. PRINT STYLES
   ================================================================ */
@media print {
    /* Hide non-essential elements */
    .masaha-loading-overlay,
    .masaha-toast-container,
    .masaha-confetti-canvas,
    .masaha-processing-overlay,
    .masaha-success-overlay,
    .masaha-progress-tracker,
    .masaha-step-nav,
    .masaha-summary-sidebar,
    .masaha-verify-ambient,
    .masaha-coupon-section,
    .masaha-payment-methods,
    .masaha-payment-form,
    .masaha-trusted-partners,
    .masaha-guarantee,
    .masaha-security-notice,
    .masaha-popular-ribbon,
    .masaha-coming-soon,
    .masaha-review-edit,
    .masaha-qty-btn,
    .masaha-addon-qty-btn,
    .masaha-addon-toggle-btn,
    .masaha-ac-switch {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .masaha-booking-container {
        max-width: 100%;
        padding: 0;
    }

    .masaha-content-wrapper {
        display: block;
    }

    .masaha-storage-card,
    .masaha-duration-card,
    .masaha-addon-card,
    .masaha-review-panel,
    .masaha-form-section {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    .masaha-storage-grid,
    .masaha-duration-grid,
    .masaha-addons-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }

    /* Force backgrounds on key elements */
    .masaha-badge,
    .masaha-step-number {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}