/* Key Chapters:

Chapter 1: Supplementary Reset & CSS Variables Configuration
Chapter 2: Button variants (colors, sizing, rounded states)
Chapter 3-5: Inputs, checkboxes, radios, custom dropdown overrides
Chapter 11: Tempus Dominus Date Picker styling
Chapter 12: Flight/Voli Card design styles
Chapter 21: Cart & Checkout elements
CSS Custom Properties & Core Color Variables
Colors and sizing constraints are declared inside the :root pseudo-class: 

*/

@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap");

/* Chapter 1 */
:root {
  /* Color Palette */
  --color-primary: #0c2b57;
  --color-blue: #0d8ae4;
  --color-action-light: #f46d00;
  --color-action: #df5d00;
  --color-blueA8: #0a58a8;
  --color-grey1A: #0000001a;
  --color-grey36: #102036;
  --color-grey26: #00000026;
  --color-grey29: #00000029;
  --color-grey59: #00000059;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-error: #e11d48;

  /* Border Radius tokens */
  --radius-outer: 10px;
  --radius-inner: 5px;

  /* Typographic Responsive Scale Scale */
  --font-femto: 8px;
  --font-pico: 9px;
  --font-nano: 10px;
  --font-micro: 11px;
  --font-uxs: 12px;
  --font-xs: 14px;
  --font-sm: 16px;
  --font-md: 18px;
}

@media (min-width: 768px) {
  :root {
    --font-femto: 9px;
    --font-pico: 10px;
    --font-nano: 11px;
    --font-micro: 12px;
    --font-uxs: 13px;
    --font-xs: 15px;
    --font-sm: 17px;
    --font-md: 19px;
  }
}

@media (min-width: 1200px) {
  :root {
    --font-femto: 11px;
    --font-pico: 12px;
    --font-nano: 13px;
    --font-micro: 14px;
    --font-uxs: 15px;
    --font-xs: 17px;
    --font-sm: 19px;
    --font-md: 21px;
  }
}

/* Chapter 2 */
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: calc(var(--font-md) * 2 + 8px) !important;
  background: var(--color-action-light);
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 4px;
  opacity: 1;
  color: var(--color-white);
  font-size: var(--font-micro);
  font-weight: 600;
  text-transform: uppercase;
  padding: 0 30px;
  border: transparent;
}

.button .icon {
  font-size: calc(var(--font-nano) * 2);
}

.button-white {
  background: var(--color-white);
  color: var(--color-action-light);
  border: 1px solid var(--color-action-light);
}

.button-white-second {
  background: var(--color-white);
  color: var(--color-action-light);
  border: 2px solid var(--color-action-light);
  font-weight: 600;
}

a {
  text-decoration: none;
}

/* Chapter 3 */

.volaeasy-input {
  position: relative;
  width: 100%;
  max-width: 420px;
}

.volaeasy-input input {
  width: 100%;
  height: calc(var(--font-md) * 4 - 4px);
  border: 2px solid transparent;
  border-radius: 2px;
  background: #fff;
  padding: 28px 45px 18px 18px;
  font-size: calc(var(--font-xs) + 1);
  color: #1f2b3d;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.volaeasy-input label {
  position: absolute;
  left: 55px;
  top: calc(var(--font-uxs) * 2);
  font-size: calc(var(--font-xs) + 1px);
  color: #1f2b3d;
  pointer-events: none;
  transition: 0.2s;
}

.volaeasy-icon {
  position: absolute;
  left: calc(var(--font-xs) + 1px);
  top: calc(var(--font-uxs) * 2);
  font-size: calc(var(--font-md) + 1px);
  color: #1f2b3d;
  transition: 0.2s;
  pointer-events: none;
}

.icon-color-blue {
  color: var(--color-blue);
}

.volaeasy-input input:focus {
  padding-left: 18px;
}

.volaeasy-input input:focus~label,
.volaeasy-input input:not(:placeholder-shown)~label,
.volaeasy-input.is-error label {
  top: 10px;
  left: 18px;
  font-size: var(--font-pico);
}

/* Focus color */
.volaeasy-input input:focus~label {
  color: var(--color-blue);
}

/* Error color always priority */
.volaeasy-input.is-error label {
  color: var(--color-error) !important;
}

.volaeasy-input input:focus~.volaeasy-icon,
.volaeasy-input input:not(:placeholder-shown)~.volaeasy-icon,
.volaeasy-input.is-error .volaeasy-icon {
  opacity: 0;
  visibility: hidden;
}

.volaeasy-input input:focus~.volaeasy-icon {
  color: var(--color-blue);
}

/* Variant: Floating Icon (Flight Search Inputs) */
.volaeasy-input.has-floating-icon input:focus~label,
.volaeasy-input.has-floating-icon input:not(:placeholder-shown)~label,
.volaeasy-input.has-floating-icon.is-error label {
  left: 36px;
  margin-left: 5px;
}

.volaeasy-input.has-floating-icon.is-error label {
  margin-left: 5px;
}

.volaeasy-input.has-floating-icon input:focus~.volaeasy-icon,
.volaeasy-input.has-floating-icon input:not(:placeholder-shown)~.volaeasy-icon,
.volaeasy-input.has-floating-icon.is-error .volaeasy-icon {
  opacity: 1;
  visibility: visible;
  top: 10px;
  left: 18px;
  font-size: calc(var(--font-pico) + 2px);
}

.volaeasy-error-icon {
  display: none;
  position: absolute;
  right: 16px;
  top: 15px;
  width: var(--font-sm);
  height: var(--font-sm);
  border-radius: 50%;
  background: var(--color-error);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  align-items: center;
  justify-content: center;
}

.volaeasy-input small {
  display: none;
  color: #fff;
  font-size: 11px;
  margin-left: 18px;
  margin-top: 5px;
}

.volaeasy-input.is-error input {
  border-color: var(--color-error);
}

.volaeasy-input.is-error label {
  color: var(--color-error);
}

.volaeasy-input.is-error .volaeasy-error-icon {
  display: flex;
}

.volaeasy-input.is-error small {
  display: block;
}

.password-toggle {
  position: absolute;
  right: 18px;
  top: calc(var(--font-xs) * 2 + 1px);
  font-size: 20px;
  color: var(--color-blue);
  cursor: pointer;
  transition: 0.2s;
  z-index: 2;
}

.password-toggle:hover {
  opacity: 0.8;
}

/* Heading */
.heading-1 {
  font-size: calc(var(--font-md) * 2 + 8px);
  font-weight: bold;
  margin: 0;
}

.heading-2 {
  font-size: calc(var(--font-md) * 2 - 2px);
  font-weight: 500;
  margin: 0;
}

.heading-3 {
  font-size: calc(var(--font-xs) * 2);
  font-weight: 500;
  margin: 0;
}

.pragraph-22 {
  font-size: calc(var(--font-femto) * 2);
}

.sec_space {
  padding: calc(var(--font-md) * 3) 0;
}

.text-color-primary {
  color: var(--color-primary);
}


/* Header */
.sec_header {
  background-color: var(--color-primary);
  padding: calc(var(--font-md) * 3) 0 calc(var(--font-pico) * 4);
}

.logo {
  height: calc(var(--font-xs) * 4);
}

.hero-section {
  background: linear-gradient(to bottom, var(--color-primary) 0%, #006ebc 100%);
  color: var(--color-white);
  padding: calc(var(--font-md) * 2 + 8px) 0 calc(var(--font-md) * 2 + 18px) 0;
}

.info_box {
  border: 0.5px solid var(--color-primary);
  padding: calc(var(--font-md) * 2) calc(var(--font-uxs) * 3);
  border-radius: var(--radius-inner);
  text-align: center;
  color: var(--color-primary);
  margin: 0 auto;
}

.features-grid .col-md-3 {
  position: relative;
  cursor: pointer;
  min-height: 230px;
}

.icon-feature {
  font-size: var(--font-sm);
  line-height: 1;
  transition: all 0.3s ease-in-out;
}

.icon-feature svg {
  width: 3.5rem;
  height: 3.5rem;
  fill: var(--secondary2);
  transition: all 0.3s ease-in-out;
}

.feature-title {
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--font-sm);
  line-height: 1.25;
  transition: all 0.3s ease-in-out;
  position: relative;
  padding-bottom: 10px;
}

.feature-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--secondary2);
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

/* Features Card */
.features-grid .col-md-3 p:last-child {
  font-size: 0.95rem;
  color: var(--color-primary);
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  margin-top: 15px;
  margin-bottom: 0;
}

.features-grid .col-md-3:hover .icon-feature {
  font-size: 2.5rem;
}

.features-grid .col-md-3:hover .icon-feature svg {
  width: 2.5rem;
  height: 2.5rem;
}

.features-grid .col-md-3:hover .feature-title {
  font-size: 0.95rem;
}

.features-grid .col-md-3:hover .feature-title::after {
  opacity: 1;
}

.features-grid .col-md-3:hover p:last-child {
  opacity: 1;
  visibility: visible;
  max-height: 150px;
}

.cta-box {
  background: linear-gradient(to bottom, var(--color-primary) 0%, #006ebc 100%);
  border-radius: var(--font-pico);
  color: var(--color-white);
  text-align: center;
  margin: 0 auto;
  padding: calc(var(--font-md) * 2.5) calc(var(--font-md) * 2);
  box-shadow: 0px 5px 15px var(--color-grey29);
}

.cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--font-pico);
  background-color: var(--color-white);
  color: var(--color-primary);
  border-radius: calc(var(--font-md) * 2 + 8px);
  padding: var(--font-pico) calc(var(--font-uxs) * 2);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--font-sm);
  box-shadow: 0px 3px 6px var(--color-grey29);
  transition: all 0.3s ease-in-out;
}

.cta-pill:hover {
  color: var(--color-primary);
}

.cta-pill i {
  color: var(--color-blue);
  font-size: calc(var(--font-md) * 1.5);
}

.cta-pill .underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Footer */
.main-footer {
  border-top: 2px solid var(--color-primary);
  padding: calc(var(--font-uxs) * 4) 0;
  margin-top: calc(var(--font-uxs) * 4);
}

.footer-text,
.footer-links li,
.footer-links a {
  font-size: calc(var(--font-uxs) + 1px);
  color: var(--color-primary);
  line-height: 1.6;
  text-decoration: none;
  margin: 0;
}

.footer-heading {
  font-size: calc(var(--font-xs) + 1px);
  font-weight: 500;
  color: var(--color-primary);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-links i {
  margin-right: 6px;
}

.footer-col-border {
  border-left: 1px solid var(--color-primary);
  padding-left: 2rem;
}

@media (max-width: 991px) {
  .footer-col-border {
    border-left: none;
    padding-left: 0.75rem;
    margin-top: 2rem;
  }
}

.footer-logo-praesidium {
  width: 30%;
}

.footer-logo-vola {
  width: 30%;
}

.footer-logo-pci {
  width: 90%;
}

.footer-seal {
  width: calc(var(--font-sm) * 2 + 2px);
}

/* Login Card */
.login-card {
  background: linear-gradient(to bottom, var(--color-primary) 0%, #006ebc 100%);
  border-radius: 4px;
  padding: calc(var(--font-md) * 2 + 8px) calc(var(--font-md) * 2 - 2px) calc(var(--font-xs) * 4 + 2px);
  color: var(--color-white);
  box-shadow: 0px 5px 15px var(--color-grey29);
  position: relative;
}

.login-title {
  font-size: calc(var(--font-md) * 2);
  font-weight: 700;
  margin-bottom: calc(var(--font-femto) - 1px);
}

.login-subtitle {
  font-size: var(--font-sm);
  margin-bottom: calc(var(--font-uxs) * 2);
}

.space-top-56 {
  margin-top: calc(var(--font-micro) * 4);
}

.space-top-77 {
  margin-top: calc(var(--font-sm) * 4 + 1px);
}

.forgot-password,
.no-account,
.back-link {
  color: var(--color-white);
  font-size: var(--font-micro);
  text-decoration: none;
}

.forgot-password:hover,
.back-link:hover {
  color: var(--color-white);
}

.login-divider {
  border-color: var(--color-white);
  margin: calc(var(--font-sm) - 1px) auto calc(var(--font-uxs) + 1px) auto;
  max-width: 420px;
}

.back-link {
  position: absolute;
  bottom: calc(var(--font-md) * 1.1);
  left: calc(var(--font-md) * 1.6);
  font-weight: 600;
}

/* Chapter 11: Date Picker styling */
.datepicker-dropdown {
  padding: 15px;
  border: none;
  box-shadow: 0px 5px 15px var(--color-grey29);
  border-radius: var(--radius-inner);
  font-family: inherit;
  min-width: 250px;
}

.datepicker .datepicker-switch {
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--font-micro) !important;
  text-align: center;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
  background: transparent;
}

.datepicker th.prev,
.datepicker th.next {
  background-color: var(--color-action-light);
  color: var(--color-white);
  border-radius: var(--radius-inner);
  width: calc(var(--font-pico) * 3) !important;
  height: calc(var(--font-pico) * 3) !important;
  text-align: center;
}

.datepicker th.prev:hover,
.datepicker th.next:hover {
  background-color: var(--color-action);
}

.datepicker table {
  width: 100%;
}

.datepicker table tr td.active.active,
.datepicker table tr td.active.active:hover {
  background-color: var(--color-blue) !important;
  color: var(--color-white) !important;
  background-image: none !important;
  text-shadow: none;
  border-radius: 0;
}

.datepicker td {
  font-size: var(--font-pico);

}

.datepicker th.dow {
  color: #888;
  font-weight: 400;
  font-size: var(--font-pico) !important;
  text-transform: uppercase;
  padding-top: 15px;
  padding-bottom: 10px;
}

.datepicker-custom-footer {
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 5px;
}

.datepicker-custom-footer .selected-date-text {
  font-weight: 700;
  font-size: var(--font-micro);
  color: var(--color-primary);
}

.datepicker-custom-footer .btn-chiudi {
  background-color: var(--color-blue);
  color: var(--color-white);
  border: none;
  padding: calc(var(--font-femto) - 3px) calc(var(--font-xs) + 1px);
  border-radius: 4px;
  font-weight: 600;
  font-size: var(--font-micro);
}

.datepicker-custom-footer .btn-chiudi:hover {
  background-color: var(--color-blueA8);
}

/* Custom Dropdown (Ora) */
.volaeasy-input-dropdown {
  cursor: pointer;
}

.volaeasy-fake-input {
  width: 100%;
  height: calc(var(--font-md) * 4 - 4px);
  border: 2px solid transparent;
  border-radius: var(--radius-inner);
  background: var(--color-white);
  padding: calc(var(--font-micro) * 2) calc(var(--font-uxs) * 3) calc(var(--font-xs) + 1px) calc(var(--font-xs) + 1px);
  font-size: calc(var(--font-xs) + 1px);
  color: transparent;
  /* Hidden by default */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transition: 0.2s;
  display: flex;
  align-items: flex-end;
  /* Match input padding bottom */
}

.volaeasy-input-dropdown:hover .volaeasy-fake-input {
  border-color: var(--color-action-light);
}

.volaeasy-input-dropdown.is-error .volaeasy-fake-input {
  border: 1px solid var(--color-error);
}

.volaeasy-input-dropdown .dropdown-chevron {
  position: absolute;
  right: calc(var(--font-xs) + 1px);
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(var(--font-xs) + 1px);
  color: var(--color-primary);
  transition: transform 0.3s ease;
  pointer-events: none;
}

/* Open State */
.volaeasy-input-dropdown.show .volaeasy-fake-input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid var(--color-primary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  color: var(--color-primary);
}

.volaeasy-input-dropdown.has-value .volaeasy-fake-input {
  color: var(--color-primary);
}

.volaeasy-input-dropdown.show .dropdown-chevron {
  transform: translateY(-50%) rotate(180deg);
}

/* Manual Floating Label & Icon for Dropdown */
.volaeasy-input-dropdown.show label,
.volaeasy-input-dropdown.has-value label {
  top: calc(var(--font-femto) - 1px);
  left: calc(var(--font-pico) * 3);
  font-size: var(--font-pico);
  margin-left: 5px;
}

.volaeasy-input-dropdown.show label {
  color: var(--color-blue);
}

.volaeasy-input-dropdown.show .volaeasy-icon,
.volaeasy-input-dropdown.has-value .volaeasy-icon {
  opacity: 1;
  visibility: visible;
  top: calc(var(--font-femto) - 1px);
  left: calc(var(--font-md) - 1px);
  font-size: calc(var(--font-pico) + 2px);
}

.volaeasy-input-dropdown.show .volaeasy-icon {
  color: var(--color-blue);
}

/* Dropdown Menu overrides */
.volaeasy-custom-dropdown .dropdown-menu {
  border-bottom-left-radius: var(--radius-inner);
  border-bottom-right-radius: var(--radius-inner);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: calc(var(--font-femto) - 1px) 0;
  border: none;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  margin-top: 0 !important;
  max-height: 250px;
  overflow-y: auto;
}

.volaeasy-custom-dropdown .dropdown-item {
  padding: calc(var(--font-femto) - 1px) calc(var(--font-md) - 1px);
  font-size: calc(var(--font-xs) + 1px);
  color: var(--color-primary);
  font-weight: 400;
}

.volaeasy-custom-dropdown .dropdown-item:hover {
  background-color: var(--color-grey-light);
  color: var(--color-blue);
}

/* Scrollbar styles for dropdown */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #c0c0c0;
}

/* Nested Dropdown Logic */
.volaeasy-custom-dropdown .dropdown-submenu {
  position: relative;
}

.volaeasy-custom-dropdown .dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -10px !important;
  border-radius: var(--radius-inner);
  display: none;
}

.volaeasy-custom-dropdown .dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

/* Error state integration for Dropdowns */
.volaeasy-input-dropdown.is-error .volaeasy-fake-input {
  border: 1px solid var(--color-error);
}

.volaeasy-input-dropdown .volaeasy-error-icon {
  right: 42px;
  /* Push it to the left to avoid overlapping chevron */
  top: 50%;
  transform: translateY(-50%);
}

/* Custom Radio Buttons */
.volaeasy-radio-container {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
  gap: 10px;
}

.volaeasy-radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.volaeasy-radio-checkmark {
  position: relative;
  height: var(--font-md);
  width: var(--font-md);
  background-color: transparent;
  border-radius: 50%;
  border: 6px solid var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
}

.volaeasy-radio-container:hover input~.volaeasy-radio-checkmark {
  opacity: 0.8;
}

.volaeasy-radio-container input:checked~.volaeasy-radio-checkmark {
  border-color: var(--color-blue);
}

.volaeasy-radio-text {
  font-size: calc(var(--font-sm) - 1px);
  font-weight: 500;
}

/* Flight Search Widget Specifics */
.search-widget-container {
  margin-top: -30px;
  position: relative;
  z-index: 10;
  max-width: 1100px;
}

.search-tabs {
  background: transparent;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.search-tabs::-webkit-scrollbar {
  display: none;
}

.search-tabs .nav-link {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: none;
  font-weight: 600;
  font-size: calc(var(--font-sm) - 1px);
  padding: 15px 30px;
  border-radius: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-right: 5px;
  white-space: nowrap;
}

.search-tabs .nav-link.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.search-tabs .nav-link i {
  margin-right: 8px;
}

.search-tab-content {
  background: linear-gradient(to bottom, var(--color-primary), var(--color-blue));
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.swap-icon-container button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  transition: 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.swap-icon-container button:hover {
  background: var(--color-grey-light);
}