/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
:root {
    --primary-blue: rgb(14 165 233);
    --primary-color-solid: rgb(10 94 140);
    --secondary-blue: rgb(2 132 199);
    --tertiary-blue: rgb(3 105 161);
    --quaternary-blue: rgb(7 89 133);
    --input-focus-bg: rgba(0, 0, 0, 1);
    --body-color: rgb(14 23 38);
    --warning-color: rgb(245 158 11);
    --spa-border-color: rgb(233 98 25);
    --spa-border-color-solid: rgb(198 70 8);
    --error-color: rgb(220 38 38);
    --info-color: rgb(59 130 246);
    --pp-border-color: #0066f5;
    --primary-color: rgb(14 165 233 / 50%);
    --deep-water: rgb(14 165 233 / 12%);
    --shallow-water: rgb(125 211 252 / 92%);
    --cursor-color: #00BFFF;
    --ripple-highlight: rgb(255 255 255 / 14%);
    --success-color: rgb(34 197 94 / 20%);
    --success-color-solid: rgb(34 197 94);
    --glass-effect: rgba(255, 255, 255, 0.05);
    --glass-effect-strong: rgba(255, 255, 255, 0.1);
    --glass-effect-subtle: rgba(255, 255, 255, 0.02);
    --form-bg: rgba(0, 0, 0, 0.8); /* Slightly off-black for form backgrounds */
    --overlay-dark: rgb(0 0 0 / 50%);
    --text-color: rgb(255 255 255);
    --text-muted: rgb(170 170 170);
    --input-bg: var(--input-focus-bg);
    --link-color: var(--primary-blue);
    
    /* Form-specific colors (for white backgrounds) */
    --form-text-dark: rgb(51 51 51); /* #333333 */
    --form-text-gray: rgb(102 102 102); /* #666666 */
    --form-bg-white: rgb(255 255 255); /* #ffffff */
    --form-bg-light: rgb(248 249 250); /* #f8f9fa */
    --form-bg-dark: rgba(1, 45, 100, 0.5);
    --form-border-blue:var(--pp-border-color); 
    --form-border-light: rgb(204 204 204); /* #cccccc */
    --form-border-gray: rgb(153 153 153); /* #999999 */
    --form-text-disabled: rgb(176 176 176); /* #b0b0b0 */
    --form-bg-selected: rgb(230 242 255); /* #e6f2ff */
    --success-text-dark: rgb(21 87 36); /* #155724 */
    --error-text-dark: rgb(114 28 36); /* #721c24 */
    --error-color-solid: rgb(220 53 69); /* #dc3545 */

    --cta-blue-1: #013A7A;
    --cta-blue-2: #0157AB;

    --page-gradient: linear-gradient(135deg, rgba(14, 23, 38, 1) 0%, rgba(11, 18, 32, .1) 100%);
    --water-gradient: linear-gradient(var(--primary-blue) 8%, var(--deep-water) 18%);
    --body-gradient: linear-gradient(var(--body-color) 10%, var(--bg-color) 90%);
    --primary-gradient: linear-gradient(var(--cta-blue-2) 10%, var(--cta-blue-1) 90%);
    --secondary-gradient: linear-gradient(var(--cta-blue-1) 10%, var(--cta-blue-2) 90%);

    --shadow-content: 0 4px 8px rgb(0 119 190 / 30%), 0 0 2px rgb(255 255 255 / 10%);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 10%);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 12%);
    --shadow-lg: 0 4px 6px rgb(0 0 0 / 15%);
    --shadow-water: 0 4px 15px rgb(0 119 190 / 30%);
    --blur-radius: 20px;
    --spread-radius: 20px;
    --backdrop-blur: 10px;
    --box-shadow: 0 4px 15px 2px rgba(0, 119, 190, 0.3);

    /* Navigation glow effects - reusable box-shadow patterns */
    --glow-blue: 0 0 20px rgba(14, 165, 233, 0.6),
                 0 0 40px rgba(14, 165, 233, 0.4),
                 0 0 60px rgba(14, 165, 233, 0.2);
    --glow-red: 0 0 20px rgba(220, 38, 38, 0.6),
                0 0 40px rgba(220, 38, 38, 0.4),
                0 0 60px rgba(220, 38, 38, 0.2);
    --glow-green: 0 0 20px rgba(34, 197, 94, 0.6),
                  0 0 40px rgba(34, 197, 94, 0.4),
                  0 0 60px rgba(34, 197, 94, 0.2);
  
    --logo-size: clamp(120px, 12vw, 200px);
    --nav-btn-height: 60px;
  
    --border-style: solid;
    --border-width: clamp(1px, 1.5px, 2px);  
    --border-color: var(--pp-border-color);
    --border-color-solid: var(--primary-color-solid);
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 16px;
    --border-radius-full: 50%;
    --border-std: var(--border-width) var(--border-style) var(--border-color-solid);

    --spacing-unit: clamp(0.4rem, 1vw, 0.6rem);
    --spacing-xs: calc(var(--spacing-unit) * 0.25);
    --spacing-sm: calc(var(--spacing-unit) * 0.5);
    --spacing-md: var(--spacing-unit);
    --spacing-lg: calc(var(--spacing-unit) * 2);
    --spacing-xl: calc(var(--spacing-unit) * 3);
    --spacing-2xl: calc(var(--spacing-unit) * 4);
    --spacing-3xl: calc(var(--spacing-unit) * 5);
    --spacing-4xl: calc(var(--spacing-unit) * 10);

    --nav-btn-padding: clamp(6.4px, 0.6vw, 9.6px) clamp(12.8px, 1.2vw, 19.2px);
    --nav-btn-font-size: clamp(11.2px, 1vw, 16.8px);

	--font-base: "Inter", system-ui, sans-serif;
	--font-heading: var(--font-base);
	--font-body: var(--font-base);
	--font-ui: var(--font-base);
    --font-size-base: clamp(0.875rem, 0.9rem + 0.1vw, 1rem);
    --font-size-md: clamp(0.9375rem, 0.95rem + 0.1vw, 1.05rem);
    --font-size-lg: clamp(1rem, 1rem + 0.1vw, 1.1rem);
    --font-size-xl: clamp(1.125rem, 1.125rem + 0.1vw, 1.25rem);
    --font-size-2xl: clamp(1.25rem, 1.25rem + 0.1vw, 1.375rem);
    --font-size-3xl: clamp(1.5rem, 1.5rem + 0.1vw, 1.625rem);
    --font-size-4xl: clamp(1.875rem, 1.875rem + 0.1vw, 2rem);
    --font-size-5xl: clamp(2.25rem, 2.25rem + 0.1vw, 2.375rem);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-base: 1.5;
    --line-height-lg: 1.6;

    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --button-hover-transform: translateY(-2px);
    --outline-std: 2px solid var(--primary-blue);
    --text-shadow: 
        0 0 8px rgba(0, 0, 0, 0.8),
        0 0 4px rgba(0, 0, 0, 0.6),
        0.08em 0.08em 0.1em rgba(0, 0, 0, 0.9);

    --z-body: -10;
    --z-zero: 0;
    --z-canvas: 1;
    --z-base: 2;
    --z-header: 10;
    --z-nav: 20;
    --z-dropdown: 30;
    --z-modal: 40;
    --z-toast: 50;

    /* Unified dropdown styling */
    --dropdown-bg: var(--bg-color);
    --dropdown-hover-bg: var(--primary-gradient);
    --dropdown-selected-bg: var(--primary-blue);
    --dropdown-text: #212529;

    --link-hover-transform: scale(1.03);
    --link-hover-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);

    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

/* ==========================================================================
   Base Styles & Reset
   ========================================================================== */






body {
    background-color: var(--bg-color);
	font-family: var(--font-body);
    background-image: url('../images/pagepics/bg-full.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;
    min-height: 100vh;
 width: 100%;
 margin: 0 auto;

}

/* ==========================================================================
   UTILITY CLASSES - For common inline styles
   ========================================================================== */



img {
    border-radius: var(--border-radius);
}

/* Exclude logos and already-circular images from border-radius */
img[src*="logo"],
.welcome-image-1 img,
.welcome-image-2 img,
.provider-content p img,
.partner-logo img {
    border-radius: var(--border-radius-full); /* Keep circular for logos */
}

img,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

.table-container {
    overflow-x: auto;
    margin: var(--spacing-unit) 0;
}

/* Info box for notices and highlights */
.info-box {
    background: var(--glass-effect-subtle);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    margin: var(--spacing-unit);
}

.info-box p {
    margin: 0;
}

.info-box p:not(:first-child) {
    margin-top: var(--spacing-sm);
    color: var(--text-muted);
}

table th,
table td {
    padding: var(--spacing-sm);
    border: var(--border-std);
    border-color: var(--primary-blue);
    text-align: left;
}

table th {
    background: var(--glass-effect-subtle);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-blue);
}

table tr:nth-child(even) {
    background: var(--glass-effect-subtle);
}




/* Text alignment */
.text-center {
    text-align: center;
}

/* Border radius */
.rounded-full {
    border-radius: var(--border-radius-full);
}

.rounded {
    border-radius: var(--border-radius);
}

/* Spacing utilities */
.mb-1 {
    margin-bottom: var(--spacing-unit);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

/* Utility classes for text colors */
.text-muted {
    color: var(--text-muted);
}

.required-indicator {
    color: var(--error-color);
}

/* Utility class for white-space */
.nowrap {
    white-space: nowrap;
}

/* Utility class for centered content with top margin */
.centered-content {
    margin-top: var(--spacing-lg);
    text-align: center;
}

/* Display utilities */
.hidden {
    display: none;
}

/* Color utilities */

/* Flex utilities */
.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

/* Photo upload button style */
li {
    list-style-type: none;
}




/* Form fieldset and legend styling (mobile-first) */
fieldset {
    border: 1px solid var(--form-border-blue);
    border-radius: var(--border-radius);
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    background: var(--form-bg-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    overflow: visible; /* Allow expanded selects to overflow */
}

legend {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--form-text-dark);
    padding: 0 8px;
    background: var(--form-bg-white);
    border-radius: var(--border-radius-sm);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    position: relative;
    color: var(--text-color);
    min-height: 100%;
    max-width: 100%;
    height: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    list-style-type: none;
}

/* Hide scrollbar for Safari */
html::-webkit-scrollbar {
    display: none;
}

input:not([type="hidden"]):not(.success):not(.error):focus-visible,
select:not(.success):not(.error):focus-visible,
textarea:not(.success):not(.error):focus-visible {
    outline: var(--outline-std);
    outline-offset: 2px;
    border-color: var(--shallow-water);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
}



.contact-form .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);  
    justify-content: center;
}



/* Collapsible info-card notes (mobile-first) - expanded by default */
.info-card-note.collapsible .aside-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-unit);
    width: 100%;
    min-height: 44px; /* Minimum touch target size */
    padding: var(--spacing-unit);
    border-radius: var(--border-radius);
    transition: background-color var(--transition-fast), box-shadow var(--transition-smooth), transform var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; /* Prevent text selection on click */
    user-select: none;
    background: var(--primary-gradient);
    text-align: center;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Add spacing after emoji in aside-title */
.aside-title > span:first-child {
    margin-right: var(--spacing-sm);
}

.info-card-note.collapsible .aside-title:hover,
.info-card-note.collapsible .aside-title:focus-visible {
    background-color: var(--primary-gradient);
    box-shadow: 0 4px var(--blur-radius) var(--spread-radius) rgba(0, 119, 190, 0.3);
    transform: var(--button-hover-transform);
    outline: var(--outline-std);
    outline-offset: 2px;
}
.info-card-note.collapsible .aside-title:active {
    background-color: var(--glass-effect);
}
.info-card-note.collapsible .toggle-indicator {
    display: none; /* Hidden by default, shown with JS */
    width: 0.6em;
    height: 0.6em;
    border-right: 2px solid var(--shallow-water);
    border-bottom: 2px solid var(--shallow-water);
    transform: rotate(45deg);
    transition: transform var(--transition-fast) var(--transition-smooth);
}

/* Show toggle indicator when JS is available */
html.js-enabled .info-card-note.collapsible .toggle-indicator {
    display: inline-block;
}
.info-card-note.collapsible .aside-title[aria-expanded="false"] .toggle-indicator {
    transform: rotate(-45deg);
}
/* Default: hide content (collapsed) - user must expand to see */
.info-card-note.collapsible > :not(.aside-title):not(.product-grid) {
    display: none;
}
/* Show content only when explicitly expanded */
.info-card-note.collapsible.expanded > :not(.aside-title):not(.product-grid) {
    display: block;
}
/* Restore original display for service-category when expanded (it uses flex, not block) */
.info-card-note.collapsible.expanded > .service-category {
    display: flex;
}
/* Restore original display for master-container when expanded (it uses flex, not block) */
.info-card-note.collapsible.expanded > .master-container {
    display: flex;
}

/* ============================================================================
   NO-JS FALLBACK - Show all content when JavaScript is disabled
   ============================================================================ */

/* Show all collapsible content when JS is disabled */
html.no-js .info-card-note.collapsible > :not(.aside-title):not(.product-grid) {
    display: block !important;
}

html.no-js .info-card-note.collapsible > .service-category {
    display: flex !important;
}

html.no-js .info-card-note.collapsible > .master-container {
    display: flex !important;
}

/* Hide toggle indicators when JS is disabled */
html.no-js .toggle-indicator {
    display: none !important;
}

/* Make collapsible headers look like regular headings when JS is disabled */
html.no-js .info-card-note.collapsible .aside-title {
    cursor: default;
    pointer-events: none;
    background: transparent;
}

html.no-js .info-card-note.collapsible .aside-title:hover,
html.no-js .info-card-note.collapsible .aside-title:focus-visible {
    background: transparent;
    box-shadow: none;
    transform: none;
}

/* Scroll offset for anchor links to account for sticky header */
#contact-form-section,
#make-payment-section {
    scroll-margin-top: 80px;
}


.zip-col { flex: 0 0 120px; }
.zip-input { width: 120px; min-width: 120px; }


.form-error {
    color: var(--error-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Status message styles */
#status-messages {
    position: relative;
    z-index: 100; /* Higher than sticky nav (--z-nav: 20) */
}

.status-message {
    padding: var(--spacing-unit);
    margin: var(--spacing-unit);
    border-radius: var(--border-radius-lg);
    text-align: center;
    border-width: var(--border-width);
    border-style: var(--border-style);
    box-shadow: var(--shadow-md);
    animation: fadeIn 0.3s ease-in;
    position: relative;
    z-index: 101; /* Higher than status-messages container */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.status-message.success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-color: var(--success-color-solid);
    color: var(--success-color-solid);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3), var(--shadow-md);
}

.status-message.error {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.05) 100%);
    border-color: var(--error-color);
    color: var(--error-color);
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.3), var(--shadow-md);
}

.status-message h2 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.status-message strong {
    font-weight: var(--font-weight-bold);
    display: block;
    margin-bottom: var(--spacing-sm);
}

.contact-form:has(+ #status-messages .status-message.success:not([style*="display: none"])) {
    opacity: 0.6;
    pointer-events: none;
}

.contact-form.submitting .submit-button {
    opacity: 0.7;
    cursor: not-allowed;
    position: relative;
}

.contact-form.submitting .submit-button::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: var(--border-radius-full);
    animation: spin 0.8s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}



/* Keep provider list items on one line */
.master-container ul li {
    white-space: nowrap;
}

/* Ensure links in provider list stay inline */
.master-container ul li a {
    display: inline;
    white-space: nowrap;
}


/* ==========================================================================
   Typography
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    padding: var(--spacing-unit);
    text-align: center;
}

h1 {
    font-size: clamp(2rem, 2.2rem, 2.5rem);
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: clamp(1.5rem, 1.75rem, 1.9rem);
    font-weight: var(--font-weight-bold);
}

h3 {
    font-size: clamp(1.1rem, 1.25rem, 1.4rem);
    font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   Links
   ========================================================================== */
a {
    text-decoration: none;
    transition: all var(--transition-normal) var(--transition-smooth);
    color: var(--primary-blue);
    -webkit-tap-highlight-color: transparent;
}

a:visited {
    color: var(--primary-blue); /* Same as unvisited links for consistent nav */
}

a:hover,
a:focus-visible {
    color: var(--cursor-color);
    text-decoration: underline;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
button {
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 0;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.btn-effect {
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    border-radius: var(--border-radius);
}

.btn-effect:hover,
.btn-effect:focus-visible {
    background: var(--primary-blue);
    color: var(--text-color);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.6),
                0 0 40px rgba(14, 165, 233, 0.4),
                0 0 60px rgba(14, 165, 233, 0.2);
    transition: all var(--transition-fast) var(--transition-smooth);
    border-color: var(--text-color);
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
}

.cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: var(--z-nav);
    width: 100%;
    max-width: 400px;
    border: var(--border-std);
    border-radius: var(--border-radius);
    transition: all var(--transition-normal) var(--transition-smooth);
    font-size: var(--nav-btn-font-size);
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow); /* Subtle shadow for better visibility */
    height: var(--nav-btn-height);
    padding: var(--nav-btn-padding);
    margin: var(--spacing-unit) auto;
    color: var(--text-color);
    text-decoration: none;
    will-change: transform;
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
    background: var(--primary-gradient);
    border-color: var(--text-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.cta-button:hover,
.cta-button:focus-visible {
    background: var(--secondary-gradient);
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.45), 0 3px 8px rgba(0, 0, 0, 0.25);
}

.cta-button:active {
    transform: scale(0.98);
}



/* ==========================================================================
   Form Container
   ========================================================================== */
   .form-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    gap: var(--spacing-lg);
    background: var(--form-bg-light);
    border: 1px solid var(--form-border-blue);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: all var(--transition-normal) var(--transition-smooth);
    overflow: visible;
    z-index: 100;
    /* Override site's default white text for user-friendly form styling */
    color: var(--form-text-dark);
}

/* All text elements inside form containers use dark colors */
.form-container p,
.form-container span:not(.toggle-indicator),
.form-container div:not(.status-message):not(input):not(textarea):not(select),
.form-container li,
.form-container ol,
.form-container ul,
.form-container strong,
.form-container em {
    color: var(--form-text-dark);
}

/* Headings inside form containers */
.form-container h1,
.form-container h2,
.form-container h3,
.form-container h4,
.form-container h5,
.form-container h6 {
    color: var(--form-text-dark);
}

/* Muted/helper text - slightly lighter but still dark */
.form-container .form-helper,
.form-container .form-instruction,
.form-container .payment-header p {
    color: var(--form-text-gray);
    font-size: 0.875rem;
}

/* Payment instructions */
.form-container .payment-instructions,
.form-container .payment-instructions p {
    color: var(--form-text-dark);
}

/* Payment note */
.form-container .payment-note,
.form-container .payment-note p,
.form-container .payment-note li,
.form-container .payment-note ol {
    color: var(--form-text-dark);
}

/* Status messages inside form containers */
.form-container .status-message {
    color: var(--form-text-dark);
}

.form-container .status-message.success {
    color: var(--success-text-dark);
}

.form-container .status-message.error {
    color: var(--error-text-dark);
}

/* Error messages */
.form-container .form-error {
    color: var(--error-color-solid);
}

/* Maintenance Mode - Mobile-first approach */
/* Hide maintenance message by default */
.maintenance-message {
    display: none;
}

/* Show maintenance message when maintenance mode is enabled */
.maintenance-mode .maintenance-message {
    display: block;
    text-align: center;
    padding: var(--spacing-xl);
    background: var(--glass-effect);
    border: 2px solid var(--primary-blue);
    border-radius: var(--border-radius);
    margin: var(--spacing-lg) 0;
    font-family: var(--font-body);
    width: 100%;
}

/* Hide forms when maintenance mode is enabled */
.maintenance-mode .form-container {
    display: none;
}

/* Hide the form collapsible when maintenance mode is enabled */
.maintenance-mode #form-collapsible {
    display: none;
    z-index: -1;
}

.maintenance-mode .maintenance-message h3 {
    color: var(--primary-blue);
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-body);
}

.maintenance-mode .maintenance-message p {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
    font-family: var(--font-body);
}

.maintenance-mode .maintenance-message .maintenance-contact {
    color: var(--dropdown-text);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    font-family: var(--font-body);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */
label {
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px; /* Standard spacing above inputs */
    font-size: 14px; /* Standard label size */
    display: block;
}

/* Labels inside form containers - dark text */
.form-container label {
    color: var(--form-text-dark);
}

/* Label with normal font weight */
.label-normal {
    font-weight: var(--font-weight-normal);
}

/* ==========================================================================
   Floating Label Pattern (PayPal-style)
   ========================================================================== */

/* Floating Label Container */
.form-container .floating-label-group {
    position: relative;
    margin-bottom: var(--spacing-md);
}

/* Input styling for floating labels - extra top padding for label space */
.form-container .floating-label-group input[type="text"],
.form-container .floating-label-group input[type="email"],
.form-container .floating-label-group input[type="tel"],
.form-container .floating-label-group input[type="password"],
.form-container .floating-label-group input[type="number"],
.form-container .floating-label-group input[type="url"],
.form-container .floating-label-group input[type="date"],
.form-container .floating-label-group textarea {
    padding-top: 20px; /* Extra top padding for floating label */
    padding-bottom: 8px;
}

/* Floating label - starts inside input */
.form-container .floating-label-group label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--form-border-gray);
    font-size: 16px;
    font-weight: var(--font-weight-normal);
    pointer-events: none;
    transition: all var(--transition-fast) var(--transition-smooth);
    background: var(--form-bg-white);
    padding: 0 4px;
    margin: 0;
    z-index: 1;
    text-align: left;
}

/* Textareas: keep label top-left (not vertically centered like single-line inputs) */
.form-container .floating-label-group textarea ~ label {
    top: 12px;
    transform: none;
}

/* Label floats up when input is focused or has value */
.form-container .floating-label-group input:focus ~ label,
.form-container .floating-label-group input:not(:placeholder-shown) ~ label,
.form-container .floating-label-group textarea:focus ~ label,
.form-container .floating-label-group textarea:not(:placeholder-shown) ~ label {
    top: 0;
    left: 12px;
    transform: translateY(-50%) scale(0.85);
    color: var(--pp-border-color); /* PayPal blue */
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
}

/* Focus border color - PayPal blue for floating label inputs */
.form-container .floating-label-group input:focus,
.form-container .floating-label-group textarea:focus {
    border-color: var(--pp-border-color); /* PayPal blue */
    box-shadow: 0 0 0 3px rgba(0, 102, 245, 0.1);
}

/* Ensure label doesn't interfere with input interaction */
.form-container .floating-label-group input::placeholder,
.form-container .floating-label-group textarea::placeholder {
    color: transparent; /* Hide placeholder when using floating label */
}

/* Show placeholder when input is focused and empty (for accessibility) */
.form-container .floating-label-group input:focus::placeholder,
.form-container .floating-label-group textarea:focus::placeholder {
    color: var(--form-border-light);
}

/* Base input styles - Standard form design (scoped to form containers) */
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="tel"],
.form-container input[type="password"],
.form-container input[type="number"],
.form-container input[type="url"],
.form-container input[type="date"],
.form-container textarea,
.form-container select {
    background-color: var(--form-bg-white);
    padding: 12px;
    border: 1px solid var(--form-border-light);
    border-radius: var(--border-radius);
    color: var(--form-text-dark);
    font-size: 16px; /* 16px prevents iOS zoom-in */
    font-family: var(--font-body);
    transition: border-color var(--transition-fast) var(--transition-smooth), box-shadow var(--transition-fast) var(--transition-smooth);
    width: 100%;
    min-height: 44px; /* Minimum touch target size */
    text-align: left; /* Left-aligned text (standard) */
    margin: 0;
    box-sizing: border-box;
}

/* Textarea specific styles - standard form design (scoped to form containers) */
.form-container textarea {
    min-height: 100px; /* Minimum height for textareas */
    resize: vertical; /* Allow vertical resizing only */
    line-height: 1.5; /* Comfortable line spacing */
}

/* Payment description boxes: keep typed text + floating label top-left
   (parent .form-group uses text-align:center for other form layouts) */
.form-container .floating-label-group:has(textarea),
.form-container .payment-textarea {
    text-align: left;
}

/* Re-apply after base textarea padding so floating labels keep top room */
.form-container .floating-label-group textarea,
.form-container .payment-textarea {
    padding: 20px 12px 8px;
    text-align: left;
}

/* Filled inputs - stay white (standard form behavior) - scoped to form containers */
.form-container input:not(:placeholder-shown),
.form-container textarea:not(:placeholder-shown) {
    background-color: var(--form-bg-white);
}

/* Input focus state - PayPal blue border on focus (scoped to form containers) */
/* Focus state must override error/success states */
.form-container input:focus,
.form-container textarea:focus,
.form-container select:focus,
.form-container input.error:focus,
.form-container input.success:focus,
.form-container textarea.error:focus,
.form-container textarea.success:focus,
.form-container select.error:focus,
.form-container select.success:focus {
    background-color: var(--form-bg-white);
    border-color: var(--pp-border-color) !important; /* PayPal blue border on focus - override error/success */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 3px rgba(0, 102, 245, 0.1) !important; /* Subtle PayPal blue glow - override error/success */
}

/* Override browser's autofill - keep white background (scoped to form containers) */
.form-container input:-webkit-autofill,
.form-container input:-webkit-autofill:hover,
.form-container input:-webkit-autofill:focus,
.form-container input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--form-bg-white) inset;
    -webkit-text-fill-color: var(--form-text-dark);
    background-color: var(--form-bg-white);
    transition: background-color 9999s ease-in-out 0s;
}


/* Focus states consolidated above - using standard blue focus */

/* Select specific - scoped to form containers */
.form-container select {
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: calc(var(--spacing-unit) * 3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23333333' d='M5.5 7l4.5 4.5L14.5 7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    color-scheme: light; /* Light scheme for white background */
    position: relative;
    pointer-events: auto; /* Ensure select is always interactive */
}

/* Remove appearance: none on focus to allow native dropdown to work */
.form-container select:focus {
    -moz-appearance: menulist;
    -webkit-appearance: menulist;
    appearance: menulist;
    background-image: none; /* Remove custom arrow when native dropdown is active */
}

/* Select hover state - override global styles */
.form-container select:hover {
    border-color: var(--form-border-blue);
    background-color: var(--form-bg-white);
    color: var(--form-text-dark);
}

/* Select options (dropdown items) - override global styles */
.form-container select option {
    color: var(--form-text-dark);
    background-color: var(--form-bg-white);
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 16px;
}

/* Disabled/placeholder options */
.form-container select option[disabled] {
    color: var(--form-text-gray);
    background-color: var(--form-bg-white);
}

/* Selected option */
.form-container select option:checked {
    background-color: var(--form-bg-selected);
    color: var(--form-text-dark);
}

/* When select is expanded (size > 1), ensure it appears above info-card-note elements */
select[size]:not([size="1"]) {
    z-index: 2000;
    position: relative; /* Ensure z-index works */
    min-height: auto; /* Remove min-height constraint when expanded */
    height: auto; /* Allow natural height based on size */
    overflow: visible; /* Force visible overflow to show all options */
    overflow-y: visible; /* Force visible overflow to show all options */
    overflow-x: visible; /* Force visible overflow to show all options */
    /* Remove appearance: none to allow native listbox rendering */
    -webkit-appearance: listbox;
    -moz-appearance: listbox;
    appearance: listbox;
    background-image: none; /* Remove dropdown arrow when expanded */
    display: block; /* Ensure it's displayed as block */
    /* Ensure options are visible */
    opacity: 1;
    visibility: visible;
}

/* Only show invalid state after user interaction - handled by JS */
select:invalid:not(:focus):not([data-touched="true"]) {
    color: var(--text-color);
}

/* Ensure placeholder text is visible in urgency select when invalid */
select#urgency:invalid:not(:focus):not([data-touched="true"]) {
    color: var(--text-color);
    opacity: 1;
}

select:hover {
    border-color: var(--text-color);
}

/* Select options */
select option {
    color: var(--dropdown-text); 
    background-color: var(--form-bg-light);
    border: 1px solid var(--primary-blue);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 16px;
}

select option[disabled] {
    color: var(--form-text-disabled);
}

/* Make placeholder visible in urgency select */
select#urgency option[value=""][disabled] {
    color: var(--form-text-gray);
    opacity: 1;
}

/* Show placeholder text when no option is selected (invalid state) */
select#urgency :invalid:not(:focus):not([data-touched="true"]) {
    color: var(--form-text-gray);
}

/* Urgency option colors - simple text coloring */
select#urgency option[value="planning"] {
    color: rgb(34, 197, 94); /* Green */
    font-weight: bold;
}

select#urgency option[value="flexible"] {
    color: rgb(163, 230, 53); /* Light green */
    font-weight: bold;
}

select#urgency option[value="normal"] {
    color: rgb(245, 158, 11); /* Yellow/Orange */
    font-weight: bold;
}

select#urgency option[value="urgent"] {
    color: rgb(249, 115, 22); /* Orange */
    font-weight: bold;
}

select#urgency option[value="emergency"] {
    color: rgb(220, 38, 38); /* Red */
    font-weight: bold;
}

/* Start date option colors - timing-based coloring */

select option:hover,
select option:focus {
    background: var(--dropdown-hover-bg);
    color: var(--dropdown-text);
}

select option:checked {
    background: var(--dropdown-selected-bg);
    font-weight: 600;
} 
/* ==========================================================================
   Interactive Elements (dropdowns)
   ========================================================================== */

/* Custom Select Component (with directional control) */
.cs-select {
    position: relative;
    width: 100%;
}

.cs-select.is-hidden-native select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cs-trigger {
    width: 100%;
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 3) var(--spacing-unit) var(--spacing-unit);
    background-color: var(--ripple-highlight);
    color: var(--text-color);
    border: 1px solid var(--primary-blue);
    border-radius: var(--border-radius);
    font-size: 16px;
    font-family: var(--font-body);
    text-align: center;
    cursor: pointer;
    min-height: 44px;
    box-sizing: border-box;
    transition: all var(--transition-normal) var(--transition-smooth);
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M5.5 7l4.5 4.5L14.5 7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
                pointer-events: auto; /* Ensure trigger is always interactive */
}

/* Custom select trigger inside form containers - user-friendly styling */
.form-container .cs-trigger {
    background-color: var(--form-bg-white);
    color: var(--form-text-dark);
    border: 1px solid var(--form-border-light);
    text-align: left; /* Left-aligned text */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23333333' d='M5.5 7l4.5 4.5L14.5 7z'/%3E%3C/svg%3E");
}

.form-container .cs-trigger:hover {
    background-color: var(--form-bg-white);
    border-color: var(--form-border-blue);
    color: var(--form-text-dark);
}

.form-container .cs-trigger:focus {
    outline: 2px solid var(--form-border-blue);
    outline-offset: 2px;
    background-color: var(--form-bg-white);
    border-color: var(--form-border-blue);
    color: var(--form-text-dark);
}

.cs-trigger:hover {
    background-color: var(--body-color);
    border-color: var(--text-color);
}

.cs-trigger:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.15);
}

.cs-options {
    position: absolute;
    left: 0;
    right: 0;
    background-color: var(--dropdown-bg, var(--body-color));
    border: 1px solid var(--primary-blue);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    margin-top: 4px;
}

/* Custom select options inside form containers - user-friendly styling */
.form-container .cs-options {
    background-color: var(--form-bg-white);
    border: 1px solid var(--form-border-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.cs-select.open .cs-options {
    display: block;
}

/* Open downward (default) */
.cs-select.open-down .cs-options {
    top: 100%;
    bottom: auto;
}

/* Open upward */
.cs-select.open-up .cs-options {
    bottom: 100%;
    top: auto;
    margin-top: 0;
    margin-bottom: 4px;
}

.cs-option {
    padding: 12px 16px;
    color: var(--dropdown-text, var(--text-color));
    font-family: var(--font-body);
    font-size: 16px;
    cursor: pointer;
    transition: all var(--transition-normal) var(--transition-smooth);
    border-bottom: 1px solid rgba(14, 165, 233, 0.2);
}

/* Custom select options inside form containers - user-friendly styling */
.form-container .cs-option {
    color: var(--form-text-dark);
    border-bottom: 1px solid #e0e0e0; /* Light gray border */
}

.form-container .cs-option:hover {
    background: var(--form-bg-selected);
    color: var(--form-text-dark);
}

.form-container .cs-option[aria-selected="true"] {
    background: #e6f2ff; /* Light blue background for selected */
    color: var(--form-text-dark);
    font-weight: 600;
}

.cs-option:last-child {
    border-bottom: none;
}

.cs-option:hover {
    background: var(--dropdown-hover-bg, rgba(14, 165, 233, 0.2));
    color: var(--dropdown-text, var(--text-color));
}

.cs-option[aria-selected="true"] {
    background: var(--dropdown-selected-bg, rgba(14, 165, 233, 0.3));
    font-weight: 600;
}

.cs-option[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cs-option[aria-disabled="true"]:hover {
    background: transparent;
}


/* ==========================================================================
   State Classes (error, success, loading)
   ========================================================================== */
/* Error state - only show after user interaction (scoped to form containers) */
.form-container .form-select.error,
.form-container input.error,
.form-container input[type="text"].error,
.form-container input[type="email"].error,
.form-container input[type="tel"].error,
.form-container input[type="password"].error,
.form-container input[type="number"].error,
.form-container input[type="url"].error,
.form-container textarea.error,
.form-container select.error {
    border: 1px solid #dc3545; /* Standard red for errors */
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1); /* Subtle red glow */
}

/* Hide invalid state on page load and on focus - only show after user interaction (scoped to form containers) */
.form-container input:invalid:not([data-touched="true"]):not(:focus),
.form-container textarea:invalid:not([data-touched="true"]):not(:focus),
.form-container select:invalid:not([data-touched="true"]):not(:focus) {
    border-color: var(--form-border-light);
    box-shadow: none;
}

/* Required textarea - show red border when empty, even before touch (scoped to form containers) */
.form-container textarea:required:invalid,
.form-container textarea:required:not(:placeholder-shown):invalid {
    border: 1px solid #dc3545 !important; /* Standard red for invalid */
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Specifically handle optional fields with patterns - they should not show as invalid when empty */
.form-container input:not([required]):invalid:not([data-touched="true"]):placeholder-shown,
.form-container input:not([required])[pattern]:invalid:not([data-touched="true"])[value=""] {
    border-color: var(--form-border-light);
    box-shadow: none;
}


/* Success state (scoped to form containers) */
.form-container .form-select.success,
.form-container input.success,
.form-container input[type="text"].success,
.form-container input[type="email"].success,
.form-container input[type="tel"].success,
.form-container input[type="password"].success,
.form-container input[type="number"].success,
.form-container input[type="url"].success,
.form-container textarea.success,
.form-container select.success {
    border: 1px solid #28a745 !important; /* Standard green for success */
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1); /* Subtle green glow */
    padding-right: calc(var(--spacing-unit) * 3.5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2328a745'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
}

/* For select elements, overlay checkmark on existing dropdown arrow */
.form-container select.success {
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2328a745'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23333333' d='M5.5 7l4.5 4.5L14.5 7z'/%3E%3C/svg%3E");
    background-position: right 12px center, right 36px center;
    background-size: 20px 20px, 16px 16px;
    padding-right: calc(var(--spacing-unit) * 5);
}


/* General form helper text */
.form-helper { 
    margin: var(--spacing-unit);
}

.form-group {
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Extra spacing for submit button to account for select dropdown padding */
.form-group:has(#submit-button) {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.form-row {
    gap: var(--spacing-sm);
}


/* On mobile, keep City and ZIP side-by-side inside service-location */
.contact-form fieldset.service-location .form-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.radio-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-unit);
    padding: var(--spacing-unit);
    padding-left: var(--spacing-xl);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast) var(--transition-smooth);
    width: 100%;
}

.radio-option:hover {
    border-color: var(--shallow-water);
}

.radio-option input[type="radio"] {
    margin-top: 2px;
    margin-right: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    accent-color: var(--primary-blue);
    cursor: pointer;
}

.radio-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    flex: 1;
}

.radio-content strong {
    font-size: var(--font-size-base);
}

.radio-content small {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.radio-option.urgent {
    border-color: var(--warning-color);
}

.radio-option:has(input[type="radio"]:checked) {
    border-color: var(--shallow-water);
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3);
}

.radio-option.urgent:has(input[type="radio"]:checked) {
    border-color: var(--warning-color);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

.radio-option:focus-within {
    outline: var(--outline-std);
    outline-offset: 2px;
}




.submit-btn,
.submit-button {
    background: var(--form-border-blue);
    color: var(--form-bg-white);
    border: none;
    border-radius: var(--border-radius);
    display: block;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* 44px+ for mobile touch targets */
    padding: 12px 24px;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 16px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--transition-smooth), box-shadow var(--transition-fast) var(--transition-smooth);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-transform: none; /* No uppercase - standard form button */
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

#submit-button {
    display: block;
}

.submit-btn:hover,
.submit-button:hover,
.submit-btn:focus-visible,
.submit-button:focus-visible {
    background: var(--tertiary-blue);
    color: var(--form-bg-white);
    box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3); /* Subtle hover shadow */
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.submit-btn:active,
.submit-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.submit-btn:disabled,
.submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.honeypot,
.honeypot-label {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

/* Ensure honeypot fields stay hidden even inside form-container */
.form-container .honeypot,
.form-container .honeypot-label {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* ==========================================================================
   Layout Components
   ========================================================================== */


.master-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    background: var(--glass-effect);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    transition: all var(--transition-normal) var(--transition-smooth);
    position: relative;
    overflow: hidden;
    padding: var(--spacing-unit);
    box-sizing: border-box;
    min-width: 0;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-unit);
}


/* Policy page styles (mobile-first) */
.policy-header {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.policy-header h1 {
    margin-bottom: var(--spacing-sm);
}

.policy-section {
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.policy-section h2 {
    margin-bottom: var(--spacing-unit);
    color: var(--primary-blue);
}

.policy-section p {
    margin-bottom: var(--spacing-unit);
    line-height: var(--line-height-lg);
}

.policy-section ul {
    margin: var(--spacing-unit) 0;
    padding-left: var(--spacing-lg);
}

.policy-section li {
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-lg);
}

/* Product manuals page alignment overrides */
.manuals-page .master-container {
    align-items: flex-start;
    text-align: left;
}

.manuals-page .policy-header,
.manuals-page .policy-section {
    width: 100%;
    text-align: left;
}

.manuals-page .master-container ul li,
.manuals-page .master-container ul li a {
    white-space: normal;
}

.contact-info {
    background: var(--glass-effect-subtle);
    border: var(--border-std);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}


.layout-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    font-size: clamp(0.9rem, 1rem, 1.1rem);
    margin: 0 auto;
    justify-content: flex-start;
    position: relative;
    top: 0;
    left: 0;
    padding: var(--spacing-unit);
    border: var(--border-std);
    border-radius: var(--border-radius);
    border-color: var(--primary-blue);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* margin-top: var(--spacing-unit); */
    padding: var(--spacing-unit);
    /* max-height: 100vh; */
}

.main-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    /* padding: var(--spacing-unit); */
    padding-bottom: 4px;
}





/* Header styles moved to css/header.css */

/* ==========================================================================
   Content Sections
   ========================================================================== */



   .welcome-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-unit);
    width: 100%;
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    background: rgba(1, 45, 100, 0.8); /* More transparent - was 0.5 */
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin: var(--spacing-unit);

}

.welcome-text {
    flex: 1;
    text-align: center;
    padding: var(--spacing-unit);
    margin: auto;
    border: none;
    border-radius: var(--border-radius);
    box-shadow: none;
    width: 100%;
    font-size: var(--font-size-base);
    line-height: 1.5;
    height: 100%;
}

.welcome-text h1 {
    text-shadow: var(--text-shadow);
    text-transform: uppercase;
    margin-bottom: var(--spacing-unit);
    font-weight: var(--font-weight-bold);
    /* Mobile: smaller font to save space in upper fold */
    font-size: clamp(1.25rem, 4vw, 2rem);
    line-height: 1.2;
}

.welcome-text p {
    /* Mobile: smaller font to save space */
    font-size: clamp(0.875rem, 3vw, 1rem);
    line-height: 1.4;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

/* Mobile: hide welcome images */
.welcome-image-1,
.welcome-image-2 {
    display: none;
}

.emoji-desktop {
    display: none;
}

/* Index page master-container - different background image */
.index-page .master-container:has(> .info-card:nth-child(2)) {
    background: var(--page-background-subtle);
    background-image: url(../images/pagepics/builtinspa.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    text-align: center;
}

/* Add background image to last info-card on spa-delivery-removal page */
.spa-delivery-page .spa-delivery-last-card {
    background-image: url(../images/gallerypics/localproviderlogos/santanas-spas-delivery-pic.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: var(--spacing-lg);
    position: relative;
}

/* Ensure text is readable over background */
.spa-delivery-page .spa-delivery-last-card p,
.spa-delivery-page .spa-delivery-last-card a {
    position: relative;
    z-index: 1;
}

/* Service category - mobile-first styles */
.service-category {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius);
    transition: all var(--transition-normal) var(--transition-smooth);
    background: var(--page-background-subtle);
}

/* Vineyard background only on local-providers page - info-card-note sections only */
.local-providers-page .info-card-note .service-category {
    background-image: url(../images/gallerypics/localproviderlogos/vineyardhills.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

}

/* Admin vendor contacts — card layout like local providers; no extra page background */
body.vendor-contacts-page .policy-header,
body.vendor-contacts-page .policy-section {
    width: 100%;
    text-align: left;
}

body.vendor-contacts-page .vendor-contacts-card-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    max-width: 100%;
}

body.vendor-contacts-page .vendor-contacts-address {
    white-space: pre-line;
}

body.vendor-contacts-page .provider-content > .welcome-image-1 .vendor-contact-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    font-weight: 700;
    font-size: clamp(1rem, 3.5vw, 1.35rem);
    color: var(--primary-blue);
    background: var(--glass-effect);
    border: var(--border-std);
    border-color: var(--primary-blue);
    box-sizing: border-box;
    text-decoration: none;
}

body.vendor-contacts-page .provider-content > .welcome-image-1 a:hover .vendor-contact-initials {
    background: var(--glass-effect-subtle);
}

/* Product images container - mobile: stack cards vertically */
.product-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--spacing-unit);
    align-items: center;
    width: 100%;
}

/* Product card - individual image with description */
.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-unit);
    background: var(--glass-effect-subtle);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    transition: all var(--transition-normal) var(--transition-smooth);
    width: 100%;
    max-height: 600px;
    overflow: hidden;
}

.product-card:hover {
    transform: var(--button-hover-transform);
    box-shadow: var(--box-shadow);
    border-color: var(--shallow-water);
}

.product-card img {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--border-radius);
    object-fit: contain;
    object-position: center;
}

/* Standalone product images with border */
img.product-card {
    border: var(--border-std);
    border-color: var(--primary-blue);
    display: block;
    margin: var(--spacing-unit) auto;
}

/* Override for logos in product cards - keep them circular */
.product-card img[src*="logo"],
.product-card img[src*="raypaklogo"] {
    border-radius: var(--border-radius-full);
}

.product-card .product-name {
    font-weight: var(--font-weight-semibold);
    text-align: center;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 100%;
    overflow: hidden;
}


.product-card a {
    text-align: center;
    display: block;
    transition: all var(--transition-normal) var(--transition-smooth);
    border-radius: var(--border-radius);
    color: var(--primary-blue);
    text-decoration: underline;
    max-width: 100%;
    overflow: hidden;
}

.product-card p:not(.product-name) a {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.product-card a:hover,
.product-card a:focus-visible {
    transform: scale(1.02);
}

.product-card a:hover img,
.product-card a:focus-visible img {
    filter: brightness(1.1);
   
}

/* Brand information links after product sections */
.brand-info-link {
    text-align: center;
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-unit);
}

.brand-info-link a {
    display: inline-block;
    color: var(--text-color);
    text-decoration: underline;
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.1rem, 1.3rem, 1.4rem);
    padding: var(--spacing-sm) var(--spacing-unit);
    border-radius: var(--border-radius);
    background-color: rgba(0, 102, 153, 0.05);
    border: 1px solid rgba(0, 102, 153, 0.2);
    text-shadow: var(--text-shadow);
    box-shadow: 0 2px 8px rgba(0, 102, 153, 0.15), 0 0 12px rgba(0, 102, 153, 0.1);
    transition: all var(--transition-normal) var(--transition-smooth);
}

.brand-info-link a:hover,
.brand-info-link a:focus {
    color: var(--shallow-water);
    background-color: rgba(0, 102, 153, 0.1);
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(0, 102, 153, 0.25), 0 0 16px rgba(0, 102, 153, 0.2);
    transform: var(--button-hover-transform);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Manufacturer Links Container */
.manufacturer-links-container {
    margin: var(--spacing-lg) auto;
    padding: var(--spacing-unit);
    text-align: center;
    width: 60%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.manufacturer-links-container .brand-info-link {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    border: var(--border-std);
    border-radius: var(--border-radius);
    transition: transform var(--transition-normal) var(--transition-smooth), 
                box-shadow var(--transition-normal) var(--transition-smooth);
    min-height: var(--nav-btn-height);
    padding: 0;
    will-change: transform;
    background-color: rgba(14, 165, 233, 0.12);
}

.manufacturer-links-container .brand-info-link:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.6),
                0 0 40px rgba(14, 165, 233, 0.4),
                0 0 60px rgba(14, 165, 233, 0.2);
}

.manufacturer-links-container .brand-info-link a {
    align-content: center;
    align-items: center;
    justify-content: center;
    display: flex;
    width: 100%;
    min-height: var(--nav-btn-height);
    padding: var(--nav-btn-padding);
    color: var(--text-color);     
    text-decoration: none;
    background: none;
    border: none;
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
}

.manufacturer-links-container .brand-info-link a:hover,
.manufacturer-links-container .brand-info-link a:focus {
    color: var(--text-color);
    background: none;
    border: none;
    transform: none;
    box-shadow: none;
    text-shadow: var(--text-shadow);
}

.manufacturer-links-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: clamp(2rem, 2.2rem, 2.5rem);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-unit);
    text-shadow: var(--text-shadow);
}

.manufacturer-links-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-full);
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid rgba(0, 102, 153, 0.3);
}

/* Smaller logo images in product cards */
.product-card img[src*="logo"] {
    max-width: 120px;
}

.product-card img[src*="raypaklogo"] {
    max-width: 80px;
}

.service-category h3 {
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
    color: var(--primary-blue);
    margin: var(--spacing-lg) 0 var(--spacing-unit) 0;
    text-align: left;
    border-bottom: 2px solid var(--primary-blue);
    padding-bottom: var(--spacing-sm);
}

.service-category p {
    line-height: var(--line-height-base);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-lg);
    font-style: italic;
}

.service-category p:last-child {
    margin-bottom: 0;
}


.red-glow-italic,
.service-category p.red-glow-italic,
.exclusion-notice.red-glow-italic,
.aside-title.red-glow-italic {
    color: var(--error-color);
    font-style: italic ;
    text-shadow: 
        /* Black outline */
        -1px -1px 0 rgba(0, 0, 0, 1),
        1px -1px 0 rgba(0, 0, 0, 1),
        -1px 1px 0 rgba(0, 0, 0, 1),
        1px 1px 0 rgba(0, 0, 0, 1),
        0 -1px 0 rgba(0, 0, 0, 1),
        0 1px 0 rgba(0, 0, 0, 1),
        -1px 0 0 rgba(0, 0, 0, 1),
        1px 0 0 rgba(0, 0, 0, 1),
        /* White glow */
        0 0 20px rgba(255, 255, 255, 0.6),
        0 0 28px rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(220, 38, 38, 0.3);
}
.green-glow-italic,
.service-category p.green-glow-italic,
.exclusion-notice.green-glow-italic,
.aside-title.green-glow-italic {
    color: var(--success-color-solid);
    font-style: italic;
    text-shadow: 
        /* Black outline */
        -1px -1px 0 rgba(0, 0, 0, 1),
        1px -1px 0 rgba(0, 0, 0, 1),
        -1px 1px 0 rgba(0, 0, 0, 1),
        1px 1px 0 rgba(0, 0, 0, 1),
        0 -1px 0 rgba(0, 0, 0, 1),
        0 1px 0 rgba(0, 0, 0, 1),
        -1px 0 0 rgba(0, 0, 0, 1),
        1px 0 0 rgba(0, 0, 0, 1),
        /* White glow */
        0 0 20px rgba(255, 255, 255, 0.6),
        0 0 28px rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(34, 197, 94, 0.3);
}

.blue-glow-italic,
.service-category p.blue-glow-italic,
.exclusion-notice.blue-glow-italic,
.aside-title.blue-glow-italic {
    color: var(--primary-blue);
    font-style: italic;
    text-shadow: 
        /* Black outline */
        -1px -1px 0 rgba(0, 0, 0, 1),
        1px -1px 0 rgba(0, 0, 0, 1),
        -1px 1px 0 rgba(0, 0, 0, 1),
        1px 1px 0 rgba(0, 0, 0, 1),
        0 -1px 0 rgba(0, 0, 0, 1),
        0 1px 0 rgba(0, 0, 0, 1),
        -1px 0 0 rgba(0, 0, 0, 1),
        1px 0 0 rgba(0, 0, 0, 1),
        /* White glow */
        0 0 20px rgba(255, 255, 255, 0.6),
        0 0 28px rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(14, 165, 233, 0.3);
}

.exclusion-notice + .service-list li {
    font-style: italic;
}

.service-list {
    list-style: none;
    margin: var(--spacing-unit) auto;
    padding: calc(var(--spacing-unit) * 1.5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit);
    width: 100%;
    justify-content: left;
}

.service-list li {
    border-top: 1px solid var(--shallow-water);
    border-bottom: 1px solid var(--shallow-water);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-normal) var(--transition-smooth);
    position: relative;
    padding: calc(var(--spacing-unit) * 1.25);
    margin-bottom: var(--spacing-xs);
    text-align: left;
}

.service-list li:last-child {
    margin-bottom: 0;
}

.service-list li:hover {
    background: var(--glass-effect);
    transform: var(--button-hover-transform);
}

.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-blue);
    transform: scaleY(0);
    transition: transform var(--transition-normal) var(--transition-smooth);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    z-index: 1;
}

.service-list li:hover::before {
    transform: scaleY(1);
}

/* Links within list item text content (inline) */
.service-list li a {
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 500;
}

/* Add non-breaking space before inline links */
.service-list li a::before {
    content: '\00A0';
}

/* Direct child links (full-width flex layout) */
.service-list li > a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: var(--spacing-unit);
    text-decoration: none;
    color: inherit;
}

.service-list li > a::before {
    content: normal;
}

/* Headings and paragraphs inside service-list links */
.service-list li > a h4 {
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
    color: var(--primary-blue);
    margin: 0 0 var(--spacing-sm) 0;
}

.service-list li > a p {
    margin: 0;
    line-height: var(--line-height-base);
    font-size: var(--font-size-base);
    color: var(--text-color);
}

.service-list a span:first-child {
    font-size: 1.2em;
    margin-right: var(--spacing-sm);
}


/* ==========================================================================
   Content Cards & Info Sections
   ========================================================================== */


.badge {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-unit);
    margin-bottom: 0;
    margin-top: 0;
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background: rgba(14, 165, 233, 0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: 1;
    transition: transform var(--transition-normal) var(--transition-smooth), 
                box-shadow var(--transition-normal) var(--transition-smooth);
    cursor: pointer;
    min-width: 0;
}


.info-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    background: rgba(10, 94, 140, 0.5);
    border-radius: var(--border-radius);
    border: var(--border-std);
    border-color: var(--primary-blue);
    text-align: center;
    transition: all var(--transition-normal) var(--transition-smooth);
    box-sizing: border-box;
    min-width: 0;
}

.info-card p {
    line-height: var(--line-height-base);
    margin-left: 0;
    margin-right: 0;
}

.info-card p:first-of-type {
    font-size: var(--font-size-base);
}

.info-card:hover {
    background: transparent;
    transform: var(--button-hover-transform);

}

/* Prevent hover from overriding background image on spa-delivery-last-card */
.spa-delivery-page .spa-delivery-last-card:hover {
    background: var(--deep-water);
    background-image: url(../images/gallerypics/localproviderlogos/santanas-spas-delivery-pic.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}

/* Info Card Note - for service information sections */
.info-card-note {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; 
    width: 100%;
    max-width: 100%;
    background: transparent;
    border-radius: var(--border-radius);
    border: var(--border-std);
    border-color: var(--primary-blue);
    padding: var(--spacing-unit);
    transition: all var(--transition-normal) var(--transition-smooth);
    margin-bottom: var(--spacing-unit);
    box-sizing: border-box;
    overflow: hidden;
}



/* Remove border and padding from info-card-note when nested in master-container */
.master-container > .info-card-note {
    border: none;
    margin-bottom: 0;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 1.5);
}

/* Make the first section more pronounced (forms, cover orders, main sections) */
.master-container > .info-card-note.first-section {
    padding: calc(var(--spacing-unit) * 1.5);
    margin-bottom: var(--spacing-lg);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    background: rgba(10, 94, 140, 0.05);
}

.info-card-note h2,
.info-card-note h3 {
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
}

.aside-title {
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
}

/* Title row container for h1 and h2 on same line */
.info-card-note .title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    flex-wrap: nowrap;
    width: 100%;
}

.info-card-note .title-row h1 {
    margin-bottom: 0;
    flex-shrink: 0;
}

.info-card-note .title-row h2.aside-title {
    flex-shrink: 1;
    margin-bottom: 0;
    white-space: nowrap;
    
}



.info-card-note em {
    font-style: italic;
    color: var(--primary-blue);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.info-card-note .service-category {
    margin-top: calc(var(--spacing-unit) * 0.5);
}

/* Reduce margins when service-category is inside master-container with grid */
.master-container:has(> .info-card:nth-child(2)) .service-category {
    margin: calc(var(--spacing-unit) * 0.5) auto;
}

.info-card-note a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
    margin-bottom: calc(var(--spacing-unit) * 0.5); 
    padding: var(--spacing-unit);
}



.info-card-note a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Aside/Sidebar Components
   ========================================================================== */


.info-card h2,
.info-card h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-unit);
    text-shadow: var(--text-shadow);
}


.info-card p {
    color: var(--text-muted);
    margin-bottom: var(--spacing-unit);
}


/* Safety Section */
.safety-section {
    background: var(--glass-effect-subtle);
    border: var(--border-std);
    border-color: var(--warning-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-3xl);
}

.safety-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.safety-header h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
}

.safety-header p {
    color: var(--warning-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.safety-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.safety-card {
    background: var(--glass-effect);
    border: var(--border-std);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}

.safety-card h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-unit);
}

.safety-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.safety-card li {
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    color: var(--text-muted);
    position: relative;
}

.safety-card li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--warning-color);
    font-weight: var(--font-weight-bold);
}

.safety-note-small {
    margin-top: var(--spacing-unit);
    padding-top: var(--spacing-unit);
    border-top: 1px solid var(--primary-blue);
    font-size: 0.875rem;
    color: var(--text-muted);
}


.aside__title {
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
    color: var(--primary-blue);
    padding: var(--spacing-unit);
    margin: var(--spacing-unit);
}

.aside__text,
.aside__text--highlight {
    font-family: var(--font-body);
    font-weight: var(--font-weight-normal);
    padding: var(--spacing-unit);
    margin: var(--spacing-unit);
    text-align: center;
}

.aside__text span,
.aside__text--highlight {
    font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   Contact Components
   ========================================================================== */
.contact-form {
    /* Panel background to prevent background/canvas bleed */
    background: transparent; /* Transparent - form-container provides the background */
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    border: none; /* No border - form-container has the border */
    box-shadow: none; /* No shadow - form-container has the shadow */
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;      /* form fills its container */
    margin: 0 auto;           /* keep centered if used standalone */
    position: relative;
    z-index: 101; /* Higher than form-container (100) and sticky nav (--z-nav: 20) */
    opacity: 1; /* Fully visible */
    transition: opacity var(--transition-normal) ease;
}

/* Form container styles consolidated above - no duplicate needed */

.contact-form:hover,
.contact-form:focus-within {
    opacity: 1;
}

.master-container {
    width: 100%;  
}


.contact-note {
    background: var(--page-background-subtle);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    border: var(--border-std);
    border-color: var(--primary-blue);
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: var(--spacing-unit);
}

/* ==========================================================================
   Experience & Timeline Components
   ========================================================================== */
.experience-card {
    background-color: var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    border: var(--border-std);
    border-color: var(--primary-blue);
    text-align: center;
}

.experience-number {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--shallow-water);
    font-family: var(--font-heading);
}

.experience-grid {
    grid-template-columns: repeat(2, 1fr);
    padding-top: var(--spacing-unit);
}

.timeline {
    margin: var(--spacing-lg) 0;
}

.timeline-item {
    background-color: var(--glass-effect);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-unit);
    border-left: 4px solid var(--primary-blue);
}

.timeline-year {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--shallow-water);
    margin-bottom: var(--spacing-sm);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial {
    background-color: rgba(22, 163, 74, 0.2);
    border: 1px solid rgb(34, 197, 94);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    font-style: italic;
}

.testimonial-author {
    font-weight: var(--font-weight-bold);
    color: rgb(34, 197, 94);
    margin-top: var(--spacing-unit);
}

/* ==========================================================================
   Canvas & Visual Effects
   ========================================================================== */
/* Canvas wrapper and ripple canvas styles moved to css/header.css */


/* ==========================================================================
   Utility Classes
   ========================================================================== */

.cta-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: var(--spacing-unit);
    margin: var(--spacing-unit);
}

.cta-container img {
    max-width: 100%;
    height: auto;
    margin-bottom: var(--spacing-unit);
}


/* ==========================================================================
   Additional Components (Logos, Providers, etc.)
   ========================================================================== */
.partner-logo {
    text-align: center;
    margin: var(--spacing-unit) 0;
    padding: var(--spacing-unit);
    width: 100%;
}

.partner-logo:hover {
    box-shadow: var(--shadow-lg);
}

/* Partner logo images inherit from universal style above */

/* Phone image fallback - shown when JS is disabled */
.phone-image {
    white-space: nowrap;
    display: inline-block;
}

.phone-image a {
    display: inline-block;
    white-space: nowrap;
}

.phone-image svg {
    display: inline-block;
    vertical-align: middle;
}

.phone-image .phone-fallback {
    max-width: 150px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

/* Hide phone fallback when SVG is created by JS */
.phone-image svg ~ .phone-fallback,
.phone-image:has(svg) .phone-fallback {
    display: none;
}

/* Logo images inherit from universal style above */

/* Provider content - mobile-first: column layout */
.provider-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-unit);
    width: 100%;
    margin-bottom: var(--spacing-unit);   
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    background: var(--page-gradient);
    transition: all var(--transition-normal) var(--transition-smooth);
    text-align: left;
    backdrop-filter: blur(10px);

}

/* Show logos in provider-content on mobile */
.provider-content > .welcome-image-1 {
    display: block;
    width: clamp(70px, 14vw, 90px);
    height: clamp(70px, 14vw, 90px);
    min-width: clamp(70px, 14vw, 90px);
    min-height: clamp(70px, 14vw, 90px);
    max-width: clamp(70px, 14vw, 90px);
    max-height: clamp(70px, 14vw, 90px);
    aspect-ratio: 1 / 1;
    margin: 0;
    border: none;
    flex-shrink: 0;
    overflow: visible;
}

.provider-content > .welcome-image-1 a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.provider-content > .welcome-image-1 img {
    border: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: var(--border-radius-full);
}

.provider-content:hover {
    background: var(--glass-effect);

}


/* Mobile: provider-info wrapper should flex-grow to fill space */
.provider-content > .provider-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
}

.provider-content h2 {
    margin: 0;
    text-align: left;
    width: auto;
}

.provider-content h2 a {
    color: var(--primary-blue);
    text-decoration: none;
}

.provider-content h2 a:hover {
    text-decoration: underline;
}

.provider-content p {
    margin: 0;
    text-align: left;
    width: auto;
}

/* Universal logo image style - works for all provider logos */
.welcome-image-1 img,
.welcome-image-2 img,
.provider-content p img,
.partner-logo img {
    width: 70px;
    height: 70px;
    max-width: 70px;
    max-height: 70px;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-full);
    object-fit: cover;
    display: block;
    margin: var(--spacing-unit) auto;
    object-position: center;
}

/* Exclude provider-content main logos from universal rule - more specific selector */
.provider-content > .welcome-image-1 img {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* Other paragraphs */

/* ==========================================================================
   Payment Section Styles
   ========================================================================== */

/* Payment Container */
/* ==========================================================================
   Payment Section Styles
   ========================================================================== */

/* Payment Container - DEPRECATED: Use .form-container instead */
/* Keeping for backward compatibility - maps to form-container */
.payment-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    gap: var(--spacing-lg);
    background: var(--glass-effect);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all var(--transition-normal) var(--transition-smooth);
    overflow: visible;
    z-index: 100;
}

#payment-section {
    display: none;
    position: relative;
    z-index: 100; /* Higher than sticky nav (--z-nav: 20) */
}

/* Payment Header */
.payment-header {
    text-align: center;
    width: 100%;
    padding: var(--spacing-unit);
    margin: var(--spacing-unit);
}

/* Payment header styles - scoped to form containers for user-friendly styling */
.form-container .payment-header h1 {
    color: var(--form-text-dark);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
}

.form-container .payment-header h2 {
    color: var(--primary-blue); /* Blue text */
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
    text-shadow: var(--text-shadow); /* Black shadow for visibility */
}

.form-container .payment-header p {
    color: var(--form-text-gray);
    font-size: var(--font-size-base);
    margin: var(--spacing-sm) 0;
}

.payment-header .alternative-note {
    color: var(--text-muted);
    font-size: var(--font-size-base);
    font-style: italic;
    margin-top: var(--spacing-unit);
}

.payment-header .alternative-note a {
    color: var(--primary-blue);
    text-decoration: underline;
}

.payment-header .alternative-note a:hover {
    color: var(--shallow-water);
}

.payment-error {
    padding: var(--spacing-lg);
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid var(--error-color);
    border-radius: var(--border-radius);
    color: var(--text-color);
    text-align: center;
    width: 100%;
}

.payment-error a {
    color: var(--primary-blue);
    text-decoration: underline;
}

/* Payment Amount Input */
.payment-amount-input {
    max-width: 300px;
    font-size: 18px;
    margin: 0 auto;
}

/* Payment Instructions */
.payment-instructions {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background: var(--glass-effect-subtle);
    border-radius: var(--border-radius);
}

/* Payment instructions - scoped to form containers */
.form-container .payment-instructions p {
    margin: var(--spacing-sm) 0;
    color: var(--form-text-dark);
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.payment-instructions p:first-child {
    margin-top: 0;
}

.payment-instructions p:last-child {
    margin-bottom: 0;
}

/* Payment Section Form Styling - Match contact form styles */
/* Payment Section Form Styling - removed overrides, using base form styles */

/* Payment Summary */
.payment-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--spacing-lg);
    margin: var(--spacing-unit) 0;
    background: var(--background-color);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
}

.payment-description {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    gap: 0;
}

.payment-description p {
    flex-basis: 100%;
    width: 100%;
    margin: 0;
    color: var(--text-color);
    font-size: var(--font-size-base);
    line-height: 1.5;
}

/* Service Price Row */
.service-price-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-unit);
    margin-top: var(--spacing-sm);
}

#service-item {
    flex: 1 1 auto;
    color: var(--shallow-water);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

#total-item {
    flex: 0 0 auto;
    color: var(--shallow-water);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-heading);
    white-space: nowrap;
}

/* Payment Methods */
.payment-methods {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-lg);
    margin: var(--spacing-unit) 0;
    text-align: center;
    align-items: center;
}

.payment-method {
    display: none;
    overflow: hidden;
    background: var(--glass-effect);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    transition: all var(--transition-normal) var(--transition-smooth);
}

.payment-method.active {
    display: block;
    background: var(--deep-water);
    border-color: var(--shallow-water);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

/* Payment form group - match PayPal button width */
.payment-methods .form-group {
    max-width: 350px;
    width: 100%;
    margin: 0 auto;
}

/* PayPal Button */
.paypal-button-container {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

.paypal-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: var(--spacing-unit) var(--spacing-xl);
    gap: var(--spacing-md);
    background: var(--primary-blue);
    border: 2px solid var(--secondary-blue);
    border-radius: var(--border-radius);
    color: var(--form-bg-white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-normal) var(--transition-smooth);
}

.paypal-button:hover {
    background: var(--secondary-blue);
    border-color: var(--tertiary-blue);
    transform: var(--button-hover-transform);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.paypal-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.paypal-button img {
    margin: 0;
}

.paypal-logo {
    width: 140px;
    height: auto;
    max-height: 35px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}


/* Error States */
.form-group.error input {
    border-color: var(--error-color-solid);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Success States */
.form-group.success input {
    border-color: var(--success-color-solid);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

/* Payment Success Page Styles */
.payment-success-container {
    text-align: center;
    padding: var(--spacing-lg);
    max-width: 600px;
    margin: 0 auto;
    background: var(--glass-effect-subtle);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--border-radius);
}

.success-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg);
    color: var(--success-color-solid);
    display: block;
}

.payment-success-container h1 {
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-xxl);
}

.success-message {
    background: var(--glass-effect-subtle);
    border: 1px solid rgba(16, 185, 129, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.success-message p {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-base);
}

.success-message ul {
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-lg);
}

.success-message li {
    margin-bottom: var(--spacing-sm);
}

/* Payment Receipt */
.payment-receipt {
    background: var(--glass-effect);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    text-align: left;
}

.payment-receipt h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    border-bottom: 2px solid var(--primary-blue);
    padding-bottom: var(--spacing-sm);
}

.receipt-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(10, 94, 140, 0.2);
}

.receipt-row:last-child {
    border-bottom: none;
}

.receipt-label {
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    flex: 0 0 40%;
}

.receipt-value {
    text-align: right;
    flex: 1;
    word-break: break-word;
}

.success-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.success-actions .submit-btn.secondary {
    background: var(--glass-effect-subtle);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.success-actions .submit-btn.secondary:hover {
    background: var(--glass-effect);
    border-color: var(--primary-color);
}

/* ==========================================================================
   Desktop/Tablet Responsive Styles (768px+)
   ========================================================================== */
@media (min-width: 768px) {

    .layout-container {
        margin-bottom: 20px;
   
        max-width: 1400px;
    }

    
    /* Hide toggle indicator on desktop */
    .index-column-header .toggle-indicator {
        display: none;
    }
    
    .index-column-header {
        justify-content: center;
    }
    
    /* Form rows - desktop: row layout */
    .contact-form .form-row {
        flex-direction: row;
    }
    
    /* Badge - desktop: keep full width */
    .badge {
        width: 100%;
    }
    
    .provider-content {
        flex-direction: row;
        gap: var(--spacing-sm) var(--spacing-lg);
    }
    
    /* Desktop: logo in first column, vertically centered */
    /* .provider-content > .welcome-image-1 {
        grid-column: 1;
        grid-row: 1;
        display: block;
        max-width: 200px;
        width: 200px;
        height: 200px;
        align-self: center;
        justify-self: center;
        margin: 0 auto;
        padding: 0;
        border: none;
        transition: transform var(--transition-normal) var(--transition-smooth);
    }
    
    .provider-content > .welcome-image-1 a {
        display: block;
        width: 100%;
        height: 100%;
        transition: transform var(--transition-normal) var(--transition-smooth);
    }
    
    .provider-content > .welcome-image-1 img {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
        object-fit: cover;
        border-radius: var(--border-radius-full);
        transition: transform var(--transition-normal) var(--transition-smooth);
    }
     */
    .provider-content > .welcome-image-1:hover,
    .provider-content > .welcome-image-1:hover a,
    .provider-content > .welcome-image-1:hover img {
        transform: scale(1.1);
    }
    
    /* Desktop: provider-info container in second column */
    .provider-content > .provider-info {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--spacing-sm);
        text-align: left;
        min-width: 0;
        max-width: 100%;
    }
    
    .provider-content > .provider-info h2 {
        margin: 0;
        padding: 0;
    }
    
    .provider-content > .provider-info p {
        margin: 0;
        padding: 0;
    }
    
    /* Desktop: local-provider-logo size override */
    .local-provider-logo {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        height: 100px;
        min-height: 100px;
        max-height: 100px;
        align-self: center;
    }
    
    /* Ensure both anchor and div elements align the same */
    a.local-provider-logo,
    div.local-provider-logo {
        align-self: center;
    }
    
    /* Universal logo image style - desktop size */
    .welcome-image-1 img,
    .welcome-image-2 img,
    .provider-content p img,
    .local-provider-logo img,
    .partner-logo img {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        display: block;
    }
    
    /* Exclude provider-content main logos from universal rule - more specific selector */
    .provider-content > .welcome-image-1 img {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    
    /* Desktop: manufacturer links logo size */
    .manufacturer-links-logo {
        width: 50px;
        height: 50px;
    }

    /* Desktop: manufacturer links container - 3 column grid layout */
    .manufacturer-links-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-unit);
        width: 60%;
        max-width: 1200px;
        margin: var(--spacing-lg) auto;
    }

    .manufacturer-links-container .brand-info-link {
        margin: 0;
    }

    /* Desktop: table cell padding */
    table th,
    table td {
        padding: var(--spacing-unit);
    }
    
    .welcome-text h1 {
        text-shadow: var(--text-shadow);
        text-transform: uppercase;
        margin-bottom: var(--spacing-unit);
        font-weight: var(--font-weight-bold);
        /* Desktop: larger font size */
        font-size: clamp(2rem, 2.2rem, 2.5rem);
        line-height: 1.3;
    }
    
    .welcome-text p {
        /* Desktop: normal font size */
        font-size: var(--font-size-base);
        line-height: 1.5;
    }
    /* Service category - desktop: row layout for provider cards, column for equipment sections */
    .service-category {
        gap: var(--spacing-unit);
        justify-content: center;
    }

    /* Override for provider-content sections that need row layout */
    .provider-content .service-category,
    .local-provider-logo + .service-category {
        flex-direction: row;
    }
    
    .service-category h3 {
        text-align: left;
        margin: var(--spacing-xl) 0 var(--spacing-unit) 0;
    }
    
    /* Product images container - desktop: display cards in rows */

    
    .product-card {
        flex: 1 1 calc(50% - var(--spacing-unit));
        min-width: 250px;
        max-width: calc(50% - var(--spacing-unit));
        align-items: stretch;
    }
    
    .product-card .product-name {
        margin-top: auto;
    }
    
    .product-card img {
        max-width: 100%;
        max-height: 400px;
        width: auto;
        height: auto;
        object-fit: contain;
        object-position: center;
        border-radius: var(--border-radius);
    }
    
    /* Keep logos circular on desktop */
    .product-card img[src*="logo"],
    .product-card img[src*="raypaklogo"] {
        border-radius: var(--border-radius-full);
    }
    
    
    /* Smaller logo images on desktop */
    .product-card img[src*="logo"] {
        max-width: 100px;
    }
    

    .product-grid {
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        padding: var(--spacing-unit);
        width: 88%;
        min-width: 400px;
        margin: 0 auto;
    }
 

    .radio-option {
        flex: 1;
    }

    .safety-grid {
        grid-template-columns: repeat(3, 1fr);
    }


    /* Wider gutters on desktop */

    /* Desktop header styles moved to css/header.css */
    
    .main-content {
        height: auto;
    }

    .cta-container {
        padding: 0 var(--spacing-unit);
        margin: 0 auto;
        flex-direction: row;
        gap: var(--spacing-unit);
    }

    .welcome-content {
        flex-direction: row;
        align-items: stretch;        
        gap: var(--spacing-lg);

       } 


    .welcome-content .welcome-image-1 {
        display: flex;
        flex: 0 0 25%;
        max-width: 25%;
        justify-content: center;
        align-items: center;
        padding: var(--spacing-unit);
    }

    /* Text container - 50% width */
    .welcome-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-self: stretch;
    }

    /* Image container 2 - 25% width (only within welcome-content) */
    .welcome-content .welcome-image-2 {
        display: flex;
        flex: 0 0 25%;       
        max-width: 25%;
        justify-content: center;
        align-items: center;
        padding: var(--spacing-unit);
    }

    /* Ensure images are properly constrained within their 25% containers (only within welcome-content) */
    .welcome-content .welcome-image-1 img,
    .welcome-content .welcome-image-2 img {
        width: 100%; 
        max-width: 150px;
        max-height: 150px;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        border: var(--border-std);
        border-color: var(--primary-blue);
        border-radius: var(--border-radius);
        display: block;
        transition: transform var(--transition-normal) ease, filter var(--transition-normal) ease;
        margin: 0 auto;
    }
    /* Payment styles for 768px+ */
    .payment-header h1 {
        font-size: var(--font-size-3xl);
    }
    .success-actions {
        flex-direction: row;
    }
    .payment-success-container {
        padding: var(--spacing-xl);
    }
    
    .payment-receipt {
        margin: var(--spacing-xl) 0;
    }
    
    .receipt-row {
        padding: var(--spacing-md) 0;
    }

    /* Desktop: enable fixed background attachment for parallax effect */
    .master-container:has(> .info-card:nth-child(2)) {
        background-attachment: fixed;
    }
    

}

/* ==========================================================================
   Larger Desktop Styles (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {
    body {width: 100%; margin: 0 auto;}
    .layout-container {width: 100%;
        max-width: 1400px;
    }
    .payment-header h1 {
        font-size: var(--font-size-4xl);
    }
    .payment-success-container {
        max-width: 700px;
    }
}

/* ==========================================================================
   Hover Styles (devices with hover capability)
   ========================================================================== */
@media (hover: hover) {
    .welcome-image-1,
    .welcome-image-2 {
        cursor: pointer;
    }

    .welcome-image-1:hover,
    .welcome-image-1:focus-visible,
    .welcome-image-2:hover,
    .welcome-image-2:focus-visible {
        box-shadow: var(--shadow-lg);
        z-index: 1000;
    }

    .welcome-image-1:hover img,
    .welcome-image-1:focus-visible img,
    .welcome-image-2:hover img,
    .welcome-image-2:focus-visible img {
        filter: brightness(1.2) contrast(1.1);
        transform: scale(1.1);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    /* Hide navigation, footer, and buttons when printing */
    .header,
    .footer,
    .success-actions,
    .master-container,
    .submit-btn,
    .file-label {
        display: none
    }
    
    /* Optimize receipt for printing */
    .payment-success-container {
        max-width: 100%;
        border: none;
        box-shadow: none;
        background: var(--form-bg-white);
        padding: 20px;
    }
    
    .payment-receipt {
        background: var(--form-bg-white);
        border: 2px solid var(--body-color);
        page-break-inside: avoid;
    }
    
    .receipt-row {
        border-bottom: 1px solid var(--form-border-light);
    }
    
    .success-icon {
        color: var(--body-color);
    }
    
    /* Ensure text is black for printing */
    .receipt-label,
    .receipt-value,
    .success-message p,
    .success-message strong {
        color: var(--body-color);
    }
    
    .status-message {
        padding: var(--spacing-lg);
        margin: var(--spacing-unit) 0;
    }
}

/* ==========================================================================
   Additional Styles
   ========================================================================== */
select option[value=""] {
    color: var(--text-muted);
}