/* ============================================================
   Five Personas – Book Handler Styles
   File: book-form.css
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --fp-font-body:       'Lato', 'Helvetica Neue', Arial, sans-serif;
  --fp-font-heading:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --fp-colour-primary:  #e94e1b;   /* Five Personas accent orange-red */
  --fp-colour-bar-1:    #e94e1b;
  --fp-colour-bar-2:    #f7a12a;
  --fp-colour-bar-3:    #3bb3c3;
  --fp-colour-bar-4:    #5c4b9b;

  --fp-colour-text:     #333333;
  --fp-colour-muted:    #777777;
  --fp-colour-border:   #d8d8d8;
  --fp-colour-bg:       #ffffff;
  --fp-colour-bg-light: #f8f8f8;

  --fp-colour-success:  #2e7d32;
  --fp-colour-error:    #c62828;

  --fp-radius:          3px;
  --fp-transition:      0.2s ease;
  --fp-shadow-focus:    0 0 0 3px rgba(233, 78, 27, 0.18);
}

/* ── Wrapper ────────────────────────────────────────────────── */
.fp-book-form-wrap {
  /* font-family:    var(--fp-font-body); */
  color:          var(--fp-colour-text);
  background:     var(--fp-colour-bg);
  /* max-width:      640px; */
  margin:         0 auto;
  padding:        40px 32px 48px;
}

/* ── Header ─────────────────────────────────────────────────── */
.fp-form-header {
  margin-bottom: 32px;
  text-align:    left;
}

.fp-form-title {
  /* font-family:   var(--fp-font-heading); */
  /* font-size:     clamp(1.5rem, 3vw, 2rem); */
  font-weight:   700;
  color:         var(--fp-colour-text);
  margin:        0 0 6px;
  line-height:   1.2;
}

.fp-form-subtitle {
  /* font-size:     1rem; */
  color:         var(--fp-colour-muted);
  margin:        0 0 16px;
}

/* Multicolour decorative bar inspired by Five Personas */
.fp-colour-bar {
  display:       flex;
  height:        4px;
  border-radius: 2px;
  overflow:      hidden;
  width:         100%;
}

.fp-colour-bar::before {
  content:    '';
  flex:       1;
  background: linear-gradient(
    to right,
    var(--fp-colour-bar-1)  0%,
    var(--fp-colour-bar-1)  25%,
    var(--fp-colour-bar-2)  25%,
    var(--fp-colour-bar-2)  50%,
    var(--fp-colour-bar-3)  50%,
    var(--fp-colour-bar-3)  75%,
    var(--fp-colour-bar-4)  75%,
    var(--fp-colour-bar-4)  100%
  );
}

/* ── Form Layout ────────────────────────────────────────────── */
.fp-book-form {
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

.fp-form-row {
  display: flex;
  gap:     20px;
}

.fp-form-row--half {
  flex-wrap: wrap;
}

.fp-form-row--half .fp-field-group {
  flex: 1 1 calc(50% - 10px);
  min-width: 180px;
}

.fp-form-row--submit {
  margin-top: 8px;
}

/* ── Field Groups ───────────────────────────────────────────── */
.fp-field-group {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  flex:           1;
}

.fp-label {
  /* font-family:  var(--fp-font-heading); */
  /* font-size:    0.78rem; */
  font-weight:  600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:        var(--fp-colour-text);
}

.fp-required {
  color:       var(--fp-colour-primary);
  margin-left: 2px;
}

/* ── Inputs ─────────────────────────────────────────────────── */
.fp-input {
  /* font-family:    var(--fp-font-body); */
  /* font-size:      0.95rem; */
  color:          var(--fp-colour-text);
  background:     var(--fp-colour-bg);
  border:         1.5px solid var(--fp-colour-border);
  border-radius:  var(--fp-radius);
  padding:        11px 14px;
  width:          100%;
  box-sizing:     border-box;
  transition:     border-color var(--fp-transition), box-shadow var(--fp-transition);
  outline:        none;
  -webkit-appearance: none;
  appearance:     none;
}

.fp-input::placeholder {
  color:    var(--fp-colour-muted);
  opacity:  1;
}

.fp-input:hover {
  border-color: #aaaaaa;
}

.fp-input:focus {
  border-color: var(--fp-colour-primary);
  box-shadow:   var(--fp-shadow-focus);
}

/* ── Validation States ──────────────────────────────────────── */
.fp-input.fp-is-invalid {
  border-color: var(--fp-colour-error);
  box-shadow:   0 0 0 3px rgba(198, 40, 40, 0.12);
}

.fp-input.fp-is-valid {
  border-color: var(--fp-colour-success);
}

.fp-field-error {
  /* font-size:   0.78rem; */
  color:       var(--fp-colour-error);
  min-height:  1em;
  line-height: 1.3;
}

/* ── Submit Button ──────────────────────────────────────────── */
.fp-submit-btn {
  /* font-family:    var(--fp-font-heading); */
  /* font-size:      0.85rem; */
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          #ffffff;
  background:     var(--fp-colour-primary);
  border:         none;
  border-radius:  var(--fp-radius);
  padding:        14px 40px;
  cursor:         pointer;
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  transition:     background var(--fp-transition), transform var(--fp-transition);
  position:       relative;
  overflow:       hidden;
}

.fp-submit-btn:hover:not(:disabled) {
  background: #c73e10;
}

.fp-submit-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.fp-submit-btn:disabled {
  opacity:  0.7;
  cursor:   not-allowed;
}

/* Spinner */
.fp-btn-spinner {
  display:       none;
  width:         16px;
  height:        16px;
  border:        2px solid rgba(255, 255, 255, 0.4);
  border-top:    2px solid #ffffff;
  border-radius: 50%;
  animation:     fp-spin 0.7s linear infinite;
  flex-shrink:   0;
}

.fp-submit-btn.fp-is-loading .fp-btn-spinner {
  display: inline-block;
}

@keyframes fp-spin {
  to { transform: rotate(360deg); }
}

/* ── Notices ────────────────────────────────────────────────── */
.fp-form-notice {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       14px 16px;
  border-radius: var(--fp-radius);
  /* font-size:     0.92rem;
  line-height:   1.5; */
  animation:     fp-fade-in 0.3s ease;
}

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

.fp-form-success {
  background:   #e8f5e9;
  color:        var(--fp-colour-success);
  border:       1.5px solid #a5d6a7;
}

.fp-form-error-notice {
  background:   #ffebee;
  color:        var(--fp-colour-error);
  border:       1.5px solid #ef9a9a;
}

.fp-notice-icon {
  width:      20px;
  height:     20px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 520px) {
  .fp-book-form-wrap {
    padding: 28px 20px 36px;
  }

  .fp-form-row--half {
    flex-direction: column;
  }

  .fp-form-row--half .fp-field-group {
    flex: 1 1 100%;
  }
}