/* Force our red focus style (themes/browsers often inject blue outline/box-shadow) */
.a5rr__field input:focus,
.a5rr__field input:focus-visible,
.a5rr__field select:focus,
.a5rr__field select:focus-visible,
.a5rr__field textarea:focus,
.a5rr__field textarea:focus-visible{
  border-color:var(--a5rr-accent) !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(216,27,44,.18) !important;
}

/* Guard against theme-level focus rings */
.a5rr__field input,
.a5rr__field select,
.a5rr__field textarea{outline:none;}

.a5rr, .a5rr *{box-sizing:border-box}
.a5rr{--a5rr-nav-space:0px;--a5rr-accent:#d81b2c;max-width:980px;margin:24px auto;padding:16px;padding-bottom:calc(16px + var(--a5rr-nav-space));border:1px solid #e5e7eb;border-radius:16px;background:#fff;font-size:18px;line-height:1.5;font-family:'Noto Sans Thai','LINE Seed Sans TH',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;}
.a5rr__header{margin-bottom:16px}
.a5rr__title{margin:0 0 6px;font-size:24px}
.a5rr__subtitle{margin:0;color:#6b7280;font-size:15px}
.a5rr__stepper{position:relative;display:flex;gap:18px;align-items:flex-start;justify-content:space-between;margin:14px 0 18px;padding:8px 6px 0}
.a5rr__stepperTrack{position:absolute;left:24px;right:24px;top:26px;height:2px;border-radius:999px;background:#e5e7eb;overflow:hidden;z-index:0}
.a5rr__stepperTrackFill{display:block;height:100%;width:0%;background:var(--a5rr-accent)}
.a5rr__stepItem{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:72px;cursor:pointer;user-select:none}
.a5rr__stepCircle{width:36px;height:36px;border-radius:999px;border:2px solid var(--a5rr-accent);color:var(--a5rr-accent);display:flex;align-items:center;justify-content:center;font-weight:700;background:#fff;position:relative;z-index:2}
.a5rr__stepLabel{font-size:13px;color:#6b7280;text-align:center;line-height:1.2}
.a5rr__stepItem--active .a5rr__stepCircle{border-color:var(--a5rr-accent);background:var(--a5rr-accent);color:#fff}
.a5rr__stepItem:not(.a5rr__stepItem--active) .a5rr__stepCircle{border-color:rgba(216,27,44,.35);color:rgba(216,27,44,.35);background:#fff}
.a5rr__stepItem--active .a5rr__stepLabel{color:#111827;font-weight:600}
.a5rr__stepItem:focus{outline:0}
.a5rr__stepItem:focus-visible .a5rr__stepCircle{box-shadow:0 0 0 4px rgba(216,27,44,.18)}
.a5rr__content{min-height:0}

/* Step 4 (Summary) uses stacked cards below; keep it tight (no big empty gap). */
.a5rr-step-4 .a5rr__content{min-height:auto}
.a5rr__panel{animation:fadeIn .18s ease}
.a5rr__panel--hidden{display:none}
.a5rr__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.a5rr__grid{grid-template-columns:1fr}}
.a5rr__field{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.a5rr__field span{font-size:13px;color:#374151}
.a5rr__field input,.a5rr__field select,.a5rr__field textarea{padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;font-size:15px}
.a5rr__hint{color:#6b7280;font-size:13px}
.a5rr__btn{padding:10px 14px;border-radius:12px;border:1px solid #111827;background:#111827;color:#fff;cursor:pointer;white-space:nowrap}
.a5rr__btn[disabled]{opacity:.5;cursor:not-allowed}
.a5rr__btn--secondary{background:#fff;color:#111827}
.a5rr__toast{margin-top:12px;color:#065f46;font-size:13px;min-height:18px}
.a5rr__modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(17,24,39,.55);z-index:9999;padding:16px}
.a5rr__modal--hidden{display:none}
.a5rr__modalBox{width:min(560px,100%);background:#fff;border-radius:16px;padding:18px;border:1px solid #e5e7eb}
.a5rr__modalActions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.a5rr__debug{margin-top:14px}

/* Nav layout */
.a5rr__nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}
.a5rr__navRight{display:flex;gap:10px;align-items:center}

/* Radios */
.a5rr__radioRow{display:flex;gap:12px;flex-wrap:wrap}
.a5rr__radioRow--center{justify-content:center}

.a5rr__radio{display:flex;gap:8px;align-items:center;padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;cursor:pointer;user-select:none}
.a5rr__radio input{margin:0}
.a5rr__radioGrid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}
@media (max-width:720px){.a5rr__radioGrid{grid-template-columns:1fr}}
/* Radio card groups (used in Shirt step) */
.a5rr__radioCards{display:grid;gap:12px}
.a5rr__radioCards--2{grid-template-columns:repeat(2, minmax(220px, 1fr));max-width:520px;margin:0 auto}
.a5rr__radioCards--sizes{grid-template-columns:repeat(4, minmax(0,1fr));max-width:820px}
@media (max-width: 900px){.a5rr__radioCards--sizes{grid-template-columns:repeat(3, minmax(0,1fr))}}
@media (max-width: 720px){
  .a5rr__radioCards--2{grid-template-columns:1fr;max-width:420px}
  .a5rr__radioCards--sizes{grid-template-columns:repeat(2, minmax(0,1fr))}
}

/* Step 2 (Shirt): keep Shirt type on top and Size grid below (centered) */
.a5rr__shirtLayout{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.a5rr__shirtLayout .a5rr__field{width:100%}
/* Force size cards to be a neat 2-column grid within the centered layout */
[data-panel="2"] .a5rr__radioCards--sizes{max-width:520px;margin:0 auto;grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width: 720px){
  .a5rr__shirtLayout{max-width:420px}
  [data-panel="2"] .a5rr__radioCards--sizes{max-width:420px}
}

.a5rr__radioCard{position:relative;display:flex;gap:12px;align-items:center}
.a5rr__radioCard input{position:absolute;opacity:0;pointer-events:none}
.a5rr__radioCardInner{position:relative;display:flex;flex-direction:column;gap:2px;width:100%;padding:12px 14px 12px 44px;border:1px solid #e5e7eb;border-radius:14px}
.a5rr__radioCardInner:before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:999px;border:2px solid #d1d5db;background:#fff}
.a5rr__radioCard input:checked + .a5rr__radioCardInner:before{border-color:var(--a5rr-accent);box-shadow:inset 0 0 0 4px var(--a5rr-accent)}
.a5rr__radioCard input:focus-visible + .a5rr__radioCardInner:before{border-color:var(--a5rr-accent)}
.a5rr__radioCardTitle{font-weight:700;color:#111827}
.a5rr__radioCardMeta{font-size:12px;color:#6b7280;line-height:1.25}
.a5rr__radioCard:hover .a5rr__radioCardInner{border-color:#d1d5db}
.a5rr__radioCard input:checked + .a5rr__radioCardInner{border-color:var(--a5rr-accent);box-shadow:0 0 0 4px rgba(216,27,44,.12)}
.a5rr__radioCard input:focus-visible + .a5rr__radioCardInner{border-color:var(--a5rr-accent);box-shadow:0 0 0 4px rgba(216,27,44,.18)}

@keyframes fadeIn{from{opacity:.6;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}

/* Validation errors */
.a5rr__hasError input,
.a5rr__hasError select,
.a5rr__hasError textarea{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.a5rr__errorMsg{margin-top:6px;color:#dc2626;font-size:12px;line-height:1.35}
.a5rr__fieldBoxError{border:1px solid #dc2626;border-radius:12px;padding:10px 12px;box-shadow:0 0 0 3px rgba(220,38,38,.08)}


/* Responsive + Mobile sticky nav */
.a5rr__stepperCompact{display:none;margin:14px 0 18px}
.a5rr__stepperLine{height:6px;border-radius:999px;background:#e5e7eb;overflow:hidden}
.a5rr__stepperFill{display:block;height:100%;width:25%;background:#111827;border-radius:999px}
.a5rr__stepperText{margin-top:8px;font-size:14px;color:#374151}


@media (max-width: 1024px){
   .a5rr{max-width:820px;margin:16px auto;padding:16px}
}

@media (max-width: 900px){
  .a5rr__grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
   .a5rr{margin:0;border-radius:0;border-left:0;border-right:0}
  .a5rr__stepper{display:none}
  .a5rr__stepperCompact{display:block}
  .a5rr__navRight{gap:8px}
  .a5rr__btn{padding:12px 14px}
  /* Mobile: show Add Applicant button above nav buttons */
  .a5rr__nav{flex-wrap:wrap}
  .a5rr__navLeft{display:block;width:100%}
  .a5rr__navLeft .a5rr__btn{width:100%}
  .a5rr__navRight{width:100%;justify-content:space-between}
  .a5rr__navRight .a5rr__btn{flex:1;width:100%}
}
@media (max-width: 1024px){
  .a5rr--mobileNav .a5rr__nav{
    position:fixed;
    left:0; right:0; bottom:0;
    max-width:980px;
    margin:0 auto;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid #e5e7eb;
    z-index:9999;
  }
  .a5rr--mobileNav .a5rr__navLeft{width:100%}
  .a5rr--mobileNav .a5rr__navRight{width:100%;justify-content:space-between}
  .a5rr--mobileNav .a5rr__navRight .a5rr__btn{flex:1}
}

/* Summary overflow + mobile wrapping */
.a5rr__summary{overflow-x:hidden}
.a5rr__summaryMain{min-width:0}
.a5rr__summaryMain div{word-break:break-word}
.a5rr__summaryCard{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.a5rr__summaryActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:480px){
  .a5rr__summaryActions{width:100%;justify-content:flex-start}
}

.a5rr__summaryHeader{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.a5rr__summaryTitle{font-weight:700}
.a5rr__summaryMeta{margin-top:4px;color:#6b7280;font-size:14px;word-break:break-word}


/* Sections / Details */
.a5rr__section{margin:14px 0}
.a5rr__sectionTitle{margin:0 0 10px;font-size:18px}
.a5rr__helper{display:block;margin-top:6px;color:#6b7280;font-size:13px}
.a5rr__personTitle{margin:4px 0 10px;font-size:18px;font-weight:700;color:#111827}
.a5rr__shirtBanner{margin:0 0 12px}
.a5rr__shirtBannerImg{display:block;width:100%;max-width:720px;height:auto;border:1px solid #e5e7eb;border-radius:12px}
.a5rr__details{margin:14px 0;border:1px solid #e5e7eb;border-radius:14px;padding:10px 12px;background:#fafafa}
.a5rr__detailsSummary{cursor:pointer;font-weight:600;list-style:none}
.a5rr__detailsSummary::-webkit-details-marker{display:none}
.a5rr__detailsSummary:after{content:'▾';float:right;opacity:.7}
.a5rr__details[open] .a5rr__detailsSummary:after{content:'▴'}
.a5rr__detailsBody{margin-top:10px}

/* Card (Emergency contact) */
.a5rr__card{margin:16px 0;padding:14px 14px;border:1px solid #e5e7eb;border-radius:16px;background:#fff}
.a5rr__cardHead{margin-bottom:10px}
.a5rr__cardTitle{margin:0;font-size:18px}
.a5rr__cardSub{margin:4px 0 0;color:#6b7280;font-size:14px}
.a5rr__field--full{grid-column:1 / -1}

/* Inputs sizing */
.a5rr__field input,.a5rr__field select, .a5rr__field textarea{font-size:18px}
.a5rr__field span{font-size:14px}


/* -----------------------------
   Shipping step layout
------------------------------*/
.a5rr__shipLayout{
  max-width: 720px;
  margin: 0 auto;
}

.a5rr__grid--ship{
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.a5rr__details{
  border: 1px solid var(--a5rr-border);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
}

.a5rr__details summary{
  cursor: pointer;
  font-weight: 600;
  color: var(--a5rr-text);
  list-style: none;
}

.a5rr__details summary::-webkit-details-marker{ display:none; }

.a5rr__details--full{
  grid-column: 1 / -1;
}

.a5rr__grid--shipOptional{
  margin-top: 10px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

/* Checkbox card (used in Shipping) */
.a5rr__checkCard{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--a5rr-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
  cursor: pointer;
  user-select: none;
}

.a5rr__checkCard input{
  margin-top: 3px;
}

.a5rr__checkCardTitle{
  display:block;
  font-weight: 600;
  line-height: 1.2;
}

.a5rr__checkCardHint{
  display:block;
  margin-top: 2px;
  color: var(--a5rr-muted);
  font-size: 0.95em;
}

.a5rr__checkCard--compact{
  padding: 12px 14px;
}

.a5rr__consentField{
  margin-top: 10px;
}

.a5rr__consentChecks{
  display: grid;
  gap: 8px;
}

.a5rr__consentText{
  margin-top: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  padding: 12px;
  color: #374151;
  font-size: 13px;
  line-height: 1.5;
}

.a5rr__consentText p{
  margin: 0 0 8px;
  color: #111827;
}

.a5rr__consentText ol{
  margin: 0;
  padding-left: 18px;
}

.a5rr__consentText li + li{
  margin-top: 6px;
}

/* Highlight selected checkcard */
.a5rr__checkCard:has(input:checked){
  border-color: var(--a5rr-accent);
  box-shadow: 0 0 0 3px rgba(210, 22, 28, .12);
}

@media (max-width: 900px){
  .a5rr__grid--ship{ grid-template-columns: 1fr; }
  .a5rr__grid--shipOptional{ grid-template-columns: 1fr; }
}

/* Always show Step 1 Additional info (optional) */
.a5rr__details[open] > .a5rr__detailsSummary{display:none;}
.a5rr__details[open]{border:0;margin-top:12px;padding:0;}
.a5rr__details[open] .a5rr__detailsBody{padding:0;border:0;background:transparent;}