/* Medicine, disease, body part and specialist consultation pages of the new design.
   Complements the compiled component styles in site.css (.v-medicines-list, .v-filter,
   .v-medicine-details, .v-diseases, .v-disease-details, .v-body-parts, .v-body-part-details, .v-sidebar). */

/* ---------- search hero (beta find-medicines-header / diseases header / body-parts header) ---------- */
.v-med-hero .top-box { width: 100%; padding-block: 24px 48px; background: #FBFFF0 url('/assets/new/images/BgHeaderImage.png') center / cover no-repeat; }
.v-med-hero .back { display: inline-block; }
.v-med-hero .heading-box { max-width: 780px; margin: 0 auto; }
.v-med-hero .hero-title { font-weight: 600; font-size: 32px; line-height: 1.4; color: #0A0A0A; margin: .5rem 0; }
.v-med-hero .hero-text { color: #737373; margin-bottom: 0; }
.v-med-hero .search { display: flex; align-items: center; gap: 12px; margin-top: 1.5rem; padding: 16px 20px; background: #fff; border-radius: 8px; box-shadow: 2px 2px 5px 2px #D4D4D433; }
.v-med-hero .search-box { flex: 1; display: flex; align-items: center; gap: 8px; padding-inline: 10px; background: #dfdddd75; border-radius: 5px; cursor: text; }
.v-med-hero .search-box img { flex: none; }
.v-med-hero .search-box input { flex: 1; min-width: 0; height: 44px; border: none; outline: none; background: transparent; font-size: 14px; }
.v-med-hero .search .btn { min-width: 110px; height: 44px; font-weight: 600; }

/* ---------- link bar / breadcrumb ---------- */
.v-med-breadcrumb { padding-block: 1rem .25rem; }
.v-med-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.v-med-breadcrumb li { display: inline-flex; align-items: center; gap: .35rem; }
.v-med-breadcrumb .link-bar { font-size: 16px; color: #737373; }
.v-med-breadcrumb .link-bar:hover { color: #1BAC20; }
.v-med-breadcrumb .bi { font-size: 12px; color: #737373; }
.v-med-breadcrumb .link-current { font-size: 16px; font-weight: 500; color: #0A0A0A; }

/* ---------- medicines listing ---------- */
.v-medicines-list .item-row { justify-content: flex-start; gap: 1.5%; padding-top: 1rem; }
.v-medicines-list .cardBox { width: 32.3%; margin: 0 0 1rem; padding: 14px; background: #fff; transition: box-shadow .2s; }
.v-medicines-list .cardBox:hover { box-shadow: 5px 8px 40px 0 #23170F1A; }
.v-medicines-list .imageLink { margin-bottom: .75rem; }
.v-medicines-list .imageLink img { object-fit: contain; max-width: 100%; }
.v-medicines-list .cardBox .card-name { font-size: 17px; font-weight: 600; line-height: 1.5; margin: 0 0 .25rem; }
.v-medicines-list .cardBox .card-name a { margin: 0 !important; color: #0A0A0A; font-size: inherit; font-weight: inherit; }
.v-medicines-list .cardBox .card-name a:hover { color: #1BAC20; }
.v-medicines-list .cardBox .card-excerpt { font-weight: 400; font-size: 14px; color: #737373; margin: 0 0 .5rem !important; }
.v-medicines-list .card-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; padding: 0; margin: 0 0 .5rem; font-size: 14px; color: #0A0A0A; }
.v-medicines-list .card-meta .bi { color: #cda979; }
.v-medicines-list .cardBox .card-categories { font-weight: 400; font-size: 13px; margin: 0 0 .5rem !important; }
.v-medicines-list .cardBox .card-categories a { margin: 0 !important; color: #1BAC20; font-size: 13px; }
.v-medicines-list .cardBox .see-details { margin: 0 !important; }
.v-medicines-list .results-heading { font-weight: 600; font-size: 18px; margin: 1rem 0 0; }
.v-medicines-list .not-found-box p { margin: 0; }
.v-medicines .v-tags .tags-row { margin-top: 1rem; }
.v-tags .tags-row li a { color: #111; }
.v-medicines-list .med-pagination .pagination { flex-wrap: wrap; justify-content: center; }
.v-medicines-list .med-faq { width: 100%; margin-top: 2rem; }
.v-medicines-list .med-faq .faqHeading { font-size: 22px; font-weight: 600; margin: .5rem 0 1rem; }
.v-medicines-list .med-faq .accordion-button { font-weight: 600; }
.v-medicines-list .med-faq .accordion-button:not(.collapsed) { background: #FBFFF0; color: #0A0A0A; box-shadow: none; }

/* filter box: options are links */
.v-filter .filter-box { margin-top: 1rem; }
.v-filter .filter-heading-box { height: auto; padding-top: .5rem; }
.v-filter .filter-heading-box .reset-link { font-size: 14px; color: #777; }
.v-filter .accordion-header { padding: 10px 0; color: #111; text-align: start; }
.v-filter .accordion-content { padding: 0 0 10px; }
.v-filter .filter-options-category { max-height: 340px; overflow-y: auto; padding-inline-end: 6px; }
.v-filter a.filter-option { gap: 10px; color: inherit; text-decoration: none; }
.v-filter a.filter-option:hover span:first-child, .v-filter a.filter-option[aria-current] span:first-child { color: #0A0A0A; }
.v-filter a.filter-option .checkbox-container { flex: none; width: 25px; height: 25px; padding: 0; margin: 0; }
.v-filter .checkmark.is-checked { background-color: green; }
.v-filter .checkmark.is-checked:after { display: block; }
.v-filter .checkbox-container .checkmark:after { content: ""; position: absolute; left: 9px; top: 5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.v-filter .checkmark:not(.is-checked):after { display: none; }
[dir="rtl"] .v-filter .checkmark { left: auto; right: 0; }

/* ---------- direct access banner ---------- */
.v-med-direct-access #direct_access { background: #288A8B; color: #fff; padding: 40px 24px; margin: 2rem 0; border: none; border-radius: 12px; }
.v-med-direct-access #direct_access h2 { font-weight: 700; font-size: 26px; }
.v-med-direct-access #direct_access img { max-height: 260px; }

/* ---------- medicine details ---------- */
.v-medicine-details .headingBox { gap: 12px; flex-wrap: wrap; padding-block: 10px; }
.v-medicine-details .headingBox h1 { font-weight: 700; font-size: 36px; line-height: 1.3; color: #0A0A0A; margin: 0; }
.med-speak { background: transparent; border: none; padding: 0; line-height: 1; }
.med-speak img { width: 25px; height: 25px; }
.v-medicine-details .subtitleBox { margin-bottom: .5rem; }
.v-medicine-details .subtitleBox .sep { color: #D4D4D4; margin-inline: .25rem; }
.v-medicine-details .card-box, .v-disease-details .card-box, .v-body-part-details .card-box { width: 100%; padding: 16px 20px; background: #fff; }
.v-medicine-details .card-box h2, .v-disease-details .card-box h2 { font-weight: 600; font-size: 24px; color: #0A0A0A; }
.v-medicine-details .med-facts td { width: 50%; vertical-align: top; }
.v-medicine-details .med-facts td p { margin: 0; font-size: 16px; }
.v-medicine-details .med-facts td p.value { color: #111; }
.v-medicine-details .navList, .v-disease-details .navList { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: .5rem 1.75rem; }
.v-medicine-details .navList a, .v-disease-details .navList a { color: #111; }
.v-medicine-details .navList a:hover, .v-disease-details .navList a:hover { color: #1BAC20; }
.v-medicine-details section, .v-disease-details section { scroll-margin-top: 90px; }
.v-medicine-details .rich-text, .v-disease-details .rich-text { color: #737373; font-size: 17px; line-height: 1.6; }
.v-medicine-details .rich-text p, .v-disease-details .rich-text p { font-size: inherit; }
.v-medicine-details .rich-text img, .v-disease-details .rich-text img { max-width: 100%; height: auto; }
.med-dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.med-dl dt { font-weight: 600; color: #0A0A0A; }
.med-dl dd { margin: 0; color: #737373; }
.v-medicine-details .med-disclaimer { margin-top: 1.5rem; font-size: 15px; }
.v-medicine-details .img-box { width: 100%; justify-content: center; align-items: center; min-height: 190px; }
.med-image { width: 150px; height: 150px; object-fit: contain; }
.v-medicine-details .related-box { width: 100%; }
.v-medicine-details .related-box hr { margin: .5rem 0; }
.v-medicine-details .booking-card { justify-content: flex-start; gap: .5rem; color: inherit; text-decoration: none; }
.v-medicine-details .booking-card:hover .booking-content p { text-decoration: underline; }
.v-medicine-details .booking-img img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; border: 1px solid #eee; }
.v-medicine-details .booking-content { margin: 0; }
.v-medicine-details .booking-content p { font-size: 16px; }
.v-sidebar { margin-top: 1rem; }
.v-sidebar > .row { margin-inline: 0; }
.v-sidebar .card { margin-inline: 0; }

/* ---------- diseases ---------- */
.v-diseases .letters { display: flex; flex-wrap: wrap; justify-content: center; padding-block: 24px 8px; }
.v-diseases .alphabet { width: auto; min-width: 46px; margin-inline: 5px; cursor: pointer; }
.v-diseases .alphabet.active { width: auto; min-width: 68px; }
.v-diseases .alphabet:disabled { opacity: .45; cursor: default; }
.v-diseases .item-row { padding-block: 10px 20px; }
.v-diseases .cardBox { width: 33%; margin-block: 1rem; padding-inline: 10px; }
.v-diseases .cardBox h2 { font-size: 28px; font-weight: 700; color: #0A0A0A; }
.v-diseases .cardBox ul li a { color: #737373; font-size: 18px; }
.v-diseases .cardBox ul li a:hover { color: #1BAC20; }
.v-diseases .not-found-text { font-size: 28px; padding-block: 2rem; }
.v-disease-details .heading-box { gap: 12px; flex-wrap: wrap; padding-block: 10px; }
.v-disease-details .heading-box h1 { font-weight: 700; font-size: 36px; line-height: 1.3; color: #0A0A0A; margin: 0; }
.v-disease-details .user-box { width: 100%; max-width: 800px; height: auto; max-height: 400px; object-fit: cover; }
.v-disease-details .chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.v-disease-details .chips a { display: inline-block; padding: 6px 16px; border-radius: 100px; background: #BCE9FB; color: #111; font-weight: 600; font-size: 14px; }
.v-disease-details .med-disclaimer { margin-top: 1.5rem; font-size: 15px; }

/* ---------- body parts ---------- */
.v-body-parts .parts-grid { padding-block: 1.5rem; }
.v-body-parts .box-card { width: 100%; margin: 0; height: 140px; gap: 12px; color: inherit; text-decoration: none; transition: box-shadow .2s; }
.v-body-parts a:hover .box-card { box-shadow: 5px 8px 40px 0 #23170F1A; }
.v-body-parts .box-card img { height: 110px; width: 130px; object-fit: cover; border-radius: 8px; flex: none; }
.v-body-parts .box-card p { width: auto; flex: 1; padding: 0; }
.v-body-parts .box-card small { display: block; color: #737373; font-weight: 400; }
.v-body-parts .box-card .bi { color: #737373; }
.v-body-part-details .heading { font-size: 36px; padding-block: 10px; }
.v-body-part-details .skull { margin-bottom: 1rem; box-shadow: 0 0 2px 0 rgba(135, 132, 135, 1); }
.v-body-part-details .skull-box { gap: 1rem; }
.v-body-part-details .skull-box img { width: 160px; height: 120px; object-fit: cover; border-radius: 8px; flex: none; }
.v-body-part-details .parts-list { list-style: none; padding: 0; margin: 0; }
.v-body-part-details .parts-list li { padding-block: .75rem; border-bottom: 1px solid #eee; }
.v-body-part-details .parts-list li:last-child { border-bottom: none; }
.v-body-part-details .parts-list h3 { font-size: 20px; font-weight: 600; margin: 0; }
.v-body-part-details .parts-list h3 a { color: #0A0A0A; }
.v-body-part-details .parts-list h3 a:hover { color: #1BAC20; }
.v-body-part-details .parts-list p { margin: .25rem 0 0; }
.v-body-part-details .chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.v-body-part-details .chips a { display: inline-block; padding: 6px 16px; border-radius: 100px; background: #BCE9FB; color: #111; font-weight: 600; font-size: 14px; }
.v-body-part-details a span, .v-body-part-details .v-sidebar span, .v-body-part-details .v-med-direct-access span { color: inherit; font-size: inherit; }
.v-body-part-details .description { padding: 0; }

/* ---------- specialist consultation ---------- */
.v-consultation #form { padding: 24px; background: #fff; border: 1px solid #D4D4D4; border-radius: 12px; }
.v-consultation label { font-weight: 600; margin-bottom: .35rem; }
.v-consultation .intro p { color: #737373; }
.v-consultation .privacy { color: #737373; font-size: 14px; }

/* ---------- small screens ---------- */
@media (max-width: 991.98px) {
    .v-medicines-list .cardBox { width: 49%; }
    .v-diseases .cardBox { width: 50%; }
    .v-medicine-details .headingBox h1, .v-disease-details .heading-box h1, .v-body-part-details .heading { font-size: 28px; }
}
@media (max-width: 575.98px) {
    .v-med-hero .hero-title { font-size: 24px; }
    .v-med-hero .search { flex-direction: column; align-items: stretch; padding: 12px; }
    .v-medicines-list .cardBox, .v-diseases .cardBox { width: 100%; }
    /* medicine card: small image beside the text instead of a full-width image */
    .v-medicines-list .cardBox > [itemprop="item"] { display: grid !important; grid-template-columns: 84px 1fr; column-gap: 12px; align-content: start; }
    .v-medicines-list .cardBox > [itemprop="item"] > * { grid-column: 2; }
    .v-medicines-list .cardBox .imageLink { grid-column: 1; grid-row: 1 / span 6; align-self: start; margin: 0; }
    .v-medicines-list .cardBox .imageLink img { width: 84px; height: auto; max-height: 104px; }
    .v-body-part-details .skull-box { flex-direction: column; align-items: stretch; }
    .v-body-part-details .skull-box img { width: 100%; height: 180px; object-fit: contain; background: #f7f7f7; }
    .v-body-part-details .description { padding-right: 0; }
    .v-body-parts .box-card img { width: 96px; height: 96px; }
    .v-med-direct-access #direct_access { padding: 24px 16px; }
    .med-dl { grid-template-columns: 1fr; }
}