/* Desktop Specific Overrides - Full Width Layout */

/* ========================================
   CONSISTENT HEADER-TO-CONTENT GAP ON DESKTOP
   Increased padding-top to prevent header collision
======================================== */
@media screen and (min-width: 769px) {
    /* Page starts right below header */
    body,
    body.landing-page,
    body.customize-page {
        padding-top: 0 !important;
    }
    
    /* Override redesign-body padding */
    .redesign-body {
        padding-top: 0 !important;
    }
    
    /* Specific page containers - ensure they don't add extra top padding */
    .cart-page {
        padding-top: 0 !important;
    }
    
    .orders-container {
        padding-top: 40px !important; /* Already has body padding */
    }
    
    .profile-container {
        padding-top: 40px !important;
    }
    
    .order-details-container {
        padding-top: 40px !important;
    }
    
    .checkout-container {
        margin-top: 20px !important;
    }
    
    .auth-container {
        padding-top: 40px !important;
    }
    
    /* Pages with custom headers (about, faq, terms) - hide custom header on desktop and use global header */
    .about-header,
    .faq-header,
    .terms-header {
        display: none !important;
    }
    
    /* About, FAQ, and Terms containers need padding since we use global header */
    .about-container,
    .faq-container,
    .terms-container {
        padding-top: 40px !important;
    }
}

/* ========================================
   BASE DESKTOP FULL-WIDTH STYLES (1024px+)
   Ensures all pages cover full screen width
======================================== */
@media screen and (min-width: 1024px) {
    /* Page starts right below header */
    body,
    body.landing-page,
    body.customize-page,
    .redesign-body {
        padding-top: 0 !important;
    }
    
    .cart-page {
        padding-top: 0 !important;
    }
    
    /* Main container layouts - Full width with comfortable padding */
    .redesign-main,
    .cart-container,
    .checkout-container,
    .orders-container,
    .profile-container,
    .about-container,
    .faq-container,
    .container:not(.frame-preview),
    .track-section,
    .upload-hero-wrapper,
    .mainCustomizeContainer,
    #mainCustomizeContainer,
    .page,
    .order-details-container,
    .auth-container,
    .otp-auth-container {
        max-width: calc(100vw - 80px) !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    
    /* Auth pages need centered cards - keep the card centered but expand container */
    .auth-container,
    .otp-auth-container {
        max-width: 100vw !important;
        width: 100% !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    
    /* Header full width */
    .header-content,
    .site-header .header-content {
        max-width: calc(100vw - 80px) !important;
        width: 100% !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    
    /* Hero sections full width */
    .hero-new,
    .about-hero,
    .faq-hero,
    .page-header,
    .upload-hero-section {
        width: 100% !important;
    }
    
    /* Grid layouts - ensure proper spacing */
    .cart-content {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Trust bar full width distribution */
    .trust-bar {
        width: 100%;
    }
    
    /* Services grid full width */
    .services-grid {
        width: 100%;
    }
    
    /* Steps timeline full width */
    .steps-timeline {
        width: 100%;
    }
    
    /* Features row full width */
    .features-row {
        width: 100%;
    }
    
    /* CTA section full width */
    .cta-section {
        width: 100%;
    }
    
    /* Remove faded icons from CTA section on desktop */
    .cta-section::before,
    .cta-section::after {
        display: none !important;
    }
    
    /* How section full width */
    .how-section {
        width: 100%;
    }
    
    /* Customize page specific */
    .upload-box-wrapper {
        max-width: 700px;
    }
}

/* ========================================
   DESKTOP UPLOAD SECTION REDESIGN
   Clean, centered design inspired by mobile
======================================== */
@media screen and (min-width: 769px) {
    .brand-name {
        line-height: 31px !important;
    }

    .upload-hero-wrapper {
        max-width: 1320px !important;
        margin: 0 auto 32px !important;
        padding: 0px 50px 24px !important;
    }

    .upload-hero-section {
        background:
            radial-gradient(circle at top left, rgba(255, 255, 255, 0.2) 0%, transparent 34%),
            radial-gradient(circle at bottom right, rgba(255, 166, 43, 0.24) 0%, transparent 32%),
            linear-gradient(135deg, #0f5564 0%, #16697A 46%, #4ea9bb 100%) !important;
        border-radius: 36px !important;
        padding: 42px !important;
        margin: 70px 0px 30px !important;
        position: relative !important;
        overflow: hidden !important;
        color: white !important;
        text-align: left !important;
        box-shadow: 0 24px 70px rgba(15, 85, 100, 0.18) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        isolation: isolate !important;
    }

    .upload-hero-section::before {
        content: '' !important;
        position: absolute !important;
        inset: 18px 18px auto auto !important;
        width: 320px !important;
        height: 320px !important;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 72%) !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }

    .upload-hero-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1.15fr) minmax(360px, 460px) !important;
        gap: 34px !important;
        align-items: stretch !important;
    }

    .upload-hero-copy {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        padding: 8px 6px 8px 0 !important;
    }

    .upload-hero-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: fit-content !important;
        background: rgba(237, 231, 227, 0.14) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        padding: 10px 18px !important;
        border-radius: 999px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        margin-bottom: 22px !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        backdrop-filter: blur(10px) !important;
        color: #ffa62b !important;
    }

    .mobile-upload-text,
    .mobile-upload-title,
    .mobile-upload-description {
        display: none !important;
    }

    .desktop-upload-text,
    .desktop-upload-title {
        display: inline !important;
    }

    .desktop-upload-description {
        display: inline !important;
    }

    .upload-badge-icon {
        width: 26px !important;
        height: 26px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.18) !important;
        color: #ffd694 !important;
        font-size: 0.95rem !important;
    }

    .upload-hero-section h1 {
        font-size: 42px !important;
        font-weight: 800 !important;
        margin: 0 !important;
        line-height: 59px !important;
        letter-spacing: 0 !important;
        max-width: none !important;
        opacity: 1 !important;
    }

    .upload-hero-section > .upload-hero-layout > .upload-hero-copy > p {
        font-size: 1.08rem !important;
        opacity: 0.92 !important;
        max-width: 56ch !important;
        margin: 0 0 26px !important;
        line-height: 1.7 !important;
        color: rgba(255, 255, 255, 0.88) !important;
    }

    .upload-hero-highlights {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        max-width: 100% !important;
    }

    .upload-highlight-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        min-height: 122px !important;
        padding: 18px 18px 16px !important;
        border-radius: 22px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(8px) !important;
    }

    #uploadHeroWrapper > section.upload-hero-section:nth-child(1) > div.upload-hero-layout > div.upload-hero-copy:nth-child(1) > div.upload-hero-highlights:nth-child(4) > div.upload-highlight-card:nth-child(2) {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    .upload-highlight-card strong {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #ffffff !important;
    }

    .upload-highlight-card span {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        color: rgba(255, 255, 255, 0.82) !important;
    }

    .upload-box-wrapper {
        position: relative !important;
        z-index: 1 !important;
        display: inline-grid;
        flex-direction: column !important;
        justify-content: center !important;
        align-self: stretch !important;
        color: #70e7ff !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border-radius: 30px !important;
        padding: 43px 28px 61px ;
        max-width: none !important;
        margin: 30px 0px 15px ;
        box-shadow: 0 22px 45px rgba(10, 43, 51, 0.18) !important;
        border: 1px solid rgba(22, 105, 122, 0.08) !important;
    }

    .upload-box-wrapper .upload-header {
        color: #16697A !important;
        margin-bottom: 18px !important;
        text-align: left !important;
    }

    .upload-box-wrapper .upload-header h2 {
        color: #103d47 !important;
        font-size: 1.35rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
    }

    .upload-box-wrapper .upload-header i {
        color: #16697A !important;
        font-size: 1.45rem !important;
    }

    .upload-box-wrapper .frame {
        border: none !important;
        box-shadow: none !important;
        background: linear-gradient(180deg, #fffaf6 0%, #f1f6f7 100%) !important;
        border-radius: 22px !important;
        min-height: 330px !important;
        padding: 0 !important;
    }

    .upload-box-wrapper .image-container {
        min-height: 330px !important;
    }

    #heroUploadOverlay {
        box-shadow: rgba(235, 234, 234, 0.55) 0px 0px 0px 1px inset;
        color: #185690;
        text-align: left;
    }

    .upload-box-wrapper .upload-overlay {
        border: 2px dashed rgba(72, 159, 181, 0.55) !important;
        border-radius: 18px !important;
        cursor: pointer !important;
        transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
        background:
            radial-gradient(circle at top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.72) 48%, rgba(130, 192, 204, 0.12) 100%) !important;
        box-shadow: rgba(195, 60, 60, 0.55) 0px 0px 0px 1px inset !important;
        padding: 28px !important;
        row-gap: 0 !important;
    }

    .upload-box-wrapper .upload-overlay:hover {
        border-color: #16697A !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(130, 192, 204, 0.14) 100%) !important;
        box-shadow: inset 0 0 0 1px rgba(22, 105, 122, 0.08), 0 16px 35px rgba(22, 105, 122, 0.12) !important;
        transform: translateY(-2px) !important;
    }

    .upload-box-wrapper .upload-overlay i {
        font-size: 3rem !important;
        color: #16697A !important;
        margin-bottom: 12px !important;
    }

    .upload-box-wrapper .upload-overlay p {
        color: #103d47 !important;
        font-size: 1.08rem !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
    }

    .upload-box-wrapper .upload-hint {
        color: #489FB5 !important;
        font-size: 0.92rem !important;
        letter-spacing: 0.02em !important;
    }

    .upload-desktop-note {
        margin: 16px 2px 0 !important;
        font-size: 0.92rem !important;
        line-height: 1.5 !important;
        color: #56737b !important;
        text-align: left !important;
    }
    
    /* Instructions section - clean card */
    .upload-instructions {
        background: white !important;
        border-radius: 28px !important;
        padding: 36px 36px 18px !important;
        box-shadow: 0 6px 24px rgba(22, 105, 122, 0.08) !important;
        line-height: 0 !important;
        letter-spacing: 0 !important;
        font-size: 27px !important;
        font-weight: 700 !important;
    }
    
    .instructions-header {
        text-align: center !important;
        margin-bottom: 28px !important;
    }
    
    .instructions-header h2 {
        font-size: 1.5rem !important;
        color: #1a3a42 !important;
        font-weight: 700 !important;
    }
    
    /* Horizontal steps layout for desktop */
    .instructions-steps {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 16px !important;
        max-width: 800px !important;
        margin: 0 auto !important;
    }
    
    .instruction-step {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 12px !important;
        flex: 1 !important;
        max-width: 140px !important;
    }
    
    .step-icon-box {
        width: 60px !important;
        height: 60px !important;
        background: linear-gradient(135deg, #82C0CC, #489FB5) !important;
        border-radius: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
        font-size: 1.6rem !important;
        box-shadow: 0 4px 12px rgba(22, 105, 122, 0.2) !important;
    }
    
    .instruction-step h4 {
        font-size: 0.9rem !important;
        color: #1a3a42 !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }
    
    /* Hide swipe hint on desktop */
    .upload-hero-section::after {
        display: none !important;
    }

    .step-arrow {
        align-self: center !important;
        color: rgba(72, 159, 181, 0.6) !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 1120px) {
    .upload-hero-layout {
        grid-template-columns: 1fr !important;
    }

    .upload-hero-section h1 {
        max-width: 12ch !important;
        font-size: clamp(2.8rem, 6vw, 4rem) !important;
    }

    .upload-hero-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .upload-box-wrapper {
        max-width: 620px !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 920px) {
    .upload-hero-highlights {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   LARGE DESKTOP (1440px+)
======================================== */
@media screen and (min-width: 1440px) {
    /* Page starts right below header */
    body,
    body.landing-page,
    body.customize-page,
    .redesign-body {
        padding-top: 0 !important;
    }
    
    .cart-page {
        padding-top: 0 !important;
    }
    
    .redesign-main,
    .cart-container,
    .checkout-container,
    .orders-container,
    .profile-container,
    .about-container,
    .faq-container,
    .container:not(.frame-preview),
    .track-section,
    .upload-hero-wrapper,
    .mainCustomizeContainer,
    #mainCustomizeContainer,
    .page,
    .order-details-container {
        max-width: calc(100vw - 100px) !important;
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
    
    #mainCustomizeContainer {
        padding: 78px 50px 32px !important;
    }
    
    .auth-container,
    .otp-auth-container {
        max-width: 100vw !important;
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
    
    .header-content,
    .site-header .header-content {
        max-width: calc(100vw - 100px) !important;
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
    
    .cart-content {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Hide mobile change image button on desktop */
    button#mobileChangeImage.mobile-change-image-btn {
        display: none !important;
    }
}

/* Full HD (1920px and up) */
@media screen and (min-width: 1920px) {
    /* Page starts right below header */
    body,
    body.landing-page,
    body.customize-page,
    .redesign-body {
        padding-top: 0 !important;
    }
    
    .cart-page {
        padding-top: 0 !important;
    }
    
    /* Styles for Full HD screens */
    :root {
        --radius-lg: 40px;
    }

    .redesign-main,
    .cart-container,
    .checkout-container,
    .orders-container,
    .profile-container,
    .about-container,
    .faq-container,
    .container:not(.frame-preview),
    .track-section,
    .upload-hero-wrapper,
    .mainCustomizeContainer,
    #mainCustomizeContainer,
    .page,
    .order-details-container {
        max-width: calc(100vw - 120px) !important;
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
    
    .auth-container,
    .otp-auth-container {
        max-width: 100vw !important;
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
    
    .header-content,
    .site-header .header-content {
        max-width: calc(100vw - 120px) !important;
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
    
    .cart-content {
        max-width: 100% !important;
        width: 100% !important;
    }

    .hero-new {
        padding: 80px 60px;
    }

    .hero-new h1 {
        font-size: 4rem;
    }
    
    /* Enhanced grid layouts for larger screens */
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
    }
    
    .trust-bar {
        gap: 24px;
    }
    
    .features-row {
        gap: 20px;
    }
}

/* QHD (2560px and up) */
@media screen and (min-width: 2560px) {
    /* Styles for QHD screens */
    html {
        font-size: 18px; /* Scale up base font size */
    }

    .redesign-main,
    .cart-container,
    .checkout-container,
    .orders-container,
    .profile-container,
    .about-container,
    .faq-container,
    .container:not(.frame-preview),
    .track-section,
    .upload-hero-wrapper,
    .mainCustomizeContainer,
    #mainCustomizeContainer,
    .page,
    .order-details-container {
        max-width: calc(100vw - 160px) !important;
        padding-left: 80px !important;
        padding-right: 80px !important;
    }
    
    .auth-container,
    .otp-auth-container {
        max-width: 100vw !important;
        padding-left: 80px !important;
        padding-right: 80px !important;
    }
    
    .header-content,
    .site-header .header-content {
        max-width: calc(100vw - 160px) !important;
        padding-left: 80px !important;
        padding-right: 80px !important;
        height: 70px;
    }
    
    .cart-content {
        max-width: 100% !important;
        width: 100% !important;
    }

    .hero-new {
        padding: 100px 80px;
        border-radius: 40px;
    }

    .hero-new h1 {
        font-size: 5rem;
    }

    /* Adjust grid columns for larger screens */
    .product-grid, .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 2rem;
    }
    
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 32px;
    }
    
    .steps-timeline {
        gap: 32px;
    }
}

/* 4K (3840px and up) */
@media screen and (min-width: 3840px) {
    /* Styles for 4K screens */
    html {
        font-size: 24px; /* Further scale up base font size */
    }

    .redesign-main,
    .cart-container,
    .checkout-container,
    .orders-container,
    .profile-container,
    .about-container,
    .faq-container,
    .container:not(.frame-preview),
    .track-section,
    .upload-hero-wrapper,
    .mainCustomizeContainer,
    #mainCustomizeContainer,
    .page,
    .order-details-container {
        max-width: calc(100vw - 200px) !important;
        padding-left: 100px !important;
        padding-right: 100px !important;
    }
    
    .auth-container,
    .otp-auth-container {
        max-width: 100vw !important;
        padding-left: 100px !important;
        padding-right: 100px !important;
    }
    
    .header-content,
    .site-header .header-content {
        max-width: calc(100vw - 200px) !important;
        padding-left: 100px !important;
        padding-right: 100px !important;
        height: 90px;
    }
    
    .cart-content {
        max-width: 100% !important;
        width: 100% !important;
    }

    .hero-new {
        padding: 140px 100px;
        border-radius: 60px;
    }

    .hero-new h1 {
        font-size: 7rem;
    }

    .brand-name {
        font-size: 2.5rem;
    }

    .profile-icon-btn i,
    .cart-icon-btn i {
        font-size: 1.5rem;
    }
    
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 40px;
    }
    
    .steps-timeline {
        gap: 48px;
    }
}

/* ========================================
   DESKTOP FOOTER IMPROVEMENTS
   Center quick links at top, arrange horizontally
======================================== */
@media screen and (min-width: 1024px) {
    /* Footer content - single column centered layout */
    .footer-content {
        grid-template-columns: 1fr !important;
        grid-template-areas: "quick" "contact" !important;
        gap: 3rem !important;
        max-width: 100% !important;
    }
    
    /* Hide brand section on desktop */
    .footer-brand {
        display: none !important;
    }
    
    /* Quick links - centered section */
    .footer-quick-links {
        grid-area: quick !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Quick links heading - centered */
    .footer-quick-links h3 {
        text-align: center !important;
        margin-bottom: 1.5rem !important;
    }
    
    .footer-quick-links h3::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* Quick links - horizontal layout */
    .footer-quick-links .footer-links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 2rem !important;
        width: 100% !important;
    }
    
    .footer-quick-links .footer-links li {
        margin-bottom: 0 !important;
        display: inline-block !important;
    }
    
    .footer-quick-links .footer-links a {
        padding-left: 1rem !important;
        white-space: nowrap !important;
    }
    
    .footer-quick-links .footer-links a::before {
        display: block !important;
    }
    
    /* Contact section */
    .footer-contact {
        grid-area: contact !important;
    }
    
    /* Footer column underlines */
    .footer-quick-links h3::after,
    .footer-contact h3::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}