/* Switch Care in the cart - popups + the line under each phone title. The
   field / select / button / link rules also style the plan page's inline BYOP
   section (.sm-care-byop).
   Values follow the Figma "SM_Cart Add Switch Care" screens (Styling Switch
   Mobile); override in the theme if needed. Buttons are scoped under
   .sm-care-modal / .sm-care-item because the theme and Elementor style every
   button. */

:root {
	--sm-care-cream: #fff9ee;   /* Cream */
	--sm-care-line: #ecd1cd;    /* Support Color 2 */
	--sm-care-silver: #e8e8e8;  /* Silver */
	--sm-care-ink: #000;        /* Pure Black */
	--sm-care-grey: #808080;    /* Grey */
	--sm-care-accent: #da7a00;
	--sm-care-cta: #f9b700;     /* Accent 4 */
	--sm-care-cta-hover: #e6a800;
	--sm-care-maroon: #6c203b;  /* Accent 1 */
	--sm-care-error: #eb5633;   /* Support Color 1 */
	--sm-care-valid: #1e675e;   /* Support Color 3 */
	--sm-care-font: "DM Sans", sans-serif;
}

.sm-care-icon { display: block; flex: none; }

/* ---------- Under the phone title ---------- */

.sm-care-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin-top: 10px;
	font-family: var(--sm-care-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sm-care-ink);
}

.sm-care-item button.sm-care-add {
	appearance: none;
	border: 0;
	border-radius: 10px;
	background-color: var(--sm-care-cta);
	color: var(--sm-care-ink);
	font-family: var(--sm-care-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	padding: 15px 20px;
	cursor: pointer;
	transition: background-color .15s;
}
.sm-care-item button.sm-care-add:hover,
.sm-care-item button.sm-care-add:focus { background-color: var(--sm-care-cta-hover); color: var(--sm-care-ink); }

/* An <em>, not a <span>: Elementor's cart widget styles every `td span` (bold, 16px). */
.sm-care-item em.sm-care-item__from { color: var(--sm-care-grey); font-size: 12px; font-style: normal; font-weight: 700; }

.sm-care-item.is-added {
	gap: 12px;
	background: var(--sm-care-cream);
	border: 1px solid var(--sm-care-silver);
	border-radius: 10px;
	padding: 10px 16px;
}
.sm-care-item__chosen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* The cart widget sizes every image in the table (product thumbnails, 55px)
   with a long Elementor selector - an icon has to win outright. */
.sm-care-item img.sm-care-icon { width: 18px !important; height: 18px !important; max-width: none; margin: 0; }
.sm-care-item__price { font-weight: 600; }
.sm-care-item__actions { display: inline-flex; gap: 12px; }

.sm-care-item button.sm-care-link {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--sm-care-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sm-care-accent);
	text-decoration: none;
	cursor: pointer;
}
.sm-care-item button.sm-care-link:hover,
.sm-care-item button.sm-care-link:focus,
.sm-care-item button.sm-care-link:focus-visible { background: none; color: var(--sm-care-ink); text-decoration: underline; }

/* ---------- Popups ---------- */

.sm-care-modal[hidden] { display: none; }
.sm-care-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	font-family: var(--sm-care-font);
	color: var(--sm-care-ink);
}
/* Figma: 60% white over the page, 14px blur. */
.sm-care-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .6);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.sm-care-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 36px;
	width: 100%;
	max-width: 670px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: var(--sm-care-cream);
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
}
.sm-care-modal__bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 24px;
	margin-bottom: -18px; /* the head sits 18px under the bar */
}
.sm-care-modal__bar:has(.sm-care-modal__back) { justify-content: space-between; }
.sm-care-modal button.sm-care-modal__x,
.sm-care-modal button.sm-care-modal__back {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	padding: 0;
	border-radius: 6px;
	cursor: pointer;
	color: var(--sm-care-ink);
	font-family: var(--sm-care-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
}
.sm-care-modal button.sm-care-modal__x { width: 24px; height: 24px; justify-content: center; }
.sm-care-modal .sm-care-icon--close { width: 28.8px; height: 28.8px; max-width: none; }
.sm-care-modal .sm-care-icon--back { width: 24px; height: 24px; }
.sm-care-modal button.sm-care-modal__x:hover,
.sm-care-modal button.sm-care-modal__x:focus,
.sm-care-modal button.sm-care-modal__back:hover,
.sm-care-modal button.sm-care-modal__back:focus { background: none; color: var(--sm-care-ink); opacity: .7; }

.sm-care-modal__head { text-align: center; }
.sm-care-modal .sm-care-modal__title {
	margin: 0;
	font-family: var(--sm-care-font);
	font-size: 28px;
	font-weight: 900;
	line-height: 1.3;
	text-transform: none;
	color: var(--sm-care-ink);
}
.sm-care-modal__phone {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}
.sm-care-modal__fine {
	margin: 0;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}

body.sm-care-modal-open { overflow: hidden; }

/* The framed block inside the popup */
.sm-care-box {
	display: flex;
	flex-direction: column;
	gap: 20px;
	border: 1px solid var(--sm-care-line);
	border-radius: 10px;
	padding: 20px;
}
.sm-care-box__head { display: grid; gap: 10px; }
.sm-care-modal .sm-care-box__title {
	margin: 0;
	font-family: var(--sm-care-font);
	font-size: 28px;
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--sm-care-ink);
}
.sm-care-accent { color: var(--sm-care-accent); }
.sm-care-box__sub { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.sm-care-modal button.sm-care-info {
	appearance: none;
	display: inline-flex;
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}
.sm-care-modal button.sm-care-info:hover,
.sm-care-modal button.sm-care-info:focus { background: none; opacity: .6; }
.sm-care-info .sm-care-icon { width: 24px; height: 24px; }

/* Monthly / Annual cards */
.sm-care-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px;
}
.sm-care-option {
	appearance: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 20px;
	background: transparent;
	border: 1px solid var(--sm-care-line);
	border-radius: 10px;
	text-align: left;
	font-family: var(--sm-care-font);
	color: var(--sm-care-ink);
	line-height: 1.3;
	text-transform: none;
	cursor: default;
}
.sm-care-option[data-sm-care-pick] { cursor: pointer; }
.sm-care-option[data-sm-care-pick]:hover,
.sm-care-option[data-sm-care-pick]:focus { background: #fff; outline: 0; }
.sm-care-option[data-sm-care-pick]:focus-visible { outline: 2px solid var(--sm-care-ink); outline-offset: 2px; }
.sm-care-option.is-selected {
	background: #fff;
	border: 2px solid var(--sm-care-maroon);
	padding: 19px; /* same size as the 1px-border cards */
}
.sm-care-option__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	font-size: 16px;
	font-weight: 600;
}
.sm-care-option__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	font-size: 12px;
	font-weight: 700;
}
.sm-care-option__item .sm-care-icon { width: 11px; height: 11px; }
.sm-care-option__price { font-size: 20px; font-weight: 900; }

/* Buttons */
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	border: 1px solid var(--sm-care-cta);
	border-radius: 10px;
	background: var(--sm-care-cta);
	color: var(--sm-care-ink);
	font-family: var(--sm-care-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	cursor: pointer;
	padding: 20px;
}
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn .sm-care-icon { width: 14px; height: 14px; }
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn[data-mode="find"] .sm-care-icon { display: none; } /* "Find My Phone" has no check */
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn:hover,
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn:focus,
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn:focus-visible { background: var(--sm-care-cta-hover); border-color: var(--sm-care-cta-hover); color: var(--sm-care-ink); }
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn--lg { padding: 20px 30px; font-size: 20px; font-weight: 900; }
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn--sm { padding: 10px; font-size: 12px; font-weight: 700; }
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn:disabled { opacity: .5; cursor: default; }
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn:disabled:hover { background: var(--sm-care-cta); border-color: var(--sm-care-cta); }
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn--outline,
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn--outline:hover,
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn--outline:focus { background: transparent; border-color: var(--sm-care-maroon); }
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn--outline:hover,
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn--outline:focus { background: #fff; }
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn--outline.is-soft { border-color: var(--sm-care-line); }
:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn--lg.sm-care-btn--outline { background: #fff; }
.sm-care-modal.is-busy .sm-care-btn,
.sm-care-byop.is-busy .sm-care-btn { opacity: .6; pointer-events: none; }


/* Comparison table */
/* Figma "Comparison table": white card, 1px silver border, radius 20,
   20px above the header and 15px of white under the last (cream) row. The
   table itself has no borders - the theme's table borders are reset. */
.sm-care-compare-wrap {
	background: #fff;
	border: 1px solid var(--sm-care-silver);
	border-radius: 20px;
	padding: 20px 0 15px;
	overflow: hidden;
}
.sm-care-modal table.sm-care-compare {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: transparent;
	font-family: var(--sm-care-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sm-care-ink);
}
.sm-care-modal table.sm-care-compare thead,
.sm-care-modal table.sm-care-compare tbody,
.sm-care-modal table.sm-care-compare tr { border: 0; background: transparent; }
/* The theme draws a top border on the first header row (table thead:first-child
   tr:first-child th) - no borders anywhere inside the comparison. */
.sm-care-modal .sm-care-compare-wrap table.sm-care-compare th,
.sm-care-modal .sm-care-compare-wrap table.sm-care-compare td { border: 0 !important; }
/* Figma: rows padded 20px at the edges only; columns 190px / 170px / rest.
   Rows are striped cream / white (the theme stripes tables grey - override). */
.sm-care-modal table.sm-care-compare th,
.sm-care-modal table.sm-care-compare td { padding: 10px 10px 10px 0; text-align: left; border: 0; background: #fff; color: inherit; }
.sm-care-modal table.sm-care-compare tr > :first-child { width: 210px; padding-left: 20px; }
.sm-care-modal table.sm-care-compare tr > :nth-child(2) { width: 170px; }
.sm-care-modal table.sm-care-compare tr > :last-child { padding-right: 20px; }
.sm-care-modal table.sm-care-compare thead th { padding-top: 0; padding-bottom: 20px; font-size: 20px; font-weight: 900; }
.sm-care-modal table.sm-care-compare tbody th { font-weight: 600; }
.sm-care-modal table.sm-care-compare tbody tr:nth-child(odd) > * { background: var(--sm-care-cream); }

/* ---------- BYOP steps (IMEI, price) ---------- */

.sm-care-step { display: flex; flex-direction: column; gap: 30px; }
.sm-care-field { display: grid; gap: 10px; }
.sm-care-field__label { font-size: 16px; font-weight: 600; line-height: 1.3; }
/* Elementor's kit styles every input (.elementor-kit-N input:not(...), border
   drawn as an inset box-shadow, maroon on focus): same technique, more specific. */
:is(.sm-care-modal, .sm-care-byop) .sm-care-field input.sm-care-field__input:not([type="button"]):not([type="submit"]) {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 15px 20px;
	border: 0;
	border-radius: 10px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--sm-care-silver);
	font-family: var(--sm-care-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sm-care-ink);
}
:is(.sm-care-modal, .sm-care-byop) .sm-care-field input.sm-care-field__input:not([type="button"]):not([type="submit"])::placeholder { color: var(--sm-care-grey); opacity: 1; }
:is(.sm-care-modal, .sm-care-byop) .sm-care-field input.sm-care-field__input:not([type="button"]):not([type="submit"]):focus { outline: 0; border: 0; box-shadow: inset 0 0 0 1px var(--sm-care-ink); }
:is(.sm-care-modal, .sm-care-byop) .sm-care-field input.sm-care-field__input:not([type="button"]):not([type="submit"]).is-valid { box-shadow: inset 0 0 0 1px var(--sm-care-valid); }
:is(.sm-care-modal, .sm-care-byop) .sm-care-field input.sm-care-field__input:not([type="button"]):not([type="submit"]).is-error { box-shadow: inset 0 0 0 1px var(--sm-care-error); }
.sm-care-field__hint { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--sm-care-grey); }
.sm-care-error {
	margin: 0;
	padding: 20px;
	border: 1px solid var(--sm-care-error);
	border-radius: 10px;
	color: var(--sm-care-error);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}
.sm-care-error[hidden] { display: none; }

/* Phone row: icon + model (+ "Change phone", or the price list) */
.sm-care-device {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
}
.sm-care-device[hidden] { display: none; }
.sm-care-device__phone { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 285px; }
.sm-care-device__phone .sm-care-icon { width: 32px; height: 31px; padding: 2px 5px; box-sizing: border-box; }
.sm-care-device__name { display: flex; flex-direction: column; font-size: 16px; font-weight: 600; line-height: 1.3; }
.sm-care-device__name small { font-size: 12px; font-weight: 700; color: var(--sm-care-grey); }
.sm-care-select { position: relative; flex: 1 1 200px; }
:is(.sm-care-modal, .sm-care-byop) .sm-care-select select {
	appearance: none;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 15px 44px 15px 20px;
	border: 1px solid var(--sm-care-silver);
	border-radius: 10px;
	background: #fff;
	font-family: var(--sm-care-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sm-care-ink);
	cursor: pointer;
}
.sm-care-select .sm-care-icon { position: absolute; right: 20px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); pointer-events: none; }
/* "Pick your phone" (templates/byop/phone.php) - plan page and cart popup. */
.sm-care-phone__box { display: flex; flex-direction: column; gap: 15px; }
.sm-care-phone__box .sm-care-phone__title { margin: 0; text-transform: uppercase; }
.sm-care-phone__panel { display: flex; flex-direction: column; gap: 15px; }
.sm-care-phone__panel[hidden] { display: none; }
.sm-care-phone__panel > .sm-care-link { align-self: flex-start; }
.sm-care-phone__selects { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-care-phone__box .sm-care-step { gap: 15px; }
.sm-care-phone__box p.sm-care-field__hint { margin: 0; } /* the theme's p margin */
/* Selects as the theme's "Help me decide": white, pink border, the theme's own arrow. */
:is(.sm-care-modal, .sm-care-byop) .sm-care-select select { background-color: #fff !important; border-color: var(--sm-care-line); }
:is(.sm-care-modal, .sm-care-byop) .sm-care-select .sm-care-icon { display: none; }
:is(.sm-care-modal, .sm-care-byop) .sm-care-select select:disabled { opacity: .5; cursor: not-allowed; }
.sm-care-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
:is(.sm-care-modal, .sm-care-byop) button.sm-care-link {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--sm-care-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sm-care-accent);
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}
:is(.sm-care-modal, .sm-care-byop) button.sm-care-link:hover,
:is(.sm-care-modal, .sm-care-byop) button.sm-care-link:focus { background: none; color: var(--sm-care-ink); text-decoration: underline; }

/* Keyboard focus ring (the theme's :focus colours are overridden above). */
.sm-care-modal button:focus-visible,
.sm-care-modal select:focus-visible,
.sm-care-item button:focus-visible { outline: 2px solid var(--sm-care-ink); outline-offset: 2px; }

@media (max-width: 600px) {
	.sm-care-modal { padding: 10px; }
	.sm-care-modal__dialog { gap: 24px; padding: 16px; max-height: calc(100vh - 20px); }
	.sm-care-modal .sm-care-modal__title { font-size: 23px; }
	.sm-care-box { padding: 14px; }
	.sm-care-modal .sm-care-box__title { font-size: 21px; }
	.sm-care-options { grid-template-columns: 1fr; }
	:is(.sm-care-modal, .sm-care-byop) button.sm-care-btn--lg { padding: 16px 20px; font-size: 18px; }
	.sm-care-modal table.sm-care-compare { font-size: 13px; }
	.sm-care-compare-wrap { padding: 14px 0 10px; }
	.sm-care-modal table.sm-care-compare th,
	.sm-care-modal table.sm-care-compare td { padding: 9px 6px 9px 0; }
	.sm-care-modal table.sm-care-compare tr > :first-child { width: auto; padding-left: 10px; }
	.sm-care-modal table.sm-care-compare tr > :nth-child(2) { width: auto; }
	.sm-care-modal table.sm-care-compare tr > :last-child { padding-right: 10px; }
	.sm-care-modal table.sm-care-compare thead th { font-size: 15px; padding-top: 0; padding-bottom: 10px; }
}

/* The theme pads every button 20px left / right on phones (style.css, with
   !important, loaded after this file); the text links and icon buttons here
   have none - `body` makes this rule win. */
@media (max-width: 575px) {
	body :is(.sm-care-modal, .sm-care-byop, .sm-care-item, .sm-care-pp) button:is(.sm-care-link, .sm-care-info, .sm-care-modal__x, .sm-care-modal__back) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* "Powered by AKKO" logo (SM_AKKO_Cart::powered_by()). Its own size, never
   stretched by a flex / grid parent or the theme's img rules. */
img.sm-care-powered { display: block; width: auto !important; max-width: 100%; height: 22px !important; margin: 2px 0; align-self: flex-start; justify-self: start; object-fit: contain; }