/* =========================================================
   Car Rental Widget (V2 ULTRA PRO) - FINAL (IMPROVED)
   - Cards mismo tamaño
   - Responsive real (iPhone / Android / tablets)
   - Auto LIGHT/DARK según cardBg (JS setea data-crw-theme)
   - SVG siempre visibles (mask -> se pintan por CSS)
   - Fix iOS/Safari: overflow + aspect + max-height + safe widths
   - Texto del botón AUTO blanco/negro con --crw-btn-text (JS)
   -   FIX: WP theme no pisa color del botón (normal/hover)
   -   Mejoras: brand-shadow robusto, focus accesible, fallback Safari
   ========================================================= */

/* Defaults globales (JS los pisa por widget con CSS vars) */
:root {
  --crw-bg: #ffffff;
  --crw-primary: #d11f2a;
  --crw-primary-rgb: 209, 31, 42;
  --crw-brand-shadow: 1;
  --crw-radius: 22px;
  --crw-btn-text: #ffffff;
}

/* =========================================================
   Widget base
   ========================================================= */
.crw-widget {
  margin: 18px 0;

  /* sombras */
  --crw-shadow: 0 12px 28px rgba(17, 24, 39, 0.1);
  --crw-shadow-hover: 0 16px 36px rgba(17, 24, 39, 0.14);

  --crw-btn-shadow: 0 14px 22px rgba(var(--crw-primary-rgb), 0.25);
  --crw-btn-shadow-hover: 0 18px 26px rgba(var(--crw-primary-rgb), 0.3);

  /* escalas */
  --crw-price-size: 42px;
  --crw-title-size: 22px;
  --crw-name-size: 22px;
  --crw-year-size: 20px;
  --crw-btn-size: 18px;

  -webkit-text-size-adjust: 100%;
}

/* =========================================================
   Auto Theme (JS setea: data-crw-theme="light|dark")
   ========================================================= */
.crw-widget[data-crw-theme='light'] {
  --crw-text: #111827;
  --crw-muted: rgba(17, 24, 39, 0.6);

  --crw-card-border: rgba(17, 24, 39, 0.07);

  --crw-badge-bg: rgba(17, 24, 39, 0.07);
  --crw-badge-text: rgba(17, 24, 39, 0.72);
  --crw-badge-border: rgba(17, 24, 39, 0.06);

  --crw-panel-bg: rgba(17, 24, 39, 0.04);
  --crw-panel-border: rgba(17, 24, 39, 0.06);

  --crw-chip-bg: rgba(255, 255, 255, 0.92);
  --crw-chip-border: rgba(17, 24, 39, 0.06);

  --crw-icon-color: rgba(17, 24, 39, 0.82);
}

.crw-widget[data-crw-theme='dark'] {
  --crw-text: rgba(255, 255, 255, 0.96);
  --crw-muted: rgba(255, 255, 255, 0.65);

  --crw-card-border: rgba(255, 255, 255, 0.12);

  --crw-badge-bg: rgba(255, 255, 255, 0.1);
  --crw-badge-text: rgba(255, 255, 255, 0.82);
  --crw-badge-border: rgba(255, 255, 255, 0.12);

  --crw-panel-bg: rgba(255, 255, 255, 0.07);
  --crw-panel-border: rgba(255, 255, 255, 0.12);

  --crw-chip-bg: rgba(255, 255, 255, 0.1);
  --crw-chip-border: rgba(255, 255, 255, 0.12);

  --crw-icon-color: rgba(255, 255, 255, 0.92);
}

/* Título */
.crw-title {
  margin: 0 0 14px;
  font-size: var(--crw-title-size);
  font-weight: 900;
  color: var(--crw-text);
}

/* =========================================================
   Grid responsive (robusto)
   ========================================================= */
.crw-grid {
  display: grid;
  gap: 18px;
  align-items: stretch;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .crw-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .crw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .crw-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* =========================================================
   Card (mismo tamaño + focus)
   ========================================================= */
.crw-card {
  background: var(--crw-bg);
  border: 1px solid var(--crw-card-border);
  border-radius: var(--crw-radius);
  overflow: hidden;

  height: 100%;
  display: flex;
  flex-direction: column;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
  will-change: transform;

  box-shadow: var(--crw-shadow);
}

/* Focus accesible para teclado */
.crw-card:focus,
.crw-card:focus-visible {
  outline: 3px solid rgba(var(--crw-primary-rgb), 0.35);
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Brand shadow ON/OFF (robusto)
   1) Fallback: lee inline style como lo tenías
   2) Soporte opcional futuro: data-crw-shadow="1"
   --------------------------------------------------------- */
.crw-widget {
  --crw-brand-shadow-enabled: 0;
}

/* tu método actual (sigue funcionando) */
.crw-widget[style*='--crw-brand-shadow: 1'] {
  --crw-brand-shadow-enabled: 1;
}

/* método recomendado (si luego lo seteas en JS) */
.crw-widget[data-crw-shadow='1'] {
  --crw-brand-shadow-enabled: 1;
}

.crw-card {
  box-shadow:
    var(--crw-shadow),
    0 18px 30px rgba(var(--crw-primary-rgb), calc(0.12 * var(--crw-brand-shadow-enabled)));
}

.crw-card:hover {
  transform: translateY(-3px);
  box-shadow:
    var(--crw-shadow-hover),
    0 22px 36px rgba(var(--crw-primary-rgb), calc(0.14 * var(--crw-brand-shadow-enabled)));
}

/* =========================================================
   V2 Layout
   ========================================================= */
.crw-card--v2 {
  border-radius: 22px;
}

/* =========================================================
   Imagen (FIX iOS/Safari)
   ========================================================= */
.crw-img--v2 {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  min-height: 180px; /* fallback si aspect-ratio falla */
}

.crw-img--v2 img {
  width: 90%;
  height: 90%;
  object-fit: contain;

  max-width: 100%;
  max-height: 100%;

  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.18));
  transform: translateZ(0);
}

/* Ajustes móviles */
@media (max-width: 520px) {
  .crw-widget {
    --crw-price-size: 40px;
    --crw-name-size: 20px;
    --crw-year-size: 18px;
    --crw-btn-size: 17px;
  }

  .crw-img--v2 {
    aspect-ratio: 4 / 3;
    min-height: 210px;
  }

  .crw-img--v2 img {
    width: 92%;
    height: auto;
    max-height: 220px;
  }
}

@media (max-width: 380px) {
  .crw-widget {
    --crw-price-size: 36px;
    --crw-name-size: 19px;
    --crw-year-size: 17px;
    --crw-btn-size: 16px;
  }

  .crw-img--v2 img {
    max-height: 190px;
  }
}

/* Safari iOS hard-fix */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 520px) {
    .crw-img--v2 {
      aspect-ratio: 1 / 1;
      min-height: 210px;
    }
    .crw-img--v2 img {
      max-height: 210px;
    }
  }
}

/* Badge */
.crw-badge--v2 {
  position: absolute;
  top: 14px;
  left: 14px;

  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;

  color: var(--crw-badge-text);
  background: var(--crw-badge-bg);
  border: 1px solid var(--crw-badge-border);
  backdrop-filter: blur(6px);
}

/* Body */
.crw-body--v2 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

/* Precio */
.crw-pricebox {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crw-from {
  font-weight: 900;
  font-size: 16px;
  color: rgba(var(--crw-primary-rgb), 1);
}

.crw-price-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.crw-price-main {
  font-weight: 1000;
  font-size: var(--crw-price-size);
  line-height: 1;
  color: rgba(var(--crw-primary-rgb), 1);
  letter-spacing: -0.02em;
}

.crw-per {
  font-weight: 800;
  font-size: 16px;
  color: var(--crw-muted);
  padding-bottom: 6px;
}

/* Nombre */
.crw-namebox {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crw-name2 {
  font-size: var(--crw-name-size);
  font-weight: 1000;
  color: var(--crw-text);
  line-height: 1.08;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.crw-year2 {
  font-size: var(--crw-year-size);
  font-weight: 900;
  color: var(--crw-muted);
}

/* Panel specs */
.crw-specpanel {
  background: var(--crw-panel-bg);
  border: 1px solid var(--crw-panel-border);
  border-radius: 16px;
  padding: 10px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.crw-spec {
  display: flex;
  align-items: center;
  gap: 10px;

  background: var(--crw-chip-bg);
  border: 1px solid var(--crw-chip-border);
  border-radius: 12px;

  padding: 10px 12px;
  font-weight: 900;
  color: var(--crw-text);

  min-width: 0;
}

.crw-spec-t {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Iconos mask */
.crw-spec-ic {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;

  background-color: var(--crw-icon-color);

  -webkit-mask-image: var(--crw-ic-url);
  mask-image: var(--crw-ic-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;

  opacity: 0.95;
}

/* =========================================================
   Botón V2 (FIX WP theme)
   ========================================================= */
.crw-btn--v2 {
  margin-top: auto;
  width: 100%;

  border: 0 !important;
  cursor: pointer;

  border-radius: 14px;
  padding: 14px 14px;

  font-weight: 1000;
  font-size: var(--crw-btn-size);

  background: linear-gradient(
    180deg,
    rgba(var(--crw-primary-rgb), 1),
    rgba(var(--crw-primary-rgb), 0.86)
  );

  box-shadow: var(--crw-btn-shadow);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;

  -webkit-appearance: none;
  appearance: none;
}

/*   CLAVE: fuerza el color SIEMPRE (normal/hover/focus/visited) */
.crw-btn--v2,
.crw-btn--v2:hover,
.crw-btn--v2:active,
.crw-btn--v2:focus,
.crw-btn--v2:focus-visible,
.crw-btn--v2:visited {
  color: var(--crw-btn-text, #ffffff) !important;
  text-decoration: none !important;
}

/* Hover */
.crw-btn--v2:hover {
  transform: translateY(-1px);
  box-shadow: var(--crw-btn-shadow-hover);
  filter: brightness(1.03);
}

/* Active */
.crw-btn--v2:active {
  transform: translateY(0px);
  box-shadow: 0 10px 18px rgba(var(--crw-primary-rgb), 0.22);
}

/* Focus accesible */
.crw-btn--v2:focus-visible {
  outline: 3px solid rgba(var(--crw-primary-rgb), 0.35);
  outline-offset: 3px;
}

/* States */
.crw-loading,
.crw-empty,
.crw-error {
  padding: 12px;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  color: var(--crw-muted);
}