/**
 * Gustabe's WooCommerce ACF Compare - Public CSS
 *
 * @package GustabeDevB\Compare
 * @version 1.5.0 (Fix Link Row Background)
 */

/* ==========================================================================
   0. ELEMENTOR FULL WIDTH SUPPORT
   ========================================================================== */
.elementor-widget-shortcode .gustabe-dev-b-compare-wrapper,
.elementor-shortcode .gustabe-dev-b-compare-wrapper {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* ==========================================================================
   1. ROOT VARIABLES & GLOBAL LAYOUT
   ========================================================================== */
.gustabe-dev-b-compare-wrapper {
    /* --- Color Palette --- */
    --gustabe-color-border: #e0e0e0;
    --gustabe-color-background-alt: #f9f9f9;

    --gustabe-color-text-primary: #222222;
    --gustabe-color-text-secondary: #555555;

    --gustabe-color-accent: #003b5c;
    --gustabe-color-accent-hover: #002a42;
    --gustabe-color-error: #d93025;

    /* Zebra Colors (ขาว สลับ เทาอ่อนมาก) */
    --gustabe-row-odd: #ffffff; /* สีแถวคี่ (ขาว) */
    --gustabe-row-even: #f0f0f0; /* สีแถวคู่ (เทาอ่อน) */

    /* Header Colors */
    --gustabe-header-bg: #0a0b3b;
    --gustabe-header-text: #ffffff;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;
    color: var(--gustabe-color-text-primary);
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
}

.gustabe-dev-b-compare-ui {
    padding: 24px;
}

/* Header Section */
.gustabe-dev-b-header {
    text-align: center;
    margin-bottom: 30px;
}

.gustabe-dev-b-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--gustabe-color-accent);
    margin: 0 0 8px 0;
}

.gustabe-dev-b-subtitle {
    font-size: 16px;
    color: var(--gustabe-color-text-secondary);
    margin: 0;
}

/* Category Selector */
.gustabe-dev-b-category-wrapper {
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gustabe-dev-b-category-wrapper label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gustabe-color-text-primary);
    margin-bottom: 10px;
}

.gustabe-dev-b-category-select {
    width: 100%;
    max-width: 400px;
    height: 48px;
    padding: 0 16px;
    font-size: 15px;
    border: 1px solid var(--gustabe-color-border);
    border-radius: 8px;
    background-color: #f5f5f5;
    color: var(--gustabe-color-text-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.gustabe-dev-b-category-select:focus {
    outline: none;
    border-color: var(--gustabe-color-accent);
    box-shadow: 0 0 0 2px rgba(0, 59, 92, 0.1);
}

.gustabe-dev-b-category-select:hover {
    border-color: var(--gustabe-color-accent);
}

/* ==========================================================================
   2. SEARCH SECTION
   ========================================================================== */
.gustabe-dev-b-selectors-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 20px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

@media (min-width: 768px) {
    .gustabe-dev-b-selectors-wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

.gustabe-dev-b-selector-item label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gustabe-color-text-primary);
    margin-bottom: 8px;
}

.gustabe-dev-b-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   3. TOM SELECT CUSTOMIZATION
   ========================================================================== */
.ts-wrapper {
    width: 100% !important;
    flex-grow: 1;
}

.ts-control {
    width: 100% !important;
    height: 44px !important;
    border: 1px solid var(--gustabe-color-border) !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    background-color: #fff !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
}

.ts-control.has-image,
.ts-control.has-image .ts-input,
.ts-control.has-image .item {
    padding-left: 12px !important;
}

.ts-control .ts-arrow,
.ts-control .ts-close {
    display: none !important;
}

.ts-control.ts-input.focus {
    border-color: var(--gustabe-color-accent) !important;
    box-shadow: 0 0 0 1px var(--gustabe-color-accent) !important;
    outline: none !important;
}

.gustabe-tom-select-result {
    display: flex;
    align-items: center;
    padding: 4px 0;
}
.gustabe-tom-select-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 3px;
    margin-right: 12px;
    flex-shrink: 0;
}
.gustabe-tom-select-title {
    font-size: 15px;
    line-height: 1.4;
    color: var(--gustabe-color-text-primary);
}

.ts-dropdown .option.active {
    background-color: var(--gustabe-color-accent) !important;
    color: #ffffff !important;
}
.ts-dropdown .option.active .gustabe-tom-select-title {
    color: #fff;
}

/* ==========================================================================
   4. PRODUCT TAGS
   ========================================================================== */
.gustabe-dev-b-selected-product-tag-container {
    margin-top: 10px;
    min-height: 44px;
    border-radius: 4px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.gustabe-dev-b-product-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    padding: 4px 6px 4px 4px;
    margin: 4px;
    font-size: 14px;
    font-weight: 500;
}

.gustabe-dev-b-product-tag img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 3px;
    margin-right: 8px;
}

.gustabe-dev-b-product-tag .remove-tag {
    cursor: pointer;
    margin-left: 8px;
    font-weight: 700;
    color: var(--gustabe-color-error);
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.gustabe-dev-b-product-tag .remove-tag:hover {
    opacity: 1;
}

/* ==========================================================================
   5. BUTTONS & STATUS
   ========================================================================== */
[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button:focus,
button:hover {
    background-color: rgb(58, 0, 0);
    color: #fff;
    text-decoration: none;
}

.button.button-secondary[type="button"]:focus,
.button.button-secondary[type="button"]:hover,
.button.button-secondary[type="submit"]:focus,
.button.button-secondary[type="submit"]:hover,
button:focus.button.button-secondary,
button:hover.button.button-secondary {
    background-color: rgb(58, 0, 0) !important;
    color: #fff !important;
    text-decoration: none;
}

.gustabe-dev-b-button-wrapper {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
}

.gustabe-dev-b-button-wrapper .button {
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    line-height: 1.5;
    text-decoration: none;
}

.gustabe-dev-b-button-wrapper .button-primary {
    background-color: #0a0b3b;
    border-color: #0a0b3b;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.gustabe-dev-b-button-wrapper .button-primary:hover,
.gustabe-dev-b-button-wrapper .button-primary:focus {
    background-color: #06072a;
    border-color: #06072a;
    color: #fff;
}

.gustabe-dev-b-button-wrapper .button-primary .button-arrow {
    font-size: 18px;
    line-height: 1;
}

.gustabe-dev-b-button-wrapper .button-secondary {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}
.gustabe-dev-b-button-wrapper .button-secondary:hover,
.gustabe-dev-b-button-wrapper .button-secondary:focus {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
    color: #ffffff !important;
}

.gustabe-dev-b-button-wrapper .button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.gustabe-dev-b-compare-status {
    margin-top: 15px;
    padding: 12px 15px;
    border-radius: 4px;
    display: none;
    font-size: 14px;
}
.gustabe-dev-b-compare-status:not(:empty) {
    display: block;
}
.gustabe-dev-b-compare-status.loading {
    color: var(--gustabe-color-text-secondary);
    background-color: #f6f6f6;
}
.gustabe-dev-b-compare-status.error {
    color: var(--gustabe-color-error);
    background-color: #fce8e6;
    border: 1px solid var(--gustabe-color-error);
}

/* ==========================================================================
   6. COMPARE TABLE STYLING
   ========================================================================== */
#gustabe_dev_b_compare_result_wrapper {
    margin-top: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--gustabe-color-border);
    padding: 30px 40px;
}

/* ซ่อน scroll hint บน desktop */
.gustabe-scroll-hint-wrapper {
    display: none;
}

.gustabe-dev-b-compare-table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    text-align: left;
    table-layout: fixed; /* Fix: ขนาดช่องเท่ากัน */
}

.gustabe-dev-b-compare-table th,
.gustabe-dev-b-compare-table td {
    padding: 10px 15px;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid var(--gustabe-color-border);
}

/* --- Table Header --- */
.gustabe-dev-b-compare-table thead th {
    background-color: var(--gustabe-header-bg);
    border-bottom: 0;
    text-align: center;
    color: var(--gustabe-header-text);
}

.gustabe-dev-b-compare-table .gustabe-dev-b-th-feature {
    width: 20%;
    font-size: 14px;
    text-align: center !important;
    vertical-align: middle !important;
    background-color: var(--gustabe-header-bg) !important;
    color: var(--gustabe-header-text) !important;
    border-color: var(--gustabe-header-bg) !important;
}

.gustabe-dev-b-compare-table .gustabe-dev-b-th-product {
    text-align: center !important;
    vertical-align: top;
    background-color: #ffffff !important;
    color: var(--gustabe-color-text-primary) !important;
    border-color: var(--gustabe-color-border) !important;
    width: calc(80% / 3);
}
.gustabe-dev-b-compare-table .compare-product-image {
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}
.gustabe-dev-b-compare-table .compare-product-image img {
    max-width: 100px;
    height: auto;
    border-radius: 4px;
    background-color: #fff;
}
.gustabe-dev-b-compare-table .compare-product-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--gustabe-color-text-primary);
    text-align: center;
    line-height: 1.3;
}

/* --- Table Body (Zebra Striping) --- */

/* หัวข้อคุณสมบัติ (ซ้ายสุด) - พื้นหลังสีน้ำเงินกัปตัน */
.gustabe-dev-b-compare-table .gustabe-dev-b-td-feature {
    font-weight: 600;
    color: #ffffff !important;
    background-color: var(--gustabe-header-bg) !important;
    text-align: left;
    width: 20%;
}

/* เซลล์ข้อมูลทั่วไป */
.gustabe-dev-b-compare-table .gustabe-dev-b-td-data {
    color: var(--gustabe-color-text-secondary);
    font-size: 14px;
    word-wrap: break-word;
    white-space: normal;
    text-align: left;
    vertical-align: middle;
    line-height: 1.4;
}

/* [FIX] สั่งสี Zebra ลงที่ TD โดยตรง */
/* เพิ่ม :not(.gustabe-dev-b-tr-links) เพื่อยกเว้นแถวสุดท้าย */
/* เพิ่ม :not(.gustabe-dev-b-td-feature) เพื่อไม่ให้ override คอลัมน์หัวข้อ */

/* แถวคี่ (Odd) */
.gustabe-dev-b-compare-table
    tbody
    tr:not(.gustabe-dev-b-tr-links):nth-child(odd)
    td:not(.gustabe-dev-b-td-feature) {
    background-color: var(--gustabe-row-odd) !important; /* ขาว */
}

/* แถวคู่ (Even) */
.gustabe-dev-b-compare-table
    tbody
    tr:not(.gustabe-dev-b-tr-links):nth-child(even)
    td:not(.gustabe-dev-b-td-feature) {
    background-color: var(--gustabe-row-even) !important; /* เทาอ่อน */
}

/* [FIX] บังคับให้คอลัมน์หัวข้อเป็นสีน้ำเงินกัปตันเสมอ */
.gustabe-dev-b-compare-table tbody td.gustabe-dev-b-td-feature {
    background-color: var(--gustabe-header-bg) !important;
    color: #ffffff !important;
}

/* [IMPORTANT] เฉพาะแถว "คุณสมบัติสินค้า" ให้เว้นบรรทัดตามจริง */
.gustabe-dev-b-compare-table
    tr.gustabe-row-product_attribute
    .gustabe-dev-b-td-data {
    white-space: pre-wrap !important;
}

.gustabe-dev-b-compare-table .compare-product-price {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--gustabe-color-accent);
}

/* --- ปุ่มลิงก์ (Link Row) --- */
/* บังคับพื้นหลังสีขาว */
.gustabe-dev-b-compare-table tr.gustabe-dev-b-tr-links td {
    padding: 15px;
    background-color: #fff !important;
    border-bottom: 0;
}

/* Feature cell ในแถว links ให้เป็นสีน้ำเงินเหมือนกัน */
.gustabe-dev-b-compare-table
    tr.gustabe-dev-b-tr-links
    td.gustabe-dev-b-td-feature {
    background-color: var(--gustabe-header-bg) !important;
    color: #ffffff !important;
}

.gustabe-dev-b-compare-table .gustabe-dev-b-compare-link {
    display: inline-block;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    background-color: #fff;
    border: 1px solid var(--gustabe-color-accent);
    color: var(--gustabe-color-accent);
    transition: all 0.15s ease;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.gustabe-dev-b-compare-table .gustabe-dev-b-compare-link:hover {
    background-color: var(--gustabe-color-accent);
    color: #fff;
}

/* ==========================================================================
   7. RESPONSIVE STYLES (Mobile)
   ========================================================================== */
@media (max-width: 767px) {
    .gustabe-dev-b-selectors-wrapper {
        grid-template-columns: 1fr;
    }

    /* Scroll hint indicator */
    #gustabe_dev_b_compare_result_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid var(--gustabe-color-border);
        padding: 15px;
        background: #fdfdfd;
        position: relative;
    }

    /* Icon บอกว่าเลื่อนได้ - sticky ติดตาม scroll */
    .gustabe-scroll-hint {
        position: sticky;
        left: 50%;
        transform: translateX(-50%);
        background: var(--gustabe-header-bg);
        color: #fff;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        z-index: 10;
        display: inline-block;
        animation: scrollHintPulse 2s ease-in-out infinite;
    }

    .gustabe-scroll-hint-wrapper {
        display: block; /* แสดงเฉพาะ mobile */
        text-align: center;
        margin-bottom: 10px;
    }

    @keyframes scrollHintPulse {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0.6;
        }
    }

    .gustabe-dev-b-compare-table {
        min-width: 600px;
    }

    /* Sticky คอลัมน์ซ้าย (หัวข้อ) - snap ติดขอบ */
    .gustabe-dev-b-compare-table .gustabe-dev-b-th-feature,
    .gustabe-dev-b-compare-table .gustabe-dev-b-td-feature {
        position: sticky;
        left: 0;
        z-index: 5;
        min-width: 120px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }

    /* ลบ padding ซ้ายของ wrapper เพื่อให้ snap */
    #gustabe_dev_b_compare_result_wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    .gustabe-dev-b-compare-ui {
        padding: 20px;
    }
}