:root{
  /* ALM Sports brand — Amber/Gold palette */
  --clrf-bg-1:#B45309;
  --clrf-bg-2:#92400e;
  --clrf-bg-3:#F59E0B;
  --clrf-panel:#fffbeb;
  --clrf-panel-2:#fefce8;
  --clrf-surface:#ffffff;
  --clrf-surface-soft:#fffbeb;
  --clrf-ink:#15233f;
  --clrf-muted:#6f7a90;
  --clrf-line:rgba(21,35,63,.12);
  --clrf-line-strong:rgba(21,35,63,.2);
  /* Primary ALM amber — matches hero gradient */
  --clrf-accent:#F59E0B;
  --clrf-accent-dark:#B45309;
  --clrf-accent-2:#B45309;
  --clrf-accent-3:#FFEDD5;
  --clrf-accent-rgb:245,158,11;
  --clrf-navy:#0d2147;
  --clrf-navy-2:#132c5a;
  --clrf-ok:#0b7a53;
  --clrf-ok-bg:#ecfdf5;
  --clrf-ok-line:#9ce0be;
  --clrf-danger:#c52828;
  --clrf-danger-bg:#fff1f1;
  --clrf-danger-line:#ffc7c7;
  --clrf-shadow-xl:0 36px 90px rgba(15,35,71,.18);
  --clrf-shadow-lg:0 22px 52px rgba(21,35,63,.16);
  --clrf-shadow-md:0 14px 34px rgba(21,35,63,.1);
  --clrf-shadow-sm:0 8px 18px rgba(21,35,63,.08);
  --clrf-radius-xl:34px;
  --clrf-radius-lg:24px;
  --clrf-radius-md:18px;
  --clrf-radius-sm:14px;
  --clrf-radius-pill:999px;
  --clrf-ease:cubic-bezier(.22,1,.36,1);
}

.clrf-mobile-shell,
.clrf-mobile-shell *,
.clrf-mobile-shell *::before,
.clrf-mobile-shell *::after{box-sizing:border-box}

.clrf-mobile-shell{
  position:relative;
  width:100vw;
  max-width:100vw;
  margin-inline:calc(50% - 50vw);
  min-height:100vh;
  min-height:100svh;
  padding:18px 0 88px;
  overflow-x:clip;
  overflow-y:visible;
  color:var(--clrf-ink);
  isolation:isolate;
}

.clrf-mobile-shell::before,
.clrf-mobile-shell::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:-2;
}

.clrf-mobile-shell::before{
  width:420px;height:420px;
  top:-130px;left:-90px;
  background:
    linear-gradient(90deg, transparent 48.2%, rgba(122,38,12,.24) 48.8%, rgba(122,38,12,.24) 51.2%, transparent 51.8%),
    linear-gradient(0deg, transparent 48.2%, rgba(122,38,12,.22) 48.8%, rgba(122,38,12,.22) 51.2%, transparent 51.8%),
    radial-gradient(circle at 0 50%, transparent 60.8%, rgba(122,38,12,.22) 61.6%, rgba(122,38,12,.22) 63.2%, transparent 64%),
    radial-gradient(circle at 100% 50%, transparent 60.8%, rgba(122,38,12,.22) 61.6%, rgba(122,38,12,.22) 63.2%, transparent 64%),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), rgba(255,255,255,0) 32%),
    linear-gradient(135deg,#ffb156 0%,#ff7b26 45%,#e24a1b 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255,208,140,.28),
    inset 0 0 0 120px rgba(255,255,255,.02),
    0 20px 60px rgba(122,28,7,.24);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 74%,transparent 74.5%);
          mask:radial-gradient(circle at 50% 50%,#000 74%,transparent 74.5%);
}

.clrf-mobile-shell::after{
  inset:0;
  border-radius:0;
  background:
    radial-gradient(circle at 16% 16%, rgba(255,213,154,.46), transparent 16%),
    radial-gradient(circle at 84% 12%, rgba(255,255,255,.16), transparent 16%),
    radial-gradient(circle at 84% 84%, rgba(255,205,137,.22), transparent 18%),
    linear-gradient(135deg, #f1e5d4 0%, #efe0cb 24%, #f7efe5 44%, #faefe3 60%, #f2e4d1 100%);
  z-index:-3;
}

.clrf-mobile-app{
  position:relative;
  width:min(calc(100% - 24px),1000px);
  margin:0 auto;
  max-width:100%;
}

.clrf-app-card{
  position:relative;
  background:
    linear-gradient(125deg, rgba(255,255,255,.08), rgba(255,255,255,0) 22%),
    linear-gradient(100deg, rgba(255,188,118,.18) 0%, rgba(255,188,118,.08) 24%, rgba(255,255,255,0) 24%),
    linear-gradient(180deg, rgba(255,252,247,.98), rgba(255,247,238,.99));
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--clrf-radius-xl);
  box-shadow:var(--clrf-shadow-xl);
  padding:clamp(18px,3vw,34px);
  overflow:hidden;
}

.clrf-app-card::before,
.clrf-app-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.clrf-app-card::before{
  width:280px;height:280px;right:-110px;top:-90px;border-radius:50%;
  background:
    linear-gradient(90deg, transparent 48.4%, rgba(122,38,12,.18) 49%, rgba(122,38,12,.18) 51%, transparent 51.6%),
    radial-gradient(circle at 0 50%, transparent 61%, rgba(122,38,12,.16) 61.8%, rgba(122,38,12,.16) 63.2%, transparent 64%),
    radial-gradient(circle at 100% 50%, transparent 61%, rgba(122,38,12,.16) 61.8%, rgba(122,38,12,.16) 63.2%, transparent 64%),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), rgba(255,255,255,0) 28%),
    linear-gradient(135deg,#ffbe70 0%,#ff8d2d 52%,#df551d 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255,213,153,.38),
    0 10px 40px rgba(122,28,7,.18);
  opacity:.95;
}

.clrf-app-card::after{
  inset:0;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12) 0%, transparent 22%),
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:auto, 120px 120px, 120px 120px;
  opacity:.16;
}

.clrf-inline-error[hidden]{display:none !important}
.clrf-success,.clrf-alert,.clrf-inline-error{
  position:relative;
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 18px;
  border-radius:18px;
  margin:0 0 18px;
  font-size:14px;
  font-weight:700;
  line-height:1.55;
  animation:clrf-fade-up .35s var(--clrf-ease) both;
  box-shadow:var(--clrf-shadow-sm);
}
.clrf-success::before,.clrf-alert::before,.clrf-inline-error::before{
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex:none;font-size:12px;font-weight:900;margin-top:1px;
}
.clrf-success{background:var(--clrf-ok-bg);border:1px solid var(--clrf-ok-line);color:var(--clrf-ok)}
.clrf-success::before{content:"✓";background:#18b46d;color:#fff}
.clrf-alert,.clrf-inline-error{background:var(--clrf-danger-bg);border:1px solid var(--clrf-danger-line);color:var(--clrf-danger)}
.clrf-alert::before,.clrf-inline-error::before{content:"!";background:#ef4444;color:#fff}

.clrf-mobile-hero{
  display:grid;
  grid-template-columns:minmax(280px,420px) minmax(0,1fr);
  gap:clamp(18px,3vw,34px);
  align-items:center;
  padding:clamp(18px,3vw,28px);
  margin-bottom:28px;
  border-radius:30px;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,155,61,.24), transparent 20%),
    radial-gradient(circle at 82% 18%, rgba(255,179,103,.18), transparent 18%),
    linear-gradient(125deg, var(--clrf-navy) 0%, var(--clrf-navy-2) 45%, #1e3567 100%);
  position:relative;
  overflow:hidden;
  box-shadow:var(--clrf-shadow-lg);
}
.clrf-mobile-hero::before,
.clrf-mobile-hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.clrf-mobile-hero::before{
  width:220px;height:220px;left:-70px;bottom:-90px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.4), rgba(255,255,255,0) 26%),
    linear-gradient(135deg,#ffb960 0%,#ff872f 58%,#ea5a1d 100%);
  box-shadow:inset 0 0 0 3px rgba(255,220,170,.24);
  opacity:.96;
}
.clrf-mobile-hero::after{
  inset:0;
  background:
    radial-gradient(circle at 65% 75%, rgba(255,255,255,.12), transparent 16%),
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:auto, 110px 110px, 110px 110px;
  opacity:.18;
}

.clrf-mobile-hero__logoWrap{
  position:relative;
  min-height:300px;
  border-radius:26px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 24% 26%, rgba(255,165,72,.26), transparent 18%),
    linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}
.clrf-mobile-hero__logoWrap::before,
.clrf-mobile-hero__logoWrap::after{content:"";position:absolute;pointer-events:none}
.clrf-mobile-hero__logoWrap::before{
  width:180px;height:180px;right:-40px;top:-40px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), rgba(255,255,255,0) 27%),
    linear-gradient(135deg,#ffbc6f 0%,#ff8a2e 58%,#f05e21 100%);
  box-shadow:inset 0 0 0 2px rgba(255,220,170,.26);
}
.clrf-mobile-hero__logoWrap::after{
  width:140%;height:140%;
  background:
    linear-gradient(115deg, transparent 28%, rgba(255,255,255,.08) 28.6%, transparent 29.2%),
    linear-gradient(65deg, transparent 62%, rgba(255,255,255,.08) 62.6%, transparent 63.2%);
  opacity:.8;
}
.clrf-mobile-hero__logo{
  position:relative;
  max-width:min(78%,320px);
  max-height:230px;
  object-fit:contain;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.24));
  animation:clrf-float 5s ease-in-out infinite;
}

.clrf-mobile-hero__copy{position:relative;z-index:1;color:#fff;padding-right:clamp(0px,2vw,28px)}
.clrf-kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,137,43,.18);
  border:1px solid rgba(255,182,121,.24);
  color:#ffd6b0;
  font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:14px;
}
.clrf-mobile-hero__copy h1{
  margin:0 0 12px;
  font-size:clamp(2.4rem,5vw,4.9rem);
  line-height:.94;
  letter-spacing:-.07em;
  color:#fff5e7;
  text-transform:uppercase;
}
.clrf-mobile-hero__copy p{
  margin:0;
  max-width:720px;
  color:rgba(255,245,231,.82);
  font-size:clamp(15px,2vw,18px);
  line-height:1.75;
}
.clrf-hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.clrf-hero-pills span{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 13px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,248,240,.92);
  font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
}

.clrf-form{display:block}
.clrf-form-layout{
  position:relative;
  display:grid;
  gap:28px;
  align-items:start;
  grid-auto-flow:row;
}
.clrf-form-layout::before,
.clrf-form-layout::after {
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.clrf-form-layout::before{
  width:156px;height:156px;left:-32px;top:18px;border-radius:50%;
  background:
    linear-gradient(90deg, transparent 48.6%, rgba(122,38,12,.2) 49.4%, rgba(122,38,12,.2) 50.6%, transparent 51.4%),
    linear-gradient(0deg, transparent 48.6%, rgba(122,38,12,.18) 49.4%, rgba(122,38,12,.18) 50.6%, transparent 51.4%),
    radial-gradient(circle at 0 50%, transparent 60.8%, rgba(122,38,12,.18) 61.6%, rgba(122,38,12,.18) 63.2%, transparent 64%),
    radial-gradient(circle at 100% 50%, transparent 60.8%, rgba(122,38,12,.18) 61.6%, rgba(122,38,12,.18) 63.2%, transparent 64%),
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.42), rgba(255,255,255,0) 28%),
    linear-gradient(135deg,#ffb45f 0%,#ff8c2d 54%,#e6531e 100%);
  box-shadow:inset 0 0 0 2px rgba(255,223,182,.34), 0 18px 34px rgba(234,87,31,.16);
  opacity:.55;
}
.clrf-form-layout::after{
  width:128px;height:128px;right:18px;top:220px;border-radius:50%;
  background:
    radial-gradient(circle at 34% 34%, rgba(255,255,255,.46), rgba(255,255,255,0) 22%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(255,235,205,.56) 58.8%, rgba(255,235,205,.56) 61.2%, transparent 62%),
    conic-gradient(from 18deg, rgba(255,255,255,0) 0 14%, rgba(255,239,218,.64) 14% 17%, rgba(255,255,255,0) 17% 31%, rgba(255,239,218,.64) 31% 34%, rgba(255,255,255,0) 34% 48%, rgba(255,239,218,.64) 48% 51%, rgba(255,255,255,0) 51% 65%, rgba(255,239,218,.64) 65% 68%, rgba(255,255,255,0) 68% 82%, rgba(255,239,218,.64) 82% 85%, rgba(255,255,255,0) 85% 100%),
    linear-gradient(135deg,#fff7e6 0%,#f2dbc2 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.62),0 14px 26px rgba(21,35,63,.12);
  opacity:.78;
}
.clrf-form-main{position:relative;z-index:1;display:grid;gap:22px;min-width:0}

.clrf-inline-error{position:relative;z-index:1}
.clrf-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:20px}
.clrf-grid-child{display:grid;grid-template-columns:1fr;gap:18px}
.clrf-field{display:flex;flex-direction:column;gap:7px;min-width:0;grid-column:1/-1 !important}
.clrf-col-2{grid-column:1/-1 !important}
.clrf-section-block{grid-column:1/-1;display:grid;gap:6px}
.clrf-section-title{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:8px 0 0;font-size:1.6rem;font-weight:900;letter-spacing:-.05em;color:var(--clrf-ink)}
.clrf-section-title::before{content:"";width:6px;height:28px;border-radius:999px;background:linear-gradient(180deg,var(--clrf-accent),#ffb861);box-shadow:0 0 0 4px rgba(255,107,44,.12)}
.clrf-section-description{color:var(--clrf-muted);font-size:13px;line-height:1.6;max-width:820px;padding-left:18px}

.clrf-field label{
  color:var(--clrf-ink);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.clrf-field input,
.clrf-field select,
.clrf-field textarea{
  width:100%;
  min-height:56px;
  border:1.5px solid rgba(21,35,63,.12);
  border-radius:16px;
  background:rgba(255,255,255,.88);
  color:var(--clrf-ink);
  padding:15px 16px;
  font:600 15px/1.4 inherit;
  box-shadow:0 1px 2px rgba(21,35,63,.03), inset 0 1px 0 rgba(255,255,255,.8);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
  -webkit-appearance:none;appearance:none;
}
.clrf-field textarea{min-height:130px;resize:vertical}
.clrf-field input:hover,.clrf-field select:hover,.clrf-field textarea:hover{border-color:rgba(21,35,63,.22);background:#fff}
.clrf-field input:focus,.clrf-field select:focus,.clrf-field textarea:focus{
  outline:none;
  border-color:rgba(var(--clrf-accent-rgb),.75);
  box-shadow:0 0 0 4px rgba(var(--clrf-accent-rgb),.14),0 8px 20px rgba(21,35,63,.06);
  background:#fff;
  transform:translateY(-1px);
}
.clrf-field input::placeholder,.clrf-field textarea::placeholder{color:#9aa4b7}
.clrf-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f7a90' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;
}
.clrf-help{margin-top:2px;color:var(--clrf-muted);font-size:12px;line-height:1.55}
.clrf-note{margin-top:4px;color:var(--clrf-muted);font-size:12px;line-height:1.65}
.clrf-field.is-hidden,.clrf-section-block.is-hidden{display:none !important}
.clrf-field.has-error input,.clrf-field.has-error select,.clrf-field.has-error textarea{border-color:var(--clrf-danger);box-shadow:0 0 0 4px rgba(197,40,40,.1)}
.clrf-field.has-error label{color:var(--clrf-danger)}
.clrf-field-error-msg{font-size:11px;font-weight:800;color:var(--clrf-danger)}

.clrf-checkbox-field{gap:12px}
.clrf-check{
  position:relative;
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 18px;
  min-height:76px;
  border:1.5px solid rgba(21,35,63,.12);
  border-radius:22px;
  background:rgba(255,255,255,.9);
  cursor:pointer;
  transition:all .18s ease;
}
.clrf-check:hover{background:#fff;transform:translateY(-1px);box-shadow:var(--clrf-shadow-sm);border-color:rgba(255,107,44,.34)}
.clrf-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.clrf-check-box{
  width:28px;height:28px;flex:none;margin-top:2px;
  border:2px solid rgba(21,35,63,.18);
  border-radius:10px;
  background:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 10px rgba(21,35,63,.06);
  transition:all .18s ease;
  position:relative;
}
.clrf-check-box::after{
  content:"";
  position:absolute;
  left:8px;top:3px;
  width:8px;height:14px;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:rotate(45deg) scale(.75);
  opacity:0;
  transition:all .18s ease;
}
.clrf-check input:checked + .clrf-check-box{
  background:linear-gradient(135deg,#F59E0B,#B45309);
  border-color:transparent;
  box-shadow:0 10px 18px rgba(var(--clrf-accent-rgb),.28);
}
.clrf-check input:checked + .clrf-check-box::after{opacity:1;transform:rotate(45deg) scale(1)}
.clrf-check input:focus-visible + .clrf-check-box{
  outline:none;
  box-shadow:0 0 0 4px rgba(var(--clrf-accent-rgb),.18),0 10px 18px rgba(var(--clrf-accent-rgb),.18);
}
.clrf-check-copy{display:grid;gap:6px;min-width:0}
.clrf-check-copy strong{display:block;font-weight:900;color:var(--clrf-ink);font-size:clamp(14px,1.4vw,16px);line-height:1.4;letter-spacing:.02em;text-transform:uppercase}
.clrf-check-copy small{display:block;color:var(--clrf-muted);font-size:12px;line-height:1.55}
.clrf-legal-copy{
  margin-top:2px;
  padding:16px 18px 16px 60px;
  border-left:4px solid rgba(255,107,44,.4);
  background:rgba(255,255,255,.66);
  border-radius:18px;
  color:var(--clrf-muted);
  font-size:13px;
  line-height:1.65;
}
.clrf-legal-title{font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--clrf-ink);margin-bottom:8px}
.clrf-legal-copy p{margin:0}
.clrf-legal-copy ul{margin:0;padding-left:18px;display:grid;gap:8px}
.clrf-radio-group{display:grid;gap:10px}


.clrf-children-repeater{grid-column:1/-1;display:grid;gap:18px;min-width:0}
.clrf-children{display:grid;gap:18px;grid-column:1/-1}
.clrf-child{
  position:relative;
  border:0;
  border-radius:28px;
  padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,239,.98));
  box-shadow:none;
  overflow:hidden;
}
.clrf-child::before{
  content:"";
  position:absolute;
  right:-24px;top:-28px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.4), rgba(255,255,255,0) 25%), linear-gradient(135deg,#ffb760 0%,#ff872e 56%,#eb5721 100%);
  box-shadow:inset 0 0 0 2px rgba(255,224,177,.32);
  opacity:.18;
}
.clrf-child-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.clrf-child-badge{display:flex;align-items:center;gap:12px;min-width:0}
.clrf-child-num{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  color:#fff;font-size:13px;font-weight:900;
  background:linear-gradient(135deg,#ff8c32,#ea511d);
  box-shadow:0 12px 24px rgba(234,81,29,.28);
}
.clrf-child-head strong[data-clrf-child-title]{font-size:clamp(1.15rem,2vw,1.45rem);line-height:1;color:var(--clrf-ink);letter-spacing:-.04em}
.clrf-actions{display:flex;justify-content:flex-end;margin-top:6px}
.clrf-secondary-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:11px 16px;border-radius:14px;
  border:1.5px solid rgba(21,35,63,.12);
  background:#fff;color:var(--clrf-ink);
  font-size:13px;font-weight:900;letter-spacing:.01em;
  cursor:pointer;transition:all .18s ease;
}
.clrf-secondary-btn:hover{transform:translateY(-1px);box-shadow:var(--clrf-shadow-sm);border-color:rgba(21,35,63,.2)}
.clrf-secondary-btn[data-clrf-remove-child]{background:#fff1ef;border-color:#ffd1c7;color:#b42318}
.clrf-secondary-btn[data-clrf-add-child]{background:#fff5ea;border-color:#ffdcb5;color:#b45309}

.clrf-signature{font-style:italic}

.clrf-shirt-band{
  position:relative;
  display:grid;
  grid-template-columns:minmax(180px,240px) minmax(0,1fr);
  gap:22px;
  align-items:center;
  padding:22px;
  border-radius:28px;
  background:linear-gradient(135deg, rgba(255,241,225,.98), rgba(255,250,244,.98));
  border:1px solid rgba(255,153,74,.24);
  overflow:hidden;
  box-shadow:var(--clrf-shadow-sm);
}
.clrf-shirt-band::before{
  content:"";position:absolute;right:-70px;bottom:-70px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.45), rgba(255,255,255,0) 28%), linear-gradient(135deg,#ffb861 0%,#ff8c2f 60%,#ea571f 100%);
  opacity:.16;
}
.clrf-shirt-band__media{position:relative;display:flex;align-items:center;justify-content:center;min-height:220px;border-radius:22px;background:linear-gradient(145deg, rgba(13,33,71,.04), rgba(255,255,255,.6))}
.clrf-shirt-band__glow{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,167,76,.4),transparent 70%);filter:blur(8px)}
.clrf-shirt-band__image{position:relative;max-width:min(90%,220px);max-height:220px;display:block;filter:drop-shadow(0 16px 28px rgba(15,23,42,.16));animation:clrf-float 5s ease-in-out infinite}
.clrf-section-eyebrow{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;background:#fff;color:#b45309;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.clrf-shirt-band__copy h3{margin:0 0 10px;font-size:clamp(2rem,4vw,3.4rem);line-height:.94;letter-spacing:-.06em;color:var(--clrf-ink)}
.clrf-shirt-band__copy p{margin:0;color:var(--clrf-muted);font-size:15px;line-height:1.7}

.clrf-payment-box{
  position:relative;
  align-self:start;
  border-radius:28px;
  padding:22px;
  background:linear-gradient(180deg, rgba(16,34,72,.98), rgba(24,45,89,.98));
  color:#fff9ef;
  border:0;
  box-shadow:none;
  overflow:hidden;
}
.clrf-payment-box::before{
  content:"";position:absolute;right:-46px;top:-48px;width:160px;height:160px;border-radius:50%;
  background:
    linear-gradient(90deg, transparent 48.4%, rgba(122,38,12,.18) 49%, rgba(122,38,12,.18) 51%, transparent 51.6%),
    radial-gradient(circle at 0 50%, transparent 61%, rgba(122,38,12,.16) 61.8%, rgba(122,38,12,.16) 63.2%, transparent 64%),
    radial-gradient(circle at 100% 50%, transparent 61%, rgba(122,38,12,.16) 61.8%, rgba(122,38,12,.16) 63.2%, transparent 64%),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.42), rgba(255,255,255,0) 28%),
    linear-gradient(135deg,#ffbf71 0%,#ff902f 56%,#eb571e 100%);
  box-shadow:inset 0 0 0 2px rgba(255,220,170,.28);
  opacity:.95;
}
.clrf-payment-head{position:relative;z-index:1}
.clrf-payment-head h3{margin:0 0 8px;font-size:clamp(1.8rem,3vw,2.7rem);line-height:.94;letter-spacing:-.06em;color:#fff5e8}
.clrf-payment-head p{margin:0 0 18px;color:rgba(255,245,232,.72);line-height:1.65;font-size:15px}
.clrf-total-box{border:1px solid rgba(255,255,255,.12);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.clrf-total-row{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;font-size:1.08rem;font-weight:900;background:rgba(255,255,255,.08);letter-spacing:-.02em}
.clrf-mini-lines div{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:13px 18px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,247,238,.82);font-size:13px}
.clrf-mini-lines [data-line]{font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.clrf-child-cost-line{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:13px 18px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,247,238,.82);font-size:13px}
.clrf-child-cost-line span:last-child{font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.clrf-payment-state{display:inline-flex;align-items:center;gap:8px;margin:14px 0 12px;padding:10px 14px;border-radius:999px;background:rgba(255,203,143,.16);border:1px solid rgba(255,193,120,.18);color:#ffd9b2;font-size:13px;font-weight:800;line-height:1.45}
.clrf-payment-state.error{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.22);color:#ffd1cf}
.clrf-payment-state.success{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.22);color:#c5ffe6}
.clrf-paypal-buttons{display:grid;gap:12px;min-height:56px;position:relative;z-index:1}
.clrf-payment-box{z-index:1}
.clrf-paypal-buttons>div{width:100%!important;min-height:48px}
.clrf-paypal-buttons iframe,.clrf-paypal-buttons .paypal-buttons{max-width:100%!important}
.clrf-payment-box .clrf-alert{margin-top:10px;background:rgba(255,241,241,.95)}

.clrf-submit-row{display:grid;gap:10px;grid-column:1/-1}
.clrf-submit-btn{
  position:relative;
  width:100%;min-height:58px;
  border:0;border-radius:18px;
  background:linear-gradient(135deg,#F59E0B 0%,#B45309 60%,#92400e 100%);
  color:#fff;
  padding:17px 22px;
  font-size:16px;font-weight:900;letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 16px 36px rgba(var(--clrf-accent-rgb),.32);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.clrf-submit-btn:hover{transform:translateY(-2px);box-shadow:0 22px 44px rgba(var(--clrf-accent-rgb),.42)}
.clrf-submit-btn:disabled{opacity:.58;cursor:not-allowed;box-shadow:none;transform:none}
.clrf-submit-btn.loading{color:transparent;pointer-events:none}
.clrf-submit-btn.loading::before{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;transform:translate(-50%,-50%);animation:clrf-spin .75s linear infinite}
.clrf-submit-note{text-align:center;font-size:12px;color:var(--clrf-muted)}

@media (min-width: 1024px){
  .clrf-form-layout{grid-template-columns:minmax(0,1fr) minmax(340px,390px)}
  .clrf-payment-box{position:sticky;top:24px}
  .clrf-grid .clrf-section-title{margin-top:8px}
}

@media (min-width: 1200px){
  .clrf-mobile-app{width:min(calc(100% - 40px),1000px)}
}

@media (max-width: 1023px){
  .clrf-mobile-shell{padding:14px 0 140px}
  .clrf-mobile-app{width:min(calc(100% - 18px),1000px)}
  .clrf-mobile-hero{grid-template-columns:1fr;gap:18px}
  .clrf-form-layout{grid-template-columns:1fr}
  .clrf-form-layout::before{width:124px;height:124px;left:-24px;top:8px;opacity:.48}
  .clrf-form-layout::after{width:102px;height:102px;right:4px;top:auto;bottom:260px;opacity:.68}
  .clrf-form-main::before{width:92px;height:92px;left:auto;right:8px;bottom:-22px;opacity:.36}
  .clrf-shirt-band{grid-template-columns:1fr}
}

@media (max-width: 720px){
  .clrf-mobile-shell{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);padding:0 0 150px}
  .clrf-mobile-app{width:100%}
  .clrf-mobile-shell::after{border-radius:0}
  .clrf-app-card{padding:14px;border-radius:24px;border:0;box-shadow:none}
  .clrf-mobile-hero{margin:-16px -14px 20px;padding:24px 16px 16px;border-radius:0 0 24px 24px}
  .clrf-mobile-hero__main{grid-template-columns:64px minmax(0,1fr);gap:16px}
  .clrf-mobile-hero__copy h1{font-size:clamp(1.75rem,8vw,2.4rem)}
  .clrf-mobile-hero__copy p{font-size:14px}
  .clrf-stepper{top:6px;padding:4px;gap:2px}
  .clrf-stepper-item{padding:5px 10px;min-width:max-content}
  .clrf-stepper-copy strong{font-size:11px}
  .clrf-bottom-bar{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px;border-radius:18px}
  .clrf-bottom-bar__summary{display:flex;justify-content:space-between;align-items:center;width:100%;padding-bottom:10px;border-bottom:1px solid rgba(21,35,63,.08)}
  .clrf-bottom-bar__summary span{font-size:12px}
  .clrf-bottom-bar__summary strong{font-size:1.35rem}
  .clrf-bottom-bar__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .clrf-submit-btn--step, .clrf-bottom-bar__actions .clrf-secondary-btn{min-width:0;width:100%}
  .clrf-form-layout{gap:18px}
  .clrf-form-layout::before{width:104px;height:104px;left:-24px;top:14px}
  .clrf-form-layout::after{width:86px;height:86px;right:-10px;bottom:240px;top:auto}
  .clrf-form-main::before{width:74px;height:74px;right:-2px;bottom:-18px}
  .clrf-grid,.clrf-grid-child{grid-template-columns:1fr;gap:14px}
  .clrf-field,.clrf-grid-child .clrf-field,.clrf-col-2{grid-column:1/-1}
  .clrf-section-title{font-size:1.32rem}
  .clrf-check{padding:14px}
  .clrf-child{padding:16px}
  .clrf-child-head strong[data-clrf-child-title]{max-width:100%}
  .clrf-payment-box,.clrf-shirt-band{padding:18px}
  .clrf-shirt-band__copy h3{font-size:clamp(1.7rem,9vw,2.4rem)}
  .clrf-submit-btn{min-height:56px}
}

@media (prefers-reduced-motion: reduce){
  .clrf-mobile-shell *, .clrf-mobile-shell *::before, .clrf-mobile-shell *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@keyframes clrf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes clrf-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes clrf-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

@media (min-width: 1024px){
  .clrf-app-card{padding:30px 30px 34px}
  .clrf-payment-box{top:28px}
}

@media (max-width: 640px){
  .clrf-check{padding:16px;border-radius:18px;min-height:70px}
  .clrf-check-box{width:24px;height:24px;border-radius:8px}
  .clrf-check-box::after{left:6px;top:2px;width:7px;height:12px}
  .clrf-check-copy strong{font-size:14px}
  .clrf-legal-copy{padding:14px 14px 14px 16px}
}

/* v193 multi-step mobile-first form flow */
.clrf-mobile-hero .clrf-stepper{
  position:relative;
  top:0;
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.18);
  box-shadow:none;
  backdrop-filter:blur(10px);
}
.clrf-mobile-hero .clrf-stepper-item{color:#fff}
.clrf-mobile-hero .clrf-stepper-item.is-active{background:#fff;color:#B45309;box-shadow:0 8px 20px rgba(0,0,0,0.12)}
.clrf-mobile-hero .clrf-stepper-item.is-active .clrf-stepper-index{background:#B45309;color:#fff}
.clrf-mobile-hero .clrf-stepper-item.is-active .clrf-stepper-copy strong{color:#B45309}
.clrf-mobile-hero .clrf-stepper-index{background:rgba(255,255,255,.28);color:#fff}

.clrf-form-layout--steps{grid-template-columns:1fr !important;gap:18px}
.clrf-form-layout--steps .clrf-form-main{gap:18px}
.clrf-stepper{
  position:sticky;
  top:12px;
  z-index:10;
  display:flex;
  gap:4px;
  padding:6px;
  border-radius:var(--clrf-radius-pill);
  background:rgba(255,255,255,.9);
  border:1px solid rgba(21,35,63,.08);
  box-shadow:var(--clrf-shadow-md);
  backdrop-filter:blur(12px);
  overflow-x:auto;
  scrollbar-width:none;
}
.clrf-stepper::-webkit-scrollbar{display:none}

.clrf-stepper-item{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--clrf-ink);
  border-radius:var(--clrf-radius-pill);
  min-height:46px;
  padding:6px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex:1;
  cursor:pointer;
  transition:all .18s var(--clrf-ease);
  white-space:nowrap;
}
.clrf-stepper-item:hover{background:rgba(var(--clrf-accent-rgb),.05)}

.clrf-stepper-item.is-active{
  background:var(--clrf-accent);
  color:#fff;
  box-shadow:0 8px 16px rgba(var(--clrf-accent-rgb),.2);
}
.clrf-stepper-item.is-active .clrf-stepper-index{background:#fff;color:var(--clrf-accent-dark)}
.clrf-stepper-item.is-active .clrf-stepper-copy strong{color:#fff}

.clrf-stepper-item.is-complete .clrf-stepper-index{
  background:linear-gradient(135deg,#13b070,#0b7a53);
}

.clrf-stepper-index{
  width:24px;
  height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  font-size:10px;
  font-weight:900;
  color:#fff;
  background:#cbd5e1;
  transition:all .18s ease;
}

.clrf-stepper-copy{display:flex;flex-direction:column;gap:0;min-width:0}
.clrf-stepper-copy strong{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--clrf-ink);line-height:1}
.clrf-stepper-copy small{display:none}
.clrf-step-panel{display:grid;gap:18px;padding:22px;border-radius:28px;background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,249,242,.99));border:0;box-shadow:none}
.clrf-step-panel[hidden]{display:none !important}
.clrf-step-panel-head{display:grid;gap:6px;padding:0 0 10px;border-radius:0;background:transparent;box-shadow:none;border-bottom:1px solid rgba(21,35,63,.06);margin-bottom:14px}
.clrf-step-panel-kicker{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:0;background:transparent;border:0;color:var(--clrf-accent);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.clrf-step-panel-head h2{margin:0;color:var(--clrf-navy);font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;letter-spacing:-.04em}
.clrf-step-panel-head p{margin:0;color:#4a5568;font-size:14.5px;line-height:1.55;max-width:65ch;opacity:1}
.clrf-form-layout--steps .clrf-payment-box{position:relative;top:auto;margin-top:6px}
.clrf-bottom-bar{position:sticky;bottom:12px;z-index:5;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px 16px;border-radius:22px;background:rgba(255,251,247,.94);border:1px solid rgba(21,35,63,.1);box-shadow:0 18px 34px rgba(21,35,63,.14);backdrop-filter:blur(14px)}
.clrf-bottom-bar__meta{display:grid;gap:4px;min-width:0}
.clrf-bottom-bar__eyebrow{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#b45309}
.clrf-bottom-bar__meta strong{font-size:15px;font-weight:900;color:var(--clrf-ink);letter-spacing:-.02em}
.clrf-bottom-bar__meta small{font-size:12px;color:var(--clrf-muted);line-height:1.45}
.clrf-bottom-bar__summary{display:grid;gap:2px;min-width:120px;justify-items:end}
.clrf-bottom-bar__summary span{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--clrf-muted)}
.clrf-bottom-bar__summary strong{font-size:1.1rem;font-weight:900;color:var(--clrf-navy)}
.clrf-bottom-bar__actions{display:flex;align-items:center;gap:10px}
.clrf-submit-btn--step{min-width:200px}
.clrf-form-layout--steps .clrf-submit-row{margin-top:2px}
.clrf-form-layout--steps .clrf-grid{gap:16px 16px}
.clrf-form-layout--steps .clrf-child{border-radius:24px}
@media (max-width: 1023px){.clrf-form-layout--steps{grid-template-columns:1fr !important}}
@media (max-width: 720px){
  .clrf-stepper{top:8px;padding:5px;gap:2px}
  .clrf-stepper-item{padding:6px 10px;min-width:0}
  .clrf-stepper-item.is-active{box-shadow:none}
  .clrf-stepper-copy strong{font-size:11px}
}
@media (max-width: 540px){
  .clrf-stepper-copy{display:none}
  .clrf-stepper{justify-content:space-evenly;padding:5px;gap:0}
  .clrf-stepper-item{flex:1;width:auto;min-width:0;padding:6px 4px;justify-content:center;align-items:center}
  .clrf-stepper-index{width:32px;height:32px;font-size:13px}
}


/* ================================================================
   HERO — responsive base + breakpoints
   ================================================================ */
.clrf-mobile-hero{
  margin:-24px -24px 28px;
  padding:28px 28px 24px;
  border-radius:0 0 36px 36px;
  background:linear-gradient(135deg, #F59E0B 0%, #B45309 100%);
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  box-shadow:0 12px 34px rgba(180,83,9,.28);
  overflow:hidden;
}
.clrf-mobile-hero__main{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:16px;
}
.clrf-mobile-hero::before,.clrf-mobile-hero::after{display:none}
.clrf-mobile-hero__logoWrap{
  width:72px;
  height:72px;
  min-height:0;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:9px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);
  flex-shrink:0;
}
.clrf-mobile-hero__logoWrap::before,.clrf-mobile-hero__logoWrap::after{display:none}
.clrf-mobile-hero__logo{width:100%;height:100%;object-fit:contain;filter:none;animation:none}
.clrf-mobile-hero__copy{padding-right:0;display:flex;flex-direction:column;gap:3px;min-width:0}
.clrf-kicker{margin:0 0 2px;color:rgba(255,255,255,.85);font-size:10.5px;letter-spacing:.1em}
.clrf-mobile-hero__copy h1{
  font-size:clamp(1.1rem,4vw,1.6rem);
  line-height:1.1;
  margin:0;
  color:#fff;
  font-weight:800;
}
.clrf-mobile-hero__copy p{
  margin:0;
  font-size:clamp(11.5px,2vw,13.5px);
  line-height:1.35;
  color:rgba(255,255,255,.85);
}
.clrf-hero-pills{margin-top:4px;gap:5px;flex-wrap:wrap}
.clrf-hero-pills span{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  padding:4px 9px;
  font-size:10px;
  border-radius:999px;
  white-space:nowrap;
}
/* Stepper */
.clrf-stepper{top:8px;background:rgba(255,253,247,.97)}
.clrf-stepper-item{min-height:54px}
.clrf-stepper-item.is-active{background:linear-gradient(135deg,rgba(255,251,235,.98),rgba(254,243,199,.98));border-color:rgba(var(--clrf-accent-rgb),.42);box-shadow:0 8px 20px rgba(var(--clrf-accent-rgb),.14)}
.clrf-stepper-index{background:linear-gradient(135deg,#F59E0B,#B45309)}
.clrf-bottom-bar{bottom:8px;background:rgba(255,253,247,.97)}
.clrf-submit-btn--step{background:linear-gradient(180deg,#F59E0B 0%,#B45309 100%)}

/* Desktop wide */
@media (min-width: 960px){
  .clrf-mobile-hero{padding:36px 48px 32px;gap:28px}
  .clrf-mobile-hero__main{gap:24px}
  .clrf-mobile-hero__logoWrap{width:86px;height:86px;border-radius:20px;padding:11px}
}
/* Tablet */
@media (max-width: 720px){
  .clrf-mobile-hero{padding:22px 20px 20px;gap:16px;border-radius:0 0 28px 28px}
  .clrf-mobile-hero__main{gap:14px}
  .clrf-mobile-hero__copy h1{font-size:clamp(1rem,4.5vw,1.35rem)}
}
/* Mobile */
@media (max-width: 480px){
  .clrf-mobile-hero{margin:-16px -14px 20px;padding:18px 14px 16px;border-radius:0 0 22px 22px;gap:14px}
  .clrf-mobile-hero__logoWrap{width:56px;height:56px;border-radius:12px;padding:7px}
  .clrf-mobile-hero__copy h1{font-size:clamp(.95rem,5vw,1.2rem)}
  .clrf-mobile-hero__copy p{font-size:12px}
  .clrf-stepper-item{min-height:48px}
}
/* Very small phones */
@media (max-width: 360px){
  .clrf-mobile-hero{padding:14px 12px;gap:12px}
  .clrf-mobile-hero__logoWrap{width:46px;height:46px;border-radius:10px;padding:6px}
  .clrf-mobile-hero__copy h1{font-size:.95rem}
  .clrf-mobile-hero__copy p{display:none} /* hide description on tiny screens */
}


/* CLEAN BACKGROUND PATCH — scoped to form page only, not global body */
.clrf-mobile-shell {
  background: linear-gradient(160deg, #0f172a 0%, #1e2d45 40%, #0d2147 100%);
}

.clrf-discount-box{margin:18px 0 14px;padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));backdrop-filter:blur(8px)}
.clrf-discount-label{display:block;font-weight:800;font-size:14px;letter-spacing:.01em;margin:0 0 10px;color:#fff}
.clrf-discount-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.clrf-discount-input{flex:1;min-width:0;width:100%;height:50px;padding:0 16px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.96);color:#0f172a;font-size:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.clrf-discount-input:focus{outline:none;border-color:rgba(247,127,0,.7);box-shadow:0 0 0 4px rgba(247,127,0,.14)}
.clrf-discount-row .clrf-secondary-btn{height:50px;min-width:120px;padding:0 18px;border-radius:14px;white-space:nowrap;justify-content:center;align-items:center;display:inline-flex;align-self:stretch}
.clrf-discount-row .clrf-secondary-btn.is-loading{opacity:.82;pointer-events:none}
.clrf-discount-state{margin-top:10px;font-size:13px;line-height:1.45;padding:11px 13px;border-radius:14px;background:#f8fafc;border:1px solid rgba(15,23,42,.06)}
.clrf-discount-state.success{background:#ecfdf3;color:#166534;border-color:rgba(22,101,52,.12)}
.clrf-discount-state.error{background:#fef2f2;color:#991b1b;border-color:rgba(153,27,27,.1)}
@media (max-width: 640px){
  .clrf-discount-box{padding:14px;border-radius:16px}
  .clrf-discount-row{grid-template-columns:1fr}
  .clrf-discount-row .clrf-secondary-btn{width:100%;min-width:0}
}

/* ── Square Payment Styles ────────────────────────────────── */
.clrf-square-payment { margin-top: 16px; }
.clrf-square-divider { text-align: center; font-size: 12px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 0; position: relative; }
.clrf-square-divider::before, .clrf-square-divider::after { content: ''; position: absolute; top: 50%; width: calc(50% - 60px); height: 1px; background: #e2e8f0; }
.clrf-square-divider::before { left: 0; }
.clrf-square-divider::after { right: 0; }
.clrf-square-card-container { min-height: 56px; padding: 12px; border: 1px solid #d1d5db; border-radius: 14px; background: #fff; margin-bottom: 12px; }
.clrf-square-card-container iframe { border-radius: 8px !important; }
.clrf-submit-btn--square { width: 100%; min-height: 52px; border: none; border-radius: 14px; font-weight: 800; font-size: 15px; cursor: pointer; background: linear-gradient(180deg, #1557c0 0%, #0f3d91 100%); color: #fff; box-shadow: 0 10px 24px rgba(15, 61, 145, 0.18); transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; }
.clrf-submit-btn--square:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(15, 61, 145, 0.22); }
.clrf-submit-btn--square:disabled { opacity: 0.5; cursor: not-allowed; }
.clrf-square-state { font-size: 13px; padding: 8px 12px; border-radius: 10px; margin-top: 8px; }
.clrf-square-state.error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.clrf-square-state.success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }


/* No-weeks notice */
.clrf-no-weeks-notice{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;border:1px solid #FDE68A;background:#FFF7ED;color:#92400E}
.clrf-no-weeks-notice strong{font-size:13px;font-weight:800}
.clrf-no-weeks-notice span{font-size:12px;font-weight:500;opacity:.85}

/* Weekly picker cards */
.clrf-week-picker{display:grid;gap:12px}
.clrf-week-picker__tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.clrf-week-picker__hint{font-size:12px;font-weight:700;color:var(--clrf-muted)}
.clrf-week-picker__actions{display:flex;gap:8px;flex-wrap:wrap}
.clrf-week-picker__action{appearance:none;border:1px solid rgba(21,35,63,.12);background:#fff;color:var(--clrf-ink);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;cursor:pointer}
.clrf-week-picker__action:hover{border-color:rgba(255,107,44,.35);box-shadow:var(--clrf-shadow-sm)}
.clrf-week-native{position:absolute !important;left:-9999px !important;opacity:0 !important;pointer-events:none !important;height:1px !important;width:1px !important}
.clrf-week-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.clrf-week-card{appearance:none;border:1px solid rgba(21,35,63,.12);background:#fff;color:var(--clrf-ink);border-radius:18px;min-height:68px;padding:14px;text-align:left;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:4px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease}
.clrf-week-card:hover{transform:translateY(-1px);border-color:rgba(var(--clrf-accent-rgb),.38);box-shadow:var(--clrf-shadow-sm)}
.clrf-week-card.is-selected{background:linear-gradient(135deg, rgba(255,251,235,.98), rgba(254,243,199,.98));border-color:rgba(var(--clrf-accent-rgb),.52);box-shadow:0 10px 22px rgba(var(--clrf-accent-rgb),.16)}
.clrf-week-card[disabled],.clrf-week-card[hidden]{display:none}
.clrf-week-card__title{font-size:14px;font-weight:900;line-height:1.35}
.clrf-week-card__location{font-size:11px;font-weight:700;color:#92400e;text-transform:uppercase;letter-spacing:.04em}
.clrf-week-card__dates{font-size:11px;font-weight:500;color:var(--clrf-muted,#6b7280)}
.clrf-week-card__price{font-size:12px;font-weight:800;color:var(--clrf-ink)}
.clrf-week-card__days{display:inline-flex;align-items:center;gap:3px;background:#d1fae5;color:#065f46;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;line-height:1.4;margin-top:2px}
.clrf-week-card__days--none{background:#fef3c7;color:#92400e}
.clrf-week-card.is-selected .clrf-week-card__days{background:rgba(255,255,255,.25);color:#fff}
.clrf-week-card.is-selected .clrf-week-card__days--none{background:rgba(255,255,255,.15);color:rgba(255,255,255,.80)}
.clrf-week-card.is-selected .clrf-week-card__location{color:#92400e}
.clrf-week-card.is-selected .clrf-week-card__dates{color:#374151}
.clrf-week-summary{font-size:12px;font-weight:800;color:var(--clrf-muted)}
@media (max-width: 640px){
  .clrf-week-grid{grid-template-columns:1fr 1fr}
  .clrf-week-card{min-height:62px;padding:12px}
}
@media (max-width: 480px){
  .clrf-week-grid{grid-template-columns:1fr}
}

/* ================================================================
   ALM SPORTS — MOBILE-FIRST ENHANCEMENTS v2
   Focus: touch targets, stepper UX, payment layout, typography
   ================================================================ */

/* ---- Stepper: compact pill-mode on very small screens ---- */
@media (max-width: 480px){
  .clrf-stepper{
    display:flex;
    gap:0;
    padding:8px 10px;
    border-radius:18px;
    overflow:hidden;
    position:relative;
  }
  .clrf-stepper-item{
    flex:1;
    min-height:52px;
    padding:8px 6px;
    border:none;
    border-radius:0;
    background:transparent;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border-right:1px solid rgba(21,35,63,.08);
    box-shadow:none !important;
  }
  .clrf-stepper-item:last-child{border-right:none}
  .clrf-stepper-item.is-active{background:rgba(var(--clrf-accent-rgb),.08);border-right:1px solid rgba(21,35,63,.08)}
  .clrf-stepper-copy strong{font-size:10px;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64px}
  .clrf-stepper-copy small{display:none}
  .clrf-stepper-index{width:28px;height:28px;font-size:11px}
}

/* ---- Form inputs: larger touch targets on mobile ---- */
@media (max-width: 640px){
  .clrf-field input,
  .clrf-field select,
  .clrf-field textarea{
    min-height:52px;
    font-size:16px; /* prevents iOS zoom on focus */
    padding:14px 15px;
    border-radius:14px;
  }
  .clrf-field label{
    font-size:11.5px;
    margin-bottom:2px;
  }
  .clrf-check{
    min-height:64px;
    padding:14px 16px;
    border-radius:16px;
  }
  .clrf-check-copy strong{font-size:14px}
  /* Wider bottom bar actions on small phones */
  .clrf-bottom-bar{
    border-radius:18px;
    padding:12px 14px;
    gap:10px;
  }
}

/* ---- Step panel: tighter on small phones ---- */
@media (max-width: 480px){
  .clrf-step-panel{
    padding:14px 12px;
    border-radius:20px;
    gap:14px;
  }
  .clrf-step-panel-head{
    padding:14px;
    border-radius:16px;
  }
  .clrf-step-panel-head h2{
    font-size:clamp(1.5rem,8vw,2rem);
  }
  .clrf-section-title{
    font-size:1.2rem;
    gap:10px;
  }
  .clrf-section-title::before{height:22px}
}

/* ---- Payment box: full-width mobile improvements ---- */
@media (max-width: 640px){
  .clrf-payment-box{
    border-radius:22px;
    padding:16px;
  }
  .clrf-payment-head h3{
    font-size:clamp(1.5rem,6vw,2rem);
  }
  .clrf-total-row{
    padding:13px 14px;
    font-size:1rem;
  }
  .clrf-mini-lines div{
    padding:11px 14px;
    font-size:12px;
  }
  .clrf-total-box{border-radius:18px}
}

/* ---- App card: reduce padding on very small phones ---- */
@media (max-width: 380px){
  .clrf-app-card{padding:12px 10px 16px;border-radius:22px}
  .clrf-mobile-hero{padding:10px;gap:8px;border-radius:16px}
  .clrf-mobile-hero__logoWrap{width:46px;height:46px;min-height:0;border-radius:12px;padding:5px}
  .clrf-mobile-hero__copy h1{font-size:clamp(.95rem,4.5vw,1.2rem)}
}

/* ---- Discount code row: single column on tiny screens ---- */
@media (max-width: 380px){
  .clrf-discount-row{grid-template-columns:1fr}
  .clrf-discount-row .clrf-secondary-btn{width:100%;min-width:0;justify-content:center}
}

/* ---- Child repeater: tighter on mobile ---- */
@media (max-width: 480px){
  .clrf-child{padding:14px 12px;border-radius:20px}
  .clrf-child-num{width:34px;height:34px;font-size:12px}
}

/* ---- Week picker: 2-col on all phones ---- */
@media (max-width: 640px) and (min-width: 481px){
  .clrf-week-grid{grid-template-columns:1fr 1fr}
}

/* ---- Hero pills: smaller gap on mobile ---- */
@media (max-width: 480px){
  .clrf-hero-pills{gap:4px;margin-top:4px}
  .clrf-hero-pills span{padding:4px 7px;font-size:9.5px}
}

/* ---- Bottom bar: ensure it does not overflow on narrow phones ---- */
@media (max-width: 360px){
  .clrf-bottom-bar{
    grid-template-columns:1fr;
    gap:8px;
  }
  .clrf-bottom-bar__summary{justify-items:start}
  .clrf-bottom-bar__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .clrf-submit-btn--step,.clrf-bottom-bar__actions .clrf-secondary-btn{width:100%;min-width:0}
}

/* ---- Remove decorative orbs on very small screens for performance ---- */
@media (max-width: 380px){
  .clrf-mobile-shell::before,
  .clrf-form-layout::before,
  .clrf-form-layout::after,
  .clrf-form-main::before{display:none}
}

/* ---- Stepper: bottom progress indicator line ---- */
.clrf-stepper{position:relative}
.clrf-stepper::after{
  content:"";
  position:absolute;
  bottom:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,rgba(var(--clrf-accent-rgb),.15) 0%,rgba(var(--clrf-accent-rgb),.05) 100%);
  border-radius:0 0 20px 20px;
}

/* ---- Smooth section title bar on mobile ---- */
@media (max-width: 480px){
  .clrf-section-title::before{
    box-shadow:0 0 0 3px rgba(var(--clrf-accent-rgb),.1)
  }
}

/* ---- Kicker badge: amber on ALM brand ---- */
.clrf-kicker{
  background:rgba(var(--clrf-accent-rgb),.12);
  border:1px solid rgba(var(--clrf-accent-rgb),.22);
  color:rgba(255,251,220,.95);
}

/* ---- Secondary button: amber accent on hover ---- */
.clrf-secondary-btn:hover{
  border-color:rgba(var(--clrf-accent-rgb),.35);
  color:var(--clrf-accent-dark);
  background:#fffbeb;
}

/* ---- Section eyebrow: amber text ---- */
.clrf-section-eyebrow{color:var(--clrf-accent-dark);background:rgba(var(--clrf-accent-rgb),.08);border:1px solid rgba(var(--clrf-accent-rgb),.16)}

/* ---- Legal copy border: amber ---- */
.clrf-legal-copy{border-left-color:rgba(var(--clrf-accent-rgb),.4)}

/* ---- Bottom bar eyebrow: amber ---- */
.clrf-bottom-bar__eyebrow{color:var(--clrf-accent-dark)}

/* ---- Step panel kicker: consistent amber ---- */
.clrf-step-panel-kicker{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}

/* ---- Discount input focus: amber ---- */
.clrf-discount-input:focus{
  border-color:rgba(var(--clrf-accent-rgb),.7);
  box-shadow:0 0 0 4px rgba(var(--clrf-accent-rgb),.12)
}

/* ---- State/Branch location selector feedback ---- */
.clrf-field.clrf-location-empty select {
  border-color: rgba(197,40,40,.38);
  background-color: rgba(255,241,241,.6);
  color: var(--clrf-muted);
  cursor: not-allowed;
}
.clrf-location-hint {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  font-style: italic;
}
.clrf-field.clrf-location-empty .clrf-location-hint {
  color: var(--clrf-danger);
}
.clrf-field:not(.clrf-location-empty) .clrf-location-hint {
  color: var(--clrf-ok);
}
/* State select: highlight amber on focus to draw attention */
select[data-clrf-state-select]:focus {
  border-color: rgba(var(--clrf-accent-rgb),.75);
  box-shadow: 0 0 0 4px rgba(var(--clrf-accent-rgb),.14);
}
/* Branch select: subtle green tint when has valid filtered options */
select[data-clrf-branch-select] {
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

/* ================================================================
   ALM SPORTS — MINIMALIST UX v3
   Goal: cleaner, lighter, easier to read. No dark navy shell.
   Week cards → compact chips. Payment options → clear pill rows.
   Does NOT remove any functionality.
   ================================================================ */

/* ---- Shell: light neutral background instead of dark navy ---- */
.clrf-mobile-shell {
  background: #f0f2f5 !important;
  min-height: 100vh;
}
/* Remove decorative gradient orbs */
.clrf-mobile-shell::before,
.clrf-mobile-shell::after {
  display: none !important;
}

/* ---- App card: clean white, no gradient blobs ---- */
.clrf-app-card {
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
  border: 1px solid #e8eaed !important;
}
.clrf-app-card::before,
.clrf-app-card::after {
  display: none !important;
}

/* ---- Hero: light version (white card with amber accent) ---- */
/* ================================================================
   HERO — amber/orange gradient with white text
   ================================================================ */
.clrf-mobile-hero {
  background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%) !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(180,83,9,.30) !important;
  color: #fff !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Subtle texture blob top-right */
.clrf-mobile-hero::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: -60px !important;
  right: -60px !important;
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.08) !important;
  pointer-events: none !important;
}
.clrf-mobile-hero::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  bottom: -40px !important;
  left: 10% !important;
  width: 160px !important;
  height: 160px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.05) !important;
  pointer-events: none !important;
}
.clrf-mobile-hero__copy h1 {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.15) !important;
}
.clrf-mobile-hero__copy p {
  color: rgba(255,255,255,.88) !important;
}
.clrf-kicker {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #fff !important;
}
.clrf-hero-pills span {
  background: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

/* ---- Stepper inside hero: frosted white card ---- */
.clrf-stepper {
  background: rgba(255,255,255,.96) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}
.clrf-stepper::after { display: none !important; }
/* Inactive items */
.clrf-stepper-item { box-shadow: none !important; }
.clrf-stepper-copy strong { color: #374151 !important; }
.clrf-stepper-copy small  { color: #9ca3af !important; }
.clrf-stepper-index { background: #e5e7eb !important; color: #6b7280 !important; }
/* Active item: solid amber */
.clrf-stepper-item.is-active {
  background: linear-gradient(135deg, #FFEDD5, #FDE68A) !important;
  border-color: rgba(245,158,11,.40) !important;
}
.clrf-stepper-item.is-active .clrf-stepper-index {
  background: linear-gradient(135deg, #F59E0B, #B45309) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(180,83,9,.30) !important;
}
.clrf-stepper-item.is-active .clrf-stepper-copy strong { color: #92400e !important; }
.clrf-stepper-item.is-active .clrf-stepper-copy small  { color: #B45309 !important; }
/* Complete items: solid amber */
.clrf-stepper-item.is-complete .clrf-stepper-index {
  background: linear-gradient(135deg, #F59E0B, #B45309) !important;
  color: #fff !important;
}

/* ---- Step panel: flat white, no dark header ---- */
.clrf-step-panel {
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  border: none !important;
}
.clrf-step-panel-head {
  background: #f8fafc !important;
  border-bottom: 1px solid #e8eaed !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 16px 18px !important;
}
.clrf-step-panel-head h2 {
  color: #111827 !important;
  font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
  font-weight: 700 !important;
}
.clrf-step-panel-kicker {
  background: rgba(249,115,22,.12) !important;
  border-color: rgba(249,115,22,.22) !important;
  color: #92660a !important;
}

/* ---- Section title: simpler accent bar ---- */
.clrf-section-title {
  color: #374151 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.clrf-section-title::before {
  background: var(--clrf-accent) !important;
  box-shadow: none !important;
  height: 16px !important;
  width: 3px !important;
  border-radius: 2px !important;
}
.clrf-section-eyebrow {
  background: rgba(249,115,22,.10) !important;
  border-color: rgba(249,115,22,.18) !important;
  color: #92660a !important;
  font-size: 11px !important;
}

/* ---- Help text: subtle, not distracting ---- */
.clrf-help,
.clrf-week-picker__hint,
.clrf-section-subtitle,
p.clrf-help {
  color: #9ca3af !important;
  font-size: 11.5px !important;
  font-style: italic !important;
  opacity: 1 !important;
}

/* ================================================================
   WEEK PICKER — compact amber chips
   Replaces the tall two-column card grid with a flex chip list.
   Functionality (checkbox inputs) is unchanged.
   ================================================================ */
.clrf-week-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  grid-template-columns: unset !important;
}
.clrf-week-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  min-height: unset !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 1.5px solid #d1d5db !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background .15s ease, color .15s ease !important;
  /* reset grid/column spans */
  grid-column: unset !important;
  flex-shrink: 0 !important;
}
/* Hide the decorative gradient blob inside cards */
.clrf-week-card::before,
.clrf-week-card::after {
  display: none !important;
}
/* Card inner layout: just label + price inline */
.clrf-week-card__header,
.clrf-week-card__dates {
  flex-direction: row !important;
  gap: 6px !important;
  align-items: center !important;
}
.clrf-week-card__name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  white-space: nowrap !important;
}
.clrf-week-card__price {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
}
.clrf-week-card__dates {
  display: block !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
/* Selected chip: solid amber */
.clrf-week-card.is-selected {
  background: var(--clrf-accent) !important;
  border-color: var(--clrf-accent-dark) !important;
  box-shadow: 0 2px 8px rgba(249,115,22,.25) !important;
  color: #fff !important;
}
.clrf-week-card.is-selected .clrf-week-card__name {
  color: #fff !important;
}
.clrf-week-card.is-selected .clrf-week-card__price {
  color: rgba(255,255,255,.82) !important;
}
.clrf-week-card.is-selected .clrf-week-card__dates {
  display: block !important;
  color: rgba(255,255,255,.80) !important;
  font-size: 11px !important;
}
/* Checkbox inside chip: hidden (the card itself is the toggle) */
.clrf-week-card input[type="checkbox"] {
  display: none !important;
}

/* ================================================================
   PAYMENT OPTIONS — clean pill rows with visible radio indicator
   ================================================================ */
.clrf-radio-group {
  gap: 8px !important;
  display: flex !important;
  flex-direction: column !important;
}
.clrf-radio-group .clrf-check {
  position: relative !important;
  min-height: 52px !important;
  padding: 12px 14px 12px 44px !important;
  border-radius: 10px !important;
  border: 1.5px solid #d1d5db !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  align-items: center !important;
  transition: border-color .15s ease, background .15s ease !important;
}
/* Decorative blobs off */
.clrf-radio-group .clrf-check::after {
  display: none !important;
}
/* Visible radio circle injected via ::before */
.clrf-radio-group .clrf-check::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 2px solid #d1d5db !important;
  background: #fff !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
/* Selected state via :has() — supported in all modern browsers */
.clrf-radio-group .clrf-check:has(input:checked) {
  border-color: var(--clrf-accent) !important;
  background: #fffbeb !important;
}
.clrf-radio-group .clrf-check:has(input:checked)::before {
  border-color: var(--clrf-accent-dark) !important;
  background: var(--clrf-accent) !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}
/* Typography inside radio option */
.clrf-radio-group .clrf-check-copy strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}
.clrf-radio-group .clrf-check-copy small {
  font-size: 12px !important;
  color: #6b7280 !important;
}
/* Hide native radio input */
.clrf-radio-group .clrf-check input[type="radio"] {
  display: none !important;
}

/* ---- Payment box: lighter treatment ---- */
.clrf-payment-box {
  background: #fff !important;
  border: 1px solid #e8eaed !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.clrf-payment-head {
  background: #f8fafc !important;
  border-bottom: 1px solid #e8eaed !important;
}
.clrf-payment-head h3 {
  color: #111827 !important;
  font-size: clamp(1rem, 4vw, 1.3rem) !important;
}
.clrf-payment-head p { color: #6b7280 !important; }

/* ---- Total box: amber accent, clean ---- */
.clrf-total-box {
  background: linear-gradient(135deg, var(--clrf-accent) 0%, var(--clrf-accent-dark) 100%) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(249,115,22,.3) !important;
}

/* ---- Bottom bar: white with border ---- */
.clrf-bottom-bar {
  background: #fff !important;
  border-top: 1px solid #e8eaed !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06) !important;
}
.clrf-bottom-bar__eyebrow { color: var(--clrf-accent-dark) !important; }
.clrf-bottom-bar__total   { color: #111827 !important; }

/* ---- Legal copy: subtle left border ---- */
.clrf-legal-copy {
  border-left: 2px solid rgba(249,115,22,.35) !important;
  color: #9ca3af !important;
  font-size: 11.5px !important;
}

/* ---- Child card: neutral on light bg ---- */
.clrf-child {
  background: #f9fafb !important;
  border: 1px solid #e8eaed !important;
  box-shadow: none !important;
}
.clrf-child-num {
  background: linear-gradient(135deg, var(--clrf-accent), var(--clrf-accent-dark)) !important;
  color: #fff !important;
}

/* ---- Inputs on light bg: standard border ---- */
.clrf-field input,
.clrf-field select,
.clrf-field textarea {
  background: #fff !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}
.clrf-field input:focus,
.clrf-field select:focus,
.clrf-field textarea:focus {
  border-color: var(--clrf-accent) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.14) !important;
  background: #fff !important;
}
.clrf-field label {
  color: #374151 !important;
}

/* ================================================================
   WEEK PICKER — step badges (enrollment vs pay-today)
   Uses data-field-name attribute already rendered by PHP.
   ================================================================ */

/* Step 1: program enrollment — blue-tinted badge */
[data-clrf-week-picker][data-field-name="selected_weeks"] .clrf-week-picker__hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
[data-clrf-week-picker][data-field-name="selected_weeks"] .clrf-week-picker__hint::before {
  content: "📋" !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

/* Step 2: pay today — green-tinted badge, only visible when weeks_to_pay_now picker is active */
[data-clrf-week-picker][data-field-name="weeks_to_pay_now"] .clrf-week-picker__hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f0fdf4 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
[data-clrf-week-picker][data-field-name="weeks_to_pay_now"] .clrf-week-picker__hint::before {
  content: "💳" !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

/* Summary text: slightly more prominent */
[data-clrf-week-picker][data-field-name="selected_weeks"] [data-clrf-week-summary] {
  color: #1d4ed8 !important;
  font-style: normal !important;
}
[data-clrf-week-picker][data-field-name="weeks_to_pay_now"] [data-clrf-week-summary] {
  color: #15803d !important;
  font-style: normal !important;
}

/* payment_option: nudge label to match the "Step" style */
.clrf-field:has([name="payment_option"]) > label {
  font-weight: 700 !important;
  color: #111827 !important;
}

/* ================================================================
   FINAL RESPONSIVE & MOBILE OPTIMIZATION
   ================================================================ */

@media (max-width: 720px) {
  .clrf-mobile-hero {
    margin: -16px -14px 24px !important;
    padding: 28px 16px 16px !important;
    border-radius: 0 0 28px 28px !important;
  }
  .clrf-mobile-hero__main {
    grid-template-columns: 60px minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  .clrf-mobile-hero__copy h1 {
    font-size: 1.6rem !important;
  }
  .clrf-mobile-hero__copy p {
    font-size: 13.5px !important;
  }
  .clrf-stepper {
    margin-top: 12px !important;
    padding: 4px !important;
    gap: 2px !important;
  }
  .clrf-stepper-item {
    padding: 6px 8px !important;
    min-width: 0 !important;
  }
  .clrf-bottom-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    bottom: 8px !important;
  }
  .clrf-bottom-bar__summary {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding-bottom: 8px !important;
  }
  .clrf-bottom-bar__summary span { font-size: 12px !important; }
  .clrf-bottom-bar__summary strong { font-size: 1.35rem !important; }
  .clrf-bottom-bar__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .clrf-submit-btn--step, 
  .clrf-bottom-bar__actions .clrf-secondary-btn {
    min-width: 0 !important;
    width: 100% !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 540px) {
  .clrf-stepper-copy {
    display: none !important;
  }
  .clrf-stepper {
    justify-content: space-evenly !important;
    padding: 5px !important;
    gap: 0 !important;
  }
  .clrf-stepper-item {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 10px !important;
  }
  .clrf-stepper-index {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .clrf-grid,
  .clrf-grid-child {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .clrf-field {
    grid-column: 1 / -1 !important;
  }
  .clrf-app-card {
    border-radius: 20px !important;
    padding: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   Day & Slot Picker
   ══════════════════════════════════════════════════════════ */
.clrf-day-slot-picker {
  grid-column: 1 / -1;
  margin-top: 4px;
}

/* Inline variant — below card grid inside week-picker */
.clrf-dsp-inline {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid rgba(249,115,22,.3);
  animation: clrfDspSlideIn .22s ease;
}
@keyframes clrfDspSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.clrf-dsp-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Section title ── */
.clrf-dsp-type-label {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

/* ── Attendance-type toggle pills ── */
.clrf-dsp-radios {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.clrf-dsp-radios .clrf-check {
  margin: 0;
}
/* Hide the native radio, style the <span> as a pill */
.clrf-dsp-radios .clrf-check input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.clrf-dsp-radios .clrf-check span {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  border: 1.5px solid #e5e7eb;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
  user-select: none;
  white-space: nowrap;
}
.clrf-dsp-radios .clrf-check span:hover {
  border-color: rgba(249,115,22,.5);
  color: #374151;
}
.clrf-dsp-radios .clrf-check input[type="radio"]:checked + span {
  background: #F97316;
  border-color: #F97316;
  color: #fff;
  box-shadow: 0 2px 10px rgba(249,115,22,.35);
}

/* ── Loading state ── */
.clrf-dsp-loading {
  font-size: 13px;
  color: #9ca3af;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Days list ── */
.clrf-dsp-days {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.clrf-dsp-day {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.clrf-dsp-day-label {
  padding: 7px 14px;
  background: #f3f4f6;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  letter-spacing: .01em;
}

/* ── Slots grid inside a day ── */
.clrf-dsp-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  padding: 10px;
}

/* ── Single slot card ── */
.clrf-dsp-slot-label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px 11px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  /* space for the checkmark dot in top-right */
  padding-right: 32px;
}
.clrf-dsp-slot-label:hover {
  border-color: rgba(249,115,22,.5);
  box-shadow: 0 2px 8px rgba(249,115,22,.1);
}

/* Hide native input completely */
.clrf-dsp-slot-label input[type="checkbox"],
.clrf-dsp-slot-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Checkmark circle (top-right corner) */
.clrf-dsp-slot-label::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #d1d5db;
  background: #f9fafb;
  transition: border-color .15s, background .15s;
  flex-shrink: 0;
}

/* Selected state — card */
.clrf-dsp-slot-label:has(input:checked) {
  border-color: #F97316;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  box-shadow: 0 4px 14px rgba(249,115,22,.22);
}

/* Selected state — checkmark circle filled */
.clrf-dsp-slot-label:has(input:checked)::after {
  background: #F97316
    url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.8 3L9 1' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / 10px 8px;
  border-color: #F97316;
}

/* Slot text inside the card */
.clrf-dsp-slot-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.clrf-dsp-slot-name {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clrf-dsp-slot-time {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
}
.clrf-dsp-slot-price {
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  margin-top: 2px;
}

/* Selected text colours */
.clrf-dsp-slot-label:has(input:checked) .clrf-dsp-slot-name  { color: #92400e; }
.clrf-dsp-slot-label:has(input:checked) .clrf-dsp-slot-time  { color: #a16207; }
.clrf-dsp-slot-label:has(input:checked) .clrf-dsp-slot-price { color: #92400e; font-weight: 800; }

/* ── Running total ── */
.clrf-dsp-total {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  padding: 10px 14px;
  background: #fffbeb;
  border: 1.5px solid rgba(249,115,22,.4);
  border-radius: 10px;
  text-align: right;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .clrf-dsp-radios {
    gap: 6px;
  }
  .clrf-dsp-radios .clrf-check span {
    padding: 5px 13px;
    font-size: 12px;
  }
  .clrf-dsp-slots {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 8px;
  }
  .clrf-dsp-slot-label {
    padding: 10px 10px 10px 10px;
    padding-right: 28px;
  }
  .clrf-dsp-slot-name { font-size: 12px; }
  .clrf-dsp-slot-time { font-size: 10px; }
}

/* ── Per-child week section ─────────────────────────────────────────────── */
.clrf-child-week-section {
  margin-top: 20px;
  background: #fffbeb;
  border: 1.5px solid rgba(249,115,22,.35);
  border-radius: 12px;
  padding: 16px 16px 18px;
}

.clrf-child-week-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 14px;
}
.clrf-child-week-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #F97316;
  border-radius: 2px;
}

/* Week picker inside child section */
.clrf-child-week-section .clrf-week-picker {
  background: transparent;
  border: none;
  padding: 0;
}
.clrf-child-week-section .clrf-week-picker__tools {
  margin-bottom: 10px;
}
.clrf-child-week-section .clrf-week-picker__hint {
  font-size: 12px;
  color: #78350f;
}
.clrf-child-week-section .clrf-week-grid {
  gap: 8px;
}
.clrf-child-week-section .clrf-week-card {
  font-size: 13px;
  border-color: rgba(249,115,22,.4);
  background: #fff;
}
.clrf-child-week-section .clrf-week-card.is-selected {
  background: #fef3c7;
  border-color: #F97316;
}
.clrf-child-week-section .clrf-week-summary {
  font-size: 12px;
  color: #92400e;
  margin-top: 8px;
}

/* Attendance picker inside child section — shown after a week is selected */
.clrf-child-week-section .clrf-day-slot-picker {
  margin-top: 14px;
  background: #fff;
  border: 1.5px solid rgba(249,115,22,.35);
  border-radius: 10px;
  padding: 14px 14px 12px;
}
.clrf-child-week-section .clrf-dsp-type-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

/* Insurance field inside child section */
.clrf-child-insurance-field {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(249,115,22,.25);
}
.clrf-child-insurance-field label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}


/* Week picker loading state — shows while scope-based AJAX reloads weeks */
.clrf-weeks-loading [data-clrf-week-grid] {
  opacity: .45;
  pointer-events: none;
  transition: opacity .15s;
}
.clrf-weeks-loading [data-clrf-week-picker__tools],
.clrf-weeks-loading .clrf-week-picker__tools {
  opacity: .45;
}