/* ==========================================================================
   Print Stylesheet
   ========================================================================== */

@media print {

  /* --- 1. HIDE UNWANTED ELEMENTS --- */
  /* Use the .no-print class you already have. !important is often
     needed to override more specific rules from the screen stylesheet. */
  .no-print,
  .no-print * {
    /* Hides the element and all its children */
    display: none !important;
  }

  /* You can also target specific elements by ID or class if you can't add .no-print */
  footer,
  nav,
  aside,
  #right-sidebar,
  .related-proposals,
  .reviews-widget,
  .payment-logos,
  .social-share-buttons,
  .whatsapp-button,
  form,
  button,
  .search-bar {
    display: none !important;
  }


  /* --- 2. RESET LAYOUT FOR PRINT --- */
  /* Make the main content area expand to the full page width */
  body,
  .page-container,
  .main-content,
  #primary {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    float: none !important;
  }


  /* --- 3. OPTIMIZE TYPOGRAPHY AND COLORS --- */
  /* Use a basic, readable font. Points (pt) are a standard unit for print. */
  body {
    font-family: 'Times New Roman', Times, serif;
    /* Serif fonts are often easier to read on paper */
    font-size: 12pt;
    line-height: 1.4;
    background: #fff !important;
    /* Ensure a white background */
    color: #000 !important;
    /* Ensure black text for high contrast */
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #000 !important;
  }



  /* --- 4. HANDLE IMAGES AND LINKS --- */
  /* Prevent images from being too large for the page */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Display the URL next to links so they are useful on paper */
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    font-weight: normal;
    color: #333;
  }

  /* Don't show the URL for internal page anchors or image links */
  a[href^="#"]:after,
  a[href*=".jpg"]:after,
  a[href*=".png"]:after {
    content: "";
  }


  /* --- 5. CONTROL PAGE BREAKS --- */
  /* Avoid breaking content in the middle of an element */
  .itinerary-day,
  .hotel-item,
  .ItineraryAndMap,
  figure {
    break-inside: avoid;
    page-break-inside: avoid;
    /* (Older property) */
  }

  /* Force a page break before major sections like H2 */
  h2 {
    break-before: always;
    page-break-before: always;
    /* (Older property) */
  }

  /** h3 {
    break-before: always;
    page-break-before: always; /* (Older property) */
  /* } 
   */

  /* Avoid a heading being the last thing on a page */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    break-after: avoid;
    page-break-after: avoid;
    /* (Older property) */
  }

  .day_by_day_section_item:not(:first-child) {
    page-break-before: always;
  }

  .not-included-items li.row,
  .included-items li.row {
    list-style-type: none;
    display: flex;
    /* This is the main fix */
    align-items: flex-start;
    /* Aligns icon and text to the top */
    gap: 10px;
    /* Adds space between icon and text */
  }

  /* Vertically align the icon with the first line of text */
  .not-included-items li.row svg,
  .included-items li.row svg {
    margin-top: 0.2em;
    flex-shrink: 0;
    /* Prevents icon from shrinking */
  }

  /* Special for Regular Tour Template */

  /* these 2 are for the legacy basic itinerary and the readmore button. When I print it only displays the "short description". This should fix it */
  .short-description {
    display: none
  }

  .full-description {
    display: block!important;
  }

  .overlay-gradient-ltr {
    width: 100% !important;
    opacity: 40% !important;
    background-color : black;
  }

  .header-content {
    margin-left: 3em !important;
  }

  .map-section {
    width:100% !important;
  }
}