/* ============================================
   Bilhandler Shop - Mobile Styles v1.8.6
   Complete mobile overhaul
   ============================================ */

/* ============================================
   GLOBAL MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Body locked when menu is open */
    body.bshop-menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    .elementor-section,
    .elementor-container,
    .elementor-column-wrap,
    .elementor-widget-wrap,
    .elementor-widget-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* ============================================
       HEADER - Mobile Layout
       ============================================ */
    .bshop-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
        background: #ffffff !important;
    }

    .bshop-header-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        min-height: 60px !important;
        gap: 12px !important;
    }

    /* Logo */
    .bshop-header-logo {
        flex-shrink: 0 !important;
        order: 1 !important;
    }

    .bshop-logo-text {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        letter-spacing: -0.5px !important;
    }

    .bshop-logo-img {
        height: 32px !important;
        width: auto !important;
    }

    /* ============================================
       HEADER ICONS - EXACT same style as hamburger
       ============================================ */
    .bshop-header-icons {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: auto !important;
        margin-right: 8px !important;
        position: static !important;
        transform: none !important;
        order: 2 !important;
    }

    /* Force exact same size - all icons 40x40px */
    .bshop-header-icon,
    .bshop-header-icons a,
    .bshop-header-icons .bshop-header-icon,
    a.bshop-header-icon,
    .bshop-cart-icon,
    .bshop-account-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        background: #03331e !important;
        border-radius: 10px !important;
        color: #ffffff !important;
        text-decoration: none !important;
        transition: background 0.2s ease !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    .bshop-header-icon:hover,
    .bshop-cart-icon:hover,
    .bshop-account-icon:hover {
        background: #9c7250 !important;
    }

    .bshop-header-icon svg,
    .bshop-cart-icon svg,
    .bshop-account-icon svg {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        display: block !important;
        stroke: #ffffff !important;
        color: #ffffff !important;
        fill: none !important;
    }

    .bshop-cart-count {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        background: #9c7250 !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        min-width: 16px !important;
        height: 16px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ============================================
       HAMBURGER MENU BUTTON - Same size as icons (40px)
       ============================================ */
    .bshop-mobile-toggle {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        background: #03331e !important;
        border: none !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        order: 3 !important;
        box-sizing: border-box !important;
    }

    .bshop-mobile-toggle span {
        display: block !important;
        width: 16px !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }

    .bshop-mobile-toggle:hover,
    .bshop-mobile-toggle.active {
        background: #9c7250 !important;
    }

    /* Hamburger animation when active */
    .bshop-mobile-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    .bshop-mobile-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }
    .bshop-mobile-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px) !important;
    }

    /* ============================================
       MOBILE NAVIGATION - HIDDEN BY DEFAULT
       ============================================ */
    .bshop-header-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #ffffff !important;
        z-index: 100000 !important;
        flex-direction: column !important;
        padding: 80px 24px 40px !important;
        box-shadow: -10px 0 40px rgba(0,0,0,0.2) !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        overflow-y: auto !important;
    }

    /* OPEN STATE */
    .bshop-header-nav.active {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    /* Hide icons inside nav (they should be in header) */
    .bshop-header-nav .bshop-header-icons {
        display: none !important;
    }

    /* ============================================
       CLOSE BUTTON
       ============================================ */
    .bshop-nav-close {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        width: 44px !important;
        height: 44px !important;
        background: #f1f5f9 !important;
        border: none !important;
        border-radius: 10px !important;
        font-size: 28px !important;
        line-height: 1 !important;
        color: #334155 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
    }

    .bshop-nav-close:hover {
        background: #e2e8f0 !important;
        color: #03331e !important;
    }

    /* ============================================
       NAV OVERLAY
       ============================================ */
    #bshop-nav-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 99999 !important;
        opacity: 1 !important;
    }

    /* ============================================
       NAV LIST ITEMS
       ============================================ */
    .bshop-nav-list {
        display: flex !important;
        flex-direction: column !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .bshop-nav-item {
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .bshop-nav-link {
        display: block !important;
        padding: 16px 0 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        text-decoration: none !important;
    }

    .bshop-nav-link:hover {
        color: #03331e !important;
    }

    .bshop-header-cta {
        margin-top: 24px !important;
        width: 100% !important;
        text-align: center !important;
        padding: 14px 24px !important;
    }

    /* ============================================
       HERO SECTION - Mobile
       ============================================ */
    .bshop-hero {
        padding: 24px 16px 32px !important;
        border-radius: 0 0 20px 20px !important;
        margin: 0 !important;
    }

    .bshop-hero-content {
        text-align: center !important;
    }

    .bshop-hero-title {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    .bshop-hero-subtitle {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }

    .bshop-hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .bshop-hero-buttons .bshop-btn {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    .bshop-hero-media {
        margin-top: 24px !important;
    }

    .bshop-mockup-browser {
        max-width: 100% !important;
    }

    .bshop-mockup-content {
        height: 180px !important;
    }

    /* ============================================
       FEATURES SECTION - Mobile
       ============================================ */
    .bshop-features {
        padding: 40px 16px !important;
    }

    .bshop-features-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .bshop-feature-card {
        padding: 20px !important;
    }

    .bshop-feature-icon {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 12px !important;
    }

    .bshop-feature-card h3 {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }

    .bshop-feature-card p {
        font-size: 13px !important;
    }

    /* ============================================
       PRICING SECTION - Mobile
       ============================================ */
    .bshop-pricing {
        padding: 40px 16px !important;
    }

    .bshop-pricing-cards {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        max-width: 100% !important;
    }

    .bshop-pricing-card {
        padding: 24px 20px !important;
        margin: 0 !important;
    }

    .bshop-price-amount {
        font-size: 36px !important;
    }

    .bshop-pricing-features li {
        font-size: 13px !important;
        padding: 10px 0 !important;
    }

    /* Addon items */
    .bshop-addon-item {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 14px 0 !important;
    }

    .bshop-addon-info {
        flex: 1 !important;
        min-width: 60% !important;
    }

    .bshop-addon-info strong {
        font-size: 13px !important;
    }

    .bshop-addon-info p {
        font-size: 12px !important;
    }

    .bshop-addon-price {
        font-size: 14px !important;
    }

    /* ============================================
       WEBSITE CARD - Mobile (Hjemmeside pakke)
       ============================================ */
    .bshop-website-card,
    [class*="website"] .bshop-pricing-card,
    .bshop-pricing-card.bshop-website {
        padding: 24px 20px !important;
        text-align: center !important;
    }

    .bshop-website-card h3,
    .bshop-website-card .bshop-price-amount {
        font-size: 28px !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }

    .bshop-website-icon {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 16px !important;
    }

    .bshop-website-price {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .bshop-website-card .bshop-btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    /* ============================================
       PRODUCTS SECTION - Mobile
       ============================================ */
    .bshop-products {
        padding: 40px 16px !important;
    }

    .bshop-products-grid,
    .bshop-products-grid[data-columns="2"],
    .bshop-products-grid[data-columns="3"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        max-width: 100% !important;
    }

    .bshop-product-card {
        margin: 0 !important;
    }

    .bshop-product-content {
        padding: 20px !important;
    }

    .bshop-product-title {
        font-size: 16px !important;
    }

    .bshop-price-current {
        font-size: 26px !important;
    }

    .bshop-product-button {
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    /* ============================================
       DEMO SECTION - Mobile
       ============================================ */
    .bshop-demo {
        padding: 40px 16px !important;
    }

    .bshop-demo-mobile-link {
        display: block !important;
        text-align: center !important;
        padding: 40px 20px !important;
    }

    .bshop-demo-iframe-container,
    .bshop-demo-toolbar {
        display: none !important;
    }

    /* ============================================
       FAQ SECTION - Mobile
       ============================================ */
    .bshop-faq {
        padding: 40px 16px !important;
    }

    .bshop-faq-question {
        font-size: 14px !important;
        padding: 14px 0 !important;
    }

    .bshop-faq-answer p {
        font-size: 13px !important;
        padding: 0 0 14px 0 !important;
    }

    /* ============================================
       FOOTER - Mobile
       ============================================ */
    .bshop-footer-main {
        padding: 40px 0 30px !important;
    }

    .bshop-footer-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 0 16px !important;
    }

    .bshop-footer-company {
        grid-column: 1 !important;
    }

    .bshop-footer-brand {
        font-size: 20px !important;
    }

    .bshop-footer-desc {
        font-size: 13px !important;
        max-width: 100% !important;
    }

    .bshop-footer-col h4 {
        font-size: 12px !important;
        margin-bottom: 12px !important;
    }

    .bshop-footer-links a,
    .bshop-footer-contact li {
        font-size: 13px !important;
    }

    .bshop-footer-bottom {
        padding: 20px 0 !important;
    }

    .bshop-footer-bottom .bshop-footer-container {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
    }

    .bshop-copyright {
        font-size: 12px !important;
    }

    .bshop-footer-legal {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .bshop-footer-legal a {
        font-size: 12px !important;
    }

    /* ============================================
       TRUST BADGES - Mobile
       ============================================ */
    .bshop-trust-badges {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .bshop-trust-badge {
        font-size: 13px !important;
    }

    /* ============================================
       SECTION TITLES - Mobile
       ============================================ */
    .bshop-section-title {
        font-size: 22px !important;
        padding: 0 !important;
        margin-bottom: 8px !important;
    }

    .bshop-section-subtitle {
        font-size: 14px !important;
        padding: 0 !important;
        margin-bottom: 24px !important;
    }

    /* ============================================
       BUTTONS - Mobile
       ============================================ */
    .bshop-btn {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   WOOCOMMERCE CART PAGE - Mobile
   ============================================ */
@media (max-width: 768px) {
    .woocommerce-cart .woocommerce,
    .woocommerce-cart #content .woocommerce {
        padding: 20px 16px !important;
        max-width: 100% !important;
    }

    .woocommerce-cart .shop_table {
        display: block !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .woocommerce-cart .shop_table thead {
        display: none !important;
    }

    .woocommerce-cart .shop_table tbody {
        display: block !important;
    }

    .woocommerce-cart .shop_table tr {
        display: block !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
    }

    .woocommerce-cart .shop_table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 8px 0 !important;
        border: none !important;
    }

    .woocommerce-cart .shop_table .product-name {
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    .woocommerce-cart .shop_table .product-price,
    .woocommerce-cart .shop_table .product-subtotal {
        font-size: 15px !important;
    }

    .woocommerce-cart .cart_totals {
        padding: 20px !important;
        margin-top: 20px !important;
    }

    .woocommerce-cart .cart_totals h2 {
        font-size: 18px !important;
    }

    .woocommerce-cart .wc-proceed-to-checkout .checkout-button {
        width: 100% !important;
        padding: 16px !important;
        font-size: 15px !important;
    }

    /* WooCommerce Blocks Cart */
    .wc-block-cart,
    .wp-block-woocommerce-cart {
        padding: 16px !important;
    }

    .wc-block-cart__main,
    .wc-block-cart__sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .wc-block-components-sidebar-layout {
        flex-direction: column !important;
    }

    .wc-block-cart-items__row {
        padding: 16px 0 !important;
    }

    .wc-block-cart-item__product {
        gap: 12px !important;
    }

    .wc-block-cart-item__image {
        width: 60px !important;
        flex-shrink: 0 !important;
    }

    .wc-block-components-product-name {
        font-size: 14px !important;
    }

    .wc-block-formatted-money-amount {
        font-size: 14px !important;
    }

    .wc-block-cart__submit-container {
        padding: 16px !important;
    }

    .wc-block-cart__submit-button {
        width: 100% !important;
        padding: 16px !important;
    }
}

/* ============================================
   WOOCOMMERCE CHECKOUT - Mobile
   ============================================ */
@media (max-width: 768px) {
    .woocommerce-checkout .woocommerce,
    body.woocommerce-checkout .woocommerce {
        padding: 20px 16px !important;
        max-width: 100% !important;
    }

    .woocommerce-checkout .col2-set {
        display: block !important;
    }

    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2 {
        width: 100% !important;
        float: none !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
    }

    .woocommerce-checkout h3 {
        font-size: 18px !important;
    }

    .woocommerce-checkout .form-row {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }

    .woocommerce-checkout .form-row input,
    .woocommerce-checkout .form-row select,
    .woocommerce-checkout .form-row textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    .woocommerce-checkout-review-order {
        padding: 20px !important;
    }

    .woocommerce-checkout #place_order {
        width: 100% !important;
        padding: 16px !important;
        font-size: 16px !important;
    }

    /* WooCommerce Blocks Checkout */
    .wc-block-checkout,
    .wp-block-woocommerce-checkout {
        padding: 16px !important;
    }

    .wc-block-checkout__main,
    .wc-block-checkout__sidebar {
        width: 100% !important;
    }

    .wc-block-components-checkout-step {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    .wc-block-components-checkout-step__heading {
        font-size: 16px !important;
    }

    .wc-block-checkout__actions {
        padding: 16px !important;
    }

    .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
        width: 100% !important;
        padding: 16px !important;
    }
}

/* ============================================
   WOOCOMMERCE PRODUCT PAGE - Mobile
   ============================================ */
@media (max-width: 768px) {
    .woocommerce div.product,
    .single-product .product {
        padding: 16px !important;
    }

    .woocommerce div.product .product_title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .woocommerce div.product p.price {
        font-size: 24px !important;
    }

    .woocommerce div.product .woocommerce-product-details__short-description {
        font-size: 14px !important;
    }

    .woocommerce div.product form.cart {
        padding: 20px !important;
        margin: 20px 0 !important;
    }

    .woocommerce div.product form.cart .quantity {
        margin-bottom: 12px !important;
    }

    .woocommerce div.product form.cart .single_add_to_cart_button {
        width: 100% !important;
        padding: 16px !important;
    }
}

/* ============================================
   EXTRA SMALL DEVICES (< 400px)
   ============================================ */
@media (max-width: 400px) {
    .bshop-header-container {
        padding: 10px 12px !important;
    }

    .bshop-logo-text {
        font-size: 16px !important;
    }

    .bshop-header-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .bshop-mobile-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .bshop-hero-title {
        font-size: 20px !important;
    }

    .bshop-section-title {
        font-size: 18px !important;
    }

    .bshop-price-amount {
        font-size: 28px !important;
    }
}