/* * Project Alpha - Mobile Master Styles (Final Release)
 * Location: design/assets/mobile-style.css
 * Features:
 * 1. Clean Layout (No Sticky Bar)
 * 2. Universal Action Button
 * 3. Responsive YouTube Video (16:9)
 * 4. Hybrid Share & Related Products
 * 5. Invisible Ad Slots
 */

/* =========================================
   1. GLOBAL RESET & LAYOUT
   ========================================= */
.alpha-container {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 15px;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}

.alpha-breadcrumb {
    font-size: 13px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

/* Main Grid: Gallery (Left) - Info (Right) */
.alpha-top-grid {
    display: grid;
    grid-template-columns: 42% 55%;
    gap: 3%;
    margin-bottom: 30px;
}

/* =========================================
   2. HEADER AREA
   ========================================= */
.alpha-header-wrapper {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.alpha-product-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #111;
    line-height: 1.3;
}
.alpha-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
}
.meta-item {
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
/* Badges */
.brand-badge { background: #2271b1; color: #fff; text-transform: uppercase; }
.status-badge { background: #f0f0f1; color: #444; border: 1px solid #ddd; }
.status-badge.status-ok { color: #008a20; background: #eaffe6; border-color: #c3e6cb; }
.status-badge.status-wait { color: #d63638; background: #ffe6e6; border-color: #f5c6cb; }
.release-date { color: #666; }

/* =========================================
   3. GALLERY SECTION
   ========================================= */
.alpha-gallery-section { position: sticky; top: 20px; }

.alpha-main-image-box {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 20px;
    background: #fff;
    text-align: center;
    margin-bottom: 15px;
}
.main-img-display { 
    max-width: 100%; 
    height: auto; 
    max-height: 400px; 
    object-fit: contain; 
}

.alpha-thumb-grid { display: flex; justify-content: center; gap: 10px; }

.thumb-item {
    width: 60px; height: 60px; border: 1px solid #ddd;
    border-radius: 6px; padding: 3px; cursor: pointer; background: #fff;
    transition: border-color 0.2s;
}
.thumb-item img { width: 100%; height: 100%; object-fit: contain; }
.thumb-item:hover, .thumb-item.active-thumb { 
    border-color: #2271b1; 
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.1); 
}

/* =========================================
   4. PRICE CARD (Universal)
   ========================================= */
.alpha-price-card {
    background: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    margin-bottom: 25px;
}
.price-section { margin-bottom: 15px; }
.price-label { font-size: 13px; color: #666; text-transform: uppercase; display: block; letter-spacing: 0.5px; }
.price-amount { font-size: 28px; font-weight: 800; color: #e74c3c; margin: 5px 0 0 0; }
.price-amount-small { font-size: 18px; font-weight: 700; color: #333; display: block; margin-top: 5px; }

/* Variants */
.variant-wrapper {
    background: #fff; border: 1px solid #eee; border-radius: 6px;
    padding: 12px; margin: 15px 0;
}
.variant-item {
    display: flex; justify-content: space-between; font-size: 14px;
    padding: 6px 0; border-bottom: 1px dashed #f0f0f0;
}
.variant-item:last-child { border-bottom: none; }
.v-ram { color: #555; }
.v-price { font-weight: 700; color: #2271b1; }
.price-disclaimer { font-size: 11px; color: #999; margin: 10px 0 0 0; font-style: italic; }

/* Main CTA Button (Showroom) - Visible Everywhere */
.alpha-action-area {
    margin-top: 20px;
    text-align: center;
    display: block; 
}
.alpha-main-btn {
    display: inline-block;
    background: #e74c3c; 
    color: #fff;
    padding: 12px 25px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.3s;
    text-align: center;
}
.alpha-main-btn:hover { background: #c0392b; }

/* =========================================
   5. QUICK VIEW ICONS
   ========================================= */
.alpha-quick-view-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; }
.qv-item { background: #f7f9fc; border: 1px solid #eef1f5; padding: 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; }
.qv-icon { font-size: 24px; color: #2271b1; width: 24px; text-align: center; }
.qv-info { display: flex; flex-direction: column; line-height: 1.2; }
.qv-label { font-size: 11px; color: #777; text-transform: uppercase; }
.qv-value { font-size: 13px; font-weight: 700; color: #333; }

/* =========================================
   6. CONTENT AREA & SHARE SYSTEM
   ========================================= */
.alpha-content-area {
    margin-bottom: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}
.alpha-the-content {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
}
.alpha-the-content p { margin-bottom: 15px; }
.alpha-the-content h2, .alpha-the-content h3 { margin-top: 25px; margin-bottom: 10px; font-weight: 600; color: #222; }
.alpha-the-content ul { padding-left: 20px; margin-bottom: 15px; }

/* Share Box Styles */
.alpha-share-area { margin-top: 30px; border-top: 1px dashed #eee; padding-top: 15px; }
.share-title { font-size: 14px; color: #777; margin-bottom: 10px; font-weight: 600; }
.share-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* Desktop Fallback Buttons */
.share-btn {
    padding: 8px 15px; border-radius: 4px; font-size: 13px; font-weight: 600;
    text-decoration: none; color: #fff; cursor: pointer; border: none;
    display: inline-block; transition: opacity 0.3s;
}
.fb-btn { background: #1877f2; }
.wa-btn { background: #25d366; }
.copy-btn { background: #555; }
.share-btn:hover { opacity: 0.9; }

/* Mobile Native Share Button Style */
.native-share-style {
    background: #444; 
    color: #fff;
    border: none;
    cursor: pointer;
    width: auto !important;
    padding: 8px 20px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 25px; /* Pill Shape */
    transition: background 0.3s;
    font-weight: 600;
}
.native-share-style:hover { background: #222; }

/* Copy Confirmation */
#copyConfirm { display: block; margin-top: 8px; font-weight: bold; }

/* =========================================
   7. SHOWROOM & REVIEW
   ========================================= */
#showroom-section { scroll-margin-top: 20px; margin-bottom: 30px; }

.alpha-review-container { background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; padding: 25px; margin-bottom: 30px; }
.verdict-title { border-bottom: 2px solid #ffd700; display: inline-block; padding-bottom: 5px; margin: 0 0 15px 0; font-size: 18px; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.pros-title, .cons-title { font-size: 16px; margin: 0 0 10px 0; display: flex; align-items: center; gap: 8px; }
.pros-title { color: #27ae60; }
.cons-title { color: #c0392b; }

.pc-list { list-style: none; padding: 0; margin: 0; }
.pc-list li { padding-left: 20px; position: relative; margin-bottom: 8px; font-size: 14px; color: #555; }
.pros-col .pc-list li::before { content: '✔'; position: absolute; left: 0; color: #27ae60; font-weight: bold; }
.cons-col .pc-list li::before { content: '✖'; position: absolute; left: 0; color: #c0392b; font-weight: bold; }

/* YouTube Responsive Fix (16:9 Aspect Ratio) */
.alpha-video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: 8px;
    margin-top: 10px;
}
.alpha-video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
}

/* =========================================
   8. SPECS & RELATED PRODUCTS
   ========================================= */
/* Specs Table */
.alpha-specs-container { background: #fff; border: 1px solid #e1e1e1; border-radius: 10px; overflow: hidden; margin-bottom: 50px; }
.specs-main-title { background: #f8f9fa; padding: 15px 20px; margin: 0; font-size: 18px; border-bottom: 1px solid #e1e1e1; color: #222; }
.alpha-specs-table { width: 100%; border-collapse: collapse; }
.section-row th { background: #eef3f7; color: #2271b1; text-transform: uppercase; font-size: 12px; padding: 10px 20px; text-align: left; letter-spacing: 1px; border-bottom: 1px solid #e1e1e1; }
.spec-label { width: 30%; padding: 12px 20px; background: #fff; font-weight: 600; color: #555; font-size: 14px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.spec-value { padding: 12px 20px; background: #fff; color: #333; font-size: 14px; border-bottom: 1px solid #f0f0f0; line-height: 1.5; }

/* Related Products Grid */
.alpha-section-related { margin-top: 40px; border-top: 1px solid #eee; padding-top: 20px; }
.related-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: #222; }
.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Desktop: 4 items per row */
    gap: 15px;
}
.related-card {
    text-decoration: none; border: 1px solid #eee; border-radius: 8px;
    overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: block;
    background: #fff;
}
.related-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-color: #2271b1; }
.related-img { height: 150px; display: flex; align-items: center; justify-content: center; background: #f9f9f9; padding: 10px; }
.related-img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.related-info { padding: 10px; text-align: center; }
.related-name { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.related-price { font-size: 13px; color: #e74c3c; font-weight: 700; }

/* =========================================
   9. MOBILE RESPONSIVE ENGINE
   ========================================= */
@media only screen and (max-width: 768px) {
    
    /* Layout Stack (Single Column) */
    .alpha-top-grid, .review-grid { grid-template-columns: 100%; gap: 20px; }
    
    /* Unstick Gallery on Mobile (Allows scrolling past it) */
    .alpha-gallery-section { position: static; }
    
    /* Related Products: 2 items per row */
    .related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    
    /* Typography & Spacing */
    .alpha-product-title { font-size: 22px; }
    .spec-label, .spec-value { font-size: 13px; padding: 10px 15px; }
    .spec-label { width: 35%; }
    
    /* Content Area Padding */
    .alpha-content-area { padding: 15px; }
    
    /* Bottom Spacing (Clean, No Sticky Bar) */
    .mobile-master-layout { padding-bottom: 40px; }
}