/* CSS Variables */
:root {
  --accent-color: #3399ff;
  --text-dark: #333333;
  --light-bg: #f5f5f5;
  --white: #ffffff;
  --success: #4CAF50;
  --success-hover: #45a049;
  --link-blue: blue;
  --light-border: #ccc;
  --form-gradient-start: #3399ff;
  --form-gradient-end: #66b3ff;
}
html {
  box-sizing: border-box;
}
/* Global Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

#widerdevices {
  display: none;
}

/* Base Styles */
html, body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-size: 1em;
}
header {
  width: 100%;
}
.bb {
  color: var(--link-blue);
  font-weight: bold;
}

/* Navigation */
.topbuttonbar {
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 0px;
}
.topbuttonbar a {
  padding: 0.25em 0.625em;
  margin: 0 0.0625em 0.0625em;
  display: inline-block;
  background-color: #6666FF;
  text-decoration: none;
  color: white;
  text-align: center;
  font-family: Helvetica, sans-serif;
  font-size: 0.875em;
  line-height: 1.2;
  font-weight: 100;
  border-radius: 0.3125em;
}

.topbuttonbar a:hover {
  background-color: #CCFFCC;
  color: #000;
  text-decoration: underline;
}

/* Containers */
.container,
.responsive-container,
.table-container {
  width: 100%;
  max-width: 100%;
}
.container {
  max-width: 75em;
  padding: 1.25em;
  text-align: center;
}
.container * {
  text-align: center;
}
.responsive-container {
  overflow-x: hidden;
  padding: 0 0.9375em;
}
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.625em;
}

/* Table */
table {
  width: 100%;
  table-layout: auto;
  min-width: 37.5em;
}

/* Text */
.tagline {
  font-style: italic;
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 1em;
}

/* Sections */
.info-section {
  margin: 1.5em 0;
}
.info-divider {
  width: 40%;
  margin: 1em auto;
  border: 0;
  border-top: 1px solid var(--light-border);
}

/* Links */
.info-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75em;
  margin: 1em 0;
}
.info-link {
  display: inline-block;
  text-align: center;
  border: 0.1875em solid var(--accent-color);
  border-radius: 1.25em;
  padding: 0.5em 0.75em;
  text-decoration: none;
  color: var(--text-dark);
  transition: transform 0.2s, box-shadow 0.2s;
}
.info-link:hover {
  transform: translateY(-0.1875em);
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
}
.info-link-text {
  font-style: italic;
  font-weight: bold;
  font-size: 1.1em;
}

/* Car Info */
.car-types,
.locations {
  font-style: italic;
  font-size: 0.9em;
  margin-bottom: 0.5em;
}
.locations {
  color: green;
  margin-bottom: 1.2em;
}

/* Requirements */
.requirements-list {
  background-color: #f9f9f9;
  padding: 0.75em;
  border-radius: 0.5em;
  margin: 1.2em 0;
}
.requirements-list ul {
  list-style-position: inside;
  padding-left: 0.9375em;
}
.requirements-list li {
  margin-bottom: 0.5em;
}

/* Rental Form */
.rental-form {
  max-width: 75em;
  margin: 1.25em auto;
  background: linear-gradient(to right, var(--form-gradient-start), var(--form-gradient-end));
  border-radius: 0.625em;
  padding: 1em;
  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.15);
}

.form-container {
  background-color: var(--white);
  border-radius: 0.5em;
  overflow: hidden;
}

.form-fields-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-radius: 0.5em;
  overflow: hidden;
}
.form-fields-wrapper > .form-field:not(.hidden),
.form-fields-wrapper > .datetime-group {
  flex-basis: 100%;
  border: 0.1875em solid #ff9966;
  margin-bottom: -0.1875em;
  border-radius: 0;
  flex-grow: 1;
}
.form-fields-wrapper > *:not(.hidden):first-child {
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}
.form-fields-wrapper > *:not(.hidden):last-child {
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  margin-bottom: 0;
}

.datetime-group {
  display: flex !important;
  flex-wrap: nowrap;
}
.datetime-group > .form-field {
  flex-basis: 50%;
  border: none;
  border-right: 0.1875em solid #ff9966;
}
.datetime-group > .form-field:last-child {
  border-right: none;
}
.form-fields-wrapper > .datetime-group:first-child:not(.hidden) > .form-field:first-child {
  border-top-left-radius: 0.5em;
}
.form-fields-wrapper > .datetime-group:first-child:not(.hidden) > .form-field:last-child {
  border-top-right-radius: 0.5em;
}
.form-fields-wrapper > .datetime-group:last-child:not(.hidden) > .form-field:first-child {
  border-bottom-left-radius: 0.5em;
}
.form-fields-wrapper > .datetime-group:last-child:not(.hidden) > .form-field:last-child {
  border-bottom-right-radius: 0.5em;
}

/* Individual Form Fields */
.form-field {
  flex: 1;
  min-width: 0;
  padding: 0.625em 0.75em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  background-color: var(--white);
}
.date-field {
  flex-grow: 1.2;
  min-width: 6.875em;
}
.location-field,
.date-field,
.time-field {
  flex-grow: 1;
}

/* Field Content */
.field-icon svg {
  color: #666;
  flex-shrink: 0;
  width: 1.125em;
  height: 1.125em;
}
.field-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.field-label {
  font-size: 0.6875em;
  color: #555;
  margin-bottom: 0.25em;
  font-weight: 500;
}

/* Inputs and Selects */
.form-field input[type="text"],
.form-field select {
  width: 100%;
  padding: 0.375em 0.5em;
  border: 1px solid #ccc;
  border-radius: 0.3125em;
  font-size: 0.875em;
  color: #0066cc;
  font-weight: 600;
  background-color: #e6f2ff;
  box-sizing: border-box;
}
.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 0.125em rgba(0, 102, 204, 0.2);
}

/* Search Button */
.search-button-field {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.search-btn {
  width: 100%;
  background-color: var(--success);
  color: var(--white);
  border: none;
  border-radius: 0;
  padding: 0.625em;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.search-btn:hover {
  background-color: var(--success-hover);
}

/* Checkbox */
.different-dropoff-container {
  margin-top: 0.9375em;
  padding: 0 0.9375em;
  display: flex;
  align-items: center;
}
.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.checkbox-text {
  margin-left: 0.5em;
  font-size: 0.875em;
  color: var(--text-dark);
}
.checkbox-container input[type="checkbox"] {
  width: 1em;
  height: 1em;
  accent-color: #0066cc;
}

/* Utilities */
.hidden {
  display: none !important;
}

/* Credit Card Form */
.cc-form-container {
  width: 100%;
  max-width: 20em;
  margin: 0 auto;
  padding: 0 0.625em;
  box-sizing: border-box;
}
/* Common icon styling */
.icon {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0 5px;
}

/* Location pin/marker icon - now white with black outline */
.icon-location {
  background: #fff;
  border: 1px solid #000;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  margin-top: 2px;
  margin-left: 2px;
  width: 10px;
  height: 10px;
}

.icon-location::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background: #000;
  border-radius: 50%;
  top: 3px;
  left: 3px;
}

/* Calendar icon */
.icon-calendar {
  border: 1px solid #000;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}

.icon-calendar::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 2px;
  background: #000;
  top: -2px;
  left: 3px;
}

.icon-calendar::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 1px;
  background: #000;
  top: 4px;
  left: 2px;
  box-shadow: 0 3px 0 0 #000;
}

/* Improved Clock icon */
.icon-clock {
  border: 1px solid #000;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: #fff;
}

/* Hour hand (short) */
.icon-clock::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 1px;
  background: #000;
  top: 6px;
  left: 6px;
  transform-origin: 0 0;
  transform: rotate(45deg);
}

/* Minute hand (longer) */
.icon-clock::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 1px;
  background: #000;
  top: 6px;
  left: 6px;
  transform-origin: 0 0;
  transform: rotate(125deg);
}

/* Center dot */
.icon-clock .center-dot {
  position: absolute;
  width: 1px;
  height: 1px;
  background: #000;
  border-radius: 50%;
  top: 6px;
  left: 6px;
}
/* --- CSS Hamburger (i.e. Menu) Icon --- */
.icon-hamburger {
  display: block; /* Treat the span like a block for layout */
  position: relative; /* Needed for positioning pseudo-elements */
  width: 24px;      /* Width of the icon */
  height: 3px;      /* Thickness of the middle bar */
  background-color: white; /* Color of the middle bar */
  border-radius: 1px; /* Optional: slightly rounded ends */
}

.icon-hamburger::before,
.icon-hamburger::after {
  content: '';       /* Required for pseudo-elements */
  position: absolute; /* Position relative to the span */
  left: 0;
  width: 100%;      /* Same width as the span */
  height: 3px;      /* Thickness of the top/bottom bars */
  background-color: white; /* Color of the top/bottom bars */
  border-radius: 1px; /* Optional: slightly rounded ends */
}

.icon-hamburger::before {
  /* Position the top bar above the middle bar */
  /* Negative value = (bar thickness + desired gap) */
  top: -7px;  /* e.g., 3px thickness + 4px gap */
}

.icon-hamburger::after {
  /* Position the bottom bar below the middle bar */
  /* Negative value = (bar thickness + desired gap) */
  bottom: -7px; /* e.g., 3px thickness + 4px gap */
}
/* Optional: Hover effect for menu items */
#navMenu {
  display: none; /* Start hidden */
}
#navMenu a:hover {
  background-color: #f0f0f0;
}

/* Optional: Adjust icon color easily if needed */
/* You could set the color on the parent 'a' tag and use currentColor */
/*
.icon-hamburger,
.icon-hamburger::before,
.icon-hamburger::after {
  background-color: currentColor;
}
a.menu-link { color: white; }
a.menu-link:hover { color: #ccc; }
*/

/* Make tables responsive but not those in scrollable containers */
table:not(.scrollable-table-container table) {
  width: auto;
  min-width: auto;
  table-layout: auto;
  font-size: 0.9em;
}
    
/* Ensure the table starts from the left edge on mobile */
.scrollable-table-container {
  justify-content: flex-start;
}

/* Adjust form elements but not date inputs */
input:not(#cardate1, #cardate2), 
select, 
textarea {
    max-width: 100%;
    box-sizing: border-box;
}
.reservation-summary {
    flex-direction: column;
    padding: 0.75rem 1rem;
}

.pickup-section,
.dropoff-section {
    margin-bottom: 1rem;
    width: 100%;
}

.change-search {
    margin-top: 0.5rem;
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
}
/* Stack the sections more efficiently */
.section-content {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
    
.section-content .location {
    margin-right: 0.5rem;
}

.info-main-section {
  max-width: 800px;
  margin: 2em auto;
  padding: 0 1.5em;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  /* Optional: subtle shadow for separation */
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* --- Responsive Layouts --- */
/* Tablet layout: some enhancements but still 5-row */
@media (min-width: 768px) {
    #widerdevices {
      display: block;
    }
    /* Adjust field sizes for tablets (Your existing rules) */
    .location-field { flex-grow: 1.2; } /* Give locations more space */
    .date-field input[type="text"],
    .time-field select {
        max-width: none; /* Allow full width */
        font-size: 15px; /* Slightly larger text */
    }

    /* Slightly larger padding for touch targets (Your existing rules) */
    .form-field {
        padding: 12px 15px;
    }

    /* Larger search button for tablets (Your existing rules) */
    .search-btn {
        font-size: 18px;
        padding: 12px;
    }
}

/* Desktop layout: 1-row horizontal layout */
@media (min-width: 1024px) {
    #widerdevices {
        display: block;
    }

    /* Override the mobile stacked layout */
    .form-fields-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border: 3px solid #ff9966;
        border-radius: 8px;
        overflow: hidden;
    }

    /* Reset the default border and margin styles from mobile */
    .form-fields-wrapper > .form-field:not(.hidden),
    .form-fields-wrapper > .datetime-group {
        border: none;
        margin: 0;
        flex-basis: auto;
        border-radius: 0;
    }

    /* Ensure the location field has a right border */
    .location-field {
        flex: 1.5;
        position: relative;
    }
    
    /* Create consistent borders between ALL elements using pseudo-elements */
    .location-field:after,
    #dropofflocations:after,
    .form-field.date-field:after,
    .form-field.time-field:not(:last-child):after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background-color: #ff9966;
        z-index: 10;
    }

    /* Reset datetime groups to flat layout */
    .datetime-group {
        display: flex !important;
        flex-direction: row;
        flex: 2;
        border: none;
        position: relative;
    }

    /* Fix datetime group children to have borders */
    .datetime-group > .form-field {
        border: none;
        position: relative;
    }
    
    /* Set specific flex values for field types */
    .date-field {
        flex: 1.2;
    }
    .time-field {
        flex: 0.8;
    }
    
    /* Ensure date fields have minimum width */
    .form-field input[type="text"] {
        min-width: 110px;
    }

    /* Search button */
    .search-button-field {
        flex: 0.7;
    }
    
    /* Position elements relatively to allow pseudo-elements to work */
    .form-field {
        position: relative;
    }
    
    /* Override any hidden borders */
    .datetime-group > .form-field:last-child:after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background-color: #ff9966;
    }
    
    /* Last element before search button should have a border */
    .datetime-group:last-of-type > .form-field:last-child:after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background-color: #ff9966;
    }
    
    /* Only the search button should not have a right border */
    .search-button-field:after {
        display: none;
    }
}