:root {
  /*--primary-color: #2B69E1;*/
  --primary-color: #104885;
  /*--secondary-color: #6c757d;*/
  --secondary-color: #2B69E1;
  --background-color: #F5F5F5;
  --hover-text:#007bff; /* Bootstrap primary blue */

  --body-background-colour: radial-gradient(
  circle at 30% 40%,
  rgba(227, 233, 255, 0.7) 0%,
  rgba(252, 229, 239, 0.4) 25%,
  rgba(222, 231, 255, 0.6) 100%
);
  --card-shadow: 4px 6px 18px rgba(0, 0, 0, 0.08);
  --text-color: #212529;
}


/* Make all Bootstrap tooltips blue, rounded, readable */
.tooltip{
  --bs-tooltip-bg: #0d6efd;
  --bs-tooltip-color: #fff;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-font-size: .8rem;
  --bs-tooltip-padding-y: .25rem;
  --bs-tooltip-padding-x: .5rem;
  --bs-tooltip-border-radius: .5rem;
}
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--bs-tooltip-bg) !important; }
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: var(--bs-tooltip-bg) !important; }
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--bs-tooltip-bg) !important; }
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: var(--bs-tooltip-bg) !important; }
.tooltip .tooltip-inner{ box-shadow: 0 2px 6px rgba(16,72,133,.18); }


body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*color: #212529;*/
  margin: 0;
  padding: 0;
  background: var(--body-background-colour);

}


.card {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.08); /* Shadow shifted right & down */
  background-color: #fff;
}



/* spotlight */
.spotlight-justify {
  text-align: justify;
  text-justify: inter-word;      /* helps some engines */
  hyphens: auto;                  /* nicer justification for long words */
  max-width: 100ch;                /* optional: a comfy column width */
}

.spotlight-justify p { margin: 0 0 1rem; }

/* If you want the LAST LINE to also reach the right edge (usually not recommended),
   uncomment the next line: */
/* .spotlight-justify { text-align-last: justify; } */

.navbar {
  border-bottom: 1px solid var(--primary-color); /* Bootstrap primary blue */
}
.navbar-brand {
  /*color: #007BFF !important; !* Material Design blue 500 *!*/
  color: var(--primary-color) !important; /* Custom blue */

}

.navbar .nav-link {
  color: #212529; /* default dark text */
  transition: color 0.2s ease, transform 0.2s ease;
}

.navbar .nav-link:hover {
  color: #007bff; /* Bootstrap primary blue */
  transform: scale(1.1);
  text-decoration: none;
}

/* Optional: make the active nav item blue too */
.navbar .nav-link.active {
  /*color: var(--primary-color);*/
  color: var(--secondary-color);
  font-weight: 600;
}


.alert.auto-dismiss { transition: opacity .3s ease; 
}
.alert.auto-dismiss.is-fading { opacity: 0; 
}

/* === Brand band (above footer) === */
.brand-band{
  padding: 1rem 0 1.25rem;
  background: linear-gradient(180deg, rgba(13,110,253,.06), rgba(13,110,253,.03));
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  position: relative;
  z-index: 2; /* keep it above any preceding artwork */
}

/* Centre the whole logo+text unit inside the container */
.brand-band .container{
  display: flex;
  justify-content: center;
}

/* The inline-sized wrapper that actually gets centred */
.brand-wrap{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

/* Circle logo */
.brand-mark{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.brand-mark img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Text block */
.brand-title{ line-height: 1.1; }
.brand-tagline{ color: #6c757d; }
.lh-1{ line-height: 1; } /* keep utility intent */

/* Back bar just below the header */
.site-backbar {
  background: #f6f8fc;          /* light band */
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: .5rem 0;             /* vertical breathing room */
}

.site-backbar .container {
  display: flex;
  justify-content: flex-end; /* push button to the right */
  align-items: center;
}


/* ===== Pill Back button =====*/
.back-btn {
  display: inline-block;
  padding: .45rem 1.25rem;
  border: 2px solid #104885;    /* brand blue you already use */
  border-radius: 9999px;        /* pill */
  background: #fff;
  color: #104885;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(16,72,133,.08);
  text-decoration: none;
}

/* Hover/focus states */
.back-btn:hover,
.back-btn:focus {
  background: #104885;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(16,72,133,.18);
}



/* === Footer === */

.footer a {
  color: var(--secondary-color) !important; /* Override Bootstrap .text-dark */
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.footer a:hover {
  color: var(--hover-text) !important; /* Bootstrap 5 primary blue */
  transform: scale(1.3);
  text-decoration: none;
}

.footer a i {
  transition: inherit;
  font-size: 1.4rem;
  /*color: var(--primary-color); !* Override Bootstrap .text-dark *!*/
}

.footer .footer-bubble span {
  font-size: 1rem;
  font-weight: 400;
  background-color: var(--hover-text);  /* light blue bubble */
  color: var(--hover-text);            /* Bootstrap primary blue */
  border-radius: 12px;
  padding: 2px 8px;
  margin-left: 4px;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer .footer-bubble:hover span {
  background-color: var(--hover-text);
  color: white;
  transform: scale(1);
  /*color: #007bff;*/
}

.footer-icon {
  position: relative;
  display: inline-block;
}

.footer-icon .tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: max-content;
  background-color: var(--hover-text);
  color: white;
  text-align: center;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 10;
  transition: opacity 0.2s ease-in-out;
}

.footer-icon:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* === Banner Images === */

.banner-wrapper {
  position: relative;
  height: 150px;
  overflow: hidden;
}

.banner-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.logo-overlay {
  position: absolute;
  top: 50%;
  left: 22%;
  transform: translate(-50%, -50%);
  height: 90%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}


/* === Buttons === */

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-danger.text-white {
    color: #fff !important;
}

/* === Review Card === */
.review-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border: 1px solid #e3e3e3;
}

.review-card p {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  line-height: 1.5;
}

.review-card .review-meta {
  font-size: 0.875rem;
  color: #6c757d;
  margin-top: -5px;
}

.review-card .review-author {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.review-card img.profile-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 10px;
}

.review-card .review-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}


.rating-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.rating-row .label {
  font-weight: 600;
  min-width: 150px;      
  flex-shrink: 0;    
}

.rating-row .stars {
  flex-grow: 1;
  white-space: nowrap;
}

.rating-row .stars i {
  font-size: 1rem;
}


.rating-inline .bi { 
  vertical-align: -0.12em; 
}

.d-none {
  display: none;
}

/*!* === dropdown list === *!*/


.form-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.form-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


/* === providers links === */

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--hover-text, #007bff);
  border-radius: 8px;
  background-color: white;
  color: var(--hover-text, #007bff);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.link-btn:hover {
  background-color: var(--hover-text, #007bff);
  color: white;
  transform: scale(1.03);
}

.link-btn i {
  font-size: 1.1rem;
}

/* === Add Icon === */

.card-title {
  padding-right: 2.5rem; /* adjust as needed for the icon size */
}


.card-title .badge {
  font-size: 0.85rem;
  padding: 0.25em 0.5em;
}

.ad-icon {
  color: #198754;        /* Bootstrap's green color */
  font-size: 1.5rem;     /* adjust size as you like */
}


.custom-card {
  border: 4px solid #9ec5fe;   /* light blue border */
  border-radius: 0.5rem;       /* rounded corners */
  background-color: #ffffff;   /* white background */
  box-shadow: 0 0 5px rgba(158, 197, 254, 0.5); /* optional subtle glow */
  padding: 1.5rem;             /* inner spacing */
  transition: border-color 0.3s, box-shadow 0.3s;
}



.custom-card:hover {
  border-color: #4a90e2;       /* slightly darker blue on hover */
  box-shadow: 0 0 10px rgba(74, 144, 226, 0.5);
}



.accordion-body ul { padding-left: 1.25rem; margin-bottom: 0; }


.badge.bg-secondary-subtle {
  background: rgba(108,117,125,.12);
  border: 1px solid rgba(108,117,125,.2);
}

  .map-thumb-wrap { max-width: 320px; }
  .map-frame {
    width: 100%;
    aspect-ratio: 4 / 3;        /* responsive 4:3 box */
    border: 0;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
  }
  .map-actions a {
    text-decoration: none;
  }


@media (max-width: 1600px) {
  .logo-overlay {
    left: 15%;
    height: 90%;
  }
}

@media (max-width: 1200px) {
  .logo-overlay {
    left: 18%;
    height: 90%;
  }
}


/* Keep collapsed nav items stable on hover (no horizontal shift) */
@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    justify-content: flex-start; /* left align */
  }

  .navbar .navbar-nav .nav-link {
    display: block;
    width: 100%;
    padding: .5rem 1rem;
    /* Reserve the same left border in both states so hover doesn't move it */
    border-left: 2px solid transparent;
    /* Avoid hover changes that cause reflow */
    margin-left: 0 !important;
    transform: none !important;
    letter-spacing: normal;
    /* Keep transitions cosmetic only */
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
    font-weight: 500; /* don't jump to bold on hover */
  }

  .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .nav-link:focus {
    border-left-color: var(--bs-primary); /* highlight without shifting */
    color: var(--bs-primary);
    background: rgba(13,110,253,.06);     /* subtle highlight (optional) */
  }

  /* Active item styling (no shift) */
  .navbar .navbar-nav .nav-link.active {
    border-left-color: var(--bs-primary);
    color: var(--bs-primary);
    background: rgba(13,110,253,.08);
    font-weight: 600; /* if you really want bold, keep it consistent */
  }
}


@media (max-width: 768px) {
  .logo-overlay {
    left: 18%;
    height: 80%;
  }
}

@media (max-width: 576px) {

    .banner-wrapper {
    max-height: 100px;
  }

  .logo-overlay {
    left: 18%;
    height: 90%;
  }
    .ranking-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .ranking-label {
    margin-bottom: 0.25rem;
  }
  .rating-row .stars i {
  font-size: 0.8rem;
  }

  .site-backbar { padding: .4rem 0; 
  }
  .back-btn { padding: .4rem 1rem; 
  }

}


@media (max-width: 400px) {
  .logo-overlay {
    display: none;
  }

  .banner-wrapper {
    max-height: 60px;
  }
}




@media (min-width: 992px) {
  .sidebar-sticky { position: sticky; top: 88px; }
}
.map-thumb-wrap { max-width: 100%; }
.map-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.map-actions a { text-decoration: none; }