/* 
   ==========================================================================
   AYMEDYA MASTER RESPONSIVE ARCHITECTURE
   Version: 5.1 (Ultra Premium Polish - Final)
   ==========================================================================
*/

/* --- GLOBAL TRANSITIONS & CORE --- */
* { transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* --- CLAMP BASED TYPOGRAPHY --- */
:root {
    --h1-size: clamp(2.4rem, 8vw, 6rem);
    --h2-size: clamp(1.8rem, 5vw, 3.5rem);
    --h3-size: clamp(1.3rem, 3vw, 2.2rem);
    --p-size: clamp(0.9rem, 1.1vw, 1.1rem);
}

h1 { font-size: var(--h1-size) !important; line-height: 1.1 !important; }
h2 { font-size: var(--h2-size) !important; line-height: 1.2 !important; }
h3 { font-size: var(--h3-size) !important; }
p  { font-size: var(--p-size) !important; line-height: 1.7 !important; }

/* 
   =========================================
   BREAKPOINT: LARGE TABLETS / LAPTOPS (1200px)
   =========================================
*/
@media (max-width: 1200px) {
    section { padding: 100px 5% !important; }
    .contact-container, .about-story-grid, .service-item-grid { gap: 40px !important; }
}

/* 
   =========================================
   BREAKPOINT: TABLETS (992px)
   =========================================
*/
@media (max-width: 992px) {
    header { width: 92%; padding: 8px 20px !important; }
    .header-action { display: none !important; }

    /* Services & About Stack */
    .about-story-grid, .service-item-grid, .contact-container { 
        grid-template-columns: 1fr !important; 
        gap: 50px !important; 
    }
    
    .ps-row, .ps-row.reverse {
        flex-direction: column !important;
        text-align: center;
        gap: 40px !important;
    }
    
    .about-summary > div {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center;
    }
    .about-summary > div div {
        text-align: center !important;
    }
    
    .ps-image-wrapper, .hero-image { max-width: 100% !important; aspect-ratio: 16/9 !important; height: auto !important; }
    .ps-content, .about-story-grid div, .service-item-grid div { text-align: center; }
    
    .service-item-grid div[style*="order"] { order: unset !important; }

    /* Contact Page Specifics */
    .contact-info, .contact-form-wrap { padding: 35px 25px !important; }
}

/* 
   =========================================
   BREAKPOINT: MOBILE LANDSCAPE / PHABLETS (768px)
   =========================================
*/
@media (max-width: 768px) {
    /* MOBILE NAVIGATION - Glassmorphism Overlay */
    .mobile-toggle { display: flex !important; }
    .nav-links {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: rgba(255, 255, 255, 0.98); 
        backdrop-filter: blur(20px);
        flex-direction: column; justify-content: center;
        align-items: center; gap: 25px; opacity: 0; visibility: hidden;
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); z-index: 999;
    }
    .nav-links.active { opacity: 1; visibility: visible; }
    .nav-links li { transform: translateY(20px); opacity: 0; }
    .nav-links.active li { transform: translateY(0); opacity: 1; transition: 0.4s; }
    .nav-links li a { color: #000 !important; font-size: 1.4rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; }

    /* CONTENT PADDING */
    section { padding: 70px 6% !important; }
    .section-title { margin-bottom: 40px !important; }

    /* GRID RESET */
    .gallery-grid, .services-grid, .packages-grid, .stat-grid, .content-card-grid { 
        grid-template-columns: 1fr !important; gap: 25px !important; 
    }
    
    /* Packages Polish */
    .packages-grid .package-card:nth-child(n) { grid-column: span 1 !important; flex-direction: column !important; padding: 40px 25px !important; }
    .package-card.premium .package-features { flex-direction: column; align-items: center; margin: 25px 0 !important; gap: 10px !important; }
    .package-card.premium .pkg-footer { text-align: center !important; }

    /* HERO SECTION */
    .hero-content { padding: 0 4% !important; }
    .hero-hud { display: none; }
    .hero-scroll { height: 35px; }

    /* APPOINTMENT WIZARD - MOBILE OPTIMIZATION */
    .wz-root { padding: 100px 10px 50px !important; }
    .wz-steps { top: 75px !important; padding: 12px !important; width: 92% !important; margin-bottom: 25px !important; }
    .wz-step-dot { width: 32px; height: 32px; font-size: 11px; }
    .wz-step-line { width: 15px; }
    .wz-card { padding: 25px 15px !important; }
    
    .sc-card { height: 90px !important; }
    #sc-grid { grid-template-columns: repeat(3, 1fr) !important; max-width: 100% !important; gap: 8px !important; }

    .cal-grid { gap: 4px !important; }
    .cal-cell { font-size: 13px !important; border-radius: 8px !important; }
    .time-grid { grid-template-columns: 1fr 1fr !important; }

    /* Appointment Contact Form Stack */
    #step-3 .wz-card > div[style*="grid-template-columns"] { 
        grid-template-columns: 1fr !important; 
        gap: 20px !important; 
    }

    /* FOOTER */
    footer { padding: 80px 6% 40px !important; text-align: center !important; }
    .footer-logo { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; }
    .footer-logo img { height: 70px !important; margin: 0 auto !important; }
    .footer-bottom { flex-direction: column !important; gap: 20px !important; text-align: center !important; }
    .footer-bottom > div { flex: none !important; text-align: center !important; width: 100%; }
    .footer-copyright, .footer-designer { text-align: center !important; }
    .footer-contact { flex-direction: column !important; gap: 10px !important; }
}

/* 
   =========================================
   BREAKPOINT: SMALL MOBILE (480px)
   =========================================
*/
@media (max-width: 480px) {
    header { width: 94%; top: 10px; border-radius: 50px !important; }
    .logo img { height: 38px !important; }
    
    .section-title h2 { font-size: 1.8rem !important; }
    
    /* Appointment Micro Adjustments */
    .wz-title { font-size: 1.3rem !important; }
    .wz-sub { font-size: 11px !important; }
    .sc-card { height: 75px !important; }
    .scratch-pct-text { font-size: 11px !important; }
    
    .summary-row { flex-direction: column; align-items: flex-start; gap: 5px; }
    .summary-label { font-size: 10px; }
    .summary-value { font-size: 13px; }

    /* Form spacing */
    .minimal-form input, .minimal-form textarea { font-size: 0.9rem !important; }
    
    /* Admin Table Mobile Fix */
    .admin-table tbody td { font-size: 12px !important; }
}

/* 
   =========================================
   ADMIN PANEL RESPONSIVE POLISH
   =========================================
*/
@media (max-width: 768px) {
    .topbar-title p { display: none; }
    .admin-content { padding: 15px !important; }
    .stat-card { padding: 15px !important; }
    .stat-info h2 { font-size: 1.5rem !important; }
}

/* --- ACCESSIBILITY & IMAGES --- */
img { max-width: 100%; height: auto; display: block; }
.hero-bg-media img { display: inline-block; } /* Fix for hero slides */

/* --- SMOOTH SCROLLING --- */
html { scroll-behavior: smooth; }

/* --- Mobile optimization for Slogan Badges --- */
@media (max-width: 480px) {
    .about-slogan-badge {
        padding: 10px 18px !important;
        bottom: -15px !important;
        left: 5px !important;
        gap: 10px !important;
    }
    .about-slogan-badge i {
        font-size: 1.1rem !important;
    }
    .about-slogan-badge span {
        font-size: 0.55rem !important;
        letter-spacing: 1px !important;
    }
    .about-slogan-badge strong {
        font-size: 0.8rem !important;
    }
}

/* --- Mobile optimization for Marquee & Testimonials Slider --- */
@media (max-width: 768px) {
    .marquee-content span {
        font-size: 1.25rem !important;
        letter-spacing: 2px !important;
    }
    .marquee-content .dot {
        font-size: 1.4rem !important;
    }
    .filter-bar {
        flex-wrap: wrap !important;
        gap: 15px !important;
        margin-bottom: 40px !important;
        padding: 0 10px;
    }
    .review-card {
        width: 320px !important;
        padding: 25px !important;
    }
    .review-card .t-text {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
    }
    .review-card .t-author {
        font-size: 1.15rem !important;
    }
}
@media (max-width: 480px) {
    .review-card {
        width: 280px !important;
        padding: 20px !important;
    }
    .review-card .t-text {
        font-size: 0.9rem !important;
    }
}