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


/* Source: reset.css */
/* CSS Reset */
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
#root, #__next {
    isolation: isolate;
}

/* Source: variables.css */
:root {
   /* Primary Brand Colors */
   --color-primary: #FF7A6D;
   --color-primary-dark: #F26355;

   /* Neutral Colors */
   --color-white: #FFFFFF;
   --color-black: #000000;
   --color-text-primary: #343A40;
   --color-text-secondary: #686868;
   --color-gray-500: #8C7C70;

   /* Background Colors */
   --color-bg-sidebar: #F4F1EE;
   --color-bg-light: #E6DED8;
   --color-bg-card: #F4F1EE;
   --color-bg-info: #DBEEF1;

   /* Border Colors */
   --color-border-medium: #C3A58F;

   /* Font Families */
   --font-primary: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Source: utilities.css */
/* ========================================
    UTILITY CLASSES
    ======================================== */

/* Width */
.w-100 {
    width: 100% !important;
}

/* Display */
.d-none {
    display: none !important;
}
.d--block {
    display: block !important;
}
.d--inline-block {
    display: inline-block !important;
}
.d--flex {
    display: flex !important;
}
.d--inline-flex {
    display: inline-flex !important;
}

/* Flexbox */
.flex--row {
    flex-direction: row !important;
}
.flex--column {
    flex-direction: column !important;
}
.justify--center {
    justify-content: center !important;
}
.justify--between {
    justify-content: space-between !important;
}
.justify--end {
    justify-content: flex-end !important;
}
.align--center {
    align-items: center !important;
}
.align--start {
    align-items: flex-start !important;
}
.align--end {
    align-items: flex-end !important;
}
.gap-1 {
    gap: 0.25rem !important;
}
.gap-2 {
    gap: 0.5rem !important;
}
.gap-3 {
    gap: 1rem !important;
}
.gap-4 {
    gap: 1.5rem !important;
}
.gap-5 {
    gap: 3rem !important;
}

/* Background */
.bg--light {
    background-color: var(--color-bg-light) !important;
}
.bg--white {
    background-color: var(--color-white) !important;
}
.bg--black {
    background-color: var(--color-black) !important;
}
.bg--primary {
    background-color: var(--color-primary) !important;
}
.bg--teal-100 {
    background-color: var(--color-teal-100) !important;
}
.bg--teal-200 {
    background-color: var(--color-teal-200) !important;
}
.bg--light-teal {
    background-color: #E1F8F6 !important;
}

/* Border Utilities */
.border {
    border: 1px solid var(--color-border-medium);
}
.border--rounded {
    border-radius: 8px;
}
.border--heavy {
    border-width: 4px;
    border-style: solid;
}
.border--primary {
    border-color: var(--color-primary);
}
.border--teal {
    border-color: var(--color-border-teal);
}
.border--light {
    border-color: var(--color-border-light);
}

/* Border Radius */
.rounded--sm {
    border-radius: 4px !important;
}
.rounded {
    border-radius: 8px !important;
}
.rounded--lg {
    border-radius: 16px !important;
}
.rounded--full {
    border-radius: 9999px !important;
}

/* Responsive Display */
@media screen and (max-width: 767px) {
    .mobile-hide {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    .desktop-hide {
        display: none !important;
    }
}

/* Source: spacing.css */
/* ========================================
    SPACING UTILITIES
    Margin and Padding - Bootstrap naming convention
    ======================================== */

/* Margin Utilities */

/* All sides */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; } /* 4px */
.m-2 { margin: 0.5rem !important; } /* 8px */
.m-3 { margin: 1rem !important; } /* 16px */
.m-4 { margin: 1.5rem !important; } /* 24px */
.m-5 { margin: 2rem !important; } /* 32px */
.m-6 { margin: 3rem !important; } /* 48px */
.m-7 { margin: 4rem !important; } /* 64px */
.m-auto { margin: auto !important; }

/* Top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 2rem !important; }
.mt-6 { margin-top: 3rem !important; }
.mt-7 { margin-top: 4rem !important; }
.mt-auto { margin-top: auto !important; }

/* Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 2rem !important; }
.mb-6 { margin-bottom: 3rem !important; }
.mb-7 { margin-bottom: 4rem !important; }
.mb-auto { margin-bottom: auto !important; }

/* Left */
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 2rem !important; }
.ms-6 { margin-left: 3rem !important; }
.ms-7 { margin-left: 4rem !important; }
.ms-auto { margin-left: auto !important; }

/* Right */
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 2rem !important; }
.me-6 { margin-right: 3rem !important; }
.me-7 { margin-right: 4rem !important; }
.me-auto { margin-right: auto !important; }

/* X-axis (left and right) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 2rem !important; margin-right: 2rem !important; }
.mx-6 { margin-left: 3rem !important; margin-right: 3rem !important; }
.mx-7 { margin-left: 4rem !important; margin-right: 4rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Y-axis (top and bottom) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.my-6 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.my-7 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }


/* Padding Utilities */

/* All sides */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; } /* 4px */
.p-2 { padding: 0.5rem !important; } /* 8px */
.p-3 { padding: 1rem !important; } /* 16px */
.p-4 { padding: 1.5rem !important; } /* 24px */
.p-5 { padding: 2rem !important; } /* 32px */
.p-6 { padding: 3rem !important; } /* 48px */
.p-7 { padding: 4rem !important; } /* 64px */

/* Top */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 2rem !important; }
.pt-6 { padding-top: 3rem !important; }
.pt-7 { padding-top: 4rem !important; }

/* Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 2rem !important; }
.pb-6 { padding-bottom: 3rem !important; }
.pb-7 { padding-bottom: 4rem !important; }

/* Left */
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 2rem !important; }
.ps-6 { padding-left: 3rem !important; }
.ps-7 { padding-left: 4rem !important; }

/* Right */
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 2rem !important; }
.pe-6 { padding-right: 3rem !important; }
.pe-7 { padding-right: 4rem !important; }

/* X-axis (left and right) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 2rem !important; padding-right: 2rem !important; }
.px-6 { padding-left: 3rem !important; padding-right: 3rem !important; }
.px-7 { padding-left: 4rem !important; padding-right: 4rem !important; }

/* Y-axis (top and bottom) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-7 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

/* Responsive Padding Utilities */
@media screen and (max-width: 767px) {
    .pb-sm-0 { padding-bottom: 0 !important; }
    .pb-sm-1 { padding-bottom: 0.25rem !important; }
    .pb-sm-2 { padding-bottom: 0.5rem !important; }
    .pb-sm-3 { padding-bottom: 1rem !important; }
    .pb-sm-4 { padding-bottom: 1.5rem !important; }
    .pb-sm-5 { padding-bottom: 2rem !important; }
    .pb-sm-6 { padding-bottom: 3rem !important; }
    .pb-sm-7 { padding-bottom: 4rem !important; }

    .pt-sm-0 { padding-top: 0 !important; }
    .pt-sm-1 { padding-top: 0.25rem !important; }
    .pt-sm-2 { padding-top: 0.5rem !important; }
    .pt-sm-3 { padding-top: 1rem !important; }
    .pt-sm-4 { padding-top: 1.5rem !important; }
    .pt-sm-5 { padding-top: 2rem !important; }
    .pt-sm-6 { padding-top: 3rem !important; }
    .pt-sm-7 { padding-top: 4rem !important; }

    .ps-sm-0 { padding-left: 0 !important; }
    .ps-sm-1 { padding-left: 0.25rem !important; }
    .ps-sm-2 { padding-left: 0.5rem !important; }
    .ps-sm-3 { padding-left: 1rem !important; }
    .ps-sm-4 { padding-left: 1.5rem !important; }
    .ps-sm-5 { padding-left: 2rem !important; }
    .ps-sm-6 { padding-left: 3rem !important; }
    .ps-sm-7 { padding-left: 4rem !important; }

    .pe-sm-0 { padding-right: 0 !important; }
    .pe-sm-1 { padding-right: 0.25rem !important; }
    .pe-sm-2 { padding-right: 0.5rem !important; }
    .pe-sm-3 { padding-right: 1rem !important; }
    .pe-sm-4 { padding-right: 1.5rem !important; }
    .pe-sm-5 { padding-right: 2rem !important; }
    .pe-sm-6 { padding-right: 3rem !important; }
    .pe-sm-7 { padding-right: 4rem !important; }

    .py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .py-sm-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
    .py-sm-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .py-sm-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .py-sm-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .py-sm-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-sm-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .py-sm-7 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

    .px-sm-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .px-sm-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
    .px-sm-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .px-sm-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .px-sm-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .px-sm-5 { padding-left: 2rem !important; padding-right: 2rem !important; }
    .px-sm-6 { padding-left: 3rem !important; padding-right: 3rem !important; }
    .px-sm-7 { padding-left: 4rem !important; padding-right: 4rem !important; }
}

/* Responsive Margin Utilities */
@media screen and (max-width: 767px) {
    .mb-sm-0 { margin-bottom: 0 !important; }
    .mb-sm-1 { margin-bottom: 0.25rem !important; }
    .mb-sm-2 { margin-bottom: 0.5rem !important; }
    .mb-sm-3 { margin-bottom: 1rem !important; }
    .mb-sm-4 { margin-bottom: 1.5rem !important; }
    .mb-sm-5 { margin-bottom: 2rem !important; }
    .mb-sm-6 { margin-bottom: 3rem !important; }
    .mb-sm-7 { margin-bottom: 4rem !important; }

    .mt-sm-0 { margin-top: 0 !important; }
    .mt-sm-1 { margin-top: 0.25rem !important; }
    .mt-sm-2 { margin-top: 0.5rem !important; }
    .mt-sm-3 { margin-top: 1rem !important; }
    .mt-sm-4 { margin-top: 1.5rem !important; }
    .mt-sm-5 { margin-top: 2rem !important; }
    .mt-sm-6 { margin-top: 3rem !important; }
    .mt-sm-7 { margin-top: 4rem !important; }

    .my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .my-sm-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
    .my-sm-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
    .my-sm-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
    .my-sm-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    .my-sm-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
    .my-sm-6 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
    .my-sm-7 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
}

/* Source: skeleton.css */
/* ========================================
    SKELETON LOADING STATES
    Modern loading placeholders with shimmer animation
    ======================================== */

/* Base skeleton styles */
.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #f0f0f0 40%,
        #e8e8e8 50%,
        #f0f0f0 60%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

/* Shimmer animation */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton text - for data grid values and text content */
.skeleton-text {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #f0f0f0 40%,
        #e8e8e8 50%,
        #f0f0f0 60%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}

/* Skeleton input - for form fields */
.skeleton-input {
    background: linear-gradient(
        90deg,
        #f8f8f8 0%,
        #f8f8f8 40%,
        #f0f0f0 50%,
        #f8f8f8 60%,
        #f8f8f8 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s ease-in-out infinite;
    border-color: #e0e0e0 !important;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}

/* Skeleton input placeholder text */
.skeleton-input::placeholder {
    color: transparent !important;
}

/* Skeleton card - for utility plan cards */
.skeleton-card {
    background: linear-gradient(
        90deg,
        #fafafa 0%,
        #fafafa 40%,
        #f5f5f5 50%,
        #fafafa 60%,
        #fafafa 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
    opacity: 0.7;
    pointer-events: none;
}

/* Prevent text selection on skeleton elements */
.skeleton,
.skeleton-text,
.skeleton-input,
.skeleton-card {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Skeleton state for entire sections */
.skeleton-section {
    pointer-events: none;
    user-select: none;
}

/* Specific skeleton sizes for common elements */
.skeleton-text--short {
    display: inline-block;
    width: 60px;
    height: 1.2em;
    vertical-align: middle;
}

.skeleton-text--medium {
    display: inline-block;
    width: 120px;
    height: 1.2em;
    vertical-align: middle;
}

.skeleton-text--long {
    display: inline-block;
    width: 200px;
    height: 1.2em;
    vertical-align: middle;
}

/* Data grid specific skeleton styles */
.data-grid__value.skeleton-text {
    min-height: 1.2em;
}

/* Reduce animation on devices that prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .skeleton-text,
    .skeleton-input,
    .skeleton-card {
        animation: none;
        background: #f0f0f0;
    }
}

/* Source: typography.css */
/* ========================================
    TYPOGRAPHY
    ======================================== */

/* Import Lato from Google Fonts */


html {
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-primary);
}

/* Headings */
h1, .h1 {
    font-size: 40px;
    line-height: 1.1;
    font-weight: 400;
    margin: 0;
}

h2, .h2 {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 400;
    margin: 0;
}

h3, .h3 {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 400;
    margin: 0;
}

h4, .h4 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
}

h5, .h5 {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0;
}

h6, .h6 {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0;
}

/* Body Text */
p {
    margin: 0;
}

/* Text Sizes */
.text--large {
    font-size: 18px;
    line-height: 1.4;
}

.text--small {
    font-size: 14px;
    line-height: 1.4;
}

.text--tiny {
    font-size: 12px;
    line-height: 1.4;
}

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

.text--right {
    text-align: right;
}

.text--left {
    text-align: left;
}

/* Font Weights */
.font--normal {
    font-weight: 400;
}

.font--bold {
    font-weight: 700;
}

/* Text Colors */
.text-color--primary {
    color: var(--color-text-primary);
}

.text-color--secondary {
    color: var(--color-text-secondary);
}

.text-color--white {
    color: var(--color-white);
}

.text-color--muted {
    color: #636970;
}

/* Line Heights */
.lh--tight {
    line-height: 1.1 !important;
}

.lh--normal {
    line-height: 1.4 !important;
}

.lh--relaxed {
    line-height: 1.6 !important;
}

/* Text Transform */
.text--uppercase {
    text-transform: uppercase;
}

/* Combined Label Style */
.text--label {
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* Mobile Typography */
@media screen and (max-width: 767px) {
    h1, .h1 {
        font-size: 24px;
        line-height: 1.1;
    }

    h2, .h2 {
        font-size: 20px;
    }
}

/* Source: layout.css */
/* ========================================
    LAYOUT SYSTEM
    Multi-step form with sidebar
    ======================================== */

body {
    display: flex;
    flex-direction: column; /* Mobile First: Column */
    font-family: var(--font-primary);
    overflow-x: hidden;
}

/* Sidebar */
.sidebar {
    position: fixed;
    left: -328px; /* Mobile First: Hidden off-screen */
    top: 0;
    width: 328px;
    height: 100vh;
    background: var(--color-bg-sidebar);
    padding: 48px 38px;
    z-index: 101;
    transition: left 0.3s ease;
}

.sidebar__logo {
    width: 216px;
    height: auto;
    margin-bottom: 52px;
}

/* Main Content Area */
.main-content {
    margin-left: 0; /* Mobile First: No margin */
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    padding-top: 60px; /* Mobile Header height */
}

/* Container */
.container {
    flex: 1;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 16px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Container width variations - Desktop Overrides apply below */
.container--narrow,
.container--medium,
.container--wide {
    max-width: 100%; /* Mobile First: Full width */
}

/* Generic content section */
.content {
    padding: 40px 0;
}

/* Main form wrapper for SPA navigation */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* View sections */
.view {
    display: none;
    flex: 1;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.view[style*="display: block"] {
    opacity: 1;
    display: flex !important;
}

/* Mobile Header */
.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: var(--color-white);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 60px;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.mobile-header__logo {
    width: 120px;
    height: auto;
    object-fit: contain;
}

.mobile-header__menu {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-header__menu-icon {
    width: 24px;
    height: 24px;
    display: block;
}

/* Sidebar Open State (Mobile) */
.sidebar--open {
    left: 0;
}

body.sidebar-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

/* Sidebar Footer - Trust Badge */
.sidebar__footer {
    position: absolute;
    bottom: 24px;
    left: 38px;
    right: 38px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: #666;
}

.sidebar__encryption {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #16a34a;
}

.sidebar__lock {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    flex-shrink: 0;
}

.sidebar__links {
    display: flex;
    gap: 12px;
}

.sidebar__links a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
}

.sidebar__links a:hover {
    text-decoration: underline;
}

/* ========================================
   DESKTOP / TABLET OVERRIDES
   ======================================== */

@media screen and (min-width: 768px) {
    body {
        flex-direction: row; /* Restore row layout */
    }

    .sidebar {
        left: 0; /* Always visible */
        z-index: auto;
    }

    .main-content {
        margin-left: 328px; /* Restore margin */
        padding: 0 80px;
        padding-top: 0;
    }

    .mobile-header {
        display: none; /* Hide mobile header */
    }

    .container {
        padding: 20px 0;
        max-width: 940px;
    }

    /* Restore variations */
    .container--narrow { max-width: 440px; }
    .container--medium { max-width: 680px; }
    .container--wide { max-width: 866px; }

    /* Remove mobile overlay if class persists */
    body.sidebar-open::after {
        display: none;
    }
}

/* Intermediate Tablet Adjustment */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .sidebar {
        width: 280px;
    }

    .main-content {
        margin-left: 280px;
        padding: 0 40px;
    }
}

/* Trust Badge - Bottom Left */
.trust-badge {
    position: fixed;
    bottom: 12px;
    left: 12px;
    z-index: 97;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: #666;
}

.trust-badge__encryption {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #16a34a;
}

.trust-badge__lock {
    width: 16px;
    height: 16px;
}

.trust-badge__links {
    display: flex;
    gap: 8px;
}

.trust-badge__links a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
}

.trust-badge__links a:hover {
    text-decoration: underline;
}

/* Mobile: position above action row */
@media (max-width: 767px) {
    .trust-badge {
        bottom: 92px;
    }
}

/* Source: components/step-nav.css */
/* ========================================
    STEP NAVIGATION COMPONENT
    Sidebar step indicator
    ======================================== */

.step-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.step-nav__item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 19px;
    background: transparent;
    border-radius: 16px;
    transition: background 0.2s ease;
    cursor: default;
    pointer-events: none;
}

/* Remove hover effect since navigation is disabled */
/*
.step-nav__item:hover {
    background: rgba(255, 255, 255, 0.5);
}
*/

.step-nav__item--active {
    background: var(--color-white);
}

.step-nav__item--active:hover {
    background: var(--color-white);
}

.step-nav__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 1px solid var(--color-gray-500);
    background: transparent;
}

.step-nav__item--active .step-nav__dot {
    background: var(--color-primary);
    border: none;
}

.step-nav__label {
    font-size: 16px;
    line-height: 1.1;
    color: var(--color-text-primary);
}

/* Source: components/progress-bar.css */
/* ========================================
    PROGRESS BAR COMPONENT
    Top progress indicator
    ======================================== */

.progress-bar {
    position: relative;
    width: 100%;
    height: 8px;
    margin-top: 40px;
    margin-bottom: 20px;
}

.progress-bar__track {
    width: 100%;
    height: 8px;
    background: var(--color-bg-light);
    border-radius: 8px;
}

.progress-bar__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 8px;
    background: var(--color-primary);
    border-radius: 8px;
    transition: width 0.3s ease;
}

@media screen and (max-width: 767px) {
    .progress-bar {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        margin: 0;
        z-index: 99;
    }

    .progress-bar__track {
        background: #E6DED8;
        border-radius: 0;
    }

    .progress-bar__fill {
        background: #FF7A6D;
        border-radius: 0 8px 8px 0;
    }
}

/* Source: components/info-card.css */
/* ========================================
    INFO CARD COMPONENT
    Informational card with icon and content
    ======================================== */

.info-card {
    padding: 32px;
    border-radius: 16px;
    margin-bottom: 24px;
}

.info-card--beige {
    background: var(--color-bg-card);
}

.info-card--blue {
    background: var(--color-bg-info);
}

.info-card__header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 0;
}

.info-card__icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.info-card__icon--mobile {
    display: none;
}

.info-card__icon--desktop {
    display: block;
}

.info-card__content {
    flex: 1;
}

.info-card__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 12px;
    color: var(--color-text-primary);
}

.info-card__description {
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.info-card__section-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 16px;
    color: var(--color-text-primary);
}

.info-card__service-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 16px;
    color: var(--color-text-primary);
}

.info-card__list {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 0 12px;
}

.info-card__list li {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.info-card__list li:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    .info-card {
        padding: 20px;
        margin-bottom: 16px;
    }

    .info-card__header {
        gap: 0;
    }

    .info-card__icon--desktop {
        display: none;
    }

    .info-card__icon--mobile {
        display: inline-block;
        width: 30px;
        height: 30px;
    }

    .info-card__title {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        font-size: 18px;
    }

    .info-card__description {
        font-size: 14px;
    }

    .info-card__section-title,
    .info-card__service-name,
    .info-card__list li {
        font-size: 16px;
    }
}

/* Source: components/data-grid.css */
/* ========================================
    DATA GRID COMPONENT
    Property details table
    ======================================== */

.data-grid {
    background: var(--color-bg-card);
    border-radius: 16px;
    margin-bottom: 36px;
    overflow: hidden;
}

.data-grid__header {
    font-size: 12px;
    font-weight: 400;
    line-height: 110%;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.data-grid__address {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid #CFC3BA;
}

.data-grid__address-street {
    font-size: 24px;
    font-weight: 400;
    line-height: 120%;
    color: var(--color-text-primary);
}

.data-grid__address-city {
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    color: var(--color-text-primary);
}

.data-grid__table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.data-grid__cell {
    padding: 24px 16px;
    text-align: center;
    border-bottom: 1px solid #CFC3BA;
    border-right: 1px solid #CFC3BA;
}

.data-grid__cell:nth-child(3n) {
    border-right: none;
}

.data-grid__cell:nth-child(4),
.data-grid__cell:nth-child(5),
.data-grid__cell:nth-child(6) {
    border-bottom: none;
}

.data-grid__label {
    font-size: 12px;
    font-weight: 400;
    line-height: 110%;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.data-grid__value {
    font-size: 16px;
    font-weight: 700;
    line-height: 110%;
    color: var(--color-text-primary);
}

/* Utility Usage Grid */
.utility-grid__header {
    font-size: 12px;
    font-weight: 400;
    line-height: 110%;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.utility-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: rgba(13, 144, 164, 0.15);
    border-radius: 16px;
    margin-bottom: 40px;
}

.utility-grid__cell {
    padding: 32px 24px;
    text-align: center;
    border-right: 1px solid rgba(13, 144, 164, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.utility-grid__cell:last-child {
    border-right: none;
}

.utility-grid__cell--callout {
    background: var(--color-white);
    padding: 24px;
}

.utility-grid__label {
    font-size: 12px;
    font-weight: 400;
    line-height: 110%;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.utility-grid__value {
    font-size: 20px;
    font-weight: 700;
    line-height: 110%;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.utility-grid__note {
    font-size: 12px;
    font-weight: 400;
    line-height: 110%;
    color: var(--color-text-primary);
}

@media screen and (max-width: 767px) {

    .data-grid__header {
        margin-bottom: 12px;
        padding-left: 12px;
    }

    .data-grid__address {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 20px;
        gap: 4px;
    }

    .data-grid__address-street {
        font-size: 18px;
    }

    .data-grid__address-city {
        font-size: 12px;
        font-weight: 700;
    }

    .data-grid__label {
        font-size: 10px;
    }

    .data-grid__value {
        font-size: 12px;
    }

    .utility-grid {
        grid-template-columns: 1fr;
    }

    .utility-grid__cell {
        border-right: none;
        border-bottom: 1px solid rgba(13, 144, 164, 0.3);
        align-items: flex-start;
        text-align: left;
    }

    .utility-grid__cell:last-child {
        border-bottom: none;
    }
}

/* Source: components/info-callout.css */
/* ========================================
    INFO CALLOUT COMPONENT
    "Good news" style callout box
    ======================================== */

.info-callout {
    text-align: left;
}

.info-callout--card {
    position: relative;
    background-color: var(--color-white);
    border-radius: 8px;
    padding: 24px 28px;
}

.info-callout__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.info-callout__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 110%;
    color: var(--color-text-primary);
}

.info-callout__text {
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    color: var(--color-text-primary);
    margin: 0;
}

/* Position tooltip trigger in top right corner of card */
.info-callout--card .tooltip-trigger {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Make tooltip open to the left on mobile */
@media screen and (max-width: 767px) {
    .info-callout--card .tooltip {
        right: 0;
        left: auto;
        transform: translateX(0);
    }

    .info-callout--card .tooltip::after {
        left: auto;
        right: 12px;
        transform: translateX(0);
    }
}

/* Source: components/tooltip.css */
/* ========================================
    TOOLTIP COMPONENT
    ======================================== */

.tooltip-trigger {
    position: relative;
    display: inline-block;
    cursor: pointer;
    height: 24px;
    width: 24px;
    flex-shrink: 0;
}

.tooltip-trigger svg {
    width: 24px;
    height: 24px;
    color: #8E8E8E;
}

.tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 50%;
    transform: translateX(50%);
    background-color: var(--color-text-primary);
    color: var(--color-white);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    min-width: 200px;
    max-width: 250px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.tooltip--visible {
    opacity: 1;
    visibility: visible;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-text-primary);
}

/* Source: components/utility-selector.css */
/* ========================================
    UTILITY SELECTOR COMPONENT
    Collapsible utility selection items
    ======================================== */

.utility-selector {
    margin-bottom: 16px;
}

.utility-selector__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 34px;
    background: rgba(13, 144, 164, 0.15);
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.utility-selector__header:hover {
    background: rgba(13, 144, 164, 0.2);
}

.utility-selector__title-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.utility-selector__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    color: #222222;
    min-width: 130px;
}

.utility-selector__description {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #4E4E4E;
}

.utility-selector__badge {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 29px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    pointer-events: none;
}

.utility-selector__badge--added {
    background: #F26355;
    color: var(--color-white);
}

.utility-selector__badge--none {
    background: #B0DCE3;
    color: #000000;
}

.utility-selector__badge--unavailable {
    background: #E0E0E0;
    color: #757575;
}

.utility-selector--disabled {
    opacity: 0.6;
    pointer-events: none;
}

.utility-selector__badge-icon {
    width: 24px;
    height: 24px;
}

.utility-selector__content {
    max-height: 0;
    overflow: hidden;
    padding: 0 34px;
    background: rgba(13, 144, 164, 0.15);
    border-radius: 0 0 16px 16px;
    opacity: 0;
    transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
}

.utility-selector--expanded .utility-selector__header {
    border-radius: 16px 16px 0 0;
}

.utility-selector--expanded .utility-selector__content {
    max-height: 2000px;
    padding: 40px 34px;
    opacity: 1;
}

.utility-selector__section-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: 0.2em;
    text-align: center;
    color: #000000;
    margin-bottom: 12px;
}

.utility-selector__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
}

.utility-selector__footer-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #4E4E4E;
}

.utility-selector__footer-link {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #4E4E4E;
    text-decoration: underline;
}

/* Water Plan Details */
.water-plan-details {
    padding: 20px 0;
}

.plan-info {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.plan-info__logo {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: 8px;
    padding: 12px;
}

.plan-info__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.plan-info__details {
    flex: 1;
}

.plan-info__provider {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #222222;
    margin-bottom: 8px;
}

.plan-info__description {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #4E4E4E;
}

/* Mobile styles for water plan details */
@media screen and (max-width: 767px) {
    .plan-info {
        flex-direction: column;
        gap: 16px;
    }

    .plan-info__logo {
        width: 100px;
        height: 66px;
    }

    .plan-info__provider {
        font-size: 16px;
        line-height: 20px;
    }

    .plan-info__description {
        font-size: 12px;
        line-height: 18px;
    }
}

/* Mobile Styles */
@media screen and (max-width: 767px) {
    .utility-selector {
        margin: 0 0 16px 0;
    }

    .utility-selector__header {
        padding: 20px 16px;
    }

    .utility-selector__title-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .utility-selector__title {
        font-size: 14px;
        line-height: 17px;
        min-width: 0;
    }

    .utility-selector__description {
        font-size: 12px;
        line-height: 14px;
    }

    .utility-selector__badge {
        padding: 6px 20px;
        font-size: 12px;
        line-height: 14px;
        gap: 6px;
    }

    .utility-selector__badge-icon {
        width: 16px;
        height: 16px;
    }

    .utility-selector__content {
        padding: 0 16px;
    }

    .utility-selector--expanded .utility-selector__content {
        padding: 24px 16px;
    }

    .utility-selector__footer {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}

/* Source: components/plan-card.css */
/* ========================================
    PLAN CARD COMPONENT
    Internet/utility plan selection cards
    ======================================== */

.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.plan-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.plan-card--selected {
    outline: 2px solid var(--color-primary);
    box-shadow: 0 4px 12px rgba(255, 122, 109, 0.2);
}

.plan-card__header {
    padding: 20px;
    background: #F5F5F5;
    border-radius: 16px 16px 0 0;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.plan-card__title {
    font-size: 16px;
    font-weight: 400;
    line-height: 110%;
    color: #02101E;
    flex: 1;
}

/* Percentile badge - shows speed ranking */
.plan-card__percentile-badge {
    display: none; /* Hide badge from header - too awkward */
}

/* Speed Score - Dot + Number Display */
.plan-card__score-display {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Row dot indicator (for Download/Upload speeds) */
.plan-card__row-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    flex-shrink: 0;
    vertical-align: middle;
}

.plan-card__score-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

.plan-card__score-value {
    font-family: 'Lato', var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    color: #02101E;
    line-height: 110%;
}

.plan-card__score-max {
    font-family: 'Lato', var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: #808488;
    line-height: 110%;
}

.plan-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    margin: 24px 0;
}

.plan-card__logo img {
    max-width: 156px;
    max-height: 48px;
    object-fit: contain;
}

.plan-card__body {
    margin: 16px 0 24px 0;
    border-top: 1px solid #F4F1EE;
    border-bottom: 1px solid #F4F1EE;
}

.plan-card__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #F4F1EE;
}

.plan-card__row:last-child {
    border-bottom: none;
}

.plan-card__row > *:first-child {
    padding-left: 15px;
}

.plan-card__row > *:last-child {
    padding-right: 15px;
}

.plan-card__label {
    font-size: 12px;
    font-weight: 400;
    line-height: 110%;
    color: #636970;
}

.plan-card__badge {
    display: inline-block;
    padding: 4px 8px;
    background: #F4F1EE;
    color: #636970;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border-radius: 4px;
    white-space: nowrap;
    text-align: center;
    justify-self: center;
}

.plan-card__badge:empty {
    display: none;
}

.plan-card__value {
    font-size: 18px;
    font-weight: 400;
    line-height: 110%;
    color: #02101E;
    text-align: right;
    justify-self: end;
}

.plan-card__footer {
    margin-top: auto;
    padding: 0 25px 24px 25px;
}

.plan-card__button {
    width: 100%;
    padding: 14px 24px;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    color: var(--color-white);
    background: #F26355;
    border: none;
    border-radius: 37px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

.plan-card__button:hover {
    background: var(--color-primary);
}

.plan-card--selected .plan-card__button {
    background: transparent;
    color: #F26355;
    border: 2px solid #F26355;
}

.plan-card--selected .plan-card__button:hover {
    background: rgba(242, 99, 85, 0.1);
}

.plan-card__details {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 110%;
    color: #636970;
    text-decoration: none;
}

.plan-card__details:hover {
    text-decoration: underline;
}

/* No plans message */
.no-plans-message {
    grid-column: 1 / -1;
    padding: 48px 24px;
    text-align: center;
    background: rgba(13, 144, 164, 0.05);
    border-radius: 16px;
}

.no-plans-message p {
    font-size: 16px;
    line-height: 1.5;
    color: #636970;
    margin: 0 0 12px 0;
}

.no-plans-message p:first-child {
    font-size: 18px;
    font-weight: 600;
    color: #02101E;
}

@media screen and (max-width: 1440px) {
    .plan-card__value {
        font-size: 16px;
    }
}

@media screen and (max-width: 1200px) {
    .plan-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .plan-card__header {
        text-align: center;
        padding: 16px;
    }

    .plan-card__title {
        text-align: center;
    }

    .plan-card__logo {
        justify-content: flex-start;
        padding-left: 15px;
    }

    .plan-card__badge {
        font-size: 10px;
        padding: 3px 6px;
        justify-self: start;
    }

    .plan-card__value {
        font-size: 16px;
    }
}

@media screen and (max-width: 767px) {
    .plan-card__value {
        font-size: 18px;
        text-align: right;
        justify-self: end;
    }

    .plan-card__row {
        grid-template-columns: auto 1fr auto;
    }

    .plan-card__badge {
        justify-self: center;
    }

    .plan-card__row--score {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .plan-card__score-bar {
        width: 100%;
        margin-right: 0;
    }

    .plan-card__score-text {
        font-size: 13px;
    }
}

/* Source: components/plan-options.css */
/* ========================================
    PLAN OPTIONS COMPONENT
    Customizable options for selected plans
    ======================================== */

/* Plan Options Header */
.plan-options-header {
    text-align: center;
    padding-bottom: 8px;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--color-border-light);
}

.plan-options-header__vendor {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--color-text-dark);
}

.plan-options-header__plan {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-medium);
}

/* Plan Options List */
.plan-options-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

/* Option Card */
.option-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border-medium);
    border-radius: 12px;
    padding: 20px 24px;
    transition: all 0.2s ease;
}

.option-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.option-card--selected {
    border-color: var(--color-primary);
    background: rgba(13, 144, 164, 0.03);
}

.option-card--error {
    border-color: #EF5350;
    background: rgba(239, 83, 80, 0.03);
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.option-card__header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
}

.option-card__checkbox-wrapper {
    flex-shrink: 0;
    padding-top: 2px;
}

.option-card__checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border-medium);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #FFFFFF;
    position: relative;
}

.option-card__checkbox:checked {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.option-card__checkbox:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.option-card__checkbox:hover:not(:disabled) {
    border-color: var(--color-primary);
}

.option-card__content {
    flex: 1;
    min-width: 0;
}

.option-card__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.option-card__name {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-text-dark);
}

.option-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.option-card__badge--required {
    background: #FFF4E6;
    color: #E67E22;
    border: 1px solid #F39C12;
}

.option-card__badge--optional {
    background: #E8F8F5;
    color: #16A085;
    border: 1px solid #1ABC9C;
}

.option-card__badge--addon {
    background: #EBF5FB;
    color: #2E86C1;
    border: 1px solid #3498DB;
}

.option-card__pricing {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.option-card__price {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: var(--color-primary-dark);
}

.option-card__price-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-medium);
    margin-left: 4px;
}

.option-card__price--free {
    color: #27AE60;
}

/* Radio Button Styles */
.option-card--radio .option-card__content--full {
    width: 100%;
}

.option-card__radio-group {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-card__radio-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-border-medium);
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.option-card__radio-choice:hover {
    border-color: var(--color-primary);
    background: rgba(13, 144, 164, 0.03);
}

.option-card__radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-medium);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #FFFFFF;
    position: relative;
    flex-shrink: 0;
}

.option-card__radio:checked {
    border-color: var(--color-primary-dark);
    background: #FFFFFF;
}

.option-card__radio:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary-dark);
}

.option-card__radio:hover:not(:disabled) {
    border-color: var(--color-primary);
}

.option-card__radio-choice:has(.option-card__radio:checked) {
    border-color: var(--color-primary);
    background: rgba(13, 144, 164, 0.05);
}

.option-card__radio-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--color-text-dark);
    cursor: pointer;
}

/* Disabled Option Cards */
.option-card--disabled {
    background: #F5F5F5;
    border-color: #E0E0E0;
    cursor: not-allowed;
    opacity: 0.7;
}

.option-card--disabled:hover {
    border-color: #E0E0E0;
    box-shadow: none;
}

.option-card--disabled .option-card__checkbox {
    cursor: not-allowed;
    background: #E0E0E0;
    border-color: #BDBDBD;
}

.option-card--disabled .option-card__content--disabled {
    cursor: not-allowed;
    color: var(--color-text-medium);
}

.option-card--disabled .option-card__name {
    color: var(--color-text-medium);
}

/* Long Description Section */
.plan-long-description {
    background: #FFFFFF;
    border: 1px solid var(--color-border-medium);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.plan-long-description__content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-dark);
    margin-bottom: 12px;
}

.plan-long-description__content--expanded {
    /* Full content displayed */
}

.plan-long-description__toggle {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.plan-long-description__toggle:hover {
    color: var(--color-primary-dark);
}

/* Price Summary Section */
.plan-price-summary {
    background: #F8FCFD;
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.plan-price-summary__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0 0 20px 0;
    text-align: center;
}

.plan-price-summary__section {
    margin-bottom: 20px;
}

.plan-price-summary__section:last-child {
    margin-bottom: 0;
}

.plan-price-summary__section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-light);
}

.plan-price-summary__disclaimer {
    font-size: 13px;
    font-style: italic;
    color: var(--color-text-medium);
    margin-bottom: 8px;
    padding: 8px 12px;
    background: #FFF4E6;
    border-left: 3px solid #F39C12;
    border-radius: 4px;
}

.plan-price-summary__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.plan-price-summary__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--color-text-dark);
}

.plan-price-summary__item--note {
    font-style: italic;
    color: var(--color-text-medium);
    justify-content: center;
}

.plan-price-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary-dark);
    padding-top: 12px;
    border-top: 2px solid var(--color-primary);
}

/* Error Message */
.error-message {
    background: #FFEBEE;
    border: 1px solid #EF5350;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
    color: #C62828;
    text-align: center;
}

/* Service Date Section */
.service-date-section {
    margin-bottom: 32px;
}

.service-date-section__header {
    margin-bottom: 16px;
}

.service-date-section__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0 0 8px 0;
}

.service-date-section__subtitle {
    font-size: 15px;
    color: var(--color-text-medium);
    margin: 0 0 12px 0;
}

.service-date-section__picker-wrapper {
    margin-bottom: 8px;
}

.service-date-section__info {
    font-size: 12px;
    color: var(--color-text-medium);
    margin: 8px 0 0 0;
    font-style: italic;
}

/* ONIT Water Filtration Section */
.onit-water-section {
    margin-top: 16px;
    margin-bottom: 24px;
}

.onit-water-section .option-card {
    background: linear-gradient(135deg, rgba(13, 144, 164, 0.03) 0%, rgba(255, 255, 255, 1) 100%);
    border-color: var(--color-primary-light, #4DB6C5);
}

.onit-water-section .option-card__name {
    font-size: 15px;
    line-height: 1.4;
}

/* Mobile Styles */
@media screen and (max-width: 767px) {
    .plan-options-header {
        padding-bottom: 8px;
        margin-bottom: 12px !important;
    }

    .plan-options-header__vendor {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 0;
    }

    .plan-options-header__plan {
        font-size: 14px;
        line-height: 18px;
    }

    .plan-options-list {
        gap: 12px;
        margin-bottom: 24px;
    }

    .option-card {
        padding: 16px;
    }

    .option-card__header {
        gap: 12px;
    }

    .option-card__checkbox {
        width: 20px;
        height: 20px;
    }

    .option-card__checkbox:checked::after {
        left: 5px;
        top: 2px;
        width: 5px;
        height: 9px;
    }

    .option-card__name {
        font-size: 14px;
        line-height: 18px;
    }

    .option-card__badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    .option-card__pricing {
        gap: 12px;
        margin-top: 6px;
    }

    .option-card__price {
        font-size: 13px;
        line-height: 16px;
    }

    .option-card__price-label {
        font-size: 11px;
    }

    .error-message {
        font-size: 13px;
        padding: 10px 14px;
        margin-bottom: 20px;
    }

    /* Radio button mobile styles */
    .option-card__radio-group {
        margin-top: 12px;
        gap: 10px;
    }

    .option-card__radio-choice {
        padding: 10px;
    }

    .option-card__radio {
        width: 18px;
        height: 18px;
    }

    .option-card__radio:checked::after {
        width: 8px;
        height: 8px;
    }

    .option-card__radio-label {
        font-size: 13px;
        line-height: 18px;
    }

    /* Long description mobile styles */
    .plan-long-description {
        padding: 16px;
        margin-bottom: 20px;
    }

    .plan-long-description__content {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .plan-long-description__toggle {
        font-size: 13px;
    }

    /* Price summary mobile styles */
    .plan-price-summary {
        padding: 20px 16px;
        margin-bottom: 24px;
    }

    .plan-price-summary__title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .plan-price-summary__section {
        margin-bottom: 16px;
    }

    .plan-price-summary__section-title {
        font-size: 15px;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }

    .plan-price-summary__disclaimer {
        font-size: 12px;
        padding: 6px 10px;
    }

    .plan-price-summary__items {
        gap: 6px;
        margin-bottom: 10px;
    }

    .plan-price-summary__item {
        font-size: 13px;
    }

    .plan-price-summary__total {
        font-size: 15px;
        padding-top: 10px;
    }

    /* Service date section mobile styles */
    .service-date-section {
        margin-bottom: 24px;
    }

    .service-date-section__header {
        margin-bottom: 12px;
    }

    .service-date-section__title {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .service-date-section__subtitle {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .service-date-section__info {
        font-size: 11px;
    }
}

/* Source: components/modal.css */
/* Modal Component Styles */

/* Modal overlay and base */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.modal--active {
    display: flex;
}

/* Modal overlay background */
.modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
}

/* Modal container */
.modal__container {
    position: relative;
    background: white;
    border-radius: 12px;
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 1;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal header */
.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.modal__title {
    font-size: 22px;
    font-weight: 600;
    color: #212121;
    margin: 0;
    padding-right: 20px;
}

.modal__close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #757575;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal__close:hover {
    color: #212121;
    background-color: #f5f5f5;
}

.modal__close svg {
    width: 24px;
    height: 24px;
}

/* Modal body */
.modal__body {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
}

/* Custom scrollbar for modal body */
.modal__body::-webkit-scrollbar {
    width: 8px;
}

.modal__body::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

.modal__body::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 4px;
}

.modal__body::-webkit-scrollbar-thumb:hover {
    background: #9e9e9e;
}

/* Modal footer */
.modal__footer {
    padding: 20px 28px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

/* Modal sections */
.modal__section {
    margin-bottom: 28px;
}

.modal__section:last-child {
    margin-bottom: 0;
}

.modal__section-title {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    margin: 0 0 12px 0;
}

/* Modal logo */
.modal__logo {
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0 auto 16px;
}

/* Modal headline */
.modal__headline {
    font-size: 15px;
    line-height: 1.6;
    color: #424242;
    margin: 0;
}

/* Modal details list */
.modal__details-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 20px;
    margin: 0;
}

.modal__details-list dt {
    font-weight: 600;
    color: #424242;
    margin: 0;
}

.modal__details-list dd {
    color: #212121;
    margin: 0;
}

.modal__highlight {
    font-size: 18px;
    font-weight: 700;
    color: #1976d2;
}

/* Modal badges */
.modal__badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal__badge--green {
    background-color: #e8f5e9;
    color: #2e7d32;
}

/* Modal pricing grid */
.modal__pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.modal__pricing-card {
    background: #f5f5f5;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s ease;
}

.modal__pricing-card:hover {
    background: #eeeeee;
    transform: translateY(-2px);
}

.modal__pricing-card--highlighted {
    background: #e3f2fd;
    border: 2px solid #1976d2;
}

.modal__pricing-card--highlighted:hover {
    background: #bbdefb;
}

.modal__pricing-usage {
    font-size: 13px;
    color: #616161;
    margin-bottom: 8px;
    font-weight: 500;
}

.modal__pricing-cost {
    font-size: 20px;
    font-weight: 700;
    color: #212121;
    margin-bottom: 4px;
}

.modal__pricing-rate {
    font-size: 13px;
    color: #757575;
}

/* Modal document list */
.modal__document-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal__document-list li {
    margin-bottom: 8px;
}

.modal__document-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f5f5f5;
    border-radius: 6px;
    color: #1976d2;
    text-decoration: none;
    transition: all 0.2s ease;
}

.modal__document-link:hover {
    background: #e3f2fd;
    color: #1565c0;
    transform: translateX(4px);
}

.modal__document-link svg {
    flex-shrink: 0;
}

/* Modal disclaimer */
.modal__section--disclaimer {
    background: #fff3e0;
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid #ff9800;
}

.modal__disclaimer {
    font-size: 13px;
    line-height: 1.6;
    color: #424242;
    margin: 0;
}

.modal__disclaimer strong {
    color: #e65100;
}

/* Modal buttons */
.modal__button {
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal__button--primary {
    background: #1976d2;
    color: white;
}

.modal__button--primary:hover {
    background: #1565c0;
}

.modal__button--secondary {
    background: #e0e0e0;
    color: #212121;
}

.modal__button--secondary:hover {
    background: #bdbdbd;
}

/* Renewable badge on plan card */
.plan-card__renewable-badge {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, #2e7d32, #43a047);
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

/* Plan card value highlights */
.plan-card__value--small {
    font-size: 13px;
    line-height: 1.4;
}

.plan-card__value--highlight {
    font-weight: 700;
    color: #1976d2;
    font-size: 16px;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .modal__container {
        width: 95%;
        max-height: 90vh;
        margin: 20px 0;
    }

    .modal__header {
        padding: 20px;
    }

    .modal__title {
        font-size: 18px;
    }

    .modal__body {
        padding: 20px;
    }

    .modal__footer {
        padding: 16px 20px;
    }

    .modal__pricing-grid {
        grid-template-columns: 1fr;
    }

    .modal__details-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .modal__details-list dt {
        font-weight: 700;
    }

    .modal__details-list dd {
        margin-bottom: 12px;
    }
}

/* Source: components/internet-modal.css */
/* Internet Plan Details Modal Styles */

/* Container extends base modal styling */
.internet-modal {
    max-width: 800px;
}

/* Provider Logo */
.internet-modal__logo {
    text-align: center;
    margin-bottom: 24px;
}

.internet-modal__logo-img {
    max-width: 180px;
    height: auto;
}

/* Two-column layout for desktop */
.internet-modal__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

@media (max-width: 700px) {
    .internet-modal__content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Section styling */
.internet-modal__section {
    margin-bottom: 24px;
}

.internet-modal__section:last-child {
    margin-bottom: 0;
}

.internet-modal__section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.internet-modal__section-title {
    font-size: 12px;
    font-weight: 700;
    color: #636970;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* ========================================
   SPEED SCORE SECTION
   ======================================== */

.internet-modal__speed-score {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}

/* Circular Score */
.internet-modal__score-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 6px solid;
    background: #fff;
}

.internet-modal__score-circle--high {
    border-color: #0d90a4;
}

.internet-modal__score-circle--medium {
    border-color: #f5a623;
}

.internet-modal__score-circle--low {
    border-color: #f26355;
}

.internet-modal__score-value {
    font-size: 36px;
    font-weight: 700;
    color: #02101E;
}

/* Score Content */
.internet-modal__score-content {
    flex: 1;
}

.internet-modal__score-headline {
    font-size: 16px;
    font-weight: 600;
    color: #02101E;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.internet-modal__score-description {
    font-size: 14px;
    color: #636970;
    margin: 0;
    line-height: 1.5;
}

/* ========================================
   SPEED METRICS
   ======================================== */

.internet-modal__speed-metrics {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.internet-modal__speed-metric {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #f8f8f8;
    border-radius: 8px;
}

.internet-modal__metric-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.internet-modal__metric-dot--green {
    background: #0d90a4;
}

.internet-modal__metric-dot--yellow {
    background: #f5a623;
}

.internet-modal__metric-dot--orange {
    background: #f26355;
}

.internet-modal__metric-label {
    font-size: 14px;
    color: #636970;
    flex: 1;
}

.internet-modal__metric-value {
    font-size: 16px;
    font-weight: 600;
    color: #02101E;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Disclaimer */
.internet-modal__disclaimer {
    font-size: 11px;
    color: #8c8c8c;
    line-height: 1.5;
    margin-top: 16px;
}

/* ========================================
   EST. CAPABILITIES SECTION
   ======================================== */

.internet-modal__capabilities {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 600px) {
    .internet-modal__capabilities {
        grid-template-columns: repeat(2, 1fr);
    }
}

.internet-modal__capability {
    text-align: center;
    padding: 12px 8px;
}

/* Capability Icon Container */
.internet-modal__capability-icon {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
}

.internet-modal__capability-icon img {
    width: 48px;
    height: 48px;
    display: block;
}

/* Badge indicator on icon */
.internet-modal__capability-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.internet-modal__capability-badge--excellent {
    background: #2C9E5C;
}

.internet-modal__capability-badge--good {
    background: #8CDB9D;
}

.internet-modal__capability-badge--adequate {
    background: #E9E687;
}

.internet-modal__capability-badge--poor {
    background: #F4A0A0;
}

/* Capability Name */
.internet-modal__capability-name {
    font-size: 14px;
    font-weight: 600;
    color: #02101E;
    margin: 0 0 6px 0;
}

/* Capability Rating */
.internet-modal__capability-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #636970;
    margin: 0;
}

.internet-modal__capability-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.internet-modal__capability-dot--excellent {
    background: #2C9E5C;
}

.internet-modal__capability-dot--good {
    background: #8CDB9D;
}

.internet-modal__capability-dot--adequate {
    background: #E9E687;
}

.internet-modal__capability-dot--poor {
    background: #F4A0A0;
}

/* ========================================
   MOBILE ADJUSTMENTS
   ======================================== */

@media (max-width: 600px) {
    .internet-modal__speed-score {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .internet-modal__score-circle {
        width: 90px;
        height: 90px;
    }

    .internet-modal__score-value {
        font-size: 32px;
    }

    .internet-modal__score-headline {
        font-size: 15px;
    }

    .internet-modal__score-description {
        font-size: 13px;
    }

    .internet-modal__speed-metric {
        padding: 12px 14px;
    }

    .internet-modal__metric-label {
        font-size: 13px;
    }

    .internet-modal__metric-value {
        font-size: 14px;
    }

    .internet-modal__capability-icon img {
        width: 40px;
        height: 40px;
    }

    .internet-modal__capability-name {
        font-size: 13px;
    }

    .internet-modal__capability-rating {
        font-size: 11px;
    }
}

/* Source: components/autocomplete.css */
/* ========================================
    ADDRESS AUTOCOMPLETE STYLES
    ======================================== */

/* Autocomplete Container */
.autocomplete-container {
    position: relative;
}

/* Autocomplete Dropdown */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border-medium);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.autocomplete-dropdown.show {
    display: block;
}

/* Autocomplete Items */
.autocomplete-item {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border-light);
    cursor: pointer;
    line-height: 1.5;
    font-size: 16px;
    color: var(--color-text-primary);
}

.autocomplete-item:first-child {
    border-top: none;
}

.autocomplete-item:hover {
    background: #f5f5f5;
}

/* Adjust input when autocomplete is active */
.autocomplete-container input:focus {
    border-radius: 8px 8px 0 0;
}

/* Error/Validation State */
.autocomplete-container.has-error input {
    border-color: #dc3545;
}

.autocomplete-error {
    display: none;
    margin-top: 8px;
    font-size: 14px;
    color: #dc3545;
}

.autocomplete-container.has-error .autocomplete-error {
    display: block;
}

/* Loading State */
.autocomplete-container.is-loading input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z' opacity='.25'/%3E%3Cpath fill='%23666' d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'%3E%3CanimateTransform attributeName='transform' dur='0.75s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px 20px;
    padding-right: 50px;
}

/* Mobile Responsive */
@media screen and (max-width: 767px) {
    .autocomplete-dropdown {
        border-radius: 0 0 8px 8px;
        max-height: 250px;
    }

    .autocomplete-item {
        padding: 14px 16px;
        font-size: 16px;
    }
}

/* Source: components/spinner.css */
/* Loading Spinner Component */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #F26355; /* Brand color */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    margin-top: 24px;
    font-size: 28px;
    font-weight: 700;
    color: #222;
    text-align: center;
}

.loading-subheader {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 600;
    color: #222;
    text-align: center;
}

.loading-value-prop {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
    text-align: center;
    min-height: 20px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.loading-value-prop.fade-out {
    opacity: 0;
}

/* Legacy class for backwards compatibility */
.loading-subtext {
    margin-top: 8px;
    font-size: 14px;
    color: #666;
    text-align: center;
}

/* Small spinner for inline use */
.spinner-small {
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #F26355;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

/* Plans loading state */
.plans-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
    grid-column: 1 / -1;
    width: 100%;
}

.plans-loading .spinner-small {
    width: 32px;
    height: 32px;
    border-width: 4px;
    margin: 0;
}

.plans-loading__text {
    font-size: 14px;
    font-weight: 500;
    color: #686868;
}

/* Source: components/toggle.css */
/* Toggle Switch Component for Residential/Business - Pill Button Style */

.toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    padding: 20px;
}

/* Pill-shaped toggle container */
.toggle-switch {
    position: relative;
    display: inline-flex;
    gap: 20px;
    background: #E8E8E8;
    border-radius: 50px;
    padding: 4px;
    cursor: pointer;
}

/* Individual toggle options */
.toggle-option {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    background: transparent;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 2;
    white-space: nowrap;
}

.toggle-option:hover:not(.active) {
    color: #333;
}

.toggle-option.active {
    color: white;
}

/* Active background slider */
.toggle-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    background: linear-gradient(135deg, #F26355 0%, #FF8A7A 100%);
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: 0 2px 8px rgba(242, 99, 85, 0.3);
}

/* When Residential is active */
.toggle-switch[data-active="residential"] .toggle-slider {
    width: calc((100% - 28px) / 2);
    left: 4px;
}

/* When Business is active */
.toggle-switch[data-active="business"] .toggle-slider {
    width: calc((100% - 28px) / 2);
    left: calc((100% - 28px) / 2 + 24px);
}

/* Hide the old labels */
.toggle-label {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .toggle-container {
        padding: 16px;
    }

    .toggle-option {
        padding: 10px 24px;
        font-size: 14px;
    }
}

/* Focus states for accessibility */
.toggle-option:focus {
    outline: 2px solid #F26355;
    outline-offset: 2px;
}

.toggle-option:focus:not(:focus-visible) {
    outline: none;
}

/* Source: components/date-picker.css */
/* Date Picker Styling - Flatpickr */

/* Input field styling */
.input-with-icon input[type="text"]#move-date {
    cursor: pointer;
    background-color: #fff;
}

.input-with-icon input[type="text"]#move-date[readonly] {
    background-color: #fff;
    cursor: pointer;
}

/* Ensure the calendar icon stays visible and clickable */
.input-with-icon .input-icon {
    z-index: 1;
    pointer-events: none;
}

/* Flatpickr calendar customization */
.flatpickr-calendar {
    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* Calendar header */
.flatpickr-months {
    background: var(--color-bg-card, #F4F1EE);
    border-radius: 8px 8px 0 0;
}

.flatpickr-month {
    color: #343A40;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--color-bg-card, #F4F1EE);
    color: #343A40;
}

.flatpickr-current-month input.cur-year {
    color: #343A40;
    font-weight: 700;
}

/* Navigation arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    fill: #343A40;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    fill: #343A40;
    opacity: 0.6;
}

/* Weekday labels */
.flatpickr-weekdays {
    background: #f8f8f8;
}

span.flatpickr-weekday {
    color: #595959;
    font-weight: 700;
    font-size: 13px;
}

/* Day cells */
.flatpickr-day {
    color: #1A1A1A;
    font-weight: 500;
    border-radius: 4px;
}

.flatpickr-day:hover {
    background: #FFE9E7;
    border-color: #FFE9E7;
    color: #1A1A1A;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #F26355;
    border-color: #F26355;
    color: #fff;
    font-weight: 700;
}

/* Today */
.flatpickr-day.today {
    border-color: #F26355;
    color: #F26355;
    font-weight: 700;
}

.flatpickr-day.today:hover {
    background: #FFE9E7;
    border-color: #F26355;
    color: #F26355;
}

/* Disabled days (past dates) */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: #d0d0d0;
    cursor: not-allowed;
    background: transparent;
}

/* Mobile responsive */
@media screen and (max-width: 767px) {
    .flatpickr-calendar {
        font-size: 14px;
    }

    .flatpickr-day {
        max-width: 36px;
        height: 36px;
        line-height: 36px;
    }

    /* Ensure date picker input matches other input heights on mobile */
    .input-with-icon input[type="text"]#move-date,
    input.flatpickr-input#move-date,
    .input-with-icon input.flatpickr-input,
    #move-date.flatpickr-input {
        min-height: 56px !important;
        height: 56px !important;
        padding: 16px !important;
        padding-left: 50px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
    }

    /* Target Flatpickr's mobile input and all readonly inputs in date wrappers */
    input.flatpickr-mobile,
    .input-with-icon input.flatpickr-mobile,
    .input-with-icon input[readonly] {
        width: 100% !important;
        min-height: 56px !important;
        height: 56px !important;
        padding: 16px !important;
        padding-left: 50px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
    }
}

/* Source: components/document-upload.css */
/* ========================================
    Document Upload Component
    ======================================== */

/* Container */
.documents-required-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.document-upload-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Label */
.document-upload-label {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-primary, #1a1a1a);
}

.document-upload-label .required {
    color: var(--color-error, #f26355);
    margin-left: 0.25rem;
}

/* Upload Zone */
.upload-zone {
    position: relative;
    border: 2px dashed var(--color-border, #d1d5db);
    border-radius: 8px;
    background-color: var(--color-bg-light, #f9fafb);
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-zone:hover {
    border-color: var(--color-primary, #f26355);
    background-color: #fff;
}

.upload-zone.drag-over {
    border-color: var(--color-primary, #f26355);
    background-color: rgba(242, 99, 85, 0.05);
}

/* Hide native file input */
.upload-input {
    display: none;
}

/* Upload Prompt */
.upload-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.upload-icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-secondary, #6b7280);
}

.upload-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.upload-text-primary {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-primary, #1a1a1a);
}

.upload-text-secondary {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #6b7280);
}

/* Upload Preview */
.upload-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #fff;
    border-radius: 8px;
}

.upload-preview.hidden {
    display: none;
}

.preview-image-container {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--color-bg-light, #f9fafb);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-image-container img.hidden {
    display: none;
}

.preview-pdf-icon {
    width: 48px;
    height: 48px;
    color: #dc2626;
}

.preview-pdf-icon.hidden {
    display: none;
}

.preview-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.preview-filename {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary, #1a1a1a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-filesize {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6b7280);
}

.btn-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #dc2626;
    background-color: transparent;
    border: 1px solid #dc2626;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.btn-remove:hover {
    background-color: #dc2626;
    color: #fff;
}

.btn-remove svg {
    width: 16px;
    height: 16px;
}

/* Upload Progress */
.upload-progress {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 1rem;
}

.upload-progress.hidden {
    display: none;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--color-bg-light, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: var(--color-primary, #f26355);
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #6b7280);
    text-align: center;
}

/* Upload Error */
.upload-error {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #dc2626;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
}

.upload-error.hidden {
    display: none;
}

/* Info Notice */
.info-notice {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
}

.info-notice__icon {
    width: 24px;
    height: 24px;
    color: #3b82f6;
    flex-shrink: 0;
}

.info-notice__content {
    flex: 1;
}

.info-notice__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 0.25rem;
}

.info-notice__text {
    font-size: 0.875rem;
    color: #1e40af;
    line-height: 1.5;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .upload-zone {
        padding: 1.5rem 1rem;
        min-height: 180px;
    }

    .upload-icon {
        width: 40px;
        height: 40px;
    }

    .upload-text-primary {
        font-size: 0.9375rem;
    }

    .upload-text-secondary {
        font-size: 0.8125rem;
    }

    .upload-preview {
        padding: 0.75rem;
    }

    .preview-image-container {
        width: 64px;
        height: 64px;
    }

    .preview-pdf-icon {
        width: 40px;
        height: 40px;
    }

    .info-notice {
        padding: 0.875rem;
    }

    .documents-required-container {
        gap: 1.5rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .upload-zone {
        /* Larger touch target for mobile */
        min-height: 200px;
    }

    .btn-remove {
        padding: 0.625rem 1.125rem;
        min-height: 44px; /* iOS recommended minimum */
    }
}

/* Source: components/order-confirmation.css */
/* ========================================
    ORDER CONFIRMATION SCREEN
    Styles for View 9 - Order confirmation
    ======================================== */

/* Confirmation Header */
.confirmation-header {
    padding: 2rem 0;
}

.confirmation-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary, #686868);
    margin: 0;
}

/* Checkmark Animation */
.confirmation-checkmark {
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkmark-icon {
    width: 80px;
    height: 80px;
}

.checkmark-circle {
    stroke: var(--color-primary-dark, #F26355);
    stroke-width: 2;
    stroke-miterlimit: 10;
    fill: none;
    animation: checkmark-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    stroke: var(--color-primary-dark, #F26355);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: checkmark-check 0.3s 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

@keyframes checkmark-circle {
    0% {
        stroke-dasharray: 0 157;
    }
    100% {
        stroke-dasharray: 157 157;
    }
}

@keyframes checkmark-check {
    0% {
        stroke-dashoffset: 48;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Confirmation Card */
.confirmation-card {
    background: #ffffff;
    border: 1px solid var(--color-border-medium, #C3A58F);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.confirmation-card__header {
    background: var(--color-bg-sidebar, #F4F1EE);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border-medium, #C3A58F);
}

.confirmation-card__header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary, #343A40);
}

.confirmation-card__body {
    padding: 1.5rem;
}

.confirmation-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-bg-light, #E6DED8);
}

.confirmation-detail:last-child {
    border-bottom: none;
}

.confirmation-detail__label {
    font-size: 0.9375rem;
    color: var(--color-text-secondary, #686868);
    font-weight: 500;
}

.confirmation-detail__value {
    font-size: 0.9375rem;
    color: var(--color-text-primary, #343A40);
    font-weight: 600;
    text-align: right;
}

/* Next Steps Section */
.next-steps h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary, #343A40);
    margin-bottom: 2rem;
}

/* Service Next Step Cards */
.service-next-step {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid var(--color-border-medium, #C3A58F);
    border-radius: 16px;
    margin-bottom: 1.25rem;
    transition: all 0.2s ease;
}

.service-next-step:hover {
    border-color: var(--color-primary, #FF7A6D);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.service-next-step__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-sidebar, #F4F1EE);
    border-radius: 8px;
}

.service-next-step__icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-primary-dark, #F26355);
}

.service-next-step__content {
    flex: 1;
}

.service-next-step__content h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary, #343A40);
}

.service-next-step__content p {
    margin: 0.5rem 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-secondary, #686868);
}

/* Success status (Water) */
.service-next-step__status--success {
    color: var(--color-text-primary, #343A40);
    font-weight: 600;
    background: var(--color-bg-info, #DBEEF1);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--color-primary-dark, #F26355);
}

/* Notice/Warning styles (Internet, Electricity) */
.service-next-step__notice {
    background: var(--color-bg-card, #F4F1EE);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--color-primary-dark, #F26355);
    margin-bottom: 0.75rem;
}

.service-next-step__notice strong {
    color: var(--color-text-primary, #343A40);
}

.service-next-step__alternative {
    margin-top: 0.75rem;
}

.service-next-step__alternative strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text-primary, #343A40);
}

/* Phone Link */
.phone-link {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary-dark, #F26355);
    text-decoration: none;
    transition: color 0.2s ease;
}

.phone-link:hover {
    color: var(--color-primary, #FF7A6D);
    text-decoration: underline;
}

/* Button overrides for confirmation screen */
.service-next-step .btn--primary {
    background: var(--color-primary-dark, #F26355);
    color: #ffffff;
    border: none;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 37px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.service-next-step .btn--primary:hover {
    background: var(--color-primary, #FF7A6D);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(242, 99, 85, 0.3);
}

.service-next-step .btn--large {
    padding: 1rem 2rem;
    font-size: 1.0625rem;
}

/* Info Notice (Email confirmation) */
.info-notice {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-bg-info, #DBEEF1);
    border-radius: 16px;
    margin-bottom: 24px;
}

.info-notice__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--color-primary-dark, #F26355);
}

.info-notice__content {
    flex: 1;
}

.info-notice__title {
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary, #343A40);
}

.info-notice__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-primary, #343A40);
}

/* Trust Context Box */
.trust-context {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--color-bg-info, #DBEEF1);
    border-radius: 8px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .confirmation-detail {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .confirmation-detail__value {
        text-align: left;
    }

    .service-next-step {
        flex-direction: column;
        gap: 1rem;
    }

    .service-next-step__icon {
        width: 40px;
        height: 40px;
    }

    .service-next-step__icon svg {
        width: 24px;
        height: 24px;
    }

    .phone-link {
        font-size: 1.125rem;
    }
}

/* Source: components/usage-chart.css */
/* Usage Chart Component */
/* Monthly bar chart for electricity usage visualization */

.usage-level-selector {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.usage-level-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    transition: all 0.2s ease;
}

.usage-level-btn:hover {
    border-color: #F26355;
    color: #F26355;
}

.usage-level-btn--active {
    background: #F26355;
    color: white;
    border-color: #F26355;
}

.usage-level-btn--active:hover {
    background: #d9534f;
    border-color: #d9534f;
    color: white;
}

/* Chart container */
.usage-chart {
    margin: 1rem auto 1.5rem;
    max-width: 500px;
    padding: 0 1rem;
}

.usage-chart__bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 80px;
    gap: 3px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e0e0e0;
}

.usage-chart__bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    height: 100%;
}

.usage-chart__bar {
    width: 100%;
    max-width: 30px;
    background: #4CAF50;
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
    cursor: pointer;
}

.usage-chart__bar:hover {
    opacity: 0.85;
}

.usage-chart__bar--summer {
    background: #F26355;
}

.usage-chart__label {
    font-size: 9px;
    color: #888;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tooltip styles for bar hover */
.usage-chart__bar[data-tooltip] {
    position: relative;
}

.usage-chart__bar[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #343A40;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 10;
}

.usage-chart__bar[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #343A40;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 10;
}

.usage-chart__bar[data-tooltip]:hover::before,
.usage-chart__bar[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Loading state */
.usage-chart--loading .usage-chart__bar {
    background: #e0e0e0;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .usage-level-selector {
        gap: 0.35rem;
    }

    .usage-level-btn {
        padding: 0.4rem 0.75rem;
        font-size: 12px;
    }

    .usage-chart__bars {
        height: 60px;
        gap: 2px;
    }

    .usage-chart__label {
        font-size: 8px;
    }
}

/* Source: buttons.css */
/* ========================================
    BUTTONS
    ======================================== */

button, .btn {
    display: inline-block;
    width: fit-content;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    padding: 16px 44px;
    border: none;
    border-radius: 37px;
    background: var(--color-primary-dark);
    color: var(--color-white);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover, .btn:hover {
    background: var(--color-primary);
    transform: translateY(-1px);
}

button:active, .btn:active {
    transform: translateY(0);
}

button:disabled, .btn:disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    transform: none;
}

/* Secondary Button */
.btn--secondary {
    background: transparent;
    color: var(--color-primary-dark);
    border: 2px solid var(--color-primary-dark);
}

.btn--secondary:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

/* Button Sizes */
.btn--large {
    padding: 20px 60px;
    font-size: 20px;
}

.btn--small {
    padding: 12px 32px;
    font-size: 16px;
}

/* Button Width */
.btn--full-width {
    width: 100%;
}

/* Back Button */
.btn--back {
    background: transparent;
    color: #595959;
    padding: 0;
    font-family: 'Inter', var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
}

.btn--back::before {
    content: '← ';
}

.btn--back:hover {
    background: transparent;
    color: var(--color-text-primary);
    transform: translateX(-2px);
}

/* Action Row */
.action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
}

@media screen and (max-width: 767px) {
    .action-row {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-white);
        border-top: 1px solid #C3A58F;
        padding: 12px 20px;
        margin: 0;
        z-index: 98;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }

    /* Mobile buttons */
    .btn,
    .btn--secondary {
        padding: 12px 24px;
        font-size: 16px;
        line-height: 20px;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Action row buttons maintain horizontal padding */
    .action-row .btn:not(.btn--back),
    .action-row .btn--secondary {
        padding: 12px 32px;
    }

    /* Mobile secondary button */
    .btn--secondary {
        border-width: 1px;
        border-color: #000000;
    }

    /* Mobile back button - circular icon */
    .btn--back {
        width: 48px;
        height: 48px;
        min-width: 48px;
        padding: 0;
        background: var(--color-bg-sidebar);
        border-radius: 50%;
        color: #9B8271;
        font-size: 20px;
        text-indent: -9999px;
        overflow: hidden;
        position: relative;
    }

    .btn--back::before {
        content: '←';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-indent: 0;
    }

    .btn--back:hover {
        background: var(--color-bg-card);
        transform: none;
    }

    /* Full width for single buttons */
    .action-row .btn:only-child {
        width: 100%;
    }
}

/* Source: forms.css */
/* ========================================
    FORM STYLES
    ======================================== */

/* Form Group */
.form-group {
    margin-bottom: 28px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Text Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 16px;
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-primary);
    background: var(--color-white);
    border: 1px solid var(--color-border-medium);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 122, 109, 0.1);
}

/* Required Fields - Orange Border */
input[type="text"][required],
input[type="email"][required],
input[type="tel"][required],
input[type="password"][required],
input[type="number"][required],
input[type="date"][required],
textarea[required],
select[required] {
    border: 2px solid var(--color-primary);
    border-radius: 8px;
}

/* Required Fields Focus State */
input[type="text"][required]:focus,
input[type="email"][required]:focus,
input[type="tel"][required]:focus,
input[type="password"][required]:focus,
input[type="number"][required]:focus,
input[type="date"][required]:focus,
textarea[required]:focus,
select[required]:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 122, 109, 0.2);
}

/* Filled/Complete state - Blue */
input.field-filled[required],
select.field-filled[required],
textarea.field-filled[required] {
    border: 2px solid #00A9E0 !important;
}

input.field-filled[required]:focus,
select.field-filled[required]:focus,
textarea.field-filled[required]:focus {
    border-color: #00A9E0 !important;
    box-shadow: 0 0 0 3px rgba(0, 169, 224, 0.2);
}

/* Required asterisk styling */
.form-label .required {
    color: #FF7A6D;
    margin-left: 4px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.form-label .required.filled {
    color: #00A9E0;
}

/* Toggle group filled state */
.toggle-group.field-filled .toggle-btn.active {
    background: #00A9E0;
    border-color: #00A9E0;
}

/* Flatpickr mobile input filled state */
input.flatpickr-mobile.field-filled {
    border: 2px solid #00A9E0 !important;
}

input::placeholder,
textarea::placeholder {
    color: #A6A6A6;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* Form Grid */
.form-grid {
    display: grid;
    gap: 24px;
}

.form-grid--2col {
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 767px) {
    .form-grid--2col {
        grid-template-columns: 1fr;
    }
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 16px;
    margin-top: 36px;
}

.form-actions--center {
    justify-content: center;
}

/* Toggle Button Group */
.toggle-group {
    display: flex;
    gap: 16px;
}

.toggle-btn {
    flex: 0 1 180px;
    padding: 16px 24px;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    color: #595959;
    background: var(--color-white);
    border: 1px solid var(--color-border-medium);
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-btn:hover {
    border-color: var(--color-primary);
}

.toggle-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Input with Icon */
.input-with-icon {
    position: relative;
}

.input-with-icon .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.input-with-icon input {
    padding-left: 50px;
}

/* Form Section */
.form-section {
    margin-bottom: 28px;
}

.form-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.form-label__help {
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    color: #717171;
    text-decoration: underline;
    text-transform: none;
}

/* Select Dropdown */
.form-select {
    width: 100%;
    padding: 16px;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
    color: #1A1A1A;
    background: var(--color-white);
    border: 1px solid var(--color-border-medium);
    border-radius: 32.5px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9201 8.9502L13.4001 15.4702C12.6301 16.2402 11.3701 16.2402 10.6001 15.4702L4.08008 8.9502' stroke='%231A1A1A' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 48px;
}

.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Checkbox */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.checkbox-input {
    appearance: none;
    width: 23px;
    height: 23px;
    min-width: 23px;
    border: 1px solid var(--color-border-medium);
    border-radius: 4px;
    background: var(--color-white);
    cursor: pointer;
    position: relative;
    margin-top: 2px;
}

.checkbox-input:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox-input:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #000000;
}

.checkbox-text a {
    color: #000000;
    text-decoration: underline;
}

@media screen and (max-width: 767px) {

    .form-label {
        margin-bottom: 8px;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    textarea,
    .form-input,
    .form-select {
        font-size: 16px;
        padding: 16px;
    }

    .input-with-icon input {
        padding-left: 50px;
    }

    .toggle-group {
        flex-direction: row;
        gap: 12px;
    }

    .toggle-btn {
        flex: 1;
        padding: 14px 24px;
        font-size: 16px;
    }

    .form-actions {
        margin-top: 40px;
    }
}

/* Source: styles.css */
/* ========================================
    2TIO PROJECT
    Main stylesheet - imports only
    ======================================== */

/* Base */






/* Typography */


/* Layout */


/* Project Components */



















/* UI Elements */



/* Global Styles */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
}