/*
Theme Name: Sinatra Child
Theme URI: https://wpsinatra.com/
Description: Sinatra Child Theme
Author: Sinatra Team
Author URI: https://wpsinatra.com/
Template: sinatra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: sinatra-child
*/

/* --- MAIN FONT & BASE STYLES --- */
body {
    font-family: 'Be Vietnam Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #000000; /* Màu chữ mặc định là đen */
}

/* Container System */
.container {
    width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; box-sizing: border-box;
}
.container-sm { max-width: 800px; } /* Giảm max-width cho container nhỏ */

/* FIX TEXT COLOR CONFLICT (Tăng độ tương phản) */
body .text-gray-200,
body .text-gray-300,
body .text-gray-400 {
    color: #374151 !important; /* Đổi thành xám đậm thay vì đen hẳn */
}
.woocommerce, .woocommerce-page {
    color: #111827 !important; /* Màu chữ chính trong WooCommerce */
}
.woocommerce-page .entry-content {
    color: #111827;
}

/* Màu link chung */
body a { color: #111827; }
body a:hover { color: #0D9387; } /* Màu xanh lá khi hover link */


/* ----------------------------------------------------------------------
 * 2) FOOTER STYLES (FROM footer.php)
 * ------------------------------------------------------------------- */
.site-footer, footer, .footer, #footer {
    background: #111827 !important; /* Màu nền footer chuẩn */
    color: #d1d5db !important; /* Màu chữ mặc định trong footer */
    border-top: 1px solid rgba(55, 65, 81, 0.5);
    padding: 3rem 1rem;
}
.site-footer *, footer *, .footer *, #footer * {
    color: #d1d5db !important; /* Chữ sáng hơn mặc định */
}
.site-footer a, footer a, .footer a, #footer a {
    color: #9CA3AF !important; /* Màu link xám nhạt */
    text-decoration: none;
    transition: color 0.2s;
}
.site-footer a:hover, footer a:hover, .footer a:hover, #footer a:hover {
    color: #34D399 !important; /* Màu xanh lá khi hover */
}
/* Style chi tiết cho các element trong Footer */
.footer-container h3.gradient-text,
.footer-container p.slogan-text.gradient-text {
    /* Đảm bảo gradient text vẫn hiển thị */
    background: linear-gradient(to right, #E9DDFF, #E9DDFF);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; text-fill-color: transparent;
}
.footer-container h4 {
    font-size: 1.25rem; font-weight: bold; color: white !important; margin-bottom: 1rem;
}
.footer-container .icon-text-pair { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.footer-container .icon-text-pair svg { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: #34D399; }
.footer-container .icon-text-pair p, .footer-container .icon-text-pair a { color: #d1d5db !important; }
.footer-container .icon-text-pair strong { color: #e5e7eb !important; }
.footer-container .fb-page-container { background: linear-gradient(to right, #34D399, #EF4444); border-radius: 0.75rem; padding: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); width: 100%; max-width: 364px; margin: 0 auto; }
.footer-container .fb-inner-content { background-color: #1F2937; border-radius: 0.6rem; overflow: hidden; }
.footer-container .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 1200px; margin: 0 auto; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }

.footer-copyright {
    max-width: 1200px; margin: 2rem auto 0; padding-top: 1rem;
    border-top: 1px solid rgba(55, 65, 81, 0.5); text-align: center;
    font-size: 0.875rem; color: #9CA3AF !important;
}


/* ----------------------------------------------------------------------
 * 3) BOOKING PAGE (template-booking.php) & LICH PHONG
 * ------------------------------------------------------------------- */

/* Canh giữa Main Content và Container */
main#primary.site-main { width: 100%; max-width: none; float: none; margin: 0 auto; padding-top: 40px; padding-bottom: 40px; box-sizing: border-box; }
/* Chỉnh max-width container booking page */
main#primary.site-main > .container.container-sm { margin-left: auto !important; margin-right: auto !important; max-width: 1000px; width: 100%; padding-left: 15px; padding-right: 15px; }
.ochie-booking-section { width: 100%; box-sizing: border-box; }

/* Tiêu đề Bước - Màu xám đậm */
#ochie-room-selection h2, #ochie-week-view-section h2 {
    color: #333333 !important; /* Xám rất đậm */
    font-weight: 700 !important;
}
/* Tên phòng - Màu xám đậm */
.ochie-room-item h3 {
    color: #333333 !important; /* Xám rất đậm */
}

/* Style cho Lịch Tuần và Slot */
#ochie-weekly-calendar { min-width: 700px; }
.ochie-calendar-day { background-color: #f9fafb; border-radius: 6px; padding: 10px; }
.ochie-day-header { font-weight: 600; text-align: center; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #e5e7eb; font-size: 0.9rem; }
.ochie-day-slots .ochie-slot-item:last-child { margin-bottom: 0; }
#ochie-week-navigation button:disabled { background-color: #9ca3af; cursor: not-allowed; }

.ochie-room-item:hover, .ochie-room-item.selected { border-color: #0D9387; box-shadow: 0 4px 10px rgba(13, 147, 135, 0.2); transform: translateY(-2px); }
.ochie-slot-item { border: 1px solid #d1d5db; border-radius: 6px; padding: 10px 5px; text-align: center; cursor: pointer; transition: all 0.3s ease; margin-bottom: 5px; font-size: 0.85rem; }
.ochie-slot-item:hover, .ochie-slot-item.selected { border-color: #0D9387; background-color: #f0fdfa; box-shadow: 0 2px 5px rgba(13, 147, 135, 0.15); }
.ochie-slot-item strong { display: block; margin-bottom: 3px; font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ochie-slot-item span { color: #4b5563; font-size: 0.8rem; display: block; }
.ochie-slot-item.booked { background-color: #fecaca; color: #991b1b; cursor: not-allowed; border-color: #fca5a5; opacity: 0.8; }
.ochie-slot-item.locked { background-color: #f3f4f6; color: #9ca3af; cursor: default; border-color: #e5e7eb; opacity: 0.7; }
#ochie-add-to-cart-btn-week:disabled { background-color: #9ca3af; cursor: not-allowed; }


/* ----------------------------------------------------------------------
 * 4) WOOCOMMERCE CART (Gio Hang) & CHECKOUT (Thanh Toan)
 * ------------------------------------------------------------------- */

/* --- TÙY CHỈNH TRANG GIỎ HÀNG OCHIEHOME (TỐI ƯU V2) --- */
.woocommerce-cart .woocommerce-cart-form__contents { border-collapse: separate !important; border-spacing: 0 10px; margin-bottom: 2em; }
@media (max-width: 768px) { .woocommerce-cart table.shop_table thead { display: none !important; } }
.woocommerce-cart table.shop_table tbody tr.cart_item { background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 15px; padding: 15px; display: grid; grid-template-columns: 3fr 1fr 1fr 50px; align-items: center; }
@media (max-width: 768px) { .woocommerce-cart table.shop_table tbody tr.cart_item { grid-template-columns: 1fr auto; grid-template-areas: "name remove" "price subtotal"; padding: 15px; } .woocommerce-cart table.shop_table td { display: block; padding: 5px 0; } }
.woocommerce-cart table.shop_table td.product-name { font-size: 1.15em; color: #111827; font-weight: 700; line-height: 1.4; grid-area: name; } /* Thêm grid-area */
.ochie-room-detail-name { font-size: 1em; font-weight: 700; color: #111827; }
.ochie-room-detail-time { font-size: 0.9em; font-weight: 500; color: #4b5563; }
.woocommerce-cart table.shop_table td.product-price { grid-area: price; } /* Thêm grid-area */
.woocommerce-cart table.shop_table td.product-subtotal { grid-area: subtotal; } /* Thêm grid-area */
.woocommerce-cart table.shop_table td.product-price, .woocommerce-cart table.shop_table td.product-subtotal { font-size: 1.1em; color: #0D9387; font-weight: 600; text-align: right !important; }
.woocommerce-cart table.shop_table td.product-price::before, .woocommerce-cart table.shop_table td.product-subtotal::before { content: attr(data-title) ": "; font-weight: 500; color: #6b7280; display: inline-block; margin-right: 5px; }
@media (min-width: 769px) { .woocommerce-cart table.shop_table td.product-price::before, .woocommerce-cart table.shop_table td.product-subtotal::before { display: none; } } /* Ẩn label trên desktop */
.woocommerce table.shop_table td.product-remove .remove,
.woocommerce table.shop_table td.product-remove .remove:hover {
    /* 1. Kích thước & Hình dạng (Theo yêu cầu) */
    width: 40px !important;       /* Làm to hơn (trước là 30px) */
    height: 40px !important;      /* Làm to hơn (trước là 30px) */
    border-radius: 6px !important;  /* Bo góc vuông (trước là 50% - hình tròn) */
    
    /* 2. Màu sắc (Nổi bật hơn để dễ thấy) */
    border: 2px solid #ef4444 !important;  /* Viền đỏ đậm (trước là 1px) */
    background-color: #fee2e2 !important; /* Nền đỏ rất nhạt (trước là rgba) */
    color: #dc2626 !important;         /* Màu chữ X đỏ đậm */
    
    /* 3. Căn giữa chữ X (Rất quan trọng) */
    display: flex !important;           /* Ép hiển thị dạng block/flex */
    align-items: center;
    justify-content: center;
    font-size: 2em !important;        /* Làm chữ X to hơn (trước là 1.5em) */
    line-height: 1 !important;
    
    /* 4. Tương tác */
    text-decoration: none !important;
    margin: 0 auto;                     /* Vẫn căn giữa trong cột */
    opacity: 1 !important;              /* Đảm bảo không bị mờ */
    transform: none !important;         /* Tắt hiệu ứng scale cũ */
    transition: background-color 0.2s, border-color 0.2s;
}

/* Hiệu ứng Hover mới */
.woocommerce table.shop_table td.product-remove .remove:hover {
    background-color: #fca5a5 !important; /* Nền đỏ đậm hơn khi hover */
    border-color: #dc2626 !important;     /* Viền đỏ đậm hơn khi hover */
    color: #991b1b !important;
}
.woocommerce-cart .cart_totals { background-color: #f3f4f6; padding: 25px; border-radius: 8px; border: 1px solid #e5e7eb; color: #1f2937; }
.woocommerce-cart .cart_totals h2 { color: #111827; margin-bottom: 15px; font-size: 1.4em; border-bottom: 1px solid #d1d5db; padding-bottom: 10px; }
.woocommerce-cart .cart_totals table { width: 100%; border: none; }
.woocommerce-cart .cart_totals th, .woocommerce-cart .cart_totals td { padding: 10px 0; border: none; color: #374151; }
.woocommerce-cart .cart_totals th { text-align: left; font-weight: 500; }
.woocommerce-cart .cart_totals td { text-align: right; font-weight: 600; color: #111827; }
.woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { font-size: 1.25em; color: #111827; padding-top: 15px; border-top: 1px dashed #d1d5db; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { background: #0D9387; color: white !important; padding: 15px 20px; border-radius: 8px; font-weight: bold; text-align: center; display: block; width: 100%; font-size: 1.1em; margin-top: 20px; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: #0F766E; }

/* --- TÙY CHỈNH CHECKOUT (THANH TOÁN) --- */
.ochie-checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .ochie-checkout-grid { grid-template-columns: 1fr; gap: 30px; } }
.woocommerce-checkout .ochie-billing-details { padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px; background-color: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.woocommerce-checkout .form-row label { font-weight: 600; color: #374151; }
.woocommerce-checkout .input-text { border: 1px solid #d1d5db; border-radius: 6px; padding: 10px; box-shadow: none; transition: border-color 0.3s; }
.woocommerce-checkout .input-text:focus { border-color: #0D9387; box-shadow: 0 0 0 1px #0D9387; }
.woocommerce-checkout h3, .woocommerce-checkout h2 { font-size: 1.5rem; font-weight: 700; color: #111827; border-bottom: 2px solid #0D9387; padding-bottom: 8px; margin-top: 1.5em; margin-bottom: 0.8em; }
.woocommerce-checkout .ochie-order-review { padding: 20px; border: 1px solid #d1d5db; border-radius: 8px; background-color: #f9fafb; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.woocommerce-checkout-review-order-table { border-collapse: collapse; width: 100%; margin-bottom: 20px; }
.woocommerce-checkout-review-order-table thead th { background-color: #f3f4f6; color: #111827; font-weight: 700; border-bottom: 2px solid #b8e0c2; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 10px 0; border-bottom: 1px dashed #d1d5db; color: #111827; }
.ochie-checkout-detail-time { display: block; font-size: 0.9em; font-weight: 400; color: #4b5563; }
.woocommerce-checkout-review-order-table tfoot .order-total th, .woocommerce-checkout-review-order-table tfoot .order-total td { border-top: 2px solid #b8e0c2; font-weight: 800; font-size: 1.3em; color: #dc3232; }
.woocommerce-checkout #payment ul.wc_payment_methods { display: none !important; }
.woocommerce-checkout #payment div.payment_box { display: none !important; }
.woocommerce-checkout #payment div.form-row.place-order { margin-top: 0 !important; }
.woocommerce-checkout #payment #place_order { background: #0D9387; color: white !important; padding: 15px 25px; border-radius: 8px; font-weight: 900; font-size: 1.3em; border: none; transition: background-color 0.3s; }
.woocommerce-checkout #payment #place_order:hover { background: #0F766E; }
/* ----------------------------------------------------------------------
 * 5) BOOKING PAGE - MULTI-SLOT & 'NGAY' LOGIC STYLES
 * ------------------------------------------------------------------- */

/* (MỚI) Dấu Checkmark */
.ochie-slot-item::after {
    content: "\2713"; /* Mã Unicode cho dấu tick */
    position: absolute;
    top: 5px; right: 5px;
    color: white;
    background: #0D9387;
    border-radius: 50%;
    width: 16px; height: 16px;
    line-height: 16px;
    font-size: 12px;
    font-weight: bold;
    display: none; /* Ẩn mặc định */
    z-index: 2;
}
.ochie-slot-item.selected::after {
    display: block; /* Hiện dấu tick khi được chọn */
}

/* (MỚI) Style cho slot bị mờ đi do chọn "NGAY" */
.ochie-slot-item.dimmed-by-fullday {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
    text-decoration: line-through;
}
.ochie-slot-item.dimmed-by-fullday::after {
    display: none; /* Ẩn dấu tick nếu bị mờ */
}

/* (MỚI) Style cho danh sách tóm tắt */
#ochie-selected-slots-list { text-align: left; }
#ochie-selected-slots-list li {
    padding: 5px 0;
    border-bottom: 1px dotted #d1d5db;
    font-size: 0.95rem;
    color: #111827;
    display: flex;
    justify-content: space-between;
}
#ochie-selected-slots-list li:last-child {
    border-bottom: none;
}
/* === FIX NÚT XÓA SLOT (GHI ĐÈ BẤT KHẢ CHIẾN BẠI) === */

/* 1. Đảm bảo ô chứa nút (<td>) phải hiển thị */
.woocommerce table.shop_table td.product-remove {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 60px !important; /* Tăng độ rộng cột */
}

/* 2. Ép nút xóa (<a>) phải hiển thị */
.woocommerce table.shop_table td.product-remove .remove,
.woocommerce table.shop_table td.product-remove .remove:hover {
    
    /* Ép hiển thị, bất kể mọi thứ */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Style hình vuông, to, rõ */
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px !important; /* Bo góc vuông */
    
    /* Màu sắc cực kỳ nổi bật */
    background: #fee2e2 !important;     /* Nền đỏ nhạt */
    border: 2px solid #dc2626 !important; /* Viền đỏ đậm */
    color: #dc2626 !important;         /* Màu chữ X đỏ đậm */
    
    /* Căn giữa chữ X */
    align-items: center;
    justify-content: center;
    font-size: 2.2em !important;        /* Chữ X siêu to */
    font-weight: bold !important;
    line-height: 1 !important;
    text-decoration: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transition: background-color 0.2s;
}

/* 3. Hiệu ứng hover rõ ràng */
.woocommerce table.shop_table td.product-remove .remove:hover {
    background: #fca5a5 !important;   /* Nền đỏ đậm hơn */
    color: #991b1b !important;       /* Chữ X đậm nhất */
}
/* === MỚI (v2.0) - HỘP KHAI BÁO LƯU TRÚ (CHECKOUT) === */
.ochie-id-declaration-box {
    background-color: #fffbeb;
    /* Nền vàng nhạt (thông tin/cảnh báo) */
    border: 1px solid #fde68a;
    /* Viền vàng */
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 30px;
    color: #78350f;
    /* Chữ màu nâu đậm */
}

.ochie-id-declaration-box .ochie-id-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #b45309;
    /* Chữ tiêu đề màu cam đậm */
    margin-top: 0;
    margin-bottom: 10px;
}

.ochie-id-declaration-box p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.ochie-id-declaration-box ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}

.ochie-id-declaration-box li {
    font-size: 0.95rem;
    margin-bottom: 5px;
}

.ochie-id-declaration-box .ochie-id-disclaimer {
    font-style: italic;
    font-size: 0.9rem;
    color: #92400e;
    margin-bottom: 15px;
}

.ochie-id-declaration-box .ochie-id-instruction {
    font-size: 1rem;
    font-weight: 500;
    color: #b45309;
    background-color: #fff;
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed #fde68a;
}

/* === KẾT THÚC v2.0 === */
/* === MỚI (v2.1) - CHECKBOX ĐỒNG Ý (CHECKOUT) === */
.ochie-id-consent-field {
    margin-top: 20px;
    padding: 15px;
    background-color: #f3f4f6; /* Nền xám nhạt */
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.ochie-id-consent-field .woocommerce-form__label {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: #111827;
}
.ochie-id-consent-field input[type="checkbox"] {
    margin-top: 5px;
}
/* === MỚI (v2.6) - Canh đều lề (Justify) văn bản Chính sách === */
.woocommerce-checkout p.woocommerce-privacy-policy-text {
    text-align: justify;

/* === MỚI (v2.10) - Ghi đè màu chữ nhạt (#31312d) === */
/* Ghi đè CỤ THỂ các elements bị lỗi, dùng màu đen */

/* 1. Sửa lỗi màu chữ trong HỘP THÔNG BÁO */
body .woocommerce .woocommerce-info,
body .woocommerce .woocommerce-info::before,
body .woocommerce .woocommerce-info a,
body .woocommerce .woocommerce-message,
body .woocommerce .woocommerce-message::before,
body .woocommerce .woocommerce-message a,
body .woocommerce .woocommerce-error,
body .woocommerce .woocommerce-error::before,
body .woocommerce .woocommerce-error a {
    color: #b04078 !important; /* Màu hồng/tím đậm (thay vì #dba0bb) */
}

/* 2. Sửa lỗi màu chữ BẢNG GIỎ HÀNG (Giá, Thành tiền) */
body .woocommerce-cart table.shop_table td.product-price .amount,
body .woocommerce-cart table.shop_table td.product-subtotal .amount {
    color: #111827 !important; /* Màu đen (thay vì #31312d) */
}

/* 3. Sửa lỗi màu chữ BẢNG THANH TOÁN (Tiêu đề "Thành tiền", "Chi tiết") */
body .woocommerce .woocommerce-checkout-review-order table.shop_table thead th {
     color: #333 !important; /* Đổi tiêu đề bảng thành màu đen cho dễ đọc */
}

/* 4. Sửa lỗi màu chữ BẢNG THANH TOÁN (Nội dung: Tên phòng, Giá) */
body .woocommerce .woocommerce-checkout-review-order table.shop_table tbody td.product-name,
body .woocommerce .woocommerce-checkout-review-order table.shop_table tbody td.product-total .amount {
    color: #111827 !important; /* Đổi nội dung bảng thành màu đen (rất đậm) */
}

/* 5. Sửa lỗi màu chữ TỔNG CỘNG (Footer bảng thanh toán) */
body .woocommerce-checkout .woocommerce-checkout-review-order .order-total .woocommerce-Price-amount.amount {
    color: #442929 !important; /* Khôi phục màu ĐỎ (theo style.css của bạn) */
}

/* 6. Sửa lỗi màu chữ Tab sản phẩm (nếu có) */
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) a:hover {
    color: #311c26 !important; /* Màu hồng/tím đậm (thay vì #dba0bb) */
}