/* Toolspot4u Child Theme — Global Form Design System (Paper & Ember)
   Single reusable form system applied everywhere: WP, WC, MemberPress, CF7, GF.
   All integration-specific overrides live in assets/css/integrations/*.css.

   Token reference (from tokens.css):
   --f-h          field height (48px)
   --f-px / --f-py  padding
   --f-radius     border radius (12px)
   --f-bg         field background (#fff)
   --f-border     default border (var(--ink-30))
   --f-focus-border / --f-focus-ring
   --f-error-border / --f-error-ring
   --f-success-border / --f-success-ring
   --f-label-font / --f-label-size / --f-label-tracking
*/

/* ── Field wrapper ───────────────────────────────────────────────────────── */

.field,
.t4u-field {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  position:       relative;
}

/* ── Label ───────────────────────────────────────────────────────────────── */

label,
.field label,
.t4u-label {
  font-family:    var(--f-label-font);
  font-size:      var(--f-label-size);
  letter-spacing: var(--f-label-tracking);
  text-transform: uppercase;
  color:          var(--ink-60);
  display:        block;
  font-weight:    500;
}

/* Required indicator */
label .required,
label abbr[title="required"] {
  color:            var(--ember);
  text-decoration:  none;
  margin-left:      2px;
}

/* ── Base input styles (all text-like inputs) ────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
textarea,
select,
.t4u-input {
  font-family:   var(--body);
  font-size:     1rem;
  color:         var(--f-text);
  background:    var(--f-bg);
  border:        1px solid var(--f-border);
  border-radius: var(--f-radius);
  padding:       var(--f-py) var(--f-px);
  width:         100%;
  height:        var(--f-h);
  appearance:    none;
  -webkit-appearance: none;
  outline:       none;
  transition:    border-color var(--dur-std),
                 box-shadow var(--dur-std);
  line-height:   1.5;
}

/* Textarea overrides height to auto (uses rows attribute) */
textarea {
  height:      auto;
  min-height:  120px;
  resize:      vertical;
  line-height: 1.6;
}

/* Select: custom chevron */
select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(29,27,22,.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 14px center;
  background-size:     18px;
  padding-right:       44px;
  cursor:              pointer;
}

/* Placeholder */
input::placeholder,
textarea::placeholder { color: var(--f-placeholder); }

/* ── Focus state ─────────────────────────────────────────────────────────── */

input:focus,
textarea:focus,
select:focus,
.t4u-input:focus {
  border-color: var(--f-border-focus);
  box-shadow:   var(--f-focus-ring);
  outline:      none;
}

/* ── Hover state ─────────────────────────────────────────────────────────── */

input:not(:disabled):hover,
textarea:not(:disabled):hover,
select:not(:disabled):hover {
  border-color: var(--f-border-hover);
}

/* ── Disabled state ──────────────────────────────────────────────────────── */

input:disabled,
textarea:disabled,
select:disabled,
.t4u-input:disabled {
  background:  var(--f-bg-disabled);
  color:       var(--ink-30);
  cursor:      not-allowed;
  opacity:     0.65;
}
input:disabled::placeholder,
textarea:disabled::placeholder { color: var(--ink-30); }

/* ── Error state ─────────────────────────────────────────────────────────── */

.field.has-error input,
.field.has-error textarea,
.field.has-error select,
input.t4u-error,
textarea.t4u-error,
select.t4u-error {
  border-color: var(--f-border-error);
  box-shadow:   var(--f-error-ring);
}

.field-error,
.field .t4u-error-msg {
  font-family:    var(--mono);
  font-size:      0.72rem;
  letter-spacing: 0.03em;
  color:          var(--state-error);
  display:        flex;
  align-items:    center;
  gap:            6px;
  margin-top:     -2px;
}

/* ── Success state ───────────────────────────────────────────────────────── */

.field.has-success input,
.field.has-success textarea,
.field.has-success select {
  border-color: var(--f-border-success);
  box-shadow:   var(--f-success-ring);
}

.field-success,
.field .t4u-success-msg {
  font-family:    var(--mono);
  font-size:      0.72rem;
  letter-spacing: 0.03em;
  color:          var(--state-success);
  margin-top:     -2px;
}

/* ── Checkbox ────────────────────────────────────────────────────────────── */

.t4u-check,
.field--check {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  cursor:      pointer;
}

.t4u-check input[type="checkbox"],
input[type="checkbox"].t4u-cb {
  width:         20px;
  height:        20px;
  min-width:     20px;
  border-radius: 5px;
  border:        1.5px solid var(--f-border);
  background:    var(--f-bg);
  appearance:    none;
  -webkit-appearance: none;
  cursor:        pointer;
  position:      relative;
  transition:    border-color var(--dur-std), background var(--dur-std);
  padding:       0;
}

.t4u-check input[type="checkbox"]:checked,
input[type="checkbox"].t4u-cb:checked {
  background:   var(--ember);
  border-color: var(--ember);
}

.t4u-check input[type="checkbox"]:checked::after,
input[type="checkbox"].t4u-cb:checked::after {
  content:    '';
  position:   absolute;
  left:       5px; top: 2px;
  width:      6px; height: 10px;
  border:     2px solid #fff;
  border-top: none;
  border-left: none;
  transform:  rotate(45deg);
}

.t4u-check input[type="checkbox"]:focus-visible {
  outline:        2px solid var(--ember);
  outline-offset: 2px;
}

.t4u-check label { font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: var(--ink-60); cursor: pointer; }

/* ── Radio button ────────────────────────────────────────────────────────── */

.t4u-radio,
.field--radio {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  cursor:      pointer;
}

input[type="radio"].t4u-rb {
  width:         20px;
  height:        20px;
  min-width:     20px;
  border-radius: 50%;
  border:        1.5px solid var(--f-border);
  background:    var(--f-bg);
  appearance:    none;
  -webkit-appearance: none;
  cursor:        pointer;
  position:      relative;
  transition:    border-color var(--dur-std), background var(--dur-std);
  padding:       0;
}
input[type="radio"].t4u-rb:checked {
  border-color: var(--ember);
  background:   var(--ember);
  box-shadow:   inset 0 0 0 4px #fff;
}
input[type="radio"].t4u-rb:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* ── Toggle switch ───────────────────────────────────────────────────────── */

.t4u-toggle {
  display:     inline-flex;
  align-items: center;
  gap:         12px;
  cursor:      pointer;
}

.t4u-toggle-track {
  width:          48px;
  height:         28px;
  border-radius:  var(--r-pill);
  background:     var(--ink-12);
  border:         1.5px solid var(--ink-30);
  position:       relative;
  transition:     background var(--dur-std), border-color var(--dur-std);
  cursor:         pointer;
  flex:           0 0 auto;
}

.t4u-toggle-thumb {
  position:      absolute;
  top:           3px;
  left:          3px;
  width:         18px;
  height:        18px;
  border-radius: 50%;
  background:    #fff;
  box-shadow:    0 1px 4px rgba(0,0,0,.2);
  transition:    transform var(--dur-std) var(--ease-out);
}

.t4u-toggle input:checked + .t4u-toggle-track,
.t4u-toggle-track.on {
  background:    var(--ember);
  border-color:  var(--ember);
}
.t4u-toggle input:checked + .t4u-toggle-track .t4u-toggle-thumb,
.t4u-toggle-track.on .t4u-toggle-thumb {
  transform: translateX(20px);
}

/* ── File upload ─────────────────────────────────────────────────────────── */

.t4u-file-zone {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            12px;
  padding:        40px;
  border:         2px dashed var(--ink-30);
  border-radius:  var(--r-lg);
  background:     var(--f-bg);
  cursor:         pointer;
  transition:     border-color var(--dur-std), background var(--dur-std);
  text-align:     center;
}
.t4u-file-zone:hover,
.t4u-file-zone.drag-over {
  border-color: var(--ember);
  background:   rgba(255,92,0,.04);
}
.t4u-file-zone .file-icon { color: var(--ink-30); }
.t4u-file-zone p {
  font-size: 0.9rem;
  color:     var(--ink-60);
  margin:    0;
}
.t4u-file-zone input[type="file"] {
  display: none; /* triggered by clicking the zone */
}

/* ── Input group (icon + input) ──────────────────────────────────────────── */

.input-group {
  position: relative;
  display:  flex;
  align-items: stretch;
}

.input-group .input-icon {
  position:       absolute;
  left:           var(--f-px);
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--ink-30);
  pointer-events: none;
  display:        flex;
  align-items:    center;
}

.input-group input {
  padding-left: calc(var(--f-px) + 28px);
}

/* Password toggle button (injected by forms.js) */
.input-group .pw-toggle {
  position:   absolute;
  right:      var(--f-px);
  top:        50%;
  transform:  translateY(-50%);
  background: transparent;
  border:     0;
  color:      var(--ink-30);
  cursor:     pointer;
  display:    flex;
  align-items: center;
  padding:    4px;
  border-radius: var(--r-xs);
  transition: color var(--dur-std);
}
.input-group .pw-toggle:hover { color: var(--ink); }

/* ── Form card (.authcard — login / register) ────────────────────────────── */

.authcard,
.t4u-form-card {
  background:    #fff;
  border-radius: var(--r-3xl);
  padding:       44px;
  border:        1px solid var(--ink-12);
  box-shadow:    var(--shadow-md);
  max-width:     480px;
  width:         100%;
}

/* Auth tab row (.tabrow) */
.tabrow {
  display:        flex;
  gap:            0;
  border-bottom:  1px solid var(--ink-12);
  margin-bottom:  32px;
}
.tabrow button {
  flex:           1;
  background:     transparent;
  border:         0;
  padding:        12px 0;
  font-family:    var(--body);
  font-size:      0.95rem;
  font-weight:    500;
  color:          var(--ink-60);
  cursor:         pointer;
  border-bottom:  2px solid transparent;
  transition:     color var(--dur-std), border-color var(--dur-std);
  margin-bottom:  -1px;
}
.tabrow button.on,
.tabrow button[aria-selected="true"] {
  color:         var(--ink);
  border-color:  var(--ember);
  font-weight:   600;
}

/* Auth divider (between OAuth and email form) */
.auth-divider {
  display:     flex;
  align-items: center;
  gap:         16px;
  color:       var(--ink-30);
  font-family: var(--mono);
  font-size:   0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin:      24px 0;
}
.auth-divider::before,
.auth-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--ink-12);
}

/* ── Form submit button row ───────────────────────────────────────────────── */

.form-submit { margin-top: 8px; }
.form-submit .btn { width: 100%; justify-content: center; }

/* ── WP native login / register / forgot-password forms ─────────────────── */

#login,
#loginform,
#registerform,
#lostpasswordform {
  padding:    0 !important;
  background: transparent !important;
  border:     0 !important;
  box-shadow: none !important;
}

#login h1 a { display: none; } /* hide WP logo */

#login #loginform,
#login #registerform,
#login #lostpasswordform {
  background:    #fff;
  border:        1px solid var(--ink-12);
  border-radius: var(--r-3xl);
  padding:       40px !important;
  box-shadow:    var(--shadow-md);
}

#loginform .forminput,
#loginform p,
#registerform p,
#lostpasswordform p {
  margin-bottom: 20px !important;
}

#loginform .forminput label,
#loginform label,
#registerform label,
#lostpasswordform label {
  font-family:    var(--f-label-font) !important;
  font-size:      var(--f-label-size) !important;
  letter-spacing: var(--f-label-tracking) !important;
  text-transform: uppercase !important;
  color:          var(--ink-60) !important;
  margin-bottom:  8px !important;
  display:        block !important;
}

#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"],
#registerform input[type="text"],
#registerform input[type="email"],
#registerform input[type="password"],
#lostpasswordform input[type="email"] {
  font-family:   var(--body) !important;
  font-size:     1rem !important;
  color:         var(--ink) !important;
  background:    var(--f-bg) !important;
  border:        1px solid var(--f-border) !important;
  border-radius: var(--f-radius) !important;
  height:        var(--f-h) !important;
  padding:       var(--f-py) var(--f-px) !important;
  width:         100% !important;
  box-shadow:    none !important;
  transition:    border-color var(--dur-std), box-shadow var(--dur-std) !important;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#registerform input:focus,
#lostpasswordform input:focus {
  border-color: var(--ember) !important;
  box-shadow:   var(--f-focus-ring) !important;
  outline:      none !important;
}

#loginform .button-primary,
#registerform .button-primary,
#lostpasswordform .button-primary,
#wp-submit {
  background:    var(--ember) !important;
  border:        0 !important;
  border-radius: var(--r-lg) !important;
  height:        var(--f-h) !important;
  padding:       0 26px !important;
  font-family:   var(--body) !important;
  font-weight:   600 !important;
  font-size:     1rem !important;
  color:         #fff !important;
  cursor:        pointer !important;
  width:         100% !important;
  transition:    background var(--dur-std) !important;
  box-shadow:    none !important;
  text-shadow:   none !important;
}
#loginform .button-primary:hover,
#registerform .button-primary:hover,
#wp-submit:hover { background: var(--ember-deep) !important; }

/* WP login page — "Remember me" checkbox */
#loginform .login-remember label { text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--ink-60); }
#loginform .login-remember input[type="checkbox"] { accent-color: var(--ember); }

/* WP login page — link colours */
#nav a, #backtoblog a { color: var(--ember-deep); }
#nav a:hover, #backtoblog a:hover { color: var(--ink); }