/* Hand-written additions to the generated site.css (things Angular did at runtime). */
.site-body { background: #fff; color: #0A0A0A; }
.site-body #site-main { min-height: 60vh; }

/* Brand button colours (Bootstrap is loaded from the CDN, so the SCSS $primary override is lost) */
.site-body .btn-primary { --bs-btn-bg: #FFD93D; --bs-btn-border-color: #FFD93D; --bs-btn-color: #0A0A0A;
    --bs-btn-hover-bg: #f2c900; --bs-btn-hover-border-color: #f2c900; --bs-btn-hover-color: #0A0A0A;
    --bs-btn-active-bg: #e6bd00; --bs-btn-active-border-color: #e6bd00; --bs-btn-active-color: #0A0A0A; }
.site-body .btn-primary .text-white { color: #0A0A0A !important; }
.site-body .text-primary { color: #1BAC20 !important; }
.site-body .bg-primary { background-color: #FFD93D !important; }
.site-body .page-item.active .page-link { background-color: #FFD93D; border-color: #FFD93D; color: #0A0A0A; }
.site-body .page-link { color: #1BAC20; }
.site-body .form-control:focus, .site-body .form-select:focus { border-color: #FFD93D; box-shadow: 0 0 0 .25rem rgba(255, 217, 61, .35); }

/* top filter dropdown menus */
.v-top-filter [data-filter-menu] { z-index: 1050; top: 100%; left: 0; }
.v-top-filter [data-filter-option] { cursor: pointer; }
.v-top-filter [data-filter-option]:hover { background: #FFF0C5; }
.v-top-filter #filter_box .row > .col { min-width: 140px; margin-bottom: .5rem; }

/* hero section cards are links now */
.v-home-intro #categories .box { color: #0A0A0A; }

/* slick arrows on light backgrounds */
.site-body .slick-prev:before, .site-body .slick-next:before { color: #0A0A0A; }
.site-body .slick-slide { padding: 0 .5rem; }
.site-body .slick-dots li button:before { font-size: 10px; }

/* footer icon links */
.v-footer footer .list-inline-item a i { font-size: 1.25rem; }

/* ticket cards */
.site-body span.badge.badge-primary { background: #cda979; color: #0A0A0A; }

/* ---- Responsive fixes (the beta markup sticks out sideways on phones) ----
   Bootstrap rows have negative side margins that only work inside a padded
   container or column. The design zeroes that padding in several places
   (.container-fluid{padding:0}, .spacer*{padding:1em 0}) and also puts rows
   straight inside full-width wrappers, so those rows poke 12px past the
   screen edge and the page scrolls sideways (left in Arabic). */

/* rows inside full-width wrappers or directly inside another row */
.site-body #main > .row,
.site-body .container-fluid > .row,
.site-body .v-ask-doctor > .row,
.site-body .row > .row { margin-left: 0; margin-right: 0; }

/* a card placed straight in a row gets width:100% from .row>* plus its own
   margin; let it shrink to fit the line instead */
.site-body .row > .card { flex-shrink: 1; }

/* the image captcha is 345px wide */
.site-body [data-captcha-image] { max-width: 100%; min-width: 0; }
.site-body [data-captcha-image] img { max-width: 100%; height: auto; }

@media (max-width: 575.98px) {
    /* .spacer* set padding:1em 0, which removes a full-width container's side padding */
    .site-body .container.spacer,
    .site-body .container.spacer-sm,
    .site-body .container.spacer-xsm,
    .site-body .container.spacer-lg { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); }
}

/* The home hero's card style (.v-home-intro .box: fixed 135px height, yellow on hover)
   was scoped to the hero component in Angular; here it also hits the search form's
   inner ".container.box", which then clips its fields (they spill over the next
   section on phones) and turns yellow on hover. */
.site-body .v-home-intro .v-top-filter .box { height: auto; cursor: auto; }
.site-body .v-home-intro .v-top-filter .box:hover { background: #fff; }
@media (max-width: 767.98px) {
    .site-body .v-home-intro .v-top-filter .box { margin: 0; padding: 0; box-shadow: none; }
    .site-body .v-home-intro #filter_box { padding: 12px; }
}

/* home hero section cards: five equal cards (3 + 2, centred) instead of 2 wide + 3 squeezed */
@media (max-width: 575.98px) {
    .site-body .v-home-intro #categories { justify-content: center; margin-left: 0; margin-right: 0; }
    .site-body .v-home-intro #categories > .col { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 4px; }
    .site-body .v-home-intro #categories .box { margin: .5em 0; padding: 18px 4px; height: 120px; }
    .site-body .v-home-intro #categories .box img { height: 48px; width: auto; }
    .site-body .v-home-intro #categories .box p { margin-top: .6em; font-size: .9rem; }
}

/* "no data" illustrations are up to 300px tall; keep them modest on phones */
@media (max-width: 575.98px) {
    .site-body img[src*="no_data"] { max-width: 180px; height: auto; }
}

/* Phone menu: the design forces the collapsed nav into one centred row (max-width:620px),
   which runs the links together. Stack them as full-width rows instead. */
@media (max-width: 991.98px) {
    .site-body .v-header .navbar-collapse { padding: .5rem 0 1rem; }
    .site-body .v-header .navbar-collapse .navbar-nav { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin: 0 0 .75rem; }
    .site-body .v-header .navbar-collapse .nav-link { padding: .65rem .25rem; border-bottom: 1px solid #eee; }
    .site-body .v-header .navbar-collapse .dropdown-menu { border: 0; box-shadow: none; padding: 0 1rem; background: #fafafa; }
    .site-body .v-header .navbar-collapse .dropdown-item { padding: .55rem .5rem; }
    .site-body .v-header .navbar-collapse > .d-flex,
    .site-body .v-header .navbar-collapse > .d-flex > .dropdown,
    .site-body .v-header .navbar-collapse > .d-flex .btn { width: 100%; }
}