/* =============================================================================
   DesignMitra AI — Mobile-First Responsive Overrides
   Fixes small fonts, layout issues on phones (360px–480px screens)
   ============================================================================= */

/* ── Base mobile font scaling ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    html { font-size: 16px; }

    /* Topbar */
    .dm-topbar { height: 56px; padding: 0 14px; gap: 10px; }
    .dm-topbar-title { font-size: 16px; font-weight: 700; }
    .dm-credit-chip { font-size: 13px; padding: 5px 11px; gap: 5px; }
    .dm-credit-chip-icon { font-size: 14px; }
    .dm-topbar-avatar { width: 34px; height: 34px; font-size: 13px; }

    /* Page padding */
    .dm-page { padding: 16px 14px 60px; }

    /* Greeting line */
    .dm-dash-greeting { font-size: 18px !important; font-weight: 800 !important; }
    .dm-dash-greeting-sub { font-size: 13px !important; }

    /* Stats cards */
    .dm-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
    .dm-stat-card { padding: 16px 14px 14px; border-radius: 12px; }
    .dm-stat-icon { font-size: 22px; margin-bottom: 8px; }
    .dm-stat-value { font-size: 26px; }
    .dm-stat-label { font-size: 12px; }

    /* Subscription card */
    .dm-sub-card { padding: 18px 16px; border-radius: 12px; }
    .dm-sub-card-name { font-size: 20px; margin-bottom: 12px; }
    .dm-sub-card-plan { font-size: 10px; }
    .dm-sub-progress-label { font-size: 11.5px; }
    .dm-btn-upgrade { font-size: 13px; padding: 8px 16px; }

    /* Quick actions */
    .dm-quick-actions { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; margin-bottom: 20px; }
    .dm-quick-btn { padding: 16px 10px; border-radius: 12px; gap: 8px; }
    .dm-quick-btn-icon { font-size: 28px; }
    .dm-quick-btn-label { font-size: 13px; font-weight: 700; }

    /* Widget */
    .dm-widget-header { padding: 14px 16px; }
    .dm-widget-title { font-size: 14px; }
    .dm-widget-link { font-size: 12px; }
    .dm-widget-body { padding: 14px 16px; }

    /* Nav sidebar */
    .dm-nav-item { font-size: 15px; padding: 11px 18px; }
    .dm-nav-icon { font-size: 18px; width: 22px; }
    .dm-nav-section-label { font-size: 11px; padding: 0 18px 6px; }
    .dm-sidebar-user-name { font-size: 14px; }
    .dm-sidebar-user-plan { font-size: 12px; }
    .dm-plan-badge { font-size: 11px; padding: 3px 8px; }
    .dm-nav-badge { font-size: 11px; padding: 2px 8px; }

    /* Content grid → single column on mobile */
    .dm-content-grid { grid-template-columns: 1fr !important; gap: 14px; }

    /* Design list */
    .dm-design-name { font-size: 14px; }
    .dm-design-meta { font-size: 12px; }
    .dm-design-thumb { width: 46px; height: 46px; }

    /* Empty state */
    .dm-empty-icon { font-size: 44px; }
    .dm-empty-text { font-size: 14px; }
    .dm-btn-sm { font-size: 14px; padding: 10px 20px; }

    /* Page title */
    .dm-page-title { font-size: 20px; }
    .dm-page-sub { font-size: 13.5px; }

    /* Forms */
    .dm-form-group label { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 6px !important; }
    .dm-input, input.dm-input, select.dm-input, textarea.dm-input,
    .dm-select { font-size: 15px !important; padding: 12px 14px !important; border-radius: 10px !important; }
    .dm-field-error { font-size: 12.5px; }
    .dm-required { font-size: 15px; }
    .dm-optional { font-size: 12px; }

    /* Buttons */
    .dm-btn, .dm-btn-primary { font-size: 15px !important; padding: 13px 20px !important; border-radius: 10px !important; }

    /* Profile page */
    .dm-profile-layout { grid-template-columns: 1fr !important; }
    .dm-profile-section-title { font-size: 15px; }
    .dm-photo-grid { grid-template-columns: repeat(3,1fr); gap: 10px; }

    /* Credits page */
    .dm-credit-balance-card { padding: 20px !important; }
    .dm-credit-amount { font-size: 44px !important; }
    .dm-credit-label { font-size: 13px !important; }
    .dm-credit-breakdown { grid-template-columns: 1fr 1fr !important; }

    /* Subscription page */
    .dm-plans-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .dm-plan-card { padding: 18px 16px !important; }
    .dm-plan-name { font-size: 15px !important; }
    .dm-plan-price { font-size: 28px !important; }

    /* Referrals */
    .dm-referral-code-text { font-size: 22px !important; letter-spacing: 0.12em !important; }
    .dm-copy-btn { font-size: 13px !important; padding: 8px 14px !important; }

    /* Greetings library */
    .dm-greetings-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .dm-greeting-card-title { font-size: 13px !important; }
}

/* ── Generate Design — mobile fixes ────────────────────────────────────────── */
@media (max-width: 600px) {
    /* Single column layout */
    .dm-generate-layout { grid-template-columns: 1fr !important; gap: 16px !important; }
    .dm-preview-panel { position: static !important; order: 2; }
    .dm-generate-panel { order: 1; }

    /* Steps bar — smaller */
    .dm-gen-steps { padding: 14px 14px 12px; gap: 0; }
    .dm-gen-step-num { width: 26px; height: 26px; font-size: 12px; }
    .dm-gen-step-label { font-size: 12px; }
    .dm-gen-step-line { margin: 0 5px; }

    /* Step content */
    .dm-gen-step-content { padding: 16px 14px 18px; }
    .dm-gen-step-title { font-size: 16px; margin-bottom: 16px; }

    /* Category grid — 3 columns, bigger touch targets */
    .dm-category-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
    .dm-category-btn { padding: 14px 8px 12px; border-radius: 12px; }
    .dm-cat-icon { font-size: 28px; }
    .dm-cat-name { font-size: 12px; font-weight: 700; }

    /* Wisher panel */
    .dm-wisher-panel { padding: 12px 14px; margin-bottom: 14px; }
    .dm-wisher-panel-title { font-size: 11px; }
    .dm-wi-label { font-size: 10px; }
    .dm-wi-value { font-size: 14px; font-weight: 700; }

    /* Size selector — dropdown mode handles this now */
    .dm-pos-selector { gap: 8px; }
    .dm-pos-opt { min-width: 0 !important; font-size: 14px !important; padding: 11px 10px !important; }

    /* Photo picker */
    .dm-photo-pick-opt { width: 58px; height: 58px; }

    /* Extra photo upload */
    .dm-extra-photo-preview { width: 80px; height: 80px; }
    .dm-extra-photo-icon { font-size: 20px; }
    .dm-extra-photo-hint { font-size: 9.5px; }

    /* Field hint */
    .dm-field-hint { font-size: 12px; padding: 8px 12px; }

    /* Generate button — full width */
    #dm-generate-btn { width: 100% !important; max-width: 100% !important; font-size: 15px !important; padding: 14px !important; }

    /* Preview placeholder */
    .dm-preview-placeholder { min-height: 200px; padding: 28px 16px; }
    .dm-generating-state { min-height: 200px; }

    /* Result actions */
    .dm-gen-result-actions { gap: 8px; }
    .dm-gen-result-actions .dm-btn { flex: 1; text-align: center; font-size: 13px !important; padding: 11px 10px !important; }
}

/* ── Auth pages — mobile ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .dm-auth-page { padding: 16px 14px 40px; min-height: 100vh; }
    .dm-auth-box { max-width: 100% !important; border-radius: 16px; padding: 24px 18px !important; }
    .dm-auth-header h1 { font-size: 22px !important; }
    .dm-logo-text { font-size: 20px !important; }
    .dm-auth-footer-link { font-size: 14px !important; }
    .dm-alert { font-size: 14px; }

    /* Register language cards */
    .dm-lang-step-header h2 { font-size: 20px; }
    .dm-lang-step-header p  { font-size: 14px; }
    .dm-lang-card { padding: 16px; }
    .dm-lc-native { font-size: 18px; }
    .dm-lc-sub    { font-size: 12.5px; }
    .dm-lc-flag   { font-size: 26px; }
}

/* ── Language switcher — mobile ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    #dm-lang-switcher { top: 10px; right: 10px; }
    #dm-lang-btn {
        padding: 7px 12px;
        font-size: 12px;
        border-radius: 20px;
    }
    #dm-lang-current { max-width: 60px; }
    #dm-lang-dropdown { min-width: 150px; }
    .dm-lang-native { font-size: 14px; }
}

/* ── Very small screens (360px) ─────────────────────────────────────────────── */
@media (max-width: 380px) {
    .dm-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .dm-stat-value { font-size: 22px; }
    .dm-quick-actions { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .dm-quick-btn-icon { font-size: 24px; }
    .dm-quick-btn-label { font-size: 12px; }
    .dm-gen-step-label { display: none; }
    .dm-topbar-title { font-size: 15px; }
}

/* ── Touch targets — minimum 44px ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .dm-nav-item,
    .dm-quick-btn,
    .dm-category-btn,
    .dm-pos-opt,
    .dm-btn,
    .dm-btn-primary,
    .dm-btn-sm,
    .dm-btn-upgrade { min-height: 44px; }
}