/* ========================================
   WHMCS Corporate Theme - Responsive Styles
   Mobil ve Tablet Uyumlu Tasarım
   ======================================== */

/* ========================================
   1. TABLET (768px - 991px)
   ======================================== */

@media (max-width: 991px) {

    /* Header */
    .header .navbar .nav-link {
        padding: 15px 10px;
        font-size: 15px;
    }

    .mega-menu-header {
        padding: 15px 0;
    }

    .mega-menu-header .col-md-4 {
        padding: 10px 15px;
    }

    /* Home Products */
    .home-box {
        width: calc(33.33% - 2px);
        min-height: 320px;
    }

    /* Footer */
    .footer .col-md-4 {
        margin-bottom: var(--spacing-lg);
    }
}

/* ========================================
   2. MOBILE (max-width: 767px)
   ======================================== */

@media (max-width: 767px) {

    /* Typography */
    .heading>.heading-title {
        font-size: 24px;
    }

    .heading>.heading-desc {
        font-size: 16px;
    }

    /* Header - Desktop Hidden */
    .header {
        display: none;
    }

    /* Mobile Header - Visible */
    .mobile-header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        width: 100%;
        z-index: 1000;
        box-shadow: var(--shadow);
    }

    body {
        padding-top: 70px;
        /* Adjust for fixed header height */
        overflow-x: hidden;
    }

    .mobile-header .container {
        padding: 0 15px;
        height: 70px;
        /* Reduced height for better proportion */
        display: flex;
        align-items: center;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .mobile-header .row {
        align-items: center;
    }

    .mobile-header .mblMenu {
        font-size: 24px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        height: 100%;
        color: #333;
    }

    .mobile-header a>img {
        max-height: 40px;
        width: auto;
    }

    .mobile-header .mobile-cart {
        font-size: 22px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        height: 100%;
        color: #333;
    }

    .mobile-header .mobile-cart .badge {
        position: absolute;
        top: 20px;
        right: 10px;
        font-size: 10px;
        padding: 3px 6px;
        border-radius: 50%;
    }

    /* Sidebar Menu */
    #sidebar {
        top: 0;
        padding-top: 80px;
        /* Match header height */
        z-index: 999;
    }

    .gw-nav-list>li>a {
        font-size: 15px;
        padding: 12px 16px;
    }

    /* News Bar */
    .news-bar {
        margin-top: 60px;
    }

    .news-bar .news-content p {
        font-size: 14px;
        padding-right: 30px;
    }

    .news-bar .newsClose {
        right: 10px;
        top: 10px;
    }

    /* Carousel */
    #home-carousel-1x .carousel-title {
        padding: var(--spacing-lg);
    }

    /* Hero Title Override for Inline Styles */
    .hostquix-hero-winter h1,
    .hostquix-hero h1,
    #home-carousel-1x .carousel-title h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    /* Adjust Hero Padding on Mobile */
    .hostquix-hero-winter,
    .hostquix-hero {
        padding: 60px 0 80px 0 !important;
    }

    /* Fix Hosting Subpage Banners on Mobile */
    .page-banner {
        padding-top: 100px !important;
        padding-bottom: 40px !important;
        min-height: auto !important;
        background-position: top center !important;
        height: auto !important;
    }

    .page-banner h1 {
        font-size: 26px !important;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
    }

    .page-banner .text-3d {
        font-size: 32px !important;
        display: block;
        margin-top: 5px;
    }

    .page-banner .campaign-desc {
        font-size: 16px !important;
        margin-bottom: 20px !important;
    }

    .page-banner .features-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .page-banner .sale-badge {
        top: 10px !important;
        right: 10px !important;
        width: 80px !important;
    }

    #home-carousel-1x .carousel-title p {
        font-size: 14px;
        margin-bottom: var(--spacing-md);
    }

    #home-carousel-1x .carousel-title ul {
        display: none;
    }

    #home-carousel-1x .carousel-title .btn {
        width: 100%;
        padding: 12px;
    }

    /* Domain Search */
    .home__domain {
        padding: 20px 0;
    }

    .home__domain form input {
        width: calc(100% - 100px);
        height: 50px;
        font-size: 14px;
    }

    .home__domain form .btn {
        width: 100px;
        height: 50px;
        font-size: 14px;
    }

    /* Home Products */
    .home-product {
        padding: 40px 0;
    }

    .home-box {
        width: calc(50% - 2px);
        margin: 5px 1px;
        padding: 15px 10px;
        min-height: 300px;
    }

    .home-box:nth-child(1) {
        width: calc(100% - 2px);
    }

    .home-box img {
        height: 60px;
        margin-bottom: 8px;
    }

    .home-box .title {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .home-box .p-price .price-tag {
        font-size: 42px;
    }

    .home-box .p-price .price-tag sup {
        font-size: 20px;
    }

    .home-box .desc {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .home-box .btn {
        font-size: 14px;
        padding: 10px 20px;
    }

    /* Why Section */
    .whyAll {
        padding: 30px 0;
    }

    .whyRow {
        flex-direction: column;
    }

    .whyCol {
        width: 100%;
        margin-bottom: var(--spacing-lg);
    }

    .whyBoxTab {
        margin-bottom: var(--spacing-md);
    }

    /* Domain Bar */
    .home-domain-bar {
        padding: 30px 0 20px;
    }

    .home-domain-bar .text {
        text-align: center;
        margin-bottom: 15px;
    }

    .home-domain-bar .text h2 {
        font-size: 22px;
    }

    .home-domain-bar .text p {
        font-size: 14px;
    }

    .home-domain-bar .form-bg input {
        width: calc(100% - 100px);
        height: 50px;
        padding: 10px 15px;
        font-size: 14px;
    }

    .home-domain-bar .form-bg .btn {
        width: 100px;
        height: 50px;
        font-size: 14px;
    }

    .home-domain-bar ul.domain-link li {
        font-size: 13px;
        padding: 0 8px;
    }

    /* Domain Price */
    .home-domain-price {
        padding: 15px 0;
    }

    .home-domain-price .item-price .name {
        font-size: 16px;
        margin-right: 5px;
    }

    .home-domain-price .item-price .price {
        font-size: 14px;
    }

    /* Footer */
    .footer {
        padding: 30px 0 0;
    }

    .footer .col-md-4,
    .footer .col-md-8 {
        margin-bottom: var(--spacing-lg);
    }

    .footer h3 {
        font-size: 18px;
        margin-bottom: var(--spacing-md);
    }

    .footer ul li {
        margin-bottom: var(--spacing-xs);
    }

    .footer-bottom {
        padding: 15px 0;
    }

    .footer-bottom .col-md-5,
    .footer-bottom .col-md-7 {
        text-align: center;
        margin-bottom: var(--spacing-sm);
    }

    .footer-bottom ul {
        justify-content: center;
    }

    .footer-bottom ul li {
        font-size: 13px;
    }

    /* Client Area */
    .menu-banner {
        padding: 20px 0;
    }

    .menu-banner .welcome h1 {
        font-size: 20px;
    }

    .menu-banner .infoBox {
        margin-top: var(--spacing-md);
    }

    .menu-banner .infoBox>div {
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }

    .menu-list ul {
        flex-wrap: wrap;
    }

    .menu-list ul li {
        width: 50% !important;
        border-bottom: 1px solid var(--border-light);
    }

    .menu-list ul li a {
        font-size: 13px;
        padding: 12px 8px;
    }

    .menu-list ul li a i {
        font-size: 18px;
    }

    .menu-list ul li a span {
        display: block;
        margin-top: 4px;
    }

    /* Panels */
    .panel {
        margin-bottom: var(--spacing-md);
    }

    .panel-heading {
        padding: var(--spacing-md);
        font-size: 16px;
    }

    .panel-body {
        padding: var(--spacing-md);
    }

    /* Tables */
    .table-responsive {
        border: none;
    }

    .table {
        font-size: 13px;
    }

    .table th,
    .table td {
        padding: 8px;
    }

    /* Forms */
    .form-group {
        margin-bottom: var(--spacing-md);
    }

    .form-control {
        height: 44px;
        font-size: 14px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .btn-lg {
        height: 44px;
        font-size: 15px;
    }

    /* Modals */
    .modal-dialog {
        margin: 10px;
    }

    .modal-content {
        border-radius: var(--border-radius);
    }

    /* Cards */
    .card {
        margin-bottom: var(--spacing-md);
    }

    /* Breadcrumb */
    .clientarea__breadcrumbs {
        padding: 10px 0;
    }

    .breadcrumb {
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Fixes for base.min.css fixed widths */
    .empty-cart.not-found img,
    .not-found img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Fix for hostquix-style.css min-width */
    .mega-menu-header {
        min-width: auto !important;
        padding: 15px 0;
    }
}

/* ========================================
   3. SMALL MOBILE (max-width: 480px)
   ======================================== */

@media (max-width: 480px) {

    /* Home Products - Full Width */
    .home-box {
        width: calc(100% - 2px);
        margin: 5px 1px;
    }

    /* Domain Search - Stack */
    .home__domain form input {
        width: 100%;
        border-radius: var(--border-radius);
        margin-bottom: var(--spacing-xs);
    }

    .home__domain form .btn {
        width: 100%;
        border-radius: var(--border-radius);
    }

    .home-domain-bar .form-bg input {
        width: 100%;
        border-radius: var(--border-radius);
        margin-bottom: var(--spacing-xs);
    }

    .home-domain-bar .form-bg .btn {
        width: 100%;
        border-radius: var(--border-radius);
    }

    /* Menu List - Full Width */
    .menu-list ul li {
        width: 100% !important;
    }

    /* Footer Social */
    .footer-social-link ul {
        justify-content: center;
    }

    /* Buttons - Full Width */
    .btn-block-mobile {
        width: 100%;
        display: block;
    }
}

/* ========================================
   4. LANDSCAPE ORIENTATION
   ======================================== */

@media (max-width: 767px) and (orientation: landscape) {
    #home-carousel-1x .carousel-item {
        min-height: 400px;
    }

    .menu-banner {
        padding: 15px 0;
    }
}

/* ========================================
   5. PRINT STYLES
   ======================================== */

@media print {

    .header,
    .mobile-header,
    .footer,
    .news-bar,
    .menu-banner,
    .menu-list,
    .sidebar,
    .btn,
    .breadcrumb {
        display: none !important;
    }

    .panel {
        border: 1px solid #000;
        page-break-inside: avoid;
    }

    .invoice-container {
        box-shadow: none;
    }
}

/* ========================================
   6. HIGH DPI SCREENS
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Optimize images and icons for retina displays */
    .logo,
    .product-icon,
    .payment-icon {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ========================================
   7. ACCESSIBILITY - REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   8. DARK MODE SUPPORT (Optional)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Dark mode can be implemented here if needed */
    /* Currently maintaining light theme for corporate identity */
}