/* ============================================ Astrology Premium Pro - Mobile Responsive CSS Version:1.0.0 Add this to your theme or enqueue after frontend.css ============================================ */ /* ============================================ CSS VARIABLES - Mobile First ============================================ */:root{/* Spacing */ --spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;/* Border Radius */ --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;/* Shadows */ --shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.05);--shadow-lg:0 10px 15px rgba(0,0,0,0.1),0 4px 6px rgba(0,0,0,0.05);--shadow-xl:0 20px 25px rgba(0,0,0,0.1),0 10px 10px rgba(0,0,0,0.04);/* Transitions */ --transition-fast:150ms ease;--transition-normal:250ms ease;--transition-slow:350ms ease}/* ============================================ GLOBAL IMPROVEMENTS ============================================ */ /* Smooth scrolling */ html{scroll-behavior:smooth}/* Better box model */ .astro-app *,.astro-app *::before,.astro-app *::after{box-sizing:border-box}/* Prevent horizontal overflow */ .astro-app{overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}/* ============================================ TOUCH-FRIENDLY BUTTONS ============================================ */ .astro-btn{min-height:48px;min-width:48px;padding:14px 24px;font-size:16px;font-weight:600;border-radius:var(--radius-md);touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;transition:all var(--transition-fast);position:relative;overflow:hidden}/* Ripple effect */ .astro-btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.3);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.3s,height 0.3s}.astro-btn:active::after{width:200px;height:200px}/* Button press effect */ .astro-btn:active{transform:scale(0.98)}/* Loading state */ .astro-btn.loading{color:transparent !important;pointer-events:none}.astro-btn.loading::before{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:btn-spin 0.8s linear infinite}@keyframes btn-spin{to{transform:rotate(360deg)}}/* Full width button on mobile */ @media (max-width:480px){.astro-actions{flex-direction:column}.astro-actions .astro-btn{width:100%;justify-content:center}}/* ============================================ FORM IMPROVEMENTS ============================================ */ .astro-field input,.astro-field select,.astro-field textarea{font-size:16px !important;/* Prevents iOS zoom */ min-height:48px;padding:14px 16px;border:2px solid var(--astro-border);border-radius:var(--radius-sm);background-color:#fff;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);-webkit-appearance:none;appearance:none;width:100%}.astro-field input:focus,.astro-field select:focus,.astro-field textarea:focus{outline:none;border-color:var(--astro-primary);box-shadow:0 0 0 3px rgba(102,126,234,0.15)}/* Better select arrow */ .astro-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:44px;cursor:pointer}/* Label styling */ .astro-field label{font-size:14px;font-weight:600;color:#4a5568;margin-bottom:6px;display:block}/* Required indicator */ .astro-field label.required::after{content:' *';color:#ef4444}/* Form row - stack on mobile */ @media (max-width:640px){.astro-row{grid-template-columns:1fr !important;gap:16px}}/* ============================================ CARD IMPROVEMENTS ============================================ */ .astro-card{background:#fff;border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-md);transition:transform var(--transition-normal),box-shadow var(--transition-normal)}/* Card hover (desktop only) */ @media (hover:hover){.astro-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}}/* Full-width cards on mobile */ @media (max-width:480px){.astro-card{margin-left:-16px;margin-right:-16px;border-radius:0;padding:var(--spacing-md)}.astro-app{padding:0 16px}}/* ============================================ NAVIGATION - Horizontal Scroll ============================================ */ .dashboard-nav,.astro-dashboard-nav{display:flex;gap:4px;padding:6px;background:var(--astro-light);border-radius:var(--radius-md);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.dashboard-nav::-webkit-scrollbar,.astro-dashboard-nav::-webkit-scrollbar{display:none}.dashboard-nav .nav-item,.astro-dashboard-nav a{flex-shrink:0;padding:12px 18px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:#4a5568;text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:8px;transition:all var(--transition-fast)}.dashboard-nav .nav-item.active,.astro-dashboard-nav a.active{background:#fff;color:var(--astro-primary);font-weight:600;box-shadow:var(--shadow-sm)}/* Nav scroll hint */ .nav-wrapper{position:relative}.nav-wrapper::after{content:'';position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(to right,transparent,var(--astro-light));pointer-events:none;opacity:1;transition:opacity var(--transition-fast)}.nav-wrapper.scrolled-end::after{opacity:0}/* ============================================ TABLE TO CARDS ON MOBILE ============================================ */ @media (max-width:768px){.astro-table{display:block}.astro-table thead{display:none}.astro-table tbody{display:flex;flex-direction:column;gap:12px}.astro-table tr{display:block;background:#fff;border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-sm);border:1px solid var(--astro-border)}.astro-table td{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border:none;border-bottom:1px solid #f0f0f0}.astro-table td:last-child{border-bottom:none;padding-bottom:0}.astro-table td:first-child{padding-top:0}.astro-table td::before{content:attr(data-label);font-weight:600;color:#718096;font-size:12px;text-transform:uppercase;letter-spacing:0.5px}}/* ============================================ MODAL - Bottom Sheet on Mobile ============================================ */ @media (max-width:640px){.astro-modal{padding:0;align-items:flex-end}.astro-modal-content{max-width:100%;width:100%;max-height:92vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:20px 16px;padding-bottom:calc(20px + env(safe-area-inset-bottom));animation:slide-up 0.3s ease-out}/* Drag handle */ .astro-modal-content::before{content:'';display:block;width:36px;height:4px;background:#d1d5db;border-radius:2px;margin:0 auto 16px}.astro-modal-close{top:20px;right:16px}}@keyframes slide-up{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}/* ============================================ PRICING CARDS ============================================ */ .astro-pricing-grid{display:grid;gap:20px}@media (max-width:480px){.astro-pricing-grid{grid-template-columns:1fr}}@media (min-width:481px) and (max-width:768px){.astro-pricing-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:769px){.astro-pricing-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}.astro-price-card{padding:28px 24px;border-radius:var(--radius-lg);transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.astro-price-card.featured{transform:none}@media (min-width:769px){.astro-price-card.featured{transform:scale(1.05)}}/* ============================================ CHART RESPONSIVE ============================================ */ .astro-chart-container{padding:var(--spacing-md);border-radius:var(--radius-lg);overflow:hidden}@media (max-width:480px){.astro-chart-container{padding:var(--spacing-sm);margin:0 -16px;border-radius:0}.astro-chart-svg{max-width:100%;height:auto}.astro-chart-legend{padding:var(--spacing-sm)}.astro-chart-legend .legend-items{grid-template-columns:1fr;gap:6px}.astro-chart-legend .legend-item{padding:8px 10px;font-size:12px}}/* ============================================ BIG THREE - Responsive ============================================ */ .astro-big-three{display:grid;gap:12px}@media (max-width:480px){.astro-big-three{grid-template-columns:1fr}.big-three-item{display:flex;align-items:center;text-align:left;padding:14px 16px;gap:12px}.big-three-item .icon{font-size:28px;margin:0}.big-three-item .info{flex:1}}@media (min-width:481px){.astro-big-three{grid-template-columns:repeat(3,1fr)}}/* ============================================ LOADING STATES ============================================ */ /* Skeleton loading */ .skeleton{background:linear-gradient( 90deg,#f0f0f0 0%,#e8e8e8 50%,#f0f0f0 100% );background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}@keyframes skeleton-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}.skeleton-text{height:16px;margin-bottom:8px}.skeleton-title{height:24px;width:60%;margin-bottom:12px}.skeleton-avatar{width:48px;height:48px;border-radius:50%}/* ============================================ EMPTY STATES ============================================ */ .empty-state{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg)}.empty-state .empty-icon{font-size:48px;margin-bottom:var(--spacing-md);opacity:0.6}.empty-state h3{font-size:18px;color:#4a5568;margin-bottom:var(--spacing-sm)}.empty-state p{color:#718096;margin-bottom:var(--spacing-lg)}/* ============================================ STATUS BADGES - Better Mobile ============================================ */ .status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:600;white-space:nowrap}/* ============================================ ACCESSIBILITY ============================================ */ /* Focus visible */ .astro-btn:focus-visible,.astro-field input:focus-visible,.astro-field select:focus-visible,.nav-item:focus-visible,a:focus-visible{outline:3px solid var(--astro-primary);outline-offset:2px}/* Skip link */ .skip-link{position:absolute;top:-100px;left:16px;z-index:10000;padding:12px 20px;background:var(--astro-primary);color:white;border-radius:var(--radius-sm);text-decoration:none;font-weight:600}.skip-link:focus{top:16px}/* Reduced motion */ @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}/* ============================================ SAFE AREAS (Notched Phones) ============================================ */ .astro-app{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.astro-modal-content{padding-bottom:calc(var(--spacing-lg) + env(safe-area-inset-bottom))}/* Fixed bottom buttons */ .fixed-bottom-cta{position:fixed;bottom:0;left:0;right:0;padding:var(--spacing-md);padding-bottom:calc(var(--spacing-md) + env(safe-area-inset-bottom));background:white;box-shadow:0 -4px 20px rgba(0,0,0,0.1);z-index:100}@media (min-width:769px){.fixed-bottom-cta{display:none}}/* ============================================ TOAST NOTIFICATIONS ============================================ */ .astro-toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(100px);padding:14px 24px;background:#1a1a2e;color:white;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:10000;opacity:0;transition:all 0.3s ease;max-width:calc(100vw - 40px);text-align:center}.astro-toast.show{transform:translateX(-50%) translateY(0);opacity:1}.astro-toast.success{background:#059669}.astro-toast.error{background:#dc2626}/* ============================================ PRINT STYLES ============================================ */ @media print{.astro-btn,.dashboard-nav,.astro-modal,.fixed-bottom-cta{display:none !important}.astro-card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}.astro-chart-container{background:white}}