/*
Theme Name: Charm Store Child
Theme URI: 
Description: A child theme for Storefront with a custom charm builder.
Author: Cody Pham
Author URI: 
Template: storefront
Version: 1.0.1
*/

/* ============================================
   La Chérie – Màu sắc thương hiệu
   Nền body #f8f4f0, chữ chính #641919.
   Header/Footer nền #5a2a27, chữ & link #fadfb5.
   Button nền #5a2a27, chữ #fadfb5, hover #641919.
   ============================================ */

/* Body */
body,
body.site,
.site {
    background-color: #f8f4f0 !important;
    color: #641919;
}

a,
a:visited {
    color: #641919;
}

a:hover,
a:focus {
    color: #5a2a27;
}

/* ---------- Header: nền #5a2a27, chữ #fadfb5 ---------- */
.site-header,
.site-header .col-full,
.site-header .header-widget-region,
body .site-header {
    background-color: #5a2a27 !important;
    background: #5a2a27 !important;
    border-color: #5a2a27 !important;
}

.site-header,
.site-header * {
    color: #fadfb5 !important;
}

.site-header a,
.site-header .site-title a,
.site-header .site-title,
.main-navigation a,
.main-navigation ul.menu li a,
.main-navigation ul.nav-menu li a,
.site-header-cart .cart-contents,
.site-header-cart .cart-contents span,
.site-header-cart .amount {
    color: #fadfb5 !important;
}

.site-header a:hover,
.main-navigation a:hover,
.main-navigation ul li.current-menu-item > a,
.site-header-cart .cart-contents:hover {
    color: #ffffff !important;
}

/* Ô tìm kiếm trong header: nền sáng, chữ tối */
.site-header input[type="search"],
.site-header .search-field {
    background-color: #f8f4f0 !important;
    color: #641919 !important;
    border-radius: 999px !important;
}

.site-header .search-form .search-field {
    border-radius: 999px !important;
}

.site-header .search-form,
.site-header form.search-form {
    border-radius: 999px !important;
    overflow: hidden;
    background: #f8f4f0 !important;
}

.site-header .search-form .search-field:focus,
.site-header form.search-form input[type="search"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.site-header .search-form .search-submit,
.site-header form.search-form button {
    border-radius: 0 999px 999px 0 !important;
}

/* ---------- Buttons: nền #5a2a27, chữ #fadfb5, hover #641919, bo tròn ---------- */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
.added_to_cart,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: #5a2a27 !important;
    border-color: #5a2a27 !important;
    color: #fadfb5 !important;
    border-radius: 999px !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.button:hover,
.added_to_cart:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: #641919 !important;
    border-color: #641919 !important;
    color: #fadfb5 !important;
}

/* ---------- Product cards: nền #f8f4f0, border be ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce div.product,
.widget_product_search,
.widget_products,
.widget_top_rated_products,
.widget_recently_viewed_products {
    background-color: #f8f4f0 !important;
    border-radius: 16px;
    border: 1px solid #ead6c6;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
    color: #641919;
}

/* ---------- Footer: nền #5a2a27, chữ #fadfb5 ---------- */
.site-footer,
.site-footer .col-full,
.site-info,
body .site-footer {
    background-color: #5a2a27 !important;
    background: #5a2a27 !important;
    border-color: #5a2a27 !important;
    color: #fadfb5 !important;
}

.site-footer *,
.site-info * {
    color: #fadfb5 !important;
}

.site-footer a,
.site-info a {
    color: #fadfb5 !important;
}

.site-footer a:hover,
.site-info a:hover {
    color: #ffffff !important;
}

/* ---------- Full Width Header/Footer for WooCommerce Pages ---------- */
.woocommerce-cart .site-header .col-full,
.woocommerce-checkout .site-header .col-full,
.woocommerce-account .site-header .col-full,
.woocommerce-order-received .site-header .col-full,
.woocommerce-cart .site-footer .col-full,
.woocommerce-checkout .site-footer .col-full,
.woocommerce-account .site-footer .col-full,
.woocommerce-order-received .site-footer .col-full {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account, body.woocommerce-order-received {
    overflow-x: hidden;
}

/* ============================================
   Checkout UI Optimization (Phase 3 - Option 2)
   Chỉ ảnh hưởng cột Thông tin Thanh toán (Billing), không chạm vào cột Đơn Hàng.
   ============================================ */

/* Ép các trường input trong cột Billing thành 2 ô ngang để giảm chiều dài */
/* Dùng Flexbox tĩnh trên mọi giao diện để khóa chết thứ tự (Order), chống lại lỗi đảo DOM sau khi AJAX load */
.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Định nghĩa thứ tự trói buộc (Hard-coded Layout Sequence) */
.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper .form-row { order: 99; width: 100%; margin-bottom: 1em; } /* Default */

#billing_first_name_field { order: 10 !important; }
#billing_phone_field      { order: 20 !important; }
#billing_country_field    { order: 30 !important; }
#billing_state_field      { order: 40 !important; }
#billing_city_field       { order: 50 !important; }
#billing_address_2_field  { order: 60 !important; }
#billing_address_1_field  { order: 70 !important; }
#billing_email_field      { order: 80 !important; }
#billing_instagram_field  { order: 90 !important; }

@media (min-width: 768px) {
    .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper .form-row {
        width: 48% !important;
        float: none !important;
        clear: none !important;
    }
    
    /* Trừ trường hợp đặc biệt như ghi chú hoặc địa chỉ cụ thể nếu có */
    .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper #billing_address_1_field,
    .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper #billing_email_field,
    .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper #billing_instagram_field,
    .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper #order_comments_field {
        width: 100% !important;
    }
}

/* ============================================
   Global UI Effects (Hover, Focus, Transitions)
   ============================================ */
   
/* Smooth transition cho các thẻ tương tác */
button, 
input, 
select, 
textarea, 
.button, 
.added_to_cart, 
.woocommerce ul.products li.product,
.woocommerce ul.products li.product *,
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button {
    transition: all 0.3s ease-in-out !important;
}

/* Hiệu ứng focus viền sáng mượt mà cho form inputs */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: #5a2a27 !important;
    box-shadow: 0 0 0 1px #5a2a27 !important;
    outline: none !important;
}

/* Hiệu ứng nổi lên (Elevate) cho button và product cards */
button:hover,
.button:hover,
.added_to_cart:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(90, 42, 39, 0.15) !important;
}