/* === Cargo Cost Calculator – Final Green Theme === */

.shipping-calculator-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 10px;
  background: #f6fbf8; /* fondo verde muy claro */
}

.shipping-calculator-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 35px 40px;
  width: 100%;
  max-width: 480px;
  color: #184d2b;
  text-align: left;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

/* === Header === */
.calculator-header {
  text-align: center;
  margin-bottom: 25px;
}

/* Camión verde oscuro */
.calculator-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f0f8f3;
  color: #0d3b24; /* verde oscuro del camión */
}

.calculator-header h2 {
  font-size: 1.4rem;
  margin-bottom: 5px;
  font-weight: 700;
  color: #184d2b;
}

.calculator-header p {
  font-size: 0.9rem;
  color: #51735c;
}

/* === Form === */
.calculator-form .form-group {
  margin-bottom: 20px;
}

.calculator-form label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: #184d2b;
}

.calculator-form select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #e2e8e4;
  background-color: #fff;
  color: #184d2b;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.calculator-form select:focus {
  border-color: #00c853;
}

/* === Checkbox groups === */
.checkbox-group {
  background: #f8fbf9;
  border: 1px solid #e6ebe8;
  border-radius: 8px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  transition: background 0.2s ease, border 0.2s ease;
}

.checkbox-group:hover {
  background: #f0f8f3;
  border-color: #cde9d3;
}

/* === Address Section Box === */
#shipping-calculator-form .address-box {
  border: 1px solid #d8e4db;
  border-radius: 10px;
  padding: 15px 18px;
  background-color: #f9fdfb; /* verde muy claro */
  margin-bottom: 20px;
}

/* Title spacing inside the box */
#shipping-calculator-form .address-box label {
  margin-bottom: 6px;
  font-weight: 600;
  color: #184d2b;
}

/* Align City and State side by side */
#shipping-calculator-form .address-box .city-state-row {
  display: flex;
  gap: 10px;
}

#shipping-calculator-form .address-box .city-state-row .form-group {
  flex: 1;
}

/* Inputs consistent height */
#shipping-calculator-form .address-box input[type="text"],
#shipping-calculator-form .address-box select {
  height: 30px !important;
  min-height: 30px !important;
  border: 1px solid #e2e8e4 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #184d2b !important;
  font-size: 0.9rem !important;
  padding: 0 20px 0 8px !important;
  line-height: 30px !important;
  width: 100%;
  box-sizing: border-box;
}

/* Responsive: stack City & State on small screens */
@media (max-width: 480px) {
  #shipping-calculator-form .address-box .city-state-row {
    flex-direction: column;
    gap: 0;
  }
}

.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #00c853;
}

/* === Buttons === */
.form-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
}

.btn {
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: 10px 15px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline {
  background: #fff;
  border: 1px solid #d9e2dc;
  color: #184d2b;
}

.btn-outline:hover {
  background: #f4f8f5;
}

.btn-primary {
  background: linear-gradient(90deg, #00c853, #00a84a);
  color: #fff;
  border: 1px solid #00c853;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === Cost display === */
.cost-display {
  margin-top: 20px;
  background: linear-gradient(90deg, #00c853, #00b44b);
  border: none;
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  color: #fff;
}

.cost-label {
  font-size: 0.9rem;
  color: #ffffff;
  opacity: 0.9;
}

.cost-amount {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
}

/* === Select2 === */
.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #e2e8e4;
  border-radius: 6px;
  height: 42px;
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection__rendered {
  color: #184d2b;
  padding-left: 10px;
  font-size: 0.95rem;
}

.select2-container--default .select2-selection__arrow {
  height: 42px;
}

.select2-container--default .select2-results__option {
  color: #184d2b;
  font-size: 0.95rem;
}

.select2-container--default .select2-results__option--highlighted {
  background: #00c853 !important;
  color: #fff !important;
}

/* === Loading (opcional) === */
.loading {
  text-align: center;
  color: #184d2b;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 3px solid #e3f1e6;
  border-top: 3px solid #00c853;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.calculator-icon .dashicons,
.calculator-icon .dashicons::before {
  color: #064e32 !important;  /* verde oscuro */
}

/* === Match inputs to Select2 height/appearance === */
.calculator-form input[type="text"] {
  height: 42px;                 /* igual que .select2-selection--single */
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #e2e8e4;
  background-color: #fff;
  color: #184d2b;
  font-size: 0.95rem;
  line-height: 20px;
  box-sizing: border-box;       /* asegura dimensión exacta */
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.calculator-form input[type="text"]::placeholder {
  color: #8aa19a;               /* similar a los selects */
}

.calculator-form input[type="text"]:focus {
  border-color: #00c853;
  box-shadow: 0 0 0 2px rgba(0, 200, 83, 0.15);
}
/* ==== FIX: igualar altura de inputs de texto a Select2 (42px) ==== */
.shipping-calculator-card .calculator-form .form-group input[type="text"] {
  height: 42px !important;           /* misma altura que select2 */
  padding: 10px 12px !important;     /* mismo padding que defines */
  border: 1px solid #e2e8e4 !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  line-height: 20px !important;      /* evita crecer por line-height */
  background: #fff !important;
  color: #184d2b !important;
  font-size: 0.95rem !important;
  outline: none;
}

/* Asegura que Select2 también tenga 42px exactos (alineación perfecta) */
.shipping-calculator-card .select2-container--default .select2-selection--single {
  height: 42px !important;
}
.shipping-calculator-card .select2-container--default .select2-selection__rendered {
  line-height: 42px !important;  /* centra el texto verticalmente */
  padding-left: 10px;
}
.shipping-calculator-card .select2-container--default .select2-selection__arrow {
  height: 42px !important;
}

/* === Make text inputs visually identical to Select2 === */
.shipping-calculator-card .calculator-form input[type="text"]{
  /* dimension */
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  width: 100% !important;
  box-sizing: border-box !important;

  /* spacing: same left padding + extra right space like the Select2 arrow */
  padding: 0 30px 0 12px !important;  /* <- ese 30px replica el canal derecho del Select2 */
  line-height: 42px !important;       /* centra el texto como en Select2 */

  /* look */
  border: 1px solid #e2e8e4 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #184d2b !important;
  font-size: 0.95rem !important;

  /* neutralizar estilos del tema */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Asegurar Select2 exactamente a 42px para que ambos coincidan */
.shipping-calculator-card .select2-container--default .select2-selection--single{
  height: 42px !important;
  border: 1px solid #e2e8e4 !important;
  border-radius: 6px !important;
}
.shipping-calculator-card .select2-container--default .select2-selection__rendered{
  line-height: 42px !important;
  padding-left: 12px !important;
  padding-right: 30px !important; /* canal derecho */
}
.shipping-calculator-card .select2-container--default .select2-selection__arrow{
  height: 42px !important;
  right: 6px !important;
}

/* === FIX DEFINITIVO: que Street/City/State midan EXACTAMENTE 42px === */
.shipping-calculator-card .calculator-form .form-group input[type="text"],
.shipping-calculator-card .calculator-form input[type="text"] {
  /* Tamaño fijo */
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  /* Espaciado interno (no afecta la altura fija) */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;

  /* Apariencia coherente */
  border: 1px solid #e2e8e4 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #184d2b !important;
  font-size: 0.95rem !important;
  box-sizing: border-box !important;

  /* Neutralizar estilos del tema que inflan el campo */
  margin: 0 !important;
  line-height: normal !important;       /* para que el texto no “estire” la caja */
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
}

/* Asegurar que los SELECT2 también sean 42px (para que todo coincida) */
.shipping-calculator-card .select2-container--default .select2-selection--single {
  height: 42px !important;
  border: 1px solid #e2e8e4 !important;
  border-radius: 6px !important;
}
.shipping-calculator-card .select2-container--default .select2-selection__rendered {
  line-height: 42px !important;
  padding-left: 12px !important;
  padding-right: 30px !important;  /* canal para la flecha */
}
.shipping-calculator-card .select2-container--default .select2-selection__arrow {
  height: 42px !important;
  right: 6px !important;
}

/* === Apariencia unificada: Select2 (Origin/ZIP) e inputs (Street/City/State) === */

/* SELECT2 (dropdowns) */
.shipping-calculator-card .select2-container--default .select2-selection--single{
  height: 30px !important;
  border: 1px solid #e2e8e4 !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.shipping-calculator-card .select2-container--default .select2-selection__rendered{
  line-height: 40px !important;       /* centra texto */
  padding-left: 12px !important;
  padding-right: 30px !important;      /* canal para flecha */
  color: #184d2b !important;
  font-size: 0.95rem !important;
}
.shipping-calculator-card .select2-container--default .select2-selection__arrow{
  height: 30px !important;
  right: 6px !important;
}

/* INPUTS (Street, City, State) */
.shipping-calculator-card .calculator-form input[type="text"]{
  height: 30px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  width: 100% !important;
  box-sizing: border-box !important;

  /* padding: mismo izquierdo, “canal” derecho como Select2 */
  padding: 0 30px 0 12px !important;
  line-height: 30px !important;

  border: 1px solid #e2e8e4 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #184d2b !important;
  font-size: 0.95rem !important;

  margin: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* === Reduce overall field height to 36px (dropdowns + text inputs) === */
.shipping-calculator-card .select2-container--default .select2-selection--single,
.shipping-calculator-card .calculator-form input[type="text"] {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  border: 1px solid #e2e8e4 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #184d2b !important;
  font-size: 0.93rem !important;
  box-sizing: border-box !important;
  padding: 0 25px 0 10px !important; /* igual padding izquierdo/derecho */
  line-height: 36px !important;
}

/* Select2 dropdown text and arrow alignment */
.shipping-calculator-card .select2-container--default .select2-selection__rendered {
  line-height: 36px !important;
  padding-left: 10px !important;
  padding-right: 25px !important;
}
.shipping-calculator-card .select2-container--default .select2-selection__arrow {
  height: 36px !important;
  right: 5px !important;
}

/* === Reduce all form fields to 30px height (final compact style) === */
.shipping-calculator-card .select2-container--default .select2-selection--single,
.shipping-calculator-card .calculator-form input[type="text"] {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  border: 1px solid #e2e8e4 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #184d2b !important;
  font-size: 0.9rem !important;
  box-sizing: border-box !important;
  padding: 0 20px 0 8px !important; /* más ajustado */
  line-height: 30px !important;
}

/* Ajustar texto y flecha en Select2 */
.shipping-calculator-card .select2-container--default .select2-selection__rendered {
  line-height: 30px !important;
  padding-left: 8px !important;
  padding-right: 20px !important;
}
.shipping-calculator-card .select2-container--default .select2-selection__arrow {
  height: 30px !important;
  right: 4px !important;
}

/* === FORZAR 30px SOLO A Street / City / State (por ID, máxima prioridad) === */
#shipping-calculator-form #streetAddress,
#shipping-calculator-form #city,
#shipping-calculator-form #state {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;

  /* que el contenido no “estire” la caja */
  line-height: 30px !important;

  /* padding compacto (igual que el select2 que dejaste en 30px) */
  padding: 0 20px 0 8px !important;

  /* apariencia + evitar overrides del tema */
  border: 1px solid #e2e8e4 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #184d2b !important;
  font-size: 0.9rem !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}

/* Por si el tema aplica min-height global a inputs dentro de grupos */
#shipping-calculator-form .form-group input[type="text"] {
  min-height: 30px !important;
  max-height: 30px !important;
}

/* === City and State side by side === */
#shipping-calculator-form .city-state-row {
  display: flex;
  gap: 10px; /* espacio entre los dos */
}

#shipping-calculator-form .city-state-row .form-group {
  flex: 1; /* cada uno ocupa 50% */
}

/* Asegurar que los inputs dentro de esa fila se ajusten al ancho */
#shipping-calculator-form .city-state-row input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

/* Ajuste de espacio del título "Destination Point" */
#shipping-calculator-form .destination-title {
  margin-bottom: 4px; /* reduce el espacio debajo del título */
}

#shipping-calculator-form .destination-title label {
  font-weight: 600;
  color: #184d2b; /* mismo tono que Origin Point */
  display: block;
}

/* Compact spacing for Destination Point title */
#shipping-calculator-form .destination-title {
  margin-bottom: 2px !important; /* fuerza menos espacio debajo */
  padding-bottom: 0 !important;
  line-height: 1.1 !important;
}

#shipping-calculator-form .destination-title label {
  font-weight: 600;
  color: #184d2b;
  display: block;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Compactar el espacio entre "Destination Point" y la caja de dirección */
.shipping-calculator-card #shipping-calculator-form .form-group.destination-title {
  margin-bottom: 2px !important;   /* reduce el espacio bajo el título */
  padding-bottom: 0 !important;
}

.shipping-calculator-card #shipping-calculator-form .form-group.destination-title > label {
  display: block;
  margin: 0 !important;            /* sin margen extra del label */
  padding: 0 !important;
  line-height: 1.1 !important;
  font-weight: 600;
  color: #184d2b;
}

/* Si la separación viene de la caja, reducimos su margen superior */
.shipping-calculator-card #shipping-calculator-form .address-box {
  margin-top: 8px !important;      /* antes era mayor: lo forzamos pequeño */
  /* el resto de estilos de la tarjeta se mantienen */
}

/* Cualquier regla global tipo ".calculator-form .form-group + .form-group { margin-top: X }" */
.shipping-calculator-card #shipping-calculator-form .form-group.destination-title + .address-box {
  margin-top: 4px !important;      /* por si el gap proviene del combinador + */
}

/* Aumentar tamaño de títulos Origin y Destination */
#shipping-calculator-form label[for="origin"],
#shipping-calculator-form .destination-title label {
  font-size: 1.05rem !important;
}

/* Aumentar tamaño del título principal */
.shipping-calculator-card .calculator-header h2 {
  font-size: 1.4rem !important;
}

/* === Ajuste de tamaño de títulos === */

/* Aplica a "Origin Point" y "Destination Point" */
#shipping-calculator-form label[for="origin"],
#shipping-calculator-form .destination-title label {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #184d2b !important;
}

/* También asegura que el texto "Destination Point" use display:block */
#shipping-calculator-form .destination-title label {
  display: block;
  margin-bottom: 4px !important;
}

/* Ajusta el tamaño del título principal */
.shipping-calculator-card .calculator-header h2 {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
}

/* === Fix spacing between "Destination Point" and address box === */
.shipping-calculator-card #shipping-calculator-form .form-group.destination-title {
  margin-bottom: 8px !important;   /* más separación debajo del título */
}

.shipping-calculator-card #shipping-calculator-form .address-box {
  margin-top: 8px !important;      /* igual separación desde la caja */
}

/* === Loading truck animation & positioning === */
#loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20px; /* 🔹 mueve el loading más abajo */
  text-align: center;
}

#loading .loading-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #064e32;
  font-size: 1rem;
}

/* 🔸 Animación del camión */
#loading svg {
  display: block;
  animation: truckMove 1s infinite ease-in-out;
}

/* 🔸 Keyframes */
@keyframes truckMove {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* 🔸 Pequeño parpadeo del texto "Loading..." */
#loading span {
  animation: blink 1.5s infinite ease-in-out;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Mensaje de confirmación */
.quote-message {
  margin-top: 15px;
  background: #eaf6ee;
  border: 1px solid #bcd9c4;
  color: #064e32;
  font-size: 0.95rem;
  text-align: center;
  padding: 10px 14px;
  border-radius: 10px;
  animation: fadeSlide 0.6s ease-out;
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Mensaje rojo cuando el costo es 0 */
.quote-message.quote-warning {
  background: #fdeaea;
  border: 1px solid #f5bcbc;
  color: #b91c1c;
}

/* Phone field: same style as text inputs */
#shipping-calculator-form #phoneNumber{
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  line-height: 30px !important;
  padding: 0 20px 0 8px !important;
  border: 1px solid #e2e8e4 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #184d2b !important;
  font-size: 0.9rem !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}