/* ============================================================
   CAJEROS CRIPTOMONEDAS — DARK SKIN (interior pages)
   Re-skins Breakdance chrome + Directorist + Gutenberg content
   in the landing's dark-fintech style. Everything is scoped under
   body.cajeros-dark so it is completely inert when the skin is off.
   Brand DNA: indigo #5371FE + cyan #4FDBDD, dark navy surfaces.
   ============================================================ */

/* ---------- DESIGN TOKENS (mirror of colors_and_type.css) ---------- */
:root {
  --cc-indigo:      #5371FE;
  --cc-cyan:        #4FDBDD;
  --cc-indigo-600:  #3D58E0;
  --cc-indigo-400:  #7C92FF;
  --cc-cyan-600:    #2FC2C4;
  --cc-cyan-300:    #87ECEE;

  --cc-bg-abyss:    #060814;
  --cc-bg-base:     #0A0E1F;
  --cc-bg-raised:   #111733;
  --cc-bg-raised-2: #161E3D;
  --cc-bg-inset:    #080B18;

  --cc-glass:        rgba(20, 27, 56, 0.55);
  --cc-glass-strong: rgba(15, 21, 46, 0.85);
  --cc-glass-line:   rgba(124, 146, 255, 0.18);

  --cc-fg1: #EEF1FF;
  --cc-fg2: #AEB7DC;
  --cc-fg3: #7681AB;
  --cc-fg-inverse: #0A0E1F;

  --cc-line:        rgba(124, 146, 255, 0.14);
  --cc-line-strong: rgba(124, 146, 255, 0.28);
  --cc-line-cyan:   rgba(79, 219, 221, 0.35);

  --cc-grad-brand: linear-gradient(120deg, #5371FE 0%, #4FDBDD 100%);
  --cc-grad-brand-soft: linear-gradient(120deg, rgba(83,113,254,.18), rgba(79,219,221,.14));
  --cc-glow-indigo: 0 0 0 1px rgba(83,113,254,.4), 0 8px 30px rgba(83,113,254,.30);
  --cc-sh-card: 0 1px 0 rgba(124,146,255,.08) inset, 0 12px 40px rgba(0,0,0,.45);

  --cc-font-display: 'Space Grotesk', system-ui, sans-serif;
  --cc-font-body:    'Manrope', system-ui, sans-serif;
  --cc-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --cc-r-sm: 10px;
  --cc-r-md: 14px;
  --cc-r-lg: 20px;
  --cc-r-pill: 999px;
}

/* ============================================================
   PHASE 1 — FOUNDATION
   ============================================================ */

/* ---- Page base ---- */
body.cajeros-dark {
  background-color: var(--cc-bg-base) !important;
  color: var(--cc-fg2);
  font-family: var(--cc-font-body);
  -webkit-font-smoothing: antialiased;
}
body.cajeros-dark,
body.cajeros-dark #main,
body.cajeros-dark .breakdance,
body.cajeros-dark .ee-page-content,
body.cajeros-dark .bde-section,
body.cajeros-dark .directorist-content-active {
  background-color: transparent;
}

/* Soft brand glow at the very top of the page, like the landing hero. */
body.cajeros-dark::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 60vh;
  background: radial-gradient(120% 90% at 50% -10%, rgba(83,113,254,.20) 0%, rgba(10,14,31,0) 60%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Typography ---- */
body.cajeros-dark h1,
body.cajeros-dark h2,
body.cajeros-dark h3,
body.cajeros-dark h4,
body.cajeros-dark h5,
body.cajeros-dark h6,
body.cajeros-dark .bde-heading,
body.cajeros-dark .bde-heading * {
  font-family: var(--cc-font-display);
  color: var(--cc-fg1);
  letter-spacing: -0.02em;
}
body.cajeros-dark p,
body.cajeros-dark li,
body.cajeros-dark span,
body.cajeros-dark td,
body.cajeros-dark th,
body.cajeros-dark dd,
body.cajeros-dark dt,
body.cajeros-dark figcaption,
body.cajeros-dark .bde-text,
body.cajeros-dark .bde-text * {
  color: var(--cc-fg2);
}
body.cajeros-dark strong,
body.cajeros-dark b { color: var(--cc-fg1); }

body.cajeros-dark a {
  color: var(--cc-cyan);
  text-decoration: none;
  transition: color .2s ease;
}
body.cajeros-dark a:hover { color: var(--cc-cyan-300); }

/* ---- Breakdance header (global block 3705) ---- */
body.cajeros-dark .bde-section-3705-104,
body.cajeros-dark header.bde-section[class*="-3705-"] {
  background-color: var(--cc-glass-strong) !important;
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--cc-line);
  position: relative;
  z-index: 10;
}

/* ---- Breakdance footer (global block 6608) ---- */
body.cajeros-dark .bde-section-6608-100,
body.cajeros-dark footer.bde-section[class*="-6608-"] {
  background-color: var(--cc-bg-abyss) !important;
  border-top: 1px solid var(--cc-line);
  position: relative;
  z-index: 1;
}

/* ---- Menus (Breakdance nav) ---- */
body.cajeros-dark .breakdance-menu-link,
body.cajeros-dark .breakdance-dropdown-item > a,
body.cajeros-dark .breakdance-menu-list a {
  color: var(--cc-fg1) !important;
  font-family: var(--cc-font-body);
  font-weight: 600;
}
body.cajeros-dark .breakdance-menu-link:hover,
body.cajeros-dark .breakdance-menu-list a:hover {
  color: var(--cc-cyan) !important;
}
body.cajeros-dark .breakdance-dropdown-content,
body.cajeros-dark .breakdance-dropdown-body,
body.cajeros-dark .breakdance-menu--collapse .breakdance-menu-list {
  background-color: var(--cc-bg-raised) !important;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-md);
}
body.cajeros-dark .breakdance-menu-toggle-icon .breakdance-menu-toggle-lines,
body.cajeros-dark .breakdance-menu-toggle-icon .breakdance-menu-toggle-lines::before,
body.cajeros-dark .breakdance-menu-toggle-icon .breakdance-menu-toggle-lines::after {
  background-color: var(--cc-fg1) !important;
}

/* Keep page content above the fixed glow. */
body.cajeros-dark .bde-section,
body.cajeros-dark .directorist-wrapper,
body.cajeros-dark main,
body.cajeros-dark #main {
  position: relative;
  z-index: 1;
}

/* ---- Buttons (Breakdance) ---- */
body.cajeros-dark .bde-button .button-atom,
body.cajeros-dark a.bde-button,
body.cajeros-dark .bde-button-primary .button-atom {
  font-family: var(--cc-font-body) !important;
  font-weight: 700 !important;
}
body.cajeros-dark .bde-button-primary .button-atom,
body.cajeros-dark .breakdance-form-button .button-atom {
  background: var(--cc-grad-brand) !important;
  color: var(--cc-fg-inverse) !important;
  border: none !important;
  box-shadow: var(--cc-glow-indigo);
}

/* ============================================================
   PHASE 2 — DIRECTORIST DIRECTORY
   ============================================================ */

/* ---- Listing cards (archive) ---- */
body.cajeros-dark .directorist-card-contain,
body.cajeros-dark .directorist-listing-single,
body.cajeros-dark .directorist-listing-single--bg,
body.cajeros-dark .directorist-thumnail-card,
body.cajeros-dark .directorist-archive-single-items > div {
  background-color: var(--cc-bg-raised) !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: var(--cc-r-lg) !important;
  box-shadow: var(--cc-sh-card);
  color: var(--cc-fg2);
}
body.cajeros-dark .directorist-listing-single:hover,
body.cajeros-dark .directorist-card-contain:hover {
  border-color: var(--cc-line-strong) !important;
  transform: translateY(-2px);
  transition: transform .2s var(--cc-ease, ease), border-color .2s ease;
}
body.cajeros-dark .directorist-listing-title,
body.cajeros-dark .directorist-listing-title a,
body.cajeros-dark .directorist-listing-single__title,
body.cajeros-dark .directorist-listing-single__title a {
  color: var(--cc-fg1) !important;
  font-family: var(--cc-font-display);
}
body.cajeros-dark .directorist-listing-title a:hover,
body.cajeros-dark .directorist-listing-single__title a:hover {
  color: var(--cc-cyan) !important;
}
body.cajeros-dark .directorist-listing-card-location,
body.cajeros-dark .directorist-listing-card-location-list,
body.cajeros-dark .directorist-listing-single__meta,
body.cajeros-dark .directorist-listing-single__info__list,
body.cajeros-dark .directorist-listing-single__info__list * {
  color: var(--cc-fg3) !important;
}
body.cajeros-dark .directorist-listing-single__meta,
body.cajeros-dark .directorist-listing-single__info__top {
  border-color: var(--cc-line) !important;
}

/* Icon masks (Directorist uses mask-image colored via background) */
body.cajeros-dark .directorist-icon-mask {
  background-color: var(--cc-cyan) !important;
}

/* ---- Category / badge / tag pills ---- */
body.cajeros-dark .directorist-thumb-top-right > span,
body.cajeros-dark .directorist-badge,
body.cajeros-dark .directorist-category-icon {
  background-color: var(--cc-glass) !important;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-pill);
}

/* Location is plain meta (icon + link), not a pill — keep it borderless. */
body.cajeros-dark .directorist-listing-card-location {
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
}
body.cajeros-dark .directorist-listing-card-location a {
  color: var(--cc-fg2) !important;
}
body.cajeros-dark .directorist-listing-card-location a:hover {
  color: var(--cc-cyan) !important;
}

/* ---- Search form + filters ---- */
body.cajeros-dark .directorist-search-form,
body.cajeros-dark .directorist-search-form__box,
body.cajeros-dark .directorist-advanced-filter__advanced,
body.cajeros-dark .directorist-search-modal__contents {
  background-color: var(--cc-bg-raised) !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: var(--cc-r-lg) !important;
  color: var(--cc-fg2);
}
body.cajeros-dark .directorist-search-field__label,
body.cajeros-dark .directorist-advanced-filter__title,
body.cajeros-dark .directorist-price-ranges__label,
body.cajeros-dark .directorist-search-basic-dropdown-label {
  color: var(--cc-fg2) !important;
}

/* ---- Inputs / selects / textareas ---- */
body.cajeros-dark .directorist-search-field__input,
body.cajeros-dark .directorist-form-element,
body.cajeros-dark .directorist-form-control,
body.cajeros-dark input[type="text"],
body.cajeros-dark input[type="search"],
body.cajeros-dark input[type="email"],
body.cajeros-dark input[type="tel"],
body.cajeros-dark input[type="url"],
body.cajeros-dark input[type="number"],
body.cajeros-dark input[type="password"],
body.cajeros-dark select,
body.cajeros-dark textarea {
  background-color: var(--cc-bg-inset) !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: var(--cc-r-sm) !important;
  color: var(--cc-fg1) !important;
}
body.cajeros-dark input::placeholder,
body.cajeros-dark textarea::placeholder { color: var(--cc-fg3) !important; }
body.cajeros-dark .directorist-search-field__input:focus,
body.cajeros-dark input:focus,
body.cajeros-dark select:focus,
body.cajeros-dark textarea:focus {
  border-color: var(--cc-cyan) !important;
  box-shadow: 0 0 0 3px rgba(79,219,221,.18) !important;
  outline: none !important;
}

/* ---- Directorist buttons ---- */
body.cajeros-dark .directorist-btn,
body.cajeros-dark .directorist-search-field__btn,
body.cajeros-dark .directorist-advanced-filter__action--ajax,
body.cajeros-dark .directorist-search-modal__contents__btn,
body.cajeros-dark .directorist-info-item-map-buttons a {
  background: var(--cc-grad-brand) !important;
  color: var(--cc-fg-inverse) !important;
  border: none !important;
  border-radius: var(--cc-r-sm) !important;
  font-family: var(--cc-font-body);
  font-weight: 700 !important;
  box-shadow: var(--cc-glow-indigo);
}
body.cajeros-dark .directorist-btn-reset-ajax,
body.cajeros-dark .directorist-btn-reset-js,
body.cajeros-dark .directorist-search-field__btn--clear,
body.cajeros-dark .directorist-advanced-filter__close {
  background: transparent !important;
  color: var(--cc-fg2) !important;
  border: 1px solid var(--cc-line) !important;
}

/* ---- Pagination ---- */
body.cajeros-dark .directorist-pagination > span,
body.cajeros-dark .directorist-pagination a,
body.cajeros-dark .directorist-pagination .page-numbers {
  background-color: var(--cc-bg-raised) !important;
  color: var(--cc-fg2) !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: var(--cc-r-sm) !important;
}
body.cajeros-dark .directorist-pagination .current,
body.cajeros-dark .directorist-pagination a:hover {
  background: var(--cc-grad-brand) !important;
  color: var(--cc-fg-inverse) !important;
  border-color: transparent !important;
}

/* ---- Map container chrome (Google Maps / leaflet) ---- */
body.cajeros-dark .directorist-archive-map-view,
body.cajeros-dark .directorist-map,
body.cajeros-dark .atbdp-map,
body.cajeros-dark .directorist-listing-single__map {
  border: 1px solid var(--cc-line) !important;
  border-radius: var(--cc-r-lg) !important;
  overflow: hidden;
}
/* The map's empty base tile color is Google's light gray (#E5E3DF). Recolor
   that base to a dark surface so the map area reads as an intentional dark
   panel; loaded tiles render on top, so this is harmless when tiles appear. */
body.cajeros-dark .atbdp-map > div,
body.cajeros-dark .directorist-archive-map-view .gm-style,
body.cajeros-dark .directorist-listing-single__map .gm-style {
  background-color: var(--cc-bg-inset) !important;
}

/* ---- Single listing page surfaces ---- */
body.cajeros-dark .directorist-listing-single__content,
body.cajeros-dark .directorist-listing-single__info,
body.cajeros-dark .directorist-single-contents__section,
body.cajeros-dark .directorist-content-module,
body.cajeros-dark .directorist-card,
body.cajeros-dark .directorist-card-general-section,
body.cajeros-dark .directorist-details-info-wrap {
  background-color: var(--cc-bg-raised) !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: var(--cc-r-lg) !important;
  color: var(--cc-fg2);
}
/* Single listing: card headers/titles + nested meta */
body.cajeros-dark .directorist-card__title,
body.cajeros-dark .directorist-card-general-section .directorist-card__title,
body.cajeros-dark .directorist-single-map__location,
body.cajeros-dark .directorist-single-map__address {
  color: var(--cc-fg1) !important;
}
/* Opening-hours rows + supported-fiat / generic light panels inside listing */
body.cajeros-dark .hours-row,
body.cajeros-dark .supported-fiat,
body.cajeros-dark .supported-crypto,
body.cajeros-dark .directorist-card .hours-row {
  background-color: var(--cc-bg-inset) !important;
  border-color: var(--cc-line) !important;
  color: var(--cc-fg2) !important;
}
body.cajeros-dark .hours-row + .hours-row { border-top: 1px solid var(--cc-line) !important; }
body.cajeros-dark .directorist-single-map {
  border: 1px solid var(--cc-line) !important;
  border-radius: var(--cc-r-lg) !important;
  overflow: hidden;
}

/* ---- Modals + notices/alerts (Directorist) ---- */
body.cajeros-dark .directorist-modal__content,
body.cajeros-dark .directorist-modal-content {
  background-color: var(--cc-bg-raised) !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: var(--cc-r-lg) !important;
  color: var(--cc-fg2) !important;
}
body.cajeros-dark .directorist-claim-listing__login-notice,
body.cajeros-dark .directorist-alert,
body.cajeros-dark .alert,
body.cajeros-dark .directorist-info-box {
  background-color: var(--cc-glass) !important;
  border: 1px solid var(--cc-glass-line) !important;
  border-radius: var(--cc-r-md) !important;
  color: var(--cc-fg2) !important;
}
body.cajeros-dark .directorist-claim-listing__login-notice a,
body.cajeros-dark .directorist-alert a { color: var(--cc-cyan) !important; }

/* ============================================================
   PHASE 3 — GUTENBERG CONTENT (city pages + blog)  [initial pass]
   ============================================================ */
/* Breakdance post-loop (blog index/archive): cards, titles, excerpt, meta.
   Excerpt text sits as a bare text node in .ee-post-content, so the generic
   p/span rules miss it — set the text color explicitly here. */
body.cajeros-dark article,
body.cajeros-dark .bde-loop-item,
body.cajeros-dark .post,
body.cajeros-dark .ee-post-content,
body.cajeros-dark .ee-posts-block__content,
body.cajeros-dark .ee-post-excerpt {
  color: var(--cc-fg2) !important;
}
body.cajeros-dark .ee-post-title-link,
body.cajeros-dark .bde-post-title a { color: var(--cc-fg1) !important; }
body.cajeros-dark .ee-post-title-link:hover { color: var(--cc-cyan) !important; }
body.cajeros-dark .ee-post-meta,
body.cajeros-dark .ee-post-meta-date { color: var(--cc-fg3) !important; }
/* Loop-item card surface (when the theme renders posts as cards) */
body.cajeros-dark .ee-posts-block__item,
body.cajeros-dark .bde-loop-item.is-card {
  background-color: var(--cc-bg-raised) !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: var(--cc-r-lg) !important;
}
body.cajeros-dark .wp-block-button__link {
  background: var(--cc-grad-brand) !important;
  color: var(--cc-fg-inverse) !important;
  border-radius: var(--cc-r-pill) !important;
  font-weight: 700;
}
body.cajeros-dark .wp-block-table table,
body.cajeros-dark table {
  border-color: var(--cc-line) !important;
}
body.cajeros-dark .wp-block-table td,
body.cajeros-dark .wp-block-table th,
body.cajeros-dark table td,
body.cajeros-dark table th {
  border-color: var(--cc-line) !important;
}
body.cajeros-dark blockquote {
  border-left: 3px solid var(--cc-cyan) !important;
  background-color: var(--cc-glass);
  color: var(--cc-fg2);
}
body.cajeros-dark code,
body.cajeros-dark pre {
  background-color: var(--cc-bg-inset) !important;
  color: var(--cc-cyan-300) !important;
  font-family: var(--cc-font-mono);
  border-radius: var(--cc-r-sm);
}
body.cajeros-dark hr { border-color: var(--cc-line) !important; }

/* Custom Agencia blocks used on city/blog pages */
body.cajeros-dark .asl-update-2026,
body.cajeros-dark .asl-cta-2026 {
  background: var(--cc-grad-brand-soft) !important;
  border: 1px solid var(--cc-glass-line) !important;
  border-radius: var(--cc-r-lg) !important;
  color: var(--cc-fg1) !important;
}
body.cajeros-dark .asl-update-2026 *,
body.cajeros-dark .asl-cta-2026 * { color: var(--cc-fg1) !important; }

/* ============================================================
   PHASE 5 — CUSTOM LISTING WIDGETS (single-listing contrast)
   The listing template injects custom markup (status pills, the
   opening-hours table, the buy/sell crypto-rates table) that ships
   its own light-theme colors. Left unskinned they render dark-on-dark
   or light-on-light. These rules restore legibility on every page
   that renders a listing.
   ============================================================ */

/* Status pill ("Online" / "Abierto"). Sits on a solid indigo bg, so
   the inherited muted fg2 washes out — force white. */
body.cajeros-dark .status-badge,
body.cajeros-dark .status-badge * {
  color: #ffffff !important;
}

/* Opening-hours rows: the day label keeps a near-black inherited color
   on the dark inset row. (.times-container already reads as fg2.) */
body.cajeros-dark .hours-row .days {
  color: var(--cc-fg1) !important;
}
body.cajeros-dark .hours-row .time-slot,
body.cajeros-dark .hours-row .times-container {
  color: var(--cc-fg2) !important;
}

/* Buy/Sell crypto-rates table: thead ships a light #F5F5F5 header.
   Recolor head dark + light text; body cells inherit the dark row. */
body.cajeros-dark .crypto-rates-table {
  background: transparent !important;
  border-color: var(--cc-line) !important;
}
body.cajeros-dark .crypto-rates-table thead,
body.cajeros-dark .crypto-rates-table thead tr,
body.cajeros-dark .crypto-rates-table th {
  background-color: var(--cc-bg-inset) !important;
  color: var(--cc-fg1) !important;
  border-color: var(--cc-line) !important;
}
body.cajeros-dark .crypto-rates-table td {
  background-color: transparent !important;
  color: var(--cc-fg2) !important;
  border-color: var(--cc-line) !important;
}