/* BellSill site-wide rebuild CSS: buttons, dark sections, booking page responsive layout.
   Loaded after the legacy stylesheet to replace the broken patch stack with clear rules. */

:root{
  --bellsill-navy:#071a34;
  --bellsill-navy-2:#102f5f;
  --bellsill-orange:#f26522;
  --bellsill-orange-dark:#d94d0f;
  --bellsill-white:#ffffff;
  --bellsill-soft-white:rgba(255,255,255,.88);
  --bellsill-border:rgba(255,255,255,.18);
}

html,body{max-width:100%;overflow-x:hidden;}
*,*::before,*::after{box-sizing:border-box;}
img,svg,video,iframe{max-width:100%;height:auto;}

/* ---------- SITE-WIDE BUTTON REBUILD ---------- */
.btn,
a.btn,
button.btn,
input.btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.55rem!important;
  min-height:48px!important;
  padding:14px 30px!important;
  border-radius:10px!important;
  border:2px solid transparent!important;
  font-weight:800!important;
  font-size:1rem!important;
  line-height:1.2!important;
  text-align:center!important;
  text-decoration:none!important;
  white-space:normal!important;
  opacity:1!important;
  visibility:visible!important;
  text-indent:0!important;
  text-shadow:none!important;
  letter-spacing:0!important;
  cursor:pointer!important;
  max-width:100%!important;
}
.btn i,.btn span,.btn strong,
a.btn i,a.btn span,a.btn strong,
button.btn i,button.btn span,button.btn strong{opacity:1!important;visibility:visible!important;text-indent:0!important;}

.btn-primary,
a.btn-primary,
button.btn-primary,
input.btn-primary,
.bg-navy a.btn-primary,
.bg-dark a.btn-primary,
.text-white a.btn-primary,
.cta-buttons a.btn-primary,
.cta-banner a.btn-primary,
.cta-section a.btn-primary,
.page-hero a.btn-primary{
  background:var(--bellsill-orange)!important;
  border-color:var(--bellsill-orange)!important;
  color:#fff!important;
}
.btn-primary *,a.btn-primary *,button.btn-primary *,input.btn-primary *{color:#fff!important;}
.btn-primary:hover,a.btn-primary:hover,button.btn-primary:hover{
  background:var(--bellsill-orange-dark)!important;
  border-color:var(--bellsill-orange-dark)!important;
  color:#fff!important;
}

.btn-outline-white,
a.btn-outline-white,
.bg-navy a.btn-outline-white,
.bg-dark a.btn-outline-white,
.text-white a.btn-outline-white,
.cta-buttons a.btn-outline-white,
.page-hero a.btn-outline-white{
  background:transparent!important;
  border-color:#fff!important;
  color:#fff!important;
}
.btn-outline-white *,a.btn-outline-white *{color:#fff!important;}
.btn-outline-white:hover,a.btn-outline-white:hover{background:#fff!important;color:var(--bellsill-navy)!important;}
.btn-outline-white:hover *,a.btn-outline-white:hover *{color:var(--bellsill-navy)!important;}

.btn-orange,
a.btn-orange,
.bg-navy a.btn-orange,
.bg-dark a.btn-orange,
.text-white a.btn-orange,
.cta-buttons a.btn-orange{
  background:transparent!important;
  border-color:var(--bellsill-orange)!important;
  color:var(--bellsill-orange)!important;
}
.btn-orange *,a.btn-orange *{color:var(--bellsill-orange)!important;}
.btn-orange:hover,a.btn-orange:hover{background:var(--bellsill-orange)!important;color:#fff!important;}
.btn-orange:hover *,a.btn-orange:hover *{color:#fff!important;}

.btn-lg{min-height:56px!important;padding:16px 38px!important;font-size:1.05rem!important;}
.btn-sm{min-height:42px!important;padding:10px 22px!important;font-size:.9rem!important;}

/* CTA button rows should never hide text or collapse. */
.cta-buttons,
.hero-buttons,
.cta-banner .btns,
.cta-section .cta-buttons,
.bg-navy .cta-buttons,
.bg-dark .cta-buttons,
.text-white .cta-buttons{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:1rem!important;
  flex-wrap:wrap!important;
  width:100%!important;
}
.cta-buttons .btn,.hero-buttons .btn,.cta-banner .btns .btn,.cta-section .cta-buttons .btn{flex:0 1 auto!important;}

/* ---------- DARK SECTION / CARD READABILITY REBUILD ---------- */
.bg-navy,
.bg-dark,
section.bg-navy,
section.bg-dark,
.text-white,
.info-box,
.need-help-card,
.help-card,
.booking-help,
.sidebar-card,
.contact-help-card,
.dark-card,
.booking-page-grid .info-box{
  color:#fff!important;
}
.bg-navy,
section.bg-navy,
.info-box,
.need-help-card,
.help-card,
.booking-help,
.sidebar-card,
.contact-help-card,
.dark-card,
.booking-page-grid .info-box{
  background-color:var(--bellsill-navy-2)!important;
}
.bg-dark,section.bg-dark{background-color:var(--bellsill-navy)!important;}

.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4,.bg-navy h5,.bg-navy h6,
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4,.bg-dark h5,.bg-dark h6,
.text-white h1,.text-white h2,.text-white h3,.text-white h4,.text-white h5,.text-white h6,
.info-box h1,.info-box h2,.info-box h3,.info-box h4,.info-box h5,.info-box h6,
.need-help-card h1,.need-help-card h2,.need-help-card h3,.need-help-card h4,.need-help-card h5,.need-help-card h6,
.help-card h1,.help-card h2,.help-card h3,.help-card h4,.help-card h5,.help-card h6,
.booking-help h1,.booking-help h2,.booking-help h3,.booking-help h4,.booking-help h5,.booking-help h6,
.sidebar-card h1,.sidebar-card h2,.sidebar-card h3,.sidebar-card h4,.sidebar-card h5,.sidebar-card h6,
.contact-help-card h1,.contact-help-card h2,.contact-help-card h3,.contact-help-card h4,.contact-help-card h5,.contact-help-card h6,
.dark-card h1,.dark-card h2,.dark-card h3,.dark-card h4,.dark-card h5,.dark-card h6,
.booking-page-grid .info-box h1,.booking-page-grid .info-box h2,.booking-page-grid .info-box h3,.booking-page-grid .info-box h4,.booking-page-grid .info-box h5,.booking-page-grid .info-box h6{
  color:#fff!important;
  opacity:1!important;
}
.bg-navy p,.bg-navy li,.bg-navy span,
.bg-dark p,.bg-dark li,.bg-dark span,
.text-white p,.text-white li,.text-white span,
.info-box p,.info-box li,.info-box span,
.need-help-card p,.need-help-card li,.need-help-card span,
.help-card p,.help-card li,.help-card span,
.booking-help p,.booking-help li,.booking-help span,
.sidebar-card p,.sidebar-card li,.sidebar-card span,
.contact-help-card p,.contact-help-card li,.contact-help-card span,
.dark-card p,.dark-card li,.dark-card span,
.booking-page-grid .info-box p,.booking-page-grid .info-box li,.booking-page-grid .info-box span{
  color:var(--bellsill-soft-white)!important;
  opacity:1!important;
}
.bg-navy a:not(.btn),.bg-dark a:not(.btn),.text-white a:not(.btn),
.info-box a:not(.btn),.need-help-card a:not(.btn),.help-card a:not(.btn),.booking-help a:not(.btn),
.sidebar-card a:not(.btn),.contact-help-card a:not(.btn),.dark-card a:not(.btn),.booking-page-grid .info-box a:not(.btn){
  color:#fff!important;
  font-weight:800!important;
  opacity:1!important;
  text-decoration:none!important;
}
.info-box i,.need-help-card i,.help-card i,.booking-help i,.sidebar-card i,.contact-help-card i,.dark-card i,
.bg-navy i,.bg-dark i,.text-white i{color:var(--bellsill-orange)!important;opacity:1!important;}

/* Neutralize inline color styles inside dark cards/sections that were making text unreadable. */
.bg-navy [style*="color"],.bg-dark [style*="color"],.text-white [style*="color"],
.info-box [style*="color"],.need-help-card [style*="color"],.help-card [style*="color"],.booking-help [style*="color"],
.sidebar-card [style*="color"],.contact-help-card [style*="color"],.dark-card [style*="color"]{color:inherit!important;}
.bg-navy a[style*="color"]:not(.btn),.bg-dark a[style*="color"]:not(.btn),.text-white a[style*="color"]:not(.btn),
.info-box a[style*="color"]:not(.btn),.need-help-card a[style*="color"]:not(.btn),.help-card a[style*="color"]:not(.btn),.booking-help a[style*="color"]:not(.btn),
.sidebar-card a[style*="color"]:not(.btn),.contact-help-card a[style*="color"]:not(.btn),.dark-card a[style*="color"]:not(.btn){color:#fff!important;}
.bg-navy i[style*="color"],.bg-dark i[style*="color"],.text-white i[style*="color"],
.info-box i[style*="color"],.need-help-card i[style*="color"],.help-card i[style*="color"],.booking-help i[style*="color"],
.sidebar-card i[style*="color"],.contact-help-card i[style*="color"],.dark-card i[style*="color"]{color:var(--bellsill-orange)!important;}

/* ---------- BOOKING PAGE REBUILD ---------- */
.booking-page-section{padding:56px 0!important;overflow:hidden!important;}
.booking-page-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(280px,360px)!important;
  gap:2rem!important;
  align-items:start!important;
  width:100%!important;
  max-width:100%!important;
}
.booking-page-grid > *{min-width:0!important;max-width:100%!important;}
.form-card,.booking-page-grid .form-card,.booking-page-grid .info-box{
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}
.booking-page-grid .info-box{
  padding:2rem!important;
  border-radius:18px!important;
  box-shadow:0 12px 30px rgba(7,26,52,.18)!important;
}
.booking-page-grid .info-box .info-list{list-style:none!important;margin:1.25rem 0 0!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:.7rem!important;}
.booking-page-grid .info-box .info-list li{display:flex!important;align-items:flex-start!important;gap:.55rem!important;min-width:0!important;}
.booking-page-grid .info-box .info-list span{min-width:0!important;overflow-wrap:anywhere!important;}
.booking-page-grid .info-box .info-list a{overflow-wrap:anywhere!important;}
.form-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1rem!important;}
.form-group input,.form-group select,.form-group textarea{max-width:100%!important;width:100%!important;}

@media (max-width:1024px){
  .booking-page-grid{grid-template-columns:1fr!important;gap:1.5rem!important;}
}
@media (max-width:768px){
  .booking-page-section{padding:32px 0!important;}
  .booking-page-section .container{width:100%!important;max-width:100%!important;padding-left:16px!important;padding-right:16px!important;}
  .booking-page-grid{display:block!important;width:100%!important;}
  .booking-page-grid > *{margin-bottom:1.5rem!important;}
  .form-row{display:block!important;}
  .form-row .form-group{margin-bottom:1rem!important;}
  .form-card{padding:1.4rem!important;border-radius:16px!important;}
  .booking-page-grid .info-box{padding:1.5rem!important;border-radius:16px!important;margin-left:0!important;margin-right:0!important;}
  .cta-buttons,.hero-buttons,.cta-banner .btns,.cta-section .cta-buttons,.bg-navy .cta-buttons,.bg-dark .cta-buttons,.text-white .cta-buttons{flex-direction:column!important;align-items:stretch!important;max-width:440px!important;margin-left:auto!important;margin-right:auto!important;}
  .cta-buttons .btn,.hero-buttons .btn,.cta-banner .btns .btn,.cta-section .cta-buttons .btn,.bg-navy .cta-buttons .btn,.bg-dark .cta-buttons .btn,.text-white .cta-buttons .btn{width:100%!important;}
  .btn-lg{min-height:52px!important;padding:14px 22px!important;font-size:1rem!important;}
}
@media (max-width:480px){
  .booking-page-section .container{padding-left:12px!important;padding-right:12px!important;}
  .form-card{padding:1.15rem!important;}
  .btn,a.btn,button.btn{padding-left:18px!important;padding-right:18px!important;}
}

/* Header safety on phones. */
@media (max-width:768px){
  #site-header .container{max-width:100%!important;padding-left:20px!important;padding-right:20px!important;}
  #site-header .nav-wrapper{min-height:82px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;}
  #site-header .logo a{display:flex!important;align-items:center!important;gap:.75rem!important;min-width:0!important;}
  #site-header .logo img{width:54px!important;height:54px!important;flex:0 0 54px!important;}
  #site-header .logo-text{min-width:0!important;}
  #site-header .logo-text .name{font-size:1.15rem!important;line-height:1.1!important;white-space:nowrap!important;}
  #site-header .logo-text .tag{font-size:.68rem!important;white-space:nowrap!important;}
  #site-header .mobile-toggle{display:flex!important;flex:0 0 auto!important;}
}
@media (max-width:380px){
  #site-header .logo-text .name{font-size:1rem!important;}
  #site-header .logo-text .tag{font-size:.6rem!important;}
  #site-header .logo img{width:48px!important;height:48px!important;flex-basis:48px!important;}
}

/* === 2026-04-25 COMPLETE ICON + DARK READABILITY REBUILD ===
   Final layer loaded after legacy CSS. Keeps previous responsive/footer/menu fixes intact. */
:root{
  --bellsill-navy:#071a34;
  --bellsill-blue:#173a70;
  --bellsill-orange:#f26522;
}

/* Service/card icon boxes: make the icon graphic visible everywhere, including /services.php. */
.service-card .icon-wrap,
.service-card .service-icon,
.service-card .icon,
.service-card-icon,
.service-icon,
.icon-box,
.card-icon,
.feature-icon,
.value-icon,
.process-icon,
.category-icon{
  width:62px!important;
  height:62px!important;
  min-width:62px!important;
  min-height:62px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,var(--bellsill-orange),#ff7a33)!important;
  color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  box-shadow:0 10px 24px rgba(242,101,34,.22)!important;
  overflow:hidden!important;
}
.service-card .icon-wrap i,
.service-card .service-icon i,
.service-card .icon i,
.service-card-icon i,
.service-icon i,
.icon-box i,
.card-icon i,
.feature-icon i,
.value-icon i,
.process-icon i,
.category-icon i{
  display:inline-block!important;
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free"!important;
  font-weight:900!important;
  font-size:1.45rem!important;
  line-height:1!important;
  color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  text-indent:0!important;
  filter:none!important;
}
.service-card .icon-wrap .fab,
.service-card .service-icon .fab,
.service-card .icon .fab,
.service-card-icon .fab,
.service-icon .fab,
.icon-box .fab,
.card-icon .fab,
.feature-icon .fab,
.value-icon .fab,
.process-icon .fab,
.category-icon .fab{
  font-family:"Font Awesome 6 Brands","Font Awesome 5 Brands"!important;
  font-weight:400!important;
}

/* Dark sections/cards: make all headings and body text readable, then selectively restore icons/buttons. */
.bg-navy,
.bg-dark,
section.bg-navy,
section.bg-dark,
.text-white,
.info-box,
.need-help-card,
.help-card,
.booking-help,
.sidebar-card,
.contact-help-card,
.dark-card,
.booking-page-grid .info-box,
[class*="help"][class*="card"],
[class*="info"][class*="box"]{
  background-color:var(--bellsill-blue)!important;
  color:#ffffff!important;
}
.bg-dark,section.bg-dark{background-color:var(--bellsill-navy)!important;}

.bg-navy :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,div:not(.btn):not(.btn *)),
.bg-dark :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,div:not(.btn):not(.btn *)),
.text-white :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,div:not(.btn):not(.btn *)),
.info-box :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,div:not(.btn):not(.btn *)),
.need-help-card :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,div:not(.btn):not(.btn *)),
.help-card :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,div:not(.btn):not(.btn *)),
.booking-help :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,div:not(.btn):not(.btn *)),
.sidebar-card :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,div:not(.btn):not(.btn *)),
.contact-help-card :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,div:not(.btn):not(.btn *)),
.dark-card :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,div:not(.btn):not(.btn *)),
.booking-page-grid .info-box :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,div:not(.btn):not(.btn *)){
  color:#ffffff!important;
  opacity:1!important;
  visibility:visible!important;
  text-shadow:none!important;
}
.bg-navy :where(p,li,span,small,em),
.bg-dark :where(p,li,span,small,em),
.text-white :where(p,li,span,small,em),
.info-box :where(p,li,span,small,em),
.need-help-card :where(p,li,span,small,em),
.help-card :where(p,li,span,small,em),
.booking-help :where(p,li,span,small,em),
.sidebar-card :where(p,li,span,small,em),
.contact-help-card :where(p,li,span,small,em),
.dark-card :where(p,li,span,small,em),
.booking-page-grid .info-box :where(p,li,span,small,em){color:rgba(255,255,255,.88)!important;}

.bg-navy a:not(.btn),.bg-dark a:not(.btn),.text-white a:not(.btn),
.info-box a:not(.btn),.need-help-card a:not(.btn),.help-card a:not(.btn),.booking-help a:not(.btn),
.sidebar-card a:not(.btn),.contact-help-card a:not(.btn),.dark-card a:not(.btn),
.booking-page-grid .info-box a:not(.btn){color:#ffffff!important;font-weight:800!important;opacity:1!important;}

.bg-navy i,.bg-dark i,.text-white i,
.info-box i,.need-help-card i,.help-card i,.booking-help i,.sidebar-card i,.contact-help-card i,.dark-card i,
.booking-page-grid .info-box i{color:var(--bellsill-orange)!important;opacity:1!important;visibility:visible!important;}

/* Button labels: no orange button should ever have invisible text. */
.btn-primary,.btn-primary:visited,a.btn-primary,a.btn-primary:visited,button.btn-primary,input.btn-primary,
.bg-navy .btn-primary,.bg-dark .btn-primary,.text-white .btn-primary,.cta-buttons .btn-primary,.cta-section .btn-primary,.cta-banner .btn-primary{
  background:var(--bellsill-orange)!important;
  border-color:var(--bellsill-orange)!important;
  color:#ffffff!important;
  font-size:1rem!important;
  text-indent:0!important;
  opacity:1!important;
  visibility:visible!important;
}
.btn-primary *,a.btn-primary *,button.btn-primary *,
.bg-navy .btn-primary *, .bg-dark .btn-primary *, .text-white .btn-primary *, .cta-buttons .btn-primary *{
  color:#ffffff!important;
  opacity:1!important;
  visibility:visible!important;
}
.btn-outline-white,.btn-outline-white:visited,a.btn-outline-white,a.btn-outline-white:visited{
  color:#ffffff!important;
  border-color:#ffffff!important;
  background:transparent!important;
}
.btn-orange,.btn-orange:visited,a.btn-orange,a.btn-orange:visited{
  color:var(--bellsill-orange)!important;
  border-color:var(--bellsill-orange)!important;
  background:transparent!important;
}
.btn-orange i,.btn-orange span{color:var(--bellsill-orange)!important;}
.btn-orange:hover,.btn-orange:hover *{color:#ffffff!important;}

/* Keep CTA rows readable and not squeezed. */
.cta-buttons,.hero-buttons,.cta-section .cta-buttons,.cta-banner .btns{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:1rem!important;
  justify-content:center!important;
  align-items:center!important;
}
@media (max-width:768px){
  .service-card .icon-wrap,.service-card .service-icon,.service-card .icon,.service-card-icon,.service-icon,.icon-box,.card-icon,.feature-icon,.value-icon,.process-icon,.category-icon{
    width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;
  }
}

/* ==========================================================
   FINAL FOOTER WHATSAPP ICON COLOR FIX
   Keeps the green WhatsApp button, but makes the icon white
   to match the button text. Placed at the end of the final
   loaded stylesheet so it wins over brand/icon overrides.
   ========================================================== */
.site-footer .fa-whatsapp,
.site-footer .fab.fa-whatsapp,
.site-footer a[href*="wa.me"] i,
.site-footer a[href*="whatsapp"] i,
.site-footer .btn-whatsapp i,
.site-footer .whatsapp-btn i,
.footer .fa-whatsapp,
.footer .fab.fa-whatsapp,
.footer a[href*="wa.me"] i,
.footer a[href*="whatsapp"] i,
.footer .btn-whatsapp i,
.footer .whatsapp-btn i,
footer .fa-whatsapp,
footer .fab.fa-whatsapp,
footer a[href*="wa.me"] i,
footer a[href*="whatsapp"] i,
footer .btn-whatsapp i,
footer .whatsapp-btn i {
  color: #ffffff !important;
  fill: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.site-footer a[href*="wa.me"] svg,
.site-footer a[href*="whatsapp"] svg,
.site-footer .btn-whatsapp svg,
.site-footer .whatsapp-btn svg,
.footer a[href*="wa.me"] svg,
.footer a[href*="whatsapp"] svg,
.footer .btn-whatsapp svg,
.footer .whatsapp-btn svg,
footer a[href*="wa.me"] svg,
footer a[href*="whatsapp"] svg,
footer .btn-whatsapp svg,
footer .whatsapp-btn svg {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep the footer WhatsApp button text white too. */
.site-footer a[href*="wa.me"],
.site-footer a[href*="wa.me"] *,
.footer a[href*="wa.me"],
.footer a[href*="wa.me"] *,
footer a[href*="wa.me"],
footer a[href*="wa.me"] * {
  color: #ffffff !important;
}