/* This CSS is specifically designed to override a HubSpot theme.
          Each rule is prefixed with the unique ID '#travel-card-recommender-app'
          to increase its specificity. '!important' is used on every property
          to ensure they are not overridden by the theme's default styles.
         */

        .font-playfair-semibold {
            font-family: 'Playfair Display', serif;
            font-weight: 600;
        }

        #travel-card-recommender-app {
            font-family: 'Inter', sans-serif !important;
            background-color: #F1F4F5 !important; 
        }
        
        #travel-card-recommender-app #update-notification-floater.visible {
            opacity: 1 !important;
            transform: translateX(-50%) translateY(0) !important;
        }
        #travel-card-recommender-app #update-prefs-floater.visible {
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        /* --- Main Layout & Containers --- */
        #travel-card-recommender-app .container {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
            padding-top: 1rem !important;
            padding-bottom: 2rem !important;
        }

        @media (min-width: 768px) {
            #travel-card-recommender-app .container {
                padding-left: 2rem !important;
                padding-right: 2rem !important;
                padding-top: 1rem !important;
                padding-bottom: 3rem !important;
            }
        }

        #travel-card-recommender-app .input-container {
            background-color: #ffffff !important;
            padding: 2rem !important;
            border-radius: 1rem !important;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
            border: 1px solid #e5e7eb !important;
        }

        /* --- Header Styling --- */
        #travel-card-recommender-app header {
            text-align: center !important;
            margin-bottom: 1rem !important;
        }

        #travel-card-recommender-app header h1 {
            font-size: 2.25rem !important; /* text-4xl */
            line-height: 2.5rem !important;
            font-weight: 700 !important; /* font-bold */
            color: #1a202c !important;
            margin-bottom: 0.5rem !important; /* mb-2 */
        }

        #travel-card-recommender-app header p {
            font-size: 1.125rem !important; /* text-lg */
            line-height: 2rem !important;
            color: #4a5568 !important; /* text-gray-600 */
         /* max-width: 42rem !important; /* max-w-2xl */
            margin-left: auto !important;
            margin-right: auto !important;
        }

        #travel-card-recommender-app .analysis-section ul ul li {
            margin: 0.2rem !important;
        }

        #travel-card-recommender-app .analysis-section ul li {
            margin: 0.5rem !important;
        }

        @media (min-width: 768px) {
            #travel-card-recommender-app header h1 {
                font-size: 3rem !important; /* md:text-5xl */
                line-height: 1 !important;
            }
        }

        /* --- Form & Input Styling --- */
        #travel-card-recommender-app #recommendation-form {
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            background: transparent !important;
        }

        #travel-card-recommender-app #input-section {
            display: grid !important;
            grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
            gap: 1.5rem !important;
        }

        #travel-card-recommender-app #recommendation-form label {
            display: block !important;
            font-size: 0.875rem !important;
            line-height: 1.25rem !important;
            font-weight: 500 !important;
            color: #374151 !important;
            margin-bottom: 0.25rem !important;
        }

        /* Rule for text inputs (NO arrow) */
        #travel-card-recommender-app #recommendation-form input[type="text"] {
            width: 100% !important;
            padding: 0.75rem !important;
            background-color: #f9fafb !important;
            border: 1px solid #d1d5db !important;
            border-radius: 0.375rem !important;
        }

        /* Rule specifically for select dropdowns (WITH arrow) */
        #travel-card-recommender-app #recommendation-form select {
            width: 100% !important;
            padding: 0.75rem !important;
            background-color: #f9fafb !important;
            border: 1px solid #d1d5db !important;
            border-radius: 0.375rem !important;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
            background-position: right 0.5rem center !important;
            background-repeat: no-repeat !important;
            background-size: 1.5em 1.5em !important;
            padding-right: 2.5rem !important;
        }

        #travel-card-recommender-app #airport-results {
            position: absolute !important;
            z-index: 10 !important;
            width: 100% !important;
            background-color: white !important;
            border: 1px solid #d1d5db !important;
            border-radius: 0.375rem !important;
            margin-top: 0.25rem !important;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
            max-height: 15rem !important;
            overflow-y: auto !important;
        }

        #travel-card-recommender-app #airport-results li {
            padding: 0.75rem !important;
            cursor: pointer !important;
        }

        #travel-card-recommender-app #airport-results li:hover {
            background-color: #f3f4f6 !important;
        }

        #travel-card-recommender-app #recommendation-form input:focus,
        #travel-card-recommender-app #recommendation-form select:focus {
            outline: 2px solid transparent !important;
            outline-offset: 2px !important;
            --tw-ring-color: #7599B3 !important;
            box-shadow: 0 0 0 2px var(--tw-ring-color) !important;
            border-color: #7599B3 !important;
        }

        #travel-card-recommender-app #recommendation-form input[type="checkbox"] {
            height: 1rem !important;
            width: 1rem !important;
            color: #7599B3 !important;
            border-color: #d1d5db !important;
            border-radius: 0.25rem !important;
        }

        #travel-card-recommender-app #advanced-toggle,
        #travel-card-recommender-app #show-more-toggle {
            color: #7599B3 !important;
            font-weight: 600 !important;
        }

        #travel-card-recommender-app #advanced-toggle:hover,
        #travel-card-recommender-app #show-more-toggle:hover {
            text-decoration: underline !important;
            font-family: inherit !important;
        }

        /* --- Results Section Styling --- */
        #travel-card-recommender-app #results-section h2 {
            font-size: 1.5rem !important;
            line-height: 2rem !important;
            font-weight: 700 !important;
            text-align: center !important;
            margin-bottom: 1rem !important;
        }

        @media (min-width: 768px) {
            #travel-card-recommender-app #results-section h2 {
                font-size: 1.875rem !important;
                line-height: 2.25rem !important;
            }
        }

        #travel-card-recommender-app .card-recommendation {
            background-color: #ffffff !important;
            padding: 1.5rem !important;
            border-radius: 1rem !important;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
            border: 1px solid #e5e7eb !important;
            display: flex !important;
            flex-direction: column !important;
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
            opacity: 0 !important;
            transform: translateY(10px) !important;
        }

        #travel-card-recommender-app .card-recommendation.visible {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        #travel-card-recommender-app .benefit-icon {
            font-size: 1.5rem !important;
            line-height: 1 !important;
            margin-right: 0.75rem !important;
            color: #4a5568 !important; 
        }

        #travel-card-recommender-app #advanced-options-container,
        #travel-card-recommender-app #card-details-container {
            max-height: 0 !important;
            overflow: hidden !important;
            transition: max-height 0.5s ease-in-out !important;
        }

        #travel-card-recommender-app #advanced-options-container.open,
        #travel-card-recommender-app #card-details-container.open {
            max-height: 1000px !important;
        }

        /* --- Generic Button State Override for HubSpot --- */
        #travel-card-recommender-app button:hover,
        #travel-card-recommender-app button:focus,
        #travel-card-recommender-app button:active,
        #travel-card-recommender-app .button:hover,
        #travel-card-recommender-app .button:focus,
        #travel-card-recommender-app .button:active,
        #travel-card-recommender-app .hs-button:hover,
        #travel-card-recommender-app .hs-button:focus,
        #travel-card-recommender-app .hs-button:active {
            /* 1. Override HubSpot's CSS variables for these states */
            --hsf-button--hover__background-color: transparent !important;
            --hsf-button--focus__background-color: transparent !important;
            --hsf-button--active__background-color: transparent !important;

            /* 2. Reset standard CSS properties as a fallback */
            background-color: transparent !important;
            border-color: transparent !important; /* Prevents borders from appearing */
            box-shadow: none !important; /* Removes focus rings or shadows */
            outline: none !important; /* Removes the default browser focus outline */
            fill: transparent !important;
            color: #6B9AB6 !important;
            font-weight: 600 !important;
            font-family: inherit !important;
        }

        /* --- Apply Now Button State Override --- */
        #travel-card-recommender-app a[onclick^="handleApplyClick"],
        #travel-card-recommender-app a[onclick^="handleApplyClick"]:hover,
        #travel-card-recommender-app a[onclick^="handleApplyClick"]:focus {
            color: white !important;
            font-weight: 700 !important;
            font-family: inherit !important;
        }


        #travel-card-recommender-app ul ul,
        #travel-card-recommender-app ol ul,
        #travel-card-recommender-app ul ol,
        #travel-card-recommender-app ol ol {
          margin: 0.25rem 0 !important;
        }

        #update-prefs-floater {
          /* Calculate the space on the right of the 1000px container and add 1rem (16px) of padding */
          right: calc((100vw - 1033px) / 2 + 1rem);
        }