/* CertOcean - phone "Browse Courses" menu (v2, Oct 2026). Loaded by include/mob-menu.php. */
@media (max-width: 991.98px) {
/* the slide-in panel scrolls as one page instead of a box inside a box */
html body .navbar-collapse{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:28px}

/* ---------- trigger ---------- */
html body #mobileCoursesMenu > a.co-mob-trig{display:flex !important;align-items:center;gap:12px;margin:0;padding:10px 12px !important;border-radius:16px !important;background:linear-gradient(135deg,#3a4ca8 0%,#283782 55%,#1d2a6b 100%) !important;color:#fff !important;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 0 #141d4d,0 16px 26px -14px rgba(20,29,77,.85);transition:transform .15s,box-shadow .15s}
html body #mobileCoursesMenu > a.co-mob-trig:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 0 #141d4d,0 8px 16px -10px rgba(20,29,77,.85)}
html body #mobileCoursesMenu > a.co-mob-trig:hover,
html body #mobileCoursesMenu > a.co-mob-trig:focus-visible{color:#fff !important;background:linear-gradient(135deg,#3a4ca8 0%,#283782 55%,#1d2a6b 100%) !important}
.co-mob-trig-ico{flex:0 0 38px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#1b2140;background:linear-gradient(145deg,#ffd45c,#ff9a1f);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.12),0 10px 16px -8px rgba(255,138,31,.9);transform:perspective(200px) rotateY(-14deg)}
html body .co-mob-trig .co-mob-trig-ico i{font-size:15px !important;color:#1b2140}
.co-mob-trig-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.co-mob-trig-t b{font-size:15.5px;font-weight:800;color:#fff;letter-spacing:-.01em}
.co-mob-trig-t small{margin-top:2px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.72)}
html body .co-mob-trig i.co-mob-trig-go{flex:0 0 auto;font-size:12px !important;color:#ffd166;transition:transform .25s}
#mobileCoursesMenu.show-menu .co-mob-trig-go{transform:rotate(180deg)}

/* ---------- drop-down shell: drop the old card look ---------- */
html body #mobileCoursesMenu .co-mob-dd{position:static !important;width:100% !important;min-width:0;max-height:none !important;overflow:visible !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;transform:none !important;font-size:14px;color:#0f1b3d}
.co-mob,.co-mob *{box-sizing:border-box}
.co-mob{padding:14px 0 4px}
.co-mob a{text-decoration:none}
.co-mob p{margin:0}

.co-mob-head{padding:0 2px}
.co-mob-h{font-size:16.5px;font-weight:900;line-height:1.25;letter-spacing:-.015em;color:#0f1b3d}
.co-mob-sub{margin-top:4px !important;font-size:12.5px;line-height:1.45;color:#5b6787}
.co-mob-k{display:flex;align-items:center;gap:7px;margin:16px 2px 8px !important;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#d7560d}
.co-mob-k i{font-size:11px}

/* 3D logo tile (exam code or technology) */
.co-mob-tile{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:9.5px;font-weight:900;letter-spacing:-.02em;line-height:1;color:#fff;background:radial-gradient(120% 120% at 0 0,rgba(255,255,255,.35),rgba(255,255,255,0) 55%),linear-gradient(145deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.14),0 6px 10px -6px var(--c2);text-shadow:0 1px 1px rgba(0,0,0,.2)}
.co-mob-tile[data-l="5"],.co-mob-tile[data-l="6"]{font-size:7.5px}
.co-mob-tile[data-l="7"]{font-size:7px}
.co-mob-tile i{font-size:12px}

/* ---------- popular courses ---------- */
.co-mob-pop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.co-mob-pop > a{min-width:0}
.co-mob-chip{display:flex;flex-direction:column;gap:7px;min-width:0;padding:9px 9px 10px;border-radius:13px;background:#fff;border:1px solid #e3e8f4;box-shadow:0 3px 0 #e6ebf6,0 10px 16px -14px rgba(15,27,61,.5);transition:transform .15s,box-shadow .15s}
.co-mob-chip:active{transform:translateY(2px);box-shadow:0 1px 0 #e6ebf6}
.co-mob-chip-top{display:flex;align-items:center;gap:7px;min-width:0}
.co-mob-chip-v{min-width:0;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#6a7591;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-mob-chip-t{min-width:0;font-size:12px;font-weight:750;line-height:1.3;color:#1c2647}

/* ---------- categories ---------- */
.co-mob-cats{list-style:none;margin:0 !important;padding:0 !important;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.co-mob-cats > li{min-width:0;margin:0;padding:0}
.co-mob-cat{border-radius:15px;background:#fff;border:1px solid #e3e8f4;box-shadow:0 3px 0 #e6ebf6,0 12px 20px -16px rgba(15,27,61,.55);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.co-mob-cat[open]{border-color:#c7d2f0;box-shadow:0 3px 0 #dbe2f4,0 16px 26px -16px rgba(40,55,130,.5)}
.co-mob-cat > summary{display:flex;align-items:center;gap:10px;padding:9px 10px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.co-mob-cat > summary::-webkit-details-marker{display:none}
.co-mob-cat > summary::marker{content:""}
.co-mob-cat[open] > summary{background:linear-gradient(180deg,#f4f7ff,#fff)}
.co-mob-ico{flex:0 0 38px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:radial-gradient(120% 120% at 0 0,rgba(255,255,255,.38),rgba(255,255,255,0) 55%),linear-gradient(145deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.14),0 10px 16px -9px var(--c2);transform:perspective(220px) rotateY(-12deg)}
.co-mob-ico i{font-size:15px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.co-mob-cat-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.co-mob-cat-t b{font-size:13.5px;font-weight:800;color:#0f1b3d;letter-spacing:-.005em}
.co-mob-cat-t small{margin-top:3px;font-size:11px;font-weight:600;line-height:1.35;color:#6a7591}
.co-mob-cat-t small em{display:inline-block;margin-left:5px;padding:0 6px;border-radius:999px;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.02em;line-height:16px;color:#0d6b62;background:#dff7f2;vertical-align:1px}
.co-mob-cnt{flex:0 0 auto;min-width:26px;height:22px;padding:0 7px;border-radius:999px;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#283782;background:#eef2fc;box-shadow:inset 0 -1px 0 #dbe2f4}
.co-mob-chev{flex:0 0 auto;font-size:11px;color:#8a95b3;transition:transform .25s,color .2s}
.co-mob-cat[open] .co-mob-chev{transform:rotate(180deg);color:#283782}
.co-mob-list{padding:2px 10px 10px}
.co-mob-course{display:flex;align-items:center;gap:9px;padding:8px 2px;border-top:1px solid #eef1f8;color:#23304f}
.co-mob-course:first-child{border-top:0}
.co-mob-course-t{min-width:0;font-size:12.5px;font-weight:650;line-height:1.3;color:#1f2a4a}
.co-mob-hot,.co-mob-self{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:1px 6px;border-radius:999px;font-size:9.5px;font-style:normal;font-weight:800;letter-spacing:.03em;text-transform:uppercase;vertical-align:1px}
.co-mob-hot{color:#8a4300;background:linear-gradient(90deg,#ffe7a3,#ffc566)}
.co-mob-hot i{font-size:8.5px;color:#e8590c}
.co-mob-self{color:#0d6b62;background:#dff7f2}
.co-mob-all{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:9px 10px;border-radius:11px;font-size:12.5px;font-weight:800;line-height:1.25;color:#283782;background:linear-gradient(180deg,#f3f6fd,#e9eefb);box-shadow:inset 0 -2px 0 #dbe2f4}
.co-mob-all i{flex:0 0 auto;font-size:11px;color:#d7560d}

/* ---------- trust + advisor ---------- */
.co-mob-cta{position:relative;margin-top:16px;padding:14px;border-radius:18px;color:#fff;overflow:hidden;background:radial-gradient(130% 90% at 100% 0,rgba(255,194,26,.22),rgba(255,194,26,0) 55%),linear-gradient(150deg,#33449e 0%,#243279 50%,#18215a 100%);box-shadow:0 4px 0 #121a47,0 18px 28px -16px rgba(18,26,71,.9)}
.co-mob-cta-top{display:flex;align-items:center;gap:11px}
.co-mob-shield{position:relative;flex:0 0 44px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#1b2140;background:linear-gradient(145deg,#ffd45c,#ff9a1f);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.12),0 12px 18px -10px rgba(255,138,31,.95);transform:perspective(220px) rotateY(-14deg)}
.co-mob-shield > i{font-size:19px}
.co-mob-shield b{position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#1fbf75;border:2px solid #243279;color:#fff}
.co-mob-shield b i{font-size:8px}
.co-mob-cta-h{display:block;font-size:14px;font-weight:900;line-height:1.25;color:#fff}
.co-mob-tp{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.85)}
.co-mob-stars{display:inline-flex;gap:1px;padding:2px 4px;border-radius:4px;background:#00b67a}
.co-mob-stars i{font-size:8px;color:#fff}
.co-mob-cta-p{margin-top:10px !important;font-size:12px;line-height:1.45;color:rgba(255,255,255,.8)}
.co-mob-cta-act{display:flex;gap:8px;margin-top:12px}
.co-mob-btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 10px;border-radius:12px;font-size:13px;font-weight:900;color:#1b2140 !important;background:linear-gradient(180deg,#ffd76a,#ffb020);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 0 #c47f00,0 12px 18px -10px rgba(0,0,0,.6);transition:transform .15s,box-shadow .15s}
.co-mob-btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 0 #c47f00}
.co-mob-btn i{font-size:11px}
.co-mob-wa{flex:0 0 42px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff !important;background:linear-gradient(180deg,#3fe07f,#18a957);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 0 #0e7a3c,0 12px 18px -10px rgba(0,0,0,.6)}
.co-mob-wa i{font-size:20px}
.co-mob-every{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:11px 12px;border-radius:12px;border:1px dashed #c3cde9;font-size:13px;font-weight:800;color:#283782}
.co-mob-every i{font-size:12px;color:#d7560d}
}
@media (max-width: 339.98px) {
.co-mob-pop{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce) {
.co-mob-trig-go,.co-mob-chev{transition:none}
}