/*
 * Liveaboard Availability Widget Styles
 * This file makes the widget "theme-aware" by
 * using Elementor's Global CSS Variables.
 */

 :root {
  --font-stack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- 1. Filter UI --- */

.my-availability-widget {
  /* Inherit global styles */
  /* font-family: var(--e-global-typography-text-font-family, sans-serif); */
  font-family: var(--font-stack-system, sans-serif);
}

.my-availability-widget .availability-filters {
  display: flex;
  flex-direction: row;
  font-weight: var(--e-global-typography-text-font-weight, 600);
  margin-bottom: 0; /* Remove margin from original container */
  flex-grow: 1;
  justify-content: center;
}

/* "Pill" Button Group for Itineraries */
.my-availability-widget .filter-group-itinerary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.my-availability-widget .filter-group-itinerary .filter-btn {
  /* Reset button styles */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  
  /* Pill styling */
  border: 1px solid var(--e-global-color-secondary, #54595F);
  background-color: transparent;
  color: var(--e-global-color-secondary, #54595F);
  padding: 8px 16px;
  border-radius: 20px; /* Pill shape */
  transition: all 0.2s ease;
}

.my-availability-widget .filter-group-itinerary .filter-btn:hover {
  background-color: var(--e-global-color-text, #FFFFFF);
  color: #FFFFFF;
  border-color: var(--e-global-color-text, #FFFFFF);
}

.my-availability-widget .filter-group-itinerary .filter-btn.active {
  /* Active state */
  background-color: var(--e-global-color-primary, #8EC1E4);
  color: #FFFFFF;
  border-color: var(--e-global-color-primary, #8EC1E4);
}

/* Style Label */
.my-availability-widget .availability-filters label {
  font-family: var(--font-stack-system, sans-serif);
}

/* Month Filter Navigation Container */
.my-availability-widget .month-filter-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* Previous/Next Buttons */
.my-availability-widget .month-nav-btn {
  /* Display & Sizing */
  display: inline-block;
  padding: 10px 16px; /* Adjust padding as needed */

  /* Style */
  background-color: transparent;
  /* A border color that is visible but subtle (e.g., a lighter grey) */
  border: 1px solid #758692; 
  /* A light, readable text color */
  color: #E0E0E0; 
  border-radius: 4px;

  /* Text */
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;

  /* Effects */
  transition: all 0.2s ease;
}

.my-availability-widget .month-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.05); /*Slight hover effect*/
    border-color: #A0B0BB;
    color: #FFFFFF;
}


/* Styled Dropdown for Months */
.my-availability-widget .availability-filters select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--e-global-color-secondary, #54595F);
  color: var(--e-global-color-text, #FFFFFF);
  font-family: var(--font-stack-system, sans-serif);
  font-size: var(--e-global-typography-text-font-size, 16px);
  padding: 10px 30px 10px 15px;
  border: 1px solid var(--e-global-color-secondary, #54595F);
  border-radius: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  max-width: 300px; /* Optional: constrain width */
}


/* --- 2. Table & Content Styling --- */

/* Table */
.my-availability-widget .availability-table {
  width: 100%;
  border-collapse: collapse;
  border-style: hidden;
  
  /* Force the table to inherit the body font */
  font-family: var(--font-stack-system, sans-serif);
  font-size: var(--e-global-typography-text-font-size, 16px);
  color: var(--e-global-color-text, #FFFFFF);
}

.my-availability-widget .availability-table td {
  padding: 12px 15px;
  text-align: left;
  vertical-align: middle;

  /* Remove existing borders */
  border: none;

  /* Add bottom border */
  border-bottom: 1px solid var(--e-global-color-secondary, #54595F);
}

/* Special rule for the *first* row of cells to add the top border,
  completing the box.
*/
.my-availability-widget .availability-table tr:first-child td {
  border-top: 1px solid var(--e-global-color-secondary, #54595F);
}

/* Table Content */
.my-availability-widget .itinerary-name a {
  color: var(--e-global-color-primary, #8EC1E4);
  font-weight: 600;
  text-decoration: none;
}

.my-availability-widget .itinerary-name a:hover {
  color: var(--e-global-color-text, #FFFFFF);
}

.my-availability-widget .itinerary-duration {
  font-size: 0.9em;
  color: var(--e-global-color-secondary, #555);
  margin-top: 4px;
}

/* The main container within the table cell */
.my-availability-widget .availability-table .date-cell {
  display: flex;
  /* Aligns the month/year stack vertically with the center of the day */
  align-items: center; 
  /* Horizontally centers the content within the cell */
  justify-content: center; 
  /* A light color, matching the mock-up */
  color: #E0E0E0; 
  padding: 16px; /* Adjust padding as needed */
  font-family: Arial, sans-serif; /* Specify a font */
}

/* The large day number */
.my-availability-widget .availability-table .date-cell .day {
  font-size: 48px; /* Large font size for the day */
  font-weight: 700; /* Bold */
  line-height: 1; /* Tightens line height */
  margin-right: 8px; /* Space between the day and the stack */
}

/* The container for the stacked month and year */
.my-availability-widget .date-cell .month-year-stack {
  display: flex;
  flex-direction: column; /* Stacks month over year */
  font-size: 16px; /* Smaller font size for month/year */
  line-height: 1.3; /* Adjust line spacing */
}

/* The month */
.my-availability-widget .date-cell .month {
  font-weight: 600; /* Semi-bold */
}

/* The year */
.my-availability-widget .date-cell .year {
  font-weight: 400; /* Regular weight */
}
/* Ensure you have Font Awesome loaded in your project */

/* Main container for the cell's content */
.my-availability-widget .itinerary-cell {
  padding: 16px; /* Adjust padding as needed */
  font-family: Arial, sans-serif;
  /* Light text color for the dark background */
  color: #E0E0E0; 
  text-align: left;
}

/* 1st line: Itinerary Name */
.my-availability-widget .itinerary-cell .itinerary-name {
  display: block; /* Puts it on its own line */
  font-size: 16px; /* Main title font size */
  font-weight: 600; /* Semi-bold */
  margin-bottom: 10px; /* Space between name and details */
}

/* 2nd line: Details container */
.my-availability-widget .itinerary-cell .itinerary-details {
  display: flex;
  /* Vertically aligns icons and text */
  align-items: center; 
  font-size: 14px;
  /* Slightly more subdued color for the details */
  color: #BDBDBD; 
  white-space: nowrap;
}

/* Styling for all icons in the details line */
.my-availability-widget .itinerary-details i {
  /* Space between icon and its text */
  margin-right: 6px; 
  /* Ensures consistent icon spacing */
  width: 16px; 
  text-align: center;
}

/* Styling for text elements to space them apart */
.my-availability-widget .itinerary-details .duration,
.my-availability-widget .itinerary-details .dives,
.my-availability-widget .itinerary-details .boat-name {
  /* Space after the duration, number of dives and boat name */
  margin-right: 16px; 
}

/* Main container for the price cell */
.my-availability-widget .price-cell {
  display: flex;
  flex-direction: column; /* Stacks "from" above the price */
  align-items: center; /* Centers content horizontally */
  justify-content: center; /* Centers content vertically */
  padding: 16px; /* Adjust padding as needed */
  font-family: Arial, sans-serif;
  color: #E0E0E0; /* Default text color */
  text-align: center;
}

/* Styling for the "from" label */
.my-availability-widget .price-cell .price-label {
  font-size: 14px;
  font-weight: 400;
  color: #BDBDBD; /* Slightly subdued color */
  margin-top: -25px; /* Align with the Inquire Now button */
  margin-bottom: 4px; /* Space between "from" and the price */
}

/* Specific styles for Option 2 */
.my-availability-widget .price-cell .price-value {
  font-size: 32px; /* Large font size for the price */
  font-weight: 700; /* Bold */
  line-height: 1.1; /* Adjust line height */
  /* Background highlight color (adjust to your specific teal/accent color) */
  background-color: #20C2AE; 
  color: #1A2C38; /* Darker text color for contrast on the highlight */
  padding: 4px 10px; /* Padding around the price for the highlight */
  border-radius: 4px; /* Slightly rounded corners for the highlight */
  display: inline-block; /* Ensures padding and background work correctly */
}

.my-availability-widget .inquire-button {
  /* Display & Sizing */
  display: inline-block;
  padding: 12px 24px; /* Generous padding for a good click target */

  /* Style */
  /* Using the existing button color for the gradient */
  background: linear-gradient(to bottom, #5B9CB5, #4A7F96); 
  border: none;
  border-radius: 4px;
  /* Adds a subtle shadow to lift it off the page */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 

  /* Text */
  color: #FFFFFF; /* Bright white text */
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 600; /* Semi-bold */
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  
  /* Effects */
  cursor: pointer;
  transition: all 0.2s ease;
}

.my-availability-widget .inquire-button:hover {
  /* Slightly lighter gradient on hover */
  background: linear-gradient(to bottom, #66A9C4, #558CA3); 
  /* Enhances the shadow on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); 
  /* Lifts the button slightly */
  transform: translateY(-1px); 
}