:root{
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --primary: #51a2ff;
  --border: #f0f0f0;

  --container-max: 860px;
  --wizard-max: 830px;
  --card-radius: 13px;

  --tile-height-desktop: 100px;
  --tile-height-mobile: 100px;
  --tile-image-size: 165px;

  --logo_removed-image: none;
  --bg-image: none;
  --login-bg-image: url('/ui-asset.phpfPCBG_20260226_100001_3beaeb55.jpg');
  --font-size-base: 16px;
  --button-bg: #5ccbff;
  --button-text: #ffffff;
}

/* Global background override */
html,body{
  background: var(--bg);
  color: var(--text);
  font-size: var(--font-size-base);
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Admin login page: use login-specific bg or fallback to main bg */
body.admin-login-page{
  background-image: var(--login-bg-image);
}

/* Primary buttons use configured colors */
.btn.primary, .pill.primary, button[type="submit"].pill, .apply-submit-btn{
  background: var(--button-bg) !important;
  color: var(--button-text) !important;
  border-color: var(--button-bg) !important;
}
.btn.primary:hover, .pill.primary:hover, button[type="submit"].pill:hover, .apply-submit-btn:hover{
  filter: brightness(1.1);
}

/* Container width */
.container{max-width: var(--container-max);}

/* Wizard shell placement */
.wizard-shell{
  max-width: var(--wizard-max);
    margin-left: auto;
  margin-right: auto;
  }

/* Card radius harmonization */
.card, .card-radio, .input, .textarea, .select, .btn, .pill, .imgwrap, .logo_removed{
  border-radius: var(--card-radius);
}

/* Primary color sync for selected states */
.card-radio.selected{
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent), var(--shadow-out);
}
.card-radio.selected .dot{
  border-color: color-mix(in srgb, var(--primary) 85%, transparent);
  background: color-mix(in srgb, var(--primary) 30%, transparent);
}

/* logo_removed image (admin + apply headers) */
.logo_removed{
  background-image: var(--logo_removed-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Radio card grid columns on desktop */
.card-radio-grid{grid-template-columns: repeat(2, minmax(0,1fr));}

/* Remove dot on radio cards if disabled */
.card-radio{gap:0;}
.card-radio .dot{display:none;}

/* Step 1 image tiles options */
.image-radio:hover{transform:translateY(-2px);}

@keyframes tilePop{0%{transform:scale(.98);}60%{transform:scale(1.02);}100%{transform:scale(1);}}
.image-radio.selected{animation:tilePop .18s ease;}