/* ==========================================================================
   Centurion Services — Component Patterns
   These classes are usable inside Elementor HTML widgets and via the
   custom-class field on any Elementor element.
   ========================================================================== */

/* --- Buttons (Btn) --- */
.csl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-med) var(--ease-standard);
}
.csl-btn:hover { transform: translateY(-1px); }
.csl-btn:active { transform: translateY(0); }
.csl-btn:disabled, .csl-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

/* Sizes */
.csl-btn--sm { height: 28px; padding: 0 12px; font-size: 12.5px; }
.csl-btn--md { height: 40px; padding: 0 18px; font-size: 14px; }
.csl-btn--lg { height: 48px; padding: 0 22px; font-size: 15px; }

/* Variants */
.csl-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.csl-btn--primary:hover { box-shadow: 0 8px 20px rgba(240,169,59,.35); }

.csl-btn.csl-btn--dark {
  /* Explicit colours: a 'dark' button must always be a dark pill with
     light text, regardless of any --bg/--ink flip in the surrounding
     context (e.g. gold trade panel, theme-dark footer).
     Compound .csl-btn.csl-btn--dark selector (0,2,0) is used so it beats
     Elementor's global kit link colour '.elementor-kit-31 a' (0,1,1),
     which otherwise forces dark-on-dark text when the button is an <a>. */
  background: #1A1612;
  color: #FBF8F2;
  border-color: #1A1612;
}
.csl-btn--dark:hover { box-shadow: var(--shadow-md); }

.csl-btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.csl-btn--outline:hover { border-color: var(--ink); background: var(--surface); }

.csl-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}
.csl-btn--ghost:hover { background: var(--surface-2); }

.csl-btn--soft {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}
.csl-btn--soft:hover { background: rgba(240,169,59,.28); }

.csl-btn__icon { width: 1em; height: 1em; }

/* --- Tag / chip --- */
.csl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
}
.csl-tag--neutral { background: var(--surface-2); color: var(--ink-2); }
.csl-tag--accent  { background: var(--accent-soft); color: var(--accent); }
.csl-tag--success { background: rgba(62,157,106,.14); color: var(--success); }
.csl-tag--danger  { background: rgba(216,89,63,.14); color: var(--danger); }
.csl-tag--outline { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }

/* --- Card --- */
.csl-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  transition: box-shadow var(--dur-med) var(--ease-standard),
              border-color var(--dur-med) var(--ease-standard);
}
.csl-card--interactive:hover {
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.csl-card__title { font-size: var(--fs-heading); font-weight: 600; margin: 0 0 8px; }
.csl-card__sub { color: var(--ink-2); font-size: var(--fs-body-s); margin: 0; }

/* --- Kicker (mono eyebrow) --- */
.csl-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.csl-kicker--accent { color: var(--accent); }

/* --- Form field --- */
.csl-field { display: block; margin-bottom: 16px; }
.csl-label {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: 6px;
}
.csl-input,
.csl-select,
.csl-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.csl-input:focus,
.csl-select:focus,
.csl-textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.csl-textarea { min-height: 96px; resize: vertical; }

/* --- Section spacing --- */
.csl-section { padding: 96px 0; }
.csl-section--sm { padding: 48px 0; }
.csl-section--lg { padding: 128px 0; }
.csl-section--dark { background: var(--ink); color: var(--bg); }
.csl-section--dark .csl-kicker { color: var(--accent); }

/* --- Division helpers (accent overrides via data-division attribute) --- */
[data-division="car"]      { --accent: var(--div-car); --accent-ink: #fff; --accent-soft: rgba(46,90,140,.14); }
[data-division="property"] { --accent: var(--div-property); --accent-ink: #fff; --accent-soft: rgba(31,138,91,.14); }
[data-division="supplies"] { --accent: var(--div-supplies); --accent-ink: #fff; --accent-soft: rgba(184,86,42,.14); }
[data-division="plant"]    { --accent: var(--div-plant); --accent-ink: #2A1F0A; --accent-soft: rgba(240,169,59,.14); }

/* --- Utility bar (dark slim strip above header) --- */
.csl-utility {
  background: var(--ink);
  color: var(--bg);
  font-size: 12.5px;
  padding: 8px 0;
}
.csl-utility a { color: var(--bg); opacity: .8; }
.csl-utility a:hover { opacity: 1; color: var(--accent); }
.csl-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* --- Elementor tweaks: make Elementor buttons pick up our styles when class csl-btn is used --- */
.elementor-button.csl-btn { text-decoration: none; }

/* --- WhatsApp / channel iconography helper --- */
.csl-channel-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}
.csl-channel-dot--car      { background: var(--div-car); }
.csl-channel-dot--property { background: var(--div-property); }
.csl-channel-dot--supplies { background: var(--div-supplies); }
.csl-channel-dot--plant    { background: var(--div-plant); }