/* Subscription Rental — Signup UI
   Path: subscription_tool_rental/assets/str-signup.css
   Design tokens: buttons #43a950 / #54bb61, radius 3px, calendar #e4f4e4/#54bb61/#43a950
*/

/* ========== Base / Scope ========== */
:root {
  --str-green: #43a950;
  --str-green-2: #54bb61;
  --str-gray-50: #f8fafc;
  --str-gray-100: #f1f5f9;
  --str-gray-200: #e5e7eb;
  --str-gray-300: #cfd4d9;
  --str-gray-500: #6b7280;
  --str-gray-700: #374151;
  --str-red: #d63638; /* WP admin error red */
  --str-focus: rgba(67, 169, 80, 0.18);
  --str-radius: 3px;
}

.str-h2 { font-size: 1.5rem; margin: .2em 0 .6em 0; }
.str-h3 { font-size: 1.2rem; margin: 1em 0 .4em 0; }
.str-note { font-size: .9em; color: var(--str-gray-700); }

/* Cardy containers (banner / plan / identity) */
.str-banner,
.str-plan-wrap,
.str-id-wrap {
  background: #fff;
  border: 1px solid var(--str-gray-200);
  border-radius: 6px;
  padding: 16px;
  max-width: 880px;
  margin: 0 auto 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.str-card { border: 1px solid var(--str-gray-200); border-radius: 6px; padding: 12px; background: #fff; }

/* ========== Buttons ========== */
.str-btn {
  display: inline-block;
  line-height: 1;
  padding: .6em 1em;
  border: 0;
  border-radius: var(--str-radius);
  background: var(--str-green);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .02s ease;
}
.str-btn:hover { background: var(--str-green-2); }
.str-btn:active { transform: translateY(1px); }
.str-btn-inline { margin-left: .75em; }
.str-btn-primary { background: var(--str-green); }

/* ========== Inputs / Labels ========== */
.str-banner input[type="text"],
.str-banner input[type="email"],
.str-plan-wrap select,
.str-id-wrap input:not([type="checkbox"]):not([type="radio"]),
.str-id-wrap select,
.str-id-wrap textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--str-gray-300);
  border-radius: var(--str-radius);
  background: #fff;
  color: #111;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  appearance: none;
  -webkit-appearance: none;
}

.str-id-wrap input::placeholder,
.str-banner input::placeholder { color: var(--str-gray-500); }

.str-id-wrap input:focus,
.str-id-wrap select:focus,
.str-banner input:focus,
.str-plan-wrap select:focus,
.str-id-wrap textarea:focus {
  border-color: var(--str-green);
  box-shadow: 0 0 0 3px var(--str-focus);
}

.str-id-wrap input[disabled],
.str-id-wrap select[disabled] {
  background: var(--str-gray-100);
  cursor: not-allowed;
}

/* Labels stack nicely without changing HTML */
.str-plan-wrap label,
.str-id-wrap label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
  font-weight: 500;
  color: var(--str-gray-700);
}
.str-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }

/* Radios & checkboxes */
.str-chk { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.str-chk input { margin: 0; }

/* ========== Grid/Layout ========== */
.str-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.str-grid .full { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .str-grid { grid-template-columns: 1fr; }
}

/* ZIP banner row */
.str-banner-row { display: flex; gap: 8px; align-items: center; }
.str-banner input[type="text"], .str-banner input[type="email"] { flex: 1; min-width: 0; }

/* Terms scroller */
.str-terms .str-scroll-box {
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--str-gray-200);
  border-radius: 4px;
  padding: 10px;
  background: #fff;
}

/* Identity box */
.str-id-box { margin-top: 14px; border-top: 1px dashed var(--str-gray-200); padding-top: 14px; }
.str-actions { margin-top: 16px; }

/* ========== Notices / Toasts ========== */
.str-toast { position: relative; margin: 10px 0; padding: 10px; border-radius: var(--str-radius); background: var(--str-gray-50); border: 1px solid var(--str-gray-200); }
.str-toast-info { background: #eef6ff; }
.str-toast-success { background: #e6f7ea; }
.str-toast-warning { background: #fff9e6; }
.str-toast-error { background: #fde7e7; }

/* Inline results in ZIP step */
.str-result { margin-top: 8px; }
.str-result.ok { color: #187a26; }
.str-result-msg { margin-bottom: 12px; }

/* ========== Error states (optional hook-in) ========== */
/* Add .str-error to a label or input wrapper if validation fails */
.str-error input,
.str-error select,
.str-error textarea {
  border-color: var(--str-red) !important;
  box-shadow: 0 0 0 3px rgba(214,54,56,.12);
}
.str-error .str-help { color: var(--str-red); font-size: .9em; }

/* ========== Calendar tokens (reserved) ========== */
.str-cal-available { background: #e4f4e4; }
.str-cal-hover     { background: #54bb61; }
.str-cal-selected  { background: #43a950; }

/* ========== Override theme weirdness (safety) ========== */
.str-banner input,
.str-plan-wrap select,
.str-id-wrap input,
.str-id-wrap select,
.str-id-wrap textarea {
  box-sizing: border-box;
  max-width: 100%;
}