/**
 * Modern UI enhancement layer for the online-test front theme — loaded
 * after style.css, additive only. Re-styles existing selectors
 * (.card-product-item, .filter-card, .hero-h6, buttons) rather than
 * introducing new markup, so one file lifts every page that shares this
 * theme (books, subject, chapter, details, models, previous, student_form,
 * verify) with no risk to Bootstrap JS or the pagination/filter click
 * handlers, since none of their functional markup/attributes are touched.
 */

/* Same double-colon typo present in the sibling copy of this design system
   on selinapublishers.in's static/home/new/css/style.css — silently
   dropped by the browser, so .btn-outline-primary never got its coral
   hover fill and fell back to Bootstrap's default blue. */
.btn-outline-primary {
    color: #EF634C;
}
.btn-outline-primary:hover {
    background-color: #EF634C;
    color: white;
}
.btn-primary-dark:hover {
    background-color: #f88f26;
}

/* ---- Hero eyebrow label ("Unlocking Success", "Exploring knowledge") ---- */
.hero-h6 {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    letter-spacing: .6px;
}
.hero-h1, .hero-h1-publication { letter-spacing: -1px !important; }

/* Hero photo, boxed — matching the .com/.in homepages' framed-card look.
   Those homepages' hero photos are ordinary rectangular studio shots, so a
   drop-shadow filter alone was enough to read as "boxed". These hero
   images (publication-hero-image.png, solved-paper-hero-img.png) are
   transparent-background cutouts instead — a drop-shadow on a cutout just
   shadows the silhouette, no box. So here the box is real: a white card
   with padding, not a filter trick. This also replaces the old
   position:absolute "breakout bleed" (a fixed max-height taller than its
   own hero section, confirmed via screenshot to overlap the tab row
   underneath) with normal contained flow, so no overlap is possible
   regardless of image/section height. */
/* No more boxed card — back to the cutout floating directly on the coral
   background, just with a real drop-shadow for depth (the container still
   keeps it contained/centered in normal flow, unlike the original
   position:absolute bleed bug this whole thing started from). */
.mu-hero-photo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 340px;
}
/* Without a width cap, these wide cutouts (arms/feet spread) stretched to
   fill the box's full inner width, leaving them nearly touching the side
   walls — confirmed via screenshot: shoes right at the box edges, with a
   large empty gap above from the old bottom-anchored alignment. Capping
   width forces height to become the binding constraint instead, so the
   image actually respects the box's padding on every side. */
.hero-img-others, .hero-img-others-publication {
    max-width: 92% !important;
    /* Was a heavy black shadow, tuned for the coral background — softened
       to the same navy-tinted shadow the homepage hero image uses now
       that this sits on white. */
    filter: drop-shadow(0 20px 40px rgba(8, 17, 88, .18));
}
/* .hero-section-others/-publication use a FIXED height (613px/600px) from
   the original stylesheet — fine for a bare absolutely-positioned bleed
   image (which ignores document flow entirely), but the new boxed image
   is real in-flow content. A fixed height can't grow to fit it, so it was
   overflowing past the coral background and covering the tab row/content
   below (confirmed via screenshot). min-height + auto lets the section
   grow to whatever its content actually needs instead of clipping. */
.hero-section-others, .hero-section-others-publication {
    height: auto !important;
    min-height: 360px;
    padding: 32px 0;
    /* solved_papers_bg_top.png is one flat 1366x650 image with the coral
       fill AND all the decorative +/%/flask/book icons baked directly in
       (not separate elements — confirmed by opening the file directly) —
       rendered at native size from the top-left by default. Shrinking the
       section's height crops further down into that fixed layout, which
       is what pulled the "+" icon (originally sitting in dead space below
       a taller, ~600px-tall hero) up into the heading text. cover +
       right-anchored positioning crops the problematic left-side cluster
       out of view instead, while still keeping the coral fill and some
       texture on the right, closer to the photo. */
}
/* The cover/position tweak above didn't actually solve it: this container
   is wider (in aspect ratio) than the 1366x650 image, so background-size:
   cover anchors by width with zero horizontal slack left for "right"
   positioning to shift into — confirmed still colliding via screenshot.
   Rather than keep guessing at pixel offsets on a fixed decorative image,
   a solid coral wash behind just the text column guarantees the pattern
   underneath is never visible there, regardless of exactly where it
   lands — the photo-side column still shows the pattern/texture. */
.publication-top-section > div:first-child,
.hero-section-others .row > div:first-child {
    position: relative;
    z-index: 1;
}
.publication-top-section > div:first-child::before,
.hero-section-others .row > div:first-child::before {
    content: none;
}

/* ---- Hero, unified with the .com/.in homepage look ----
   These 3 pages (publications, model-test-papers, previous-year-solved-
   papers) were the one place still on the pre-redesign look: a solid
   coral banner (solved_papers_bg_top.png, reused under both
   .solved-papers-bg and .hero-section-others-publication) with white
   heading text and a plain text eyebrow — a visibly different site from
   the light, airy homepage hero right before it in the nav. The coral
   wash box above (originally added just to hide that background image
   behind the text column) is switched off since there's no longer a
   background to hide. Dropping the photo background and reusing the
   homepage's own palette (navy heading, orange eyebrow pill, orange
   radial glow behind the hero image) makes these read as the same
   product instead of a jump to an older theme. */
/* A flat #FFFFFF hero sitting directly above the ("Discover Our Range" /
   filter-card) content below it — also flat white — left the two bands
   with no visible seam at all. The same soft warm gradient already used
   for the .com/.in homepages' "Ebook Catalog" panel gives the hero its
   own identity as a band, without needing a hard divider line. */
.hero-section-others, .hero-section-others-publication, .solved-papers-bg {
    background: linear-gradient(180deg, #FFF9F3 0%, #FFFFFF 100%) !important;
}
.hero-h6 {
    display: inline-block;
    color: #B85C0A;
    background: rgba(248, 143, 38, .14);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 4px;
}
.hero-h1, .hero-h1-publication {
    color: #081158 !important;
}
/* The underline decoration (bottom-hero-dark-decore.svg) is a single flat
   brush-stroke image stretched across the full heading width — plain,
   and on multi-line headings (confirmed on /publications) it renders
   below BOTH lines instead of hugging the actual last line of text,
   looking like a stray mark rather than an intentional accent. Replacing
   it with a short CSS-drawn gradient bar (the same orange->coral gradient
   used on the divider bands elsewhere) reads as a deliberate brand accent
   instead of leftover clip-art, and never misaligns with the text since
   it isn't tied to line length. */
.bottom-svg-dark::after {
    content: "";
    display: block;
    width: 84px;
    height: 6px;
    margin-top: 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, #F88F26 0%, #EF634C 100%);
}
.end-decore::after { margin-left: 0; }
/* .mpub-t-10 (64px) / .mt-10 (90px) are utility classes applied directly on
   these hero sections' outer div (only use anywhere in the app — checked),
   likely leftover spacing meant for an old fixed/sticky navbar that no
   longer applies here. They stacked on top of the section's own padding,
   producing a large dead-white gap between the navbar and the coral
   background (confirmed via measured layout: 64px margin + 32px padding
   before any hero content even started). */
.mpub-t-10, .hero-section-others.mt-10 {
    margin-top: 0 !important;
}
/* .solved-papers-top-header (models/previous' actual hero row — a
   different class from .publication-top-section, easy to miss) had its
   own independent height:80vh — 80% of the viewport, not the section's
   content. That's what kept these two pages much taller than
   /publications even after the outer section height was fixed. */
.solved-papers-top-header {
    height: auto !important;
    min-height: 280px;
}
.publication-top-section { height: auto !important; min-height: 280px; }
.hero-img-others, .hero-img-others-publication {
    max-height: 280px;
    width: auto;
    max-width: 100%;
    position: static;
}
.publication-top-section .col-md-5, .row.publication-top-section > div:last-child,
.hero-section-others .row > div:last-child {
    position: relative;
    display: flex;
    align-items: center;
}
.publication-top-section .col-md-5::before,
.hero-section-others .row > div:last-child::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    /* Was a white glow, tuned for the coral background this sat on — on
       the new white hero background that glow was simply invisible.
       Matches the homepage hero image's own accent glow instead. */
    background: radial-gradient(circle, rgba(248, 143, 38, .3), transparent 70%);
    top: 15%;
    left: 15%;
    filter: blur(20px);
    z-index: 0;
    pointer-events: none;
}
.mu-hero-photo-box { position: relative; z-index: 1; }

/* ---- Filter/subject cards — real elevation + hover motion ---- */
.filter-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    box-shadow: 0 6px 18px rgba(37, 177, 221, .08);
    background: linear-gradient(160deg, #F3F4FF 0%, #FFFFFF 100%) !important;
}
/* Soft gradients instead of the original flat single-tint backgrounds —
   matching the split-hero card language (the reference for "make it look
   like this everywhere"). Each subject keeps its own base tint, just no
   longer flat. */
.filter-card.chemistry { background: linear-gradient(160deg, #FFF7F2 0%, #FFFFFF 100%) !important; }
.filter-card.biology { background: linear-gradient(160deg, #E8FFF9 0%, #FFFFFF 100%) !important; }
.filter-card.mathematics { background: linear-gradient(160deg, #EDFBFF 0%, #FFFFFF 100%) !important; }
.filter-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(37, 177, 221, .22);
    border-color: #747EF0;
}
.filter-card .course-icon {
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.filter-card:hover .course-icon { transform: scale(1.12) rotate(-4deg); }

/* ---- Product/book cards — elevation, image zoom, richer hierarchy ---- */
.card-product-item {
    box-shadow: 0 6px 20px rgba(8, 17, 88, .06);
    transition: transform .25s ease, box-shadow .25s ease;
    border: 1px solid rgba(8, 17, 88, .04);
    overflow: hidden;
}
.card-product-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(239, 99, 76, .16);
}
.card-product-item .card-img {
    overflow: hidden;
    border-radius: 8px;
}
.card-product-item .card-img img {
    transition: transform .35s ease;
}
.card-product-item:hover .card-img img { transform: scale(1.06); }
.card-product-item .price-discounted {
    display: inline-block;
    background: rgba(248, 143, 38, .12);
    color: #B85C0A !important;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 1.1rem !important;
}
.card-product-item .isbn { color: #9CA3AF; font-weight: 400; font-size: 12px; }
.card-product-item .std {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px !important;
    color: #7C3AED;
    font-weight: 600;
    background: rgba(124, 58, 237, .08);
    padding: 3px 12px;
    border-radius: 999px;
}

/* ---- Model/Previous Paper list cards — shadow, lift, subject accent ---- */
.item-card {
    box-shadow: 0 4px 14px rgba(8, 17, 88, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-left-color .25s ease;
    border-left: 4px solid transparent;
}
.item-card:hover {
    transform: translateY(-4px) translateX(2px);
    box-shadow: 0 14px 30px rgba(8, 17, 88, .14);
    border-left-color: #747EF0;
}
.item-card .icon {
    transition: transform .25s ease;
    border-radius: 50%;
    background: rgba(239, 99, 76, .1);
    padding: 6px;
}
.item-card:hover .icon { transform: scale(1.15); background: rgba(239, 99, 76, .2); }

/* Labeled download button — was a bare icon with no text, low affordance. */
.mu-download-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
}
.mu-download-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #EF634C;
    text-transform: uppercase;
}

/* ---- Test-flow pages (subject/chapter/student verify/details) — these
   are simple functional forms, not catalog pages, so a lighter touch:
   real card depth + a proper focus ring instead of illustrated icons. ---- */
.contact-card {
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(8, 17, 88, .1);
    padding: 28px !important;
}
/* The side banner image (student_form/subject/etc.) had no width/height
   constraint at all — just a bare <img>, so it rendered at whatever size
   the source file happened to be inside a flex-stretched column, instead
   of actually filling it. That's what produced the lopsided "huge photo,
   cramped form" layout confirmed via screenshot. */
.contact-card .col-md-5 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    max-height: 460px;
}
.contact-card .col-md-7 { padding: 24px 32px; }
.form-control {
    border-radius: 12px !important;
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus {
    border-color: #EF634C !important;
    box-shadow: 0 0 0 4px rgba(239, 99, 76, .12) !important;
}

/* ---- Test-flow step indicator (Register -> Verify -> Details -> Subject
   -> Chapters) — real UX value, not just decoration: previously nothing on
   these 5 pages told a student how many steps remained. Order confirmed
   from StudentController's actual redirect chain, not guessed from route
   file order (which doesn't match execution order here). ---- */
.mu-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 780px;
    margin: 32px auto 0;
    flex-wrap: wrap;
    padding: 0 16px;
}
.mu-step { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; }
.mu-step-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    background: #fff;
    border: 2px solid #E5E7EB;
    color: #9CA3AF;
    transition: all .3s ease;
}
.mu-step-label { font-size: 12px; font-weight: 600; color: #9CA3AF; white-space: nowrap; }
.mu-step.done .mu-step-circle { background: #EF634C; border-color: #EF634C; color: #fff; }
.mu-step.done .mu-step-label { color: #081158; }
.mu-step.active .mu-step-circle { background: #081158; border-color: #081158; color: #fff; box-shadow: 0 0 0 6px rgba(8, 17, 88, .12); }
.mu-step.active .mu-step-label { color: #081158; font-weight: 700; }
.mu-step-line { flex: 1; height: 2px; background: #E5E7EB; min-width: 20px; margin: 18px -2px 0; transition: background .3s ease; }
.mu-step-line.done { background: #EF634C; }
@media (max-width: 576px) {
    .mu-step-label { display: none; }
    .mu-step-line { min-width: 10px; }
}

/* ---- Buttons — consistent pill + lift, site-wide ---- */
.btn-primary, .btn-primary-dark {
    border-radius: 12px !important;
    transition: transform .2s, box-shadow .2s;
}
.btn-primary:hover, .btn-primary-dark:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(239, 99, 76, .3);
}

@media (max-width: 576px) {
    .filter-card:hover, .card-product-item:hover { transform: none; }
}

/* ---- Navbar — same upgrades already shipped on the .com/.in sites:
   hover/active states (this app's copy had neither), sticky positioning
   with a scroll-triggered shadow (.mu-navbar-scrolled, toggled by the
   inline script each of this app's pages carries at the bottom), and
   rounded bottom corners so the floating bar reads as deliberate rather
   than a plain rectangle. ---- */
.navbar-light .navbar-nav .nav-link {
    transition: color .2s ease;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active {
    color: #F88F26 !important;
}
/* The current-page marker in this app's blade files is actually
   `<li class="nav-item active">`, not `.nav-link.active` on the anchor
   itself (confirmed in books/models/previous/subject/chapter.blade.php)
   — the rule above never matched anything here, so the active page
   never highlighted despite the markup correctly identifying it. */
.navbar-light .navbar-nav .nav-item.active .nav-link {
    color: #F88F26 !important;
}
.navbar-container {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    padding-top: 14px;
    padding-bottom: 10px;
    border-radius: 0 0 20px 20px;
    transition: box-shadow .25s ease, padding .25s ease;
}
.navbar-container.mu-navbar-scrolled {
    padding-top: 8px;
    padding-bottom: 6px;
    box-shadow: 0 8px 30px rgba(8, 17, 88, .1);
}

/* ---- Footer — matching the .com/.in redesign: tinted rounded-top band,
   link hover motion, gradient copyright bar. .pby-5 had the exact same
   bug found on both sibling sites — only ever defined padding-bottom
   (the "pb" in its name), so the logo/heading sat flush against the
   footer's own top edge. ---- */
.pby-5 {
    padding-top: 3rem;
}
footer {
    background: linear-gradient(180deg, #FAF7F4 0%, #FFF9F3 100%);
    border-radius: 40px 40px 0 0;
    padding-top: 56px;
}
footer h5.text-primary {
    font-weight: 800 !important;
    letter-spacing: -.3px;
}
footer h6 {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #B85C0A;
}
footer li a {
    display: inline-block;
    transition: color .2s ease, transform .2s ease;
}
footer li a:hover {
    color: #EF634C;
    transform: translateX(3px);
}
.copyright.bg-primary {
    background: linear-gradient(135deg, #F88F26 0%, #EF634C 100%) !important;
}
@media (max-width: 576px) {
    footer { padding-top: 36px; border-radius: 28px 28px 0 0; }
}