/* ==========================================================================
   Mobile Product Page
   ========================================================================== */

@media (max-width: 968px) {
    .showcase-card {
        padding: 30px;
        border-radius: 30px;
        margin: 0 15px;
    }

    .showcase-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "header"
            "gallery"
            "actions";
        gap: 30px;
    }
}

@media (max-width: 600px) {
/* Showcase Layout */
    .product-showcase {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .showcase-card {
        padding: 0 !important;
        border-radius: 0 !important;
        margin: 0 20px !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .showcase-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "header"
            "gallery"
            "actions";
        gap: 16px !important;
        padding: 0;
    }

    .gallery-container {
        grid-area: gallery;
    }

    .showcase-header {
        grid-area: header;
        align-items: flex-start;
        text-align: right;
        padding-top: 0;
        gap: 8px !important;
    }

    .showcase-actions {
        grid-area: actions;
        align-items: stretch;
        text-align: right;
        gap: 12px;
    }

    /* Gallery & Dots */
    .main-image-wrap {
        padding: 8px !important;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    }

    .main-image-wrap img {
        border-radius: 16px;
    }

    .dots-navigation {
        display: flex;
        margin-top: -10px;
        margin-bottom: 20px;
        padding: 0 0 20px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .nav-btn {
        background: none;
        border: none;
        color: var(--text-main);
        font-size: 1.8rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.3s ease;
    }

    .carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.5);
        padding: 10px 20px;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.8);
    }

    .dot {
        width: 8px;
        height: 8px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .dot.active {
        width: 24px;
        border-radius: 4px;
        background: var(--primary);
    }

    .thumbnails-grid {
        display: none;
    }

    /* Typography & Content */
    .badges-wrap {
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 0;
    }

    .pro-badge {
        margin-bottom: 0 !important;
        font-size: 0.75rem;
        padding: 6px 12px;
        white-space: nowrap;
    }

    .title-row {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        margin-bottom: 0;
        width: 100%;
    }

    .showcase-title {
        font-size: 1.4rem;
        margin: 20px 0 10px 0;
        text-align: right;
        line-height: 1.3;
        white-space: normal;
    }

    .showcase-desc {
        font-size: 0.9rem;
        line-height: 1.8;
        margin-bottom: 0;
        padding-right: 25px;
        text-align: right;
        width: 100%;
        color: #455161;
    }

    .showcase-desc li {
        margin-bottom: 5px !important;
        list-style-type: disc;
    }

    /* Price & Actions */
    .showcase-price {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 12px;
        padding: 24px 16px 20px;
        margin-bottom: 5px;
        width: 100%;
        background: #fff;
        border-radius: 20px;
        position: relative;
    }

    .showcase-price::before {
        content: 'السعر';
        position: absolute;
        top: -12px;
        right: 24px;
        background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
        color: #fff;
        font-size: 0.85rem;
        font-weight: 800;
        padding: 4px 16px;
        border-radius: 50px;
        box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
    }

    .showcase-price .val {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--primary);
        line-height: 1;
        letter-spacing: -1px;
    }

    .showcase-price .cur {
        font-size: 1rem;
        font-weight: 800;
        color: var(--primary);
        background: rgba(79, 70, 229, 0.1);
        padding: 6px 12px;
        border-radius: 12px;
    }

    .buy-action {
        display: flex;
        gap: 12px;
    }

    .buy-btn {
        width: 100%;
        font-size: 1.25rem !important;
        padding: 20px 32px !important;
        background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
        box-shadow: 0 10px 30px rgba(79, 70, 229, 0.3) !important;
        border-radius: 16px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .shipping-notice {
        margin-top: -10px !important;
        padding: 14px 1px;
        border-radius: 12px;
        font-size: 0.8rem !important;
        font-weight: 600;
        justify-content: flex-start;
        gap: 12px;
        line-height: 1.5;
    }

    .shipping-notice i {
        font-size: 1.3rem;
        flex-shrink: 0;
    }

    /* Mobile Custom Price Styling matching screenshot */
    .mobile-price-container.mobile-only {
        display: flex !important;
    }

    .mobile-price-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: -10px;
        margin-bottom: 15px;
        width: 100%;
        border-radius: 20px;
        position: relative;
    }

    .special-badge {
        position: absolute;
        top: -12px;
        right: 1px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .badge-text {
        background: #BA4B53;
        color: white;
        padding: 4px 14px;
        border-radius: 8px;
        font-size: 0.5rem;
        font-weight: 800;
    }

    .badge-time {
        color: #BA4B53;
        font-weight: 800;
        font-size: 0.8rem;
        margin-top: 2px;
    }

    .price-main {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-bottom: 5px;
    }

    .price-main .amount {
        font-size: 2.8rem;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        font-weight: 800;
        color: #000;
        line-height: 1;
        letter-spacing: -1px;
        direction: ltr;
        unicode-bidi: isolate;
        display: inline-block;
        transform: translateY(-1px);
    }

    .price-main .currency-symbol {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 0.5em;
        font-weight: 700;
        vertical-align: 0.28em;
        margin-right: 4px;
    }

    .price-main .discount {
        font-size: 1.8rem;
        font-weight: 800;
        color: #BA4B53;
        direction: ltr;
        unicode-bidi: isolate;
    }

    .price-old {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: #6b7280;
        font-weight: 700;
    }

    .price-old .old-label {
        font-size: 0.8rem;
        font-weight: 700;
        color: #8b92a0;
    }

    .price-old .old-amount {
        font-size: 1rem;
        text-decoration: line-through;
        direction: ltr;
        unicode-bidi: isolate;
        display: inline-block;
        transform: translateY(1px);
    }

    .mobile-buy-btn {
        width: 100%;
        background: #7148FC !important;
        box-shadow: 0 10px 30px rgba(113, 72, 252, 0.3) !important;
        border-radius: 16px !important;
        padding: 18px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        position: relative !important;
    }

    .btn-syria-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        height: 40px;
        width: auto;
        object-fit: contain;
        filter: brightness(0) invert(1);
        pointer-events: none;
        animation: float-logo 5s ease-in-out infinite;
    }

    @keyframes float-logo {

        0%,
        100% {
            transform: translateY(-50%) translateY(-3px);
        }

        50% {
            transform: translateY(-50%) translateY(3px);
        }
    }

    /* Tech Specs - Mobile Overrides */
    .tech-specs {
        padding: 30px 16px 24px !important;
    }

    .specs-header {
        margin-bottom: 30px !important;
    }

    .specs-subtitle {
        display: none !important;
    }

    .specs-grid {
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        gap: 12px !important;
    }

    .spec-item {
        padding: 14px 20px !important;
    }

    .spec-label {
        margin-bottom: 10px !important;
    }

    .specs-title.mobile-only {
        display: block !important;
    }

    .specs-title.desktop-only {
        display: none !important;
    }

    /* Mobile Specs Title — styled independently to match product title feel */
    .mobile-specs-title {
        font-size: 1.6rem;
        font-weight: 900;
        line-height: 1.3;
        letter-spacing: -0.5px;
        text-align: center;
        color: var(--text-main);
        margin: 0 0 0 0;
        font-family: var(--font-main);
    }

    .specs-title-gradient {
        background: linear-gradient(135deg, #4F46E5 0%, #06b6d4 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 900;
        letter-spacing: -0.5px;
        padding: 0.1em 0;
        display: inline-block;
    }
}