/* Forms and customisation fields */

/* Form sizing owner rules: keep modal and product-page fields inside their containers. */
.customisation-form,
.form-stack,
.form-field,
.order-form-wrap,
.order-form-body,
.dynamic-personalisation-rows,
.modal-rows-container,
.ofg,
.fg,
.odyn-item,
.dyn-item{
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
}

.customisation-form *,
.form-stack *,
.order-form-wrap *,
.dynamic-personalisation-rows *,
.modal-rows-container *{
  box-sizing:border-box;
}

.customisation-form,
.form-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.form-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.form-label{
  font-size:0.6875rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.form-input{
  box-sizing:border-box;
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  color:var(--text);
  padding:12px 13px;
  font-size:0.875rem;
  outline:none;
}

.form-input:focus{
  border-color:var(--red);
}

.form-help{
  font-size:0.75rem;
  color:var(--muted);
  line-height:1.5;
}

.form-error{
  background:#FFF5F5;
  border-left:3px solid var(--red);
  color:var(--red);
  padding:10px 14px;
  font-size:0.875rem;
  line-height:1.5;
}

/* Baseline form fields restored via modals.css for product modals. */

/* Generated order-form field baseline */
.order-form-wrap .ofg,
.order-form-body .ofg,
.dynamic-personalisation-rows .ofg{
  margin-bottom:14px;
  max-width:100%;
}

.order-form-wrap .ofl,
.order-form-body .ofl,
.dynamic-personalisation-rows .ofl{
  display:block;
  font-size:0.55rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}

.order-form-wrap .ofi,
.order-form-wrap .ofs,
.order-form-wrap .ofta,
.order-form-body .ofi,
.order-form-body .ofs,
.order-form-body .ofta,
.dynamic-personalisation-rows .ofi,
.dynamic-personalisation-rows .ofs,
.dynamic-personalisation-rows .ofta{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  color:var(--text);
  padding:11px 15px;
  font-family:var(--sans);
  font-size:0.76rem;
  outline:none;
  border-radius:0;
}

.order-form-wrap .ofi:focus,
.order-form-wrap .ofs:focus,
.order-form-wrap .ofta:focus,
.order-form-body .ofi:focus,
.order-form-body .ofs:focus,
.order-form-body .ofta:focus,
.dynamic-personalisation-rows .ofi:focus,
.dynamic-personalisation-rows .ofs:focus,
.dynamic-personalisation-rows .ofta:focus{
  border-color:var(--product-accent,var(--red));
}

.order-form-wrap .ofta,
.order-form-body .ofta,
.dynamic-personalisation-rows .ofta{
  min-height:80px;
  resize:vertical;
}

.order-form-wrap .odyn-item,
.order-form-wrap .dyn-item,
.order-form-body .odyn-item,
.order-form-body .dyn-item,
.dynamic-personalisation-rows .odyn-item,
.dynamic-personalisation-rows .dyn-item{
  border:1px solid var(--border);
  border-left:3px solid var(--product-accent,var(--red));
  background:var(--surface2);
  padding:12px;
  margin-bottom:12px;
}

.order-form-wrap .odyn-lbl,
.order-form-wrap .dyn-item-lbl,
.order-form-body .odyn-lbl,
.order-form-body .dyn-item-lbl,
.dynamic-personalisation-rows .odyn-lbl,
.dynamic-personalisation-rows .dyn-item-lbl{
  font-size:0.58rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--product-accent,var(--red));
  margin-bottom:10px;
  font-weight:600;
}

.onotice,
.form-notice{
  border-left:3px solid var(--product-accent,var(--red));
  background:rgba(186,24,18,0.08);
  color:var(--product-accent,var(--red));
  padding:10px 14px;
  font-size:0.76rem;
  line-height:1.55;
  margin:0 0 16px;
}

/* AATHAAR product-owned customisation layouts */
.aathaar-field-row--print_colours,
.aathaar-field-row--baby_names,
.aathaar-field-row--birth_datetime{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

@media(max-width:700px){
  .aathaar-field-row--print_colours,
  .aathaar-field-row--baby_names,
  .aathaar-field-row--birth_datetime{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Generic two-column field groups (used by makeCustomFieldsRow via field.group) */
.g3d-field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.g3d-field-row .ofg{
  margin-bottom:13px;
}
@media(max-width:380px){
  .g3d-field-row{
    grid-template-columns:1fr;
  }
}

/* Shirt row two-column grids (name+number / shirt+text colour) */
.g3d-shirt-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.g3d-shirt-grid .ofg{
  margin-bottom:13px;
}
@media(max-width:380px){
  .g3d-shirt-grid{
    grid-template-columns:1fr;
  }
}