/*!
 * EGSBI Checkout Experience — checkout.css
 *
 * Scoped entirely under .egsbi-co-shell / body.egsbi-co-page so nothing here
 * leaks into the rest of the Eduma theme. Direction: the shell is RTL because
 * the audience and all of the chrome copy is Arabic, but the WooCCM field
 * labels are English — `unicode-bidi: plaintext` lets each string align by its
 * own first strong character instead of forcing one direction on both.
 */

/* ==========================================================================
   1. Tokens + shell
   ========================================================================== */

/* The palette is the site's own identity, read off Eduma's theme variables:
   --thim-body-primary-color #ff647d (pink), --thim-font-title-color #4e5859
   (dark slate), --thim-font-body-color #606060, --thim-footer-bg-color #333f41.

   Pink carries meaning and nothing else: the place-order button and whatever
   the member has selected. Slate does the ordinary work — headings, secondary
   buttons, section badges — so the page stops reading as uniformly pink. */
body.egsbi-co-page {
	--co-bg: #f6f7f7;
	--co-surface: #ffffff;
	--co-surface-2: #fafbfb;
	--co-ink: #4e5859;
	--co-ink-2: #606060;
	--co-muted: #8a9294;
	--co-line: #ececec;
	--co-line-2: #dcdfe0;
	--co-brand: #ff647d;
	--co-brand-deep: #e8455f;
	--co-brand-tint: #fff0f3;
	--co-accent: #4e5859;
	--co-accent-tint: #eff1f1;
	--co-slate: #333f41;
	--co-ok: #0f9d76;
	--co-ok-tint: #e9f8f3;
	--co-danger: #e11d48;
	--co-danger-tint: #fff1f3;
	--co-radius: 18px;
	--co-radius-sm: 12px;
	--co-shadow: 0 1px 2px rgba(51, 63, 65, .04), 0 14px 34px -18px rgba(51, 63, 65, .26);
	--co-shadow-lg: 0 24px 60px -24px rgba(51, 63, 65, .36);
	--co-ring: 0 0 0 4px rgba(255, 100, 125, .18);
}

body.egsbi-co-page .egsbi-co-shell {
	direction: rtl;
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 0 4rem;
	color: var(--co-ink);
	font-size: 15px;
	line-height: 1.7;
}

body.egsbi-co-page .egsbi-co-shell *,
body.egsbi-co-page .egsbi-co-shell *::before,
body.egsbi-co-page .egsbi-co-shell *::after {
	box-sizing: border-box;
}

body.egsbi-co-page .egsbi-co-shell .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

body.egsbi-co-page .egsbi-co-shell [hidden],
.egsbi-co-cam [hidden],
.egsbi-co-lightbox [hidden] {
	display: none !important;
}

body.egsbi-co-page .egsbi-co-icon {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

/* Give the whole checkout page a calmer ground than the theme's flat white.
   Several nested wrappers each paint white, so the colour is set on all of
   them rather than guessing which one wins. */
body.egsbi-co-page,
body.egsbi-co-page #main-content,
body.egsbi-co-page .content-area,
body.egsbi-co-page .content-area > .container,
body.egsbi-co-page #main,
body.egsbi-co-page .hentry,
body.egsbi-co-page .entry-content,
body.egsbi-co-page .entry-content > .woocommerce {
	background: var(--co-bg, #f4f7fb);
}

body.egsbi-co-page .entry-content > .woocommerce {
	max-width: none;
}

/* ==========================================================================
   2. Hero + step rail
   ========================================================================== */

.egsbi-co-hero {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	align-items: flex-end;
	justify-content: space-between;
	padding: 2rem 1.75rem;
	margin: 0 0 1.5rem;
	border-radius: 22px;
	color: #fff;
	background:
		radial-gradient(130% 150% at 100% 0%, rgba(255, 100, 125, .32) 0%, rgba(255, 100, 125, 0) 58%),
		linear-gradient(115deg, #333f41 0%, #46524f 55%, #4e5859 100%);
	box-shadow: var(--co-shadow-lg);
}

.egsbi-co-hero__eyebrow {
	margin: 0 0 .35rem;
	font-size: .85rem;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .78);
}

.egsbi-co-hero__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
	line-height: 1.25;
	font-weight: 800;
	color: #fff;
}

.egsbi-co-hero__lede {
	margin: 0;
	max-width: 46ch;
	color: rgba(255, 255, 255, .84);
	font-size: .97rem;
}

.egsbi-co-steps {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.egsbi-co-steps__item {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .85rem .45rem .55rem;
	margin: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .78);
	font-size: .86rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.egsbi-co-steps__item::before,
.egsbi-co-steps__item::marker {
	content: none;
}

.egsbi-co-steps__num {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	font-size: .8rem;
	font-weight: 700;
}

.egsbi-co-steps__item.is-active {
	background: #fff;
	border-color: #fff;
	color: #16233b;
}

.egsbi-co-steps__item.is-active .egsbi-co-steps__num {
	background: var(--co-brand);
	color: #fff;
}

.egsbi-co-steps__item.is-done {
	color: #fff;
	border-color: rgba(255, 255, 255, .4);
	background: rgba(255, 255, 255, .18);
}

.egsbi-co-steps__item.is-done .egsbi-co-steps__num {
	background: var(--co-ok);
	color: #fff;
	font-size: 0;
}

.egsbi-co-steps__item.is-done .egsbi-co-steps__num::after {
	content: "\2713";
	font-size: .85rem;
}

/* ==========================================================================
   3. Grid
   ========================================================================== */

.egsbi-co-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 1.5rem;
	align-items: start;
}

.egsbi-co-main {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

/* A pass-through wrapper: it exists only to carry #customer_details for any
   script that looks for it. `display: contents` lets its children — the billing
   block and, for a logged-out visitor, the account block — become direct flex
   children of .egsbi-co-main, so the one gap defined there spaces everything.
   It used to declare a gap of its own, which spaced nothing (it has a single
   child in the common case) while the section cards it wraps had none. */
.egsbi-co-customer {
	display: contents;
}

.egsbi-co-side {
	position: sticky;
	top: 1.25rem;
	min-width: 0;
}

/* ==========================================================================
   4. Cards + section heads
   ========================================================================== */

.egsbi-co-card {
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	box-shadow: var(--co-shadow);
	overflow: hidden;
}

.egsbi-co-section__head {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: 1.15rem 1.35rem;
	border-bottom: 1px solid var(--co-line);
	background: linear-gradient(180deg, #fbfdff 0%, #f6f9fd 100%);
}

.egsbi-co-section__badge {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 13px;
	background: var(--co-accent-tint);
	color: var(--co-accent);
	font-weight: 800;
}

.egsbi-co-section__title {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 800;
	line-height: 1.4;
	color: var(--co-ink);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
}

.egsbi-co-section__title-en {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--co-muted);
}

.egsbi-co-section__subtitle {
	margin: .2rem 0 0;
	font-size: .87rem;
	line-height: 1.6;
	color: var(--co-muted);
}

.egsbi-co-section__body {
	padding: 1.35rem;
}

.egsbi-co-section.is-active {
	border-color: rgba(3, 109, 159, .35);
}

/* WooCommerce's own "Billing details" h3 is replaced by our section heads. */
/* Where the section cards actually live, so this is where they are spaced. */
.egsbi-co-billing {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.egsbi-co-billing > h3 {
	display: none;
}

/* ==========================================================================
   5. Fields
   ========================================================================== */

.egsbi-co-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.1rem;
}

/* WooCommerce gives .form-row-first / .form-row-last `width: 47%` at (0,2,1)
   for its own float layout. Inside a grid that is simply a field two-thirds the
   width of its own column — which is what made every paired field look
   shrunken. Restated here above that specificity and scoped to this grid, so
   the coupon form's own row widths are left alone. */
body.egsbi-co-page .egsbi-co-shell .egsbi-co-fields > .form-row,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-fields > p {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* NB: WooCCM stamps `form-row-wide` on every field it renders, so it says
   nothing about width here — only our own marker spans both columns. */
.egsbi-co-fields > .egsbi-co-col-full,
.egsbi-co-fields > .create-account {
	grid-column: 1 / -1;
}

body.egsbi-co-page .egsbi-co-shell .form-row label {
	display: block;
	margin: 0 0 .4rem;
	font-size: .88rem !important;
	font-weight: 700 !important;
	line-height: 1.55;
	color: var(--co-ink-2);
	unicode-bidi: plaintext;
	text-align: start;
	padding: 0 !important;
}

body.egsbi-co-page .egsbi-co-shell .form-row label .required,
body.egsbi-co-page .egsbi-co-shell .form-row label abbr.required {
	color: var(--co-brand-deep);
	text-decoration: none;
	border: 0;
	margin-inline-start: .2rem;
}

body.egsbi-co-page .egsbi-co-shell .form-row label .optional {
	color: var(--co-muted);
	font-weight: 500;
}

body.egsbi-co-page .egsbi-co-shell .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

body.egsbi-co-page .egsbi-co-shell .form-row input.input-text,
body.egsbi-co-page .egsbi-co-shell .form-row input[type="text"],
body.egsbi-co-page .egsbi-co-shell .form-row input[type="tel"],
body.egsbi-co-page .egsbi-co-shell .form-row input[type="email"],
body.egsbi-co-page .egsbi-co-shell .form-row input[type="number"],
body.egsbi-co-page .egsbi-co-shell .form-row input[type="password"],
body.egsbi-co-page .egsbi-co-shell .form-row input[type="date"],
body.egsbi-co-page .egsbi-co-shell .form-row textarea,
body.egsbi-co-page .egsbi-co-shell .form-row select {
	width: 100%;
	min-height: 48px;
	padding: .65rem .9rem;
	border: 1.5px solid var(--co-line-2);
	border-radius: var(--co-radius-sm);
	background: var(--co-surface);
	color: var(--co-ink);
	font-size: .95rem;
	font-family: inherit;
	line-height: 1.6;
	box-shadow: none;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
	unicode-bidi: plaintext;
	text-align: start;
}

body.egsbi-co-page .egsbi-co-shell .form-row textarea {
	min-height: 110px;
	resize: vertical;
}

body.egsbi-co-page .egsbi-co-shell .form-row select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 18px;
	background-position: left .85rem center;
	padding-inline-start: .9rem;
	padding-inline-end: 2.4rem;
}

body.egsbi-co-page .egsbi-co-shell .form-row input:focus,
body.egsbi-co-page .egsbi-co-shell .form-row textarea:focus,
body.egsbi-co-page .egsbi-co-shell .form-row select:focus {
	outline: none;
	border-color: var(--co-accent);
	box-shadow: var(--co-ring);
	background: #fff;
}

body.egsbi-co-page .egsbi-co-shell .form-row input::placeholder,
body.egsbi-co-page .egsbi-co-shell .form-row textarea::placeholder {
	color: #9aa8ba;
}

body.egsbi-co-page .egsbi-co-shell .form-row .description,
body.egsbi-co-page .egsbi-co-shell .wooccm-field .description {
	display: block;
	margin: .45rem 0 0;
	padding: .55rem .75rem !important;
	border-radius: 10px;
	background: var(--co-accent-tint) !important;
	border: 1px solid rgba(3, 109, 159, .14);
	color: #2c5670 !important;
	font-size: .82rem;
	line-height: 1.65;
	unicode-bidi: plaintext;
	text-align: start;
}

body.egsbi-co-page .egsbi-co-shell .form-row .description::before,
body.egsbi-co-page .egsbi-co-shell .wooccm-field .description::before {
	content: none !important;
}

/* Validation states from WooCommerce's own checkout.js */
body.egsbi-co-page .egsbi-co-shell .form-row.woocommerce-invalid input.input-text,
body.egsbi-co-page .egsbi-co-shell .form-row.woocommerce-invalid select,
body.egsbi-co-page .egsbi-co-shell .form-row.woocommerce-invalid textarea {
	border-color: var(--co-danger);
	background: var(--co-danger-tint);
}

body.egsbi-co-page .egsbi-co-shell .form-row.woocommerce-validated input.input-text,
body.egsbi-co-page .egsbi-co-shell .form-row.woocommerce-validated select {
	border-color: rgba(15, 157, 118, .55);
}

body.egsbi-co-page .egsbi-co-shell .form-row.woocommerce-invalid::after,
body.egsbi-co-page .egsbi-co-shell .form-row.woocommerce-validated::after {
	content: none;
}

/* Phone field: the intl-tel-input widget WooCCM ships must fill the row. */
body.egsbi-co-page .egsbi-co-shell .iti,
body.egsbi-co-page .egsbi-co-shell .intl-tel-input {
	width: 100%;
	display: block;
}

/* select2 / selectWoo (country dropdown) */
body.egsbi-co-page .egsbi-co-shell .select2-container--default .select2-selection--single {
	height: 48px;
	border: 1.5px solid var(--co-line-2);
	border-radius: var(--co-radius-sm);
	background: var(--co-surface);
}

body.egsbi-co-page .egsbi-co-shell .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 45px;
	padding-inline-start: .9rem;
	color: var(--co-ink);
}

body.egsbi-co-page .egsbi-co-shell .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
}

body.egsbi-co-page .egsbi-co-shell .select2-container--default.select2-container--open .select2-selection--single,
body.egsbi-co-page .egsbi-co-shell .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--co-brand);
	box-shadow: var(--co-ring);
}

/* ---------- Radio groups rendered as choice cards ---------- */

body.egsbi-co-page .egsbi-co-shell .woocommerce-radio-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: .6rem;
}

body.egsbi-co-page .egsbi-co-shell .woocommerce-radio-wrapper br {
	display: none;
}

body.egsbi-co-page .egsbi-co-shell .woocommerce-radio-wrapper input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

body.egsbi-co-page .egsbi-co-shell .woocommerce-radio-wrapper label {
	display: flex !important;
	align-items: center;
	gap: .6rem;
	margin: 0 !important;
	padding: .7rem .9rem !important;
	border: 1.5px solid var(--co-line-2);
	border-radius: var(--co-radius-sm);
	background: var(--co-surface);
	font-size: .9rem !important;
	font-weight: 600 !important;
	line-height: 1.45;
	color: var(--co-ink-2);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

body.egsbi-co-page .egsbi-co-shell .woocommerce-radio-wrapper label::before {
	content: "";
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	border: 2px solid var(--co-line-2);
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

body.egsbi-co-page .egsbi-co-shell .woocommerce-radio-wrapper label:hover {
	border-color: var(--co-accent);
	background: var(--co-accent-tint);
}

body.egsbi-co-page .egsbi-co-shell .woocommerce-radio-wrapper input[type="radio"]:checked + label {
	border-color: var(--co-brand);
	background: var(--co-brand-tint);
	color: var(--co-ink);
	box-shadow: 0 0 0 1px var(--co-brand) inset;
}

body.egsbi-co-page .egsbi-co-shell .woocommerce-radio-wrapper input[type="radio"]:checked + label::before {
	border-color: var(--co-brand);
	box-shadow: inset 0 0 0 4px var(--co-brand);
}

body.egsbi-co-page .egsbi-co-shell .woocommerce-radio-wrapper input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--co-accent);
	outline-offset: 2px;
}

/* Checkboxes */
body.egsbi-co-page .egsbi-co-shell .form-row .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: .6rem;
	font-weight: 600 !important;
}

body.egsbi-co-page .egsbi-co-shell .form-row input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .2rem;
	accent-color: var(--co-brand);
}

/* ==========================================================================
   6. Document uploader
   ========================================================================== */

.egsbi-co-up {
	display: block;
}

.egsbi-co-up__types {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: .6rem;
	margin: 0 0 1rem;
}

.egsbi-co-up__type.egsbi-co-up__type {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .8rem .9rem;
	border: 1.5px solid var(--co-line-2);
	border-radius: var(--co-radius-sm);
	background: var(--co-surface);
	text-align: start;
	cursor: pointer;
	font: inherit;
	color: var(--co-ink-2);
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.egsbi-co-up__type.egsbi-co-up__type:hover {
	border-color: var(--co-accent);
	background: var(--co-accent-tint);
}

.egsbi-co-up__type.egsbi-co-up__type[aria-pressed="true"] {
	border-color: var(--co-brand);
	background: var(--co-brand-tint);
	box-shadow: 0 0 0 1px var(--co-brand) inset;
}

.egsbi-co-up__type-mark {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .2rem;
	border-radius: 50%;
	border: 2px solid var(--co-line-2);
	background: #fff;
}

.egsbi-co-up__type[aria-pressed="true"] .egsbi-co-up__type-mark {
	border-color: var(--co-brand);
	box-shadow: inset 0 0 0 4px var(--co-brand);
}

.egsbi-co-up__type-title {
	display: block;
	font-weight: 700;
	font-size: .93rem;
}

.egsbi-co-up__type-hint {
	display: block;
	margin-top: .15rem;
	font-size: .8rem;
	font-weight: 500;
	line-height: 1.55;
	color: var(--co-muted);
}

.egsbi-co-up__slots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: .85rem;
}

.egsbi-co-slot {
	display: flex;
	flex-direction: column;
	min-height: 210px;
	border: 2px dashed var(--co-line-2);
	border-radius: var(--co-radius-sm);
	background: var(--co-surface-2);
	transition: border-color .15s ease, background .15s ease;
}

.egsbi-co-slot.is-dragover {
	border-color: var(--co-accent);
	background: var(--co-accent-tint);
}

.egsbi-co-slot.is-filled {
	border-style: solid;
	border-color: rgba(15, 157, 118, .5);
	background: var(--co-surface);
}

.egsbi-co-slot.is-invalid {
	border-color: var(--co-danger);
	background: var(--co-danger-tint);
}

.egsbi-co-slot__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .6rem .8rem;
	border-bottom: 1px solid var(--co-line);
	font-size: .85rem;
	font-weight: 700;
	color: var(--co-ink-2);
}

.egsbi-co-slot__req {
	color: var(--co-brand-deep);
}

.egsbi-co-slot__state {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .1rem .5rem;
	border-radius: 999px;
	background: var(--co-ok-tint);
	color: var(--co-ok);
	font-size: .72rem;
	font-weight: 700;
	opacity: 0;
	transition: opacity .15s ease;
}

.egsbi-co-slot.is-filled .egsbi-co-slot__state {
	opacity: 1;
}

.egsbi-co-slot__drop {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: 1rem .8rem;
	text-align: center;
}

.egsbi-co-slot__ghost {
	width: 56px;
	height: 40px;
	border: 2px solid var(--co-line-2);
	border-radius: 7px;
	position: relative;
	background:
		linear-gradient(90deg, var(--co-line-2) 0 100%) no-repeat 8px 22px / 22px 3px,
		linear-gradient(90deg, var(--co-line-2) 0 100%) no-repeat 8px 29px / 32px 3px;
}

.egsbi-co-slot__ghost::after {
	content: "";
	position: absolute;
	inset-inline-start: 8px;
	top: 7px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--co-line-2);
}

.egsbi-co-slot__hint {
	margin: 0;
	font-size: .8rem;
	color: var(--co-muted);
	line-height: 1.5;
}

.egsbi-co-slot__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
}

.egsbi-co-btn.egsbi-co-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	padding: .45rem .85rem;
	border-radius: 9px;
	border: 1.5px solid var(--co-line-2);
	background: #fff;
	color: var(--co-ink-2);
	font: inherit;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease;
}

.egsbi-co-btn.egsbi-co-btn:hover {
	border-color: var(--co-accent);
	color: var(--co-accent);
	background: var(--co-accent-tint);
}

.egsbi-co-btn.egsbi-co-btn:active {
	transform: translateY(1px);
}

.egsbi-co-btn--primary.egsbi-co-btn--primary {
	border-color: var(--co-accent);
	background: var(--co-accent);
	color: #fff;
}

.egsbi-co-btn--primary.egsbi-co-btn--primary:hover {
	border-color: var(--co-slate);
	background: var(--co-slate);
	color: #fff;
}

.egsbi-co-btn--ghost.egsbi-co-btn--ghost {
	border-color: transparent;
	background: transparent;
	color: var(--co-muted);
}

.egsbi-co-btn--danger.egsbi-co-btn--danger:hover {
	border-color: var(--co-danger);
	color: var(--co-danger);
	background: var(--co-danger-tint);
}

.egsbi-co-btn svg {
	width: 1em;
	height: 1em;
	flex: none;
}

.egsbi-co-slot__preview {
	flex: 1;
	display: none;
	flex-direction: column;
	padding: .7rem;
	gap: .55rem;
}

.egsbi-co-slot.is-filled .egsbi-co-slot__drop {
	display: none;
}

.egsbi-co-slot.is-filled .egsbi-co-slot__preview {
	display: flex;
}

.egsbi-co-slot__frame {
	position: relative;
	flex: 1;
	min-height: 110px;
	border-radius: 10px;
	overflow: hidden;
	background: #0f172a;
	display: grid;
	place-items: center;
}

.egsbi-co-slot__frame img {
	width: 100%;
	height: 100%;
	max-height: 190px;
	object-fit: contain;
	display: block;
}

.egsbi-co-slot__doc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	color: #e2e8f0;
	font-size: .8rem;
	font-weight: 700;
	padding: 1.2rem;
	text-align: center;
	word-break: break-all;
}

.egsbi-co-slot__zoom.egsbi-co-slot__zoom {
	position: absolute;
	inset-block-start: .4rem;
	inset-inline-end: .4rem;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 8px;
	background: rgba(15, 23, 42, .62);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(4px);
}

.egsbi-co-slot__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	font-size: .75rem;
	color: var(--co-muted);
}

.egsbi-co-slot__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 62%;
	direction: ltr;
	text-align: start;
}

.egsbi-co-up__error {
	margin: .7rem 0 0;
	padding: .6rem .8rem;
	border-radius: 10px;
	background: var(--co-danger-tint);
	border: 1px solid rgba(225, 29, 72, .25);
	color: #9f1239;
	font-size: .84rem;
	font-weight: 600;
}

.egsbi-co-up__error[hidden] {
	display: none;
}

/* Hide WooCCM's own button/preview strip — but only once our UI has taken
   over. Without DataTransfer support the enhancement bails out and the stock
   button has to stay usable. */
.egsbi-co-upload.is-enhanced .wooccm-file-button,
.egsbi-co-upload.is-enhanced .wooccm-file-list {
	display: none !important;
}

.egsbi-co-upload .description {
	margin-top: .8rem;
}

.egsbi-co-up__picker,
.egsbi-co-up__capture {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.egsbi-co-slot__meta .egsbi-co-slot__actions {
	display: inline-flex;
	gap: .25rem;
	flex: none;
}

.egsbi-co-slot__meta .egsbi-co-btn {
	padding: .3rem .55rem;
}

/* ---------- Camera modal ---------- */

.egsbi-co-cam {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(8, 15, 30, .82);
	backdrop-filter: blur(3px);
	direction: rtl;
}

.egsbi-co-cam[hidden] {
	display: none;
}

.egsbi-co-cam__box {
	width: min(720px, 100%);
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	background: #0f172a;
	color: #e2e8f0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--co-shadow-lg);
}

.egsbi-co-cam__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .9rem 1.1rem;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.egsbi-co-cam__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 800;
	color: #fff;
}

.egsbi-co-cam__slot {
	font-size: .82rem;
	color: #94a3b8;
	font-weight: 600;
}

.egsbi-co-cam__close.egsbi-co-cam__close {
	width: 2.2rem;
	height: 2.2rem;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
}

.egsbi-co-cam__stage {
	position: relative;
	flex: 1;
	min-height: 240px;
	background: #000;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.egsbi-co-cam__stage video,
.egsbi-co-cam__stage img {
	width: 100%;
	max-height: 62vh;
	object-fit: contain;
	display: block;
}

.egsbi-co-cam__guide {
	position: absolute;
	inset: 8% 6%;
	border: 2px dashed rgba(255, 255, 255, .55);
	border-radius: 14px;
	pointer-events: none;
}

.egsbi-co-cam__msg {
	padding: 1.5rem;
	text-align: center;
	font-size: .92rem;
	line-height: 1.7;
	color: #fca5a5;
}

.egsbi-co-cam__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	padding: .85rem 1.1rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
	background: #111c33;
}

.egsbi-co-cam__hint {
	margin: 0;
	font-size: .78rem;
	color: #94a3b8;
	flex: 1;
	line-height: 1.5;
}

.egsbi-co-cam__actions {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
}

.egsbi-co-cam .egsbi-co-btn.egsbi-co-btn {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .18);
	color: #e2e8f0;
}

.egsbi-co-cam .egsbi-co-btn.egsbi-co-btn:hover {
	background: rgba(255, 255, 255, .16);
	color: #fff;
	border-color: rgba(255, 255, 255, .3);
}

.egsbi-co-cam .egsbi-co-btn--primary.egsbi-co-btn--primary {
	background: var(--co-brand, #ff647d);
	border-color: var(--co-brand, #ff647d);
	color: #fff;
}

/* ---------- Lightbox ---------- */

.egsbi-co-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999998;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	background: rgba(8, 15, 30, .88);
}

.egsbi-co-lightbox[hidden] {
	display: none;
}

.egsbi-co-lightbox img {
	max-width: 100%;
	max-height: 88vh;
	border-radius: 14px;
	box-shadow: var(--co-shadow-lg);
}

.egsbi-co-lightbox__close.egsbi-co-lightbox__close {
	position: absolute;
	top: 1rem;
	inset-inline-end: 1rem;
	width: 2.4rem;
	height: 2.4rem;
	border: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 1.2rem;
	cursor: pointer;
}

/* ==========================================================================
   7. Payment
   ========================================================================== */

body.egsbi-co-page .egsbi-co-shell .egsbi-co-methods {
	list-style: none;
	margin: 0 0 1.1rem;
	padding: 0;
	display: grid;
	gap: .6rem;
	background: transparent;
	border: 0;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay {
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: var(--co-radius-sm);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay > input.input-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay__label {
	display: flex !important;
	align-items: center;
	gap: .75rem;
	width: 100%;
	margin: 0 !important;
	padding: .85rem 1rem !important;
	border: 1.5px solid var(--co-line-2);
	border-radius: var(--co-radius-sm);
	background: var(--co-surface);
	cursor: pointer;
	font-weight: 600 !important;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay__label:hover {
	border-color: var(--co-accent);
	background: var(--co-accent-tint);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay__mark {
	flex: none;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	border: 2px solid var(--co-line-2);
	background: #fff;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay__text {
	flex: 1;
	min-width: 0;
	display: block;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay__title {
	display: block;
	font-size: .96rem;
	font-weight: 800;
	color: var(--co-ink);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay__tagline {
	display: block;
	margin-top: .1rem;
	font-size: .8rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--co-muted);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay__icon {
	display: flex;
	align-items: center;
	gap: .3rem;
	flex: none;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay__icon img {
	max-height: 26px;
	width: auto;
	margin: 0;
	display: block;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay > input.input-radio:checked + .egsbi-co-pay__label {
	border-color: var(--co-brand);
	background: var(--co-brand-tint);
	box-shadow: 0 0 0 1px var(--co-brand) inset;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay > input.input-radio:checked + .egsbi-co-pay__label .egsbi-co-pay__mark {
	border-color: var(--co-brand);
	box-shadow: inset 0 0 0 4px var(--co-brand);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay > input.input-radio:focus-visible + .egsbi-co-pay__label {
	outline: 2px solid var(--co-accent);
	outline-offset: 2px;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay .payment_box {
	position: relative;
	margin: .55rem 0 0;
	padding: 1rem;
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-sm);
	background: var(--co-surface-2);
	color: var(--co-ink-2);
	font-size: .88rem;
	line-height: 1.7;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay .payment_box::before {
	content: none;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay .payment_box p {
	margin: 0 0 .5rem;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay .payment_box p:last-child {
	margin-bottom: 0;
}

body.egsbi-co-page .egsbi-co-shell #dbt {
	direction: rtl;
	text-align: right;
	padding: .7rem .85rem;
	margin-bottom: .8rem;
	border-radius: 10px;
	background: #fff8e6;
	border: 1px solid #f6d98a;
	color: #7a5b12;
	font-size: .85rem;
	white-space: pre-line;
}

/* The Protection Suite's copyable bank card, inside our payment box. */
body.egsbi-co-page .egsbi-co-shell .payment_box .egsbi-bank {
	max-width: none;
	margin: 0;
}

/* Two possible slot/active class pairs: this plugin's own, and the ones the
   old local build of the suite used. Both are matched so an update in either
   direction never leaves the receipt field unstyled. */
body.egsbi-co-page .egsbi-co-shell .egsbi-co-receipt-slot,
body.egsbi-co-page .egsbi-co-shell .egsbi-receipt-slot {
	margin-top: .9rem;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-upload--relocatable {
	display: none;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-upload.egsbi-co-receipt-active,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-upload.egsbi-receipt-active {
	display: block;
	margin: .9rem 0 0;
	padding: .9rem;
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-sm);
	background: #fff;
}

/* ---------- Place order ---------- */

body.egsbi-co-page .egsbi-co-shell .egsbi-co-place {
	margin: 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--co-line);
}

body.egsbi-co-page .egsbi-co-shell #place_order {
	display: block;
	width: 100%;
	min-height: 54px;
	padding: .9rem 1.5rem;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(120deg, var(--co-brand) 0%, var(--co-brand-deep) 100%);
	color: #fff;
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: .01em;
	text-transform: none;
	cursor: pointer;
	box-shadow: 0 12px 26px -14px rgba(224, 62, 95, .9);
	transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}

body.egsbi-co-page .egsbi-co-shell #place_order:hover {
	filter: brightness(1.04);
	box-shadow: 0 16px 32px -14px rgba(224, 62, 95, .95);
}

body.egsbi-co-page .egsbi-co-shell #place_order:active {
	transform: translateY(1px);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-place__note {
	margin: .75rem 0 0;
	font-size: .78rem;
	color: var(--co-muted);
	text-align: center;
	line-height: 1.6;
}

body.egsbi-co-page .egsbi-co-shell .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: .9rem;
}

/* ==========================================================================
   8. Order summary
   ========================================================================== */

.egsbi-co-summary {
	overflow: visible;
}

.egsbi-co-summary__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--co-line);
	background: linear-gradient(180deg, #fbfdff 0%, #f6f9fd 100%);
	border-radius: var(--co-radius) var(--co-radius) 0 0;
}

.egsbi-co-summary__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--co-ink);
}

.egsbi-co-summary__toggle.egsbi-co-summary__toggle {
	display: none;
	align-items: center;
	gap: .4rem;
	padding: .3rem .6rem;
	border: 1px solid var(--co-line-2);
	border-radius: 999px;
	background: #fff;
	color: var(--co-ink);
	font: inherit;
	font-weight: 800;
	font-size: .88rem;
	cursor: pointer;
}

.egsbi-co-summary__chevron {
	width: .6rem;
	height: .6rem;
	border-inline-end: 2px solid var(--co-muted);
	border-block-end: 2px solid var(--co-muted);
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.egsbi-co-summary__toggle[aria-expanded="true"] .egsbi-co-summary__chevron {
	transform: rotate(225deg);
}

.egsbi-co-summary__body {
	padding: 1rem 1.25rem;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	font-size: .9rem;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table th,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table td {
	border: 0;
	padding: .5rem 0;
	background: transparent;
	vertical-align: middle;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tbody tr {
	border-bottom: 1px solid var(--co-line);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tbody td.product-total,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot td {
	text-align: end;
	white-space: nowrap;
	font-weight: 700;
	color: var(--co-ink);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot th {
	text-align: start;
	font-weight: 600;
	color: var(--co-muted);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot tr:first-child th,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot tr:first-child td {
	padding-top: .9rem;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot tr.order-total th,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot tr.order-total td {
	padding-top: .8rem;
	border-top: 1px solid var(--co-line);
	font-size: 1.05rem;
	font-weight: 900;
	color: var(--co-ink);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot tr.order-total td {
	color: var(--co-brand-deep);
}

.egsbi-co-line {
	display: flex;
	align-items: center;
	gap: .7rem;
}

.egsbi-co-line__thumb {
	position: relative;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--co-surface-2);
	border: 1px solid var(--co-line);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-line__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

.egsbi-co-line__qty {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	min-width: 1.15rem;
	padding: 0 .2rem;
	border-radius: 6px 0 0 0;
	background: var(--co-ink);
	color: #fff;
	font-size: .68rem;
	font-weight: 800;
	text-align: center;
	line-height: 1.15rem;
}

.egsbi-co-line__text {
	min-width: 0;
}

.egsbi-co-line__name {
	display: block;
	font-weight: 700;
	color: var(--co-ink);
	line-height: 1.45;
}

.egsbi-co-line__count {
	display: block;
	font-size: .78rem;
	color: var(--co-muted);
	font-weight: 600;
}

.egsbi-co-trust {
	margin: 0;
	padding: .9rem 1.25rem 1.15rem;
	list-style: none;
	border-top: 1px solid var(--co-line);
	background: var(--co-surface-2);
	border-radius: 0 0 var(--co-radius) var(--co-radius);
	font-size: .82rem;
	color: var(--co-muted);
	line-height: 1.65;
}

.egsbi-co-trust li {
	position: relative;
	margin: 0 0 .35rem;
	padding-inline-start: 1.25rem;
}

.egsbi-co-trust li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .55rem;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--co-ok);
}

.egsbi-co-trust li:last-child {
	margin-bottom: 0;
}

.egsbi-co-trust a {
	color: var(--co-accent);
	font-weight: 700;
}

/* ==========================================================================
   9. Notices, coupon, login
   ========================================================================== */

body.egsbi-co-page .woocommerce-message,
body.egsbi-co-page .woocommerce-info,
body.egsbi-co-page .woocommerce-error {
	max-width: 1180px;
	margin: 0 auto 1rem;
	border-radius: 14px;
	border: 1px solid var(--co-line, #e3eaf3);
	border-top: 0;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 32, 60, .04), 0 14px 34px -22px rgba(16, 32, 60, .3);
	color: #16233b;
	padding: .95rem 3rem .95rem 1.1rem;
	font-size: .92rem;
}

body.egsbi-co-page .woocommerce-message::before,
body.egsbi-co-page .woocommerce-info::before,
body.egsbi-co-page .woocommerce-error::before {
	top: 1rem;
}

body.egsbi-co-page .woocommerce-error {
	border-color: rgba(225, 29, 72, .3);
	background: #fff5f7;
	direction: rtl;
	text-align: right;
	padding: .95rem 1.1rem .95rem 1.1rem;
	list-style: none;
}

body.egsbi-co-page .woocommerce-error li {
	unicode-bidi: plaintext;
	text-align: start;
	margin: 0 0 .35rem;
	padding-inline-start: 1.4rem;
	position: relative;
}

body.egsbi-co-page .woocommerce-error li::before {
	content: "!";
	position: absolute;
	inset-inline-start: 0;
	top: .15rem;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: var(--co-danger, #e11d48);
	color: #fff;
	font-size: .75rem;
	font-weight: 800;
	text-align: center;
	line-height: 1.05rem;
}

body.egsbi-co-page .checkout_coupon,
body.egsbi-co-page .woocommerce-form-login {
	max-width: 1180px;
	margin: 0 auto 1.25rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--co-line, #e3eaf3);
	border-radius: var(--co-radius, 18px);
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 32, 60, .04);
}

/* ==========================================================================
   10. Sticky mobile bar
   ========================================================================== */

.egsbi-co-mobilebar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--co-line, #e3eaf3);
	box-shadow: 0 -8px 26px -16px rgba(16, 32, 60, .5);
	direction: rtl;
}

.egsbi-co-mobilebar[hidden] {
	display: none;
}

.egsbi-co-mobilebar__label {
	display: block;
	font-size: .72rem;
	color: var(--co-muted, #6b7a90);
	font-weight: 600;
}

.egsbi-co-mobilebar__total strong {
	font-size: 1.05rem;
	font-weight: 900;
	color: var(--co-ink, #16233b);
}

.egsbi-co-mobilebar__cta.egsbi-co-mobilebar__cta {
	flex: 1;
	max-width: 62%;
	min-height: 46px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(120deg, #ff5c78 0%, #e03e5f 100%);
	color: #fff;
	font: inherit;
	font-size: .96rem;
	font-weight: 800;
	cursor: pointer;
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.egsbi-co-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.egsbi-co-side {
		position: static;
		order: -1;
	}

	.egsbi-co-summary__toggle {
		display: inline-flex;
	}

	.egsbi-co-summary__body,
	.egsbi-co-summary .egsbi-co-trust {
		display: none;
	}

	.egsbi-co-summary.is-open .egsbi-co-summary__body,
	.egsbi-co-summary.is-open .egsbi-co-trust {
		display: block;
	}

	.egsbi-co-summary__head {
		border-bottom: 0;
		border-radius: var(--co-radius);
	}

	.egsbi-co-summary.is-open .egsbi-co-summary__head {
		border-bottom: 1px solid var(--co-line);
		border-radius: var(--co-radius) var(--co-radius) 0 0;
	}
}

@media (max-width: 782px) {
	body.egsbi-co-page .egsbi-co-shell {
		padding-bottom: 6rem;
	}

	.egsbi-co-hero {
		padding: 1.5rem 1.15rem;
		border-radius: 18px;
	}

	.egsbi-co-steps {
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: .25rem;
		scrollbar-width: none;
	}

	.egsbi-co-steps::-webkit-scrollbar {
		display: none;
	}

	.egsbi-co-fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.egsbi-co-section__head,
	.egsbi-co-section__body,
	.egsbi-co-summary__head,
	.egsbi-co-summary__body {
		padding-inline: 1rem;
	}

	.egsbi-co-mobilebar {
		display: flex;
	}

	.egsbi-co-mobilebar[hidden] {
		display: none;
	}

	.egsbi-co-up__slots {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.egsbi-co-page .egsbi-co-shell *,
	.egsbi-co-cam *,
	.egsbi-co-lightbox * {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

@media print {
	.egsbi-co-mobilebar,
	.egsbi-co-cam,
	.egsbi-co-lightbox {
		display: none !important;
	}
}

/* ==========================================================================
   12. Theme reset
   --------------------------------------------------------------------------
   Eduma / thim-core ship a block of checkout CSS written for the stock
   two-column layout. Most of it is harmless here, but a handful of rules
   outrank anything scoped by class alone — they are anchored on `#order_review`
   (an id) or carry `!important` — and they undo specific decisions above:
   the form is forced into a flex row with a negative gutter, payment brand
   icons are hidden outright, every button inside the payment box is stretched
   to 100%, inputs are forced transparent with the theme's radius, and the
   summary table is pinned to an LTR alignment.

   Overriding those few properties explicitly is deliberate: winning the
   specificity race on each one would mean inflating every selector in this
   file for the sake of a dozen declarations.
   ========================================================================== */

body.egsbi-co-page .egsbi-co-shell form.checkout.egsbi-co {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* `…payment_methods label img { display: none }` hides the Visa/Meeza marks. */
body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay__icon img {
	display: block !important;
}

/* `…woocommerce-checkout-payment button { width: 100% }` — ours are chips, and
   the relocated receipt field plus the bank card both live in that box. */
body.egsbi-co-page .egsbi-co-shell .woocommerce-checkout-payment .egsbi-co-btn,
body.egsbi-co-page .egsbi-co-shell .woocommerce-checkout-payment .egsbi-bank__btn,
body.egsbi-co-page .egsbi-co-shell .woocommerce-checkout-payment .egsbi-co-slot__zoom,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-up .egsbi-co-btn {
	width: auto !important;
}

body.egsbi-co-page .egsbi-co-shell .woocommerce-checkout-payment .egsbi-bank__btn--primary {
	width: 100% !important;
}

/* `…form-row .input-text { background-color: transparent; border-radius: … }` */
body.egsbi-co-page .egsbi-co-shell .form-row input.input-text,
body.egsbi-co-page .egsbi-co-shell .form-row input[type="number"],
body.egsbi-co-page .egsbi-co-shell .form-row textarea,
body.egsbi-co-page .egsbi-co-shell .form-row select,
body.egsbi-co-page .egsbi-co-shell .select2-container--default .select2-selection--single {
	border-radius: var(--co-radius-sm) !important;
	background-color: var(--co-surface) !important;
}

body.egsbi-co-page .egsbi-co-shell .form-row.woocommerce-invalid input.input-text,
body.egsbi-co-page .egsbi-co-shell .form-row.woocommerce-invalid select,
body.egsbi-co-page .egsbi-co-shell .form-row.woocommerce-invalid textarea {
	background-color: var(--co-danger-tint) !important;
}

/* `body #order_review …` — id-anchored, so class selectors cannot reach it.
   Realign the summary for the RTL card and drop the fixed cell widths that
   were sized for a full-width table. */
body.egsbi-co-page #order_review .egsbi-co-table th,
body.egsbi-co-page #order_review .egsbi-co-table td {
	width: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.egsbi-co-page #order_review .egsbi-co-table .product-name,
body.egsbi-co-page #order_review .egsbi-co-table tfoot th {
	text-align: right !important;
}

body.egsbi-co-page #order_review .egsbi-co-table .product-total,
body.egsbi-co-page #order_review .egsbi-co-table tfoot td {
	text-align: left !important;
}

/* WooCommerce injects this group at the top of the form on a failed submit;
   the theme sizes it for the old flex row. */
body.egsbi-co-page .egsbi-co-shell .woocommerce-NoticeGroup {
	width: auto !important;
	margin: 0 0 1.25rem !important;
}

/* ==========================================================================
   13. Bank-details card
   --------------------------------------------------------------------------
   The copyable account card comes from the Protection Suite's embedded EGSBI
   module. Its markup and behaviour are left alone — it is a shared component —
   but its stock teal palette belongs to a different design. Most of it is
   re-tinted through the custom properties it already exposes; the few
   hard-coded colours are restated below.
   ========================================================================== */

body.egsbi-co-page .egsbi-co-shell .egsbi-bank {
	--egsbi-bank-bg: var(--co-surface);
	--egsbi-bank-card: var(--co-surface);
	--egsbi-bank-border: var(--co-line);
	--egsbi-bank-text: var(--co-ink);
	--egsbi-bank-muted: var(--co-muted);
	--egsbi-bank-accent: var(--co-accent);
	--egsbi-bank-accent-hover: #02567d;
	--egsbi-bank-radius: var(--co-radius-sm);
	--egsbi-bank-shadow: none;

	max-width: none;
	margin: 0;
	font-family: inherit;
	overflow: hidden;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-bank__head {
	background: linear-gradient(120deg, #1d3557 0%, #036d9f 100%);
	padding: 1rem 1.15rem .85rem;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-bank__title {
	color: #fff;
	font-size: 1.02rem;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-bank__row {
	padding: .7rem 1.15rem;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-bank__value {
	background: var(--co-surface-2);
	font-size: .9rem;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-bank__btn {
	background: var(--co-accent-tint);
	border-color: rgba(3, 109, 159, .28);
	color: var(--co-accent);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-bank__btn:hover {
	background: #dceff9;
	border-color: rgba(3, 109, 159, .5);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-bank__btn--primary {
	background: var(--co-accent);
	border-color: var(--co-accent);
	color: #fff;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-bank__btn.is-done {
	background: var(--co-ok-tint);
	border-color: rgba(15, 157, 118, .45);
	color: var(--co-ok);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-bank__footer {
	padding: .85rem 1.15rem 1rem;
}

/* ==========================================================================
   14. Direction
   --------------------------------------------------------------------------
   The shell renders RTL because the chrome is Arabic, but the language
   switcher flips it. `direction` in CSS outranks the `dir` attribute, so the
   English layout is correct from the first paint — the head boot script stamps
   `data-egsbi-lang` on <html> before any of this is drawn.

   Everything else in this file uses logical properties, so it follows along on
   its own. What is listed here is the handful of places where a direction was
   hard-coded in markup we do not own.
   ========================================================================== */

html[data-egsbi-lang="en"] .egsbi-co-shell,
html[data-egsbi-lang="en"] .egsbi-co-cam,
html[data-egsbi-lang="en"] .egsbi-co-mobilebar,
html[data-egsbi-lang="en"] .egsbi-co-lang {
	direction: ltr;
}

/* The bank card carries dir="rtl" in the shared component's own markup. */
body.egsbi-co-page .egsbi-co-shell .egsbi-bank,
body.egsbi-co-page .egsbi-co-shell #dbt {
	direction: inherit;
	text-align: start;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-bank__meta {
	text-align: start;
}

/* Mixed Arabic/English runs: let every block align by its own first strong
   character instead of inheriting the shell's direction. This is what stops
   English sentences (the privacy notice, the long WooCCM questions) rendering
   with their full stop at the wrong end. */
body.egsbi-co-page .egsbi-co-shell p,
body.egsbi-co-page .egsbi-co-shell li,
body.egsbi-co-page .egsbi-co-shell label,
body.egsbi-co-page .egsbi-co-shell .description,
body.egsbi-co-page .egsbi-co-shell .woocommerce-privacy-policy-text,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-section__subtitle,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay__title,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-pay__tagline,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-line__name,
body.egsbi-co-page .egsbi-co-shell td,
body.egsbi-co-page .egsbi-co-shell th,
body.egsbi-co-page .woocommerce-error li,
body.egsbi-co-page .woocommerce-message,
body.egsbi-co-page .woocommerce-info {
	unicode-bidi: plaintext;
}

/* …except the summary figures, which must stay pinned to their column. */
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot th,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot td,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table td.product-total {
	unicode-bidi: isolate;
}

/* ==========================================================================
   15. Button reset
   --------------------------------------------------------------------------
   `input[type=submit], button { background-color: var(--thim-body-primary-color) }`
   plus `button:not(.owl-page) { … }` in the theme paint every bare <button> on
   the site brand pink, with the theme's padding and radius. That is why the
   document-type chips, the slot actions and the summary toggle came out pink.

   This resets bare buttons inside our own containers only; each component
   above then re-states its own look at a higher specificity. It relies on this
   stylesheet loading after the theme's — see Egsbi_CO_Layout::enqueue().
   ========================================================================== */

.egsbi-co-shell button,
.egsbi-co-cam button,
.egsbi-co-lightbox button,
.egsbi-co-lang button {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	color: inherit;
	font: inherit;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

.egsbi-co-shell button:hover,
.egsbi-co-cam button:hover,
.egsbi-co-lightbox button:hover,
.egsbi-co-lang button:hover {
	background-color: transparent;
	color: inherit;
}

/* #place_order keeps the theme's full-width submit behaviour, and section 7
   already paints it, but the theme's hover colour has to be neutralised. */
body.egsbi-co-page .egsbi-co-shell #place_order:hover {
	background-color: transparent;
	color: #fff;
}

/* Field sizing, restated because several theme rules tie with ours on
   specificity and the outcome would otherwise depend on load order. */
body.egsbi-co-page .egsbi-co-shell .form-row input.input-text,
body.egsbi-co-page .egsbi-co-shell .form-row input[type="text"],
body.egsbi-co-page .egsbi-co-shell .form-row input[type="tel"],
body.egsbi-co-page .egsbi-co-shell .form-row input[type="email"],
body.egsbi-co-page .egsbi-co-shell .form-row input[type="number"],
body.egsbi-co-page .egsbi-co-shell .form-row input[type="password"],
body.egsbi-co-page .egsbi-co-shell .form-row input[type="date"],
body.egsbi-co-page .egsbi-co-shell .form-row textarea,
body.egsbi-co-page .egsbi-co-shell .form-row select {
	width: 100% !important;
	max-width: none !important;
	min-height: 48px !important;
	padding: .65rem .9rem !important;
	border: 1.5px solid var(--co-line-2) !important;
	margin: 0 !important;
	float: none !important;
}

body.egsbi-co-page .egsbi-co-shell .form-row textarea {
	min-height: 110px !important;
}

body.egsbi-co-page .egsbi-co-shell .form-row input:focus,
body.egsbi-co-page .egsbi-co-shell .form-row textarea:focus,
body.egsbi-co-page .egsbi-co-shell .form-row select:focus {
	border-color: var(--co-accent) !important;
}

body.egsbi-co-page .egsbi-co-shell .form-row.woocommerce-invalid input.input-text,
body.egsbi-co-page .egsbi-co-shell .form-row.woocommerce-invalid select,
body.egsbi-co-page .egsbi-co-shell .form-row.woocommerce-invalid textarea {
	border-color: var(--co-danger) !important;
}

/* The phone widget (intl-tel-input) absolutely positions its country button
   at physical left:0 whatever the direction, so the padding that clears it has
   to be physical too — and a phone number always reads left-to-right. Needed
   because the `padding` shorthand above is !important and would otherwise put
   the number underneath the flag. */
body.egsbi-co-page .egsbi-co-shell .iti input[type="tel"],
body.egsbi-co-page .egsbi-co-shell .iti input.input-text,
body.egsbi-co-page .egsbi-co-shell .intl-tel-input input.input-text {
	direction: ltr;
	text-align: left;
	padding-left: 58px !important;
	padding-right: .9rem !important;
}


/* ==========================================================================
   16. Language switcher
   --------------------------------------------------------------------------
   A segmented control. Two things it has to survive: the theme repainting bare
   <button> elements, and living outside .egsbi-co-shell (so it inherits none of
   the shell's box-sizing or type). Everything it needs is therefore restated
   here, and the container clips its own children so a mis-measured button can
   never spill past the rounded edge.

   The control itself is always laid out left-to-right, whatever the page
   language: it is a pair of fixed choices, and having them swap places when the
   language changes makes the one you just clicked jump out from under the
   cursor.
   ========================================================================== */

.egsbi-co-lang {
	--co-lang-x: 24px;
	--co-lang-y: 24px;

	position: fixed;
	z-index: 99998;
	box-sizing: border-box;
	direction: ltr;
	display: flex;
	align-items: center;
	gap: 3px;
	width: max-content;
	max-width: calc(100vw - 2rem);
	padding: 4px;
	overflow: hidden;
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1;
	box-shadow: 0 10px 30px -12px rgba(51, 63, 65, .5);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.egsbi-co-lang * {
	box-sizing: border-box;
}

/* Placement */
.egsbi-co-lang--at-bottom-left {
	inset-block-end: var(--co-lang-y);
	left: var(--co-lang-x);
	right: auto;
}

.egsbi-co-lang--at-bottom-right {
	inset-block-end: var(--co-lang-y);
	right: var(--co-lang-x);
	left: auto;
}

.egsbi-co-lang--at-bottom-center {
	inset-block-end: var(--co-lang-y);
	left: 50%;
	transform: translateX(-50%);
}

.egsbi-co-lang--at-top-left {
	inset-block-start: var(--co-lang-y);
	left: var(--co-lang-x);
	right: auto;
}

.egsbi-co-lang--at-top-right {
	inset-block-start: var(--co-lang-y);
	right: var(--co-lang-x);
	left: auto;
}

.egsbi-co-lang--at-inline {
	position: static;
	transform: none;
	box-shadow: none;
	align-self: flex-start;
	max-width: none;
}

/* Colours */
.egsbi-co-lang--dark {
	background: rgba(51, 63, 65, .94);
	color: #eef1f1;
	border: 1px solid rgba(255, 255, 255, .12);
}

.egsbi-co-lang--light {
	background: rgba(255, 255, 255, .97);
	color: #4e5859;
	border: 1px solid #e2e6e6;
}

.egsbi-co-lang--brand {
	background: #ff647d;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .24);
}

/* Segments */
.egsbi-co-lang .egsbi-co-lang__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	opacity: .66;
	transition: background-color .16s ease, color .16s ease, opacity .16s ease;
}

.egsbi-co-lang .egsbi-co-lang__btn:hover {
	opacity: 1;
}

/* A small outlined chip carrying the two-letter code. */
.egsbi-co-lang .egsbi-co-lang__code {
	flex: none;
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 20px;
	padding: 0 5px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .02em;
	opacity: .75;
}

.egsbi-co-lang .egsbi-co-lang__name {
	display: inline-block;
	min-width: 0;
}

/* Selected segment */
.egsbi-co-lang--dark .egsbi-co-lang__btn[aria-pressed="true"] {
	background: #ffffff;
	color: #333f41;
	opacity: 1;
}

.egsbi-co-lang--light .egsbi-co-lang__btn[aria-pressed="true"] {
	background: #4e5859;
	color: #ffffff;
	opacity: 1;
}

.egsbi-co-lang--brand .egsbi-co-lang__btn[aria-pressed="true"] {
	background: #ffffff;
	color: #e8455f;
	opacity: 1;
}

.egsbi-co-lang .egsbi-co-lang__btn:focus-visible {
	outline: 2px solid #ff647d;
	outline-offset: 2px;
}

/* Single-button styles show one segment; it is always the *other* language. */
.egsbi-co-lang--switch .egsbi-co-lang__btn,
.egsbi-co-lang--mini .egsbi-co-lang__btn {
	opacity: 1;
}

.egsbi-co-lang--mini .egsbi-co-lang__name {
	display: none;
}

.egsbi-co-lang--mini .egsbi-co-lang__btn {
	width: 40px;
	height: 40px;
	padding: 0;
	justify-content: center;
}

.egsbi-co-lang--mini .egsbi-co-lang__code {
	min-width: auto;
	height: auto;
	padding: 0;
	border: 0;
	font-size: 13px;
	opacity: 1;
}

/* Clear of the sticky action bar on phones. */
@media (max-width: 782px) {
	.egsbi-co-lang--at-bottom-left,
	.egsbi-co-lang--at-bottom-right,
	.egsbi-co-lang--at-bottom-center {
		inset-block-end: calc(var(--co-lang-y) + 68px);
	}

	.egsbi-co-lang--at-inline {
		inset-block-end: auto;
	}
}

@media print {
	.egsbi-co-lang {
		display: none !important;
	}
}

/* ==========================================================================
   17. Order summary rows, laid out independently of table behaviour
   --------------------------------------------------------------------------
   The summary has to read "label … amount" in both directions. Left as a real
   table it does not: the theme's own `.shop_table` rules set cell alignment and
   widths, and the two cells end up shrink-wrapped against each other with no
   gap between the label and the figure — which is exactly how it broke in
   English.

   Rows are therefore laid out as flex instead. The <table> element and its
   class stay untouched, because that selector is what WooCommerce's AJAX
   replaces on every totals refresh; only the display of its parts changes.
   ========================================================================== */

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tbody,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot {
	display: block;
	width: 100%;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table th,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table td {
	display: block;
	width: auto;
	padding: .5rem 0;
	border: 0;
	background: transparent;
	vertical-align: middle;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table th {
	flex: 1 1 auto;
	min-width: 0;
	text-align: start;
	font-weight: 600;
	color: var(--co-muted);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table td {
	flex: 0 0 auto;
	text-align: end;
	white-space: nowrap;
	font-weight: 700;
	color: var(--co-ink);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table td.product-name {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	text-align: start;
	font-weight: 400;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tbody tr {
	border-bottom: 1px solid var(--co-line);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot tr:first-child th,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot tr:first-child td {
	padding-top: .9rem;
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot tr.order-total {
	margin-top: .3rem;
	padding-top: .7rem;
	border-top: 1px solid var(--co-line);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot tr.order-total th {
	font-size: 1rem;
	font-weight: 800;
	color: var(--co-ink);
}

body.egsbi-co-page .egsbi-co-shell .egsbi-co-table tfoot tr.order-total td {
	font-size: 1.1rem;
	font-weight: 900;
	color: var(--co-brand-deep);
}

/* Amounts are numerals with a currency word beside them; isolating each cell
   keeps the two from re-ordering around the row's direction. */
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table th,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table td,
body.egsbi-co-page .egsbi-co-shell .egsbi-co-table .woocommerce-Price-amount {
	unicode-bidi: isolate;
}

/* In English the section's Arabic title has become English too, so the small
   English kicker beside it would just repeat itself. */
html[data-egsbi-lang="en"] .egsbi-co-section__title-en {
	display: none;
}

/* ==========================================================================
   18. Out-ranking the theme's ID-scoped checkout rules
   --------------------------------------------------------------------------
   Eduma styles this page through selectors carrying IDs, which no amount of
   class specificity can beat:

     body #order_review .woocommerce-checkout-review-order-table tfoot th
        { text-align: left }                     ← wrong end in Arabic
     … .product-name { width: 300px / 260px }    ← overflows a 340px sidebar
     … tr td.product-total { padding-top: 23px } ← knocks the amount out of line
     .woocommerce #payment #place_order:hover
        { background-color: var(--thim-button-hover-color) }
                                                 ← repaints the CTA slate on hover

   So these are restated at matching-or-higher specificity, using the same IDs
   plus our own classes rather than reaching for !important. Logical properties
   throughout, so the summary reads label-then-amount in both directions.
   ========================================================================== */

body.egsbi-co-page #order_review .egsbi-co-table th,
body.egsbi-co-page #order_review .egsbi-co-table td {
	width: auto;
	max-width: none;
	padding-block: .5rem;
	padding-inline: 0;
	font-size: .9rem;
	vertical-align: middle;
}

body.egsbi-co-page #order_review .egsbi-co-table tfoot th,
body.egsbi-co-page #order_review .egsbi-co-table th.product-name,
body.egsbi-co-page #order_review .egsbi-co-table td.product-name {
	text-align: start;
}

body.egsbi-co-page #order_review .egsbi-co-table tfoot td,
body.egsbi-co-page #order_review .egsbi-co-table th.product-total,
body.egsbi-co-page #order_review .egsbi-co-table td.product-total {
	text-align: end;
	padding-top: .5rem;
}

body.egsbi-co-page #order_review .egsbi-co-table tfoot tr:first-child th,
body.egsbi-co-page #order_review .egsbi-co-table tfoot tr:first-child td {
	padding-top: .9rem;
}

body.egsbi-co-page #order_review .egsbi-co-table tfoot tr.order-total th {
	font-size: 1rem;
	font-weight: 800;
	color: var(--co-ink);
}

body.egsbi-co-page #order_review .egsbi-co-table tfoot tr.order-total td {
	font-size: 1.1rem;
	font-weight: 900;
	color: var(--co-brand-deep);
}

/* Place order: the theme reaches it through two IDs. */
body.egsbi-co-page .woocommerce #payment #place_order,
body.egsbi-co-page .woocommerce-page #payment #place_order,
body.egsbi-co-page .egsbi-co-shell #payment #place_order {
	display: block;
	width: 100%;
	min-height: 54px;
	padding: .9rem 1.5rem;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(120deg, var(--co-brand) 0%, var(--co-brand-deep) 100%);
	color: #fff;
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .01em;
	text-transform: none;
	cursor: pointer;
	box-shadow: 0 12px 26px -14px rgba(232, 69, 95, .9);
	transition: filter .18s ease, box-shadow .18s ease, transform .12s ease;
}

body.egsbi-co-page .woocommerce #payment #place_order:hover,
body.egsbi-co-page .woocommerce-page #payment #place_order:hover,
body.egsbi-co-page .egsbi-co-shell #payment #place_order:hover {
	background: linear-gradient(120deg, var(--co-brand) 0%, var(--co-brand-deep) 100%);
	color: #fff;
	filter: brightness(1.05);
	box-shadow: 0 16px 32px -14px rgba(232, 69, 95, .95);
}

body.egsbi-co-page .woocommerce #payment #place_order:active,
body.egsbi-co-page .woocommerce-page #payment #place_order:active,
body.egsbi-co-page .egsbi-co-shell #payment #place_order:active {
	transform: translateY(1px);
}