<style>
		
			.enter-url-input {
			  width: 80%;        /* Default width for larger screens */
			  max-width: 600px;  /* Set a max width for larger screens */
			  padding: 5px;
			  font-size: 16px;
			  border: 1px solid var(--surface-d);
			  border-radius: 4px;
			  box-sizing: border-box;
			  background: var(--surface-a);
			  color: var(--text-color);
			}
			
			@media (max-width: 600px) {
			  .enter-url-input {
			    width: 100%;     /* Full width for screens smaller than 600px */
			  }
			}
.responsive-video iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Maintains the aspect ratio */
    max-width: 560px;     /* Optional: Max width for larger screens */
}

			.overflow {
				word-wrap: break-word;
				hyphens: auto;
			}

			#canvas {
			    width: 100%; /* Make the canvas width 100% of its parent container */
			    height: 100%; /* Make the canvas height 100% of its parent container */
			    display: block; /* Remove any default padding/margin */
			}

			.sectionBeginning {
				font-size: 2.5rem;
				position: relative;
				top: 4px;
			}

			.ui-toolbar-group-left {
				flex: 1;
			}
			
			.ui-toolbar-group-right {
			    margin-left: auto;
			}

			.extended-line-height {
				line-height: 30px;
			}

			/* Define styles for highlighted sections */
	        .highlighted-section {
	            display: inline;
	            position: relative;
	            cursor: pointer;

	            padding: 2px; /* Optional: Add some padding for better visual appearance */
	        }	

		.color-legend {
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }
        
		.color-label {
			margin-top: 5px;
			color: var(--text-color);
			font-weight: 600;
		}
        .color-box {
            width: 30px;
            height: 30px;
            margin-right: 10px;
            border: 1px solid var(--surface-d); /* Use surface variable */
        }	        

.tooltip {
    visibility: hidden;
    background-color: var(--surface-f); /* Use surface variable */
    color: var(--text-color); /* Use text color variable */
    text-align: center;
    border-radius: 12px; /* Rounded corners */
    font-size: 14px; /* Slightly larger font for readability */
    font-family: "Arial", sans-serif; /* Clean, modern font */
    padding: 10px 15px; /* Spacious padding */
    position: fixed; /* Positioned relative to the viewport */
    z-index: 10; /* Above other elements */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s, transform 0.3s; /* Smooth fade-in and slide */
    pointer-events: none; /* Ignore mouse events */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Adjusted shadow for dark mode */
    transform: translateY(-5px); /* Slightly above cursor initially */
    max-width: 400px; /* Limit width for long text */
    line-height: 1.5; /* Improve text readability */
    word-wrap: break-word; /* Handle longer text gracefully */
    border: 1px solid var(--surface-d);
}
  
.tooltip.visible {
    visibility: visible; /* Show tooltip */
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Reset position for a smooth slide-in */
}

		</style>

<style>
  /* ===== Page chrome ===== */
  .launchpad-header { background: var(--progress-gradient-rev); color: #fff; }

  /* ===== PrimeFaces button mapping (keeps your existing classes) ===== */
  .ui-button-info,
  .p-button.p-button-info {
    background: var(--mb-sapphire) !important; border: none !important; color: #fff !important;
  }
  .ui-button-info:hover,
  .p-button.p-button-info:hover { filter: brightness(1.05) !important; }

  .ui-button-success,
  .p-button.p-button-success {
    background: var(--mb-aqua) !important; border: none !important; color: #fff !important;
  }
  .ui-button-success:hover,
  .p-button.p-button-success:hover { filter: brightness(1.05) !important; }

  .ui-button-secondary,
  .p-button.p-button-secondary {
    background: var(--mb-indigo) !important; border: none !important; color: #fff !important;
  }
  .ui-button-secondary:hover,
  .p-button.p-button-secondary:hover { filter: brightness(1.07) !important; }

  .ui-button-primary,
  .p-button.p-button-primary {
    background: var(--mb-sapphire) !important; border: none !important; color: #fff !important;
  }

  /* "Cart" badge -> brand success */
  .cart-badge {
    background: var(--mb-aqua) !important; color: #fff !important;
  }

  /* ===== Accordions use brand gradients ===== */
  .ui-accordion .ui-accordion-header { background: var(--progress-gradient-rev) !important; color:#fff !important; }
  .ui-accordion .ui-accordion-header.ui-state-active { background: var(--progress-gradient) !important; }
  .reverse-accordion .ui-accordion-header { background: var(--progress-gradient) !important; }
  .reverse-accordion .ui-accordion-header .ui-accordion-header-link { background: transparent !important; }

  /* Step panel headers use forward gradient for contrast */
  .step-panel .ui-accordion-header {
    background: var(--progress-gradient) !important; color:#fff !important; border: none !important;
  }
  .step-panel .ui-accordion-header.ui-state-active { border-radius: 6px 6px 0 0; }

  /* ===== Inputs / focus states aligned to Sapphire ===== */
  .enter-url-input,
  #queryInput,
  #urlInput,
  #notify-email,
  #code,
  #form\\:url,
  input[type="text"],
  input[type="email"] {
    border: 1px solid var(--surface-d);
    background: var(--surface-a);
    color: var(--text-color);
  }
  .enter-url-input:focus,
  #queryInput:focus,
  #urlInput:focus,
  #notify-email:focus,
  #code:focus,
  input[type="text"]:focus,
  input[type="email"]:focus {
    outline: none;
    border-color: var(--mb-sapphire);
    box-shadow: 0 0 0 3px rgba(18,82,168,.15);
  }

  /* ===== Tooltip brand tune ===== */
  .tooltip {
    background-color: var(--surface-f) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--surface-d) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
  }

  /* ===== Legends (override your inline colors without markup changes) =====
     Trick: use nth-of-type + nth-last-of-type to target "exactly N boxes" cases.
  */

  /* Labels flanking the 5-box legends (Low/High) remain readable */
  .color-legend .color-label { color: var(--text-color); font-weight: 600; }

  /* ===== Info banners / messages (soft brand wash) ===== */
  .ui-messages-info,
  .p-message.p-message-info {
    background: rgba(18,82,168,.08) !important; 
    color: var(--text-color) !important; 
    border: 1px solid rgba(18,82,168,.25) !important;
  }
  .ui-messages-error,
  .p-message.p-message-error {
    background: rgba(232,62,34,.08) !important; 
    color: var(--text-color) !important; 
    border: 1px solid rgba(232,62,34,.25) !important;
  }

  /* ===== Selected table rows: readable highlight (Aqua wash + accent bar) ===== */
  body .ui-datatable .ui-datatable-data > tr.ui-state-highlight,
  body .p-datatable .p-datatable-tbody > tr.p-highlight {
    background: rgba(0,169,155,.12) !important;
    color: var(--text-color) !important;
    box-shadow: inset 3px 0 0 0 var(--mb-aqua);
  }
  body .ui-datatable .ui-datatable-data > tr.ui-state-highlight a,
  body .p-datatable .p-datatable-tbody > tr.p-highlight a { color: var(--text-color) !important; }

  /* ===== Card headings tone ===== */
  .card h2 { color: var(--text-color); }

</style>