@media screen {
    .application-fee-table td:nth-child(1) {
        width: 91%;
    }

    .application-fee-table td:nth-child(2) {
        width: 9%;
    }
}

@media only screen and (min-width:50px) and (max-width:860px) {
    .payment-table > thead > tr > th {
        display: block !important
    }
    .payment-table > tbody > tr:not(.notresponsive) > td:nth-child(1),
    .application-fee-table td,
    .application-fee-table th {
        padding-left: 0 !important;
        margin: 0 auto;
    }
    .application-fee-table thead th {
        display: block !important
    }
    .payment-table > tbody > tr:not(.notresponsive) > td:nth-child(3) {
        display: none;
    }
    .payment-table > tbody > tr > td:before {
		content: attr(data-label);
	}
    div.payment-tuition-header {
        float: none !important;
        display: block !important;
        height: inherit
    }
}

.ProgramIdContainer .my-radio ~ label::before {
    display: none;
}
.ProgramIdContainer img {
    width: 550px;
}

.laptop-contract-header {
    text-align: center;
}

.laptop-contract-list, .transportation-grant-list, .list-disc-outer {
    list-style: disc;
}

.laptop-contract-list-inner, .list-circle-outer, .list-circle-inner {
    list-style: circle;
}

ul.laptop-contract-list > li, ul.transportation-grant-list > li {
    margin-left: 50px;
}

ul.laptop-contract-list-inner > li, ul.list-square-inner > li {
    margin-left: 100px;
}

ul.laptop-contract-ordered-list, ul.decimal-list {
    list-style: decimal;
}

ul.decimal-list {
    line-height: 1.5em;
}

ul.decimal-list-bold > li:not(:last-child) {
    margin-bottom: 20px;
}

ul.decimal-list-bold > li::marker {
    font-weight: bold;
}


ul.laptop-contract-ordered-list > li, ul.decimal-list > li {
    margin-left: 50px;
}

ul.ordered-list-letters {
    list-style-type: lower-latin;
}

ul.ordered-list-letters > li, ul.list-circle-outer > li, ul.list-disc-outer > li {
    margin-left: 50px;
}

ul.list-square-inner {
    list-style-type: square;
}

ul.list-circle-inner 
{
    margin-left: 80px;
}

/* Target only the specific transportation acknowledgement checkbox */
#no-bussing-acknowledgement .checkbox[data-checkbox-id="IUnderstand"] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

#no-bussing-acknowledgement .checkbox[data-checkbox-id="IUnderstand"] .checkbox-overlay {
    order: 1;
    flex: 0 0 auto;
    margin-right: 0; /* Remove any margin if present */
}

#no-bussing-acknowledgement .checkbox[data-checkbox-id="IUnderstand"] label {
    order: 2;
    flex: 1;
    text-align: left;
    margin-left: 0; /* Remove any margin if present */
}

/**
 * Styles the nested subpayment radio button list for perfect alignment.
 * - Adds vertical spacing above and below the subpayment list.
 * - Indents the subpayment list to visually nest it under the main payment option.
 * - Ensures the subpayment options are clearly separated from the main payment options.
 */
.nested-subpayment {
    margin-top: 0.5em;        /* Space above the subpayment list */
    margin-bottom: 0.5em;     /* Space below the subpayment list */
    padding-left: 2.5em;      /* Indent to visually nest under main payment option */
}

/**
 * Aligns each subpayment row in a three-column grid:
 *   1. Radio button (fixed width)
 *   2. Code (bold, fixed width)
 *   3. Description (flexible width)
 * - Uses CSS grid for perfect column alignment across all rows.
 * - Vertically centers all items and adds spacing between columns.
 */
.nested-subpayment .subpayment-li > div {
    display: grid;                                /* Use grid for column layout */
    grid-template-columns: 2.5em 7em 1fr;         /* Radio | Code | Description */
    align-items: center;                          /* Vertically center items */
    column-gap: 1em;                              /* Space between columns */
    width: 100%;                                  /* Full width for alignment */
}

/**
 * Styles for the nested subpayment display in read-only/print mode.
 * Creates a visual hierarchy where subpayment options appear as child items
 * of the selected payment installment type in enrollment agreements.
 */

/**
 * Container for the nested subpayment list in read-only mode.
 * - Uses print-only class to ensure visibility only in read-only/print contexts
 * - Applies indentation to create clear visual hierarchy under main payment options
 * - Removes default list styling for clean appearance
 */
.nested-subpayment.print-only {
    margin: 0;                    /* Remove default margins to prevent spacing issues */
    padding-left: 40px;           /* Indent to create visual hierarchy under main payment */
    list-style: none;             /* Remove default list bullets/numbers */
}

/**
 * Individual list items within the nested subpayment container.
 * - Removes default list styling and spacing for clean layout
 * - Ensures consistent spacing across different payment options
 */
.nested-subpayment.print-only li {
    list-style: none;             /* Remove default list item styling */
    margin: 0;                    /* Remove default margins */
    padding: 0;                   /* Remove default padding */
}

/**
 * Flex container for subpayment option display layout.
 * - Creates two-column layout: code (fixed width) + description (flexible)
 * - Aligns items consistently with existing form styling
 * - Provides subtle spacing without creating visual gaps
 */
.nested-subpayment.print-only .subpayment-display {
    display: flex;                /* Use flexbox for column layout */
    gap: 1em;                     /* Space between code and description columns */
    align-items: center;          /* Vertically center content */
    margin: 0 0 0 10px;          /* Additional left margin for visual separation */
    padding: 2px 0;              /* Minimal vertical padding for readability */
}

/**
 * Styling for the subpayment code column.
 * - Fixed width ensures consistent alignment across different options
 * - Bold font weight creates visual hierarchy and matches interactive mode
 * - Prevents shrinking to maintain column alignment
 */
.nested-subpayment.print-only .subpayment-code {
    font-weight: bold;            /* Bold text for visual emphasis */
    width: 7em;                   /* Fixed width for consistent column alignment */
    flex-shrink: 0;              /* Prevent column from shrinking */
}

/**
 * Styling for the subpayment description column.
 * - Flexible width fills remaining space after code column
 * - Normal text styling blends with existing form content
 * - Accommodates varying description lengths while maintaining layout
 */
.nested-subpayment.print-only .subpayment-description {
    flex: 1;                     /* Take remaining space after fixed-width code column */
}

/* Defines the styles for the health plan table */
.health-plan-table {
    border-collapse: collapse; /* Collapses the borders of table cells into a single border */
    width: 100%; /* Makes the table take the full width of its container */
    border: 1px solid black; /* Sets a 1-pixel solid black border for the table (replaces border="1") */
    font-size: 0.9rem; /* Sets a slightly smaller font size for better mobile readability */
    line-height: 1.4; /* Improves line spacing for better text readability on all devices */
}

/* Defines padding for table header and data cells (replaces cellpadding="8") */
.health-plan-table th,
.health-plan-table td {
    padding: 12px 8px; /* Adds padding inside each cell - increased for better mobile touch targets */
    border: 1px solid #ddd; /* Uses lighter border color for better visual hierarchy than solid black */
    text-align: left; /* Aligns text to the left, common default for table cells */
    vertical-align: top; /* Aligns content to the top of cells for consistent layout with varying content heights */
}

/**
 * Styles table headers with enhanced visual distinction.
 * - Applies bold font weight for hierarchy
 * - Uses light blue background to match existing site styling
 * - Ensures headers stand out from data rows
 */
.health-plan-table th {
    font-weight: bold; /* Makes header text bold for visual emphasis and hierarchy */
    background-color: #e6f3ff; /* Light blue background for header differentiation */
}

/**
 * Applies consistent light blue background to specific table rows.
 * - Uses !important to override any conflicting styles
 * - Matches the header styling for visual consistency
 * - Applied to description and location rows for better organization
 */
.light-blue-background {
    background-color: #e6f3ff !important; /* Light blue background with important to override defaults */
}

/**
 * Container wrapper for the health plan table to enable responsive behavior.
 * - Provides horizontal scroll when table is wider than viewport on small screens
 * - Enables smooth touch scrolling on iOS devices for better user experience
 * - Adds consistent margin spacing around the table for proper layout
 */
.health-plan-table-wrapper {
    overflow-x: auto; /* Enable horizontal scroll on very small screens when table is too wide */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS devices for better mobile experience */
    margin: 1rem 0; /* Consistent vertical spacing around the table for proper document flow */
}

/**
 * Mobile-friendly styling for lists within table cells.
 * - Optimizes list spacing and indentation for mobile readability
 * - Ensures consistent formatting across different screen sizes
 * - Improves touch interaction by providing adequate spacing
 */
.mobile-friendly-list {
    margin: 0; /* Remove default margin to prevent spacing issues in table cells */
    padding-left: 1.2rem; /* Consistent left padding for list indentation that works on mobile */
}

/* Individual list items within mobile-friendly lists */
.mobile-friendly-list li {
    margin-bottom: 0.5rem; /* Space between list items for improved readability on small screens */
    line-height: 1.4; /* Improved line spacing for mobile readability and touch interaction */
}

/**
 * Enhanced mobile responsive breakpoint - completely redesigned approach for table cards.
 * At viewport width of 768px and below, transforms table into properly spaced card layout.
 * Uses a different strategy to prevent label/content overlap completely.
 */
@media screen and (max-width: 768px) {
    /**
     * Function: Hide location header rows in mobile view since they're redundant with data-label attributes.
     * Line comment: The data-label attributes already provide context, so these header rows create visual clutter.
     */
    .health-plan-table tr.light-blue-background td[data-label="Location"] {
        display: none !important; /* Hide location header cells that are redundant in mobile card layout */
    }
    
    /**
     * Alternative approach: Hide the entire row if all cells are location headers.
     * Function: Completely removes location header rows from mobile display.
     * Line comment: This targets rows that only contain location information.
     */
    .health-plan-table tr.light-blue-background:has(td[data-label="Location"]) {
        display: none !important; /* Hide entire location header rows in mobile view */
    }

    /**
     * Transform all table elements into block-level elements for vertical stacking.
     * This completely changes the table layout from tabular to card-based.
     */
    .health-plan-table,
    .health-plan-table thead,
    .health-plan-table tbody,
    .health-plan-table th,
    .health-plan-table td,
    .health-plan-table tr {
        display: block; /* Convert table elements to block for vertical stacking layout */
    }

    /**
     * Hide table headers on mobile since we'll show labels in each cell.
     * Uses absolute positioning instead of display:none for better accessibility.
     */
    .health-plan-table thead tr {
        position: absolute; /* Position off-screen instead of display:none for screen readers */
        top: -9999px; /* Move far off-screen to hide visually */
        left: -9999px; /* Move far off-screen to hide visually */
    }

    /**
     * Style each table row as a card with borders and spacing.
     * Creates distinct visual containers for each set of related information.
     */
    .health-plan-table tr {
        border: 1px solid #ccc; /* Card border for visual separation between content groups */
        margin-bottom: 1rem; /* Space between cards for clear content separation */
        padding: 0; /* Remove padding from row level - applied at cell level instead */
        border-radius: 4px; /* Rounded corners for modern card appearance */
        background-color: #f9f9f9; /* Light background to distinguish cards from page background */
        overflow: hidden; /* Ensure content doesn't escape card boundaries */
    }

    /**
     * Completely redesigned table cell layout using CSS Grid for perfect label/content separation.
     * Each cell becomes a two-column grid with the label taking only necessary space.
     * This approach prevents any possibility of overlap between label and content.
     */
    .health-plan-table td {
        border: none; /* Remove cell borders since we have card borders for separation */
        display: flex !important; /* Stack label and content to avoid overlap */
        flex-direction: column;    /* Ensure vertical stacking */
        padding: 1rem; /* Increased padding around entire cell content */
        white-space: normal; /* Allow text wrapping for both label and content */
        text-align: left; /* Ensure left alignment for consistent reading flow */
        position: relative; /* Enable positioning for pseudo-elements */
        min-height: 4rem; /* Increased minimum height for proper layout */
        overflow: visible; /* Allow content to be visible */
        border-bottom: 2px solid #ddd; /* Stronger separation between cells */
        background: #fff; /* White background for better contrast */
    }

    /**
     * Create labels for each cell using data-label attributes with block positioning.
     * The pseudo-element is displayed as a block element above the content.
     * Block layout ensures the label will never overlap with content.
     * Uses word wrapping to handle longer labels within the allocated space.
     */
    .health-plan-table td::before {
        content: attr(data-label) ": \A"; /* Add line break after label */
        white-space: pre-wrap !important; /* Ensure newline from content("\A") is honored */
        font-weight: bold; /* Bold labels for visual hierarchy and easier scanning */
        color: #2c5aa0; /* Blue color for labels to distinguish from content */
        display: block; /* Display as block element for proper spacing */
        margin-bottom: 0.75rem; /* Increased space between label and content */
        word-wrap: break-word; /* Break long words in labels if necessary to prevent overflow */
        line-height: 1.2; /* Tighter line height for wrapped labels to maintain compactness */
        max-width: 100%; /* Ensure label doesn't exceed its container width */
        overflow-wrap: break-word; /* Additional word breaking for very long labels */
        font-size: 0.8rem; /* Smaller font size for labels */
        border-bottom: none !important; /* Remove underline from pseudo-label */
        padding-bottom: 0 !important;  /* Remove extra spacing under label */
    }

    /**
     * Position all cell content after the label with proper constraints.
     * Block layout ensures content appears below the label without overlap.
     * Content is constrained to its container width to prevent layout issues.
     */
    .health-plan-table td > * {
        display: block; /* Ensure content is visible and properly displayed */
        margin: 0; /* Reset margins to prevent spacing issues */
        width: 100%; /* Ensure content takes full width of its container */
        max-width: 100%; /* Prevent content from exceeding its container width */
        word-wrap: break-word; /* Break long words in content if necessary */
        overflow-wrap: break-word; /* Additional word breaking for very long content */
        line-height: 1.4; /* Good line height for readability */
        margin-top: 0.75rem; /* Ensure content appears below label */
        /* Removed padding-top to avoid overlap */
    }

    /* Ensure nested form controls and checkboxes appear below labels in mobile cards */
    .health-plan-table td input,
    .health-plan-table td textarea,
    .health-plan-table td select,
    .health-plan-table td .checkbox {
        display: block;       /* Block layout for full-width rendering */
        margin-top: 0.75rem !important; /* Space between label and control */
        width: 100%;          /* Full width for touch targets */
        max-width: 100%;      /* Prevent overflow */
    }

    /**
     * Special handling for cells that span multiple columns (colspan).
     * These cells contain full-width content and don't need the label treatment.
     * Reset to simple block layout for proper full-width display.
     */
    .shared-responsibilities-header td,
    .shared-responsibilities td {
        display: block; /* Reset to block layout for full-width content */
        grid-template-columns: none; /* Remove grid layout for colspan cells */
        padding: 0.75rem; /* Standard padding for full-width content */
    }

    /**
     * Hide labels for colspan cells since they contain section headers or full-width content.
     * These cells are self-explanatory and don't need additional labeling.
     */
    .shared-responsibilities-header td::before,
    .shared-responsibilities td::before {
        display: none; /* Remove labels for full-width cells that don't need them */
    }

    /**
     * Adjust list styling for mobile card layout with CSS Grid.
     * Optimizes list presentation within the grid-based mobile layout.
     * Ensures lists work properly within the second grid column.
     */
    .mobile-friendly-list {
        padding-left: 1rem; /* Reduced padding for mobile to maximize content space */
        margin: 0; /* Reset margins to prevent grid layout issues */
        width: 100%; /* Ensure list takes full width of its grid cell */
        list-style-position: inside; /* Move list markers inside for better mobile display */
    }

    /* Individual list items within the grid-based layout */
    .mobile-friendly-list li {
        margin-bottom: 0.5rem; /* Space between list items for improved readability */
        line-height: 1.4; /* Improved line spacing for mobile readability */
        word-wrap: break-word; /* Break long words in list items if necessary */
    }
}

/**
 * Small mobile breakpoint - optimizations for very small screens with CSS Grid.
 * At viewport width of 480px and below, applies additional space-saving optimizations.
 * Reduces label column width while maintaining the grid structure for consistency.
 */
@media screen and (max-width: 480px) {
    /**
     * Reduce font size for very small screens to fit more content.
     * Maintains readability while maximizing space utilization.
     */
    .health-plan-table {
        font-size: 0.85rem; /* Smaller font size for compact display on very small screens */
    }

    /**
     * Adjust table cells for small screens with block layout.
     * Maintains block layout for consistency across all screen sizes.
     * Reduces spacing for compact display on very small screens.
     */
    .health-plan-table td {
        padding: 0.5rem; /* Reduced padding for maximum content space */
        min-height: 2rem; /* Smaller minimum height for compact display */
    }

    /**
     * Optimize label styling for small screens with block layout.
     * Maintains block layout while adjusting font sizes for readability.
     * Ensures labels have proper spacing and don't overlap content.
     */
    .health-plan-table td::before {
        font-size: 0.8rem; /* Smaller label font size for compact display */
        line-height: 1.2; /* Tighter line height for very small screens */
        margin-bottom: 0.4rem; /* Reduced space between label and content */
    }

    /**
     * Optimize list styling for very small screens with block layout.
     * Reduces spacing while maintaining readability within block layout.
     * Ensures lists work properly within the content area.
     */
    .mobile-friendly-list {
        padding-left: 0.8rem; /* Further reduced padding for maximum content space */
        font-size: 0.85rem; /* Match table font size for consistency */
    }

    /* Individual list items optimization for small screens */
    .mobile-friendly-list li {
        margin-bottom: 0.4rem; /* Tighter spacing between list items for compact display */
        font-size: inherit; /* Inherit font size from parent list for consistency */
        word-wrap: break-word; /* Break long words in list items to prevent overflow */
    }
}

/**
 * iPhone 12/13 Pro Max specific breakpoint - optimizations for 428px width screens.
 * Addresses the specific layout requirements for the larger iPhone Pro Max models.
 * These devices need different optimization than regular iPhone models due to wider viewport.
 * Function: Provides optimal grid layout sizing for Pro Max screen dimensions.
 */
@media screen and (max-width: 428px) {
    /**
     * Optimize font size for iPhone Pro Max screens for maximum readability.
     * Function: Balances content density with readability on the wider Pro Max screen.
     * Line comment: Pro Max can handle slightly larger text than regular iPhones
     */
    .health-plan-table {
        font-size: 0.85rem; /* Slightly larger than regular iPhone for Pro Max's wider screen */
    }

    /**
     * Optimize table cells specifically for iPhone 12/13 Pro Max width (428px).
     * Function: Maintains block layout with comfortable spacing for Pro Max dimensions.
     * Line comment: Pro Max has more horizontal space, so we can use more generous spacing
     */
    .health-plan-table td {
        padding: 0.6rem; /* Adequate padding for Pro Max touch targets */
        min-height: 2.5rem; /* Slightly larger minimum height for Pro Max */
    }

    /**
     * Optimize label styling specifically for iPhone Pro Max screens.
     * Function: Ensures labels are clearly readable with proper spacing below.
     * Line comment: Pro Max can accommodate comfortable spacing between label and content
     */
    .health-plan-table td::before {
        font-size: 0.8rem; /* Comfortable label font size for Pro Max */
        line-height: 1.2; /* Balanced line height for Pro Max readability */
        margin-bottom: 0.5rem; /* Comfortable space between label and content */
    }

    /**
     * Optimize content styling for iPhone Pro Max screens.
     * Function: Ensures content is properly sized and readable on Pro Max displays.
     * Line comment: Block layout ensures content appears below labels without overlap
     */
    .health-plan-table td > * {
        font-size: 0.85rem; /* Match table font size for consistency on Pro Max */
        margin-top: 0; /* Remove any top margin to prevent spacing issues */
    }

    /**
     * Card styling adjustments for iPhone Pro Max screens.
     * Function: Provides optimal card spacing and appearance for Pro Max dimensions.
     * Line comment: Pro Max can handle more generous spacing than smaller iPhones
     */
    .health-plan-table tr {
        margin-bottom: 0.8rem; /* Comfortable spacing between cards on Pro Max */
        border-radius: 4px; /* Standard border radius for modern appearance */
    }

    /**
     * List optimization for iPhone Pro Max screens within grid layout.
     * Function: Optimizes list display for the wider Pro Max screen while maintaining readability.
     * Line comment: Pro Max can accommodate more generous list spacing
     */
    .mobile-friendly-list {
        padding-left: 0.8rem; /* Comfortable padding for Pro Max content space */
        font-size: 0.85rem; /* Match table font size for consistency */
    }

    /**
     * Individual list items optimization for iPhone Pro Max.
     * Function: Provides optimal spacing and readability for list items on Pro Max.
     * Line comment: More generous spacing works well on Pro Max's larger screen
     */
    .mobile-friendly-list li {
        margin-bottom: 0.4rem; /* Comfortable spacing for Pro Max display */
        line-height: 1.4; /* Good line height for Pro Max readability */
    }
}

/**
 * Regular iPhone 12/13 specific breakpoint - optimizations for 390px width screens.
 * Function: Provides compact layout optimization for standard iPhone 12/13 models.
 * Line comment: More aggressive space optimization needed for narrower standard iPhones
 */
@media screen and (max-width: 390px) {
    /**
     * Further reduce font size for standard iPhone 12/13 screens to maximize content visibility.
     * Function: Ensures maximum content fits while maintaining readability on narrower screens.
     * Line comment: Standard iPhones need smaller text than Pro Max for content to fit
     */
    .health-plan-table {
        font-size: 0.8rem; /* Smaller font size for standard iPhone screens */
    }

    /**
     * Optimize table cells specifically for standard iPhone 12/13 width (390px).
     * Function: Creates compact block layout for standard iPhone dimensions.
     * Line comment: More compact spacing needed due to limited horizontal space
     */
    .health-plan-table td {
        padding: 0.4rem; /* Reduced padding for maximum content space */
        min-height: 2rem; /* Smaller minimum height for compact display */
    }

    /**
     * Optimize label styling specifically for standard iPhone 12/13 screens.
     * Function: Ensures labels remain readable while taking minimal space.
     * Line comment: Compact spacing needed for narrower standard iPhone
     */
    .health-plan-table td::before {
        font-size: 0.75rem; /* Smaller label font for standard iPhone compatibility */
        line-height: 1.1; /* Tighter line height for very compact display */
        margin-bottom: 0.3rem; /* Minimal space between label and content */
    }

    /**
     * Optimize content styling for standard iPhone 12/13 screens.
     * Function: Ensures all content fits within the limited screen space.
     * Line comment: Match smaller table font size for consistency
     */
    .health-plan-table td > * {
        font-size: 0.8rem; /* Match table font size for consistency */
        margin-top: 0; /* Remove any top margin to prevent spacing issues */
    }

    /**
     * Card styling adjustments for standard iPhone 12/13 screens.
     * Function: Provides compact card layout for standard iPhone dimensions.
     * Line comment: Tighter spacing needed for smaller screen real estate
     */
    .health-plan-table tr {
        margin-bottom: 0.75rem; /* Slightly reduced spacing between cards */
        border-radius: 3px; /* Smaller border radius for compact appearance */
    }

    /**
     * List optimization for standard iPhone 12/13 screens within grid layout.
     * Function: Minimizes spacing while maintaining readability in narrow content column.
     * Line comment: Aggressive space optimization needed for standard iPhone width
     */
    .mobile-friendly-list {
        padding-left: 0.6rem; /* Minimal padding for maximum content space */
        font-size: 0.8rem; /* Match table font size for consistency */
    }

    /**
     * Individual list items optimization for standard iPhone 12/13.
     * Function: Provides minimal spacing while maintaining readability.
     * Line comment: Compact spacing required for standard iPhone dimensions
     */
    .mobile-friendly-list li {
        margin-bottom: 0.3rem; /* Minimal spacing for compact display */
        line-height: 1.3; /* Tighter line height for space efficiency */
    }
}

/**
 * Alternative fallback for devices that might not trigger the specific iPhone breakpoints.
 * Function: Provides safety net for very narrow screens with CSS Grid support detection.
 * Line comment: Ensures compatibility with older devices or unusual screen sizes
 */
@media screen and (max-width: 400px) {
    /**
     * Ensure the health plan table wrapper allows horizontal scroll if grid fails.
     * Function: Provides fallback scrolling mechanism for grid layout failures.
     * Line comment: Horizontal scroll as last resort if other optimizations fail
     */
    .health-plan-table-wrapper {
        overflow-x: auto; /* Enable horizontal scroll as fallback */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    
    /**
     * Alternative layout for browsers with poor CSS Grid support.
     * Function: Provides block-based fallback layout for older browsers.
     * Line comment: Feature query ensures graceful degradation on unsupported browsers
     */
    @supports not (display: grid) {
        /**
         * Fallback to block layout when CSS Grid is not supported.
         * Function: Ensures content remains accessible on older browsers.
         * Line comment: Block layout stacks content vertically as safe fallback
         */
        .health-plan-table td {
            display: block; /* Fallback to block layout */
            padding: 0.5rem; /* Standard padding for block layout */
        }
        
        /**
         * Stack label above content in block layout fallback.
         * Function: Maintains label-content relationship in fallback layout.
         * Line comment: Block display ensures labels appear above content
         */
        .health-plan-table td::before {
            display: block; /* Stack label above content */
            margin-bottom: 0.25rem; /* Space between label and content */
        }
    }
}

/**
 * Print media query - restores original table layout for printing.
 * Ensures the table prints in traditional tabular format regardless of screen size.
 * This preserves the intended document structure for printed copies.
 */
@media print {
    /**
     * Function: Ensures the health plan header has adequate top margin in the print layout.
     * Line comment: This rule pushes the header down, separating it from the form fields above.
     */
    .health-plan-header {
        margin-top: 2rem !important; /* Use !important to override any conflicting styles */
        page-break-before: auto; /* Allow natural page breaks if needed */
        padding-top: 1rem; /* Additional top padding for visual separation */
    }

    /**
     * Function: Ensures the health plan heading itself has proper spacing.
     * Line comment: Target the H1 specifically to ensure it's visually separated from preceding content.
     */
    .health-plan-header h1 {
        margin-top: 1rem !important; /* Additional top margin for the heading itself */
        padding-top: 0.5rem; /* Extra padding to create clear visual separation */
    }
    /**
     * Restore original table display for all table elements when printing.
     * Overrides the mobile card layout to ensure proper table printing.
     */
    .health-plan-table,
    .health-plan-table thead,
    .health-plan-table tbody,
    .health-plan-table th,
    .health-plan-table td,
    .health-plan-table tr {
        display: table-row-group; /* Restore table display properties for proper printing */
    }

    /**
     * Make table headers visible for printing.
     * Restores normal header positioning that was hidden for mobile.
     */
    .health-plan-table thead tr {
        position: static; /* Restore normal positioning for print layout */
    }

    /**
     * Reset card styling for print layout.
     * Removes mobile-specific card styling to ensure clean printed output.
     */
    .health-plan-table tr {
        border: none; /* Remove card borders for clean print appearance */
        margin: 0; /* Remove card margins for proper table printing */
        padding: 0; /* Remove card padding for standard table layout */
        background: none; /* Remove card background for ink-efficient printing */
    }

    /**
     * Restore original cell styling for print.
     * Ensures cells appear as traditional table cells when printed.
     */
    .health-plan-table td {
        border: 1px solid #ddd; /* Restore cell borders for clear table structure */
        padding: 8px; /* Restore original padding for print readability */
        position: static; /* Remove relative positioning used for mobile labels */
    }

    /**
     * Hide mobile labels in print view.
     * Removes the data-label content that's only needed for mobile display.
     */
    .health-plan-table td:before {
        display: none; /* Remove data-label content for clean print output */
    }
}

.document-category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: space-between;
}

.document-category-buttons .my-checkbox-button {
    min-width: 150px;
    text-align: center;
    width: auto;
}

.document-category-buttons .my-checkbox-button.thirty-percent {
    width: 30%;
    flex: 0 0 30%;
}

/* Ignite Fee Section */
.ignite-fees { 
    max-width:860px; 
    margin:0 auto 32px; 
    font-family:inherit; 
}
.ignite-fees table { 
    width:100%; 
    border-collapse:collapse; 
    margin-bottom:18px; 
}
.ignite-fees th, .ignite-fees td { 
    padding:10px 14px; 
    border:1px solid #e1e6ec; 
    vertical-align:middle; 
}
.ignite-fees thead th { 
    background:#f5f7fa; 
    font-weight:600; 
    font-size:.9rem; 
    letter-spacing:.5px; }
.ignite-fees tbody tr.light { 
    background:#fafcff; 
}
.ignite-fees tbody tr.total { 
    background:#f0f4f8; 
    font-weight:600; 
}
.ignite-fees .fee-amount { 
    text-align:right; 
    white-space:nowrap; 
    font-weight:600; 
    color:#1b6e3a; 
}
.ignite-fees .more-detail { 
    font-weight:normal; 
    color:#555; 
    font-size:0.8rem; 
    display:block; 
    margin-top:4px; 
}
.ignite-fees .context-notes { 
    margin:6px 0 18px; 
    padding-left:18px; 
    font-size:.83rem; 
    line-height:1.35em; 
    color:#454f58; 
}
.ignite-fees .context-notes li { 
    margin:2px 0; 
}
.ignite-fees .section-hdr { 
    margin:0 0 8px; 
    font-size:1.05rem; 
    font-weight:600; 
    color:#2d3d4c; 
}
.ignite-fees .payment-header { 
    border-bottom:1px solid #d9e1e8; 
    padding-bottom:6px; 
    margin:4px 0 14px; 
    font-size:1.05rem; 
    font-weight:600; 
}
.ignite-fees .success-box { 
    background:#e6f9ed; 
    border:1px solid #c4ebd2; 
    padding:10px 14px; 
    border-radius:4px; 
    font-size:.9rem; 
}
.ignite-fees .notes-box { 
    background:#f1f8ff; 
    border:1px solid #c6daee; 
    border-radius:6px; 
    padding:16px 18px; 
    margin-top:18px; 
}
.ignite-fees .notes-box h4 { 
    margin:0 0 8px; 
    font-size:.95rem; 
    font-weight:600; 
}
.ignite-fees .notes-box ul { 
    margin:0 0 0 18px; 
    padding:0; 
    font-size:.8rem; 
    line-height:1.4em; 
}

.ignite-payment-complete {
    max-width: 860px;
    margin: 0 auto 32px;
    font-family: inherit;
}

.ignite-payment-complete .success-box {
    background: #e6f9ed;
    border: 1px solid #c4ebd2;
    padding: 16px 18px;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 20px;
}

.ignite-payment-complete .success-box strong {
    color: #1b6e3a;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 8px;
}

.ignite-payment-complete .success-box p {
    margin: 0;
    font-size: 0.9rem;
    color: #2d5016;
}

/* Payment Summary Section */
.ignite-fees-summary {
    margin-top: 20px;
}

.ignite-fees-summary h4 {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #2d3d4c;
    border-bottom: 1px solid #d9e1e8;
    padding-bottom: 6px;
}

.ignite-fee-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

.ignite-fee-table th,
.ignite-fee-table td {
    padding: 10px 14px;
    border: 1px solid #e1e6ec;
    vertical-align: middle;
}

.ignite-fee-table tbody tr {
    background: #fafcff;
}

.ignite-fee-table tbody tr.total {
    background: #f0f4f8;
    font-weight: 600;
}

.ignite-fee-table .fee-amount {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    color: #1b6e3a;
}

/* Ignite Payment Pending (update existing) */
.ignite-payment-pending {
    max-width: 860px;
    margin: 0 auto 32px;
    font-family: inherit;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.ignite-payment-pending h3 {
    margin: 0 0 16px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3d4c;
}

.ignite-payment-pending .info-message {
    margin: 0 0 18px;
    font-size: 0.95rem;
    line-height: 1.4em;
    color: #495057;
    padding: 12px 16px;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
}

/* Ignite Fees Preview */
.ignite-fees-preview {
    margin-top: 20px;
}

.ignite-fees-preview h4 {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #2d3d4c;
    border-bottom: 1px solid #d9e1e8;
    padding-bottom: 6px;
}

/* Mobile responsiveness for all ignite sections */
@media (max-width: 640px) {
    .ignite-payment-complete,
    .ignite-payment-pending {
        margin: 0 auto 20px;
        padding: 16px;
    }
    
    .ignite-payment-complete .success-box {
        padding: 12px 14px;
    }
    
    .ignite-payment-complete .success-box strong {
        font-size: 1rem;
    }
    
    .ignite-fee-table th,
    .ignite-fee-table td {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    
    .ignite-fee-table .fee-amount {
        font-size: 0.9rem;
    }
}
@media (max-width:640px){
    .ignite-fees th, .ignite-fees td { 
        padding:8px 10px; 
        font-size:.85rem; 
    }
    .ignite-fees .fee-amount { 
        font-size:.9rem; 
    }
}

@media screen and (max-width: 600px) {
    .editable-FileBasicMetadata_my-dialog {
        width: 95vw;
        max-width: 100vw;
        min-width: 0;
        margin: 0 auto;
    }
    .my-dialog-inner-wrapper {
        width: 100%;
        min-width: 0;
        max-width: 100vw;
        box-sizing: border-box;
    }
    .document-category-buttons {
        width: 100%;
    }
    .document-category-buttons .my-checkbox-button {
        min-width: 120px;
        font-size: 0.95em;
        padding: 0.5em 0.25em;
    }
    .document-category-buttons .my-checkbox-button.thirty-percent {
        width: 100%;
        flex: 1 1 100%;
        min-width: 120px;
        font-size: 0.95em;
        padding: 0.5em 0.25em;
    }
}

/* Fee Override Section Styling */
.fee-override-section {
    max-width: 1920px;
    margin: 0 0 24px;
    font-family: inherit;
    /* background: #f8f9fa; */
    /* border: 1px solid #dee2e6; */
    border-radius: 6px;
    padding: 20px;
}

.fee-override-section .help-text {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #6c757d;
    line-height: 1.4;
    font-style: italic;
}

.fee-override-section input[type="number"] {
    width: 200px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.9rem;
    background: #fff;
}

.fee-override-section input[type="number"]:focus {
    border-color: #2c5aa0;
    box-shadow: 0 0 0 2px rgba(44, 90, 160, 0.1);
    outline: none;
}

.fee-override-notice {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 16px 0;
    font-size: 0.9rem;
    color: #856404;
}

.fee-override-notice strong {
    color: #856404;
    font-weight: 600;
}

/* Mobile responsiveness for fee override section */
@media (max-width: 640px) {
    .fee-override-section {
        margin: 0 auto 20px;
        padding: 16px;
    }
    
    .fee-override-section input[type="number"] {
        width: 100%;
        max-width: 200px;
    }
    
    .fee-override-notice {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
}

/* Ignite Anon Payment Link */
.payment-container {
    max-width: 760px;
    margin: 18px auto;
    padding: 18px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    border: 1px solid #e6e6e6;
}

.payment-container h2 {
    margin-top: 0;
    font-size: 1.4rem;
}

.payment-container h3 {
    margin-top: 6px;
    margin-bottom: 14px;
    font-size: 1rem;
    color: #444;
    font-weight: 500;
}

.fee-summary {
    background-color: #f8f9fa;
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 18px;
}

.payment-table {
    width: 100%;
    border-collapse: collapse;
}
.payment-table td {
    padding: 8px 6px;
    vertical-align: middle;
}
.payment-table td:first-child {
    color: #555;
    width: 65%;
}
.fee-amount {
    text-align: right;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f3a93;
    width: 35%;
}

.total-row {
    border-top: 1px dashed #ddd;
    padding-top: 8px;
}

.calculation-note {
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
}

.payment-method-section {
    margin-top: 14px;
}

/* Credit card block spacing */
.creditcard {
    margin-top: 12px;
}

/* Keep form responsive on small screens */
@media (max-width: 520px) {
    .payment-container {
        padding: 12px;
        margin: 10px;
    }
    .payment-table td:first-child { width: 60%; font-size: 0.95rem; }
    .fee-amount { font-size: 1rem; }
}

/* PaymentSuccess */
.payment-success-container {
        max-width: 600px;
        margin: 40px auto;
        background: #f8f9fa;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
        padding: 32px 24px;
        font-family: 'Segoe UI', Arial, sans-serif;
    }
.success-message h2 {
    color: #28a745;
    font-size: 2rem;
    margin-bottom: 12px;
    text-align: center;
}
.success-box {
    background: #e6f9ea;
    border: 1px solid #b2e2c7;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 24px;
    text-align: center;
}
.success-box strong {
    font-size: 1.15rem;
    color: #218838;
    display: block;
    margin-bottom: 8px;
}
.next-steps h3 {
    color: #007bff;
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.next-steps ul {
    padding-left: 20px;
    margin-bottom: 0;
}
.next-steps li {
    margin-bottom: 7px;
    font-size: 1rem;
}

/* Reciept */
.receipt-success { padding: 2rem 0; }
.receipt-card {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(20,30,40,0.08);
    padding: 1.25rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #222;
}
.receipt-header { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
.receipt-header .meta { text-align:right; color:#666; font-size:.9rem; }
.receipt-title { font-weight:700; font-size:1.15rem; margin-bottom:.25rem; }
.receipt-sub { color:#666; font-size:.9rem; }
.receipt-body { display:flex; gap:1.25rem; flex-wrap:wrap; }
.receipt-left { flex:1 1 420px; border-right:1px dashed #eee; padding-right:1rem; min-width:280px; }
.receipt-right { width:260px; flex:0 0 260px; min-width:200px; }
.receipt-row { display:flex; justify-content:space-between; padding:.45rem 0; border-bottom:1px solid #f6f6f6; font-size:.98rem; }
.receipt-row .label { color:#555; }
.receipt-row .value { font-weight:600; color:#111; text-align:right; min-width:140px; }
.receipt-amount { font-size:1.15rem; font-weight:700; color:#0b6a4a; }
.badge-copy { display:inline-block; padding:.25rem .5rem; background:#eef7f2; color:#0b6a4a; border-radius:4px; font-size:.8rem; font-weight:600; }
.receipt-footer { margin-top:1rem; color:#666; font-size:.9rem; }
.actions { margin-top:1rem; display:flex; gap:.5rem; }
.muted { color:#777; font-size:.88rem; }
@media print {
    .actions, .success-box { display:none !important; }
    body { background: #fff; }
    .receipt-card { box-shadow:none; border:none; margin:0; }
}

/* StudendRecord Payment Totals */
.payment-totals-summary {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
}
.payment-totals-summary h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #495057;
}
.payment-totals-row {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}
.payment-total-item {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}
.payment-label {
    font-weight: bold;
    color: #6c757d;
    font-size: 0.9em;
    margin-bottom: 5px;
}
.payment-amount {
    font-size: 1.2em;
    font-weight: bold;
}
.payment-amount.owing {
    color: #dc3545; /* Red for owing */
}
.payment-amount.paid {
    color: #28a745; /* Green for paid */
}
@media (max-width: 768px) {
    .payment-totals-row {
        flex-direction: column;
        gap: 15px;
    }
}
.payment-paid {
    color: #28a745 !important; /* Green for payments made by parent */
    font-weight: bold;
}

.payment-refunded {
    color: #dc3545 !important; /* Red for refunded payments */
    font-weight: bold;
}

/* --- Parent Payment --- */
.parent-payment-section {
    max-width: 860px;
    margin: 0 auto 24px;
}
.payment-title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 600;
}
.payment-subtitle {
    margin: 0 0 18px;
    font-size: 1rem;
    font-weight: 500;
    color: #444;
}
.payment-action-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.payment-action {
    margin: 0;
}
.make-payment-btn {
    min-width: 200px;
    padding: 10px 18px;
}
.stripe-payment-wrapper {
    border-radius: 6px;
    padding: 16px 18px 20px;
    position: relative;
}
.payment-amount-display {
    background: #f6f9fc;
    border: 2px solid #0066cc;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: center;
}
.payment-amount-display h4 {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #424770;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stripe-amount-display {
    margin-bottom: 6px;
}
#stripe-amount-value {
    font-size: 2rem;
    font-weight: 700;
    color: #0066cc;
}
.stripe-amount-description {
    font-size: 0.85rem;
    color: #6b7c93;
    font-style: italic;
}
.stripe-payment-items {
    margin-top: 12px;
    text-align: left;
}
.payment-items-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}
.payment-items-list li {
    padding: 6px 12px;
    margin: 4px 0;
    background: #fff;
    border-left: 3px solid #0066cc;
    font-size: 0.85rem;
    color: #424770;
    border-radius: 3px;
}
.stripe-element-box {
    min-height: 170px;
    border: 1px solid #d8dde2;
    background: #fff;
    padding: 12px 14px;
    border-radius: 4px;
}
.stripe-buttons {
    margin-top: 14px;
    display: flex;
    gap: 12px;
}
.submit-payment-btn {
    min-width: 170px;
    padding: 10px 18px;
}
.stripe-msg {
    margin-top: 10px;
    font-size: 0.85rem;
}
.stripe-error {
    color: #b30000;
}
.stripe-success {
    color: #0a730a;
    font-weight: 600;
}
.no-due-msg {
    margin-top: 4px;
    font-size: 0.95rem;
    font-weight: 500;
}
.hidden { display: none !important; }
.visually-hidden {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}
@media (max-width:640px){
    .stripe-payment-wrapper { padding:14px 14px 18px; }
    .make-payment-btn, .submit-payment-btn { width:100%; }
    .stripe-buttons { flex-direction: column; }
}