/* Site-wide Webraan appearance. Layout, imagery and checkout state stay intact. */
body.webraan-body .wr-color-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--wr-border);
  border-radius: 14px;
  background: var(--wr-surface);
  color: var(--wr-text);
  font: 26px/1 Arial, sans-serif;
  cursor: pointer;
}
body.webraan-body .wr-color-mode-toggle > svg { display: block; width: 22px; height: 22px; flex: 0 0 22px; margin: 0; padding: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.webraan-body .wr-color-mode-toggle[aria-checked="true"] > .wr-color-mode-icon--moon,
body.webraan-body .wr-color-mode-toggle[aria-checked="false"] > .wr-color-mode-icon--sun { display: none; }
body.webraan-body .wr-color-mode-toggle:focus-visible { outline: 2px solid #83b5ff; outline-offset: 3px; }
body.webraan-body .wr-color-mode-toggle--floating { position: fixed; inset-inline-end: 16px; bottom: 84px; z-index: 999; box-shadow: var(--wr-shadow-md); }
html[data-wr-theme="light"] body.webraan-body { color-scheme: light; }
html[data-wr-theme="dark"] body.webraan-body {
  color-scheme: dark;
  --wr-bg: #0d1728;
  --wr-surface: #15243a;
  --wr-text: #eff5ff;
  --wr-text-muted: #b9c8df;
  --wr-border: #3b506d;
  --wr-blue-soft: #263d5c;
  --wr-blue-ice: #1c304b;
  --wr-success: #72dfb1;
  --wr-error: #ff9dac;
  --wr-grad-apple: linear-gradient(160deg, #1c304b, #15243a 48%, #213b60);
  --wr-grad-promo: linear-gradient(135deg, #213b60, #182c48 48%, #15243a);
  --wr-shadow-xs: 0 2px 8px rgba(0,0,0,.14);
  --wr-shadow-sm: 0 8px 24px rgba(0,0,0,.18);
  --wr-shadow-md: 0 16px 40px rgba(0,0,0,.22);
}
html[data-wr-theme="dark"] body.home.webraan-body #main-content { --wr-text-muted: #b9c8df; }
html[data-wr-theme="dark"] body.webraan-body .wr-header { background: linear-gradient(180deg, #182c48, transparent); }
html[data-wr-theme="dark"] body.webraan-body .wr-drawer__close { color: var(--wr-text); background: var(--wr-blue-ice); }
html[data-wr-theme="dark"] body.webraan-body .wr-drawer__close:hover { background: var(--wr-border); }
html[data-wr-theme="dark"] body.webraan-body :is(.wr-header__inner, .wr-search, .wr-header__icon, .wr-btn--icon, .wr-drawer__panel, .wr-tabbar, .wr-trust__inner, .wr-service-card, .wr-benefit-card, .wr-review-card, .wr-blog-card, .wr-product-card, .wr-hero__float-card, .wr-hero__eyebrow, .wr-page-card) {
  background: var(--wr-surface); border-color: var(--wr-border); color: var(--wr-text);
}
html[data-wr-theme="dark"] body.webraan-body :is(.wr-logo__text, .wr-nav a, .wr-search input, .wr-search svg, .wr-header__account, .wr-header__cart, .wr-menu-toggle, .wr-header__search-btn, .wr-trust__item strong, .wr-product-card__title, .wr-price__current, .wr-benefits .wr-section-head h2) { color: var(--wr-text); }
html[data-wr-theme="dark"] body.webraan-body :is(.wr-search input::placeholder, .wr-service-card__sub, .wr-products .wr-product-card__meta, .wr-benefits__subtitle, .wr-trust__copy > span, .wr-price__old) { color: var(--wr-text-muted); }
html[data-wr-theme="dark"] body.webraan-body .wr-hero__bg { background: radial-gradient(ellipse at 20% 40%, #213f70, transparent 65%), linear-gradient(180deg, #15243a, #0d1728); }
html[data-wr-theme="dark"] body.webraan-body .wr-hero__bg::before { opacity: .12; }
html[data-wr-theme="dark"] body.webraan-body .wr-hero__bg::after { opacity: .1; }
html[data-wr-theme="dark"] body.webraan-body .wr-benefits { background: radial-gradient(ellipse at center, #1b3150, #0d1728); }
html[data-wr-theme="dark"] body.webraan-body .wr-apple__panel { background: var(--wr-grad-apple); border-color: var(--wr-border); }
html[data-wr-theme="dark"] body.webraan-body .wr-promo__panel { background: var(--wr-grad-promo); border-color: var(--wr-border); }
html[data-wr-theme="dark"] body.webraan-body .wr-trust__grid { background: var(--wr-surface); border-color: var(--wr-border); box-shadow: var(--wr-shadow-sm); }
html[data-wr-theme="dark"] body.webraan-body .wr-trust__item:hover { background: var(--wr-blue-ice); }
html[data-wr-theme="dark"] body.webraan-body .wr-benefit-card strong { color: var(--wr-text); }
html[data-wr-theme="dark"] body.webraan-body .wr-glass-card { background: var(--wr-surface); }
html[data-wr-theme="dark"] body.webraan-body .wr-account .wr-badge:not([class*="wr-badge--"]) { color: #9bc2ff; }
html[data-wr-theme="dark"] body.webraan-body .wr-btn--ghost { background: var(--wr-surface); color: var(--wr-text); -webkit-text-fill-color: var(--wr-text); }
html[data-wr-theme="dark"] body.webraan-body .wr-header :is(.wr-search, .wr-btn--icon) { background: var(--wr-surface); border-color: var(--wr-border); box-shadow: none; }
html[data-wr-theme="dark"] body.webraan-body :is(.wr-btn--secondary, .wr-btn--white, .wr-btn--outline) { background: var(--wr-surface); color: var(--wr-text); -webkit-text-fill-color: var(--wr-text); border-color: var(--wr-border); }
html[data-wr-theme="dark"] body.webraan-body :is(.wr-service-card:hover, .wr-product-card:hover) { background: var(--wr-blue-ice); }
html[data-wr-theme="dark"] body.webraan-body :is(.wr-section-head__link, .wr-share a, .wr-account__card a, .wr-breadcrumbs a, .wr-pagination a, .wr-drawer__list a, .wr-tabbar a) { color: #9bc2ff; }
html[data-wr-theme="dark"] body.home.webraan-body #main-content :is(.wr-hero__eyebrow, .wr-badge:not(.wr-badge--discount), .wr-blog-card__cat) { color: #9bc2ff; background: #1c304b; }
html[data-wr-theme="dark"] body.home.webraan-body #main-content .wr-verified { color: #72dfb1; }
/* Native content, account, shop, cart and checkout controls. No plugin logic changes. */
html[data-wr-theme="dark"] body.webraan-body :is(.wr-page, .wr-article, .wr-account, .woocommerce) :is(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea, select) { background: #101d31; color: var(--wr-text); border-color: #6b83a4; }
html[data-wr-theme="dark"] body.webraan-body :is(.wr-page, .wr-article, .wr-account, .woocommerce) :is(input, textarea)::placeholder { color: #b9c8df; opacity: 1; }
html[data-wr-theme="dark"] body.webraan-body .woocommerce :is(.woocommerce-cart-form, .cart_totals, .woocommerce-checkout-review-order, .woocommerce-checkout-payment, .woocommerce-info, .woocommerce-message, .woocommerce-error, .payment_box, table.shop_table, .select2-selection) { background: var(--wr-surface); color: var(--wr-text); border-color: var(--wr-border); }
html[data-wr-theme="dark"] body.webraan-body .woocommerce :is(.show-password-input, .lost_password a) { color: #9bc2ff; }
html[data-wr-theme="dark"] body.webraan-body .woocommerce .required { color: #ff9dac; }
html[data-wr-theme="dark"] body.webraan-body :is(.wr-page, .wr-article, .wr-account) :is(pre, code, blockquote, th, td) { background-color: var(--wr-surface); border-color: var(--wr-border); }
html[data-wr-theme="dark"] body.webraan-body :is(.wr-page, .wr-article, .wr-account) a:not(.wr-btn):not(.button) { color: #9bc2ff; }
/* The branded navy footer remains navy; its outside wrapper stays transparent. */
html[data-wr-theme="dark"] body.webraan-body .wr-footer--reference .wr-footer__surface { background: linear-gradient(180deg, #102341, #08172d); }
@media (max-width: 1200px) {
  body.webraan-body .wr-header__actions .wr-search { max-width: 190px; }
}

/* Shared page canvas behind the header and inner-page introduction. */
html body.webraan-body .wr-header,
html[data-wr-theme="dark"] body.webraan-body .wr-header { background: transparent; }

/* Separate inner-page title sections from the navigation surface. */
body.webraan-body:not(.home) .wr-service-hero { margin-top: 24px; }
@media (max-width: 767px) {
  body.webraan-body:not(.home) .wr-service-hero { margin-top: 16px; }
}

/* Subtle motion for the three primary illustrations, including reduced-motion mode. */
@keyframes wr-illustration-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
body.webraan-body :is(.wr-hero__devices, .wr-repair__visual, .wr-apple__visual) {
  animation: wr-illustration-drift 8s ease-in-out infinite;
  animation-duration: 8s !important;
  animation-iteration-count: infinite !important;
}

body.webraan-body .wr-announce__text { overflow: hidden; min-width: 0; }
.wr-announce__message { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-announce__message[hidden] { display: none; }

/* Fixed-size announcement viewport. */
body.webraan-body .wr-announce { width:644px; max-width:calc(100vw - 32px); justify-content:flex-start; }
body.webraan-body .wr-announce__text { position:relative; flex:1; width:0; max-width:none; height:1.5em; text-align:right; }
body.webraan-body .wr-announce__message { position:absolute; inset:0; text-align:right; direction:rtl; }
body.webraan-body .wr-announce__icon { flex-shrink:0; font-size:18px; line-height:1; }
body.webraan-body .wr-announce__cta { flex-shrink:0; }

/* Collapsible announcement island; preserve the CTA and short message. */
body.webraan-body .wr-announce { transition: width .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease; }
body.webraan-body .wr-announce.is-compact { width: 280px; box-shadow: 0 8px 24px rgba(8,25,65,.2); }
body.webraan-body .wr-announce__icon { display:grid; place-items:center; padding:0; cursor:pointer; border:1px solid rgba(159,199,255,.6); color:#fff; background:linear-gradient(145deg,#287dff,#0656d9); }
body.webraan-body .wr-announce__icon svg { width:19px; height:19px; }
body.webraan-body .wr-announce__icon:focus-visible { outline:2px solid #fff; outline-offset:3px; }

/* Keep the explicitly requested island resize smooth, including OS reduced motion. */
body.webraan-body .wr-announce {
  transition-property: width, box-shadow;
  transition-duration: .65s !important;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.wr-island-status { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
body.webraan-body .wr-announce { transform-origin:50% 50%; }

/* Mobile compact island keeps only the icon and CTA. */
@media (max-width: 767px) {
 body.webraan-body .wr-announce.is-compact { width: 164px; gap: 14px; justify-content: space-between; padding-inline: 8px; }
 body.webraan-body .wr-announce.is-compact .wr-announce__text { display: none; }
}

/* Slower expansion with a gentle finish; compacting remains responsive. */
body.webraan-body .wr-announce:not(.is-compact) {
 transition-duration: 1s !important;
 transition-timing-function: cubic-bezier(.25,.8,.25,1);
}

/* Mobile: animate the actual viewport width without flex/display jumps. */
@media (max-width: 767px) {
 body.webraan-body .wr-announce,
 body.webraan-body .wr-announce:not(.is-compact) {
  width:calc(100vw - 32px); display:grid; grid-template-columns:30px minmax(0,1fr) auto;
  gap:5px; padding-inline:8px; box-sizing:border-box;
  transition-duration:1.25s !important; transition-timing-function:cubic-bezier(.4,0,.2,1);
 }
 body.webraan-body .wr-announce.is-compact { width:148px; gap:5px; justify-content:normal; }
 body.webraan-body .wr-announce .wr-announce__text { display:block; width:100%; }
 body.webraan-body .wr-announce.is-compact .wr-announce__text { display:block; visibility:hidden; }
}

/* Match the calm mobile expansion and collapse on desktop. */
body.webraan-body .wr-announce,
body.webraan-body .wr-announce:not(.is-compact) {
 transition-duration:1.25s !important;
 transition-timing-function:cubic-bezier(.4,0,.2,1);
}

/* Elementor rich text must remain readable despite pasted inline black colors. */
body.webraan-body .elementor-widget-text-editor,
body.webraan-body .elementor-widget-text-editor :is(.elementor-widget-container,p,div,span,h1,h2,h3,h4,h5,h6,strong,b,em,i,li,blockquote,td,th) { color:var(--wr-text) !important; }
body.webraan-body .elementor-widget-text-editor a,
body.webraan-body .elementor-widget-text-editor a :is(span,strong,b,em) { color:var(--wr-primary,#3985ff) !important; text-decoration:underline; text-underline-offset:3px; }
body.webraan-body .wr-reading-content { transition-property:max-height !important; transition-duration:1.6s !important; transition-timing-function:cubic-bezier(.45,0,.3,1) !important; overflow:hidden; overflow-anchor:none; }
body.webraan-body .wr-reading-content.is-collapsed { -webkit-mask-image:linear-gradient(#000 38%,rgba(0,0,0,.55) 68%,rgba(0,0,0,.15) 94%,transparent); mask-image:linear-gradient(#000 38%,rgba(0,0,0,.55) 68%,rgba(0,0,0,.15) 94%,transparent); }
body.webraan-body .wr-reading-toggle::after { content:''; display:block; flex:0 0 18px; width:18px; height:18px; margin-inline-start:10px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .5s cubic-bezier(.4,0,.2,1); }
body.webraan-body .wr-reading-toggle[aria-expanded="true"]::after { transform:rotate(180deg); }
body.webraan-body .wr-reading-toggle { display:flex; align-items:center; justify-content:center; margin:16px auto 0; padding:11px 22px; min-height:44px; border:1px solid var(--wr-border); border-radius:14px; background:var(--wr-surface); color:var(--wr-text); font:inherit; cursor:pointer; }
body.webraan-body .wr-reading-toggle:focus-visible { outline:3px solid #3984ff; outline-offset:3px; }
/* Tighter icon-to-CTA spacing in the mobile compact island. */
@media (max-width: 767px) {
 body.webraan-body .wr-announce.is-compact {
  width:148px; grid-template-columns:30px minmax(0,1fr) auto; gap:5px; justify-content:normal;
 }
}