/*!
 * Travel API Form – design CSS bundle scoped to #msfw-container.
 * Formerly in travel-design-css.css; merged into global.css.
 */

/* ============================================================================
   VARIÁVEIS DE CORES - ORGANIZADO POR ETAPA
   ============================================================================ */

:root {
  /* ============================================
     CORES BASE / GLOBAIS
     ============================================ */
  
  /* Texto */
  --color-text-primary: #212529;
  --color-text-secondary: #6c757d;
  --color-text-light: #fff;
  --color-text-dark: #000;
  
  /* Backgrounds */
  --color-bg-white: #fff;
  --color-bg-light: #f8f9fa;
  --color-bg-gray: #e9ecef;
  --color-bg-dark: #212529;
  
  /* Bordas */
  --color-border-light: #ced4da;
  --color-border-medium: #dee2e6;
  --color-border-blue: #cfe4ff;
  --color-border-dotted: #d7d7d7;
  
  /* Sombras */
  --color-shadow-light: rgba(0, 0, 0, 0.04);
  --color-shadow-medium: rgba(0, 0, 0, 0.08);
  --color-shadow-dark: rgba(0, 0, 0, 0.25);
  --color-shadow-container: #0000001a;
  
  /* ============================================
     CONTAINER PRINCIPAL (#msfw-container)
     ============================================ */
  
  /* Background do container */
  --container-bg: #fff;
  --container-border: #ACACAC;
  --container-text: #212529;
  
  /* ============================================
     STEP 1 - FORMULÁRIO DE BUSCA
     ============================================ */
  
  /* Inputs do formulário */
  --step1-input-bg: #fff;
  --step1-input-text: #212529;
  --step1-input-border: #ced4da;
  --step1-input-focus-border: #5B66FF;
  --step1-input-focus-shadow: rgba(91, 102, 255, 0.1);
  
  /* Botão Cotar Agora */
  --step1-button-bg: #5B66FF;
  --step1-button-text: #fff;
  --step1-button-hover-bg: #4A54E6;
  --step1-button-hover-border: #4A54E6;
  
  /* Placeholder das datas */
  --step1-placeholder-text: #6c757d;
  
  /* ============================================
     STEP 1 - MODAL DE PASSAGEIROS
     ============================================ */
  
  /* Modal container */
  --modal-pax-bg: #fff;
  --modal-pax-title: #212529;
  --modal-pax-close: #6c757d;
  
  /* Faixa etária container */
  --modal-pax-range-bg: #fff;
  --modal-pax-range-border: #cfe4ff;
  --modal-pax-range-text: #212529;
  
  /* Botões +/- do modal */
  --modal-pax-btn-bg: #fff;
  --modal-pax-btn-text: #5B66FF;
  --modal-pax-btn-border: #5B66FF;
  --modal-pax-btn-disabled-text: #ced4da;
  --modal-pax-btn-disabled-bg: #f5f5f5;
  
  /* Botões de ação do modal (Limpar, Cancelar, Aplicar) */
  --modal-pax-action-bg: #5B66FF;
  --modal-pax-action-text: #fff;
  --modal-pax-action-hover-bg: #4A54E6;
  --modal-pax-action-hover-border: #4A54E6;
  
  /* Total do modal */
  --modal-pax-total-border: #e9ecef;
  --modal-pax-total-text: #212529;
  
  /* ============================================
     STEP 2 - CADASTRO (NOME/EMAIL/TELEFONE)
     ============================================ */
  
  /* Inputs de cadastro */
  --step2-input-bg: #fff;
  --step2-input-text: #212529;
  --step2-input-border: #ced4da;
  --step2-input-focus-border: #5B66FF;
  
  /* Botão continuar */
  --step2-button-bg: #003366;
  --step2-button-text: #fff;
  --step2-button-hover-bg: #002244;
  --step2-button-hover-border: #002244;
  
  /* ============================================
     STEP 3 - CARDS DE PACOTES
     ============================================ */
  
  /* Card container */
  --step3-card-bg: #fff;
  --step3-card-text: #333;
  --step3-card-border: #e6e6e6;
  --step3-card-hover-border: #cfe4ff;
  
  /* Card destacado/popular */
  --step3-card-featured-border: #3182cd;
  --step3-card-featured-ribbon-text: #3182cd;
  
  /* Preço no card */
  --step3-price-text: #212529;
  
  /* Botão Selecionar */
  --step3-btn-select-bg: #3182cd;
  --step3-btn-select-text: #fff;
  --step3-btn-select-hover-bg: #62b3ff;
  --step3-btn-select-hover-border: #62b3ff;
  
  /* Botão Mostrar Detalhes */
  --step3-btn-details-bg: transparent;
  --step3-btn-details-text: #3182cd;
  --step3-btn-details-border: #3182cd;
  --step3-btn-details-hover-bg: #003366;
  --step3-btn-details-hover-text: #fff;
  --step3-btn-details-hover-border: #003366;
  
  /* Botão WhatsApp */
  --step3-btn-whatsapp-text: #fff;
  --step3-btn-whatsapp-hover-bg: #1A7A00;
  
  /* Linha divisória no card */
  --step3-card-divider: #d7d7d7;
  
  /* ============================================
     STEP 3 - EDITAR COTAÇÃO
     ============================================ */
  
  /* Inputs do formulário de edição */
  --edit-quote-input-bg: #fff;
  --edit-quote-input-text: #212529;
  --edit-quote-input-border: #ced4da;
  --edit-quote-input-focus-border: #5B66FF;
  
  /* Botão Atualizar Cotação */
  --edit-quote-btn-bg: #5B66FF;
  --edit-quote-btn-text: #fff;
  --edit-quote-btn-hover-bg: #4A54E6;
  
  /* ============================================
     STEP 3 - MODAL DE COMPARAÇÃO (Detalhes dos Pacotes)
     ============================================ */
  
  /* Header da tabela */
  --modal-compare-header-bg: #003366;
  --modal-compare-header-text: #fff;
  --modal-compare-header-border: #0a2246;
  
  /* Header azul escuro alternativo */
  --modal-compare-header-alt-bg: #1e00a7;
  --modal-compare-header-alt-text: #fff;
  
  /* Coluna selecionada */
  --modal-compare-selected-bg: #e7f1ff;
  --modal-compare-selected-text: #0d2a54;
  
  /* Botão Fechar */
  --modal-compare-btn-close-bg: #003366;
  --modal-compare-btn-close-text: #fff;
  --modal-compare-btn-close-hover-bg: #002244;
  
  /* ============================================
     STEP 4 - DETALHES DO PASSAGEIRO
     ============================================ */
  
  /* Inputs de dados do passageiro */
  --step4-input-bg: #fff;
  --step4-input-text: #212529;
  --step4-input-border: #ced4da;
  
  /* Botão Continuar */
  --step4-btn-submit-bg: #003366;
  --step4-btn-submit-text: #fff;
  --step4-btn-submit-hover-bg: #002244;
  --step4-btn-submit-hover-border: #002244;
  
  /* ============================================
     STEP 5 - PAGAMENTO
     ============================================ */
  
  /* Header do pagamento */
  --step5-header-bg: #003366;
  --step5-header-text: #fff;
  
  /* Botão de pagamento */
  --step5-btn-pay-bg: #003366;
  --step5-btn-pay-text: #fff;
  --step5-btn-pay-hover-bg: #00264d;
  --step5-btn-pay-hover-border: #00264d;
  
  /* Checkbox "Não estou em viagem" */
  --step5-checkbox-label: #003366;
  
  /* ============================================
     STEP 6 - CONFIRMAÇÃO DE PAGAMENTO
     ============================================ */
  
  /* Header do accordion */
  --step6-accordion-header-bg: #145da0;
  --step6-accordion-header-text: #fff;
  
  /* Links */
  --step6-link-text: #fff;
  --step6-link-collapsed-opacity: 0.9;
  
  /* ============================================
     ELEMENTOS COMUNS
     ============================================ */
  
  /* Tooltip */
  --tooltip-bg: #0d2a54;
  --tooltip-text: #fff;
  --tooltip-border: #000;
  
  /* Help icon */
  --help-icon-bg: transparent;
  --help-icon-text: #000;
  --help-icon-border: #000;
  
  /* Botões de incremento/decremento (verde) */
  --btn-increment-bg: #28a745;
  --btn-increment-text: #fff;
  --btn-increment-border: #28a745;
  --btn-increment-hover-bg: #218838;
  --btn-increment-hover-border: #1e7e34;
  
  /* Glider arrows */
  --glider-arrow-active: #145da0;
  --glider-arrow-disabled: #ccc;
  
  /* Spinner overlay */
  --spinner-overlay-bg: rgba(255, 255, 255, 0.6);
  
  /* Flatpickr */
  --flatpickr-selected-bg: #E8EAFF;
  --flatpickr-selected-text: #5B66FF;
  --flatpickr-hover-bg: #e9ecef;
  --flatpickr-arrow-text: #5B66FF;
}

/* ================================
   Container-scoped overrides
   ================================ */

#msfw-container {
  background-color: var(--container-bg) !important;
  border: 0px solid var(--container-border) !important;
  border-radius: 10px !important;
  color: var(--container-text) !important;
  padding: 40px !important;
  box-shadow: 0px 0px 40px var(--color-shadow-container);
  margin-top: 20px;
}

@media (max-width: 992px) {
  #msfw-container {
    padding: 30px !important;
  }
}

@media (max-width: 768px) {
  #msfw-container {
    padding: 20px !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 576px) {
  #msfw-container {
    padding: 15px !important;
    margin-top: 10px !important;
    border-radius: 8px !important;
  }
}

#msfw-container .search-card,
#msfw-container .search-card .card-body {
  padding: 0px !important;
  margin: 0px !important;
  border: 0px !important;
}

/* Center the modal and limit its width */
#msfw-container .modal-dialog.modal-custom {
  max-width: 90vw;
  margin: auto;
}
@media (max-width: 576px) {
  #msfw-container .modal-dialog.modal-custom {
    max-width: 100vw;
    margin: 0;
  }
  #msfw-container .modal-content { overflow-y: auto; }
}

/* Comparison modal — dark-blue table header */
#msfw-container #dynamicModal .table-comparison thead,
#msfw-container #dynamicModal .table-comparison thead tr,
#msfw-container #dynamicModal .table-comparison thead th {
  background-color: var(--modal-compare-header-bg) !important;
  color: var(--modal-compare-header-text) !important;
}

/* Comparison modal - 90% width to show all content */
#msfw-container #dynamicModal .modal-dialog.modal-custom {
  max-width: 90vw !important;
  width: 90vw !important;
}

/* Desktop: content fits without horizontal scroll */
@media (min-width: 992px) {
  #msfw-container #dynamicModal .modal-body {
    overflow-x: visible !important;
    overflow-y: auto !important;
  }
  #msfw-container #dynamicModal .table-comparison {
    width: 100% !important;
    table-layout: fixed !important;
  }
  /* Cobertura column - larger width */
  #msfw-container #dynamicModal .table-comparison th:first-child,
  #msfw-container #dynamicModal .table-comparison td:first-child {
    width: 45% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding-right: 1rem !important;
  }
  /* Moeda column - smaller width */
  #msfw-container #dynamicModal .table-comparison th:nth-child(2),
  #msfw-container #dynamicModal .table-comparison td:nth-child(2) {
    width: 8% !important;
    white-space: normal !important;
    text-align: center !important;
  }
  /* Value columns - distribute remaining space equally */
  #msfw-container #dynamicModal .table-comparison th:nth-child(n+3),
  #msfw-container #dynamicModal .table-comparison td:nth-child(n+3) {
    width: auto !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    text-align: center !important;
    padding: 0.5rem !important;
  }
}

/* Mobile/Tablet: allow horizontal scroll if needed */
@media (max-width: 991px) {
  #msfw-container #dynamicModal .modal-body {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }
  #msfw-container #dynamicModal .table-comparison {
    min-width: 100%;
    white-space: nowrap;
  }
  #msfw-container #dynamicModal .table-comparison td,
  #msfw-container #dynamicModal .table-comparison th {
    white-space: nowrap;
  }
}

/* Center the footer and restyle the "Fechar" button */
#msfw-container #dynamicModal .modal-footer {
  justify-content: center !important;
}

#msfw-container #dynamicModal .modal-footer .btn-secondary {
  background-color: var(--modal-compare-btn-close-bg) !important;
  border-color: var(--modal-compare-btn-close-bg) !important;
  color: var(--modal-compare-btn-close-text) !important;
  font-weight: 600;
}

#msfw-container #dynamicModal .modal-footer .btn-secondary:hover,
#msfw-container #dynamicModal .modal-footer .btn-secondary:focus {
  background-color: var(--modal-compare-btn-close-hover-bg) !important;
  border-color: var(--modal-compare-btn-close-hover-bg) !important;
  color: var(--modal-compare-btn-close-text) !important;
}

/* ---------------------------------------
   Bootstrap custom props used by the wizard
   (localize variables to the container)
--------------------------------------- */
#msfw-container {
  --bs-blue: #1e00a7;
  --bs-indigo: #6574cd;
  --bs-purple: #8b00a3;
  --bs-pink: #ff0062;
  --bs-red: #e3342f;
  --bs-orange: #f6993f;
  --bs-yellow: #ffc700;
  --bs-green: #38c172;
  --bs-teal: #4dc0b5;
  --bs-cyan: #6cb2eb;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #8b00a3;
  --bs-secondary: #1e00a7;
  --bs-success: #38c172;
  --bs-info: #292929;
  --bs-warning: #ffc700;
  --bs-danger: #e3342f;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
}

/* Passenger-select & "Cotar agora" alignment */
#msfw-container #passenger-select,
#msfw-container .next-step {
  display: inline-block !important;
  width: auto !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  padding: 0.375rem 0.75rem !important;
  margin: 0 !important;
  vertical-align: bottom !important;
}

/* PRICE & TITLE adjustments */
#msfw-container .price-table {
  font-size: 2rem !important;
  line-height: 1 !important;
}
#msfw-container .price-cents-table {
  font-size: 1.1rem !important;
  line-height: 1 !important;
  vertical-align: super;
}
#msfw-container .search-card .card-body .text-center h2 {
  font-size: 1.1rem !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5rem !important;
}
#msfw-container .search-card .card-body .text-center h2 .text-secondary {
  font-size: 1.1rem !important;
  font-weight: 400 !important;
}

/* +/- buttons */
#msfw-container .btn-increment,
#msfw-container .btn-decrement {
  background-color: var(--btn-increment-bg) !important;
  border-color: var(--btn-increment-border) !important;
  color: var(--btn-increment-text) !important;
}
#msfw-container .btn-increment:hover,
#msfw-container .btn-increment:focus,
#msfw-container .btn-increment:active,
#msfw-container .btn-decrement:hover,
#msfw-container .btn-decrement:focus,
#msfw-container .btn-decrement:active {
  background-color: var(--btn-increment-hover-bg) !important;
  border-color: var(--btn-increment-hover-border) !important;
  box-shadow: none !important;
}

/* ---------------------------------------
   Theme overrides (container-local vars)
--------------------------------------- */
#msfw-container {
  --bs-primary:   #145da0;
  --bs-secondary: #a3ff05;
  --bs-success:   #3182cd;
  --bs-info:      #3182cd;
  --bs-warning:   #fc0000;
  --bs-danger:    #fc0000;
  --bs-light:     #faffc3;
  --bs-dark:      #523407;
}
#msfw-container .card-header {
  background-color: var(--bs-primary) !important;
  color: var(--color-text-light) !important;
}

/* restore wizard‐form white background (search card only) - AFTER theme overrides */
#msfw-container .search-card,
#msfw-container .search-card .card-body {
  background-color: var(--color-bg-white) !important;
  border: 0px !important;
  border-radius: 10px !important;
  color: var(--color-text-primary) !important;
  padding: 0px !important;
  margin: 0px !important;
}

/* Ensure form controls are visible inside search-card */
#msfw-container .search-card .form-control,
#msfw-container .search-card .custom-select {
  background-color: var(--step1-input-bg) !important;
  color: var(--step1-input-text) !important;
  border: 1px solid var(--step1-input-border) !important;
}

/* Ensure labels are dark */
#msfw-container .search-card label {
  color: var(--color-text-primary) !important;
}

/* Tables */
#msfw-container .table thead th {
  background-color: var(--bs-dark) !important;
  color: var(--color-text-light) !important;
}

/* Glider arrows */
#msfw-container .glider-prev,
#msfw-container .glider-next {
  color: var(--bs-primary) !important;
  font-size: 1.5rem;
}
#msfw-container .glider-prev.disabled,
#msfw-container .glider-next.disabled {
  color: var(--glider-arrow-disabled) !important;
}

/* Primary buttons */
#msfw-container .btn-primary {
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
}
#msfw-container .btn-primary:hover,
#msfw-container .btn-primary:focus {
  background-color: var(--step3-btn-select-hover-bg) !important;
  border-color: var(--step3-btn-select-hover-border) !important;
  color: var(--step3-btn-select-text) !important;
}

/* Mostrar detalhes → outline in same blue as "Selecionar"; hover dark-blue w/ white text */
#msfw-container .btn-show-details {
  background-color: var(--step3-btn-details-bg) !important;
  color: var(--step3-btn-details-text) !important;
  border: 1.5px solid var(--step3-btn-details-border) !important;
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

#msfw-container .btn-show-details:hover,
#msfw-container .btn-show-details:focus {
  background-color: var(--step3-btn-details-hover-bg) !important;
  border-color: var(--step3-btn-details-hover-border) !important;
  color: var(--step3-btn-details-hover-text) !important;
  text-decoration: none;
}

/* Links in cards */
#msfw-container .card a { color: var(--bs-info) !important; }
#msfw-container .card a:hover { color: var(--bs-info) !important; text-decoration: underline; }

/* "featured/popular" card styling */
#msfw-container .package-card.popular,
#msfw-container .package-card.featured {
  border: 2px solid var(--step3-card-featured-border) !important;
}
#msfw-container .package-card.popular .ribbon,
#msfw-container .package-card.featured .ribbon {
  background: transparent !important;
  color: var(--step3-card-featured-ribbon-text) !important;
  border: 1px solid var(--step3-card-featured-border) !important;
}

/* Inputs width tweaks */
#msfw-container input[type="date"].form-control {
  width: 270px;
  max-width: 100%;
  box-sizing: border-box;
}
#msfw-container select#country-select.form-control.custom-select {
  width: 300px !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Site overrides (kept, but container-scoped) */
#msfw-container .e-n-carousel .elementor-heading-title,
#msfw-container .e-n-carousel .elementor-widget-text-editor p,
#msfw-container .e-n-carousel .elementor-widget-text-editor li,
#msfw-container .e-n-carousel .elementor-widget-text-editor span {
  color: var(--color-text-light) !important;
}
#msfw-container .e-n-carousel a {
  color: var(--color-text-light) !important;
  text-decoration: none;
}
#msfw-container .e-n-carousel .elementor-icon svg path { fill: var(--color-text-light) !important; }

/* ==========================================================
   PHASE 1: CARD GRID FOR PACKAGES (replaces table layout)
   ========================================================== */
#msfw-container #package-grid { row-gap: 1rem; }

/* Desktop: 3 cards per row (lg breakpoint) */
@media (min-width: 992px) {
    #msfw-container #package-grid .col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* Card container */
#msfw-container .package-card {
  border: 1px solid var(--step3-card-border);
  border-radius: 0.75rem;
  background-color: var(--step3-card-bg);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 2px 10px var(--color-shadow-light);
}
#msfw-container .package-card:hover,
#msfw-container .package-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--color-shadow-medium);
  border-color: var(--step3-card-hover-border);
}

/* Card content spacing (only package cards) */
#msfw-container .package-card .card-body {
  background-color: var(--step3-card-bg) !important;
  color: var(--step3-card-text) !important;
  padding: 1.25rem;
}

/* Price block */
#msfw-container .package-card .price-table {
  font-size: 2rem !important;
  font-weight: 700;
}
#msfw-container .package-card .price-cents-table {
  font-size: 1.1rem !important;
  vertical-align: super;
}

/* Installments line */
#msfw-container .package-card .targetjuros { font-size: 0.95rem; }

/* Coverage summary block in the card */
#msfw-container .package-card .border-dotted-t-b {
  border-top: 1px dashed var(--step3-card-divider);
  border-bottom: 1px dashed var(--step3-card-divider);
}

/* Action buttons stack */
#msfw-container .package-card .btn + .btn { margin-top: .5rem; }

/* Make buttons full-width inside cards */
#msfw-container .package-card .btn {
  display: block;
  width: 100%;
}

/* Placeholder "Mostrar detalhes" visual (Phase 1: inactive) */
#msfw-container .package-card .btn.btn-secondary[disabled],
#msfw-container .package-card .btn.btn-secondary:disabled {
  opacity: .65;
  cursor: not-allowed;
  pointer-events: none;
}

/* Helpful hooks (future sorting/filtering) */
#msfw-container .package-card[data-price] {}
#msfw-container .package-card[data-coverage] {}

/* Compare modal table — force blue header + right-align value columns */
#msfw-container #packageModalBody table thead,
#msfw-container #packageModalBody table thead tr,
#msfw-container #packageModalBody table thead th {
  --bs-table-bg: var(--modal-compare-header-alt-bg) !important;
  --bs-table-accent-bg: var(--modal-compare-header-alt-bg) !important;
  --bs-table-color: var(--modal-compare-header-alt-text) !important;
  background-color: var(--modal-compare-header-alt-bg) !important;
  color: var(--modal-compare-header-alt-text) !important;
}
#msfw-container #packageModalBody table thead .table-warning,
#msfw-container #packageModalBody table thead .bg-warning,
#msfw-container #packageModalBody table thead .text-bg-warning {
  background-color: var(--modal-compare-header-alt-bg) !important;
  color: var(--modal-compare-header-alt-text) !important;
}
/* Right-align from 3rd column onward; keep Cobertura & Currency left */
#msfw-container #packageModalBody table th:nth-child(n+3),
#msfw-container #packageModalBody table td:nth-child(n+3) { text-align: right !important; }
#msfw-container #packageModalBody table th:nth-child(-n+2),
#msfw-container #packageModalBody table td:nth-child(-n+2) { text-align: left !important; }

/* Step 1 - Mensagens de erro de validação */
#msfw-container .search-card .form-group {
  position: relative !important;
  padding-bottom: 25px !important;
}

#msfw-container .search-card .form-group .input-with-icon,
#msfw-container .search-card .form-group .select-wrapper {
  margin-bottom: 0 !important;
}

/* Step 2 - Mensagens de erro de validação */
#msfw-container #step2 .form-group {
  position: relative !important;
  padding-bottom: 25px !important;
}

#msfw-container #step2 .form-group .input-with-icon {
  margin-bottom: 0 !important;
}

#msfw-container #step2 .form-group label.d-inline-flex {
  padding-bottom: 20px !important;
}

#msfw-container #step2 .form-group:has(label.d-inline-flex) {
  padding-bottom: 20px !important;
}

#msfw-container #step2 .form-group:has(#consent) {
  padding-bottom: 0px !important;
}

#msfw-container #step2 .form-group:has(#consent) .field-error {
  bottom: 0 !important;
}

#msfw-container .field-error {
  position: absolute !important;
  bottom: 0 !important;
  left: 15px !important;
  right: 15px !important;
  color: #dc3545 !important;
  font-size: 0.875rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  line-height: 1.4 !important;
}

#msfw-container .field-error:not(:empty) {
  display: block !important;
}

#msfw-container .error-border,
#msfw-container .error-border.form-control,
#msfw-container .error-border.custom-select,
#msfw-container .error-border.btn,
#msfw-container input.error-border.date-input,
#msfw-container input.error-border.flatpickr-input {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 1px rgba(220, 53, 69, 1) !important;
}

#msfw-container input[type="checkbox"].error-border {
  outline: 2px solid #dc3545 !important;
  outline-offset: 2px !important;
}

#msfw-container .date-input-wrapper input.error-border.date-input:focus,
#msfw-container input.error-border.flatpickr-input:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 1px rgba(220, 53, 69, 1) !important;
}

/* Step 2 - Espaçamento entre inputs */
#msfw-container #step2 .form-group + .form-group {
  padding-top: 10px !important;
}

/* Step 2 - Remover padding-left dos inputs (sem ícones) */
#msfw-container #step2 .input-with-icon .form-control,
#msfw-container #step2 .form-group .form-control,
#msfw-container #step2 .form-group select.form-control,
#msfw-container #step2 .form-group input.form-control {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 0.25rem !important;
  height: calc(1.5em + 0.75rem + 2px) !important;
  padding: 0.375rem 0.75rem !important;
  padding-left: 15px !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

/* Step 2 - Espaçamento entre checkbox e texto */
#msfw-container #step2 #consent {
  margin-right: 10px !important;
}

/* Step 2 button (scoped) */
#msfw-container #step2 button.step2.btn.btn-primary {
  background-color: var(--step2-button-bg) !important;
  border-color:     var(--step2-button-bg) !important;
  color:            var(--step2-button-text) !important;
  width: auto !important;
}

#msfw-container #step2 .form-group.text-right {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
}
#msfw-container #step2 button.step2.btn.btn-primary:hover,
#msfw-container #step2 button.step2.btn.btn-primary:focus {
  background-color: var(--step2-button-hover-bg) !important;
  border-color:     var(--step2-button-hover-border) !important;
}

.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    cursor: pointer !important;
    padding: 2px 4px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.flatpickr-current-month .numInputWrapper {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 70px !important;
}

.flatpickr-current-month input.cur-year {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 60px !important;
    padding: 2px 4px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--color-text-primary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: center !important;
}

.flatpickr-current-month input.cur-year:hover {
    border-color: var(--color-border-light) !important;
    background: var(--color-bg-light) !important;
    border-radius: 4px !important;
}

.flatpickr-current-month input.cur-year:focus {
    border-color: var(--step1-input-focus-border) !important;
    background: var(--color-bg-white) !important;
    outline: none !important;
    border-radius: 4px !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

.flatpickr-current-month .numInputWrapper:hover span.arrowUp,
.flatpickr-current-month .numInputWrapper:hover span.arrowDown {
    opacity: 1 !important;
}


/* Narrower modal & a bit taller than before (~60vh) */
#msfw-container .modal-dialog.modal-custom {
    max-width: 28rem;
}

#msfw-container .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

@media (max-width: 576px) {
    #msfw-container .modal-dialog.modal-custom {
        max-width: 95vw;
    }
}

#msfw-container #passengerModal .modal-title {
    font-weight: 600;
    color: var(--modal-pax-title);
}

#msfw-container #pax-close-x {
    color: var(--modal-pax-close) !important;
}

#msfw-container #pax-close-x:hover,
#msfw-container #pax-close-x:focus,
#msfw-container #pax-close-x:active {
    background: var(--color-bg-white) !important;
    color: var(--modal-pax-close) !important;
    opacity: 1 !important;
}

#msfw-container #pax-close-x span {
    font-size: 40px !important;
    color: var(--modal-pax-close) !important;
    padding: 10px !important;
}

#msfw-container .age-range-container {
    border: 1px solid var(--modal-pax-range-border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    background-color: var(--modal-pax-range-bg);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#msfw-container .age-range-label {
    font-weight: 700;
    color: var(--modal-pax-range-text);
    font-size: 1rem;
    margin-bottom: 0;
    flex: 1;
}

#msfw-container .age-range-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

#msfw-container .age-range-controls .input-group {
    width: auto;
    display: flex;
    align-items: center;
}

#msfw-container .age-range-controls .pax-display {
    width: 50px;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border: none !important;
    height: 40px !important;
    background-color: var(--color-bg-white) !important;
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    opacity: 1 !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}

#msfw-container .age-range-controls .pax-display::-webkit-outer-spin-button,
#msfw-container .age-range-controls .pax-display::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#msfw-container .age-range-controls .pax-display[type=number] {
    -moz-appearance: textfield;
}

#msfw-container .age-range-controls input.pax-display {
    color: var(--color-text-primary) !important;
}

#msfw-container .age-range-controls .pax-display::-webkit-input-placeholder {
    color: var(--color-text-primary) !important;
    opacity: 1 !important;
}

#msfw-container .age-range-controls .pax-display::-moz-placeholder {
    color: var(--color-text-primary) !important;
    opacity: 1 !important;
}

#msfw-container .age-range-controls .pax-display:-ms-input-placeholder {
    color: var(--color-text-primary) !important;
    opacity: 1 !important;
}

#msfw-container .age-range-controls .pax-display::placeholder {
    color: var(--color-text-primary) !important;
    opacity: 1 !important;
}

#msfw-container .age-range-controls .input-group-prepend,
#msfw-container .age-range-controls .input-group-append {
    margin: 0;
}

#msfw-container .btn-increment,
#msfw-container .btn-decrement {
    background: var(--modal-pax-btn-bg) !important;
    color: var(--modal-pax-btn-text) !important;
    font-weight: bold !important;
    font-size: 25px;
    border-radius: 5px !important;
    border: 2px solid var(--modal-pax-btn-border) !important;
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

#msfw-container .btn-increment:hover,
#msfw-container .btn-increment:focus,
#msfw-container .btn-decrement:hover,
#msfw-container .btn-decrement:focus {
    background: var(--modal-pax-btn-bg) !important;
    border: 2px solid var(--modal-pax-btn-border) !important;
    color: var(--modal-pax-btn-text) !important;
}

#msfw-container .total-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--modal-pax-total-border);
}

#msfw-container .total-label {
    font-weight: 700;
    color: var(--modal-pax-total-text);
    font-size: 1rem;
}

#msfw-container .total-value {
    font-weight: 700;
    color: var(--modal-pax-total-text);
    font-size: 1rem;
}

#msfw-container #pax-clear:hover,
#msfw-container #pax-cancel:hover,
#msfw-container #pax-apply:hover {
    background-color: var(--modal-pax-action-hover-bg) !important;
    border-color: var(--modal-pax-action-hover-border) !important;
    color: var(--modal-pax-action-text) !important;
}

#msfw-container #pax-clear:focus,
#msfw-container #pax-cancel:focus,
#msfw-container #pax-apply:focus {
    background-color: var(--modal-pax-action-hover-bg) !important;
    border-color: var(--modal-pax-action-hover-border) !important;
    color: var(--modal-pax-action-text) !important;
}

/* Input with icon styling */
#msfw-container .input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible;
}

#msfw-container .input-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
}

#msfw-container .input-icon svg,
#msfw-container .input-icon img {
    display: block;
    width: auto;
    height: auto;
}

#msfw-container .input-icon-right {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    pointer-events: none;
    object-fit: contain;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 14px !important;
    height: 14px !important;
}

#msfw-container .input-with-icon.select-wrapper {
    position: relative;
}

#msfw-container .input-with-icon.select-wrapper select.custom-select {
    position: relative;
    z-index: 1;
}

#msfw-container .input-with-icon .form-control,
#msfw-container .input-with-icon .custom-select {
    padding-left: 60px !important;
    padding-right: 50px !important;
    background-color: var(--step1-input-bg) !important;
    color: var(--step1-input-text) !important;
    border: 1px solid var(--step1-input-border) !important;
    border-radius: 10px !important;
    height: 65px !important;
    width: 100% !important;
    font-size: 1rem;
    line-height: 1.5;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    background-image: none !important;
    background: var(--step1-input-bg) !important;
    cursor: pointer;
}

#msfw-container .input-with-icon select.custom-select {
    background-image: none !important;
    background: var(--step1-input-bg) !important;
}

#msfw-container .input-with-icon select.custom-select::-webkit-appearance {
    -webkit-appearance: none !important;
}

#msfw-container .input-with-icon select.custom-select::-moz-appearance {
    -moz-appearance: none !important;
}

#msfw-container .input-with-icon input[type="date"].form-control {
    width: 100% !important;
    max-width: 100% !important;
}

#msfw-container .input-with-icon select#country-select.form-control.custom-select {
    width: 100% !important;
    max-width: 100% !important;
    background-image: none !important;
    background: var(--step1-input-bg) !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    padding-right: 50px !important;
    padding-left: 60px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

#msfw-container .input-with-icon.select-wrapper select#country-select::-webkit-appearance {
    -webkit-appearance: none !important;
}

#msfw-container .input-with-icon.select-wrapper select#country-select::-moz-appearance {
    -moz-appearance: none !important;
}

#msfw-container .input-with-icon.select-wrapper select#country-select::after {
    display: none !important;
}

#msfw-container select#country-select option {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
}

#msfw-container .input-with-icon select#country-select.form-control.custom-select::-ms-expand {
    display: none !important;
}

#msfw-container .input-with-icon select.form-control.custom-select {
    background-image: none !important;
    background: var(--step1-input-bg) !important;
}

#msfw-container .input-with-icon select.form-control.custom-select option {
    background-color: var(--step1-input-bg) !important;
    color: var(--step1-input-text) !important;
}

#msfw-container .input-with-icon select.form-control.custom-select option:hover {
    background-color: var(--color-bg-light) !important;
}

#msfw-container .input-with-icon .form-control::placeholder {
    color: var(--step1-input-text) !important;
}

#msfw-container .input-with-icon select.form-control:focus {
    border-color: var(--step1-input-focus-border) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--step1-input-focus-shadow) !important;
}

#msfw-container select#country-select option {
    background-color: var(--step1-input-bg) !important;
    color: var(--step1-input-text) !important;
    padding: 12px 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    border: none !important;
    text-align: left !important;
}

#msfw-container select#country-select option:hover {
    background-color: var(--color-bg-light) !important;
    color: var(--step1-input-text) !important;
}

#msfw-container select#country-select option:checked {
    background-color: var(--color-bg-light) !important;
    color: var(--step1-input-text) !important;
}

#msfw-container select#country-select option[value=""] {
    background-color: var(--step1-input-bg) !important;
    color: var(--step1-input-text) !important;
}

#msfw-container select#country-select option[value=""]:hover {
    background-color: var(--color-bg-light) !important;
}

#msfw-container select#country-select option:not([value=""]):hover {
    background-color: var(--color-bg-light) !important;
    color: var(--step1-input-text) !important;
}

#msfw-container select#country-select {
    border-radius: 10px !important;
}

#msfw-container .date-input-wrapper {
    position: relative;
}

#msfw-container .date-input-wrapper input.date-input {
    color: transparent !important;
    position: relative;
    z-index: 1;
    background-color: var(--step1-input-bg) !important;
    cursor: pointer;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px var(--color-shadow-light) !important;
}

#msfw-container .date-input-wrapper.has-value input.date-input {
    color: var(--step1-input-text) !important;
}

#msfw-container .date-input-wrapper input.date-input:focus {
    color: var(--step1-input-text) !important;
}

#msfw-container .date-input-wrapper input.date-input:focus {
    border-color: var(--step1-input-focus-border) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--step1-input-focus-shadow);
}

#msfw-container .date-placeholder {
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--step1-placeholder-text);
    pointer-events: none;
    z-index: 0;
    font-size: 1rem;
    line-height: 1.5;
    white-space: nowrap;
    font-weight: normal;
}

#msfw-container .date-input-wrapper.has-value .date-placeholder {
    display: none;
}

.datepicker-dropdown {
    position: fixed !important;
    z-index: 10000 !important;
    background: var(--color-bg-white) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px var(--color-shadow-medium) !important;
    margin-top: 4px;
    padding: 16px;
    min-width: 300px;
    display: none;
}

.datepicker-dropdown.show {
    display: block !important;
}

#msfw-container .datepicker-dropdown {
    position: fixed !important;
    z-index: 10000 !important;
    background: var(--color-bg-white) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px var(--color-shadow-medium) !important;
    margin-top: 4px;
    padding: 16px;
    min-width: 300px;
    display: none;
}

#msfw-container .datepicker-dropdown.show {
    display: block !important;
}

#msfw-container .datepicker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

#msfw-container .datepicker-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--flatpickr-arrow-text);
    font-size: 18px;
    font-weight: bold;
}

#msfw-container .datepicker-nav-btn:hover {
    background-color: var(--flatpickr-hover-bg);
    border-radius: 4px;
}

#msfw-container .datepicker-month-year {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 16px;
}

#msfw-container .datepicker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

#msfw-container .datepicker-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 8px 0;
    text-transform: lowercase;
}

#msfw-container .datepicker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

#msfw-container .datepicker-day {
    text-align: center;
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    color: var(--flatpickr-arrow-text);
    background: transparent;
    border: none;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#msfw-container .datepicker-day:hover {
    background-color: var(--flatpickr-hover-bg);
}

#msfw-container .datepicker-day.other-month {
    color: var(--modal-pax-btn-disabled-text);
}

#msfw-container .datepicker-day.today {
    color: var(--flatpickr-selected-text);
    background: transparent;
    font-weight: normal;
}

#msfw-container .datepicker-day.selected {
    background-color: var(--flatpickr-selected-bg);
    color: var(--flatpickr-selected-text);
    font-weight: 600;
    border-radius: 50%;
}

#msfw-container .datepicker-day.disabled {
    color: var(--modal-pax-btn-disabled-text);
    background-color: var(--modal-pax-btn-disabled-bg);
    cursor: not-allowed;
    border-radius: 4px;
}

#msfw-container .datepicker-day.disabled:hover {
    background-color: var(--modal-pax-btn-disabled-bg);
}

#msfw-container .flatpickr-calendar {
    border-radius: 10px !important;
    box-shadow: 0 4px 6px var(--color-shadow-medium) !important;
    border: 1px solid var(--color-border-light) !important;
    font-family: inherit !important;
}

#msfw-container .flatpickr-months {
    border-radius: 10px 10px 0 0 !important;
    padding: 16px !important;
}

#msfw-container .flatpickr-month {
    color: var(--color-text-primary) !important;
}

#msfw-container .flatpickr-prev-month,
#msfw-container .flatpickr-next-month {
    color: var(--flatpickr-arrow-text) !important;
    fill: var(--flatpickr-arrow-text) !important;
}

#msfw-container .flatpickr-prev-month:hover,
#msfw-container .flatpickr-next-month:hover {
    background-color: var(--color-bg-light) !important;
    border-radius: 4px !important;
}

#msfw-container .flatpickr-weekdays {
    background: transparent !important;
    padding: 8px 0 !important;
}

#msfw-container .flatpickr-weekday {
    color: var(--color-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: lowercase !important;
}

#msfw-container .flatpickr-days {
    padding: 8px !important;
}

#msfw-container .flatpickr-day {
    color: var(--flatpickr-selected-text) !important;
    border-radius: 50% !important;
    border: none !important;
}

#msfw-container .flatpickr-day:hover {
    background-color: var(--flatpickr-hover-bg) !important;
}

#msfw-container .flatpickr-day.today {
    color: var(--flatpickr-selected-text) !important;
    background: transparent !important;
    border: none !important;
    font-weight: normal !important;
}

#msfw-container .flatpickr-day.selected {
    background-color: var(--flatpickr-selected-bg) !important;
    color: var(--flatpickr-selected-text) !important;
    font-weight: 600 !important;
    border-radius: 50% !important;
}

#msfw-container .flatpickr-day.flatpickr-disabled {
    color: var(--modal-pax-btn-disabled-text) !important;
    background-color: var(--modal-pax-btn-disabled-bg) !important;
    cursor: not-allowed !important;
}

#msfw-container .flatpickr-day.flatpickr-disabled:hover {
    background-color: var(--modal-pax-btn-disabled-bg) !important;
}

#msfw-container .flatpickr-day.prev-month-day,
#msfw-container .flatpickr-day.next-month-day {
    color: var(--modal-pax-btn-disabled-text) !important;
}

@media (max-width: 768px) {
    #msfw-container .flatpickr-calendar {
        width: calc(100vw - 40px) !important;
        max-width: 400px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    #msfw-container .flatpickr-months {
        padding: 12px !important;
    }

    #msfw-container .flatpickr-days {
        padding: 6px !important;
    }

    #msfw-container .flatpickr-day {
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 576px) {
    #msfw-container .flatpickr-calendar {
        width: calc(100vw - 30px) !important;
        max-width: 100% !important;
    }

    #msfw-container .flatpickr-months {
        padding: 10px !important;
    }

    #msfw-container .flatpickr-weekday {
        font-size: 11px !important;
        padding: 6px 0 !important;
    }

    #msfw-container .flatpickr-day {
        min-width: 28px !important;
        min-height: 28px !important;
        font-size: 12px !important;
        padding: 6px !important;
    }
}

#msfw-container .passenger-select-btn {
    background-color: var(--step1-input-bg) !important;
    border: 1px solid var(--step1-input-border) !important;
    color: var(--step1-input-text) !important;
    text-align: left;
    padding-left: 60px !important;
    padding-right: 50px !important;
    height: 65px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: normal;
    border-radius: 10px !important;
    cursor: pointer;
    box-shadow: 0 1px 3px var(--color-shadow-light) !important;
}

#msfw-container .passenger-select-btn:hover,
#msfw-container .passenger-select-btn:focus,
#msfw-container .passenger-select-btn:active,
#msfw-container .passenger-select-btn.active {
    background-color: var(--step1-input-bg) !important;
    border-color: var(--step1-input-border) !important;
    color: var(--step1-input-text) !important;
    outline: none !important;
}

#msfw-container .quote-button {
    background-color: var(--step1-button-bg) !important;
    border-color: var(--step1-button-bg) !important;
    color: var(--step1-button-text) !important;
    height: 65px !important;
    font-weight: 600;
    border-radius: 10px !important;
}

#msfw-container .quote-button:hover,
#msfw-container .quote-button:focus {
    background-color: var(--step1-button-hover-bg) !important;
    border-color: var(--step1-button-hover-border) !important;
    color: var(--step1-button-text) !important;
}

#msfw-container .form-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -25px !important;
    margin-left: -25px !important;
    align-items: flex-end !important;
}

#msfw-container .form-group {
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#msfw-container .form-row.mb-3 {
    margin-bottom: 1rem !important;
}

/* col-md-6: 2 columns on medium screens (768px-991px), but not when col-lg-4 is present */
@media (min-width: 768px) and (max-width: 991px) {
    #msfw-container .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

#msfw-container .col-md-4 {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    width: 33.333333% !important;
}

#msfw-container .form-group label {
    margin-bottom: 0.5rem !important;
}

#msfw-container .form-group.col-md-4:last-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

@media (max-width: 992px) {
    #msfw-container {
        padding: 30px !important;
    }

    #msfw-container .col-md-6,
    #msfw-container .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    #msfw-container .form-group {
        margin-bottom: 1rem !important;
    }

    #msfw-container .form-row.mb-3 {
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 768px) {
    #msfw-container {
        padding: 20px !important;
        margin-top: 10px !important;
    }

    #msfw-container .col-md-6,
    #msfw-container .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    #msfw-container .form-group {
        margin-bottom: 1rem !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    #msfw-container .form-row {
        margin-right: -10px !important;
        margin-left: -10px !important;
    }

    #msfw-container .form-group label {
        font-size: 0.9rem !important;
        margin-bottom: 0.4rem !important;
    }

    #msfw-container .input-with-icon .form-control,
    #msfw-container .input-with-icon .custom-select,
    #msfw-container .passenger-select-btn,
    #msfw-container .quote-button {
        height: 55px !important;
        font-size: 0.9rem !important;
        padding-left: 55px !important;
        padding-right: 45px !important;
    }

    #msfw-container .input-icon {
        left: 15px !important;
        width: 22px !important;
        height: 22px !important;
    }

    #msfw-container .input-icon-right {
        right: 15px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1000 !important;
    }

    #msfw-container .input-with-icon.select-wrapper select#country-select {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-image: none !important;
    }

    #msfw-container .date-placeholder {
        left: 60px !important;
        font-size: 0.9rem !important;
    }

    #msfw-container .quote-button {
        margin-top: 0 !important;
    }
}

@media (max-width: 576px) {
    #msfw-container {
        padding: 15px !important;
        margin-top: 10px !important;
        border-radius: 8px !important;
    }

    #msfw-container .form-group {
        padding-right: 8px !important;
        padding-left: 8px !important;
        margin-bottom: 0.8rem !important;
    }

    #msfw-container .form-row {
        margin-right: -8px !important;
        margin-left: -8px !important;
    }

    #msfw-container .form-group label {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;
    }

    #msfw-container .input-with-icon .form-control,
    #msfw-container .input-with-icon .custom-select,
    #msfw-container .passenger-select-btn,
    #msfw-container .quote-button {
        height: 50px !important;
        font-size: 0.85rem !important;
        padding-left: 50px !important;
        padding-right: 40px !important;
    }

    #msfw-container .input-icon {
        left: 12px !important;
        width: 20px !important;
        height: 20px !important;
    }

    #msfw-container .input-icon-right {
        right: 12px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1000 !important;
    }

    #msfw-container .input-with-icon.select-wrapper select#country-select {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-image: none !important;
    }

    #msfw-container .date-placeholder {
        left: 55px !important;
        font-size: 0.85rem !important;
    }

    #msfw-container .flatpickr-calendar {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
    }
}

#msfw-container .input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* fixed overlay covering the viewport */
  #msfw-spinner-overlay {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    z-index: 2000 !important; /* > Bootstrap .modal (1050) and .modal-backdrop (1040) */
  }
  #msfw-spinner-overlay .msfw-spinner-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6); /* light glass effect */
    pointer-events: all;
  }
  #msfw-spinner-overlay .msfw-spinner-box {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    min-width: 120px; min-height: 120px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(255,255,255,0.0); /* transparent box; backdrop does the dimming */
  }
  /* big spinner */
  #msfw-spinner-overlay #loading-spinner {
    display: block !important;
    width: 96px; /* larger, matches Step 1's spec */
    height: auto;
  }

/* ============================================================================
   ESTILOS EXTRAÍDOS DOS TEMPLATES PHP - results-template-getPackages.php
   ============================================================================ */

/* Tooltip + help icon styling */
.msfw-help-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background: var(--help-icon-bg);
  color: var(--help-icon-text);
  font-weight:700; font-size:12px;
  line-height:1; margin-left:6px; cursor:pointer; text-decoration:none;
  border:1px solid var(--help-icon-border);
}
.msfw-help-icon:focus{ outline:2px solid rgba(13,110,253,.35); outline-offset:2px; }

.msfw-tip{
  position:absolute; z-index: 2000;
  max-width: 320px; padding:10px 12px;
  background: var(--tooltip-bg); color: var(--tooltip-text); border-radius:8px;
  box-shadow:0 8px 24px var(--color-shadow-dark);
  font-size:.9rem;
}
.msfw-tip .msfw-tip-title{ font-weight:700; margin-bottom:6px; }
.msfw-tip:after{
  content:""; position:absolute; width:0; height:0;
  border:8px solid transparent; border-top-color: var(--tooltip-bg);
  left:16px; bottom:-16px;
}

/* Table header color (dark blue) and "Selecionar" text always white */
.table-comparison thead th{
  background: var(--tooltip-bg); color: var(--color-text-light) !important; border-color: var(--modal-compare-header-border);
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  font-size: 0.9rem;
}
.btn-select{ color: var(--color-text-light) !important; }

/* FIX: manter a coluna do plano selecionado com o mesmo fundo azulado em todas as linhas */
.table-comparison th.table-primary,
.table-comparison td.table-primary{
  background-color: var(--modal-compare-selected-bg) !important;
  color: var(--modal-compare-selected-text) !important;
}
.table-comparison.table-striped tbody tr:nth-of-type(odd) td.table-primary,
.table-comparison.table-striped tbody tr:nth-of-type(odd) th.table-primary{
  background-color: var(--modal-compare-selected-bg) !important;
  color: var(--modal-compare-selected-text) !important;
}

/* NOVO: alinhar colunas de pacotes (3ª em diante) à direita com padding */
.table-comparison th:nth-child(n+3),
.table-comparison td:nth-child(n+3){
  text-align: right !important;
  padding-right: 12px !important;
}

/* WhatsApp button style */
.msfw-whatsapp-btn {
  color: var(--step3-btn-whatsapp-text) !important;
}
.msfw-whatsapp-btn:hover {
  background-color: var(--step3-btn-whatsapp-hover-bg) !important;
  color: var(--step3-btn-whatsapp-text) !important;
}

/* Edit Quote Form - results-template-getPackages.php */
#edit-quote-form .input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
  overflow: visible;
}

#edit-quote-form .input-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  object-fit: contain;
}

#edit-quote-form .input-icon-right {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  pointer-events: none;
  object-fit: contain;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 14px !important;
  height: 14px !important;
}

#edit-quote-form .input-with-icon .form-control,
#edit-quote-form .input-with-icon .custom-select {
  padding-left: 60px !important;
  padding-right: 50px !important;
  background-color: var(--edit-quote-input-bg) !important;
  color: var(--edit-quote-input-text) !important;
  border: 1px solid var(--edit-quote-input-border) !important;
  border-radius: 10px !important;
  height: 65px !important;
  width: 100% !important;
  font-size: 1rem;
  line-height: 1.5;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -o-appearance: none !important;
  background-image: none !important;
  background: var(--edit-quote-input-bg) !important;
  cursor: pointer;
}

#edit-quote-form .input-with-icon.select-wrapper select.custom-select {
  background-image: none !important;
  background: var(--edit-quote-input-bg) !important;
}

#edit-quote-form .input-with-icon.select-wrapper select.custom-select::-ms-expand {
  display: none !important;
}

#edit-quote-form .date-input-wrapper {
  position: relative;
}

#edit-quote-form .date-input-wrapper input.date-input {
  color: transparent !important;
  position: relative;
  z-index: 1;
  background-color: var(--edit-quote-input-bg) !important;
  cursor: pointer;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px var(--color-shadow-light) !important;
}

#edit-quote-form .date-input-wrapper.has-value input.date-input {
  color: var(--edit-quote-input-text) !important;
}

#edit-quote-form .date-input-wrapper input.date-input:focus {
  color: var(--edit-quote-input-text) !important;
  border-color: var(--edit-quote-input-focus-border) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--step1-input-focus-shadow);
}

#edit-quote-form .date-placeholder {
  position: absolute;
  left: 70px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--step1-placeholder-text);
  pointer-events: none;
  z-index: 0;
  font-size: 1rem;
  line-height: 1.5;
  white-space: nowrap;
  font-weight: normal;
}

#edit-quote-form .date-input-wrapper.has-value .date-placeholder {
  display: none;
}

#edit-quote-form .flatpickr-calendar {
  border-radius: 10px !important;
  box-shadow: 0 4px 6px var(--color-shadow-medium) !important;
  border: 1px solid var(--color-border-light) !important;
}

#edit-quote-form .flatpickr-months {
  padding: 16px !important;
}

#edit-quote-form .flatpickr-month {
  color: var(--color-text-primary) !important;
}

#edit-quote-form .flatpickr-current-month .flatpickr-monthDropdown-months,
#edit-quote-form .flatpickr-current-month input.cur-year {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#edit-quote-form .flatpickr-current-month input.cur-year {
  width: auto !important;
  min-width: 60px !important;
  padding: 2px 4px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--color-text-primary) !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

#edit-quote-form .flatpickr-current-month input.cur-year:hover {
  border-color: var(--color-border-light) !important;
  background: var(--color-bg-light) !important;
}

#edit-quote-form .flatpickr-current-month input.cur-year:focus {
  border-color: var(--edit-quote-input-focus-border) !important;
  background: var(--color-bg-white) !important;
  outline: none !important;
}

#edit-quote-form .flatpickr-prev-month,
#edit-quote-form .flatpickr-next-month {
  color: var(--flatpickr-arrow-text) !important;
  fill: var(--flatpickr-arrow-text) !important;
}

#edit-quote-form .flatpickr-prev-month:hover,
#edit-quote-form .flatpickr-next-month:hover {
  background-color: var(--color-bg-light) !important;
  border-radius: 4px !important;
}

#edit-quote-form .passenger-select-btn {
  background-color: var(--edit-quote-input-bg) !important;
  border: 1px solid var(--edit-quote-input-border) !important;
  color: var(--edit-quote-input-text) !important;
  text-align: left;
  padding-left: 60px !important;
  padding-right: 50px !important;
  height: 65px !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: normal;
  border-radius: 10px !important;
  cursor: pointer;
  box-shadow: 0 1px 3px var(--color-shadow-light) !important;
}

#edit-quote-form .passenger-select-btn:hover,
#edit-quote-form .passenger-select-btn:focus,
#edit-quote-form .passenger-select-btn:active,
#edit-quote-form .passenger-select-btn.active {
  background-color: var(--edit-quote-input-bg) !important;
  border-color: var(--edit-quote-input-border) !important;
  color: var(--edit-quote-input-text) !important;
  outline: none !important;
}

#edit-quote-form .btn-update-quote {
  background-color: var(--edit-quote-btn-bg) !important;
  border-color: var(--edit-quote-btn-bg) !important;
  color: var(--edit-quote-btn-text) !important;
  height: 65px !important;
  font-weight: 600;
  border-radius: 10px !important;
}

#edit-quote-form .btn-update-quote:hover,
#edit-quote-form .btn-update-quote:focus {
  background-color: var(--edit-quote-btn-hover-bg) !important;
  border-color: var(--edit-quote-btn-hover-bg) !important;
  color: var(--edit-quote-btn-text) !important;
}

#edit-quote-form .form-group {
  position: relative !important;
  padding-bottom: 25px !important;
}

#edit-quote-form .form-group .field-error {
  position: absolute !important;
  bottom: 0 !important;
  left: 15px !important;
  right: 15px !important;
  color: #dc3545 !important;
  font-size: 0.875rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  line-height: 1.4 !important;
}

#edit-quote-form .form-group .field-error:not(:empty) {
  display: block !important;
}

/* Edit Passenger Modal - results-template-getPackages.php */
#edit-passengerModal .modal-dialog.modal-custom { max-width: 28rem; }
#edit-passengerModal .modal-body { max-height: 60vh; overflow-y: auto; }
@media (max-width: 576px) {
  #edit-passengerModal .modal-dialog.modal-custom { max-width: 95vw; }
}

#edit-passengerModal .modal-title {
  font-weight: 600;
  color: var(--modal-pax-title);
}

#edit-pax-close-x {
  color: var(--modal-pax-close) !important;
}

#edit-pax-close-x:hover,
#edit-pax-close-x:focus,
#edit-pax-close-x:active {
  background: var(--color-bg-white) !important;
  color: var(--modal-pax-close) !important;
  opacity: 1 !important;
}

#edit-pax-close-x span {
  font-size: 40px !important;
  color: var(--modal-pax-close) !important;
  padding: 10px !important;
}

#edit-passengerModal .age-range-container {
  border: 1px solid var(--modal-pax-range-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  background-color: var(--modal-pax-range-bg);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#edit-passengerModal .age-range-label {
  font-weight: 700;
  color: var(--modal-pax-range-text);
  font-size: 1rem;
  margin-bottom: 0;
  flex: 1;
}

#edit-passengerModal .age-range-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

#edit-passengerModal .age-range-controls .input-group {
  width: auto;
  display: flex;
  align-items: center;
}

#edit-passengerModal .age-range-controls .pax-display {
  width: 50px;
  text-align: center !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border: none !important;
  height: 40px !important;
  background-color: var(--color-bg-white) !important;
  color: var(--color-text-primary) !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  opacity: 1 !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
}

#edit-passengerModal .age-range-controls .pax-display::-webkit-outer-spin-button,
#edit-passengerModal .age-range-controls .pax-display::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#edit-passengerModal .age-range-controls .pax-display[type=number] {
  -moz-appearance: textfield;
}

#edit-passengerModal .btn-increment,
#edit-passengerModal .btn-decrement {
  background: var(--modal-pax-btn-bg) !important;
  color: var(--modal-pax-btn-text) !important;
  font-weight: bold !important;
  font-size: 25px;
  border-radius: 5px !important;
  border: 2px solid var(--modal-pax-btn-border) !important;
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

#edit-passengerModal .btn-increment:hover,
#edit-passengerModal .btn-increment:focus,
#edit-passengerModal .btn-decrement:hover,
#edit-passengerModal .btn-decrement:focus {
  background: var(--modal-pax-btn-bg) !important;
  border: 2px solid var(--modal-pax-btn-border) !important;
  color: var(--modal-pax-btn-text) !important;
}

#edit-passengerModal .total-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--modal-pax-total-border);
}

#edit-passengerModal .total-label {
  font-weight: 700;
  color: var(--modal-pax-total-text);
  font-size: 1rem;
}

#edit-passengerModal .total-value {
  font-weight: 700;
  color: var(--modal-pax-total-text);
  font-size: 1rem;
}

#edit-pax-clear:hover,
#edit-pax-cancel:hover,
#edit-pax-apply:hover {
  background-color: var(--modal-pax-action-hover-bg) !important;
  border-color: var(--modal-pax-action-hover-border) !important;
  color: var(--modal-pax-action-text) !important;
}

#edit-pax-clear:focus,
#edit-pax-cancel:focus,
#edit-pax-apply:focus {
  background-color: var(--modal-pax-action-hover-bg) !important;
  border-color: var(--modal-pax-action-hover-border) !important;
  color: var(--modal-pax-action-text) !important;
}

@media (max-width: 768px) {
  #edit-quote-form .input-with-icon .form-control,
  #edit-quote-form .input-with-icon .custom-select,
  #edit-quote-form .passenger-select-btn,
  #edit-quote-form .btn-update-quote {
    height: 55px !important;
    font-size: 0.9rem !important;
    padding-left: 55px !important;
    padding-right: 45px !important;
  }

  #edit-quote-form .input-icon {
    left: 15px !important;
    width: 22px !important;
    height: 22px !important;
  }

  #edit-quote-form .input-icon-right {
    right: 15px !important;
  }

  #edit-quote-form .date-placeholder {
    left: 60px !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 576px) {
  #edit-quote-form .input-with-icon .form-control,
  #edit-quote-form .input-with-icon .custom-select,
  #edit-quote-form .passenger-select-btn,
  #edit-quote-form .btn-update-quote {
    height: 50px !important;
    font-size: 0.85rem !important;
    padding-left: 50px !important;
    padding-right: 40px !important;
  }

  #edit-quote-form .input-icon {
    left: 12px !important;
    width: 20px !important;
    height: 20px !important;
  }

  #edit-quote-form .input-icon-right {
    right: 12px !important;
  }

  #edit-quote-form .date-placeholder {
    left: 55px !important;
    font-size: 0.85rem !important;
  }
}

/* ============================================================================
   ESTILOS EXTRAÍDOS DOS TEMPLATES PHP - results-template-paymentDetails.php
   ============================================================================ */

/* tiny spinner in button */
#spinner { display:none; margin-right:.5rem; }
#payment-button.loading #spinner { display:inline-block; }
#payment-button.loading #button-text { display:none; }

/* overlay spinner (center of viewport) */
#loading-spinner{
  display:none;
  position:fixed;
  inset:0;
  margin:auto;
  z-index:2000;
  width:96px;
  height:auto;
  pointer-events:none;
}

/* dark-blue header + white text for the purchase title */
.payment-header{
  background-color: var(--step5-header-bg) !important;
  color: var(--step5-header-text) !important;
}

/* dark-blue primary action button */
.btn-darkblue{
  background-color: var(--step5-btn-pay-bg) !important;
  border-color: var(--step5-btn-pay-bg) !important;
  color: var(--step5-btn-pay-text) !important;
}
.btn-darkblue:hover,
.btn-darkblue:focus{
  background-color: var(--step5-btn-pay-hover-bg) !important;
  border-color: var(--step5-btn-pay-hover-border) !important;
  color: var(--step5-btn-pay-text) !important;
}

/* Checkbox não estou em viagem */
#not_traveling {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.form-check-label strong {
  color: var(--step5-checkbox-label);
}
.form-check {
  padding-left: 1.75rem;
}

/* ============================================================================
   ESTILOS EXTRAÍDOS DOS TEMPLATES PHP - results-template-PaymentConfirmation.php
   ============================================================================ */

#msfw-container .payment-confirmation .noline { text-decoration: none; }
#msfw-container .payment-confirmation .card-header { background-color: var(--step6-accordion-header-bg); color: var(--step6-accordion-header-text); }
#msfw-container .payment-confirmation .btn-link { color: var(--step6-link-text); text-decoration: none; }
#msfw-container .payment-confirmation .btn-link.collapsed { color: var(--step6-link-text); opacity: var(--step6-link-collapsed-opacity); }
#msfw-container .payment-confirmation .btn-link:hover { text-decoration: underline; }

/* ============================================================================
   ESTILOS EXTRAÍDOS DOS TEMPLATES PHP - results-template-enterPassengerDetails.php
   ============================================================================ */

/* Centered overlay spinner (same pattern used in other steps) */
#loading-spinner{
  display:none;
  position:fixed; inset:0;
  margin:auto;
  z-index:2000;
  width:96px; height:auto;
  pointer-events:none;
}

/* Ensure the main submit button is always white text */
#passengers-data-forms button[type="submit"]{
  background-color: var(--step4-btn-submit-bg) !important;
  border-color: var(--step4-btn-submit-bg) !important;
  color: var(--step4-btn-submit-text) !important;
}
#passengers-data-forms button[type="submit"]:hover,
#passengers-data-forms button[type="submit"]:focus,
#passengers-data-forms button[type="submit"]:active{
  background-color: var(--step4-btn-submit-hover-bg) !important;
  border-color: var(--step4-btn-submit-hover-border) !important;
  color: var(--step4-btn-submit-text) !important;
}

/* ========================================
   STEP 4/5/6 - Espaçamento entre campos
   ======================================== */

/* Step 4 - Formulário de passageiros */
#passengers-data-forms .form-group {
  margin-bottom: 15px !important;
}

#passengers-data-forms .form-group {
  position: relative !important;
  padding-bottom: 25px !important;
}

#passengers-data-forms .form-group .form-control,
#passengers-data-forms .form-group select.form-control,
#passengers-data-forms .form-group input.form-control {
  width: 100% !important;
  box-sizing: border-box !important;
}

#passengers-data-forms .form-group .input-group {
  width: 100% !important;
}

#passengers-data-forms .form-group .input-group .form-control {
  width: 100% !important;
  flex: 1 1 auto !important;
}

#passengers-data-forms .form-group .field-error {
  position: absolute !important;
  bottom: 0 !important;
  left: 15px !important;
  right: 15px !important;
  color: #dc3545 !important;
  font-size: 0.875rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  line-height: 1.4 !important;
}

#passengers-data-forms .form-group .field-error:not(:empty) {
  display: block !important;
}

/* Step 5 - Formulário de pagamento */
#payment-form .form-group {
  margin-bottom: 15px !important;
}

/* Step 6 - Confirmação de pagamento */
.payment-confirmation .form-group {
  margin-bottom: 15px !important;
}

/* Espaçamento geral para cards nas etapas 4/5/6 */
#msfw-container .card-body .form-group {
  margin-bottom: 15px !important;
}

/* Garantir espaçamento em containers fora do step-1 */
#msfw-container .container .form-group:not(.input-with-icon .form-group) {
  margin-bottom: 15px !important;
}