/**
 * BetteReview Layout CSS - Astra Child Theme
 *
 * This file contains all CSS customizations to transform the Astra theme
 * product card layout to match the BetteReview design pattern.
 *
 * Key changes:
 * - Transforms vertical/mixed card layouts to horizontal layout
 * - Resizes and reorders card sections (number, image, content, score)
 * - Applies BetteReview color palette and typography
 * - Maintains responsive behavior for mobile devices
 *
 * Date: 2026-06-03
 * Version: 1.0.0
 */

/* ============================================================
   SECTION 1: MAIN CARD CONTAINER - Horizontal Layout
   ============================================================ */

div[style*="display:flex"][style*="align-items:stretch"][style*="margin:0 0 16px"][style*="border:1px solid #e2e8f0"][style*="border-radius:12px"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin-bottom: 24px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    transition: box-shadow 0.3s ease !important;
}

div[style*="display:flex"][style*="align-items:stretch"][style*="margin:0 0 16px"][style*="border:1px solid #e2e8f0"][style*="border-radius:12px"]:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================
   SECTION 2: RANKING NUMBER - Left Side (Golden Circle)
   ============================================================ */

div[style*="min-width:42px"][style*="max-width:42px"][style*="display:flex"][style*="align-items:center"][style*="justify-content:center"][style*="font-size:.95em"][style*="font-weight:800"][style*="background:#f8fafc"][style*="border-right:1px solid"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 60px !important;
    background: #fbbf24 !important;
    color: #1a1a1a !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    border-radius: 50% !important;
    border: none !important;
    flex-shrink: 0 !important;
    display: flex !important;
    margin: auto !important;
}

/* Fallback for number styling */
div[style*="min-width:42px"] {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    background: #fbbf24 !important;
    border-radius: 50% !important;
    color: #1a1a1a !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================================
   SECTION 3: PRODUCT IMAGE - Left-Center
   ============================================================ */

div[style*="width:148px"][style*="flex-shrink:0"][style*="display:flex"][style*="align-items:center"][style*="justify-content:center"][style*="padding:16px 12px"][style*="border-right:1px solid"] {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    border-right: 1px solid #e2e8f0 !important;
    background: #fafafa !important;
}

/* Fallback for image container */
div[style*="width:148px"] {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Image sizing */
div[style*="width:148px"] img,
div[style*="width:148px"] figure,
div[style*="width:148px"] figure img {
    max-width: 130px !important;
    max-height: 130px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* ============================================================
   SECTION 4: PRODUCT CONTENT - Center (Expands)
   ============================================================ */

div[style*="flex:1"][style*="padding:16px 18px"][style*="min-width:0"] {
    flex: 1 1 auto !important;
    flex-grow: 3 !important;
    min-width: 300px !important;
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

/* Fallback for content container */
div[style*="flex:1"][style*="padding:16px 18px"] {
    flex: 1 1 auto !important;
    flex-grow: 3 !important;
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Product badge/category tag */
span[style*="display:inline-block"][style*="background:#ff9900"][style*="color:#fff"][style*="font-size:10px"][style*="font-weight:800"][style*="padding:2px 10px"][style*="border-radius:3px"] {
    display: inline-block !important;
    background: #ff9900 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    align-self: flex-start !important;
    white-space: nowrap !important;
}

/* All badge color variants */
span[style*="display:inline-block"][style*="color:#fff"][style*="font-size:10px"][style*="font-weight:800"][style*="padding:2px 10px"][style*="border-radius:3px"] {
    display: inline-block !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
}

/* Product name/title */
div[style*="font-size:.97em"][style*="font-weight:700"][style*="color:#1a1a2e"][style*="margin-bottom:8px"] {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
    order: 1 !important;
}

/* Section label "Why We Love It" */
div[style*="font-size:.78em"][style*="font-weight:700"][style*="color:#64748b"][style*="text-transform:uppercase"][style*="letter-spacing:.5px"][style*="margin-bottom:5px"] {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 8px !important;
    margin-top: 8px !important;
    order: 2 !important;
}

/* Product features list items */
div[style*="display:flex"][style*="align-items:flex-start"][style*="gap:7px"][style*="margin:5px 0"][style*="font-size:.86em"][style*="color:#374151"][style*="line-height:1.45"] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 6px 0 !important;
    font-size: 14px !important;
    color: #374151 !important;
    line-height: 1.5 !important;
    order: 3 !important;
}

/* Check mark/bullet point */
span[style*="color:#16a34a"][style*="font-weight:bold"][style*="flex-shrink:0"] {
    color: #16a34a !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
    min-width: 16px !important;
    text-align: center !important;
}

/* ============================================================
   SECTION 5: RATING/SCORE - Right Side (Fixed Width)
   ============================================================ */

div[style*="min-width:158px"][style*="max-width:158px"][style*="display:flex"][style*="flex-direction:column"][style*="align-items:center"][style*="justify-content:center"][style*="padding:16px 12px"][style*="border-left:1px solid #e2e8f0"] {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 12px !important;
    border-left: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    gap: 6px !important;
}

/* Fallback for score container */
div[style*="min-width:158px"][style*="max-width:158px"] {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
}

/* Score number - Large */
div[style*="font-size:2.4em"][style*="font-weight:900"][style*="color:#16a34a"][style*="line-height:1"] {
    font-size: 36px !important;
    font-weight: 900 !important;
    color: #16a34a !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Score label - Outstanding/Excellent/Good */
div[style*="font-size:.73em"][style*="font-weight:700"][style*="color:#16a34a"][style*="text-transform:uppercase"][style*="letter-spacing:.3px"] {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #16a34a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    text-align: center !important;
}

/* Stars and rating count container */
div[style*="font-size:.8em"][style*="color:#64748b"][style*="text-align:center"] {
    font-size: 12px !important;
    color: #64748b !important;
    text-align: center !important;
    line-height: 1.4 !important;
    margin: 4px 0 !important;
}

/* Stars */
span[style*="color:#f59e0b"] {
    color: #f59e0b !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
}

/* Rating count text */
span[style*="color:#f59e0b"] + br + *,
div[style*="text-align:center"] span:last-child {
    font-size: 11px !important;
    color: #64748b !important;
}

/* ============================================================
   SECTION 6: CALL-TO-ACTION BUTTON
   ============================================================ */

a[style*="display:block"][style*="width:100%"][style*="text-align:center"][style*="background:#ff9900"][style*="color:#1a1a2e"][style*="font-size:.84em"][style*="font-weight:800"][style*="padding:9px 8px"] {
    display: block !important;
    width: 100% !important;
    background: #ff9900 !important;
    color: #1a1a2e !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 11px 12px !important;
    border-radius: 6px !important;
    text-align: center !important;
    text-decoration: none !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(255, 153, 0, 0.2) !important;
}

a[style*="display:block"][style*="width:100%"][style*="text-align:center"][style*="background:#ff9900"]:hover {
    background: #e68900 !important;
    box-shadow: 0 4px 8px rgba(255, 153, 0, 0.3) !important;
    transform: translateY(-1px) !important;
}

a[style*="display:block"][style*="width:100%"][style*="text-align:center"][style*="background:#ff9900"]:active {
    transform: translateY(0) !important;
}

/* ============================================================
   SECTION 7: AMAZON LOGO/SVG
   ============================================================ */

svg[viewBox="0 0 120 38"],
div[style*="text-align:center"][style*="margin-top:"] svg {
    display: block !important;
    margin: 6px auto 0 !important;
    max-width: 70px !important;
    height: auto !important;
}

/* ============================================================
   SECTION 8: RANKING TABLE (Top of page)
   ============================================================ */

table[style*="width:100%"][style*="border-collapse:collapse"] {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 32px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

table[style*="width:100%"] thead,
table[style*="width:100%"] th {
    background: #1a1a2e !important;
    color: #ffffff !important;
}

table[style*="width:100%"] th {
    padding: 16px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: left !important;
    border: 1px solid #e2e8f0 !important;
}

table[style*="width:100%"] td {
    padding: 14px 16px !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 14px !important;
    color: #374151 !important;
}

table[style*="width:100%"] tr:nth-child(even) td {
    background: #f9fafb !important;
}

table[style*="width:100%"] tr:hover td {
    background: #f3f4f6 !important;
}

/* ============================================================
   SECTION 9: HEADINGS & TEXT
   ============================================================ */

h2[style*="font-size:1.35em"] {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 48px 0 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

/* ============================================================
   SECTION 10: RESPONSIVE DESIGN - Tablet & Mobile
   ============================================================ */

@media (max-width: 1024px) {
    /* Cards stack horizontally with adjusted proportions */
    div[style*="display:flex"][style*="align-items:stretch"][style*="margin:0 0 16px"][style*="border:1px solid #e2e8f0"] {
        flex-wrap: wrap !important;
    }

    div[style*="min-width:42px"][style*="max-width:42px"] {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        height: 50px !important;
        font-size: 18px !important;
    }

    div[style*="width:148px"] {
        width: 140px !important;
        min-width: 140px !important;
    }

    div[style*="min-width:158px"][style*="max-width:158px"] {
        width: 130px !important;
        min-width: 130px !important;
    }

    div[style*="font-size:.97em"][style*="font-weight:700"][style*="color:#1a1a2e"] {
        font-size: 15px !important;
    }

    div[style*="font-size:2.4em"][style*="font-weight:900"] {
        font-size: 28px !important;
    }
}

@media (max-width: 768px) {
    /* Full vertical stack on mobile */
    div[style*="display:flex"][style*="align-items:stretch"][style*="margin:0 0 16px"][style*="border:1px solid #e2e8f0"][style*="border-radius:12px"] {
        flex-direction: column !important;
    }

    div[style*="min-width:42px"][style*="max-width:42px"] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 50px !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        border-right: none !important;
        margin: 0 !important;
    }

    div[style*="width:148px"] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 16px 12px !important;
        height: auto !important;
    }

    div[style*="flex:1"][style*="padding:16px 18px"] {
        min-width: 100% !important;
    }

    div[style*="min-width:158px"][style*="max-width:158px"] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        border-left: none !important;
        border-top: 1px solid #e2e8f0 !important;
        padding: 16px 12px !important;
    }

    h2[style*="font-size:1.35em"] {
        font-size: 22px !important;
        margin: 32px 0 16px !important;
    }

    table[style*="width:100%"] {
        font-size: 12px !important;
    }

    table[style*="width:100%"] th,
    table[style*="width:100%"] td {
        padding: 10px 8px !important;
    }
}

@media (max-width: 480px) {
    div[style*="font-size:.97em"][style*="font-weight:700"] {
        font-size: 13px !important;
    }

    div[style*="font-size:2.4em"][style*="font-weight:900"] {
        font-size: 24px !important;
    }

    div[style*="flex:1"][style*="padding:16px 18px"] {
        padding: 16px 12px !important;
    }

    a[style*="display:block"][style*="width:100%"][style*="background:#ff9900"] {
        font-size: 12px !important;
        padding: 10px 8px !important;
    }
}

/* ============================================================
   END OF BETTEREVIEW LAYOUT CSS
   ============================================================ */