/**
 * dir assets/css/
 * file woo-checkout.css
 * GUSTABE MASTER CHECKOUT STYLES
 * Update: Cleaned, De-duplicated (ใช้ Component กองกลางสำหรับหน้าบิลแล้ว)
 */

/* =========================================
   1. SHARED COMPONENTS (เฉพาะ Timeline)
   ========================================= */
.checkout-timeline {
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 40px;
}
.checkout-timeline .step {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    color: #ccc; position: relative; z-index: 2;
}
.checkout-timeline .step.active, 
.checkout-timeline .step.completed { color: var(--primary-color); }
.checkout-timeline .icon {
    width: 40px; height: 40px;
    background: #f5f5f5; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #eee; transition: 0.3s;
}
.checkout-timeline .step.active .icon,
.checkout-timeline .step.completed .icon {
    background: var(--primary-color); border-color: var(--primary-color); color: #fff;
    box-shadow: 0 4px 10px rgba(4,163,156,0.3);
}
.checkout-timeline .step.completed span { font-weight: 700; }
.checkout-timeline .line {
    flex: 1; height: 2px; background: #eee;
    margin: -20px 10px 0; max-width: 100px;
}
.checkout-timeline .line.active { background: var(--primary-color); }


/* =========================================
   2. CART PAGE STYLES (หน้าตะกร้าสินค้า)
   ========================================= */
.gustabe-cart-wrapper { max-width: 800px; margin: 0 auto; padding-bottom: 50px; display: grid;  gap: 1em;  }

.reward-progress-container {
    background: #fff; padding: 20px; border-radius: 16px; border: 1px solid #eee;
    margin-bottom: 25px; box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.reward-bar-bg {
    height: 8px; background: #eee; border-radius: 10px;
    position: relative; margin: 30px 10px 10px;
}
.reward-bar-fill {
    height: 100%; background: linear-gradient(90deg, var(--primary-color), #00d2c6);
    border-radius: 10px; transition: width 0.5s ease;
}
.tier-point { position: absolute; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.tier-point .dot {
    width: 20px; height: 20px; background: #fff; border: 3px solid #ccc;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #fff; transition: 0.3s;
}
.tier-point.passed .dot { background: var(--primary-color); border-color: var(--primary-color); }
.tier-point .label {
    position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%);
    white-space: nowrap; font-size: 11px; background: #333; color: #fff;
    padding: 2px 6px; border-radius: 4px; opacity: 0; transition: 0.3s; pointer-events: none;
}
.tier-point:hover .label, .tier-point.passed .label { opacity: 1; bottom: 30px; }
.tier-point .amount { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #999; }
.reward-message {
    text-align: center; margin-top: 25px; font-size: 14px; color: #555;
    background: #f9f9f9; padding: 8px; border-radius: 8px;
}
.reward-message i { color: #f57f17; margin-right: 5px; vertical-align: middle; }

.gustabe-cart-list { display: flex; flex-direction: column; gap: 15px; }
.cart-item-card {
    background: #fff; border: 1px solid #eee; border-radius: 16px;
    padding: 15px; display: flex; gap: 15px; align-items: flex-start;
}
.item-thumb { width: 80px; height: 80px; flex-shrink: 0; border-radius: 12px; overflow: hidden; }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-details { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.item-header { display: flex; justify-content: space-between; align-items: flex-start; }
.item-name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; max-width: 85%; }
.item-name a { color: #333; text-decoration: none; }
.remove-item { color: #ff4d4f; opacity: 0.7; transition: 0.2s; }
.remove-item:hover { opacity: 1; transform: scale(1.1); }
.item-price-unit { font-size: 13px; color: #888; }
.item-subtotal { font-weight: 700; color: var(--primary-color); font-size: 16px; }

.item-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.qty-stepper { display: flex; align-items: center; background: #f5f5f5; border-radius: 50px; padding: 2px; }
.qty-btn {
    width: 28px; height: 28px; border: none; background: #fff; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #333; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.qty-stepper input.qty {
    width: 40px; border: none; background: transparent; text-align: center;
    font-size: 14px; font-weight: 600; padding: 0; height: 28px;
    -moz-appearance: textfield; appearance: textfield;
}
.qty-stepper input.qty::-webkit-outer-spin-button,
.qty-stepper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }


/* =========================================
   3. CHECKOUT PAGE STYLES (หน้าชำระเงิน)
   ========================================= */
.gustabe-checkout-grid {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: start;
}
@media (max-width: 900px) {
    .gustabe-checkout-grid { grid-template-columns: 1fr; }
    .col-right { order: -1; margin-bottom: 20px; }
    .sticky-summary { position: static; }
}

.woocommerce form .form-row { margin-bottom: 15px; }
.woocommerce form .form-row label { font-size: 14px; font-weight: 600; color: #444; margin-bottom: 6px; display: block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container .select2-selection--single {
    height: 48px; border-radius: 10px; border: 1px solid #e0e0e0; background: #fdfdfd;
    padding: 0 15px; font-size: 14px; color: #333; width: 100%; box-sizing: border-box; transition: 0.2s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--primary-color); background: #fff;
    box-shadow: 0 0 0 4px rgba(4, 163, 156, 0.1); outline: none;
}

.sticky-summary { position: sticky; top: 30px; }
.summary-title { font-size: 18px; font-weight: 700; margin-bottom: 20px; color: #333; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.review-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed #eee; }
.review-item:last-child { border-bottom: none; }
.review-item .item-info { font-size: 14px; color: #333; padding-right: 10px; }
.review-item .item-name { font-weight: 600; margin-bottom: 4px; }
.review-item .item-meta { font-size: 12px; color: #999; }
.review-item .item-total { font-weight: 700; color: #333; white-space: nowrap; }

.review-divider { height: 1px; background: #f0f0f0; margin: 15px 0; }
.review-divider-bold { height: 1px; background: #eee; margin: 15px 0; border-top: 1px dashed #ddd; }

.total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; color: #555; }
.total-row .value { font-weight: 600; color: #333; }
.total-row.grand-total { margin-top: 5px; }
.total-row.grand-total .label { font-size: 16px; font-weight: 700; color: #333; }
.total-row.grand-total .value { font-size: 20px; font-weight: 800; color: var(--primary-color); }
.text-success { color: #28a745 !important; }
.total-row.shipping .value table { margin: 0; width: 100%; }
.total-row.shipping .value td { padding: 0; text-align: right; border: none; }

#payment { background: transparent !important; border-radius: 0 !important; }
#payment ul.payment_methods { padding: 0 !important; margin: 0 0 20px 0 !important; list-style: none !important; border: none !important; }
.gustabe-payment-card { margin-bottom: 15px; position: relative; background: transparent !important; border: none !important; padding: 0 !important; }
.gustabe-payment-card input[type="radio"] { position: absolute; opacity: 0; z-index: -1; }
.gustabe-payment-card .payment-label {
    display: flex; align-items: center; gap: 15px; background: #fff; border: 1px solid #e5e5e5;
    padding: 18px 20px; border-radius: 14px; cursor: pointer; transition: all 0.25s; width: 100%; position: relative; overflow: hidden;
}
.gustabe-payment-card .payment-icon { font-size: 26px; color: #888; transition: 0.2s; }
.gustabe-payment-card .payment-title { font-size: 16px; font-weight: 600; color: #444; flex-grow: 1; }
.gustabe-payment-card .payment-label::after {
    content: ''; width: 22px; height: 22px; border: 2px solid #ccc; border-radius: 50%; background: #fff; transition: 0.2s; flex-shrink: 0;
}
.gustabe-payment-card .payment-label::before {
    content: ''; width: 12px; height: 12px; background: #fff; border-radius: 50%; position: absolute;
    right: 25px; top: 50%; transform: translateY(-50%) scale(0); transition: 0.2s; z-index: 2;
}
.gustabe-payment-card input[type="radio"]:checked + .payment-label { background: #f0fdfc; border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color) inset; }
.gustabe-payment-card input[type="radio"]:checked + .payment-label .payment-icon { color: var(--primary-color); transform: scale(1.1); }
.gustabe-payment-card input[type="radio"]:checked + .payment-label::after { background: var(--primary-color); border-color: var(--primary-color); }
.gustabe-payment-card input[type="radio"]:checked + .payment-label::before { transform: translateY(-50%) scale(1); }

#payment div.payment_box {
    padding: 20px !important; animation: slideDown 0.3s ease-out; background: transparent !important; border: none !important;
    margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #555 !important; font-size: 14px !important;
}
#payment div.payment_box::before { display: none !important; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

#place_order {
    background: var(--primary-color) !important; color: #fff !important; border-radius: 50px !important;
    height: 55px !important; font-size: 18px !important; font-weight: 700 !important; width: 100%;
    border: none; box-shadow: 0 5px 15px rgba(4, 163, 156, 0.4); cursor: pointer; transition: 0.3s; margin-top: 20px;
}
#place_order:hover { background: var(--primary-hover) !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(4, 163, 156, 0.5); }


/* =========================================
   4. THANK YOU PAGE (Order Received)
   ========================================= */
.gustabe-order-received-app { max-width: 800px; margin: 0 auto; padding-bottom: 50px; }

.gustabe-card.success-card, .gustabe-card.error-card {
    text-align: center; padding: 40px 30px; margin-bottom: 30px;
    background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #f0f0f0;
}
.status-icon { font-size: 60px; margin-bottom: 20px; animation: popUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.status-icon.success { color: var(--primary-color); }
.status-icon.error { color: #ff4d4f; }
.success-card h2 { font-size: 24px; color: #333; margin-bottom: 10px; }
.success-card p { color: #666; margin-bottom: 30px; }

.order-meta-list {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; list-style: none;
    padding: 20px; margin: 0; background: #f9f9f9; border-radius: 12px;
}
.meta-item { display: flex; flex-direction: column; align-items: center; padding: 0 15px; border-right: 1px solid #eee; }
.meta-item:last-child { border-right: none; }
.meta-item span { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.meta-item strong { font-size: 16px; color: #333; margin-top: 5px; }
.meta-item strong.price { color: var(--primary-color); }