/*
 * Exam page (exams-data/<exam>): filter panel, top bar and package cards.
 * Layout: a soft grey filter panel on the left (pill search, folding sections of checkboxes with counts) and the
 * packages on the right, under a bar with "We found N packages", a sort list and a Grid / List switch.
 * Grid view: cards with a coloured picture area on top (the year or number). List view: one slim row per package.
 * One colour per kind of package: previous papers blue, mock tests cyan, question bank green.
 * New class names (met-pk-*, met-fp-*, met-cb-*, met-vt), so the older met-pc-* styles still in the page are not touched.
 */
.met-pk-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.met-pk-results { min-width: 0; }

/* the page behind the filter panel and the cards is white (the page's own style gave it a pale blue-grey) */
.met-exam-page .met-exam-main { background: #ffffff; }

/* the font of vidyaera.com (Heebo, loaded in the page) for the whole filter and results area; buttons, lists and
   text boxes do not take the page font by themselves, so they are told to */
.met-pk-layout { font-family: 'Heebo', Inter, Arial, sans-serif; }
.met-pk-layout button, .met-pk-layout input, .met-pk-layout select, .met-pk-layout label { font-family: inherit; }

/* ---------------- filter panel ---------------- */
.met-pk-filters { position: sticky; top: 96px; padding: 24px; background: #f4f5f7; border-radius: 24px; }
.met-fp-search { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #e0e3e8; }
.met-pk-filters .met-search-input-wrap { position: relative; }
.met-pk-filters .met-search-input-wrap i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #5b6b80; font-size: 16px; pointer-events: none; }
.met-pk-filters .met-control { display: block; width: 100%; height: 54px; padding: 0 18px 0 48px; border: 1px solid #e3e6ea; border-radius: 999px; background: #fff; color: #0f172a; font-size: 16px; }
.met-pk-filters .met-control::placeholder { color: #9aa3b0; }
.met-pk-filters .met-control:focus { border-color: #f5b800; outline: 3px solid rgba(245, 184, 0, .25); }

.met-fp-group { margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid #e0e3e8; }
.met-fp-group:last-of-type { border-bottom: 0; }
.met-fp-head { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 6px 0 14px; border: 0; background: none; color: #0b2a4a; font-size: 20px; font-weight: 800; text-align: left; cursor: pointer; }
.met-fp-head i { font-size: 14px; transition: transform .2s ease; }
.met-fp-group.is-closed .met-fp-head i { transform: rotate(-90deg); }
.met-fp-group.is-closed .met-fp-items { display: none; }

.met-cb { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 0; color: #1f2937; font-size: 16px; cursor: pointer; }
.met-cb input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.met-cb-box { flex: 0 0 22px; width: 22px; height: 22px; border: 1.5px solid #c9ced6; border-radius: 4px; background: #fff; transition: background .15s ease, border-color .15s ease; }
.met-cb:hover .met-cb-box { border-color: #f5b800; }
.met-cb input:checked + .met-cb-box { background: #f5b800 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px no-repeat; border-color: #f5b800; }
.met-cb input:focus-visible + .met-cb-box { outline: 3px solid rgba(245, 184, 0, .45); outline-offset: 2px; }
.met-cb-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.met-cb-n { color: #5b6b80; font-size: 15px; }

.met-pk-filters .met-filter-status-bar { margin: 6px 0 0; padding: 0; border: 0; }
.met-pk-filters .met-filter-reset-link { margin: 0; font-size: 15px; }
.met-fp-toggle { display: none; }

/* ---------------- top bar ---------------- */
.met-pk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 22px; }
.met-pk-found { margin: 0; color: #0b2a4a; font-size: 19px; font-weight: 700; }
.met-pk-found strong { color: #f5b800; font-weight: 800; }
.met-pk-tools { display: flex; align-items: center; gap: 10px; }
.met-pk-toollabel { color: #0b2a4a; font-size: 16px; font-weight: 700; }
.met-pk-sort { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 0 0; }
.met-pk-sort select { height: 44px; padding: 0 34px 0 14px; border: 1px solid #e3e6ea; border-radius: 10px; background-color: #f4f5f7; color: #0b2a4a; font-size: 15px; font-weight: 700; cursor: pointer; }
.met-vt { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid #e3e6ea; border-radius: 8px; background: #fff; color: #b8bec8; font-size: 17px; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.met-vt:hover { border-color: #f5b800; }
.met-vt.is-on { border-color: #f5b800; color: #f5b800; }

/* ---------------- cards, shared ---------------- */
.met-pk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.met-pk { --k1: #075aa6; --k2: #0a4a8a; position: relative; display: block; background: #fff; border: 1px solid #dbe4ef; border-radius: 14px 26px 26px 14px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.met-pk:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, .12); }
.met-pk.kind-mock-tests { --k1: #0b87a5; --k2: #086b84; }
.met-pk.kind-question-bank { --k1: #0b8a64; --k2: #086f50; }

.met-pk-chip { display: none; }
.met-pk-title { margin: 0; color: #0f172a; font-size: 16px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.met-pk-title a { color: inherit; }
.met-pk-title a:hover { color: var(--k1); }
.met-pk-arrow { margin-left: 6px; color: #3d649a; font-size: .6em; vertical-align: .12em; transition: transform .15s ease; }   /* same blue as the top part */
.met-pk:hover .met-pk-arrow { transform: translateX(3px); }
.met-pk-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole card opens the package */
.met-pk-title a:focus-visible::after { outline: 3px solid #f5b800; outline-offset: -3px; border-radius: inherit; }
.met-pk-enrolled { color: #15803d; font-size: 13px; font-weight: 800; white-space: nowrap; }
.met-pk-lessons { display: inline-flex; align-items: center; gap: 8px; color: #5b6b80; font-size: 15px; font-weight: 500; white-space: nowrap; }
.met-pk-lessons i { color: #f5b800; }
.met-pk-flag { padding: 2px 9px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.met-pk-subjects { margin: 0; color: #64748b; font-size: 13px; font-weight: 600; }
.met-pk-price { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 13px; border-radius: 999px; background: #e8f2fc; color: #075aa6; font-size: 14px; font-weight: 900; white-space: nowrap; }
.met-pk-price s { color: #6b7280; font-size: 12px; font-weight: 600; }
.met-pk-price.is-free { background: #15803d; color: #fff; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; }
.met-pk-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.met-pk-titles { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.met-pk-act { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }

/* ---------------- list view: one slim row per package ---------------- */
/* same medium blue and bubbles as the grid, scaled down for the narrower block */
.met-view-list .met-pk-side {
    position: absolute; left: 0; top: 0; bottom: 0; width: 112px;
    background:
        radial-gradient(circle 26px at 7% 90%, rgba(120, 178, 248, .60) 0, rgba(120, 178, 248, .38) 55%, rgba(120, 178, 248, 0) 100%),
        radial-gradient(circle 28px at 66% 3%, rgba(206, 236, 156, .62) 0, rgba(206, 236, 156, .38) 55%, rgba(206, 236, 156, 0) 100%),
        radial-gradient(circle 30px at 26% -6%, rgba(244, 196, 128, .60) 0, rgba(244, 196, 128, .36) 55%, rgba(244, 196, 128, 0) 100%),
        radial-gradient(circle 24px at 92% 98%, rgba(130, 184, 250, .50) 0, rgba(130, 184, 250, 0) 100%),
        linear-gradient(135deg, #2f568a 0%, #4a73a6 100%);
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.met-view-list .met-pk-num { position: absolute; left: 0; right: 24px; top: 50%; margin-top: -14px; color: #fff; font-size: 27px; font-weight: 900; line-height: 1; text-align: center; letter-spacing: .01em; text-shadow: 0 2px 6px rgba(0, 0, 0, .22); }
.met-view-list .met-pk-body { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px 22px 14px 136px; }

/* ---------------- grid view: a picture area on top, then title and the button ---------------- */
.met-view-grid .met-pk-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.met-view-grid .met-pk { display: flex; flex-direction: column; height: 100%; border: 0; border-radius: 20px; box-shadow: 0 6px 20px rgba(15, 23, 42, .09); }
.met-view-grid .met-pk:hover { box-shadow: 0 16px 34px rgba(15, 23, 42, .16); }
/* the picture area: a medium blue (between the pale steel blue and the deep navy) with soft blurred bubbles.
   The bubbles sit at the edges and corners, away from the year in the middle, so the white year stays readable. */
.met-view-grid .met-pk-side {
    position: relative; flex: 0 0 auto; height: 150px; overflow: hidden;
    background:
        radial-gradient(circle 36px at 6% 78%, rgba(120, 178, 248, .60) 0, rgba(120, 178, 248, .38) 55%, rgba(120, 178, 248, 0) 100%),
        radial-gradient(circle 42px at 88% 8%, rgba(206, 236, 156, .62) 0, rgba(206, 236, 156, .38) 55%, rgba(206, 236, 156, 0) 100%),
        radial-gradient(circle 46px at 32% -4%, rgba(244, 196, 128, .60) 0, rgba(244, 196, 128, .36) 55%, rgba(244, 196, 128, 0) 100%),
        radial-gradient(circle 38px at 93% 90%, rgba(130, 184, 250, .50) 0, rgba(130, 184, 250, 0) 100%),
        linear-gradient(135deg, #2f568a 0%, #4a73a6 100%);
}
.met-view-grid .met-pk-chip { position: absolute; left: 16px; top: 16px; display: inline-block; max-width: calc(100% - 32px); padding: 6px 12px; border-radius: 8px; background: #fbbf24; color: #1b1b1b; font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.met-view-grid .met-pk-num { position: absolute; left: 0; right: 0; top: 54%; margin-top: -24px; color: #ffffff; font-size: 46px; font-weight: 900; line-height: 1; text-align: center; letter-spacing: .01em; }
/* "English + తెలుగు" under the number (EAPCET packages) */
.met-pk-lang { display: none; font-family: 'Noto Sans Telugu', 'Nirmala UI', 'Gautami', Inter, sans-serif; font-weight: 700; color: #fff; white-space: nowrap; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.met-view-grid .met-pk-lang { position: absolute; left: 0; right: 0; bottom: 12px; display: block; font-size: 13px; letter-spacing: .02em; }
.met-view-list .met-pk-lang { position: absolute; left: 0; right: 24px; bottom: 7px; display: block; font-size: 10px; }
.met-view-grid .met-pk-body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 14px; padding: 18px 20px 18px; }
.met-view-grid .met-pk-title { font-size: 17px; font-weight: 600; }
/* bottom row like the reference: a small link on the left, the price on the right */
.met-view-grid .met-pk-act { position: relative; z-index: 2; justify-content: space-between; padding-top: 14px; border-top: 1px solid #e8edf3; }
.met-view-grid .met-pk-price { padding: 0; border-radius: 0; background: none; color: #075aa6; font-size: 19px; font-weight: 800; }
.met-view-grid .met-pk-price.is-free { background: none; color: #15803d; font-size: 19px; letter-spacing: 0; text-transform: none; }

/* ---------------- tablet and phone ---------------- */
@media (max-width: 991px) {
    .met-pk-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .met-pk-filters { position: static; padding: 14px; border-radius: 20px; }
    .met-fp-search { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
    .met-pk-filters .met-control { height: 50px; }
    .met-fp-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 10px; border: 1px solid #dfe3e8; border-radius: 999px; background: #fff; color: #0b2a4a; font-size: 15px; font-weight: 800; cursor: pointer; }
    .met-fp-body { display: none; padding-top: 14px; }
    .met-pk-filters.is-open .met-fp-body { display: block; }
    .met-pk-filters.is-open .met-fp-toggle { background: #0b2a4a; border-color: #0b2a4a; color: #fff; }
    .met-fp-head { font-size: 18px; }
}

@media (max-width: 767px) {
    .met-pk-found { font-size: 17px; }
    .met-pk-tools { width: 100%; justify-content: space-between; }
    .met-pk-tools .met-pk-toollabel { display: none; }
    .met-pk-sort { margin-right: auto; }
    .met-view-grid .met-pk-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .met-view-grid .met-pk-side { height: 124px; }
    .met-view-grid .met-pk-num { font-size: 40px; }
    /* list view on a phone */
    .met-view-list .met-pk { border-radius: 12px 22px 22px 12px; }
    .met-view-list .met-pk-side { width: 88px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
    .met-view-list .met-pk-num { right: 20px; margin-top: -11px; font-size: 22px; }
    .met-view-list .met-pk-lang { display: none; }
    .met-view-list .met-pk-body { display: block; padding: 12px 12px 12px 102px; }
    .met-view-list .met-pk-title { font-size: 15.5px; }
    .met-view-list .met-pk-act { gap: 8px; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .met-pk, .met-pk-arrow, .met-fp-head i, .met-cb-box { transition: none; }
    .met-pk:hover, .met-pk:hover .met-pk-arrow { transform: none; }
}