/**
 * Dublin Silver Account - Mobile Responsive Styles
 * Only loads on screens <= 768px
 * Version: 2.1.0
 */

/* ==========================================================================
   Base Mobile Adjustments
   ========================================================================== */
.dsa-dashboard,
.dsa-section-card {
    padding: 16px;
}

/* ==========================================================================
   Account Header - Mobile
   ========================================================================== */
.dsa-account-header {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
}

.dsa-user-avatar img {
    width: 48px;
    height: 48px;
}

.dsa-user-name {
    font-size: 1.2rem;
}

.dsa-user-email {
    font-size: 0.85rem;
}

/* ==========================================================================
   Navigation - Mobile (Stack Horizontally with Scroll)
   ========================================================================== */
.woocommerce-MyAccount-navigation {
    padding: 8px;
    margin-bottom: 16px;
}

.woocommerce-MyAccount-navigation ul {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none;
}

.woocommerce-MyAccount-navigation ul li a {
    padding: 12px 16px;
    white-space: nowrap;
    font-size: 0.85rem;
    min-height: 44px;
}

/* ==========================================================================
   Welcome Card - Mobile
   ========================================================================== */
.dsa-welcome-card {
    padding: 24px 20px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.dsa-welcome-title {
    font-size: 1.35rem;
}

.dsa-welcome-subtitle {
    font-size: 0.9rem;
}

/* ==========================================================================
   Stats Grid - Mobile (2 columns)
   ========================================================================== */
.dsa-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.dsa-stat-card {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.dsa-stat-icon {
    width: 40px;
    height: 40px;
}

.dsa-stat-icon svg {
    width: 20px;
    height: 20px;
}

.dsa-stat-number {
    font-size: 1.25rem;
}

.dsa-stat-label {
    font-size: 0.8rem;
}

/* ==========================================================================
   Quick Actions - Mobile (2 columns)
   ========================================================================== */
.dsa-quick-actions {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.dsa-quick-action {
    padding: 16px 12px;
    min-height: 100px;
}

.dsa-quick-action-icon {
    width: 44px;
    height: 44px;
}

.dsa-quick-action span {
    font-size: 0.85rem;
}

/* ==========================================================================
   Dashboard Grid - Mobile (Single Column)
   ========================================================================== */
.dsa-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
}

/* ==========================================================================
   Section Cards - Mobile
   ========================================================================== */
.dsa-section-card {
    border-radius: 12px;
    margin-bottom: 16px;
}

.dsa-section-header {
    margin-bottom: 16px;
}

.dsa-section-title {
    font-size: 1rem;
}

/* ==========================================================================
   Orders List - Mobile
   ========================================================================== */
.dsa-order-item {
    flex-wrap: wrap;
    padding: 14px;
    gap: 12px;
}

.dsa-order-info {
    flex: 1 1 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.dsa-order-meta {
    flex: 1 1 100%;
    justify-content: space-between;
}

.dsa-order-link {
    flex: 1 1 100%;
    text-align: center;
    padding: 10px;
    background: var(--dsa-bg);
    border-radius: var(--dsa-radius-sm);
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Appointments List - Mobile
   ========================================================================== */
.dsa-appointment-item {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px;
}

.dsa-appointment-date-box {
    width: 48px;
    height: 48px;
}

.dsa-apt-day {
    font-size: 1.1rem;
}

.dsa-apt-month {
    font-size: 0.7rem;
}

.dsa-appointment-details {
    flex: 1;
    min-width: calc(100% - 120px);
}

.dsa-apt-status {
    position: absolute;
    right: 14px;
    top: 14px;
}

.dsa-appointment-item {
    position: relative;
}

/* ==========================================================================
   Buttons - Mobile (Touch-Friendly)
   ========================================================================== */
.dsa-btn {
    min-height: 48px;
    padding: 14px 24px;
    font-size: 1rem;
}

.dsa-btn-sm {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 0.9rem;
}

/* ==========================================================================
   Forms - Mobile
   ========================================================================== */
.dsa-form-input,
.dsa-form-select,
.dsa-form-textarea {
    padding: 14px 16px;
    font-size: 16px; /* Prevents iOS zoom */
    min-height: 48px;
}

.dsa-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
}

.dsa-form-label {
    font-size: 0.95rem;
}

.dsa-form-group {
    margin-bottom: 16px;
}

/* ==========================================================================
   Modals - Mobile (Full Screen)
   ========================================================================== */
.dsa-modal-overlay {
    padding: 0;
    align-items: flex-end;
}

.dsa-modal {
    max-width: 100%;
    max-height: 95vh;
    border-radius: 20px 20px 0 0;
}

.dsa-modal-header {
    padding: 16px 20px;
}

.dsa-modal-title {
    font-size: 1.1rem;
}

.dsa-modal-close {
    width: 44px;
    height: 44px;
}

.dsa-modal-body {
    padding: 20px;
}

.dsa-modal-footer {
    padding: 16px 20px;
    flex-direction: column;
}

.dsa-modal-footer .dsa-btn {
    width: 100%;
}

/* ==========================================================================
   Time Slots - Mobile
   ========================================================================== */
.dsa-time-slots {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.dsa-time-slot {
    padding: 14px 8px;
    min-height: 48px;
    font-size: 0.85rem;
}

/* ==========================================================================
   Wishlist - Mobile
   ========================================================================== */
.dsa-wishlist-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.dsa-wishlist-details {
    padding: 12px;
}

.dsa-wishlist-name {
    font-size: 0.85rem;
}

.dsa-wishlist-actions {
    flex-direction: column;
}

.dsa-wishlist-actions .dsa-btn {
    width: 100%;
    min-height: 44px;
}

/* ==========================================================================
   Returns - Mobile
   ========================================================================== */
.dsa-return-item {
    flex-wrap: wrap;
}

.dsa-return-product {
    flex: 1 1 100%;
}

.dsa-return-product img {
    width: 48px;
    height: 48px;
}

/* ==========================================================================
   Appointment Cards - Mobile
   ========================================================================== */
.dsa-appointment-card-header {
    padding: 14px 16px;
}

.dsa-appointment-card-body {
    padding: 16px;
}

.dsa-appointment-detail {
    padding: 10px 0;
}

.dsa-appointment-detail-icon {
    width: 36px;
    height: 36px;
}

.dsa-appointment-card-actions {
    flex-direction: column;
    padding: 14px 16px;
}

.dsa-appointment-card-actions .dsa-btn {
    width: 100%;
}

/* ==========================================================================
   Public Booking - Mobile
   ========================================================================== */
.dsa-public-booking {
    padding: 24px 20px;
    margin: 16px;
    border-radius: 12px;
}

.dsa-public-booking-header h2 {
    font-size: 1.4rem;
}

/* ==========================================================================
   Tabs - Mobile (Scrollable)
   ========================================================================== */
.dsa-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 12px;
    margin-bottom: 20px;
    gap: 6px;
}

.dsa-tab {
    padding: 12px 16px;
    min-height: 44px;
}

/* ==========================================================================
   Alerts - Mobile
   ========================================================================== */
.dsa-alert {
    padding: 14px 16px;
    font-size: 0.9rem;
}

/* ==========================================================================
   Empty States - Mobile
   ========================================================================== */
.dsa-empty-state {
    padding: 32px 16px;
}

.dsa-empty-state-small {
    padding: 20px 16px;
}

/* ==========================================================================
   Very Small Screens (320px - 375px)
   ========================================================================== */
@media (max-width: 375px) {
    .dsa-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .dsa-quick-actions {
        grid-template-columns: 1fr;
    }
    
    .dsa-time-slots {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dsa-wishlist-grid {
        grid-template-columns: 1fr;
    }
    
    .dsa-stat-card {
        flex-direction: row;
        align-items: center;
    }
}

/* ==========================================================================
   Tablets (481px - 768px)
   ========================================================================== */
@media (min-width: 481px) and (max-width: 768px) {
    .dsa-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dsa-quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .dsa-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dsa-wishlist-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .dsa-time-slots {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .dsa-form-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dsa-modal {
        max-width: 90%;
        border-radius: 16px;
    }
    
    .dsa-modal-overlay {
        align-items: center;
        padding: 20px;
    }
}

/* ==========================================================================
   Touch Device Improvements
   ========================================================================== */
@media (hover: none) {
    /* Remove hover effects that don't work on touch */
    .dsa-stat-card:hover,
    .dsa-card:hover,
    .dsa-wishlist-item:hover {
        transform: none;
    }
    
    /* Increase tap targets */
    .dsa-link {
        padding: 8px 0;
    }
    
    /* Better touch feedback */
    .dsa-btn:active,
    .dsa-quick-action:active,
    .dsa-time-slot:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* ==========================================================================
   Safe Area (Notch Support)
   ========================================================================== */
@supports (padding: max(0px)) {
    .dsa-modal {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    
    .dsa-modal-footer {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .dsa-quick-actions,
    .dsa-btn,
    .dsa-modal-overlay {
        display: none !important;
    }
    
    .dsa-section-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}