/* Mobile Optimization for Product Detail Page - EMAG Style */
/* Only affects screens below 768px - Desktop remains unchanged */
/* This targets the detail_emag_final.html template structure */

@media (max-width: 767px) {
    /* Prevent horizontal overflow on body */
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Product page container - reduce margins and padding */
    .product-page {
        margin: 0.25rem !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
        width: calc(100% - 0.5rem) !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Hero section - stack vertically on mobile */
    .hero-section {
        flex-direction: column !important;
        padding: 1rem !important;
        gap: 1rem !important;
    }

    /* Gallery column - full width on mobile */
    .gallery-column {
        flex: 1 1 100% !important;
    }

    /* Hero image - reduce padding and height */
    .hero-image {
        padding: 1rem !important;
        min-height: 280px !important;
        border-radius: 12px !important;
    }

    .hero-image img {
        max-height: 250px !important;
    }

    /* Gallery navigation buttons - smaller on mobile */
    .gallery-nav {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }

    .gallery-nav.prev {
        left: 10px !important;
    }

    .gallery-nav.next {
        right: 10px !important;
    }

    /* Thumbnail strip - smaller thumbnails */
    .thumb-strip {
        gap: 0.5rem !important;
        padding: 0.25rem !important;
    }

    .thumb-item {
        flex: 0 0 60px !important;
        height: 60px !important;
        border-radius: 8px !important;
    }

    .thumb-item img {
        width: 48px !important;
        height: 48px !important;
    }

    /* Info column - full width on mobile */
    .info-column {
        flex: 1 1 100% !important;
        gap: 0.875rem !important;
    }

    /* Brand row - adjust spacing */
    .brand-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .brand-row img {
        max-height: 36px !important;
        max-width: 120px !important;
    }

    /* Rating badge - smaller text */
    .rating-badge {
        font-size: 0.75rem !important;
        gap: 0.25rem !important;
    }

    .rating-badge i {
        font-size: 0.875rem !important;
    }

    .rating-badge strong {
        font-size: 0.875rem !important;
    }

    /* Hero title - smaller on mobile */
    .hero-title {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    /* Meta list - smaller text and wrapping */
    .meta-list {
        font-size: 0.75rem !important;
        gap: 0.75rem !important;
    }

    .meta-list strong {
        font-size: 0.625rem !important;
    }

    /* Price card - more compact on mobile */
    .price-card {
        padding: 1rem 1.25rem !important;
        border-radius: 12px !important;
        gap: 0.75rem !important;
        width: 100%;
        justify-content: center;
    }

    .price-card .current {
        font-size: 2rem !important;
    }

    .price-card .old {
        font-size: 1.125rem !important;
    }

    /* Stock indicator - smaller */
    .stock-indicator {
        font-size: 0.813rem !important;
        gap: 0.5rem !important;
    }

    /* Product short description - more compact on mobile */
    .product-short-description {
        padding: 0.75rem 0.875rem !important;
        margin: 0 !important;
        border-radius: 8px !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        box-shadow: 0 1px 4px rgba(59, 130, 246, 0.06) !important;
    }

    .product-short-description p {
        margin: 0 !important;
        font-size: 0.875rem !important;
    }

    .product-short-description strong {
        font-size: 0.875rem !important;
    }

    /* Quantity box - ultra compact on mobile */
    .qty-box {
        width: auto !important;
        max-width: 110px !important;
        justify-content: center;
        flex-shrink: 0 !important;
        align-self: center !important;
        border-radius: 8px !important;
        height: 40px !important;
    }

    .qty-box button {
        width: 32px !important;
        height: 40px !important;
        font-size: 1.125rem !important;
        font-weight: 400 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
        touch-action: manipulation !important;
        transition: background-color 0.15s ease !important;
        padding: 0 !important;
    }

    .qty-box button:active {
        background-color: #e5e7eb !important;
        transform: scale(0.96) !important;
    }

    .qty-box input {
        width: 46px !important;
        height: 40px !important;
        font-size: 0.938rem !important;
        font-weight: 600 !important;
        padding: 0 !important;
        border-left: 1px solid #e5e7eb !important;
        border-right: 1px solid #e5e7eb !important;
    }

    /* CTA row - better layout for mobile */
    .cta-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.625rem !important;
    }

    .btn-primary {
        flex: 1 1 calc(100% - 118px) !important;
        min-width: 0 !important;
        padding: 0.688rem 0.75rem !important;
        font-size: 0.813rem !important;
        border-radius: 8px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .btn-primary i {
        font-size: 1rem !important;
    }

    .btn-secondary {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
        border-radius: 8px !important;
        height: 44px !important;
    }

    /* Service card - hide on mobile to save space */
    .service-card {
        display: none !important;
    }

    /* Service grid - 2 columns on mobile */
    .emag-service-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Service item - more compact */
    .emag-service-item {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.5rem !important;
    }

    .emag-service-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.125rem !important;
        border-radius: 10px !important;
    }

    .emag-service-text {
        height: auto !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }

    .emag-service-label {
        font-size: 0.688rem !important;
        letter-spacing: 0.3px !important;
    }

    .emag-service-subtext {
        font-size: 0.75rem !important;
    }

    /* Tabs wrapper - reduce margins for more width */
    .tabs-wrapper {
        margin: 0 0.25rem 1.5rem !important;
        border-radius: 12px !important;
        max-width: calc(100% - 0.5rem) !important;
        overflow-x: hidden !important;
    }

    /* Tab navigation - scrollable on mobile */
    .tab-nav {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 0 0.5rem !important;
        gap: 0 !important;
    }

    .tab-nav::-webkit-scrollbar {
        display: none !important;
    }

    .tab-button {
        padding: 0.875rem 1rem !important;
        font-size: 0.813rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-bottom-width: 2px !important;
    }

    /* Tab panels - reduce vertical padding only - MUST override desktop */
    .tabs-wrapper .tab-panels {
        padding: 1rem 1rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Description tab - mobile optimization */
    #panel-description {
        font-size: 1rem !important;
        line-height: 1.65 !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
    }

    /* Force consistent spacing for all tab panels */
    .tab-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #panel-specs {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #panel-reviews {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #panel-docs {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #panel-description h2 {
        font-size: 1.5rem !important;
        margin: 0 0 1rem 0 !important;
        padding-bottom: 0.625rem !important;
        line-height: 1.3 !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }

    #panel-description h3 {
        font-size: 1.25rem !important;
        margin: 1.5rem 0 0.875rem 0 !important;
        line-height: 1.3 !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }

    #panel-description p {
        margin: 0 0 1rem 0 !important;
        font-size: 1rem !important;
        line-height: 1.65 !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    #panel-description ul,
    #panel-description ol {
        font-size: 1rem !important;
        line-height: 1.65 !important;
        margin: 0 0 1rem 0 !important;
        padding-left: 1.5rem !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    #panel-description li {
        margin-bottom: 0.5rem !important;
        font-size: 1rem !important;
    }

    #panel-description img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0.75rem auto !important;
        object-fit: contain !important;
    }

    #panel-description img.aligncenter {
        display: block !important;
        margin: 0.75rem auto !important;
    }

    /* Inline small images in description */
    #panel-description img.wp-image-419413,
    #panel-description img.wp-image-419414,
    #panel-description img.wp-image-419416,
    #panel-description img.wp-image-419417,
    #panel-description img.wp-image-419426,
    #panel-description img.wp-image-419427,
    #panel-description img.wp-image-419428 {
        display: inline-block !important;
        margin: 0 0.5rem 0 0 !important;
        width: 32px !important;
        height: 32px !important;
        vertical-align: middle !important;
    }

    #panel-description strong {
        font-weight: 700 !important;
    }

    #panel-description hr {
        margin: 1rem 0 !important;
    }

    /* Specifications table - mobile optimization */
    #panel-specs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #panel-specs table {
        font-size: 0.813rem !important;
        border-radius: 8px !important;
    }

    #panel-specs th,
    #panel-specs td {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.813rem !important;
    }

    #panel-specs th {
        width: 40% !important;
        font-size: 0.75rem !important;
    }

    /* Reviews section - adjust layout */
    .reviews-placeholder {
        gap: 1rem !important;
    }

    .reviews-score {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 1rem !important;
    }

    .reviews-score .score-number {
        font-size: 2rem !important;
    }

    .reviews-cards {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .review-card {
        padding: 0.875rem !important;
    }

    .review-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.875rem !important;
    }

    .review-name {
        font-size: 0.875rem !important;
    }

    .review-date {
        font-size: 0.688rem !important;
    }

    /* Reviews CTA */
    .reviews-cta {
        padding: 1rem !important;
    }

    .reviews-cta h4 {
        font-size: 1rem !important;
    }

    .reviews-cta p {
        font-size: 0.813rem !important;
    }

    .reviews-form {
        flex-direction: column !important;
    }

    .reviews-form input,
    .reviews-form button {
        width: 100% !important;
    }

    /* Disable image hover zoom on mobile */
    .hero-image img:hover {
        transform: none !important;
    }

    /* Touch-friendly - increase tap targets */
    .thumb-item,
    .gallery-nav,
    .tab-button,
    .btn-primary,
    .btn-secondary {
        min-height: 44px !important;
    }

    /* Text readability */
    .hero-title,
    .meta-list,
    .emag-service-label,
    .emag-service-subtext {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* Add bottom padding to avoid content being hidden by mobile bars */
    .product-page {
        margin-bottom: 2rem !important;
    }

    /* Tooltip pentru "Disponibil la furnizor" - Mobile Override */
    .stock-tooltip {
        bottom: auto !important;
        top: calc(100% + 10px) !important;
        left: 0 !important;
        right: auto !important;
        transform: translateY(-5px) !important;
        white-space: normal !important;
        width: calc(100vw - 48px) !important;
        max-width: 280px !important;
        font-size: 9px !important;
        padding: 6px 10px !important;
        line-height: 1.35 !important;
        border-radius: 6px !important;
    }

    .stock-tooltip::before {
        top: auto !important;
        bottom: 100% !important;
        left: 30px !important;
        transform: none !important;
        border-top-color: transparent !important;
        border-bottom-color: #1e293b !important;
        border-width: 6px !important;
    }

    .stock-tooltip strong {
        font-size: 10px !important;
        margin-bottom: 1px !important;
    }

    .stock-with-tooltip:hover .stock-tooltip,
    .stock-with-tooltip:active .stock-tooltip {
        transform: translateY(0) !important;
    }

    .tooltip-icon {
        font-size: 18px !important;
    }
}

/* Extra small phones (max-width: 375px) */
@media (max-width: 375px) {
    .product-page {
        margin: 0.25rem !important;
        border-radius: 8px !important;
    }

    .hero-section {
        padding: 0.75rem !important;
    }

    .hero-title {
        font-size: 1.125rem !important;
    }

    .price-card .current {
        font-size: 1.75rem !important;
    }

    .thumb-strip {
        gap: 0.375rem !important;
    }

    .thumb-item {
        flex: 0 0 50px !important;
        height: 50px !important;
    }

    .thumb-item img {
        width: 40px !important;
        height: 40px !important;
    }

    .emag-service-grid {
        grid-template-columns: 1fr !important;
    }

    .tab-button {
        padding: 0.75rem 0.875rem !important;
        font-size: 0.75rem !important;
    }
}

/* Landscape orientation on small devices */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-image {
        min-height: 200px !important;
    }

    .hero-image img {
        max-height: 180px !important;
    }
}