/* Kaak Alia - Ecommerce: cart, checkout and order pages.
   Warm cream + gold + espresso. Logical properties throughout so the same
   file serves Arabic (RTL) and English (LTR). */

.kae-scope {
	--kae-accent: #DCA54A;
	--kae-dark: #4a2d18;
	--kae-cream: #fdf6e7;
	--kae-cream-2: #faf0d9;
	--kae-line: rgba(74, 45, 24, .14);
	--kae-line-soft: rgba(74, 45, 24, .08);
	--kae-muted: #7d6551;
	--kae-ok: #3f7d4e;
	--kae-bad: #b3412b;
	--kae-radius: 14px;
	--kae-radius-sm: 10px;
	--kae-ease: cubic-bezier(.2, .7, .2, 1);

	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--kae-dark);
	box-sizing: border-box;
	text-align: start;
}
.kae-scope.kae-lang-ar,
.kae-lang-ar .kae-scope {
	font-family: 'Tajawal', 'Poppins', -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
}
.kae-scope *, .kae-scope *::before, .kae-scope *::after { box-sizing: border-box; }
.kae-scope [hidden] { display: none !important; }

/* ---------------- Card ---------------- */
.kae-card {
	background: #fff;
	border: 1px solid var(--kae-line);
	border-radius: var(--kae-radius);
	padding: 24px;
	margin: 22px 0;
	box-shadow: 0 6px 22px rgba(74, 45, 24, .06);
}
.kae-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block-end: 14px;
	margin-block-end: 16px;
	border-block-end: 1px solid var(--kae-line-soft);
}
.kae-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 12px;
	background: var(--kae-cream-2);
	color: var(--kae-dark);
}
.kae-ico--wa { background: #e6f6ec; color: #1f8f4d; }
.kae-card__title {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 1.2rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--kae-dark) !important;
}
.kae-card__lead { margin: 0 0 16px; font-size: .95rem; color: var(--kae-muted); line-height: 1.7; }

/* ---------------- Cart: city selector ---------------- */
.kae-city-card { margin: 0 0 18px; padding: 20px; }
.kae-city-card .kae-card__title { font-size: 1.05rem !important; }
.kae-label {
	display: block;
	margin: 0 0 8px;
	font-size: .86rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--kae-dark);
}
.kae-label .required, .kae-scope abbr.required { color: var(--kae-accent); text-decoration: none; font-weight: 700; border: 0; }
.kae-select, .kae-input, .kae-textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1.5px solid var(--kae-line);
	border-radius: var(--kae-radius-sm);
	background: #fff;
	font: inherit;
	font-size: 1rem;
	color: var(--kae-dark);
	transition: border-color .2s var(--kae-ease), box-shadow .2s var(--kae-ease);
	box-shadow: none;
}
.kae-select:focus, .kae-input:focus, .kae-textarea:focus,
.kuwait-city-select:focus {
	outline: none;
	border-color: var(--kae-accent);
	box-shadow: 0 0 0 4px rgba(220, 165, 74, .18);
}
.kae-textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.kae-fee-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-start: 12px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--kae-cream-2);
	border: 1px solid rgba(220, 165, 74, .45);
	font-size: .92rem;
}
.kae-fee-chip strong { font-weight: 700; }
.kae-loading { margin-block-start: 10px; font-size: .88rem; color: var(--kae-muted); display: flex; align-items: center; gap: 8px; }
.kae-spinner {
	width: 14px; height: 14px; border-radius: 50%;
	border: 2px solid rgba(74, 45, 24, .2); border-top-color: var(--kae-accent);
	animation: kae-spin .7s linear infinite;
}
@keyframes kae-spin { to { transform: rotate(360deg); } }

/* The checkout city field row (WooCommerce markup) */
.kae-city-field label .required { color: var(--kae-accent); }
.kae-city-field .select2-container--default .select2-selection--single,
.kae-city-field select { border-color: var(--kae-line); }

/* ---------------- Notices ---------------- */
.kae-notice {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: var(--kae-radius-sm);
	background: var(--kae-cream);
	border: 1px solid var(--kae-line-soft);
	border-inline-start: 4px solid var(--kae-accent);
	font-size: .9rem;
	line-height: 1.7;
	color: var(--kae-dark);
}
.kae-notice strong { color: var(--kae-dark); }
.kae-notice--soft { background: #fff; margin-block-start: 14px; margin-block-end: 0; font-size: .85rem; color: var(--kae-muted); }
.kae-notice--pay { margin-block-start: 14px; margin-block-end: 0; background: #fff8e8; border-color: rgba(220, 165, 74, .5); }
.kae-hint { margin: 8px 0 0; font-size: .85rem; color: var(--kae-muted); }
.kae-slots-empty { color: var(--kae-bad); font-weight: 600; }
.kae-slots-empty.is-info { color: var(--kae-muted); font-weight: 400; }

/* ---------------- Steps ---------------- */
.kae-step { margin-block-start: 26px; padding-block-start: 22px; border-block-start: 1px dashed var(--kae-line); }
.kae-step:first-of-type { margin-block-start: 8px; }
.kae-step__title {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 16px !important; padding: 0 !important; border: 0 !important;
	font-size: 1.02rem !important; font-weight: 700 !important; color: var(--kae-dark) !important;
}
.kae-step__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--kae-dark); color: #fff; font-size: .8rem; font-weight: 700;
}
.kae-field { margin-block-end: 18px; }

.kae-input-wrap { position: relative; display: block; }
.kae-input-wrap .kae-input { padding-inline-start: 46px; cursor: pointer; }
.kae-input-ico {
	position: absolute; inset-block: 0; inset-inline-start: 14px;
	display: inline-flex; align-items: center; color: var(--kae-muted); pointer-events: none;
}
.kae-input-ico svg { width: 20px; height: 20px; }

/* ---------------- Choice tiles (radios) ---------------- */
.kae-choice-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-block-end: 14px; }
.kae-choice-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kae-choice { position: relative; display: block; margin: 0; cursor: pointer; }
.kae-choice input[type="radio"] {
	position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.kae-choice__body {
	display: flex; align-items: center; gap: 12px; height: 100%;
	padding: 14px 16px;
	background: #fff;
	border: 1.5px solid var(--kae-line);
	border-radius: var(--kae-radius-sm);
	transition: border-color .2s var(--kae-ease), background .2s var(--kae-ease), box-shadow .2s var(--kae-ease), transform .2s var(--kae-ease);
}
.kae-choice:hover .kae-choice__body { border-color: rgba(74, 45, 24, .35); transform: translateY(-1px); }
.kae-choice__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
	background: var(--kae-cream-2); color: var(--kae-dark);
	transition: background .2s, color .2s;
}
.kae-choice__icon svg { width: 20px; height: 20px; }
.kae-choice__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kae-choice__text strong { font-size: .95rem; font-weight: 600; line-height: 1.4; }
.kae-choice__text small { font-size: .78rem; color: var(--kae-muted); line-height: 1.4; }
.kae-choice input:checked + .kae-choice__body {
	border-color: var(--kae-accent);
	background: #fff8e8;
	box-shadow: 0 6px 18px rgba(220, 165, 74, .22);
}
.kae-choice input:checked + .kae-choice__body .kae-choice__icon { background: var(--kae-accent); color: #fff; }
.kae-choice input:focus-visible + .kae-choice__body { outline: 3px solid rgba(220, 165, 74, .55); outline-offset: 2px; }
.kae-choice input:disabled { cursor: not-allowed; }
.kae-choice input:disabled + .kae-choice__body {
	background: #f4f1ec; border-color: #e3ddd3; opacity: .62; transform: none; box-shadow: none;
}
.kae-choice input:disabled + .kae-choice__body strong { color: #8b8176; }
.kae-choice input:disabled + .kae-choice__body .kae-choice__icon { background: #e8e2d8; }
.kae-slot-hint:empty { display: none; }
.kae-slot-hint { color: var(--kae-bad) !important; font-weight: 500; }

/* ---------------- Checkbox ---------------- */
.kae-check { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; cursor: pointer; font-weight: 600; font-size: .92rem; }
.kae-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--kae-accent); }
.kae-instructions { margin-block-start: 6px; }

/* ---------------- Buttons ---------------- */
.kae-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 13px 24px; border-radius: 999px; border: 0; cursor: pointer;
	font: inherit; font-weight: 700; font-size: .98rem; text-decoration: none;
	transition: transform .2s var(--kae-ease), box-shadow .2s var(--kae-ease);
}
.kae-btn--wa { background: #1f9d55; color: #fff !important; box-shadow: 0 8px 20px rgba(31, 157, 85, .28); }
.kae-btn--wa:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31, 157, 85, .34); }
.kae-btn svg { width: 20px; height: 20px; }

/* ---------------- Order details table ---------------- */
.kae-table { width: 100%; border-collapse: collapse; margin: 0; border: 1px solid var(--kae-line-soft); border-radius: var(--kae-radius-sm); overflow: hidden; }
.kae-table th, .kae-table td { padding: 12px 14px; text-align: start; border-block-end: 1px solid var(--kae-line-soft); font-size: .95rem; }
.kae-table th { width: 36%; background: var(--kae-cream); font-weight: 600; color: var(--kae-dark); }
.kae-table tr:last-child th, .kae-table tr:last-child td { border-block-end: 0; }

/* ---------------- Datepicker (jQuery UI) ---------------- */
#ui-datepicker-div.ui-datepicker {
	z-index: 99999 !important;
	width: 300px; max-width: calc(100vw - 24px);
	padding: 14px;
	background: #fff;
	border: 1px solid var(--kae-line);
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(74, 45, 24, .22);
	font-family: 'Tajawal', 'Poppins', -apple-system, 'Segoe UI', Arial, sans-serif;
	color: #4a2d18;
	display: none;
}
#ui-datepicker-div .ui-datepicker-header {
	position: relative; display: flex; align-items: center; justify-content: center;
	padding: 6px 36px 12px; margin: 0; border: 0; background: transparent;
}
#ui-datepicker-div .ui-datepicker-title { font-weight: 700; font-size: 1rem; line-height: 1.2; margin: 0; display: flex; gap: 6px; }
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
	position: absolute; top: 2px; width: 32px; height: 32px; border-radius: 50%;
	background: #faf0d9; cursor: pointer; border: 0; display: flex; align-items: center; justify-content: center;
}
#ui-datepicker-div .ui-datepicker-prev { inset-inline-start: 0; }
#ui-datepicker-div .ui-datepicker-next { inset-inline-end: 0; }
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover { background: #DCA54A; }
#ui-datepicker-div .ui-datepicker-prev .ui-icon,
#ui-datepicker-div .ui-datepicker-next .ui-icon { display: none; }
#ui-datepicker-div .ui-datepicker-prev::after,
#ui-datepicker-div .ui-datepicker-next::after { font-size: 18px; line-height: 1; font-weight: 700; color: #4a2d18; }
#ui-datepicker-div .ui-datepicker-prev::after { content: '\2039'; }
#ui-datepicker-div .ui-datepicker-next::after { content: '\203A'; }
.kae-rtl-picker#ui-datepicker-div .ui-datepicker-prev::after { content: '\203A'; }
.kae-rtl-picker#ui-datepicker-div .ui-datepicker-next::after { content: '\2039'; }
#ui-datepicker-div table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 3px; font-size: .88rem; }
#ui-datepicker-div th { padding: 6px 0; font-weight: 600; font-size: .78rem; color: #7d6551; text-align: center; border: 0; background: none; }
#ui-datepicker-div td { padding: 0; border: 0; background: none; }
#ui-datepicker-div td a, #ui-datepicker-div td span {
	display: block; padding: 9px 0; text-align: center; border-radius: 10px; text-decoration: none;
	background: #fff; border: 0; color: #4a2d18; font-weight: 500; transition: background .15s;
}
#ui-datepicker-div td a:hover { background: #faf0d9; }
#ui-datepicker-div td.ui-datepicker-today a { background: #fdf3da; box-shadow: inset 0 0 0 1.5px rgba(220, 165, 74, .7); }
#ui-datepicker-div td a.ui-state-active, #ui-datepicker-div td a.ui-state-active:hover { background: #DCA54A; color: #fff; font-weight: 700; }
#ui-datepicker-div td.ui-state-disabled span { opacity: .3; background: transparent; text-decoration: line-through; }
#ui-datepicker-div td.ui-datepicker-unselectable.kae-closed span { color: #b3412b; opacity: .45; }
#ui-datepicker-div .ui-datepicker-other-month a, #ui-datepicker-div .ui-datepicker-other-month span { opacity: .35; }

/* ---------------- Thank-you / WhatsApp card ---------------- */
.kae-wa-card { border-color: rgba(31, 157, 85, .35); background: #f7fcf9; }

/* ---------------- Mobile ---------------- */
@media (max-width: 640px) {
	.kae-card { padding: 18px; margin: 16px 0; border-radius: 12px; }
	.kae-choice-grid, .kae-choice-grid--2 { grid-template-columns: 1fr; }
	.kae-select, .kae-input, .kae-textarea { font-size: 16px; } /* stops iOS zoom */
	.kae-table th { width: 40%; }
}
@media (prefers-reduced-motion: reduce) {
	.kae-scope * { transition: none !important; animation: none !important; }
}