/* ============================================================================
   NRNG Design Tokens  —  shop.noracenogoal.com
   Source of truth for the registration + shop look.
   Fonts load from Google Fonts (see @import).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

:root{
  /* ---- brand core ---- */
  --nrng-yellow:        #F7B500;
  --nrng-yellow-deep:   #E0A200;
  --nrng-yellow-soft:   #FFF3D2;
  --nrng-yellow-line:   #F2D88A;

  --nrng-ink:           #16140F;
  --nrng-ink-2:         #2A2722;
  --nrng-ink-3:         #3C382F;

  --nrng-paper:         #FFFFFF;
  --nrng-bg:            #F3F1EA;
  --nrng-bg-2:          #ECE9DF;

  --nrng-line:          #E2DDD1;
  --nrng-line-2:        #D2CCBC;
  --nrng-muted:         #736C5C;
  --nrng-muted-2:       #9A9485;

  /* ---- status ---- */
  --nrng-green:         #2E7D46;
  --nrng-green-soft:    #E5F1E8;
  --nrng-danger:        #C44A30;
  --nrng-danger-soft:   #FBEBE6;
  --nrng-info:          #2B6CB0;

  /* ---- shape ---- */
  --nrng-r:    14px;
  --nrng-r-s:  10px;
  --nrng-r-l:  20px;
  --nrng-shadow:    0 4px 24px rgba(22,20,15,.08);
  --nrng-shadow-lg: 0 18px 50px rgba(22,20,15,.22);

  /* ---- type families ---- */
  --nrng-font-display: "Oswald","Noto Sans TC",sans-serif;
  --nrng-font-body:    "Hanken Grotesk","Noto Sans TC",sans-serif;
  --nrng-font-zh:      "Noto Sans TC",sans-serif;
}

/* Buttons */
.nrng-btn{font-family:var(--nrng-font-display);text-transform:uppercase;letter-spacing:.05em;
  font-weight:600;border:0;border-radius:var(--nrng-r-s);padding:13px 22px;font-size:14px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:.15s;white-space:nowrap;min-height:44px}
.nrng-btn--primary{background:var(--nrng-yellow);color:var(--nrng-ink);box-shadow:0 2px 0 var(--nrng-yellow-deep)}
.nrng-btn--primary:hover{background:var(--nrng-yellow-deep);transform:translateY(-1px)}
.nrng-btn--dark{background:var(--nrng-ink);color:#fff}
.nrng-btn--ghost{background:transparent;border:1.5px solid var(--nrng-line-2);color:var(--nrng-ink-2)}
.nrng-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Inputs */
.nrng-input{border:1.5px solid var(--nrng-line-2);border-radius:var(--nrng-r-s);padding:12px 13px;
  font-family:var(--nrng-font-body);font-size:15px;background:#fff;color:var(--nrng-ink);width:100%;
  box-sizing:border-box;min-height:44px}
.nrng-input:focus{outline:0;border-color:var(--nrng-yellow);box-shadow:0 0 0 3px var(--nrng-yellow-soft)}
.nrng-input.is-error{border-color:var(--nrng-danger);box-shadow:0 0 0 3px var(--nrng-danger-soft)}
.nrng-label{font-family:var(--nrng-font-body);font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--nrng-muted);display:block;margin-bottom:5px}
.nrng-field-error{font-size:12px;color:var(--nrng-danger);margin-top:4px}

/* Cards */
.nrng-card{background:var(--nrng-paper);border:1px solid var(--nrng-line);
  border-radius:var(--nrng-r);box-shadow:var(--nrng-shadow)}

/* Pills / tags */
.nrng-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.nrng-tag--green{background:var(--nrng-green-soft);color:var(--nrng-green)}
.nrng-tag--yellow{background:var(--nrng-yellow-soft);color:#8A6A00}
.nrng-tag--red{background:var(--nrng-danger-soft);color:var(--nrng-danger)}

/* Section header bar */
.nrng-band{background:var(--nrng-ink);color:#fff;border-bottom:3px solid var(--nrng-yellow)}

/* Wrapper defaults */
.nrng-wrap{background:var(--nrng-bg);color:var(--nrng-ink);font-family:var(--nrng-font-body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.nrng-wrap h1,.nrng-wrap h2,.nrng-wrap h3,.nrng-wrap h4{
  font-family:var(--nrng-font-display);font-weight:700;letter-spacing:.01em;line-height:1.08;margin:0}
.nrng-wrap .zh{font-family:var(--nrng-font-zh)}

/* ── Register form layout ───────────────────────────────────────────────── */
.nrng-register{max-width:1160px;margin:0 auto;padding:0 18px 54px}

/* Step bar */
.nrng-stepbar{background:var(--nrng-ink);border-bottom:3px solid var(--nrng-yellow);
  position:sticky;top:0;z-index:90;display:flex;align-items:center;gap:0;overflow-x:auto}
.nrng-stepbar__item{display:flex;align-items:center;gap:8px;padding:14px 22px;
  font-family:var(--nrng-font-display);font-size:13px;text-transform:uppercase;letter-spacing:.05em;
  color:rgba(255,255,255,.5);cursor:pointer;white-space:nowrap;border:0;background:transparent;
  min-height:44px;transition:.15s}
.nrng-stepbar__item.is-active{color:#fff}
.nrng-stepbar__item.is-done{color:var(--nrng-yellow)}
.nrng-stepbar__num{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;
  display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}

/* Body grid: form + sticky summary */
.nrng-body{display:grid;grid-template-columns:1fr 350px;gap:24px;align-items:start;margin-top:24px}
@media(max-width:920px){
  .nrng-body{grid-template-columns:1fr}
  .nrng-summary-desktop{display:none}
}

/* Participant card */
.nrng-participant{margin-bottom:18px}
.nrng-participant__head{background:var(--nrng-ink);color:#fff;border-radius:var(--nrng-r) var(--nrng-r) 0 0;
  padding:14px 20px;display:flex;align-items:center;gap:12px}
.nrng-participant__body{padding:20px;border:1px solid var(--nrng-line);border-top:0;
  border-radius:0 0 var(--nrng-r) var(--nrng-r)}

/* Distance chips */
.nrng-dist-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.nrng-dist-chip{border:1.5px solid var(--nrng-line-2);border-radius:var(--nrng-r-s);padding:10px 16px;
  cursor:pointer;background:#fff;text-align:left;transition:.15s;min-height:44px}
.nrng-dist-chip.is-selected{border-color:var(--nrng-yellow);background:var(--nrng-yellow-soft)}
.nrng-dist-chip:disabled,.nrng-dist-chip.is-full{opacity:.45;cursor:not-allowed}
.nrng-dist-chip__label{font-family:var(--nrng-font-display);font-weight:700;font-size:18px;
  text-transform:uppercase;display:block}
.nrng-dist-chip__meta{font-size:12px;color:var(--nrng-muted);margin-top:2px}

/* Tier cards */
.nrng-tiers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.nrng-tier-card{border:1.5px solid var(--nrng-line);border-radius:var(--nrng-r-s);padding:14px 16px}
.nrng-tier-card.is-active{border-color:var(--nrng-yellow);background:var(--nrng-yellow-soft)}
.nrng-tier-card.is-past{opacity:.55}
.nrng-tier-card__label{font-family:var(--nrng-font-display);font-size:13px;text-transform:uppercase;
  letter-spacing:.05em;font-weight:600}
.nrng-tier-card__price{font-family:var(--nrng-font-display);font-size:22px;font-weight:700;
  margin-top:4px}
.nrng-tier-card__price s{font-size:14px;opacity:.5}

/* Form grid */
.nrng-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nrng-form-grid--3{grid-template-columns:1fr 1fr 1fr}
.nrng-form-full{grid-column:1/-1}
@media(max-width:600px){
  .nrng-form-grid,.nrng-form-grid--3{grid-template-columns:1fr}
  .nrng-tiers{grid-template-columns:1fr}
}

/* Segmented control (gender) */
.nrng-seg{display:flex;border:1.5px solid var(--nrng-line-2);border-radius:var(--nrng-r-s);overflow:hidden}
.nrng-seg__btn{flex:1;padding:12px;border:0;background:#fff;font-family:var(--nrng-font-display);
  font-size:13px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:.1s;min-height:44px}
.nrng-seg__btn.is-active{background:var(--nrng-ink);color:#fff}

/* Extras (souvenir) grid */
.nrng-extras-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px}
.nrng-addon-card{border:1px solid var(--nrng-line);border-radius:var(--nrng-r);
  background:#fff;box-shadow:var(--nrng-shadow);overflow:hidden}
.nrng-addon-card__img{background:var(--nrng-bg-2);height:70px;display:flex;
  align-items:center;justify-content:center;color:var(--nrng-muted-2);font-size:13px}
.nrng-addon-card__body{padding:14px}
.nrng-addon-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.nrng-addon-card__name{font-family:var(--nrng-font-display);font-size:14px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em}
.nrng-addon-card__price{font-family:var(--nrng-font-display);font-size:18px;font-weight:700;white-space:nowrap}
.nrng-addon-card__price s{font-size:13px;opacity:.5}
.nrng-addon-card__free{color:var(--nrng-green);font-weight:700;font-size:15px;white-space:nowrap}
.nrng-size-btns{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.nrng-size-btn{padding:6px 12px;border:1.5px solid var(--nrng-line-2);border-radius:6px;
  background:#fff;font-size:12px;cursor:pointer;min-height:36px;transition:.1s}
.nrng-size-btn.is-selected{border-color:var(--nrng-yellow);background:var(--nrng-yellow-soft)}
.nrng-size-btn:disabled{opacity:.35;cursor:not-allowed}
.nrng-qty-stepper{display:flex;align-items:center;gap:10px;margin-top:10px}
.nrng-qty-stepper button{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--nrng-line-2);
  background:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.nrng-qty-stepper button:disabled{opacity:.35;cursor:not-allowed}
.nrng-variation-row{border:1px solid var(--nrng-line);border-radius:6px;padding:10px 12px;background:var(--nrng-bg-2)}
.nrng-variation-row .nrng-qty-stepper{margin-top:8px;margin-left:25px}

/* Order summary card */
.nrng-summary{border:1px solid var(--nrng-line);border-radius:var(--nrng-r);
  background:var(--nrng-paper);box-shadow:var(--nrng-shadow);position:sticky;top:64px;overflow:hidden}
.nrng-summary__head{background:var(--nrng-ink);color:#fff;padding:16px 20px}
.nrng-summary__head-title{font-family:var(--nrng-font-display);font-size:15px;
  text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.nrng-summary__body{padding:16px 20px}
.nrng-summary__line{display:flex;justify-content:space-between;align-items:baseline;
  font-size:14px;margin-bottom:10px}
.nrng-summary__line--total{font-family:var(--nrng-font-display);font-size:22px;font-weight:700;
  border-top:1.5px solid var(--nrng-line);padding-top:12px;margin-top:6px}
.nrng-summary__currency{font-size:13px;color:var(--nrng-muted);font-family:var(--nrng-font-body)}

/* Fixed bottom bar (mobile) */
.nrng-bottom-bar{display:none}
@media(max-width:920px){
  .nrng-bottom-bar{display:flex;position:fixed;bottom:0;left:0;right:0;
    background:var(--nrng-ink);padding:12px 18px;gap:10px;z-index:100;
    border-top:2px solid var(--nrng-yellow);align-items:center}
  .nrng-bottom-bar__total{color:#fff;font-family:var(--nrng-font-display);
    font-size:18px;font-weight:700;flex:1}
}

/* Notices */
.nrng-notice{background:var(--nrng-danger-soft);border-left:3px solid var(--nrng-danger);
  color:var(--nrng-danger);padding:12px 16px;border-radius:6px;font-size:14px;margin-bottom:14px}
.nrng-notice--info{background:#EBF4FF;border-left-color:var(--nrng-info);color:var(--nrng-info)}
.nrng-notice--success{background:var(--nrng-green-soft);border-left-color:var(--nrng-green);
  color:var(--nrng-green)}

/* Payment step */
.nrng-payment-cards{display:grid;gap:12px;margin-bottom:18px}
.nrng-payment-card{border:1.5px solid var(--nrng-line-2);border-radius:var(--nrng-r-s);
  padding:16px 20px;cursor:pointer;transition:.15s}
.nrng-payment-card.is-selected{border-color:var(--nrng-yellow);background:var(--nrng-yellow-soft)}
.nrng-payment-card__label{font-family:var(--nrng-font-display);font-size:14px;
  text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.nrng-card-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

/* Confirmation */
.nrng-confirm{text-align:center;padding:40px 20px}
.nrng-confirm__seal{width:80px;height:80px;background:var(--nrng-green-soft);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;color:var(--nrng-green);font-size:36px}
.nrng-confirm__ticket{background:#fff;border:1px solid var(--nrng-line);border-radius:var(--nrng-r);
  max-width:420px;margin:24px auto;padding:24px;box-shadow:var(--nrng-shadow);text-align:left}
.nrng-confirm__ref{font-family:var(--nrng-font-display);font-size:20px;font-weight:700;
  letter-spacing:.08em;color:var(--nrng-ink)}

/* ── Admin area layout ──────────────────────────────────────────────────── */
.nrng-admin{display:grid;grid-template-columns:230px 1fr;min-height:600px;
  border:1px solid var(--nrng-line);border-radius:var(--nrng-r);overflow:hidden}
.nrng-admin__sidebar{background:var(--nrng-ink);border-right:3px solid var(--nrng-yellow);padding:0}
.nrng-admin__nav-item{display:flex;align-items:center;gap:10px;padding:14px 20px;
  color:rgba(255,255,255,.6);font-size:13px;font-family:var(--nrng-font-display);
  text-transform:uppercase;letter-spacing:.05em;cursor:pointer;border:0;background:transparent;
  width:100%;text-align:left;min-height:44px;transition:.1s}
.nrng-admin__nav-item:hover{color:#fff}
.nrng-admin__nav-item.is-active{color:var(--nrng-yellow)}
.nrng-admin__nav-item:disabled{opacity:.35;cursor:not-allowed}
.nrng-admin__content{padding:28px;background:var(--nrng-bg);overflow-y:auto}

/* Sticky action bar */
.nrng-action-bar{background:#fff;border-bottom:1px solid var(--nrng-line);
  padding:12px 28px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:10}
.nrng-action-bar__title{font-family:var(--nrng-font-display);font-size:16px;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;flex:1}

/* Setup section cards */
.nrng-section-card{background:#fff;border:1px solid var(--nrng-line);border-radius:var(--nrng-r);
  margin-bottom:18px;overflow:hidden}
.nrng-section-card__head{background:var(--nrng-bg-2);padding:14px 20px;display:flex;
  align-items:center;gap:10px;border-bottom:1px solid var(--nrng-line)}
.nrng-section-card__num{width:24px;height:24px;border-radius:50%;background:var(--nrng-ink);
  color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;
  font-family:var(--nrng-font-display);font-weight:700;flex-shrink:0}
.nrng-section-card__title{font-family:var(--nrng-font-display);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em}
.nrng-section-card__body{padding:20px}

/* Toggle switch */
.nrng-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}
.nrng-toggle__track{width:42px;height:24px;border-radius:12px;background:var(--nrng-line-2);
  position:relative;transition:.2s;flex-shrink:0}
.nrng-toggle__track.is-on{background:var(--nrng-yellow)}
.nrng-toggle__thumb{width:18px;height:18px;border-radius:50%;background:#fff;
  position:absolute;top:3px;left:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.nrng-toggle__track.is-on .nrng-toggle__thumb{left:21px}
.nrng-toggle__label{font-size:14px}

/* Timeline */
.nrng-timeline{display:flex;align-items:center;gap:0;margin:14px 0}
.nrng-timeline__seg{flex:1;background:var(--nrng-yellow-soft);border:1px solid var(--nrng-yellow-line);
  padding:8px 12px;font-size:12px;text-align:center}
.nrng-timeline__seg:first-child{border-radius:var(--nrng-r-s) 0 0 var(--nrng-r-s)}
.nrng-timeline__seg:last-child{border-radius:0 var(--nrng-r-s) var(--nrng-r-s) 0;
  background:var(--nrng-danger-soft);border-color:var(--nrng-danger)}
.nrng-timeline__seg:nth-child(2){background:var(--nrng-bg-2)}

/* Reports */
.nrng-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:22px}
.nrng-kpi-card{background:#fff;border:1px solid var(--nrng-line);border-radius:var(--nrng-r);
  padding:18px 20px;box-shadow:var(--nrng-shadow)}
.nrng-kpi-card.is-feature{background:var(--nrng-ink);color:#fff}
.nrng-kpi-card__label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--nrng-muted);font-family:var(--nrng-font-display);font-weight:600}
.nrng-kpi-card.is-feature .nrng-kpi-card__label{color:rgba(255,255,255,.6)}
.nrng-kpi-card__val{font-family:var(--nrng-font-display);font-size:28px;font-weight:700;margin-top:6px}
.nrng-fill-bar{height:8px;background:var(--nrng-bg-2);border-radius:4px;overflow:hidden;margin-top:6px}
.nrng-fill-bar__inner{height:100%;border-radius:4px;background:var(--nrng-green);transition:.4s}
.nrng-fill-bar__inner.is-amber{background:#D97706}
.nrng-fill-bar__inner.is-red{background:var(--nrng-danger)}

/* Registrant table */
.nrng-table-wrap{overflow-x:auto;border-radius:var(--nrng-r);border:1px solid var(--nrng-line)}
.nrng-table{width:100%;border-collapse:collapse;font-size:13px}
.nrng-table thead th{background:var(--nrng-ink);color:#fff;padding:10px 14px;text-align:left;
  font-family:var(--nrng-font-display);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;position:sticky;top:0}
.nrng-table tbody tr:nth-child(even){background:var(--nrng-bg)}
.nrng-table tbody td{padding:10px 14px;border-bottom:1px solid var(--nrng-line);vertical-align:middle}

/* Error / info pages */
.nrng-error-page{max-width:480px;margin:60px auto;text-align:center;padding:0 18px}
.nrng-error-page__icon{font-size:48px;margin-bottom:16px;color:var(--nrng-muted-2)}
.nrng-error-page__title{font-family:var(--nrng-font-display);font-size:26px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.nrng-error-page__msg{color:var(--nrng-muted);font-size:15px;line-height:1.6}

/* Timezone hint */
.nrng-tz-hint{font-size:11.5px;color:var(--nrng-muted);margin-top:4px}

/* Inline link-style trigger (e.g. "Terms and Conditions — Click Here") */
.nrng-link{background:transparent;border:0;padding:0;font:inherit;color:var(--nrng-info);
  text-decoration:underline;cursor:pointer;display:inline-block;min-height:auto}

/* Modal / popup (e.g. Terms & Conditions) */
.nrng-overlay{position:fixed;inset:0;z-index:200;background:rgba(22,20,15,.6);
  backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px}
.nrng-modal{background:var(--nrng-paper);border-radius:var(--nrng-r-l);box-shadow:var(--nrng-shadow-lg);
  width:100%;max-width:880px;height:85vh;display:flex;flex-direction:column;overflow:hidden}
.nrng-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;border-bottom:1px solid var(--nrng-line);background:var(--nrng-ink);color:#fff;flex-shrink:0}
.nrng-modal__head h3{font-family:var(--nrng-font-display);font-size:18px;text-transform:uppercase;letter-spacing:.04em}
.nrng-modal__close{background:transparent;border:0;color:#fff;font-size:26px;line-height:1;
  cursor:pointer;padding:0 4px;min-height:auto}
.nrng-modal__body{flex:1;display:flex;overflow:hidden}
.nrng-modal__body p,.nrng-modal__body .nrng-notice{margin:auto;padding:16px 24px;color:var(--nrng-muted);text-align:center}
.nrng-modal__iframe{flex:1;width:100%;border:0;display:block;background:#fff}
.nrng-fadein{animation:nrng-fade .35s ease both}
@keyframes nrng-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Responsive */
@media(max-width:768px){
  .nrng-admin{grid-template-columns:1fr}
  .nrng-admin__sidebar{border-right:0;border-bottom:3px solid var(--nrng-yellow)}
  .nrng-kpi-grid{grid-template-columns:1fr 1fr}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}