/* ============================================================
   Companion Contact Form — Plugin Stylesheet
   Prefixed with .ccf- to avoid conflicts with theme styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=DM+Sans:wght@300;400;500;600&display=swap');

.ccf-wrap {
  --ccf-sage:    #5c7a6e;
  --ccf-sage-lt: #dde9e5;
  --ccf-cream:   #faf8f4;
  --ccf-ink:     #1c2321;
  --ccf-muted:   #6b7c78;
  --ccf-white:   #ffffff;
  --ccf-accent:  #b5754e;
  --ccf-border:  #e4ded6;
  --ccf-radius:  14px;
  --ccf-shadow:  0 4px 28px rgba(28,35,33,.08);
  font-family: 'DM Sans', sans-serif;
  color: var(--ccf-ink);
  background: var(--ccf-cream);
}

/* ── HERO ── */
.ccf-hero {
  background: var(--ccf-sage);
  padding: 72px 40px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ccf-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(255,255,255,.07) 0%, transparent 65%);
}
.ccf-hero-eyebrow {
  display: inline-block;
  font-size: .75rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
  margin-bottom: 14px;
}
.ccf-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600; color: var(--ccf-white);
  line-height: 1.15; margin: 0 0 16px;
}
.ccf-hero p {
  font-size: 1rem; color: rgba(255,255,255,.75);
  max-width: 520px; margin: 0 auto; line-height: 1.7;
}

/* ── MAIN GRID ── */
.ccf-main {
  max-width: 1140px; margin: 0 auto;
  padding: 64px 40px 96px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}

/* ── SECTION LABEL ── */
.ccf-section-label {
  font-size: .72rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ccf-accent);
  margin-bottom: 28px; display: flex; align-items: center; gap: 10px;
}
.ccf-section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--ccf-border);
}

/* ── STATE BLOCKS ── */
.ccf-state-block { margin-bottom: 36px; }
.ccf-state-block h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; font-weight: 600;
  color: var(--ccf-ink); margin: 0 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.ccf-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--ccf-sage-lt); color: var(--ccf-sage);
  padding: 3px 10px; border-radius: 100px;
}
.ccf-city-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.ccf-city-card {
  background: var(--ccf-white); border: 1px solid var(--ccf-border);
  border-radius: var(--ccf-radius); padding: 14px 18px;
  display: flex; align-items: center; gap: 10px;
  font-size: .92rem; font-weight: 500; color: var(--ccf-ink);
  transition: box-shadow .2s, border-color .2s, transform .2s;
  cursor: default;
}
.ccf-city-card:hover {
  box-shadow: var(--ccf-shadow);
  border-color: var(--ccf-sage);
  transform: translateY(-2px);
}
.ccf-city-card svg { width: 15px; height: 15px; color: var(--ccf-sage); flex-shrink: 0; }

/* ── OFFICE CARD ── */
.ccf-office-card {
  margin-top: 36px;
  background: var(--ccf-ink); color: var(--ccf-white);
  border-radius: var(--ccf-radius); padding: 28px 32px;
  display: flex; gap: 20px; align-items: flex-start;
}
.ccf-office-icon {
  width: 44px; height: 44px; background: var(--ccf-sage);
  border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
}
.ccf-office-icon svg { width: 20px; height: 20px; color: var(--ccf-white); }
.ccf-office-card h4 {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
  margin: 0 0 6px;
}
.ccf-office-card address {
  font-style: normal; font-size: .96rem; line-height: 1.6;
  color: rgba(255,255,255,.9); margin-bottom: 12px;
}
.ccf-contact-links { display: flex; flex-direction: column; gap: 6px; }
.ccf-contact-links a {
  font-size: .88rem; color: var(--ccf-sage-lt); text-decoration: none;
  display: flex; align-items: center; gap: 7px;
  transition: color .15s;
}
.ccf-contact-links a:hover { color: var(--ccf-white); }
.ccf-contact-links a svg { width: 14px; height: 14px; }

/* ── FORM CARD ── */
.ccf-form-card {
  background: var(--ccf-white); border: 1px solid var(--ccf-border);
  border-radius: 20px; padding: 44px 40px;
  box-shadow: var(--ccf-shadow);
  position: sticky; top: 90px;
}
.ccf-form-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem; font-weight: 600;
  color: var(--ccf-ink); margin: 0 0 6px;
}
.ccf-sub {
  font-size: .9rem; color: var(--ccf-muted); margin-bottom: 32px; line-height: 1.6;
}
.ccf-form-group { margin-bottom: 18px; }
.ccf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ccf-form-card label {
  display: block; font-size: .78rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ccf-muted); margin-bottom: 7px;
}
.ccf-req { color: var(--ccf-accent); }

.ccf-form-card input,
.ccf-form-card select,
.ccf-form-card textarea {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--ccf-border);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: .93rem; color: var(--ccf-ink);
  background: var(--ccf-cream);
  outline: none;
  transition: border-color .2s, background .2s;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
.ccf-form-card input:focus,
.ccf-form-card select:focus,
.ccf-form-card textarea:focus {
  border-color: var(--ccf-sage);
  background: var(--ccf-white);
}
.ccf-form-card textarea { resize: vertical; min-height: 110px; }
.ccf-form-card select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c7a6e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
  cursor: pointer;
}

/* ── FIELD ERRORS ── */
.ccf-field-error {
  font-size: .75rem; color: #c0392b; margin-top: 5px; display: none;
}
.ccf-form-card input.ccf-invalid,
.ccf-form-card select.ccf-invalid,
.ccf-form-card textarea.ccf-invalid {
  border-color: #c0392b !important;
}

/* ── SUBMIT BUTTON ── */
.ccf-btn-submit {
  width: 100%; margin-top: 8px; padding: 16px;
  background: var(--ccf-sage); color: var(--ccf-white);
  border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem; font-weight: 600; letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s, transform .15s;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.ccf-btn-submit:hover { background: #4a6a5e; transform: translateY(-1px); }
.ccf-btn-submit svg { width: 18px; height: 18px; }

/* Spinner */
.ccf-spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ccf-spin .7s linear infinite;
  display: none;
}
.ccf-btn-submit.ccf-loading .ccf-spinner  { display: block; }
.ccf-btn-submit.ccf-loading .ccf-btn-icon { display: none; }
.ccf-btn-submit.ccf-loading               { opacity: .8; pointer-events: none; }
@keyframes ccf-spin { to { transform: rotate(360deg); } }

/* ── TOAST ── */
.ccf-toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 14px 24px; border-radius: 12px;
  font-size: .93rem; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 999999; white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
}
.ccf-toast.ccf-show    { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.ccf-toast.ccf-success { background: var(--ccf-sage); color: #fff; }
.ccf-toast.ccf-error   { background: #c0392b;          color: #fff; }
.ccf-toast svg         { width: 18px; height: 18px; flex-shrink: 0; }

/* ── ANIMATIONS ── */
@keyframes ccf-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ccf-hero h1 { animation: ccf-fadeUp .6s ease both; }
.ccf-hero p  { animation: ccf-fadeUp .6s .1s ease both; }
.ccf-main    { animation: ccf-fadeUp .7s .15s ease both; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .ccf-main      { grid-template-columns: 1fr; padding: 40px 24px 64px; }
  .ccf-form-card { position: static; }
  .ccf-hero      { padding: 52px 24px 44px; }
}
@media (max-width: 520px) {
  .ccf-city-grid { grid-template-columns: 1fr; }
  .ccf-form-row  { grid-template-columns: 1fr; }
  .ccf-form-card { padding: 28px 22px; }
}