/* ==========================================================================
   Component Styles — Dialogs, Toasts, Buttons
   ColorFlow / Walmart CSI Compass
   ========================================================================== */

/* ---- Native <dialog> Component ---- */
dialog.cf-dialog {
  border: none;
  border-radius: 6px;
  padding: 0;
  max-width: 540px;
  width: 90vw;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  color: var(--color-text-primary);
  font-family: var(--font-family);
}

dialog.cf-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

dialog.cf-dialog[open] {
  animation: dialog-fade-in 0.2s ease-out;
}

@keyframes dialog-fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-panel-black-bg);
  color: var(--color-panel-text);
  border-radius: 6px 6px 0 0;
}

.dialog-header h3 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
}

.dialog-close {
  background: none;
  border: none;
  color: var(--color-panel-text);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.7;
}

.dialog-close:hover {
  opacity: 1;
}

.dialog-body {
  padding: var(--space-lg);
  max-height: 60vh;
  overflow-y: auto;
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.dialog-body h4 {
  margin: var(--space-md) 0 var(--space-xs) 0;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

.dialog-body p {
  margin: 0 0 var(--space-sm) 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
}

/* Wide dialog variant (for security requirements etc.) */
dialog.cf-dialog-wide {
  max-width: 900px;
}

/* ---- Button Variants ---- */
/* Compound selectors .but.but-* (specificity 1,2,0) beat #content .but (1,1,0) from default.css */
.but-primary,
#content .but.but-primary {
  background: var(--color-orange);
  color: var(--color-white);
  border: 1px solid var(--color-orange-border);
  cursor: pointer;
  padding: 8px 22px;
  font-size: var(--font-size-base);
  border-radius: 4px;
  width: auto;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.but-primary:hover,
#content .but.but-primary:hover {
  background: var(--color-orange-light);
}

.but-secondary,
#content .but.but-secondary {
  background: var(--color-blue);
  color: var(--color-white);
  border: 1px solid var(--color-blue-border);
  cursor: pointer;
  padding: 8px 22px;
  font-size: var(--font-size-base);
  border-radius: 4px;
  width: auto;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.but-secondary:hover,
#content .but.but-secondary:hover {
  background: var(--color-blue-light);
}

.but-danger,
#content .but.but-danger {
  background: var(--color-error-bg);
  color: var(--color-white);
  border: 1px solid var(--color-error-dark);
  cursor: pointer;
  padding: 8px 22px;
  font-size: var(--font-size-base);
  border-radius: 4px;
  width: auto;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.but-ghost,
#content .but.but-ghost {
  background: transparent;
  border: 1px solid var(--color-border-dark);
  cursor: pointer;
  padding: 8px 22px;
  font-size: var(--font-size-base);
  border-radius: 4px;
  color: var(--color-text-primary);
  width: auto;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.but-ghost:hover,
#content .but.but-ghost:hover {
  background: var(--color-button-bg);
}

.but-success,
#content .but.but-success {
  background: var(--color-success-bg);
  color: var(--color-white);
  border: 1px solid var(--color-success-dark);
  cursor: pointer;
  padding: 8px 22px;
  font-size: var(--font-size-base);
  border-radius: 4px;
  width: auto;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.but-success:hover,
#content .but.but-success:hover {
  background: #5aadad;
}

.but-warning,
#content .but.but-warning {
  background: var(--color-warning, #B8860B);
  color: var(--color-white);
  border: 1px solid #9A7209;
  cursor: pointer;
  padding: 8px 22px;
  font-size: var(--font-size-base);
  border-radius: 4px;
  width: auto;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.but-warning:hover,
#content .but.but-warning:hover {
  background: #D4A017;
}

.but-info,
#content .but.but-info {
  background: var(--color-blue);
  color: var(--color-white);
  border: 1px solid var(--color-blue-border);
  cursor: pointer;
  padding: 8px 22px;
  font-size: var(--font-size-base);
  border-radius: 4px;
  width: auto;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.but-info:hover,
#content .but.but-info:hover {
  background: var(--color-blue-light);
}

/* ---- Form Input Refinements ---- */
/* Global upgrades for .forms inputs — applied site-wide */
#content .forms {
  padding-left: 15px;
}

#content .forms .field input[type="text"],
#content .forms .field input[type="password"],
#content .forms .field input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--color-border-dark);
  border-radius: 3px;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  background: var(--color-white);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  outline: none;
}

#content .forms .field input[type="text"]:hover,
#content .forms .field input[type="password"]:hover,
#content .forms .field input[type="email"]:hover {
  border-color: var(--color-border-light);
}

#content .forms .field input[type="text"]:focus,
#content .forms .field input[type="password"]:focus,
#content .forms .field input[type="email"]:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 2px rgba(69, 151, 201, 0.15);
}

#content .forms .field select {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--color-border-dark);
  border-radius: 3px;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  background: var(--color-white);
  transition: border-color 150ms ease;
  outline: none;
}

#content .forms .field select:hover {
  border-color: var(--color-border-light);
}

#content .forms .field select:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 2px rgba(69, 151, 201, 0.15);
}

/* Registration info panel — inline explanation block */
.reg-info-panel {
  background: var(--color-highlight);
  border: 1px solid var(--color-border-dark);
  border-radius: 4px;
  padding: 14px 18px;
  margin: 0 0 var(--space-lg) 15px;
  font-size: var(--font-size-base);
  line-height: 1.6;
  max-width: 720px;
}

.reg-info-panel h4:first-child {
  margin-top: 0;
}

.reg-info-panel h4 {
  margin: 8px 0 2px 0;
  font-size: var(--font-size-md);
}

.reg-info-panel p {
  margin: 0 0 6px 0;
}

/* ---- Form Validation Errors — styled inline alerts ---- */
#content .terr,
#content .help-block {
  display: inline-block;
  font-size: var(--font-size-sm);
  color: var(--color-error-dark);
  background: #FFF0F0;
  border-left: 3px solid var(--color-error-dark);
  padding: 3px 8px;
  margin-top: 2px;
  border-radius: 0 3px 3px 0;
  line-height: 1.4;
}

/* Required field asterisk — keep plain */
#content .forms label > .terr,
#content .forms > .terr {
  display: inline;
  background: none;
  border-left: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

/* ---- Notification Dismiss ---- */
.notify-bar {
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
  overflow: hidden;
}

.notify-bar[aria-hidden="true"] {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* ---- Grid-aware form inputs (registration forms) ---- */
/* When .forms is in a CSS grid, inputs stretch to fill cells */
@media (min-width: 769px) {
  #content #reg_form .forms .field input[type="text"],
  #content #reg_form .forms .field input[type="password"],
  #content #reg_form .forms .field input[type="email"],
  #content #reg_form .forms .field select {
    width: 100%;
  }
}

/* ---- Checkbox & Radio alignment ---- */
#content .forms .field input[type="checkbox"],
#content .forms .field input[type="radio"],
#content .forms .row input[type="checkbox"],
#content .forms .row input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
  vertical-align: middle;
  accent-color: var(--color-orange);
  cursor: pointer;
}

#content .forms .field label,
#content .forms .row > .field > label {
  vertical-align: middle;
  cursor: pointer;
}

/* Checkbox group layout — stack neatly */
.forms .field input[type="checkbox"] + label,
.forms .field input[type="radio"] + label {
  margin-right: var(--space-md);
}

/* ---- Modernized notification bars (success/error) ---- */
#content .success,
#content .error {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--space-md);
}

#content .success .caption,
#content .error .caption {
  padding: 8px 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--color-white);
}

#content .success .caption {
  background: #4a8f8f;
}

#content .error .caption {
  background: #b33;
}

#content .success .msg,
#content .error .msg {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  font-size: var(--font-size-base);
  line-height: 1.5;
}

/* ---- Form section labels — lightweight group headings ---- */
.form-section-label {
  grid-column: 1 / -1;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 4px;
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

.form-section-label:first-child {
  margin-top: 0;
}

/* ---- EULA / clickable text links ---- */
a.cp {
  text-decoration: underline;
  cursor: pointer;
}