/* ==========================================================================
   program-v2-overrides.css — Modern hero re-skin for program/view.php
   ----------------------------------------------------------------------------
   This is a CSS *overlay* on top of view.php's existing hero markup. It does
   NOT change any business logic — apply flow, payment_mod handling, category
   selectors, login state etc. all keep working exactly as before. We only
   restyle the visible classes (.bg-theme, .head-title, .info-program,
   .head-btns, .image_x, .applybtn) to match the v2 visual language used on
   /course/preview.php?id=N.

   Two hero variants are gated by a class on the <section>:
     .mc-hero-has-image  — split layout, image on right at native size
     .mc-hero-no-image   — full-width gradient hero, title block centered

   Theme: navy #0a294f, accent red #a72d38.
   ========================================================================== */

/* ---------- HERO — gradient + sizing ---------- */
section.bg-theme {
    background: linear-gradient(135deg, #0a294f 0%, #16447a 100%) !important;
    padding: 56px 0 64px !important;
    position: relative;
    overflow: hidden;
}
section.bg-theme.mc-hero-no-image {
    background: linear-gradient(135deg, #0a294f 0%, #16447a 50%, #a72d38 100%) !important;
    padding: 64px 0 72px !important;
}

/* When there's no image, let the title block expand to full width */
section.bg-theme.mc-hero-no-image .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ---------- TITLE typography ---------- */
.head-title h3 {
    color: #fff !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 18px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
section.bg-theme.mc-hero-no-image .head-title h3 {
    font-size: 48px !important;
    max-width: 900px;
}
@media (max-width: 900px) {
    .head-title h3 { font-size: 28px !important; }
    section.bg-theme.mc-hero-no-image .head-title h3 { font-size: 32px !important; }
}
@media (max-width: 480px) {
    .head-title h3 { font-size: 24px !important; }
    section.bg-theme.mc-hero-no-image .head-title h3 { font-size: 28px !important; }
}

/* The fee/location lines under the title */
.head-title p {
    color: #e0e6f0 !important;
    margin-bottom: 12px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}
.head-title span {
    color: #fff !important;
    font-weight: 600 !important;
    margin-right: 6px;
}
.head-title strong,
.head-title th p {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Application-fee table cells — flatten the table look */
.head-title tr,
.head-title th,
.head-title td {
    display: inline-block !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 8px 8px 0 !important;
    color: #e0e6f0 !important;
}

/* Category dropdown in the hero (PGP path) */
.head-title select.form-control,
.head-title select.form-control-sm {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    margin: 6px 0 10px !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.head-title select.form-control option,
.head-title select.form-control-sm option {
    background: #0a294f;
    color: #fff;
}
.head-title input[type="text"]#appFee {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    margin-left: 6px;
    width: 110px !important;
}
.fees-container {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    margin: 8px 0 12px !important;
}
.fees-container p {
    margin: 0 !important;
    color: #e0e6f0 !important;
}

/* ---------- SCHOOL CARD (.info-program) ---------- */
/* Per user feedback: keep the original card-with-divider layout for the
   institute logo + name. We only normalize text color so it reads on
   the navy hero background. */
.info-program > p {
    color: #fff !important;
}
.info-program .vl {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ---------- APPLY CTA ---------- */
.head-btns {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    margin-top: 6px;
}
.head-btns .applybtn,
.head-btns .btn-primary,
.head-btns a > button.btn-primary,
.head-btns button.btn-primary {
    background: #a72d38 !important;
    border: 0 !important;
    color: #fff !important;
    padding: 12px 26px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(167, 45, 56, 0.35) !important;
    transition: background 0.15s, transform 0.05s, box-shadow 0.15s !important;
    text-decoration: none !important;
}
.head-btns .applybtn:hover,
.head-btns .btn-primary:hover,
.head-btns a > button.btn-primary:hover,
.head-btns button.btn-primary:hover {
    background: #c63341 !important;
    box-shadow: 0 6px 18px rgba(167, 45, 56, 0.45) !important;
}
.head-btns .applybtn:active,
.head-btns .btn-primary:active {
    transform: translateY(1px);
}

/* WhatsApp button — keep its green but tune the look to match */
.head-btns .whats-app {
    background-color: #128C7E !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(18, 140, 126, 0.35) !important;
    padding: 12px 16px !important;
}
.head-btns .whats-app:hover {
    background-color: #0e6e63 !important;
}

/* Download Brochure (secondary CTA) */
.head-btns .downbr {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: none !important;
}
.head-btns .downbr:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

/* ---------- RIGHT COLUMN — image card ---------- */
.image_x {
    margin-top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.course-single-img {
    width: 100%;
    margin: 0 !important;
}
.course-single-img img {
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
    height: auto !important;
    display: block;
}
@media (max-width: 900px) {
    .image_x { margin-top: 24px !important; }
    .course-single-img img { max-width: 480px; margin: 0 auto; }
}

/* ---------- BODY CARDS — wrap content in clean white cards ---------- */
/* Per user feedback: the course preview "About this course" white card
   with subtle border looks better; bring the same treatment to the
   program detail page.
   Two containers get the card treatment:
     #tabContent       — AJAX-loaded tab content (Course Outline, FAQ, etc.)
     .mc-program-body  — server-rendered "global" tab content shown on
                         initial page load (the long Background/Why/etc.
                         description echoed by view.php). */
#tabContent,
.mc-program-body {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(10, 41, 79, 0.04);
    padding: 32px 36px;
    margin-top: 8px;
    margin-bottom: 28px;
    color: #3a424d;
    max-width: 100%;
}
/* When .mc-program-body is also Bootstrap's .container, override the
   container's centered max-width so we use the full available width */
.mc-program-body.container {
    max-width: 100%;
}
/* Suppress nested float/transparent backgrounds inside */
#tabContent > div,
#tabContent > section,
.mc-program-body > div,
.mc-program-body > section {
    background: transparent !important;
}
/* Hide #tabContent entirely when it's empty (initial page load before
   any tab click) so we don't show an empty white card.
   :empty doesn't match whitespace, so use :not(:has(*)):not(:has-text)
   workaround: always show but only paint card when content is present. */
#tabContent:empty,
#tabContent:not(:has(*)) {
    display: none !important;
}
/* Belt-and-suspenders: a tabContent that has only whitespace text nodes
   gets no paint either (works in browsers without :has support too) */
#tabContent {
    min-height: 0;
}
/* Scope typography refinements so injected/echoed HTML reads cleanly */
#tabContent h1, #tabContent h2, #tabContent h3, #tabContent h4,
.mc-program-body h1, .mc-program-body h2, .mc-program-body h3, .mc-program-body h4 {
    color: #0a294f;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 28px;
}
#tabContent h1:first-child, #tabContent h2:first-child, #tabContent h3:first-child, #tabContent h4:first-child,
.mc-program-body h1:first-child, .mc-program-body h2:first-child, .mc-program-body h3:first-child, .mc-program-body h4:first-child {
    margin-top: 0;
}
#tabContent p, #tabContent li,
.mc-program-body p, .mc-program-body li {
    color: #3a424d;
    line-height: 1.7;
    font-size: 15px;
}
#tabContent ul li::marker,
.mc-program-body ul li::marker { color: #a72d38; }
#tabContent strong,
.mc-program-body strong { color: #1a2433; }
#tabContent a,
.mc-program-body a { color: #a72d38; }

@media (max-width: 900px) {
    #tabContent,
    .mc-program-body { padding: 22px 22px; border-radius: 10px; }
}

/* ---------- "Need Help" strip — style it cleaner ---------- */
.shortquote1 {
    background: rgba(167, 45, 56, 0.92) !important;
    padding: 10px 0 !important;
    margin: 0 !important;
}
.shortquote1 .info p {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    letter-spacing: 0.2px;
}