/*
 * 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 { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 13px; font-weight: 800; white-space: nowrap; }
/* the row with "N Tests", Enrolled / price and the arrow sits above the card-wide link in grid view, so clicks on it are passed on to that link: name, tests, Enrolled, price and arrow all open the package */
.met-pk-act { pointer-events: none; }
.met-pk-end { display: inline-flex; align-items: center; gap: 12px; }
/* round arrow button */
.met-pk-go { flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--k1); color: #fff; font-size: 17px; box-shadow: 0 4px 10px rgba(15, 23, 42, .18); transition: transform .15s ease, background .15s ease; }
.met-pk:hover .met-pk-go { background: var(--k2); transform: translateX(3px); }
.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; }
}

/* package cards in the site theme: navy / logo-blue split picture area, gold chip, navy arrow button */
.met-pk,.met-pk.kind-mock-tests,.met-pk.kind-question-bank{--k1:#08345f;--k2:#075aa6}
.met-view-grid .met-pk-side{background:linear-gradient(110deg,#08345f 0%,#08345f 58%,#4ba5f7 58%,#4ba5f7 100%)}
.met-view-list .met-pk-side{background:linear-gradient(110deg,#08345f 0%,#08345f 58%,#4ba5f7 58%,#4ba5f7 100%)}
.met-view-grid .met-pk{border-radius:22px;box-shadow:0 10px 26px rgba(8,52,95,.14)}
.met-view-grid .met-pk:hover{box-shadow:0 20px 40px rgba(8,52,95,.26)}
.met-pk-lessons i{color:#e8b24a}

/* package cards (grid view), folded-corner style: pale blue card, navy corner holding the full year */
.met-view-grid .met-pk{background:#e6f1fb;border:1px solid #b5d4f4;border-radius:18px;box-shadow:0 6px 18px rgba(8,52,95,.1)}
.met-view-grid .met-pk::before{content:"";position:absolute;top:0;right:0;width:0;height:0;border-top:86px solid #08345f;border-left:86px solid transparent;z-index:0}
.met-view-grid .met-pk-side{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;height:auto;padding:16px 70px 0 16px;background:none;overflow:visible}
.met-view-grid .met-pk-chip{position:static;left:auto;top:auto;max-width:none}
.met-view-grid .met-pk-lang{position:static;display:inline;left:auto;right:auto;bottom:auto;color:#5b6b80;font-size:12px;text-align:left}
.met-view-grid .met-pk-num{position:absolute;left:auto;right:5px;top:19px;margin:0;width:50px;font-size:14px;line-height:1;text-align:center;color:#fff;transform:rotate(45deg);letter-spacing:0;z-index:1}

/* package rows (list view), folded-corner style: pale blue row, navy corner at the left holding the full year */
.met-view-list .met-pk{background:#e6f1fb;border:1px solid #b5d4f4;border-radius:16px}
.met-view-list .met-pk::before{content:"";position:absolute;top:0;left:0;width:0;height:0;border-top:76px solid #08345f;border-right:76px solid transparent;z-index:0}
.met-view-list .met-pk-side{position:static;width:0;height:0;background:none;clip-path:none;overflow:visible}
.met-view-list .met-pk-num{position:absolute;left:3px;right:auto;top:17px;margin:0;width:48px;font-size:13px;line-height:1;text-align:center;color:#fff;text-shadow:none;transform:rotate(-45deg);z-index:1}
.met-view-list .met-pk-lang{display:none}
.met-view-list .met-pk-body{padding:14px 22px 14px 92px}

/* filter panel redesign: white card with a navy header, pale search pill, filters as selectable pills */
.met-pk-filters{padding:0;background:#fff;border:1px solid #cfdceb;border-radius:22px;overflow:hidden;box-shadow:0 12px 30px rgba(8,52,95,.1)}
.met-pk-filters::before{content:"Filter packages";display:block;padding:15px 22px;background:#08345f;color:#fff;font-size:16px;font-weight:800;border-bottom:4px solid #4ba5f7}
.met-pk-filters form{padding:20px 22px 22px}
.met-fp-search{padding-bottom:18px;margin-bottom:14px;border-bottom:1px solid #e1e9f2}
.met-pk-filters .met-control{height:48px;border:0;background:#e6f1fb;font-size:15px}
.met-pk-filters .met-control:focus{border:0;outline:3px solid rgba(75,165,247,.45)}
.met-pk-filters .met-search-input-wrap i{color:#2b86dc}
.met-fp-group{margin-bottom:6px;padding-bottom:12px;border-bottom:1px solid #e1e9f2}
.met-fp-head{padding:6px 0 10px 10px;border-left:4px solid #4ba5f7;margin:0 0 8px;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:#08345f}
.met-fp-items{display:flex;flex-wrap:wrap;gap:8px}
.met-cb{display:inline-flex;gap:8px;padding:7px 12px 7px 10px;border:1px solid #b5d4f4;border-radius:999px;background:#fff;font-size:14.5px;font-weight:600;color:#08345f;transition:background .15s,border-color .15s,color .15s}
.met-cb:hover{border-color:#4ba5f7;background:#e6f1fb}
.met-cb input{width:100%;height:100%;left:0;top:0;border-radius:999px}
.met-cb-box{flex:0 0 16px;width:16px;height:16px;border:1.5px solid #8fb6dd;border-radius:50%}
.met-cb input:checked + .met-cb-box{background-color:#e8b24a;border-color:#e8b24a;background-size:12px;background-position:center;background-repeat:no-repeat}
.met-cb:has(input:checked){background:#08345f;border-color:#08345f;color:#fff}
.met-cb:has(input:checked) .met-cb-n{background:rgba(255,255,255,.18);color:#fff}
.met-cb-n{padding:1px 8px;border-radius:99px;background:#e6f1fb;color:#08345f;font-size:12px;font-weight:700}
.met-pk-filters .met-filter-reset-link{padding:8px 14px;border-radius:999px;background:#fde8e8;color:#b91c1c;font-weight:700}
@media (max-width:991px){.met-pk-filters::before{display:none}.met-pk-filters{border-radius:20px}.met-pk-filters form{padding:16px}}

/* filter panel, on/off switches: each option is a row with its name and count on the left and a switch on the right */
.met-fp-items{flex-direction:column;flex-wrap:nowrap;gap:0}
.met-cb{width:100%;gap:10px;padding:10px 2px;border:0;border-radius:0;background:none;font-size:15px;font-weight:600;color:#08345f}
.met-cb:hover{background:none;border-color:transparent}
.met-cb:not(:last-child){border-bottom:1px solid #edf2f8}
.met-cb input{border-radius:0}
.met-cb-text{order:1}
.met-cb-n{order:2}
.met-cb-box{order:3;position:relative;flex:0 0 42px;width:42px;height:24px;border:0;border-radius:999px;background:#cfdceb;transition:background .2s}
.met-cb-box::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(8,52,95,.35);transition:transform .2s}
.met-cb input:checked + .met-cb-box{background:#4ba5f7;background-image:none;border:0}
.met-cb input:checked + .met-cb-box::after{transform:translateX(18px)}
.met-cb:has(input:checked){background:none;border-color:transparent;color:#08345f}
.met-cb:has(input:checked) .met-cb-n{background:#e6f1fb;color:#08345f}
/* OK button (phones only): folds the filter panel */
.met-fp-ok{display:none}
@media (max-width:991px){.met-fp-ok{display:block;width:100%;min-height:48px;margin-top:14px;border:0;border-radius:999px;background:#08345f;color:#fff;font-size:16px;font-weight:800;box-shadow:0 8px 18px rgba(8,52,95,.28)}.met-fp-ok:active{background:#075aa6}}
@media (max-width:991px){.met-fp-ok{width:auto;min-width:96px;min-height:40px;margin:14px 0 0 auto;padding:0 28px;font-size:15px}}
/* Clear Filters is not shown (the page script still manages it) */
#reset_filters_btn,.met-pk-filters .met-filter-status-bar{display:none !important}