/**
 * CSS for Promotion Date Shortcode Tooltip
 * สไตล์สำหรับ Shortcode [promotion_date] พร้อม Tooltip
 */

/* --- CSS Variables --- */
/* กำหนดค่าสีหลักและสีอื่นๆ เพื่อให้แก้ไขได้ง่าย */
:root {
    --promo-color-primary: #D40000; /* สีแดง Rosso Corsa */
    --promo-color-text: #333333;      /* สีข้อความหลัก */
    --promo-color-text-light: #ffffff; /* สีข้อความสว่าง (บนพื้นหลังเข้ม) */
    --promo-color-border: #e0e0e0;     /* สีเส้นขอบ */
    --promo-color-expired: #888888;    /* สีสำหรับสถานะหมดอายุ */
    --promo-color-expired-bg: #f5f5f5; /* สีพื้นหลังสถานะหมดอายุ */
    --promo-tooltip-bg: #2c3e50;     /* สีพื้นหลัง Tooltip (เข้มขึ้นเล็กน้อย) */
    --promo-tooltip-text: #ffffff;   /* สีข้อความ Tooltip */
    --promo-tooltip-arrow-size: 6px;   /* ขนาดลูกศร Tooltip */
    --promo-tooltip-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* เงา Tooltip */
}

/* --- Main Wrapper Styles --- */
/* สไตล์สำหรับตัวครอบข้อความหลัก */
.promotion-tooltip-wrapper {
    display: inline-flex; /* จัดเรียงแนวนอน และให้ขนาดพอดีเนื้อหา */
    align-items: center; /* จัดกึ่งกลางแนวตั้ง */
    padding: 6px 12px; /* ปรับ padding ให้กระชับ */
    border: 1px solid var(--promo-color-border);
    border-radius: 16px; /* เพิ่มความมน */
    font-family: 'Inter', 'Tahoma', sans-serif; /* เลือกฟอนต์ (ใส่ Fallback) */
    font-size: 0.9em; /* ขนาดฟอนต์ */
    line-height: 1.4; /* ระยะห่างบรรทัด */
    background-color: #ffffff;
    color: var(--promo-color-text);
    cursor: help; /* เปลี่ยน Cursor เป็นเครื่องหมายคำถาม */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative; /* จำเป็นสำหรับ Tooltip positioning */
    -webkit-tap-highlight-color: transparent; /* ลบ highlight บน mobile */
}

/* สไตล์เมื่อได้รับ Focus (สำหรับ Keyboard Navigation) */
.promotion-tooltip-wrapper:focus {
    outline: none; /* ลบ outline เริ่มต้น */
    border-color: var(--promo-color-primary); /* เปลี่ยนสีขอบเมื่อ focus */
    box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.2); /* เพิ่มเงา focus */
}
/* สำหรับ Browser ที่รองรับ :focus-visible (ดีกว่า :focus) */
.promotion-tooltip-wrapper:focus-visible {
     outline: none;
     border-color: var(--promo-color-primary);
     box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.2);
}


/* --- Status Specific Styles --- */
/* สไตล์เมื่อโปรโมชั่นยัง Active */
.promotion-tooltip-wrapper.promotion-active {
    /* อาจจะไม่ต้องเปลี่ยนอะไรมากถ้า default คือ active */
}

/* สไตล์เมื่อโปรโมชั่นหมดอายุ */
.promotion-tooltip-wrapper.promotion-expired {
    border-color: var(--promo-color-border); /* อาจใช้สีขอบเดิมหรือสีจางลง */
    background-color: var(--promo-color-expired-bg);
    color: var(--promo-color-expired);
    cursor: default; /* เปลี่ยน cursor เป็นปกติ */
}

/* --- Inner Status Text & Icon --- */
/* สไตล์สำหรับข้อความและไอคอนภายใน */
.promo-status {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* ระยะห่างระหว่างไอคอนกับข้อความ */
}

.promo-icon {
    width: 1em; /* ขนาดไอคอนสัมพันธ์กับขนาดฟอนต์ */
    height: 1em;
    flex-shrink: 0; /* ไม่ให้ไอคอนหดตัว */
    color: var(--promo-color-primary); /* สีไอคอนเริ่มต้น */
    vertical-align: middle; /* จัดตำแหน่งไอคอนให้อยู่กลางๆ บรรทัด */
}

/* เปลี่ยนสีไอคอนเมื่อหมดอายุ */
.promotion-expired .promo-icon {
    color: var(--promo-color-expired);
}

/* สไตล์สำหรับวันที่แบบย่อ (ถ้าต้องการเน้น) */
.promo-end-date-short {
    font-weight: 500; /* ทำให้หนาขึ้นเล็กน้อย */
}


/* --- Tooltip Container Styles --- */
/* สไตล์สำหรับกล่อง Tooltip ที่สร้างโดย JS */
#promo-tooltip-container {
    /* Positioning and Visibility (controlled by JS) */
    position: absolute; /* ตำแหน่งอ้างอิง body หรือ parent ที่มี position relative/absolute */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* ป้องกันการคลิกโดน Tooltip */

    /* Appearance */
    background-color: var(--promo-tooltip-bg);
    color: var(--promo-tooltip-text);
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 0.875em; /* ขนาดฟอนต์ใน Tooltip */
    line-height: 1.5;
    box-shadow: var(--promo-tooltip-shadow);
    z-index: 9999; /* ให้อยู่เหนือ Element อื่นๆ เสมอ */
    max-width: 280px; /* จำกัดความกว้างสูงสุด */
    text-align: left; /* จัดข้อความชิดซ้าย */

    /* Transition for smooth fade-in/out */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.15s ease-out;
    transform: translateY(5px); /* เริ่มต้นขยับลงเล็กน้อย */
}

/* ทำให้ Tooltip แสดงผลเมื่อ JS เพิ่ม class 'visible' */
#promo-tooltip-container.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* ทำให้สามารถโต้ตอบกับเนื้อหาใน Tooltip ได้ (ถ้ามี) */
    transform: translateY(0); /* ขยับกลับตำแหน่งเดิม */
}

/* --- Tooltip Arrow Styles --- */
/* สไตล์สำหรับลูกศรชี้ (ใช้ Pseudo-element ::after) */
#promo-tooltip-container::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: var(--promo-tooltip-arrow-size);
    /* ตำแหน่งและสีจะถูกกำหนดโดย class .tooltip-top / .tooltip-bottom */
}

/* ลูกศรชี้ลง (เมื่อ Tooltip อยู่ด้านบนของ Wrapper) */
#promo-tooltip-container.tooltip-top::after {
    top: 100%; /* ชี้ลง */
    left: 50%;
    margin-left: calc(-1 * var(--promo-tooltip-arrow-size)); /* จัดกึ่งกลาง */
    border-color: var(--promo-tooltip-bg) transparent transparent transparent;
}

/* ลูกศรชี้ขึ้น (เมื่อ Tooltip อยู่ด้านล่างของ Wrapper) */
#promo-tooltip-container.tooltip-bottom::after {
    bottom: 100%; /* ชี้ขึ้น */
    left: 50%;
    margin-left: calc(-1 * var(--promo-tooltip-arrow-size)); /* จัดกึ่งกลาง */
    border-color: transparent transparent var(--promo-tooltip-bg) transparent;
}


/* --- Tooltip Content Styles --- */
/* สไตล์สำหรับเนื้อหาภายใน Tooltip */
#promo-tooltip-container .tooltip-dates,
#promo-tooltip-container .tooltip-countdown,
#promo-tooltip-container .tooltip-expired {
    display: block; /* ให้แต่ละส่วนขึ้นบรรทัดใหม่ */
}

/* สไตล์สำหรับช่วงวันที่ */
#promo-tooltip-container .tooltip-dates {
    font-weight: 500;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* เส้นคั่นจางๆ */
}

/* สไตล์สำหรับ Countdown */
#promo-tooltip-container .tooltip-countdown {
    font-weight: normal; /* อาจจะไม่ต้องหนา */
    color: #f1c40f; /* สีเหลืองสดใสสำหรับ Countdown */
    margin-top: 5px;
}
/* ทำให้ตัวเลขหนาขึ้นเล็กน้อย */
#promo-tooltip-container .tooltip-countdown span {
    font-weight: 500;
}


/* สไตล์สำหรับข้อความหมดอายุ */
#promo-tooltip-container .tooltip-expired {
    font-style: italic;
    color: rgba(255, 255, 255, 0.7); /* สีเทาจางๆ */
    margin-top: 5px;
}

/* --- Responsive Adjustments (Optional) --- */
/* ปรับแต่งสำหรับหน้าจอขนาดเล็ก (ถ้าจำเป็น) */
/* @media (max-width: 600px) {
    #promo-tooltip-container {
        max-width: 90vw; // จำกัดความกว้างไม่ให้ล้นจอเล็ก
        font-size: 0.8em; // ลดขนาดฟอนต์ลงอีก
    }
} */