/* ==========================================================================
   iFix Support — Theme (Direction A: "Bold Bubble")
   Design-token layer + component skins loaded AFTER the legacy
   bootstrap/greenery stylesheets so it overrides them selectively.
   Do not remove greenery.css yet — many not-yet-redesigned sections
   still rely on its base layout rules; this file re-skins the shared
   chrome (nav, footer, buttons, cards, forms) in the new brand style.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Karla:wght@400;500;600;700;800&display=swap');

:root{
  /* Brand colors, sampled from the new images/logo.png (iFix Support) */
  --pfi-primary:        #68304b;
  --pfi-primary-dark:   #53263c;
  --pfi-primary-darker: #441f31;
  --pfi-primary-tint:   #f0e2e7;
  --pfi-primary-tint-2: #f8f2f4;
  --pfi-navy:           #38387e;
  --pfi-navy-dark:      #272758;
  --pfi-ink:            #241a22;
  --pfi-muted:          #6e5c66;
  --pfi-surface:        #ffffff;
  --pfi-surface-alt:    #f8f2f4;
  --pfi-line:           #ecd9e0;
  --pfi-line-strong:    #d9b3c1;

  --pfi-radius-sm: 12px;
  --pfi-radius-md: 20px;
  --pfi-radius-lg: 28px;
  --pfi-radius-pill: 999px;

  --pfi-shadow-sm: 0 10px 24px -14px rgba(34, 23, 38, .35);
  --pfi-shadow-md: 0 24px 48px -24px rgba(34, 23, 38, .38);

  --pfi-font-display: 'Baloo 2', system-ui, sans-serif;
  --pfi-font-body: 'Karla', 'Noto Sans TC', system-ui, sans-serif;
}

/* ---------- base typography ---------- */
body{
  font-family: var(--pfi-font-body);
  color: var(--pfi-ink);
}
h1, h2, h3, h4, h5, h6,
.h1-md,.h2-md,.h3-md,.h3-lg,.h3-xl,.h4-sm,.h4-md,.h4-lg,.h4-xl,.h5-sm,.h5-md,.h5-lg,.h5-xl{
  font-family: var(--pfi-font-display);
  color: var(--pfi-ink);
  font-weight: 700;
}
.section-title h3, .section-title h2{ letter-spacing: -.01em; }
.section-title p{ color: var(--pfi-muted); }
.horizontal-bottom-line{
  display: block;
  width: 64px; height: 4px; border-radius: var(--pfi-radius-pill);
  background: var(--pfi-primary); margin: 16px auto 0;
}
/* greenery.css draws its own small navy dash via ::after on this same
   span - redundant now that the span itself is a visible pink bar,
   producing a double-line look under every section heading. */
.horizontal-bottom-line::after{ display: none; content: none; }
a{ color: var(--pfi-primary); }
a:hover{ color: var(--pfi-primary-dark); }
::selection{ background: var(--pfi-primary-tint); color: var(--pfi-primary-darker); }

/* ---------- buttons ---------- */
.btn{ border-radius: var(--pfi-radius-pill); font-weight: 700; }
.btn-theme,
.white-color .btn-theme{
  background-color: var(--pfi-primary) !important;
  border-color: var(--pfi-primary) !important;
  color: #fff !important;
  box-shadow: 0 14px 26px -12px rgba(218, 42, 99, .55);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-theme:hover, .btn-theme:focus,
.white-color .btn-theme:hover{
  background-color: var(--pfi-primary-dark) !important;
  border-color: var(--pfi-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -12px rgba(184, 30, 82, .6);
}
.btn-primary, .btn-outline-primary, .btn-custom{
  background-color: var(--pfi-primary);
  border-color: var(--pfi-primary);
  color: #fff;
}
.btn-primary:hover, .btn-custom:hover{
  background-color: var(--pfi-primary-dark);
  border-color: var(--pfi-primary-dark);
}
.btn-outline-primary{
  background-color: transparent;
  color: var(--pfi-primary);
}
.btn-outline-primary:hover{
  background-color: var(--pfi-primary);
  color: #fff;
}
.btn-secondary{
  background-color: var(--pfi-navy);
  border-color: var(--pfi-navy);
}
.btn-secondary:hover{
  background-color: var(--pfi-navy-dark);
  border-color: var(--pfi-navy-dark);
}

/* ---------- navbar / header ---------- */
.header.top-line{ border-top: 4px solid var(--pfi-primary); }
.navbar.navbar-light.bg-light{
  background-color: var(--pfi-surface) !important;
  border-radius: 0 0 var(--pfi-radius-lg) var(--pfi-radius-lg);
  transition: box-shadow .2s ease;
}
.navbar.navbar-light.bg-light.scroll{
  box-shadow: var(--pfi-shadow-sm);
}
.navbar-brand img{ height: 40px; width: auto; }
.hover-menu .navbar-nav{ gap: 4px; }
.hover-menu .navbar-nav .nav-link{
  font-family: var(--pfi-font-body);
  font-weight: 700;
  color: var(--pfi-ink) !important;
  padding: .5rem 1rem !important;
  border-radius: var(--pfi-radius-pill);
  transition: color .15s ease, background-color .15s ease;
}
.hover-menu li a:hover,
.hover-menu li a:focus{
  color: var(--pfi-primary-dark) !important;
  background-color: var(--pfi-primary-tint);
}
.hover-menu .navbar-nav .nav-link.active{
  color: var(--pfi-primary) !important;
  background-color: var(--pfi-primary-tint);
}
.navbar-toggler{
  border-radius: var(--pfi-radius-pill);
  background: var(--pfi-primary-tint);
  border: none;
}
.navbar-toggler .navbar-bar-icon i{ color: var(--pfi-primary); }
.navbar-text .btn-theme{ border-radius: var(--pfi-radius-pill); padding: .65rem 1.3rem; }

/* ---------- call-to-action band ---------- */
#cta-1.bg-theme{
  background: linear-gradient(120deg, var(--pfi-primary) 0%, var(--pfi-primary-dark) 100%) !important;
  border-radius: var(--pfi-radius-lg);
  max-width: 1140px;
  width: calc(100% - 32px);
  margin: 0 auto 48px;
  padding-top: 44px;
  padding-bottom: 44px;
  box-shadow: var(--pfi-shadow-md);
}
#cta-1 .cta-txt h4{ font-family: var(--pfi-font-display); }
#cta-1 a.internal-link{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#cta-1 a.internal-link:hover{ color: var(--pfi-ink); }
/* greenery.css's #cta-1 h4 span{color:#0b2f52} targets the phone-number
   span - but the actual markup nests it as <a><span>, not <span><a>,
   so that selector order never matched and the dark navy color leaked
   through, reading as low-contrast on the new plum/navy gradient. */
#cta-1 h4 span,
#cta-1 h4 a span{
  display: inline-block;
  color: #fff !important;
  background: rgba(255, 255, 255, .16);
  padding: 3px 14px;
  border-radius: var(--pfi-radius-pill);
  border: 1.5px solid rgba(255, 255, 255, .35);
}

/* ---------- contact-us.php: align info column with the form card ----------
   .form-holder has 36px of top padding before its first input, but the
   sibling contact-info column starts flush at the row's top, so "Our
   Location" sat visibly higher than the form fields beside it. */
.contact-info-col{ padding-top: 36px; }

/* ---------- newsletter band (contact-us.php / sell-old-mobile-phone.php) ----------
   Same issue as the CTA band: sits directly above the footer with no
   external spacing, so the navy block's square corner touches the
   footer's rounded top corner with zero gap. */
#newsletter-1.newsletter-section{ margin-bottom: 48px; }
#newsletter-1.bg-theme{
  background: linear-gradient(120deg, var(--pfi-navy) 0%, var(--pfi-navy-dark) 100%) !important;
}

/* ---------- footer ---------- */
footer#brands-2.bg-lightgrey{
  background-color: var(--pfi-ink) !important;
  color: #e7d9e5;
  border-radius: var(--pfi-radius-lg) var(--pfi-radius-lg) 0 0;
}
footer#brands-2 .footer-links h5{
  color: #fff;
  font-size: 1.05rem;
}
footer#brands-2 .foo-links li,
footer#brands-2 ul.clearfix li{ color: #cbb8c8; }
footer#brands-2 .foo-links a,
footer#brands-2 ul.clearfix a{
  color: #d9c3cd;
  text-decoration: none;
  transition: color .15s ease, padding-left .15s ease;
  display: inline-block;
}
footer#brands-2 .foo-links a:hover,
footer#brands-2 ul.clearfix a:hover{
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: var(--pfi-primary);
  text-underline-offset: 3px;
  padding-left: 4px;
}
footer#brands-2 p{ color: #a891a5; font-size: .85rem; }
footer#brands-2 .foo-socials a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--pfi-radius-pill);
  background: rgba(255,255,255,.08); color: #fff !important; margin: 0 4px;
  transition: background .15s ease;
}
footer#brands-2 .foo-socials a:hover{ background: var(--pfi-primary); }
.bottom-footer{ border-top: 1px solid rgba(255,255,255,.12); margin-top: 10px; padding-top: 18px; }
.bottom-footer .footer-copyright{ color: #a891a5 !important; }

a.float-phone, a.circlewhatsapp{
  box-shadow: var(--pfi-shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.float-phone:hover, a.circlewhatsapp:hover{
  transform: scale(1.08);
  box-shadow: var(--pfi-shadow-md);
}
a.float-phone{ background: var(--pfi-primary) !important; bottom: 114px; }
a.float-phone i{ color: #fff; }

/* .circlewhatsapp was never given an actual circular shape in greenery.css
   (no width/height/border-radius) - the raw 40x40 image sat in a plain
   padded box, so box-shadow/hover-scale rendered a soft square halo
   around the round icon instead of hugging its circle. */
a.circlewhatsapp{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  padding: 0 !important;
  border-radius: 50%;
  overflow: hidden;
}
a.circlewhatsapp img{
  width: 50px; height: 50px;
  object-fit: cover;
}

/* ---------- cards / masonry review grid ---------- */
.review-2-txt{
  border: none !important;
  border-radius: var(--pfi-radius-md);
  box-shadow: var(--pfi-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.review-2-txt:hover{
  box-shadow: var(--pfi-shadow-md);
}
.review-2-txt h5{ font-family: var(--pfi-font-display); }
.review-2-txt p{ color: var(--pfi-muted); }

/* ---------- owl carousels (testimonials / brand & model logos) ---------- */
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span{
  background: var(--pfi-primary);
}
.owl-theme .owl-nav [class*='owl-']{
  background: var(--pfi-primary-tint) !important;
  color: var(--pfi-primary) !important;
  border-radius: var(--pfi-radius-pill) !important;
}

/* ---------- bootstrap carousel controls (hero) ---------- */
.carousel-control-prev, .carousel-control-next{ width: 5%; }
.carousel-control-prev-icon, .carousel-control-next-icon{
  background-color: var(--pfi-primary);
  opacity: .85;
  border-radius: var(--pfi-radius-pill);
  padding: 20px;
  background-size: 55%;
}

/* ---------- forms ---------- */
.form-control, .custom-select, select.form-control{
  border-radius: var(--pfi-radius-sm) !important;
  border: 1.5px solid var(--pfi-line-strong) !important;
}
.form-control:focus, .custom-select:focus{
  border-color: var(--pfi-primary) !important;
  box-shadow: 0 0 0 .2rem var(--pfi-primary-tint) !important;
}

/* ---------- #hero-8 video hero (services.php / about-us.php) ----------
   Both pages use class="hero-section bg-video video-play" with no
   data-vide-bg attribute set, so jquery.vide.min.js has no video/poster
   to render - the section falls back to plain white, and #hero-8's
   rgba(0,0,0,.55) overlay on top of that renders as a flat mid-grey
   block instead of a dramatic hero. Give it a real background so the
   overlay has something to darken, matching the brand gradient used
   elsewhere (the CTA band, the "Vibrant Gradient" mockup direction). */
#hero-8.hero-section{
  background: linear-gradient(120deg, var(--pfi-primary) 0%, var(--pfi-primary-dark) 45%, var(--pfi-navy-dark) 100%);
}
#hero-8 .hero-slider,
#hero-8 .slides,
#hero-8 .hero-slide{
  display: block !important;
  width: 100%;
  text-align: center !important;
}

/* ---------- "Get A Quote Now" device-category cards (index.php) ---------- */
.brands-section .item{ border: none !important; }
.brands-section .brand-logo{
  background: linear-gradient(135deg, var(--pfi-navy) 0%, var(--pfi-navy-dark) 100%);
  border-radius: var(--pfi-radius-lg) !important;
  box-shadow: var(--pfi-shadow-md);
  padding: 36px 20px 30px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.brands-section .brand-logo:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 30px 50px -20px rgba(34, 23, 38, .45);
}
.brands-section .brand-logo a{ text-decoration: none; display: block; }
.brands-section .brand-logo img,
.brands-section .brand-logo .brand-logo-svg{
  display: inline-block;
  background: rgba(255, 255, 255, .14);
  border-radius: 50%;
  padding: 22px !important;
  width: 96px; height: 96px;
  object-fit: contain;
  box-sizing: border-box;
}
.brands-section .brand-logo p{
  font-family: var(--pfi-font-display);
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 1.05rem;
  margin-top: 18px !important;
}

/* ---------- section spacing safety net ----------
   Several section wrappers in the booking-page family (.contacts-section,
   .wide-15, .riews-section/.reviews-section) reference classes that were
   never actually defined in greenery.css, so those sections got zero
   padding and butted straight up against whatever followed. Give the
   ones that matter a real, self-contained gap so no section depends on
   a neighboring section's margin to keep its distance. */
.contacts-section{ padding-bottom: 56px; }
.wide-15{ padding-top: 64px; padding-bottom: 56px; }

/* ---------- shared body-content components (booking pages, service grids) ---------- */
.form-holder{
  background: #fff;
  border-radius: var(--pfi-radius-lg);
  box-shadow: var(--pfi-shadow-md);
  padding: 36px 40px;
}
[class^="phonefix-banner"]{
  border-radius: var(--pfi-radius-md);
  box-shadow: var(--pfi-shadow-sm);
}
.banner-icon{
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--pfi-primary-tint);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.eyebrow-pill{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--pfi-primary-tint); color: var(--pfi-primary-dark);
  font-weight: 700; font-size: .8rem; padding: 8px 16px;
  border-radius: var(--pfi-radius-pill); margin-bottom: 14px;
}
.trust-chip{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 700; color: var(--pfi-primary-dark);
  background: var(--pfi-primary-tint); border-radius: var(--pfi-radius-pill);
  padding: 7px 14px; margin: 4px 6px;
}

/* ---------- responsive: keep at least a 16px gutter at phone width ---------- */
@media (max-width: 480px){
  footer#brands-2.bg-lightgrey{ border-radius: var(--pfi-radius-md) var(--pfi-radius-md) 0 0; }
  .form-holder{ padding: 24px 0; }
}