/**
 * Customer Cart Drawer Styles
 */

/* Badge số lượng trên cart icon */
.cart-icon { position: relative; }
.cart-icon__badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: #C44545;
	color: #fff;
	border-radius: 99px;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
}
.cart-icon.has-items svg { color: #8B6B47; }

/* Overlay */
.ad-cart-overlay {
	position: fixed;
	inset: 0;
	background: rgba(44, 24, 16, 0.5);
	backdrop-filter: blur(4px);
	z-index: 199;
	opacity: 0;
	pointer-events: none;
	transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ad-cart-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* Drawer slide từ phải */
.ad-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100vw);
	background: #fff;
	z-index: 200;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: -8px 0 32px rgba(44, 24, 16, 0.18);
}
.ad-cart-drawer.is-open { transform: translateX(0); }
.ad-cart-drawer[hidden] { display: flex; }

/* Header */
.ad-cart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid #E5DED1;
	flex-shrink: 0;
}
.ad-cart-head h3 {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: 18px;
	color: #2C1810;
}
.ad-cart-close {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #F5EFE6;
	border: 0;
	color: #6B4F35;
	font-size: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ad-cart-close:hover { background: #E5DED1; }

/* Body scrollable */
.ad-cart-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
}

/* Empty state */
.ad-cart-empty {
	text-align: center;
	padding: 40px 20px;
	color: #8B7355;
}
.ad-cart-empty p { margin: 0 0 16px; }

/* Items list */
.ad-cart-items {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ad-cart-item {
	display: grid;
	grid-template-columns: 60px 1fr auto;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px dashed #E5DED1;
	align-items: center;
}
.ad-cart-item:last-child { border-bottom: 0; }

.ad-cart-item__thumb {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	background: #F5EFE6;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	flex-shrink: 0;
}

.ad-cart-item__body { min-width: 0; }
.ad-cart-item__name {
	font-weight: 600;
	font-size: 13px;
	color: #2C1810;
	margin: 0 0 2px;
	line-height: 1.3;
}
.ad-cart-item__price {
	font-size: 12px;
	color: #8B7355;
	margin: 0 0 6px;
}
.ad-cart-item__qty {
	display: flex;
	align-items: center;
	gap: 6px;
}
.ad-cart-item__qty button {
	width: 24px;
	height: 24px;
	border: 1px solid #E5DED1;
	background: #fff;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ad-cart-item__qty button:hover { background: #F5EFE6; }
.ad-cart-item__qty span {
	font-weight: 600;
	min-width: 20px;
	text-align: center;
	font-size: 13px;
}
.ad-cart-item__remove {
	color: #C44545 !important;
	border: 0 !important;
	margin-left: auto;
}
.ad-cart-item__total {
	font-weight: 600;
	color: #8B6B47;
	font-size: 14px;
	white-space: nowrap;
}

/* Footer */
.ad-cart-foot {
	padding: 16px 20px;
	border-top: 1px solid #E5DED1;
	background: #FDFBF7;
	flex-shrink: 0;
}
.ad-cart-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	font-size: 16px;
}
.ad-cart-total strong {
	font-family: 'Playfair Display', serif;
	font-size: 22px;
	color: #8B6B47;
}

/* Buttons */
.ad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 20px;
	border: 0;
	border-radius: 99px;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: background 180ms, transform 100ms;
	text-decoration: none;
	min-height: 44px;
}
.ad-btn:active { transform: scale(0.98); }
.ad-btn--primary { background: #8B6B47; color: #fff; }
.ad-btn--primary:hover { background: #6B4F35; }
.ad-btn--primary:disabled { background: #C5C5C5; cursor: not-allowed; }
.ad-btn--ghost { background: transparent; color: #6B4F35; border: 1px solid #E5DED1; }
.ad-btn--ghost:hover { background: #F5EFE6; }
.ad-btn--sm { padding: 8px 14px; font-size: 13px; min-height: 36px; }
.ad-btn--full { width: 100%; }

/* Checkout form */
.ad-checkout-form { display: flex; flex-direction: column; gap: 10px; }

.ad-checkout-step {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Playfair Display', serif;
	font-size: 17px;
	margin: 14px 0 6px;
	color: #2C1810;
}
.ad-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: linear-gradient(135deg, #8B6B47, #6B4F35);
	color: #fff;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	font-family: 'Inter', sans-serif;
	box-shadow: 0 2px 6px rgba(139,107,71,0.3);
}
.ad-req { color: #C44545; font-weight: 700; }

.ad-field { display: flex; flex-direction: column; gap: 4px; }
.ad-field label {
	font-size: 12px;
	font-weight: 500;
	color: #6B4F35;
	display: flex;
	align-items: center;
	gap: 4px;
}
.ad-field input,
.ad-field textarea,
.ad-field select {
	padding: 11px 13px;
	border: 1.5px solid #E5DED1;
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	transition: border-color 180ms, box-shadow 180ms;
}
.ad-field input:focus,
.ad-field textarea:focus,
.ad-field select:focus {
	border-color: #8B6B47;
	box-shadow: 0 0 0 3px rgba(139,107,71,0.1);
}
.ad-field textarea { resize: vertical; min-height: 60px; }

/* Payment options cards */
.ad-payment-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 4px;
}
.ad-payment-card {
	position: relative;
	cursor: pointer;
	display: block;
}
.ad-payment-card input[type=radio] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ad-payment-card__body {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1.5px solid #E5DED1;
	border-radius: 10px;
	background: #fff;
	transition: all 200ms;
}
.ad-payment-card:hover .ad-payment-card__body {
	border-color: #B89968;
}
.ad-payment-card input:checked + .ad-payment-card__body {
	border-color: #8B6B47;
	background: linear-gradient(to right, #FDFBF7, #fff);
	box-shadow: 0 2px 8px rgba(139,107,71,0.12);
}
.ad-payment-card__icon { font-size: 22px; }
.ad-payment-card__body strong {
	display: block;
	font-size: 14px;
	color: #2C1810;
	margin-bottom: 2px;
}
.ad-payment-card__body small {
	font-size: 11px;
	color: #8B7355;
}

/* Subtotal rows trong checkout */
.ad-cart-subtotal {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: #8B7355;
	margin-bottom: 4px;
}
.ad-cart-trust {
	margin: 8px 0 0;
	font-size: 11px;
	color: #8B7355;
	text-align: center;
}

/* Spinner */
.ad-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ad-spin 0.6s linear infinite;
	margin-right: 6px;
	vertical-align: middle;
}
@keyframes ad-spin { to { transform: rotate(360deg); } }

.ad-btn--lg {
	padding: 14px 24px;
	font-size: 15px;
	min-height: 52px;
	font-weight: 600;
}

/* ===== Size picker modal ===== */
.ad-size-modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.ad-size-modal.is-open { display: flex; }

.ad-size-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(44, 24, 16, 0.55);
	backdrop-filter: blur(6px);
}

.ad-size-modal__inner {
	position: relative;
	background: #fff;
	border-radius: 18px;
	width: min(420px, 100%);
	box-shadow: 0 24px 60px rgba(44, 24, 16, 0.3);
	animation: adSizeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes adSizeIn {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: scale(1); }
}

.ad-size-modal__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #E5DED1;
}
.ad-size-modal__head h3 {
	font-family: 'Playfair Display', serif;
	margin: 0;
	font-size: 18px;
	color: #2C1810;
}
.ad-size-modal__close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #F5EFE6;
	border: 0;
	color: #6B4F35;
	font-size: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ad-size-modal__body {
	padding: 20px;
}

.ad-size-modal__product {
	margin: 0 0 16px;
	font-size: 14px;
	color: #8B7355;
	text-align: center;
}

.ad-size-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ad-size-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 20px 12px;
	background: linear-gradient(180deg, #FDFBF7, #F5EFE6);
	border: 2px solid #E5DED1;
	border-radius: 14px;
	cursor: pointer;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
	font-family: inherit;
}

.ad-size-btn:hover {
	border-color: #8B6B47;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(139, 107, 71, 0.15);
}

.ad-size-btn:active { transform: scale(0.97); }

.ad-size-btn__code {
	font-family: 'Playfair Display', serif;
	font-size: 36px;
	font-weight: 700;
	color: #8B6B47;
	line-height: 1;
}

.ad-size-btn__label {
	font-size: 12px;
	color: #8B7355;
	margin: 4px 0;
}

.ad-size-btn__price {
	font-size: 15px;
	font-weight: 600;
	color: #2C1810;
}

/* Success state */
.ad-cart-success {
	text-align: center;
	padding: 30px 20px;
}
.ad-cart-success p { margin: 8px 0; }

/* Toast notification */
.ad-cart-toast {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: #2C1810;
	color: #fff;
	padding: 12px 22px;
	border-radius: 99px;
	font-size: 13px;
	z-index: 250;
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms, transform 220ms;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.ad-cart-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Mobile adjust */
@media (max-width: 480px) {
	.ad-cart-drawer { width: 100vw; }
	.ad-cart-head { padding: 14px 16px; }
	.ad-cart-body { padding: 12px 16px; }
	.ad-cart-foot { padding: 14px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}