/*
 * Shpper UI layer: brings the eSIM page's design language — eyebrow, accent above the title, soft
 * icon tiles, hairline rows and the lit navy hero — to pages built from stock Elementor widgets.
 * Applied on Contact, FAQ, About and the homepage (both languages) via the shpper-ui body class.
 *
 * It only restyles what is already there; no content is rewritten, so the pages stay editable in
 * Elementor. Selectors carry the body class plus an extra class to sit above Elementor's own
 * per-element CSS, and rules that belong to one page name that page's element id — a widget-type
 * selector alone would also hit, say, the homepage's reward medals.
 * Carries its own dark values: keep it out of the dark-mode generator's input.
 */
body.shpper-ui {
	--sh-navy: #1f3043;
	--sh-yellow: #f3da14;
	--sh-blue: #2b8fe6;
	--sh-sky: #72d2ff;
	--sh-ink: #15212e;
	--sh-muted: #737e8a;
	--sh-card: #ffffff;
	--sh-soft: #f3f6fa;
	--sh-line: #e2e8ef;
	--sh-tint: #e8f3fd;
	--sh-shadow: 0 30px 60px -36px rgba(16, 38, 58, .38);
	--sh-ease: cubic-bezier(.2, .8, .2, 1);
	--sh-spring: cubic-bezier(.3, 1.4, .55, 1);
}
html[data-theme="dark"] body.shpper-ui,
html[data-theme="dark"] .shpper-ui {
	--sh-ink: #e8eef4;
	--sh-muted: #8a97a5;
	--sh-card: #19232e;
	--sh-soft: #141c25;
	--sh-line: rgba(255, 255, 255, .09);
	--sh-tint: rgba(114, 210, 255, .1);
	--sh-shadow: 0 30px 60px -32px rgba(0, 0, 0, .75);
}

/* ---- the lit navy hero, as on the eSIM page ----------------------------- */
body.shpper-ui .elementor-element.elementor-element-5719edc,
body.shpper-ui .elementor-element.elementor-element-07bbab3,
body.shpper-ui .elementor-element.elementor-element-5c5fb58 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
body.shpper-ui .elementor-element.elementor-element-a9167ed { position: relative; isolation: isolate; }
body.shpper-ui .elementor-element.elementor-element-5719edc::before,
body.shpper-ui .elementor-element.elementor-element-07bbab3::before,
body.shpper-ui .elementor-element.elementor-element-5c5fb58::before,
body.shpper-ui .elementor-element.elementor-element-a9167ed::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.3px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 45%, #000, transparent 72%);
	mask-image: radial-gradient(ellipse 60% 70% at 72% 45%, #000, transparent 72%);
	pointer-events: none;
}
body.shpper-ui .elementor-element.elementor-element-5719edc::after,
body.shpper-ui .elementor-element.elementor-element-07bbab3::after,
body.shpper-ui .elementor-element.elementor-element-5c5fb58::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -120px;
	inset-inline-end: -160px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(43, 143, 230, .5), transparent 64%);
	filter: blur(60px);
	pointer-events: none;
}
[dir="rtl"] body.shpper-ui .elementor-element.elementor-element-5719edc::before,
[dir="rtl"] body.shpper-ui .elementor-element.elementor-element-07bbab3::before,
[dir="rtl"] body.shpper-ui .elementor-element.elementor-element-5c5fb58::before,
[dir="rtl"] body.shpper-ui .elementor-element.elementor-element-a9167ed::before {
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 28% 45%, #000, transparent 72%);
	mask-image: radial-gradient(ellipse 60% 70% at 28% 45%, #000, transparent 72%);
}

/* ---- one accent for every section title, always above the words --------- */
/* The script adds these classes and says whether the heading is centred. */
body.shpper-ui .elementor-heading-title.sh-accent::before {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	margin-bottom: 18px;
	border-radius: 3px;
	background: var(--sh-yellow);
}
body.shpper-ui .elementor-heading-title.sh-accent--center::before { margin-inline: auto; }

/* ---- Contact: the card, the three ways to reach us, the map ------------- */
body.shpper-ui .elementor-element.elementor-element-e417d81 {
	border-radius: 28px !important;
	box-shadow: var(--sh-shadow), 0 0 0 1px var(--sh-line) !important;
	background-color: var(--sh-card) !important;
	padding: 24px !important;
}
/* Both columns run the full height of the card, so the map is never a floating strip. */
body.shpper-ui .elementor-element.elementor-element-22d3909 { align-items: stretch !important; }
body.shpper-ui .elementor-element.elementor-element-13ba39a { justify-content: center; }
body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box {
	position: relative;
	padding: 18px 20px;
	border-radius: 18px;
	transition: background-color .4s var(--sh-ease);
}
/* An inset hairline reads as a divider between rows; a full-width border looked like a seam. */
body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box + .elementor-widget.elementor-widget-icon-box::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 20px;
	height: 1px;
	background: var(--sh-line);
}
body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box .elementor-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--sh-tint);
	transition: transform .5s var(--sh-spring), background-color .4s var(--sh-ease);
}
body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box .elementor-icon svg,
body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box .elementor-icon img { width: 24px; height: 24px; }
body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box .elementor-icon-box-title {
	color: var(--sh-ink) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
}
body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box .elementor-icon-box-description,
body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box .elementor-icon-box-description a {
	color: var(--sh-muted) !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
}
body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box .elementor-icon-box-description a { transition: color .3s ease; }

body.shpper-ui .elementor-element.elementor-element-d097afc { display: flex; }
body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-html,
body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-google_maps { flex: 1; display: flex; }
body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget-html .elementor-widget-container { flex: 1; display: flex; }
body.shpper-ui .sh-map {
	flex: 1;
	display: flex;
	overflow: hidden;
	border-radius: 22px;
	box-shadow: 0 0 0 1px var(--sh-line);
}
body.shpper-ui .sh-map iframe,
body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget-google_maps iframe {
	display: block;
	width: 100%;
	height: 100% !important;
	min-height: 360px;
	border: 0;
}

/* The dark sheet inverts map tiles, which turns the sea orange; dim the map instead. */
html[data-theme="dark"] body.shpper-ui .sh-map iframe,
html[data-theme="dark"] body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget-google_maps iframe {
	filter: brightness(.84) saturate(.92) contrast(1.02);
}

/* ---- FAQ: the eSIM page's question list, and a quiet search ------------- */
/* Elementor draws its own line under each question row; one hairline per row is enough. */
body.shpper-ui .elementor-widget.elementor-widget-n-accordion .e-n-accordion { gap: 0 !important; }
body.shpper-ui .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--sh-line) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
body.shpper-ui .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title {
	padding-block: 22px !important;
	padding-inline: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
body.shpper-ui .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title-text {
	color: var(--sh-ink) !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	transition: color .3s ease;
}
body.shpper-ui .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title-icon { transition: transform .45s var(--sh-spring); }
body.shpper-ui .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text { color: var(--sh-blue) !important; }

body.shpper-ui .sh-faq-search {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
body.shpper-ui input.sh-faq-input {
	flex: 1 1 240px;
	min-width: 0;
	height: 48px;
	padding-inline: 20px;
	border: 1px solid var(--sh-line);
	border-radius: 999px;
	background: var(--sh-card);
	color: var(--sh-ink);
	font-family: Poppins, sans-serif;
	font-size: 15px;
	transition: border-color .3s ease, box-shadow .3s ease;
}
body.shpper-ui input.sh-faq-input::placeholder { color: var(--sh-muted); }
body.shpper-ui input.sh-faq-input:focus { outline: none; border-color: var(--sh-blue); box-shadow: 0 0 0 4px rgba(43, 143, 230, .16); }
body.shpper-ui .sh-faq-count { color: var(--sh-muted); font-size: 14px; font-weight: 500; }
body.shpper-ui .sh-faq-empty { margin: 18px 0 0; color: var(--sh-muted); font-size: 15px; }

/* ---- About: journey card and framed images ------------------------------ */
body.shpper-ui .elementor-element.elementor-element-ebbbc49 {
	padding: 34px !important;
	border-radius: 24px !important;
	background-color: var(--sh-soft) !important;
	box-shadow: 0 0 0 1px var(--sh-line);
}
body.shpper-ui .elementor-element.elementor-element-c13c6b0 img,
body.shpper-ui .elementor-element.elementor-element-e9b3a7a img {
	border-radius: 24px !important;
	box-shadow: var(--sh-shadow);
}

/* ---- Home: the Highlights cards get the same hairline as everything else - */
body.shpper-ui .elementor-element-7860ef3b > .e-con {
	border-radius: 24px;
	box-shadow: 0 0 0 1px var(--sh-line);
	transition: box-shadow .5s var(--sh-ease);
}
body.shpper-ui .elementor-element-7860ef3b > .e-con:hover { box-shadow: var(--sh-shadow), 0 0 0 1px var(--sh-line); }

@media (hover: hover) and (pointer: fine) {
	body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box:hover { background: var(--sh-soft); }
	body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box:hover .elementor-icon { transform: rotate(-6deg) scale(1.06); background: var(--sh-sky); }
	body.shpper-ui .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { color: var(--sh-blue) !important; }
	body.shpper-ui .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon { transform: scale(1.08); }
}

@media (max-width: 767px) {
	body.shpper-ui .elementor-heading-title.sh-accent::before { margin-bottom: 14px; }
	body.shpper-ui .elementor-element.elementor-element-ebbbc49 { padding: 22px !important; border-radius: 20px !important; }
	body.shpper-ui .elementor-element.elementor-element-e417d81 { border-radius: 22px !important; padding: 12px !important; }
	body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box { padding: 16px 12px; }
	body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box + .elementor-widget.elementor-widget-icon-box::before { inset-inline: 12px; }
	body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget.elementor-widget-icon-box .elementor-icon { width: 46px; height: 46px; border-radius: 14px; }
	body.shpper-ui .sh-map iframe,
	body.shpper-ui .elementor-element.elementor-element-e417d81 .elementor-widget-google_maps iframe { min-height: 280px; }
	body.shpper-ui .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title { padding-block: 18px !important; }
	body.shpper-ui .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title-text { font-size: 16px !important; }
}