/**
 * The Food School — Enrollment Form
 * Ported from the enrollment-form_4.html design. All rules are scoped to
 * .tfs-enroll so theme styles are not affected (and do not bleed in).
 */

.tfs-enroll{
  /* Type. IBM Plex Sans Thai carries both Thai and Latin, so one family
     covers body copy and the uppercase display headings. */
  --tfs-font:'IBM Plex Sans Thai','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Colour, following the thefoodschool.com tone: black, white and grey,
     with red reserved for required-field markers. */
  --tfs-ink:#111111;         /* body copy and headings          */
  --tfs-black:#000000;       /* buttons, badges, selected state */
  --tfs-accent:#cc0000;      /* required asterisk               */
  --tfs-accent-soft:#9a9a9a; /* hover borders                   */
  --tfs-select:#c3a973;      /* chosen course / รุ่น            */
  --tfs-info:#e8842b;        /* course info labels (เหมาะสำหรับ) */
  --tfs-cream:#f5f5f5;       /* tag and PDPA panel fill         */
  --tfs-page:#f2f2f2;        /* page background                 */
  --tfs-line:#dcdcdc;        /* hairlines and input borders     */
  --tfs-muted:#6b6b6b;       /* secondary text                  */
  --tfs-white:#ffffff;
  --tfs-danger:#cc0000;

  font-family:var(--tfs-font);
  background:var(--tfs-page);
  color:var(--tfs-ink);
  line-height:1.6;
  padding:24px 16px 60px;
}
/* On phones the header text keeps the 16px side padding, but the slider banner
   and the form card break out of it to sit edge to edge (see the rule below). */
@media(max-width:560px){
  .tfs-slider,
  .tfs-enroll form{
    margin-left:-16px;margin-right:-16px;border-radius:0;
  }
  .tfs-enroll form{border-left:none;border-right:none}
}
.tfs-enroll *,
.tfs-enroll *::before,
.tfs-enroll *::after{box-sizing:border-box;margin:0;padding:0}

/* The wrap sets the form card's width. It is a max-width, so anything
   narrower than the desktop cap (phones, tablets) is unchanged. */
.tfs-enroll__wrap{max-width:1200px;margin:0 auto}

/* Banner slider above the header. Managed under คอร์สเรียน (BOI) → แบนเนอร์สไลด์;
   behaviour (autoplay, arrows, dots, swipe) is in the front-end JS. */
.tfs-slider{position:relative;margin:0 0 28px;border-radius:6px;overflow:hidden;background:var(--tfs-cream)}
.tfs-slider__viewport{overflow:hidden}
.tfs-slider__track{display:flex;transition:transform .5s ease;will-change:transform}
.tfs-slider__slide{flex:0 0 100%;min-width:0}
.tfs-slider__link{display:block}
.tfs-slider__img{display:block;width:100%;height:auto}
.tfs-slider__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.42);color:#fff;font-size:24px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.tfs-slider__arrow:hover{background:rgba(0,0,0,.72)}
.tfs-slider__arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tfs-slider__arrow--prev{left:12px}
.tfs-slider__arrow--next{right:12px}
.tfs-slider__dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px}
.tfs-slider__dot{
  width:9px;height:9px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);transition:background .15s,transform .15s;
}
.tfs-slider__dot:hover{background:rgba(255,255,255,.85)}
.tfs-slider__dot.is-active{background:#fff;transform:scale(1.25)}
@media(max-width:560px){
  .tfs-slider{margin-bottom:20px}
  .tfs-slider__arrow{width:32px;height:32px;font-size:20px}
  .tfs-slider__arrow--prev{left:8px}
  .tfs-slider__arrow--next{right:8px}
}

/* Logo + programme lines. The logo sits on the left and the programme name runs
   to the right of it, both vertically centred on the same row. */
.tfs-brand{
  display:flex;align-items:center;gap:40px;flex-wrap:wrap;
  text-align:left;margin:8px 0 24px;
  /* Hairline splits the identity row (logo + programme) from the page title
     below, giving the header two clear tiers instead of one loose stack. */
  padding-bottom:24px;border-bottom:1px solid var(--tfs-line);
}
.tfs-logo{
  display:inline-block;
  border:3px solid var(--tfs-ink);
  padding:10px 16px;
  text-align:center;
  line-height:1.05;
}
.tfs-logo__t{font-family:var(--tfs-font);font-weight:600;letter-spacing:.28em;font-size:13px}
.tfs-logo__m{font-family:var(--tfs-font);font-weight:700;letter-spacing:.14em;font-size:30px;margin:2px 0}
.tfs-logo__b{font-family:var(--tfs-font);font-weight:600;letter-spacing:.22em;font-size:13px}
.tfs-logo--img{border:none;padding:0}
.tfs-brand .tfs-logo{flex:none}
.tfs-logo--img img{
  display:block;width:150px;max-width:100%;height:auto;
  /* The source SVG declares width/height as 100%; give it the viewBox ratio
     so it reserves the right box before it loads. */
  aspect-ratio:500/386;
}

.tfs-brand__project{max-width:34em;line-height:1.5}
/* On desktop the text fills the remaining width beside the logo. */
@media(min-width:561px){.tfs-brand__project{flex:1;max-width:none}}
.tfs-brand__line{font-size:30px;color:var(--tfs-ink)}
.tfs-brand__partners{margin-top:0px;font-size:22.5px;color:var(--tfs-muted)}
/* Partner-logo strip under the byline (same set as the footer). */
.tfs-brand__logos{display:flex;align-items:center;flex-wrap:wrap;gap:18px 34px;margin-top:10px}
.tfs-brand__logo{height:52px;width:auto;max-width:210px;object-fit:contain;display:block}
@media(max-width:560px){
  /* Full-width strip on phones: the logos spread edge to edge across the row. */
  .tfs-brand__logos{width:100%;justify-content:space-between;gap:14px 16px}
  .tfs-brand__logo{height:42px;max-width:24%}
}

/* Big "ลงทะเบียน เรียนฟรี" call-out on the left of the header row. order:-1 puts
   it first (left) and flex:none keeps its width, so the programme text wraps to
   its right; it stacks on top on phones (the brand row is flex-wrap). */
.tfs-brand__cta{flex:none;order:-1;text-align:left;line-height:1.02;font-weight:700}
.tfs-brand__cta-line{display:block;font-size:58px;letter-spacing:.01em;color:var(--tfs-ink)}
.tfs-brand__cta-line--em{color:var(--tfs-select)}
@media(max-width:560px){
  /* On phones the two words sit on one big line ("ลงทะเบียน เรียนฟรี"); the
     size scales with the viewport (clamp) so it fills the width without wrapping. */
  .tfs-brand__cta{width:100%;white-space:nowrap}
  .tfs-brand__cta-line{display:inline;font-size:clamp(28px,9vw,44px)}
  .tfs-brand__cta-line--em{margin-left:.3em}
}
@media(max-width:560px){.tfs-brand{gap:14px}.tfs-brand__line{line-height:36px}}

/* The heading sits flush left, on the same edge as the logo above it. */
.tfs-head{text-align:left;margin-bottom:28px}
.tfs-head__eyebrow{font-family:var(--tfs-font);font-weight:600;letter-spacing:.3em;font-size:12px;color:var(--tfs-muted);text-transform:uppercase}
.tfs-head h1{font-family:var(--tfs-font);font-weight:700;font-size:32px;letter-spacing:.04em;margin:8px 0 0;color:var(--tfs-ink)}
/* Even out the wrap on narrow screens. Ignored by browsers that don't support
   it, which just wrap normally. */
.tfs-head h1{text-wrap:balance}

/* Card */
.tfs-enroll form{background:var(--tfs-white);border:1px solid var(--tfs-line);border-radius:4px;overflow:hidden}

.tfs-section{padding:26px 28px;border-bottom:1px solid var(--tfs-line)}
.tfs-section:last-of-type{border-bottom:none}
.tfs-section__title{
  font-family:var(--tfs-font);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;font-size:14px;color:var(--tfs-ink);
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.tfs-section__title span{
  width:24px;height:24px;flex:none;border-radius:50%;
  background:var(--tfs-ink);color:#fff;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}

.tfs-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tfs-grid .tfs-full{grid-column:1/-1}
/* Fields stacked straight in a section (rather than in a .tfs-grid, which
   spaces its own children) would otherwise sit flush against each other. */
.tfs-section > .tfs-field + .tfs-field{margin-top:20px}
@media(max-width:560px){.tfs-grid{grid-template-columns:1fr}}

.tfs-enroll label{display:block;font-size:15.5px;font-weight:600;margin-bottom:6px;color:var(--tfs-ink)}
.tfs-enroll label .tfs-req{color:var(--tfs-accent);margin-left:2px}
.tfs-opt{font-weight:400;color:var(--tfs-muted);font-size:12px}

.tfs-enroll input,
.tfs-enroll select,
.tfs-enroll textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--tfs-ink);
  background:var(--tfs-white);border:1px solid var(--tfs-line);border-radius:3px;
  padding:11px 12px;transition:border-color .15s,box-shadow .15s;
  height:auto;max-width:none;
}
/* The source design leaves controls at the UA line-height; state it outright so
   a theme's global line-height cannot resize them. Textarea keeps the 1.6 it
   inherits from the wrapper, as in the original. */
.tfs-enroll input,
.tfs-enroll select{line-height:normal}
.tfs-enroll input:focus,
.tfs-enroll select:focus,
.tfs-enroll textarea:focus{
  outline:none;border-color:var(--tfs-black);box-shadow:0 0 0 3px rgba(0,0,0,.10);
}
.tfs-enroll textarea{resize:vertical;min-height:96px}

.tfs-enroll input[type=file]{padding:9px 12px;font-size:14px;color:var(--tfs-muted);cursor:pointer}
.tfs-enroll input[type=file]::file-selector-button{
  font-family:var(--tfs-font);letter-spacing:.06em;text-transform:uppercase;font-size:12px;
  border:none;background:var(--tfs-ink);color:#fff;padding:8px 14px;border-radius:3px;
  margin-right:12px;cursor:pointer;
}
.tfs-hint{font-size:12px;color:var(--tfs-muted);margin-top:5px}

/* Student / workplace field toggle */
.tfs-enroll .tfs-hidden{display:none}

/* Radio group.
   .tfs-enroll sets every label to block/600 and every input to width:100%,
   so the rows inside the group opt out of both. The legend is a <span>, not
   a <label>, because it names the group rather than one control. */
.tfs-enroll .tfs-field__legend{display:block;font-size:15.5px;font-weight:600;margin-bottom:6px;color:var(--tfs-ink)}
.tfs-enroll .tfs-field__legend .tfs-req{color:var(--tfs-accent);margin-left:2px}
.tfs-radios{display:flex;flex-wrap:wrap;gap:10px 24px}
.tfs-enroll .tfs-radio{display:flex;align-items:center;gap:9px;font-weight:400;font-size:14px;margin:0;cursor:pointer}
.tfs-enroll .tfs-radio input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--tfs-black)}

/* PDPA */
.tfs-pdpa{display:flex;flex-direction:column;gap:14px;background:var(--tfs-cream);border:1px solid var(--tfs-line);border-radius:3px;padding:16px}
.tfs-pdpa__row{display:flex;gap:12px;align-items:flex-start}
.tfs-pdpa input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--tfs-black)}
.tfs-enroll .tfs-pdpa label{font-weight:400;font-size:15.5px;color:var(--tfs-muted);margin:0;line-height:1.55}

/* Accommodation request.
   The details block is a grid child that spans the full width and stacks its
   own fields, revealed by the JS when ต้องการ is chosen. */
.tfs-enroll .tfs-accommodation{
  grid-column:1 / -1;
  display:flex;flex-direction:column;gap:16px;
  background:var(--tfs-cream);border:1px solid var(--tfs-line);
  border-radius:3px;padding:16px 18px;margin-top:2px;
}
.tfs-enroll .tfs-accommodation.tfs-hidden{display:none}
.tfs-accommodation__note{margin:0;font-size:13.5px;line-height:1.55;color:var(--tfs-muted)}
.tfs-enroll .tfs-accommodation .tfs-field{margin:0}
.tfs-enroll .tfs-accommodation .tfs-pdpa{background:#fff}

/* Course selection.
   Each course is a card with no visible radio — the card itself is the control.
   Its selectable region (.tfs-course__select) is a <label> holding the thumbnail
   and body; the batch picker sits below as a sibling, because batch labels must
   not nest inside the course label. Selection reads from the card's own border,
   ring and fill (see the selected state below). */
.tfs-courses{display:flex;flex-direction:column;gap:12px}
.tfs-enroll .tfs-course{
  display:block;
  border:1px solid var(--tfs-line);border-radius:6px;padding:16px 18px;
  transition:border-color .15s,box-shadow .15s,background .15s;position:relative;
  font-weight:400;
}
/* display:flex is repeated on the element itself so a theme rule such as
   `label{display:block}` cannot flatten the row. */
.tfs-enroll .tfs-course__select{display:flex;align-items:flex-start;gap:16px;cursor:pointer}
.tfs-course:hover{border-color:var(--tfs-accent-soft)}
/* The radio stays in the DOM (it carries the value and keeps keyboard support)
   but is never painted. It must not use display:none, or it would drop out of
   the tab order. */
.tfs-enroll .tfs-course input[name="course"]{
  position:absolute;opacity:0;pointer-events:none;
  width:1px;height:1px;margin:0;padding:0;border:0;
}

/* Thumbnail. The box matches the 360x230 artwork, so the image fills it with
   nothing cropped; the fixed ratio also keeps the row height stable when a
   course has no image (an empty course shows a labelled placeholder).
   max-width lets it shrink on narrower cards while the ratio holds. */
.tfs-course__thumb{
  flex:none;width:360px;max-width:40%;aspect-ratio:360/230;
  border-radius:4px;overflow:hidden;
  background:var(--tfs-cream);display:flex;align-items:center;justify-content:center;
}
/* contain, not cover: the artwork carries the course name as text, so an image
   that is not exactly 360x230 must letterbox rather than have words cropped. */
.tfs-course__thumb img{width:100%;height:100%;object-fit:contain;display:block}
.tfs-course__thumb.is-empty{border:1px dashed var(--tfs-line)}
.tfs-course__thumb-ph{font-size:13px;color:var(--tfs-muted);letter-spacing:.05em}

.tfs-course__body{flex:1 1 auto;min-width:0;display:block}
.tfs-course__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.tfs-course__title{font-weight:600;font-size:15.5px;line-height:1.45;color:var(--tfs-ink)}
.tfs-course__link{
  font-size:16.5px;font-weight:600;color:var(--tfs-ink);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;white-space:nowrap;
}
.tfs-course__link:hover{color:var(--tfs-accent)}

/* Per-audience availability badges, on their own line above the รายละเอียด
   link. Each pairs an audience label with a จำนวนสมัคร / จำนวนเต็ม count; the
   approved total comes from TFS_Fields::decorate_quota. */
.tfs-course__avail{display:flex;flex-wrap:wrap;gap:0;margin-top:10px}
.tfs-course__detail{margin-top:8px;padding:10px 0;color:#999}
.tfs-avail{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 8px;
  padding:8px 0;border-radius:12px;
  font-size:13.5px;line-height:1.5;
}
.tfs-avail__label{color:var(--tfs-ink);font-weight:600}
.tfs-avail__cap{color:var(--tfs-muted);font-weight:400;font-size:12.7px}
.tfs-avail__count{display:inline-flex;align-items:baseline;gap:6px;color:var(--tfs-ink);font-size:13.5px}
.tfs-avail__tag{
  padding:1px 9px;border-radius:999px;font-size:12px;font-weight:600;
}
.tfs-avail.is-open .tfs-avail__tag{background:#eee;color:var(--tfs-ink)}
.tfs-avail.is-full{opacity:.72}
.tfs-avail.is-full .tfs-avail__tag{background:#fdecea;color:var(--tfs-danger)}

/* Optional info blocks (เหมาะสำหรับ / รูปแบบเรียน), edited per course under
   คอร์สเรียน (BOI). Each is an orange badge label above its free-text body; line
   breaks the admin typed are preserved (nl2br in the markup). */
.tfs-course__info{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.tfs-course__info-block{display:flex;flex-direction:column;gap:8px}
.tfs-course__info-label{
  align-self:flex-start;
  padding:5px 14px;border-radius:2px;
  background:var(--tfs-info);color:var(--tfs-white);
  font-size:14px;font-weight:700;line-height:1.4;letter-spacing:.01em;
}
.tfs-course__info-text{
  /* Normal weight: the card body sits inside a <label>, which is 600 by default. */
  font-size:14.5px;line-height:1.65;font-weight:400;color:var(--tfs-ink);
}

/* "สมัครเรียน" call-to-action on each card. A pill-outline button in the site's
   black-on-white tone. It is a labelable element, so it does not trip the card's
   own <label>; JS selects the course and advances to the next step (see the JS).
   Present on every viewport; on desktop it is pushed to the card's foot so all
   three line up (see the min-width block below). */
.tfs-course__cta{
  display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;margin-top:20px;
  padding:9px 30px;
  font-family:var(--tfs-font);font-weight:700;font-size:15px;line-height:1.2;
  color:var(--tfs-ink);background:var(--tfs-white);
  border:2px solid var(--tfs-black);border-radius:999px;
  cursor:pointer;transition:background .15s,color .15s;
}
.tfs-course__cta:hover{background:var(--tfs-black);color:var(--tfs-white)}
.tfs-course__cta:focus-visible{outline:2px solid var(--tfs-ink);outline-offset:2px}

/* Desktop only: the three courses sit side by side as tall cards — image on top,
   details and the enrol button stacked beneath — instead of a vertical list of
   wide rows. Below 561px the mobile rules further down keep the single-column
   stack, so this never applies to phones. */
@media(min-width:561px){
  .tfs-courses{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;
  }
  .tfs-enroll .tfs-course{display:flex;flex-direction:column}
  .tfs-enroll .tfs-course__select{
    flex:1 1 auto;flex-direction:column;align-items:stretch;gap:14px;
  }
  .tfs-course__thumb{width:100%;max-width:none}
  .tfs-course__body{display:flex;flex-direction:column;flex:1 1 auto}
}

/* Detail lightbox */
.tfs-lightbox{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px}
.tfs-lightbox[hidden]{display:none}
.tfs-lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.tfs-lightbox__dialog{position:relative;max-width:min(92vw,1000px);max-height:90vh;display:flex}
.tfs-lightbox__img{
  max-width:100%;max-height:90vh;width:auto;height:auto;display:block;
  border-radius:4px;background:var(--tfs-white);box-shadow:0 10px 40px rgba(0,0,0,.4);
}
.tfs-lightbox__close{
  position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;
  border:none;background:var(--tfs-white);color:var(--tfs-ink);font-size:22px;line-height:1;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;
}
.tfs-lightbox__close:hover{background:var(--tfs-cream)}
@media(max-width:560px){
  .tfs-lightbox{padding:16px}
  .tfs-lightbox__close{top:-10px;right:-10px}
}

.tfs-course__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:9px}
.tfs-course__meta-item{
  font-size:13.5px;color:var(--tfs-muted);position:relative;
}
.tfs-course__meta-item + .tfs-course__meta-item{padding-left:11px}
.tfs-course__meta-item + .tfs-course__meta-item::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:var(--tfs-line);
}

/* Seats remaining, one row per audience with a thin availability bar. */
.tfs-course__quota{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.tfs-quota{display:flex;align-items:center;gap:10px;font-size:13.5px}
.tfs-quota__label{flex:none;width:64px;color:var(--tfs-ink);font-weight:600}
.tfs-quota__bar{
  flex:1 1 auto;max-width:160px;height:6px;border-radius:3px;
  background:var(--tfs-line);overflow:hidden;
}
.tfs-quota__fill{display:block;height:100%;background:var(--tfs-ink);border-radius:3px}
.tfs-quota__count{flex:none;color:var(--tfs-muted)}
.tfs-quota__count strong{color:var(--tfs-ink);font-weight:600}
.tfs-quota.is-full .tfs-quota__fill{background:var(--tfs-accent-soft)}
.tfs-quota.is-full .tfs-quota__count{color:var(--tfs-accent)}

/* Selected state. The is-selected class is set by JS as a fallback for browsers
   without :has(); both resolve to the same look. */
.tfs-course.is-selected,
.tfs-course:has(input[name="course"]:checked){border-color:var(--tfs-select);box-shadow:0 0 0 3px rgba(195,169,115,.30);background:#fafafa}

/* Keyboard focus needs its own affordance now that there is no radio dot. Kept
   after the selected state so a focused card always shows the stronger ring,
   including one that is already selected. */
.tfs-course.is-focus,
.tfs-course:has(input[name="course"]:focus-visible){
  border-color:var(--tfs-black);box-shadow:0 0 0 3px var(--tfs-ink);
}

/* Batch (รุ่น) selector — its own step. Only the group belonging to the course
   picked in step 1 is shown; JS unhides it and hides the placeholder. */
.tfs-batch-group[hidden]{display:none}
.tfs-batch-group__course{
  display:block;font-size:13px;font-weight:600;color:var(--tfs-muted);
  margin-bottom:6px;
}
.tfs-batch-group__note{
  margin:0 0 12px;font-size:13px;font-weight:600;color:var(--tfs-muted);
  padding-bottom:10px;border-bottom:1px dashed var(--tfs-line);
}
.tfs-batch-group__note .tfs-req{color:var(--tfs-accent);margin-right:3px}
.tfs-batches__empty{font-size:15.5px;color:var(--tfs-muted)}
.tfs-batches__empty[hidden]{display:none}
.tfs-batch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tfs-batch{position:relative;display:block;cursor:pointer}
.tfs-batch input{position:absolute;opacity:0;pointer-events:none}
.tfs-batch__box{
  display:flex;flex-direction:column;gap:2px;height:100%;
  border:1px solid var(--tfs-line);border-radius:6px;padding:9px 12px;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.tfs-batch:hover .tfs-batch__box{border-color:var(--tfs-accent-soft)}
.tfs-batch__name{font-weight:600;font-size:15.5px;color:var(--tfs-ink)}
.tfs-batch__dates{font-size:13.5px;color:var(--tfs-muted)}
.tfs-batch__status{font-size:12.7px;color:var(--tfs-muted);margin-top:2px}
.tfs-batch.is-selected .tfs-batch__box{border-color:var(--tfs-select);box-shadow:0 0 0 2px rgba(195,169,115,.35);background:var(--tfs-white)}
.tfs-batch:has(input:checked) .tfs-batch__box{border-color:var(--tfs-select);box-shadow:0 0 0 2px rgba(195,169,115,.35);background:var(--tfs-white)}
/* Full batches are not selectable. */
.tfs-batch.is-full{cursor:not-allowed}
.tfs-batch.is-full .tfs-batch__box{background:var(--tfs-cream);border-style:dashed;opacity:.7}
.tfs-batch.is-full .tfs-batch__status{color:var(--tfs-accent);font-weight:600}
.tfs-section--batches.tfs-has-error .tfs-batch-grid{outline:1px solid var(--tfs-danger);outline-offset:4px;border-radius:6px}

/* On phones the thumbnail leaves too little room beside the text, so the card
   stacks: image full width, then the details below. */
@media(max-width:560px){
  .tfs-enroll .tfs-course__select{flex-direction:column;gap:12px}
  .tfs-course__thumb{width:100%;max-width:none;aspect-ratio:360/230}
  .tfs-course__body{width:100%}
  .tfs-course__meta{flex-direction:column;align-items:flex-start;gap:3px}
  .tfs-course__meta-item + .tfs-course__meta-item{padding-left:0}
  .tfs-course__meta-item + .tfs-course__meta-item::before{display:none}
  .tfs-quota{flex-wrap:wrap;gap:2px 8px}
  .tfs-quota__label{width:auto}
  .tfs-quota__bar{display:none}
}

/* Actions */
.tfs-actions{padding:26px 28px;text-align:center}
.tfs-enroll .tfs-submit{
  font-family:var(--tfs-font);letter-spacing:.14em;text-transform:uppercase;
  font-size:15px;font-weight:600;color:#fff;background:var(--tfs-ink);
  border:none;border-radius:3px;padding:15px 48px;cursor:pointer;transition:background .15s;
  width:auto;text-shadow:none;box-shadow:none;line-height:normal;
}
.tfs-enroll .tfs-submit:hover{background:#3a3a3a;color:#fff}
.tfs-enroll .tfs-submit[disabled]{opacity:.55;cursor:not-allowed;background:var(--tfs-ink)}

/* Footer: partner logos on the left, contact details on the right. Sits below
   the form card, spanning the same width. Wraps to stacked rows on mobile. */
.tfs-partners{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 28px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--tfs-line);
}
.tfs-partners__logos{display:flex;align-items:center;flex-wrap:wrap;gap:20px 28px}
.tfs-partners__logo{height:51px;width:auto;max-width:170px;object-fit:contain;display:block}

.tfs-partners__contact{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  font-size:13px;color:var(--tfs-ink);text-align:right;
}
.tfs-partners__label{color:var(--tfs-muted);font-size:13.5px}
.tfs-partners__line,
.tfs-partners__ig,
.tfs-partners__phone{display:inline-flex;align-items:center;gap:7px}
.tfs-partners__line,
.tfs-partners__ig{color:var(--tfs-ink);text-decoration:none;font-weight:600}
.tfs-partners__line:hover,
.tfs-partners__ig:hover{color:var(--tfs-accent)}
.tfs-partners__phone{font-weight:600}
.tfs-partners__phone a{color:var(--tfs-ink);text-decoration:none}
.tfs-partners__phone a:hover{color:var(--tfs-accent)}
.tfs-partners__sep{color:var(--tfs-line);font-weight:400}
.tfs-partners__icon{width:16px;height:16px;flex:none}

@media(max-width:640px){
  .tfs-partners{justify-content:center}
  .tfs-partners__logos{justify-content:center;gap:16px 22px}
  .tfs-partners__logo{height:30px}
  .tfs-partners__contact{align-items:center;text-align:center;width:100%}
}

.tfs-foot{text-align:center;color:var(--tfs-muted);font-size:13.5px;margin-top:18px}

/* Feedback */
.tfs-notice{
  margin:0 28px 18px;padding:13px 15px;border-radius:3px;font-size:14px;
  border:1px solid var(--tfs-danger);background:#fdf3f2;color:var(--tfs-danger);
}
.tfs-notice ul{margin:6px 0 0;padding-left:18px;list-style:disc}
.tfs-notice li{margin-top:2px}

.tfs-field-error{display:block;font-size:12px;color:var(--tfs-danger);margin-top:5px;font-weight:400}
.tfs-enroll .tfs-has-error input,
.tfs-enroll .tfs-has-error select,
.tfs-enroll .tfs-has-error textarea{border-color:var(--tfs-danger)}

.tfs-success{
  /* The confirmation panel is a few short lines, so it keeps the original
     reading width rather than stretching across the wider wrap. */
  max-width:760px;margin:0 auto;
  background:var(--tfs-white);border:1px solid var(--tfs-line);border-radius:4px;
  padding:48px 28px;text-align:center;
}
.tfs-success__mark{
  width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  border:2px solid var(--tfs-black);color:var(--tfs-black);
  display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;
}
.tfs-success h2{
  font-family:var(--tfs-font);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:20px;margin-bottom:10px;color:var(--tfs-ink);
}
.tfs-success p{color:var(--tfs-muted);font-size:14.5px}
.tfs-success .tfs-ref{margin-top:14px;font-size:13px;color:var(--tfs-ink)}
.tfs-success .tfs-ref strong{font-family:var(--tfs-font);letter-spacing:.08em}
/* "กลับไปหน้าลงทะเบียน" — a black pill matching the submit button. */
.tfs-success .tfs-again{
  display:inline-flex;align-items:center;justify-content:center;margin-top:26px;
  font-family:var(--tfs-font);font-weight:600;font-size:15px;
  color:#fff;background:var(--tfs-ink);
  border:none;border-radius:3px;padding:13px 34px;cursor:pointer;transition:background .15s;
}
.tfs-success .tfs-again:hover{background:#3a3a3a;color:#fff}

/* Busy state */
.tfs-enroll.is-busy form{opacity:.6;pointer-events:none}