@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

        /* ---------------------------------
           GLOBAL & BASE STYLES
           --------------------------------- */
        
         .tt-my-new-price-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            padding-bottom: 15px;
        }

         .tt-my-new-price-box h2 {
            font-size: 32px;
            font-weight: 700;
            background: linear-gradient(90deg, #1c6dd0, #2dd4bf);
            -webkit-background-clip: text;
            color: transparent;
            margin: 0;
        }

        .tt-my-new-price-box h2 p {
            font-size: 14px;
            color: #666;
            font-weight: 400;
            display: block;
            margin-top: -5px;
        }       

        .tt-my-climate-container {
            width: 100%;
            margin: 0px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            margin-bottom:15px;
        }

        .tt-my-climate-container h2 {
            color: #555;
            font-size: 22px;
            margin-bottom: 0px;
            margin-top:0px;
        }

        .tt-my-description {
            color: #666;
            font-size: 12px;
        }

        /* ---------------------------------
           TAB STYLING
           --------------------------------- */
        .tt-my-tab-controls {
            display: flex;
            border-bottom: 3px solid #e0e0e0;
            margin-bottom: 5px;
        }

        .tt-my-tab-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            color: #888;
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
            margin-bottom: -3px;
            flex-grow: 1;
            text-align: center;
            white-space: nowrap; /* Prevent button text wrapping */
        }
        .tt-my-tab-btn:hover { color:#00796B; }
        .tt-my-tab-btn.active {
            color:#00796B;
            border-bottom-color: #FFC107;
            background-color:#f9fff9;
        }

        .tt-my-tab-panel {
            background:#f9fff9;
            padding: 10px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
        }

        .tt-my-tab-panel h3 {
            color: #555;
            font-size: 20px;
            margin-top: 0;
            margin-bottom: 5px;
            border-bottom: 1px dashed #e0e0e0;
            padding-bottom: 5px;
        }

        .tt-my-data-row {
            display: flex;
        }

        .tt-my-label {
            font-weight: 600;
            color: #444;
        }
        .tt-my-value { 
            flex-grow: 1; 
            color: #333; 
            font-size:12px;
            margin: 2px auto;
            margin-left: 25px;
        }

        .tt-my-values{
          position: relative;        /* IMPORTANT: required for ::after overlay */
          max-height: 60px;         /* visible height */
          overflow: hidden;          /* hide extra text */
          display: block;
          color:  #333; 
          font-size:12px;
          text-align: justify;
          margin: 0px;
      }

      .tt-my-values::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100px;              /* gradient height */
          background: linear-gradient(
              to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1)
          );
          pointer-events: none;
      }
        .tt-my-value.tt-my-temp { color: #ff4757; font-weight: 700; font-size:12px;}

        
        /* ---------------------------------
           MODAL STYLING (Responsive)
           --------------------------------- */
        .tt-my-custom-modal{
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.7); /* Slightly darker overlay */
            display:none;
            align-items:center;
            justify-content:center;
            z-index:9999;
            padding: 10px;
            overflow-y: auto; /* Scrollable if content is tall */
        }

        .tt-my-modal-content{
            width: 90%; /* Responsive width */
            max-width: 600px; /* Max width for desktop */
            background:#fff;
            border-radius:12px;
            padding:20px;
            animation:tt-my-fadeIn .3s ease;
            box-shadow:0 10px 30px rgba(0,0,0,0.3);
            position:relative;
        }
 
 

/* Each item becomes a vertical card */
    .tt-my-it-item {
    display: flex;
    flex-direction: column;
    min-width: 250px;      /* width of each card */
    background: #f9f9ff;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #d7e2f9;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

 
        .tt-my-modal-close{
            position:absolute;
            top:-4px;
            right:9px;
            font-size:30px; /* Slightly larger close button */
            cursor:pointer;
            color:#444;
        }

        @keyframes tt-my-fadeIn{
            from{ transform:scale(0.9); opacity:0; }
            to{ transform:scale(1); opacity:1; }
        }

        /* ---------------------------------
           ITINERARY CARD STYLING (Modal Content)
           --------------------------------- */
        .tt-my-new-card {
            width: 100%;
            padding: 10px;
        }

        /* --- Header/Price --- */
        .tt-my-new-price-box {
            margin-bottom: 20px;
            padding-bottom: 12px;
        }
        .tt-my-new-price-box h2 { font-size: 28px; }

        /* --- Itinerary Timeline --- */
         
        .tt-my-new-it-timeline {
            display: grid;
            grid-template-columns: 40px 1fr;
            gap: 10px;
            max-width:500px;
            overflow-x: auto;      /* horizontal scroll */
            overflow-y: auto;      /* vertical scroll (already present) */
            max-height: 55vh;
        }
        
        .tt-my-it-item {
             display: contents; /* Allows children to be laid out by the grid */
        }

        .tt-my-it-dot {
            width: 12px;
            height: 12px;
            background: #1c6dd0;
            border-radius: 50%;
            align-self: start;
            margin-top: 7px;
            margin-left: 15px; /* Center dot */
            box-shadow: 0 0 0 3px #e6ecff, 0 0 0 5px #1c6dd0;
        }
         
        

        .tt-my-it-content {
            padding-bottom: 20px;
            position: relative;
        }

        .tt-my-it-content strong {
            display: block;
            color: #1c6dd0;
            font-size: 16px;
        }

        .tt-my-it-content p {
            margin: 2px 0 0 0;
            color: #333;
            font-size: 14px;
        }

        /* --- Collapsible Hidden Section --- */
        .tt-my-new-it-hidden {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            display: contents; 
        }

        /* --- Expansion Button --- */
        .tt-my-expand-btn {
            grid-column: 1 / span 2;
            margin: 5px 0 15px 0;
            padding-top: 10px; /* Spacing above the button */
            border: none;
            cursor: pointer;
            background: none;
            color: #1c6dd0;
            font-weight: 600;
            font-size: 14px;
            text-align: center;
            border-top: 1px dashed rgba(28, 109, 208, 0.3);
        }

       
        
        /* ---------------------------------
           MEDIA QUERIES (Mobile Adjustments)
           --------------------------------- */
        @media (max-width: 500px) {
            /* Tab Content */
            .tt-my-modal-content{
            width: 100%; /* Responsive width */
            position:relative;
            
        }
            .tt-my-label {
                margin-bottom: 4px;
                color: #555;
            }
            
            /* General */
            .tt-my-climate-container { padding: 15px; }
            .tt-my-tab-btn { font-size: 14px;}
            .tt-my-value { color: var( #333); font-size:12px;}
        .tt-my-value.tt-my-temp { color: #ff4757; font-weight: 700; font-size:12px;}
        }