/* ============================================================
   FRAMED MINDS — Inventory Pages (Fluent Forms)
   
   Requires: fm-tokens.css (brand variables)
   
   Styles for the Introductory and Full FMI assessment
   form pages powered by Fluent Forms.
   
   Last updated: March 31, 2026
   ============================================================ */

/* ============================================
   FRAMED MINDS — INVENTORY PAGES (Fluent Forms)
   Targets:
   - .inventory-intro-page
   - .inventory-full-page
   ============================================ */

/* ---------- PAGE BACKGROUND & LAYOUT ---------- */

.inventory-intro-page,
.inventory-full-page {
  padding: 80px 16px 90px;
  background: linear-gradient(180deg, #F4F1E8 0%, #F9FDF3 45%, #FFFFFF 100%);
}

.inventory-intro-page .elementor-container,
.inventory-full-page .elementor-container {
  max-width: 960px;
}

/* Main card around the form */
.inventory-intro-page .fluentform,
.inventory-full-page .fluentform {
  background: #FFFFFF;
  border-radius: 24px;
  border: 1px solid #EBE7DD;
  /* softer, calmer shadow */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
  padding: 28px 26px 26px;
}

/* Make everything breathe nicely on mobile */
@media (max-width: 768px) {
  .inventory-intro-page,
  .inventory-full-page {
    padding: 70px 12px 80px;
  }

  .inventory-intro-page .fluentform,
  .inventory-full-page .fluentform {
    padding: 22px 18px 22px;
    border-radius: 20px;
  }
}

/* ---------- FORM TITLES & DESCRIPTION ---------- */

.inventory-intro-page .fluentform .ff_t-container h3,
.inventory-full-page .fluentform .ff_t-container h3,
.inventory-intro-page .fluentform h3.ff-el-heading,
.inventory-full-page .fluentform h3.ff-el-heading {
  font-size: 1.3rem;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.inventory-intro-page .fluentform .ff_t-container p,
.inventory-full-page .fluentform .ff_t-container p,
.inventory-intro-page .fluentform .ff-form-description,
.inventory-full-page .fluentform .ff-form-description {
  font-size: 0.95rem;
  color: #55616F;
  margin-bottom: 16px;
}

/* little eyebrow text if you use it above the heading */
.inventory-intro-page .eyebrow,
.inventory-full-page .eyebrow {
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: #8A8F7B;
  margin-bottom: 6px;
}

/* ---------- SECTIONS / GROUP BREAKS ---------- */

.inventory-intro-page .fluentform .ff-el-section-break,
.inventory-full-page .fluentform .ff-el-section-break {
  background: #F8F6F1;
  border-radius: 16px;
  border: 1px solid #E5E2D7;
  padding: 12px 14px;
  margin: 20px 0 16px;
}

.inventory-intro-page .fluentform .ff-el-section-break-title,
.inventory-full-page .fluentform .ff-el-section-break-title {
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 2px;
}

.inventory-intro-page .fluentform .ff-el-section-break-subtitle,
.inventory-full-page .fluentform .ff-el-section-break-subtitle {
  font-size: 0.9rem;
  color: #6B7271;
}

/* ---------- INDIVIDUAL FIELDS ---------- */

.inventory-intro-page .fluentform .ff-el-group,
.inventory-full-page .fluentform .ff-el-group {
  margin-bottom: 18px;
}

/* Labels */
.inventory-intro-page .fluentform .ff-el-input--label,
.inventory-full-page .fluentform .ff-el-input--label {
  font-size: 0.94rem;
  font-weight: 500;
  color: #22292F;
  margin-bottom: 4px;
}

/* Helper / description text under labels */
.inventory-intro-page .fluentform .ff-el-help-text,
.inventory-full-page .fluentform .ff-el-help-text {
  font-size: 0.85rem;
  color: #6C7370;
}

/* Text inputs, textarea, select */
.inventory-intro-page .fluentform input[type="text"],
.inventory-intro-page .fluentform input[type="email"],
.inventory-intro-page .fluentform input[type="number"],
.inventory-intro-page .fluentform textarea,
.inventory-intro-page .fluentform select,
.inventory-full-page .fluentform input[type="text"],
.inventory-full-page .fluentform input[type="email"],
.inventory-full-page .fluentform input[type="number"],
.inventory-full-page .fluentform textarea,
.inventory-full-page .fluentform select {
  border-radius: 12px;
  border: 1px solid #D5D1C3;
  padding: 10px 12px;
  font-size: 0.95rem;
  background: #FDFBF6;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.inventory-intro-page .fluentform input:focus,
.inventory-intro-page .fluentform textarea:focus,
.inventory-intro-page .fluentform select:focus,
.inventory-full-page .fluentform input:focus,
.inventory-full-page .fluentform textarea:focus,
.inventory-full-page .fluentform select:focus {
  outline: none;
  border-color: #97CA46;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(151,202,70,0.35);
}

/* ---------- RADIO / CHECKBOX OPTIONS (NO PILLS) ---------- */

/* Wrap each option on its own calm line */
.inventory-intro-page .fluentform .ff-el-form-check,
.inventory-full-page .fluentform .ff-el-form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

/* Native controls, lightly aligned */
.inventory-intro-page .fluentform .ff-el-form-check input[type="checkbox"],
.inventory-intro-page .fluentform .ff-el-form-check input[type="radio"],
.inventory-full-page .fluentform .ff-el-form-check input[type="checkbox"],
.inventory-full-page .fluentform .ff-el-form-check input[type="radio"] {
  margin: 0;
}

/* Simple text labels, no pill background */
.inventory-intro-page .fluentform .ff-el-form-check-label,
.inventory-full-page .fluentform .ff-el-form-check-label {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  font-size: 0.9rem;
  color: #3A4045;
  transition: color 0.18s ease;
  cursor: pointer;
}

/* Slight emphasis when selected, still calm */
.inventory-intro-page .fluentform .ff-el-form-check input:checked + .ff-el-form-check-label,
.inventory-full-page .fluentform .ff-el-form-check input:checked + .ff-el-form-check-label {
  color: #1F2428;
  font-weight: 500;
}

/* ---------- MULTI-STEP PROGRESS (if enabled) ---------- */

.inventory-intro-page .fluentform .ff-step-breadcrumb,
.inventory-full-page .fluentform .ff-step-breadcrumb {
  margin-bottom: 22px;
  border-radius: 16px;
  padding: 10px 12px;
  background: #F7F8F2;
}

.inventory-intro-page .fluentform .ff-step-breadcrumb li,
.inventory-full-page .fluentform .ff-step-breadcrumb li {
  font-size: 0.82rem;
  padding: 4px 10px;
  border-radius: 999px;
  color: #848C80;
}

.inventory-intro-page .fluentform .ff-step-breadcrumb li.ff-step-active,
.inventory-full-page .fluentform .ff-step-breadcrumb li.ff-step-active {
  background: #3A5A40;
  color: #FFFFFF;
}

/* ---------- BUTTONS ---------- */

/* Base styles for buttons */
.inventory-intro-page .fluentform .ff-btn,
.inventory-full-page .fluentform .ff-btn {
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.16s ease, background 0.16s ease;
}

/* Primary submit – slight color difference per tier */
.inventory-intro-page .fluentform .ff-btn-submit {
  background: #97CA46;
  color: #0D1A10;
  box-shadow: 0 12px 30px rgba(151,202,70,0.35);
}

.inventory-full-page .fluentform .ff-btn-submit {
  background: #3A5A40;
  color: #FFFFFF;
  box-shadow: 0 12px 30px rgba(58,90,64,0.35);
}

/* Hover / active */
.inventory-intro-page .fluentform .ff-btn-submit:hover,
.inventory-full-page .fluentform .ff-btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.16);
}

.inventory-intro-page .fluentform .ff-btn-submit:active,
.inventory-full-page .fluentform .ff-btn-submit:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}

/* Previous / next step buttons */
.inventory-intro-page .fluentform .ff-btn.ff-btn-secondary,
.inventory-full-page .fluentform .ff-btn.ff-btn-secondary {
  background: #F7F8F2;
  color: #3A5A40;
  border: 1px solid #D5D8C9;
  box-shadow: none;
}

.inventory-intro-page .fluentform .ff-btn.ff-btn-secondary:hover,
.inventory-full-page .fluentform .ff-btn.ff-btn-secondary:hover {
  background: #E6EBDA;
}

/* Align buttons nicely */
.inventory-intro-page .fluentform .ff_submit_btn_wrapper,
.inventory-full-page .fluentform .ff_submit_btn_wrapper {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- SUCCESS / ERROR MESSAGES ---------- */

.inventory-intro-page .fluentform .ff-message-success,
.inventory-full-page .fluentform .ff-message-success {
  background: #E0F4D6;
  border-radius: 14px;
  border: 1px solid #9ED48C;
  color: #1F3B23;
  padding: 12px 14px;
  font-size: 0.92rem;
}

.inventory-intro-page .fluentform .ff-message-error,
.inventory-full-page .fluentform .ff-message-error {
  background: #FFF2F0;
  border-radius: 14px;
  border: 1px solid #F5B7A8;
  color: #7D2D24;
  padding: 12px 14px;
  font-size: 0.92rem;
}

/* Field-level validation message */
.inventory-intro-page .fluentform .ff-el-is-error .text-danger,
.inventory-full-page .fluentform .ff-el-is-error .text-danger {
  font-size: 0.8rem;
}

/* ---------- SMALL MOBILE TWEAKS ---------- */

@media (max-width: 480px) {
  .inventory-intro-page .fluentform .ff-el-section-break,
  .inventory-full-page .fluentform .ff-el-section-break {
    padding: 12px 12px;
  }

  .inventory-intro-page .fluentform .ff-el-form-check-label,
  .inventory-full-page .fluentform .ff-el-form-check-label {
    width: 100%;
    text-align: left;
  }
}