/* ================================================================
   GhanaTRVL — Contact Page Addon Stylesheet
   contact-addon-v4.css

   Loaded AFTER custom-v4.css. Contains ONLY classes net-new to the
   contact page — form controls, topic selector, contribute cards,
   local representative panel.

   Nothing in this file duplicates:
     - Design tokens          (custom-v4.css :root)
     - Base typography        (custom-v4.css §02)
     - Hero layers             (custom-v4.css §07 / __page_title.php)
     - Footer                 (custom-v4.css §18)
     - Utility helpers        (custom-v4.css §20)

   §05 map classes are copied from entities-addon-v4.css (.ent-map*),
   same reasoning as tour-detail-addon-v4.css §06 — the page doesn't
   load entities-addon-v4.css, so the handful of classes actually
   used are duplicated here rather than pulling in the whole file.

   Sections:
   01. Topic selector cards (.ctopic-card)
   02. Form panels + controls (.cform-panel / .cform-ctl / .cform-lbl)
   03. Contribute cards (.ccontrib-card)
   04. Local representative panel (.crep-panel)
   05. Map (.ent-map-wrap / .ent-map / .ent-map-pin) — copied
   06. Responsive

   Last updated: 2026-07-25
================================================================ */

/* ── 01. TOPIC SELECTOR CARDS ── */
.ctopic-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1.5px solid var(--rule);
  border-radius: 11px;
  padding: 14px;
  margin-bottom: 10px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ctopic-card:hover,
.ctopic-card.is-selected {
  border-color: var(--mv);
  background: rgba(89, 45, 140, .04);
}
.ctopic-card.is-selected {
  box-shadow: 0 0 0 3px rgba(89, 45, 140, .1);
}
.ctopic-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--wh2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .95rem;
  color: var(--mv);
  transition: background .15s;
}
.ctopic-card.is-selected .ctopic-card__icon {
  background: rgba(89, 45, 140, .14);
}
.ctopic-card__title {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: .85rem;
  color: var(--dv);
  margin-bottom: 2px;
}
.ctopic-card__desc {
  font-family: var(--ff-b);
  font-size: .76rem;
  color: var(--mu);
  line-height: 1.4;
}
.ctopic-card__tag {
  display: inline-block;
  font-family: var(--ff-h);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(197, 220, 100, .35);
  color: #3a6200;
  border-radius: 4px;
  padding: 2px 6px;
  margin-top: 5px;
}


/* ── 02. FORM PANELS + CONTROLS ── */
.cform-panel {
  display: none;
  background: #fff;
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 4px 28px rgba(35, 15, 66, .07);
}
.cform-panel.is-active {
  display: block;
}
.cform-panel__eyebrow {
  font-family: var(--ff-h);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mv);
  margin-bottom: 4px;
}
.cform-panel__title {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dv);
}
.cform-panel__meta {
  font-family: var(--ff-b);
  font-size: .75rem;
  color: var(--mu);
  margin-top: 2px;
}

.cform-lbl {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 5px;
  display: block;
}
.cform-lbl .req {
  color: #c00;
}

/* Bootstrap .form-control / .form-select, re-skinned to the v4 token set
   rather than introducing a parallel set of custom input classes. */
.cform-panel .form-control,
.cform-panel .form-select {
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: var(--ff-b);
  font-size: .9rem;
  color: var(--bk);
}
.cform-panel .form-control:focus,
.cform-panel .form-select:focus {
  border-color: var(--mv);
  box-shadow: 0 0 0 3px rgba(89, 45, 140, .1);
}
.cform-panel textarea.form-control {
  resize: vertical;
  min-height: 118px;
}

.cform-consent {
  font-family: var(--ff-b);
  font-size: .78rem;
  color: var(--mu);
  line-height: 1.5;
}
.cform-consent .form-check-input:checked {
  background-color: var(--mv);
  border-color: var(--mv);
}
.cform-consent a {
  color: var(--mv);
}

.cform-submit {
  background: var(--dv);
  color: var(--ye);
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 24px;
  border: none;
  transition: background .15s;
}
.cform-submit:hover {
  background: var(--mv);
  color: var(--ye);
}
.cform-submit:disabled {
  background: var(--mu);
  color: rgba(255, 255, 255, .7);
  cursor: not-allowed;
}

.cform-turnstile {
  margin-bottom: 4px;
}

/* Submit result / status message */
.cform-notice {
  font-family: var(--ff-b);
  font-weight: 600;
  font-size: .82rem;
  color: var(--mu);
  background: var(--wh2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 14px;
}
.cform-notice--success {
  color: #1a5c1a;
  background: rgba(197, 220, 100, .25);
  border-color: rgba(26, 92, 26, .3);
}
.cform-notice--error {
  color: #8a1f1f;
  background: rgba(207, 9, 33, .08);
  border-color: rgba(207, 9, 33, .25);
}

/* Replaces the form entirely once a submission succeeds */
.cform-success {
  text-align: center;
  padding: 48px 24px;
}
.cform-success__icon {
  font-size: 2.75rem;
  color: #3a6200;
  margin-bottom: 14px;
}
.cform-success__title {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--dv);
  margin-bottom: 8px;
}
.cform-success__text {
  font-family: var(--ff-b);
  font-size: .95rem;
  color: var(--mu);
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.6;
}


/* ── 03. CONTRIBUTE CARDS ── */
.ccontrib-card {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 14px;
  text-decoration: none;
  background: #fff;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.ccontrib-card:hover {
  border-color: var(--mv);
  background: rgba(89, 45, 140, .04);
  box-shadow: 0 4px 16px rgba(89, 45, 140, .1);
  transform: translateY(-1px);
}
.ccontrib-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--wh2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--mv);
}
.ccontrib-card__title {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: .92rem;
  color: var(--dv);
  margin-bottom: 4px;
}
.ccontrib-card__desc {
  font-family: var(--ff-b);
  font-size: .78rem;
  color: var(--mu);
  line-height: 1.45;
}
.ccontrib-card__arrow {
  margin-left: auto;
  color: var(--mv);
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}
.ccontrib-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--ff-b);
  font-size: .78rem;
  color: var(--mu);
  line-height: 1.5;
}
.ccontrib-note a {
  color: var(--mv);
  font-weight: 600;
  text-decoration: none;
}
.ccontrib-note a:hover {
  color: var(--dv);
}


/* ── 04. LOCAL REPRESENTATIVE PANEL ── */
.crep-panel {
  padding-top: 22px;
  margin-top: 28px;
  border-top: 1px solid var(--rule);
}
.crep-panel__label {
  font-family: var(--ff-h);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mv);
  margin-bottom: 9px;
}
.crep-panel__body {
  font-family: var(--ff-b);
  font-size: .83rem;
  color: var(--mu);
  line-height: 1.75;
}
.crep-panel__body a {
  color: var(--mv);
  text-decoration: none;
}
.crep-panel__body a:hover {
  color: var(--dv);
}


/* ── 05. MAP (copied from entities-addon-v4.css §25-H, same reasoning
       as tour-detail-addon-v4.css §06 — keeps this page independent
       of loading the entities addon file for three small classes) ── */
.ent-map-wrap {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(35, 15, 66, .10);
  border: 1px solid var(--rule);
}
.ent-map {
  height: 400px;
  width: 100%;
  background: var(--wh);
}
.ent-map-pin {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ent-map-pin .fa-location-dot {
  font-size: 2.25rem;
  color: var(--mv);
  filter: drop-shadow(0 2px 4px rgba(35, 15, 66, .35));
  line-height: 1;
}
.ent-map-popup-name {
  display: block;
  font-family: var(--ff-h);
  font-size: .875rem;
  font-weight: 700;
  color: var(--dv);
  margin-bottom: 2px;
}
.ent-map-popup-city {
  display: block;
  font-family: var(--ff-h);
  font-size: .775rem;
  color: var(--mu);
}


/* ── 06. RESPONSIVE ── */
@media (max-width: 991px) {
  .cform-panel {
    padding: 24px;
  }
  .ent-map {
    height: 280px;
  }
}