/* =====================================================================
 * Nomination Form Widget — themable, self-contained styles
 *
 * Drop this stylesheet into any site and the widget renders fully
 * styled. Override any of the `--nf-*` CSS custom properties on a host
 * page (in a stylesheet or inline style on the widget container) to
 * re-theme the entire form to match your brand.
 *
 * All class names are prefixed `.nf-` to avoid collisions with host
 * page styles.
 * ===================================================================== */

.nf-root {
  /* ----- THEME TOKENS — override these to re-skin the widget ------- */

  /* Brand colors */
  --nf-primary:        #4A1E4D;            /* headings, buttons, primary text */
  --nf-primary-dark:   #2B0F2E;            /* button hover, deep accents */
  --nf-primary-soft:   #6B2D70;            /* subtitle, secondary text */
  --nf-accent:         #C9A87C;            /* corner brackets, focus ring, dividers */
  --nf-accent-dark:    #A88863;            /* placeholder hint, code text */
  --nf-accent-light:   #E8D5B7;            /* input border, gold-light backgrounds */
  --nf-accent-pale:    #F4E4D4;            /* dropdown hover, light decoration */

  /* Surfaces */
  --nf-surface:        #ffffff;            /* card background */
  --nf-surface-input:  #FAF7F5;            /* inputs / triggers idle background */
  --nf-surface-input-focus: #ffffff;       /* inputs background on focus */
  --nf-surface-shell-edge: rgba(201,168,124,0.18);
  --nf-surface-award:   linear-gradient(180deg,#FAF7F5 0%,#fff 100%);

  /* Sidebar (support contact) */
  --nf-sidebar-bg:      linear-gradient(160deg,#4A1E4D 0%,#2B0F2E 100%);
  --nf-sidebar-text:    #ffffff;
  --nf-sidebar-muted:   rgba(255,255,255,0.78);
  --nf-sidebar-eyebrow: #E8D5B7;
  --nf-sidebar-divider: rgba(201,168,124,0.22);

  /* Feedback */
  --nf-error:           #8B1538;
  --nf-error-bg:        #FBE9EC;
  --nf-error-border:    #F2C7D0;

  /* Shape & motion */
  --nf-radius-shell:    16px;
  --nf-radius-input:    8px;
  --nf-radius-panel:    10px;
  --nf-shadow-shell:    0 10px 40px rgba(74,30,77,0.10);
  --nf-shadow-button:   0 6px 20px rgba(74,30,77,0.25);

  /* Typography */
  --nf-font-display:    'Cormorant Garamond', Georgia, serif;
  --nf-font-body:       -apple-system, BlinkMacSystemFont, 'Montserrat', 'Segoe UI', Roboto, sans-serif;

  /* Layout sizing */
  --nf-max-width:       1180px;
  --nf-form-max-width:  760px;
  --nf-sidebar-width:   320px;
  --nf-control-height:  46px;
  --nf-isd-width:       170px;
  --nf-pad-shell:       44px 40px;
}

/* ------------------ Layout shell ------------------ */
.nf-root,
.nf-root * {
  box-sizing: border-box;
}
.nf-root {
  font-family: var(--nf-font-body);
  color: var(--nf-primary);
  line-height: 1.5;
}
.nf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--nf-sidebar-width);
  gap: 32px;
  align-items: flex-start;
  max-width: var(--nf-max-width);
  margin: 0 auto;
}
.nf-shell {
  background: var(--nf-surface);
  border-radius: var(--nf-radius-shell);
  box-shadow: var(--nf-shadow-shell);
  padding: var(--nf-pad-shell);
  border: 1px solid var(--nf-surface-shell-edge);
  position: relative;
}
.nf-shell::before,
.nf-shell::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
}
.nf-shell::before {
  top: -10px; left: -10px;
  border-top: 3px solid var(--nf-accent);
  border-left: 3px solid var(--nf-accent);
}
.nf-shell::after {
  bottom: -10px; right: -10px;
  border-bottom: 3px solid var(--nf-accent);
  border-right: 3px solid var(--nf-accent);
}
.nf-shell h2 {
  font-family: var(--nf-font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--nf-primary);
  margin: 0 0 6px;
  text-align: center;
  letter-spacing: -0.01em;
}
.nf-shell .nf-subtitle {
  text-align: center;
  color: var(--nf-primary-soft);
  font-size: 0.98rem;
  margin: 0 0 28px;
}

/* ------------------ Form rows ------------------ */
.nf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.nf-row.nf-row-single { grid-template-columns: 1fr; }
.nf-group { margin-bottom: 18px; }
.nf-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--nf-primary);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nf-group label .nf-req { color: var(--nf-accent); }

.nf-shell input,
.nf-shell select {
  width: 100%;
  height: var(--nf-control-height);
  border: 1px solid var(--nf-accent-light);
  border-radius: var(--nf-radius-input);
  padding: 0 14px;
  font-size: 0.96rem;
  background: var(--nf-surface-input);
  font-family: var(--nf-font-body);
  color: var(--nf-primary);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.nf-shell input::placeholder { color: var(--nf-accent-dark); opacity: 0.7; }
.nf-shell input:focus,
.nf-shell select:focus {
  outline: none;
  border-color: var(--nf-accent);
  background: var(--nf-surface-input-focus);
  box-shadow: 0 0 0 3px rgba(201,168,124,0.18);
}

/* ------------------ Inline "Nominate a" label + radios ------------------ */
.nf-nominate-row { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.nf-nominate-row label.nf-nominate-label { margin-bottom: 0; white-space: nowrap; }
.nf-radios { display: flex; gap: 24px; margin: 0; }
.nf-radios label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 0.95rem; font-weight: 500;
  color: var(--nf-primary); text-transform: none; letter-spacing: 0;
  margin-bottom: 0;
}
.nf-radios input[type="radio"] { width: auto; height: auto; accent-color: var(--nf-accent); }

/* ------------------ Award card ------------------ */
.nf-award {
  border: 1px solid var(--nf-accent-light);
  border-radius: var(--nf-radius-panel);
  padding: 22px;
  background: var(--nf-surface-award);
  margin-bottom: 16px;
  position: relative;
}
.nf-award-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px dashed rgba(201,168,124,0.4);
}
.nf-award-title {
  font-family: var(--nf-font-display);
  font-size: 1.15rem; font-weight: 600;
  color: var(--nf-primary);
}
.nf-btn-remove {
  background: none; border: none;
  color: var(--nf-accent-dark);
  cursor: pointer; font-size: 24px; line-height: 1;
  padding: 4px 10px; border-radius: 6px;
  transition: background .2s, color .2s;
}
.nf-btn-remove:hover { background: rgba(201,168,124,0.1); color: var(--nf-error); }
.nf-btn-add {
  color: var(--nf-primary);
  border: 1.5px dashed var(--nf-accent);
  background: transparent; cursor: pointer;
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 11px 18px; border-radius: var(--nf-radius-input);
  margin-top: 6px;
  font-family: var(--nf-font-body);
  transition: background .2s, border-color .2s;
}
.nf-btn-add:hover { background: rgba(201,168,124,0.08); border-color: var(--nf-accent-dark); }

/* ------------------ Error / Submit ------------------ */
.nf-error {
  color: var(--nf-error);
  background: var(--nf-error-bg);
  border: 1px solid var(--nf-error-border);
  border-radius: var(--nf-radius-input);
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 0.92rem;
}
.nf-submit {
  width: 100%; height: 54px;
  background: var(--nf-primary);
  color: #fff; border: none;
  border-radius: var(--nf-radius-input);
  font-weight: 700; font-size: 0.88rem;
  cursor: pointer; margin-top: 22px;
  text-transform: uppercase; letter-spacing: 0.18em;
  font-family: var(--nf-font-body);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.nf-submit:hover:not(:disabled) {
  background: var(--nf-primary-dark);
  box-shadow: var(--nf-shadow-button);
  transform: translateY(-1px);
}
.nf-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.nf-divider { border-top: 1px solid rgba(201,168,124,0.3); margin: 26px 0 18px; }
.nf-section-label {
  font-family: var(--nf-font-display);
  font-size: 1.3rem; font-weight: 600;
  color: var(--nf-primary);
  margin: 8px 0 14px;
}

/* ------------------ Success state ------------------ */
.nf-success { text-align: center; padding: 46px 20px; }
.nf-success h2 { color: var(--nf-primary); margin-bottom: 10px; }
.nf-success p { color: var(--nf-primary-soft); }
.nf-success .nf-check {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--nf-accent), var(--nf-accent-dark));
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 30px; font-weight: 700;
}

/* ------------------ Phone (ISD + tel) grid ------------------ */
.nf-phone-grid { display: grid; grid-template-columns: var(--nf-isd-width) 1fr; gap: 10px; }
@media (max-width: 480px) {
  .nf-phone-grid { grid-template-columns: 1fr; }
}

/* ------------------ Searchable country combobox ------------------ */
.nf-combo { position: relative; }
.nf-combo-trigger {
  height: var(--nf-control-height);
  border: 1px solid var(--nf-accent-light);
  border-radius: var(--nf-radius-input);
  padding: 0 28px 0 12px;
  font-size: 0.82rem;
  background: var(--nf-surface-input);
  font-family: var(--nf-font-body);
  color: var(--nf-accent-dark);
  display: flex; align-items: center;
  cursor: pointer; user-select: none;
  line-height: 1; position: relative;
  transition: border-color .2s, background .2s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0;
}
.nf-combo-trigger::after {
  content: '▾'; position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 0.7rem; color: var(--nf-accent-dark);
  pointer-events: none;
}
.nf-combo-trigger .nf-flag { font-size: 1.05rem; margin-right: 6px; line-height: 1; }
.nf-combo-trigger.nf-has-value { color: var(--nf-primary); }
.nf-combo-trigger:focus,
.nf-combo.nf-open .nf-combo-trigger {
  outline: none;
  border-color: var(--nf-accent);
  background: var(--nf-surface-input-focus);
  box-shadow: 0 0 0 3px rgba(201,168,124,0.18);
}
.nf-combo-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px); left: 0;
  min-width: 280px; max-width: 360px;
  z-index: 30;
  background: var(--nf-surface);
  border: 1px solid var(--nf-accent-light);
  border-radius: var(--nf-radius-panel);
  box-shadow: 0 10px 30px rgba(74,30,77,0.18);
  overflow: hidden;
}
.nf-combo.nf-open .nf-combo-panel { display: block; }
.nf-combo-search {
  width: 100%; border: none;
  border-bottom: 1px solid rgba(201,168,124,0.4);
  padding: 11px 14px;
  font-size: 0.85rem;
  background: var(--nf-surface-input);
  color: var(--nf-primary);
  font-family: var(--nf-font-body);
  outline: none; border-radius: 0; height: auto;
}
.nf-combo-search:focus { background: var(--nf-surface-input-focus); }
.nf-combo-list { max-height: 264px; overflow-y: auto; }
.nf-combo-option {
  padding: 9px 14px; cursor: pointer;
  font-size: 0.82rem; color: var(--nf-primary);
  font-family: var(--nf-font-body);
  transition: background .15s;
  display: flex; align-items: center; gap: 10px;
  line-height: 1.3;
}
.nf-combo-option .nf-flag { font-size: 1.05rem; flex-shrink: 0; line-height: 1; }
.nf-combo-option .nf-country-name { flex: 1; color: var(--nf-primary); }
.nf-combo-option .nf-country-code { color: var(--nf-accent-dark); font-weight: 600; font-size: 0.78rem; }
.nf-combo-option:hover { background: var(--nf-accent-pale); }
.nf-combo-empty {
  padding: 14px; text-align: center;
  color: var(--nf-accent-dark); font-size: 0.82rem;
  font-family: var(--nf-font-body);
}

/* ------------------ Support sidebar ------------------ */
.nf-support { position: sticky; top: 24px; }
.nf-support-card {
  background: var(--nf-sidebar-bg);
  color: var(--nf-sidebar-text);
  border-radius: var(--nf-radius-shell);
  padding: 34px 28px;
  box-shadow: 0 10px 40px rgba(74,30,77,0.18);
  position: relative; overflow: hidden;
  font-family: var(--nf-font-body);
}
.nf-support-card::before,
.nf-support-card::after {
  content: ''; position: absolute;
  width: 56px; height: 56px; pointer-events: none;
}
.nf-support-card::before {
  top: -10px; left: -10px;
  border-top: 3px solid var(--nf-accent);
  border-left: 3px solid var(--nf-accent);
}
.nf-support-card::after {
  bottom: -10px; right: -10px;
  border-bottom: 3px solid var(--nf-accent);
  border-right: 3px solid var(--nf-accent);
}
.nf-support-eyebrow {
  color: var(--nf-sidebar-eyebrow);
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  margin-bottom: 10px;
}
.nf-support-card h3 {
  font-family: var(--nf-font-display);
  font-size: 1.55rem; font-weight: 600;
  margin: 0 0 14px;
  color: var(--nf-sidebar-text);
  line-height: 1.2;
}
.nf-support-card > p {
  font-size: 0.88rem; line-height: 1.6;
  color: var(--nf-sidebar-muted);
  margin: 0 0 24px;
}
.nf-support-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; text-decoration: none;
  color: var(--nf-sidebar-text);
  border-top: 1px solid var(--nf-sidebar-divider);
  transition: transform .2s, color .2s;
}
.nf-support-item:hover { transform: translateX(2px); }
.nf-support-item:hover .nf-support-value { color: var(--nf-sidebar-eyebrow); }
.nf-support-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(201,168,124,0.15);
  border: 1px solid rgba(201,168,124,0.30);
  display: flex; align-items: center; justify-content: center;
  color: var(--nf-sidebar-eyebrow);
  flex-shrink: 0;
}
.nf-support-label {
  font-size: 0.68rem; color: rgba(255,255,255,0.6);
  text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 600; margin-bottom: 3px;
}
.nf-support-value {
  font-size: 0.95rem; font-weight: 600;
  color: var(--nf-sidebar-text);
  word-break: break-word; transition: color .2s;
}
.nf-support-value-sm {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.nf-support-divider {
  height: 1px;
  background: var(--nf-sidebar-divider);
  margin: 18px 0 14px;
}

/* ------------------ Responsive ------------------ */
@media (max-width: 980px) {
  .nf-layout { grid-template-columns: 1fr; max-width: var(--nf-form-max-width); }
  .nf-support { position: static; margin-top: 32px; }
  .nf-support-card { padding: 30px 24px; }
}
@media (max-width: 640px) {
  .nf-root { --nf-pad-shell: 32px 22px; }
  .nf-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .nf-nominate-row { gap: 12px; }
  .nf-radios { gap: 18px; }
}

/* === Categorised <optgroup> styling for the Select Award dropdown === */
.nf-root select optgroup,
.nf-root select optgroup[label] {
  font-family: var(--nf-font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.94rem;
  font-weight: 800;                /* bold */
  font-style: normal;
  color: #C8102E !important;       /* red */
  background: #FFF1F2;             /* very light red wash so the gold→red contrast pops */
  padding: 6px 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nf-root select optgroup option {
  font-family: var(--nf-font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.92rem;
  font-style: normal;
  font-weight: 500;
  color: var(--nf-primary, #072C57);
  background: var(--nf-surface, #fff);
  padding: 6px 10px 6px 18px;
  text-transform: none;
}