/* Travel Tours – Global Styles and Design Tokens
   This file provides shared CSS variables and light structural rules
   so all plugin styles inherit consistent spacing, colors, and layout.
*/

:root {
  /* Layout container - Controls tour page width globally */
  --tt-tour-page-width: 90%;
  /* Global tour page width setting */
  --tt-max-width: 1400px;
  --tt-gutter: 20px;
  /* Horizontal padding inside containers */

  /* Spacing scale for consistent rhythm */
  --tt-space-1: 8px;
  --tt-space-2: 12px;
  --tt-space-3: 16px;
  --tt-space-4: 20px;
  --tt-space-5: 24px;
  --tt-space-6: 32px;
  --tt-space-7: 40px;
  --tt-section-gap: var(--tt-space-7);

  /* Shape & effects */
  --tt-radius: 12px;
  --tt-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --tt-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* Typography contrast - Scaled down text sizes */
  --tt-text-primary: #2c3e50;
  --tt-text-secondary: #34495e;
  --tt-text-muted: #7f8c8d;
  --tt-bg: #f9f9f9;

  /* Page background - Restore white background for booking form */
  --tt-page-bg: #ffffff;
  --tt-white: #ffffff;

  /* Base font size - scaled down */
  --tt-base-font-size: 14px;
  --tt-heading-scale: 0.9;

  /* Sea Pickle Green Color Palette */
  /* Sea Pickle Green Shades */
  --tt-blue-100: rgba(0, 168, 132, 0.1);
  --tt-blue-300: rgba(0, 168, 132, 0.6);
  --tt-blue-500: #00a884;
  /* Sea Pickle Green Primary */
  --tt-blue-700: #008f72;

  /* Sea Pickle Green Light Variations */
  --tt-skyblue-100: rgba(0, 168, 132, 0.08);
  --tt-skyblue-300: rgba(0, 168, 132, 0.5);
  --tt-skyblue-500: #00a884;
  /* Sea Pickle Green */
  --tt-skyblue-700: #007a63;

  /* Greens */
  --tt-green-100: #e8f5e9;
  --tt-green-300: #81c784;
  --tt-green-500: #4caf50;
  /* Green 💚 */
  --tt-green-700: #388e3c;

  /* Yellows */
  --tt-yellow-100: #fff9c4;
  --tt-yellow-300: #fff176;
  --tt-yellow-500: #ffeb3b;
  /* Yellow 💛 */
  --tt-yellow-700: #fbc02d;

  /* Pinks */
  --tt-pink-100: #fce4ec;
  --tt-pink-300: #f48fb1;
  --tt-pink-500: #e91e63;
  /* Pink 💗 */
  --tt-pink-700: #c2185b;

  /* Primary theme colors for easy reference */
  --tt-primary: var(--tt-blue-500);
  --tt-primary-hover: var(--tt-blue-700);
  --tt-accent: var(--tt-skyblue-500);
  --tt-success: var(--tt-green-500);
  --tt-warning: var(--tt-yellow-500);
  --tt-danger: var(--tt-pink-500);
}

/* Shared container sizing for single tour pages - Uses global width settings */
body.single-tour .tt-tour-container {
  width: var(--tt-tour-page-width);
  /* Inherits from global setting */
  max-width: var(--tt-max-width);
  margin: 40px auto;
  padding-left: var(--tt-gutter);
  padding-right: var(--tt-gutter);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

/* Section rhythm and consistent spacing */
body.single-tour .tt-tour-header,
body.single-tour .tt-tour-section,
body.single-tour .tt-tour-info-section,
body.single-tour .tt-tour-overview-section,
body.single-tour .tt-tour-highlights,
body.single-tour .tt-tour-itinerary,
body.single-tour .tt-tour-includes {
  margin-bottom: var(--tt-section-gap);
}

/* Subtle design with removed borders */
body.single-tour .tt-tour-description>*:first-child {
  background: transparent;
 /* padding: var(--tt-space-3);*/
  border-radius: var(--tt-radius);
  position: relative;
  transition: all 0.3s ease;
  border: none;
}

body.single-tour .tt-tour-description>*:first-child:hover {
  background: rgba(33, 150, 243, 0.05);
}

body.single-tour .tt-tour-overview-section {
  background: transparent;
  border-radius: var(--tt-radius);
  position: relative;
  transition: all 0.3s ease;
  border: none;
}

/* Subtle highlights list without heavy styling */
body.single-tour .tt-highlights-list li {
  padding: var(--tt-space-2) var(--tt-space-4) var(--tt-space-2) var(--tt-space-8);
  margin-bottom: var(--tt-space-2);
  position: relative;
  transition: all 0.3s ease;
  background: transparent;
}

body.single-tour .tt-highlights-list li:hover {
  /* Removed background color change on hover */
  background: transparent;
}

/* Very subtle accent dots */
body.single-tour .tt-highlights-list li::before {
  content: '';
  position: absolute;
  left: var(--tt-space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transition: all 0.3s ease;
  background: var(--tt-blue-300);
  opacity: 0.6;
}

body.single-tour .tt-highlights-list li:hover::before {
  /* Kept the dot enhancement on hover */
  opacity: 1;
  background: var(--tt-blue-500);
}

/* Calendar with vibrant color accents */
.ui-datepicker {
  border-radius: var(--tt-radius);
  background: var(--tt-page-bg);
}

.date-available a.ui-state-default {
  background: transparent;
  color: var(--tt-green-700);
  border-color: var(--tt-green-500);
  transition: all 0.3s ease;
}

.date-available a.ui-state-default:hover {
  background: var(--tt-green-500);
  color: var(--tt-white);
  transform: scale(1.1);
}

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight {
  background: var(--tt-blue-500);
  color: var(--tt-white);
  border-color: var(--tt-blue-700);
  font-weight: bold;
}

/* Utility: Minimal cards without backgrounds */
.tt-card {
  background: transparent;
  border-radius: var(--tt-radius);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.tt-card:hover {
  background: rgba(33, 150, 243, 0.05);
}

/* Additional utility classes for new color scheme */
.tt-bg-blue {
  background: var(--tt-blue-100);
}

.tt-bg-skyblue {
  background: var(--tt-skyblue-100);
}

.tt-bg-green {
  background: var(--tt-green-100);
}

.tt-bg-yellow {
  background: var(--tt-yellow-100);
}

.tt-bg-pink {
  background: var(--tt-pink-100);
}

.tt-text-blue {
  color: var(--tt-blue-500);
}

.tt-text-skyblue {
  color: var(--tt-skyblue-500);
}

.tt-text-green {
  color: var(--tt-green-500);
}

.tt-text-yellow {
  color: var(--tt-yellow-700);
}

.tt-text-pink {
  color: var(--tt-pink-500);
}

/* Sea Pickle Green button variations */
.tt-btn-primary {
  background: var(--tt-blue-500);
  color: white;
  border: none;
  border-radius: 0;
  padding: 10px 20px;
  font-weight: 500;
  font-size: var(--tt-base-font-size);
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: none;
}

.tt-btn-primary:hover {
  background: var(--tt-blue-700);
  box-shadow: none;
}

.tt-btn-success {
  background: linear-gradient(135deg, var(--tt-green-500), var(--tt-green-700));
  color: var(--tt-white);
}

.tt-btn-success:hover {
  background: linear-gradient(135deg, var(--tt-green-700), var(--tt-green-500));
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

/* Text scaling for all elements */
body {
  font-size: var(--tt-base-font-size);
}

h1 { font-size: calc(var(--tt-base-font-size) * 2 * var(--tt-heading-scale)); }
h2 { font-size: calc(var(--tt-base-font-size) * 1.6 * var(--tt-heading-scale)); }
h3 { font-size: calc(var(--tt-base-font-size) * 1.4 * var(--tt-heading-scale)); }
h4 { font-size: calc(var(--tt-base-font-size) * 1.2 * var(--tt-heading-scale)); }
h5, h6 { font-size: calc(var(--tt-base-font-size) * var(--tt-heading-scale)); }

/* Responsive adjustments */
@media (max-width: 768px) {
  :root {
    --tt-tour-page-width: 100%;
    --tt-max-width: 100%;
    --tt-gutter: 15px;
    --tt-base-font-size: 13px;
  }
  
  body.single-tour .tt-tour-container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--tt-gutter);
    padding-right: var(--tt-gutter);
    margin: 20px auto;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  :root {
    --tt-tour-page-width: 100%;
    --tt-max-width: 100%;
    --tt-gutter: 10px;
    --tt-base-font-size: 12px;
  }
  
  body.single-tour .tt-tour-container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--tt-gutter);
    padding-right: var(--tt-gutter);
    margin: 15px auto;
    box-sizing: border-box;
  }
}