/* =========================================================
   SITE ICON LIBRARY
   Lightweight SVG sprite icon system
========================================================= */

/* Hidden inline SVG sprite */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* =========================================================
   BASE ICON
========================================================= */

.site-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: currentColor;
  vertical-align: -0.125em;
  flex-shrink: 0;
  overflow: visible;

  transition:
    color 0.2s ease,
    fill 0.2s ease,
    stroke 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* Default solid icon behaviour */
.site-icon,
.site-icon * {
  fill: currentColor;
}

/* For solid icons */
.icon-fill,
.icon-fill * {
  fill: currentColor;
  stroke: none;
}

/* For stroke-based icons */
.icon-stroke,
.icon-stroke * {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Stroke weight helpers */
.icon-soft,
.icon-soft * {
  stroke-width: 2;
}

.icon-bold,
.icon-bold * {
  stroke-width: 3;
}

/* =========================================================
   ICON SIZES
========================================================= */

.icon-xs {
  width: 0.75em;
  height: 0.75em;
}

.icon-sm {
  width: 0.9em;
  height: 0.9em;
}

.icon-md {
  width: 1em;
  height: 1em;
}

.icon-lg {
  width: 1.25em;
  height: 1.25em;
}

.icon-xl {
  width: 1.6em;
  height: 1.6em;
}

.icon-2xl {
  width: 2.2em;
  height: 2.2em;
}

/* Fixed rem sizes for areas where em sizing gets annoying */
.icon-16 {
  width: 1rem;
  height: 1rem;
}

.icon-18 {
  width: 1.125rem;
  height: 1.125rem;
}

.icon-20 {
  width: 1.25rem;
  height: 1.25rem;
}

.icon-24 {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-32 {
  width: 2rem;
  height: 2rem;
}

/* =========================================================
   ICON COLOURS
========================================================= */

.icon-blue {
  color: #00aeef;
}

.icon-dark {
  color: #152b3c;
}

.icon-white {
  color: #ffffff;
}

.icon-muted {
  color: rgba(255, 255, 255, 0.72);
}

.icon-success {
  color: #22c55e;
}

/* =========================================================
   ICON LINKS / BUTTON ALIGNMENT
========================================================= */

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.icon-link .site-icon {
  flex-shrink: 0;
}

/* Generic hover effects */
.icon-hover:hover .site-icon,
.icon-hover:focus-visible .site-icon,
.icon-link:hover .site-icon,
.icon-link:focus-visible .site-icon {
  transform: translateY(-1px);
}

/* Directional hover helpers */
.icon-move-right:hover .site-icon,
.icon-move-right:focus-visible .site-icon,
.icon-link:hover .icon-move-right,
.icon-link:focus-visible .icon-move-right {
  transform: translateX(4px);
}

.icon-move-down:hover .site-icon,
.icon-move-down:focus-visible .site-icon,
.icon-link:hover .icon-move-down,
.icon-link:focus-visible .icon-move-down {
  transform: translateY(3px);
}

.icon-pop:hover .site-icon,
.icon-pop:focus-visible .site-icon,
.icon-link:hover .icon-pop,
.icon-link:focus-visible .icon-pop {
  transform: scale(1.08);
}

.icon-wiggle:hover .site-icon,
.icon-wiggle:focus-visible .site-icon,
.icon-link:hover .icon-wiggle,
.icon-link:focus-visible .icon-wiggle {
  transform: rotate(-8deg) scale(1.05);
}

/* Rotate when open */
.is-open .icon-rotate-open,
[aria-expanded="true"] .icon-rotate-open {
  transform: rotate(180deg);
}

/* Small inline icon spacing */
.icon-before {
  margin-right: 0.4em;
}

.icon-after {
  margin-left: 0.4em;
}

/* =========================================================
   ICON BADGES
========================================================= */

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.4rem;
  height: 2.4rem;

  border-radius: 999px;
  color: #00aeef;
  background: rgba(0, 174, 239, 0.12);
  border: 1px solid rgba(0, 174, 239, 0.22);
}

.icon-badge .site-icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* Larger trust/service icon circle */
.icon-feature {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 4rem;
  height: 4rem;

  border-radius: 1.2rem;
  color: #00aeef;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)),
    rgba(0, 174, 239, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.icon-feature .site-icon {
  width: 2rem;
  height: 2rem;
}

/* =========================================================
   TOP NOTICE ICON
========================================================= */

.top-notice p {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.top-notice .site-icon {
  width: 1rem;
  height: 1rem;
  color: #00aeef;
  flex-shrink: 0;
}

/* =========================================================
   FOOTER SOCIAL / REVIEW ICONS
========================================================= */

.footer-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.5rem;
  height: 2.5rem;

  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;

  transition:
    transform 0.2s ease,
    color 0.2s ease,
    background 0.2s ease;
}

/* =========================================================
   FOOTER SOCIAL BRAND COLOURS
========================================================= */

.footer-social a {
  color: #ffffff;
}

/* Keep SVG icons white */
.footer-social a .site-icon {
  color: #ffffff;
  fill: currentColor;
}

/* Facebook */
.footer-social a[href*="facebook.com"] {
  background: #1877f2;
}

/* Instagram */
.footer-social a[href*="instagram.com"] {
  background:
    radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* X / Twitter */
.footer-social a[href*="twitter.com"],
.footer-social a[href*="x.com"] {
  background: #111111;
}

/* YouTube */
.footer-social a[href*="youtube.com"] {
  background: #ff0000;
}

/* Google */
.footer-social a[href*="g.page"],
.footer-social a[href*="google.com"] {
  background: #ffffff;
  color: #4285f4;
}

/* Google icon needs colour instead of white */
.footer-social a[href*="g.page"] .site-icon,
.footer-social a[href*="google.com"] .site-icon {
  color: #4285f4;
}

/* Trustpilot */
.footer-social a[href*="trustpilot.com"] {
  background: #00b67a;
}

/* Yell */
.footer-social a[href*="yell.com"] {
  background: #ffe500;
  color: #111111;
}

/* Yell icon should be dark */
.footer-social a[href*="yell.com"] .site-icon {
  color: #111111;
}

/* Hover state */
.footer-social a:hover,
.footer-social a:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.footer-social .site-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

/* Use this class only when a social icon needs to look optically bigger */
.footer-social .icon-large {
  width: 1.45rem;
  height: 1.45rem;
}

/* Use this class only when a review/star icon needs extra size */
.footer-social .icon-review {
  width: 1.65rem;
  height: 1.65rem;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.icon-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}