/* ===========================================
   Oxygen-Form Global Styles — Generic / Long
   Drop into Oxygen custom CSS or site stylesheet
   =========================================== */

/* -------------------------
   Theme variables (easy to tweak)
   ------------------------- */
:root{
  --form-bg: #ffffff;
  --form-contrast-bg: #f7fafc;
  --primary: #0b66ff;            /* main brand color */
  --primary-600: #095ce6;
  --primary-700: #054bb4;
  --accent: #ff6b6b;
  --muted: #6b7280;
  --border: #e6e9ef;
  --success: #16a34a;
  --danger: #ef4444;
  --shadow: 0 6px 20px rgba(30,41,59,0.06);
  --radius: 10px;
  --radius-sm: 6px;
  --input-padding: 14px 16px;
  --transition-fast: 160ms ease;
  --transition-medium: 280ms cubic-bezier(.2,.8,.2,1);
  --max-form-width: 900px;
  --glass: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0.45));
  --focus-ring: 0 0 0 4px rgba(11,102,255,0.12);
}

/* ------------------------------------------------------------
   Broad selector coverage so it affects Oxygen forms & similar
   Target examples: form.oxygen, .oxygen-form, .oxy-form, .oxy__form
   ------------------------------------------------------------ */

/* Base form container */
form[class*="oxygen"],
form[class*="oxy"],
.oxygen-form, .oxy-form, .oxy__form, .oxy-form-wrapper, .oxygen-form-wrap {
  background: var(--form-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 20px;
  max-width: var(--max-form-width);
  width: 100%;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #0f172a;
  line-height: 1.45;
}

/* Form grid / layout helpers */
.oxygen-form .form-grid,
.oxy-form .form-grid,
form[class*="oxygen"] .form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
}

/* Single-column override */
.oxygen-form.single-column .form-grid,
.oxy-form.single-column .form-grid {
  grid-template-columns: 1fr;
}

/* Full width control */
.oxygen-form .form-field--full,
.oxygen-form .full-width,
.oxy-form .form-field--full {
  grid-column: 1 / -1;
}

/* Label styling (including floating label support) */
.oxygen-form label,
.oxy-form label,
form[class*="oxy"] label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--muted);
}

/* Input / select / textarea base */
.oxygen-form input[type="text"],
.oxygen-form input[type="email"],
.oxygen-form input[type="tel"],
.oxygen-form input[type="url"],
.oxygen-form input[type="search"],
.oxygen-form input[type="password"],
.oxygen-form input[type="number"],
.oxygen-form input[type="date"],
.oxygen-form input[type="time"],
.oxygen-form input[type="datetime-local"],
.oxygen-form textarea,
.oxygen-form select,
.oxy-form input, .oxy-form textarea, .oxy-form select {
  width: 100%;
  padding: var(--input-padding);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #fff, var(--form-contrast-bg));
  box-sizing: border-box;
  font-size: 15px;
  transition: border var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Larger textareas */
.oxygen-form textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

/* Placeholder visibility */
.oxygen-form input::placeholder,
.oxygen-form textarea::placeholder {
  color: #9aa3b2;
  opacity: 1;
}

/* Focus & Active states */
.oxygen-form input:focus,
.oxygen-form textarea:focus,
.oxygen-form select:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  transform: translateY(-1px);
}

/* Disabled state */
.oxygen-form input[disabled],
.oxygen-form textarea[disabled],
.oxygen-form select[disabled],
.oxy-form .disabled {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #e9ecef;
  cursor: not-allowed;
  opacity: 0.9;
}

/* -----------------------------------------
   Buttons (submit, reset, custom buttons)
   ----------------------------------------- */
.oxygen-form .btn,
.oxygen-form button[type="submit"],
.oxygen-form input[type="submit"],
.oxy-form .button,
form[class*="oxy"] .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg, var(--primary), var(--primary-600));
  color: #fff;
  box-shadow: 0 8px 26px rgba(11,102,255,0.18);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

/* Button hover/focus */
.oxygen-form .btn:hover,
.oxygen-form button[type="submit"]:hover,
.oxygen-form input[type="submit"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.oxygen-form .btn:active,
.oxygen-form button[type="submit"]:active {
  transform: translateY(0);
}

/* Secondary / ghost button */
.oxygen-form .btn--ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: none;
}

/* Loading spinner inside button (small) */
.oxygen-form .btn .spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.9);
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -----------------------------------------
   Validation: error / success states
   ----------------------------------------- */
.oxygen-form .form-field.has-error input,
.oxygen-form .form-field.has-error textarea,
.oxygen-form .form-field.has-error select,
.oxygen-form input.invalid,
.oxygen-form textarea.invalid,
.oxygen-form select.invalid {
  border-color: var(--danger);
  box-shadow: 0 6px 18px rgba(239,68,68,0.08);
}

.oxygen-form .form-field.has-success input,
.oxygen-form .form-field.has-success textarea,
.oxygen-form .form-field.has-success select {
  border-color: var(--success);
  box-shadow: 0 6px 18px rgba(16,185,129,0.06);
}

/* Error message */
.oxygen-form .error-message,
.oxy-form .error-msg,
form[class*="oxy"] .error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 8px;
}

/* Success message */
.oxygen-form .success-message {
  color: var(--success);
  font-size: 14px;
  margin-top: 8px;
  background: rgba(22,163,74,0.05);
  padding: 8px 12px;
  border-radius: 8px;
}

/* -----------------------------------------
   Help text / hints / field descriptions
   ----------------------------------------- */
.oxygen-form .field-help,
.oxy-form .help {
  font-size: 13px;
  color: #7b8794;
  margin-top: 6px;
  display: block;
}

/* -----------------------------------------
   Fancy input adornments: icons, prefix, suffix
   ----------------------------------------- */
.oxy-input-adorned,
.oxygen-form .input-with-icon {
  position: relative;
}

.oxy-input-adorned input,
.oxy-input-adorned textarea {
  padding-left: 44px; /* space for icon */
}

.oxy-input-adorned .field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  pointer-events: none;
}

/* -----------------------------------------
   Floating labels
   ----------------------------------------- */
.oxygen-form .floating {
  position: relative;
}

.oxygen-form .floating input,
.oxygen-form .floating textarea {
  padding-top: 20px;
  padding-bottom: 12px;
}

.oxygen-form .floating label {
  position: absolute;
  left: 16px;
  top: 12px;
  transform-origin: left top;
  transition: transform 180ms ease, font-size 180ms ease, top 180ms ease, color 180ms ease;
  pointer-events: none;
  font-size: 14px;
  color: #9aa3b2;
}

.oxygen-form .floating input:focus + label,
.oxygen-form .floating input:not(:placeholder-shown) + label,
.oxygen-form .floating textarea:focus + label,
.oxygen-form .floating textarea:not(:placeholder-shown) + label {
  transform: translateY(-10px) scale(0.88);
  color: var(--primary);
  top: 6px;
}

/* -----------------------------------------
   Select styling (custom arrow)
   ----------------------------------------- */
.oxygen-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
                    linea