/* ==============================================
   CMRU Model 2570 — ระบบรับสมัครนักศึกษา
   assets/css/style.css
   ============================================== */

/* ===== DESIGN TOKENS ===== */
:root {
  --p-900: #3b0a67;
  --p-800: #4b0e88;
  --p-700: #6a00a8;
  --p-600: #7a2bc7;
  --p-500: #9d4edd;
  --p-400: #b86eff;
  --p-100: #f3e8ff;
  --ink-900: #121227;
  --ink-600: #2a2a48;
  --ink-400: #6b6b88;
  --bg: #f7f6fb;
  --card: #ffffff;
  --radius: 18px;
  --shadow: 0 10px 20px rgba(36, 0, 70, .12);

  /* สถานะ (stats.php) — คงที่ ไม่ผูกกับธีมสี ไม่ใช้ซ้ำเป็นสีหมวดหมู่อื่น */
  --stat-applied:  #256abf;
  --stat-good:     #088014;
  --stat-good-tint: #e6f4ea;
  --stat-critical: #d03b3b;
  --stat-critical-tint: #fbeaea;
}

/* ===== RESET & BASE ===== */
html,
body {
  height: 100%
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--bg);
  font-family: 'Noto Sans Thai', system-ui, Segoe UI, Roboto, sans-serif;
  color: var(--ink-900);
  line-height: 1.6;
}

button,
input,
select,
textarea {
  font-family: 'Noto Sans Thai', system-ui, Segoe UI, Roboto, sans-serif;
}

/* ===== FILE INPUT SELECTOR BUTTON ===== */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  font-family: 'Noto Sans Thai', system-ui, Segoe UI, Roboto, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--p-700), var(--p-500));
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  margin-right: 14px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background: linear-gradient(135deg, var(--p-800), var(--p-600));
  box-shadow: 0 4px 12px rgba(106, 0, 168, 0.25);
  transform: translateY(-1px);
}

/* ===== LAYOUT ===== */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 20px
}

/* ===== TOPBAR ===== */
header.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  color: #fff;
  background: linear-gradient(90deg, var(--p-900), var(--p-700));
  box-shadow: 0 8px 18px rgba(77, 0, 120, .25);
  transition: box-shadow 0.35s ease
}

header.topbar.scrolled {
  box-shadow: 0 8px 36px rgba(60, 0, 100, .55)
}

.topbar-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.brand .logo-text {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff, var(--p-100));
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 3px 0 rgba(36, 0, 70, .35),
    0 10px 18px rgba(0, 0, 0, .35);
  transition: transform 0.25s ease, box-shadow 0.25s ease
}

.brand .logo-text:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 5px 0 rgba(36, 0, 70, .35),
    0 14px 24px rgba(0, 0, 0, .4)
}

.brand .logo-cmru {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .5px;
  background: linear-gradient(90deg, var(--p-800), var(--p-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.brand .logo-model {
  font-weight: 700;
  font-size: 18px;
  color: var(--p-900)
}

.brand h1 {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800
}

.brand small {
  display: block;
  opacity: .9;
  font-weight: 600
}

/* ===== BUTTONS ===== */
.actions {
  display: flex;
  gap: 10px;
  align-items: center
}

.btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease
}

.btn.ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff
}

.btn.ghost:hover {
  background: rgba(255, 255, 255, .18);
  transform: translateY(-1px)
}

.btn.solid {
  background: #fff;
  color: var(--p-900)
}

.btn.solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28)
}

.hamburger {
  display: none;
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
  border-radius: 10px;
  padding: 9px 12px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit
}

/* ===== HERO ===== */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 28px;
  align-items: center;
  background: linear-gradient(120deg,
      var(--p-900),
      var(--p-700) 30%,
      var(--p-500) 55%,
      var(--p-700) 75%,
      var(--p-900));
  background-size: 300% 300%;
  animation: gradientShift 10s ease infinite;
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 36px);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden
}

.hero .wrap::before {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(255, 255, 255, .09) 0%, transparent 70%);
  border-radius: 50%;
  top: -100px;
  right: -70px;
  pointer-events: none
}

.hero .wrap::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255, .07) 0%, transparent 70%);
  border-radius: 50%;
  bottom: -70px;
  left: 20px;
  pointer-events: none
}

.hero h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 900;
  animation: fadeInUp 0.75s ease both
}

.hero p {
  margin: 0;
  opacity: .96;
  animation: fadeInUp 0.75s 0.18s ease both
}

.hero .frame {
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--p-400), #fff);
  border: 1px solid rgba(255, 255, 255, .25);
  animation: fadeInUp 0.85s 0.28s ease both;
  transition: transform 0.45s ease, box-shadow 0.45s ease;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .32)
}

.hero .frame:hover {
  transform: scale(1.04) rotate(1deg);
  box-shadow: 0 32px 64px rgba(0, 0, 0, .42)
}

.hero .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .9
}

/* ===== GRID LAYOUT ===== */
.grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  margin-top: 22px
}

/* ===== SIDEBAR ===== */
aside.sidebar .card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  border-left: 3px solid transparent
}

aside.sidebar .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(36, 0, 70, .18);
  border-left-color: var(--p-500)
}

aside.sidebar h3 {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--p-700);
  border-bottom: 2px solid var(--p-100);
  padding-bottom: 8px
}

/* ===== MENU ===== */
.menu {
  list-style: none;
  margin: 0;
  padding: 0
}

.menu li {
  margin: 4px 0
}

.menu a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-600);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease
}

.menu a::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--p-400);
  opacity: 0;
  transform: scale(.3);
  transition: opacity 0.2s ease, transform 0.2s ease
}

.menu a:hover {
  background: var(--p-100);
  color: var(--p-900);
  transform: translateX(3px)
}

.menu a:hover::before {
  opacity: 1;
  transform: scale(1)
}

.menu a:focus-visible {
  outline: 2px solid var(--p-500);
  outline-offset: 2px
}

.menu a.active {
  background: linear-gradient(90deg, var(--p-100), rgba(243, 232, 255, .35));
  color: var(--p-800);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--p-600)
}

.menu a.active::before {
  opacity: 1;
  transform: scale(1);
  background: var(--p-600)
}

/* ===== CONTENT BLOCKS ===== */
main .block {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 0.3s ease
}

main .block:hover {
  box-shadow: 0 20px 48px rgba(36, 0, 70, .16)
}

.block-header {
  padding: 14px 18px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(90deg, var(--p-900), var(--p-700));
  position: relative;
  overflow: hidden
}

.block-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(255, 255, 255, .08));
  pointer-events: none
}

/* ===== SCHEDULE TABLE ===== */
.schedule {
  padding: 16px
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  font-size: 15px
}

.table thead th {
  background: linear-gradient(180deg, var(--p-600), var(--p-500));
  color: #fff;
  padding: 12px;
  text-align: left;
  font-size: 14px
}

.table thead th:first-child {
  border-radius: 12px 0 0 12px
}

.table thead th:last-child {
  border-radius: 0 12px 12px 0
}

.table tbody td {
  background: #fff;
  padding: 12px 14px
}

.table tbody td:first-child {
  border-radius: 12px 0 0 12px;
  font-weight: 700;
  color: var(--p-800);
  width: 30%
}

.table tbody td:last-child {
  border-radius: 0 12px 12px 0
}

.table tbody tr {
  transition: filter 0.2s ease
}

.table tbody tr:nth-child(even) td {
  background: #faf8ff
}

.table tbody tr:hover td {
  background: var(--p-100) !important;
  cursor: default
}

/* ===== PLAN TABLE (plan_model70.php) — ตารางแผนรับนักศึกษา แบบแถวชิด ===== */
.plan-table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px
}

.plan-table thead th,
.plan-table thead th:first-child,
.plan-table thead th:last-child {
  border-radius: 0
}

.plan-table tbody td {
  padding: 10px 14px;
  border-radius: 0;
  border-bottom: 1px solid var(--p-100)
}

.plan-table tbody tr[data-major] td:first-child {
  width: 56px;
  font-weight: 600;
  color: var(--ink-400);
  border-radius: 0
}

.plan-table tbody tr[data-major] td:last-child {
  border-radius: 0
}

.plan-table tbody tr:hover td {
  background: var(--p-100) !important
}

.plan-table tbody tr.plan-group-row td:first-child,
.plan-table tbody tr.plan-group-row td:last-child {
  background: linear-gradient(90deg, var(--p-700), var(--p-500)) !important;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 14px;
  border-bottom: none;
  border-radius: 0;
  width: auto
}

.plan-table tbody tr.plan-group-row:hover td {
  background: linear-gradient(90deg, var(--p-700), var(--p-500)) !important
}

.plan-group-location {
  font-weight: 400;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .85)
}

.plan-table tbody tr.plan-total-row td {
  background: var(--p-100) !important;
  color: var(--p-900);
  font-weight: 800;
  border-top: 2px solid var(--p-400);
  border-bottom: none;
  border-radius: 0;
  width: auto
}

/* ===== GENERIC MULTI-COLUMN DATA TABLE MODIFIER (dept-select.php / dept-report.php) =====
   ใช้คู่กับ .table เมื่อตารางมีมากกว่า 2 คอลัมน์ (ไม่ใช่ตารางแบบ label:value)
   เพื่อยกเลิก width/font-weight/color พิเศษของ td:first-child, td:last-child ที่ .table
   ออกแบบไว้สำหรับตาราง 2 คอลัมน์เท่านั้น (เช่น ตารางกำหนดการ) */
.table-grid tbody td:first-child,
.table-grid tbody td:last-child {
  width: auto;
  font-weight: 400;
  color: inherit
}

/* ===== NOTICE ===== */
.notice {
  background: linear-gradient(90deg, var(--p-100), #fff);
  border-left: 6px solid var(--p-500);
  padding: 14px 16px;
  border-radius: 12px;
  color: var(--ink-600);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease
}

.notice:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 18px rgba(100, 40, 200, .12)
}

.notice-new::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #f04;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  animation: pulseDot 1.6s ease-in-out infinite
}

@keyframes pulseDot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }

  50% {
    opacity: .45;
    transform: scale(.7)
  }
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0)
}

/* ===== FOOTER ===== */
footer.site-footer {
  margin-top: 30px;
  background: linear-gradient(180deg, var(--p-900), var(--p-700) 65%, var(--p-700));
  color: rgba(255, 255, 255, .88)
}

.footer-accent {
  height: 4px;
  background: linear-gradient(90deg, var(--p-400), var(--p-100), var(--p-500));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 28px
}

.footer-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border-bottom: 2px solid rgba(184, 110, 255, .4)
}

.footer-heading .ico {
  color: var(--p-400)
}

.footer-highlight {
  display: inline-block;
  margin: -6px 0 14px;
  color: var(--p-400);
  font-weight: 600;
  text-decoration: none
}

.footer-highlight:hover {
  text-decoration: underline
}

.footer-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .85)
}

.footer-line .ico {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--p-400)
}

.footer-sub {
  color: rgba(255, 255, 255, .6);
  font-size: 13px
}

.footer-links,
.footer-plain {
  list-style: none;
  margin: 0;
  padding: 0
}

.footer-links li {
  margin-bottom: 10px
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease, transform 0.2s ease
}

.footer-links a .ico {
  color: var(--p-400)
}

.footer-links a:hover {
  color: #fff;
  transform: translateX(3px)
}

.footer-plain li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, .85)
}

.footer-plain .ico {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--p-400)
}

.footer-callout {
  margin-top: 6px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px
}

.footer-callout-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff
}

.footer-callout-title .ico {
  color: var(--p-400)
}

.footer-callout-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .75)
}

.footer-follow {
  margin-top: 18px
}

.footer-social-icons {
  display: flex;
  gap: 12px
}

.footer-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease
}

.footer-social-icons a:hover {
  background: var(--p-400);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .3)
}

.footer-bottom {
  padding: 14px 0;
  background: rgba(0, 0, 0, .18);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
  text-align: center
}

footer .ico {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

footer .ico-sm {
  width: 14px;
  height: 14px
}

.social-ico {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* ===== OFFCANVAS MENU ===== */
.offcanvas {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000
}

.offcanvas.open {
  display: block
}

.offcanvas .backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 16, 32, .55);
  backdrop-filter: blur(2px)
}

.offcanvas .panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(86vw, 380px);
  background: #fff;
  border-radius: 16px 0 0 16px;
  box-shadow: -14px 0 28px rgba(36, 0, 70, .25);
  display: flex;
  flex-direction: column
}

.offcanvas .m-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eee
}

.offcanvas .close {
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer
}

.offcanvas .m-body {
  padding: 12px 12px 18px;
  overflow: auto
}

.offcanvas .m-body .card {
  box-shadow: none;
  background: transparent;
  padding: 8px 6px
}

.offcanvas .m-body .menu a {
  padding: 12px 12px;
  border-radius: 10px
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hamburger {
    display: inline-flex
  }

  .hero .wrap {
    grid-template-columns: 1fr
  }

  .grid {
    grid-template-columns: 1fr
  }

  aside.sidebar {
    display: none
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: left
  }

  .footer-bottom {
    padding-left: 16px;
    padding-right: 16px
  }
}

/* ===== APPLY PAGE — STEP INDICATOR ===== */
.apply-steps {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  margin-bottom: 0
}

.apply-steps .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1
}

.apply-steps .step-num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  background: #e8e0f5;
  color: var(--ink-400);
  border: 2px solid #d0c0ee;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease
}

.apply-steps .step.active .step-num {
  background: linear-gradient(135deg, var(--p-700), var(--p-500));
  color: #fff;
  border-color: var(--p-400);
  box-shadow: 0 4px 16px rgba(106, 0, 168, .35)
}

.apply-steps .step-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-400);
  text-align: center
}

.apply-steps .step.active .step-label {
  color: var(--p-700);
  font-weight: 800
}

.apply-steps .step-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, #d0c0ee, #e8e0f5);
  margin-bottom: 24px;
  border-radius: 2px
}

/* ===== APPLY PAGE — INFO BLOCK ===== */
.apply-info-block .block-header {
  display: flex;
  align-items: center;
  gap: 10px
}

.block-header-icon {
  font-size: 20px;
  line-height: 1
}

.apply-info-body {
  padding: 18px 22px
}

.apply-info-body p {
  margin: 0;
  color: var(--ink-600);
  line-height: 1.75
}

.highlight-g {
  color: var(--p-600);
  font-weight: 900;
  font-size: 1.05em
}

/* ===== APPLY PAGE — FORM ===== */
.apply-form {
  overflow: visible
}

.form-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--p-100)
}

.form-section:last-of-type {
  border-bottom: none
}

.form-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap
}

.form-label {
  font-size: 16px;
  font-weight: 800;
  color: var(--p-800)
}

.badge-example {
  display: inline-flex;
  align-items: center;
  background: var(--p-100);
  color: var(--p-700);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(106, 0, 168, .18);
  white-space: nowrap
}

.field-req-label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-600);
  margin-bottom: 8px
}

.req {
  color: #e8003d;
  font-weight: 900
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center
}

.input-icon {
  position: absolute;
  left: 14px;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  z-index: 1
}

.form-input {
  width: 100%;
  padding: 13px 16px 13px 46px;
  font-size: 15px;
  font-family: inherit;
  border: 2px solid #d0c0ee;
  border-radius: 12px;
  background: #faf8ff;
  color: var(--ink-900);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  box-sizing: border-box;
  outline: none
}

.form-input::placeholder {
  color: var(--ink-400);
  font-size: 14px
}

.form-input:focus {
  border-color: var(--p-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(157, 78, 221, .15)
}

.form-input.error {
  border-color: #e8003d;
  box-shadow: 0 0 0 4px rgba(232, 0, 61, .1)
}

.form-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-400)
}

.form-error {
  margin: 6px 0 0;
  font-size: 13px;
  color: #e8003d;
  font-weight: 600;
  min-height: 18px
}

/* ===== APPLY PAGE — CONSENT BOX ===== */
.consent-section {
  background: linear-gradient(135deg, #faf8ff 0%, #f3e8ff 100%);
  border-radius: 0 0 var(--radius) var(--radius)
}

.consent-box {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid rgba(106, 0, 168, .15);
  padding: 22px 24px;
  box-shadow: 0 4px 16px rgba(106, 0, 168, .07)
}

.consent-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  color: var(--p-800)
}

.consent-title-icon {
  font-size: 20px;
  line-height: 1
}

.consent-intro {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.75
}

.consent-list {
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px
}

.consent-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-600);
  padding: 8px 12px;
  background: var(--p-100);
  border-radius: 8px;
  border-left: 3px solid var(--p-400);
  font-weight: 500;
  transition: background 0.2s ease, transform 0.2s ease
}

.consent-list li:hover {
  background: #ede0ff;
  transform: translateX(2px)
}

.consent-item-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-600), var(--p-400))
}

.consent-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(90deg, rgba(106, 0, 168, .07), rgba(106, 0, 168, .03));
  border: 1px solid rgba(106, 0, 168, .18);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ink-600);
  margin-bottom: 20px;
  line-height: 1.65
}

.privacy-lock {
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0
}

/* ===== CUSTOM CHECKBOX ===== */
.consent-check-label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid rgba(106, 0, 168, .22);
  background: #faf8ff;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  user-select: none
}

.consent-check-label:hover {
  border-color: var(--p-500);
  background: var(--p-100);
  box-shadow: 0 0 0 4px rgba(157, 78, 221, .1)
}

.consent-check-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0
}

.check-custom {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #c0a0e0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  margin-top: 1px
}

.check-custom::after {
  content: '';
  display: block;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -2px);
  opacity: 0;
  transition: opacity 0.15s ease
}

.consent-check-label:has(input:checked) .check-custom {
  background: linear-gradient(135deg, var(--p-700), var(--p-500));
  border-color: var(--p-500);
  box-shadow: 0 4px 12px rgba(106, 0, 168, .35)
}

.consent-check-label:has(input:checked) .check-custom::after {
  opacity: 1
}

.consent-check-label:has(input:checked) {
  border-color: var(--p-500);
  background: var(--p-100);
  box-shadow: 0 0 0 3px rgba(157, 78, 221, .15)
}

.check-text {
  font-size: 15px;
  color: var(--ink-900);
  line-height: 1.6
}

/* ===== APPLY PAGE — FORM ACTIONS ===== */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-top: 1px solid var(--p-100);
  gap: 16px
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-600);
  background: transparent;
  border: 2px solid #d0c0ee;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease
}

.btn-back:hover {
  background: var(--p-100);
  border-color: var(--p-400);
  color: var(--p-800);
  transform: translateX(-2px)
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 32px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--p-700), var(--p-500));
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(106, 0, 168, .35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  position: relative;
  overflow: hidden
}

.btn-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.12));
  pointer-events: none
}

.btn-submit:not(:disabled):hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 32px rgba(106, 0, 168, .45)
}

.btn-submit:disabled {
  filter: grayscale(.45) opacity(.6);
  cursor: not-allowed;
  box-shadow: none
}

.btn-arrow {
  display: inline-block;
  transition: transform 0.2s ease
}

.btn-submit:not(:disabled):hover .btn-arrow {
  transform: translateX(4px)
}

/* ===== APPLY-PROCESS — FORM SECTION TITLE ===== */
.form-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--p-100);
  font-size: 17px;
  font-weight: 800;
  color: var(--p-800)
}

.form-section-title-icon {
  font-size: 20px;
  line-height: 1
}

.form-section-subtitle {
  display: block;
  width: 100%;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-400);
  margin-top: -4px
}

/* ===== APPLY-PROCESS — GROUP HEADER ===== */
.form-section-group-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 24px 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--p-700);
  background: linear-gradient(90deg, var(--p-100) 0%, #fff 100%);
  border-top: 1px solid var(--p-100);
  border-bottom: 1px solid rgba(106,0,168,.08)
}

.group-header-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-600), var(--p-400))
}

.group-header-sub {
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-400)
}

/* ===== APPLY-PROCESS — ID BADGE ===== */
.id-display-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, var(--p-100), #fff);
  border: 1.5px solid rgba(106, 0, 168, .22);
  border-radius: 12px;
  padding: 10px 18px
}

.id-badge-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-400)
}

.id-badge-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--p-800);
  letter-spacing: .04em
}

/* ===== APPLY-PROCESS — SELECT WRAPPER ===== */
.select-wrapper {
  position: relative;
  display: block
}

.select-wrapper .select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--p-500);
  font-size: 14px
}

.form-select {
  width: 100%;
  padding: 13px 40px 13px 14px;
  font-size: 15px;
  font-family: inherit;
  border: 2px solid #d0c0ee;
  border-radius: 12px;
  background: #faf8ff;
  color: var(--ink-900);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  box-sizing: border-box;
  outline: none;
  cursor: pointer
}

.form-select:focus {
  border-color: var(--p-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(157, 78, 221, .15)
}

.form-select.error {
  border-color: #e8003d;
  box-shadow: 0 0 0 4px rgba(232, 0, 61, .1)
}

.form-select:disabled {
  background: #f1eef7;
  border-color: #e2dcee;
  color: var(--ink-400);
  cursor: not-allowed
}

.select-wrapper:has(.form-select:disabled) .select-arrow {
  opacity: .4
}

/* ===== APPLY-PROCESS — TEXTAREA ===== */
.form-textarea {
  width: 100%;
  padding: 13px 16px;
  font-size: 15px;
  font-family: inherit;
  border: 2px solid #d0c0ee;
  border-radius: 12px;
  background: #faf8ff;
  color: var(--ink-900);
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  box-sizing: border-box;
  outline: none
}

.form-textarea:focus {
  border-color: var(--p-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(157, 78, 221, .15)
}

.form-textarea.error {
  border-color: #e8003d;
  box-shadow: 0 0 0 4px rgba(232, 0, 61, .1)
}

/* ===== APPLY-PROCESS — READONLY INPUT VARIANT ===== */
.form-input--readonly {
  padding: 13px 16px;
  background: #f3eeff;
  border-color: rgba(106, 0, 168, .18);
  color: var(--ink-600);
  cursor: not-allowed
}

.form-input--plain {
  padding: 13px 16px;
  background: #f7f6fb;
  border-color: #e8e0f5;
  color: var(--ink-400);
  cursor: not-allowed
}

/* ===== APPLY-PROCESS — FORM GROUP ===== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0
}

/* ===== APPLY-PROCESS — MULTI-COLUMN ROWS ===== */
.form-row {
  display: grid;
  gap: 14px
}

.form-row-2col {
  grid-template-columns: 1fr 1fr
}

.form-row-3col {
  grid-template-columns: 1fr 1fr 1fr
}

/* ===== STEP DONE STATE ===== */
.apply-steps .step.done .step-num {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  border-color: #86efac;
  box-shadow: 0 4px 16px rgba(22, 163, 74, .3)
}

.apply-steps .step.done .step-label {
  color: #16a34a;
  font-weight: 700
}

.apply-steps .step-line--done {
  background: linear-gradient(90deg, #86efac, #d0c0ee)
}

/* ===== RESPONSIVE — APPLY PAGE ===== */
@media (max-width: 1024px) {
  .apply-steps {
    padding: 16px 12px
  }

  .apply-steps .step-label {
    font-size: 10px
  }

  .consent-list {
    grid-template-columns: 1fr
  }

  .form-actions {
    flex-direction: column-reverse;
    gap: 12px
  }

  .btn-back,
  .btn-submit {
    width: 100%;
    justify-content: center
  }

  .form-row-2col,
  .form-row-3col {
    grid-template-columns: 1fr
  }
}

@media (max-width: 640px) {
  .form-section-title {
    padding: 14px 16px
  }

  .form-section-group-header {
    padding: 10px 16px
  }

  .form-section {
    padding: 16px
  }
}

/* ===== APPLY-PROCESS — MAJOR CHOICE CARDS ===== */
.major-card {
  background: #fff;
  border: 1.5px solid rgba(106, 0, 168, .18);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease
}

.major-card:focus-within {
  border-color: var(--p-500);
  box-shadow: 0 0 0 4px rgba(157, 78, 221, .1)
}

.major-card--opt {
  margin-top: 14px;
  background: #faf8ff;
  border-style: dashed
}

.major-card-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--p-800);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px
}

.major-card-label--opt {
  color: var(--ink-400)
}

.major-opt-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--p-100);
  color: var(--p-700);
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid rgba(106, 0, 168, .2)
}

/* ===== STATS PAGE (stats.php) ===== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.stat-tile {
  background: var(--card);
  border: 1px solid rgba(36, 0, 70, .07);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(36, 0, 70, .07);
  transition: transform 0.25s ease, box-shadow 0.25s ease
}

.stat-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(36, 0, 70, .14)
}

.stat-tile-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-400)
}

.stat-tile-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--p-900);
  line-height: 1.2
}

.stat-tile-sub {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-400)
}

.meter {
  margin-top: 2px;
  height: 6px;
  border-radius: 999px;
  background: var(--p-100);
  overflow: hidden
}

.meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease
  /* สีของแต่ละแท่งกำหนดทีละ tile ผ่าน inline style (ไม่ผูกสีตายตัวไว้ที่นี่) */
}

/* ---- donut chart (สัดส่วนผู้สมัครตามคณะ) ---- */
.donut-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px
}

.donut {
  width: 190px;
  height: 190px;
  min-width: 190px;
  border-radius: 50%;
  position: relative;
  box-shadow: var(--shadow)
}

.donut-hole {
  position: absolute;
  inset: 21%;
  background: var(--card);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center
}

.donut-hole strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--p-900);
  line-height: 1.2
}

.donut-hole span {
  font-size: 11.5px;
  color: var(--ink-400);
  font-weight: 600
}

.donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  min-width: 220px
}

.donut-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px
}

.donut-legend-swatch {
  width: 11px;
  height: 11px;
  min-width: 11px;
  border-radius: 3px
}

.donut-legend-label {
  color: var(--ink-900);
  font-weight: 600
}

.donut-legend-value {
  margin-left: auto;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

/* ---- count badges (ตารางสถิติแยกตามคณะ) ---- */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums
}

.count-badge--applied {
  background: var(--stat-applied)
}

.count-badge--paid {
  background: var(--stat-good)
}

.count-badge--unpaid {
  background: var(--stat-critical)
}

.count-badge--seats {
  background: linear-gradient(135deg, var(--p-600), var(--p-700))
}

@media (max-width: 640px) {
  .kpi-row {
    grid-template-columns: 1fr
  }

  .donut-wrap {
    justify-content: center;
    text-align: left
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  header.topbar,
  aside.sidebar,
  footer,
  .apply-steps,
  .notice,
  .form-actions,
  .offcanvas {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 13px !important;
  }

  .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .grid {
    grid-template-columns: 1fr !important;
    margin-top: 0 !important;
  }

  main .block {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  .block-header {
    background: #4b0e88 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .form-section-group-header {
    background: #f0e6ff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
} /* /@media print — เดิมไม่มีวงเล็บปิดตรงนี้ ทำให้ทุก rule ด้านล่างนี้ (upload-status-box ฯลฯ)
     ถูกกลืนเข้าไปอยู่ใน @media print โดยไม่ตั้งใจ จึงไม่มีผลตอนแสดงผลบนหน้าจอปกติเลย */

/* ===== UPLOAD STATUS BOX ===== */
.upload-status-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f1f0f5;
  border-radius: 20px;
  padding: 14px 20px;
  border: 1px solid rgba(0, 0, 0, .06);
  margin-top: 10px;
}

.upload-status-box--success {
  background: #eafaf0;
  border-color: rgba(21, 163, 74, .3);
}

.upload-status-box--pending {
  background: #fdedec;
  border-color: rgba(220, 38, 38, .25);
}

.upload-status-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: #e2e0e8;
  color: #71718a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
}

.upload-status-icon--success {
  background: #15a34a;
  color: #fff;
}

.upload-status-icon--pending {
  background: #dc2626;
  color: #fff;
}

.upload-status-info {
  font-size: 13.5px;
  color: var(--ink-600);
  line-height: 1.5;
}

.upload-status-title {
  font-size: 14px;
  color: var(--ink-900);
  margin-bottom: 2px;
}

.upload-status-box--success .upload-status-title strong {
  color: #15a34a;
}

.upload-status-box--pending .upload-status-title strong {
  color: #dc2626;
}

.upload-status-detail {
  font-size: 13px;
  color: var(--ink-400);
}

/* ===== EXAM VENUE HIGHLIGHT SECTION & CARDS ===== */
.form-section-group-header--highlight {
  background: linear-gradient(90deg, #fff3dc 0%, #faf5ff 50%, #ffffff 100%) !important;
  border-top: 2px solid #f59e0b !important;
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.25) !important;
  position: relative;
}

.group-header-dot--alert {
  background: linear-gradient(135deg, #ef4444, #f59e0b) !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
  animation: venueBadgeBlink 2s infinite ease-in-out;
}

.venue-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #e11d48, #f59e0b);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.35);
  animation: venueBadgeBlink 2s infinite ease-in-out;
}

.exam-venue-card-wrapper {
  background: linear-gradient(180deg, #fffbf2 0%, #ffffff 100%) !important;
  border: 2px solid #fbd38d !important;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.1) !important;
  transition: all 0.3s ease;
}

.exam-venue-card-wrapper.error {
  border-color: #e8003d !important;
  box-shadow: 0 0 0 4px rgba(232, 0, 61, 0.18) !important;
}

.notice-venue-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(90deg, #fff7ed 0%, #fffbf2 100%);
  border: 1.5px solid #fed7aa;
  border-left: 5px solid #f97316;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.notice-venue-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.notice-venue-content strong {
  color: #c2410c;
  font-size: 14px;
}

.notice-venue-content p {
  margin: 3px 0 0;
  color: #9a3412;
  font-size: 13.5px;
  line-height: 1.45;
}

/* Options Grid */
.venue-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.venue-option-card {
  position: relative;
  border: 2.5px solid #e2d8f0;
  border-radius: 14px;
  padding: 16px 18px;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  user-select: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.venue-option-card:hover {
  border-color: var(--p-500);
  background: #faf7ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(106, 0, 168, 0.12);
}

.venue-option-card.selected {
  border-color: #6a00a8;
  background: linear-gradient(135deg, #fbf7ff 0%, #f3e8ff 100%);
  box-shadow: 0 6px 20px rgba(106, 0, 168, 0.22);
}

.venue-option-card.disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
  transform: none !important;
}


.venue-option-radio {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2.5px solid #a78bfa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: all 0.2s ease;
}

.venue-option-card.selected .venue-option-radio {
  border-color: #6a00a8;
  background: #6a00a8;
}

.venue-option-radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.venue-option-card.selected .venue-option-radio-dot {
  opacity: 1;
  transform: scale(1);
}

.venue-option-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.venue-option-info {
  flex: 1;
}

.venue-option-code {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #6a00a8, #9d4edd);
  padding: 1px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
}

.venue-option-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.35;
}

.venue-option-subtitle {
  font-size: 12.5px;
  color: var(--ink-400);
  margin-top: 2px;
}

.venue-check-icon {
  font-size: 18px;
  font-weight: 800;
  color: #16a34a;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.venue-option-card.selected .venue-check-icon {
  opacity: 1;
  transform: scale(1);
}

.form-select--highlight {
  border: 2px solid #f59e0b !important;
  background: #fffdf5 !important;
}

.form-select--highlight:focus {
  border-color: #d97706 !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2) !important;
}

@keyframes venueBadgeBlink {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.88;
  }
}

/* ===== PAGINATION BUTTONS ===== */
.dept-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.btn-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-page:hover:not(:disabled) {
  background: var(--p-50, #f5f3ff);
  border-color: var(--p-500, #8b5cf6);
  color: var(--p-700, #6d28d9);
  transform: translateY(-1px);
}

.btn-page.active {
  background: var(--p-700, #6d28d9) !important;
  border-color: var(--p-700, #6d28d9) !important;
  color: #ffffff !important;
  cursor: default;
  pointer-events: none;
}

.btn-page:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}