/* --- CUSTOM DEV BUILDER STYLES --- */

/* Main selection layout for the two initial cards */
.selection-layout {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 900px;
    margin: 80px auto;
    padding: 0 25px;
}

.selection-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    flex: 1;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    /* Added subtle initial shadow for depth */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.selection-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-color);
    /* Enhanced hover shadow */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.selection-card .card-icon {
    font-size: 3.5rem;
    color: var(--accent-color);
    margin-bottom: 25px;
    background-color: rgba(39, 174, 96, 0.1);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Added subtle initial shadow for icons */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    /* Smoother transition for icon background/shadow */
    transition: all 0.3s ease;
}
body.light-theme .selection-card .card-icon {
    background-color: rgba(124, 58, 237, 0.1);
}
/* New: Hover effect for icon */
.selection-card:hover .card-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}


.selection-card h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 15px;
}

.selection-card p {
    color: var(--text-muted);
    margin-bottom: 30px;
    flex-grow: 1; /* Pushes button to bottom */
}

.selection-card .btn {
    width: 100%;
}

/* Hidden state for dynamic sections */
.hidden {
    display: none !important;
}

/* Back button style */
.back-to-selection-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s ease;
}

.back-to-selection-btn:hover {
    color: var(--accent-color);
}

/* --- NEW CUSTOM BUILDER LAYOUT --- */
.custom-builder-layout {
    display: flex; /* Use flexbox for sidebar and content */
    max-width: 1400px; /* Wider layout for the builder */
    margin: 80px auto;
    padding: 0 25px;
    gap: 60px; /* Space between sidebar and content */
    align-items: flex-start; /* Align items to the top */
}

.builder-sidebar {
    flex-shrink: 0; /* Prevent sidebar from shrinking */
    width: 280px; /* Fixed width for the sidebar */
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 30px;
    position: sticky; /* Sticky sidebar */
    top: 100px; /* Offset from the top */
    align-self: flex-start; /* Ensure it sticks to the top of its container */
    display: flex;
    flex-direction: column;
    height: fit-content; /* Only take content height */
    /* Added subtle shadow to sidebar */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.builder-sidebar h3 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    color: var(--text-primary);
}

/* Progress Indicator */
.progress-indicator {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer; /* Make steps clickable to navigate */
}

.progress-step:hover {
    color: var(--text-primary);
}

.progress-step.active {
    color: var(--accent-color);
    font-weight: 700;
}

.progress-step.active .step-number {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.3); /* Subtle glow for active step number */
}
body.light-theme .progress-step.active .step-number {
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
}

.step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    border: 2px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.step-title {
    flex-grow: 1;
}

/* Price Estimate Box in Sidebar (reusing existing styles) */
.price-estimate-box {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: auto;
    border: 1px solid var(--border-subtle);
    box-shadow: none;
    /* Added subtle initial shadow for price box */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
body.light-theme .price-estimate-box {
    box-shadow: none;
}

.price-estimate-box h4 {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 5px;
}

.price-estimate-box .estimated-price-value {
    font-size: 2.5rem;
    margin: 5px 0;
}

.price-estimate-box .price-bar {
    height: 4px;
    margin: 15px 0;
}

.price-estimate-box p {
    font-size: 0.8rem;
    margin-bottom: 0;
}


.builder-content {
    flex-grow: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 40px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    /* Added subtle shadow to content area */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.form-step {
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 30px;
    /* Added fade-in animation for form steps */
    animation: fadeIn 0.5s ease-out forwards;
}

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


.form-step.active {
    display: flex;
}

.form-step h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.section-description {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 30px;
    max-width: 600px;
}

.input-group {
    margin-bottom: 25px;
    text-align: left;
}

.input-group label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}

.input-group input[type="text"],
.input-group input[type="tel"],
.input-group input[type="email"],
.input-group textarea { /* Added textarea to common input styling */
    width: 100%;
    padding: 12px 15px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif; /* Keep font consistent */
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input-group textarea {
    resize: vertical; /* Allow vertical resizing for textareas */
}

.input-group input:focus,
.input-group textarea:focus { /* Added textarea focus */
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
}
body.light-theme .input-group input:focus,
body.light-theme .input-group textarea:focus { /* Added textarea focus */
     box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

.navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 30px;
    border-top: 1px solid var(--border-subtle);
    gap: 20px;
}

.navigation-buttons .btn {
    flex: 1;
    max-width: 250px;
}
.navigation-buttons .btn.prev-step-btn {
    background: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}
.navigation-buttons .btn.prev-step-btn:hover {
    background-color: var(--accent-color);
    color: white;
}


/* --- NEW: PLAN SELECTION STYLES --- */
.plan-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
    justify-content: center;
}

.plan-card {
    background: var(--bg-primary); /* Use primary for cards inside builder content */
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.plan-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-color);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.plan-card.selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(39, 174, 96, 0.4);
    transform: scale(1.02);
    background-color: var(--bg-secondary); /* Slightly different background when selected */
}
body.light-theme .plan-card.selected {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

.plan-card .card-icon {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    background-color: transparent; /* Remove background circle */
    width: auto;
    height: auto;
    border-radius: 0;
}

.plan-card h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.plan-card .plan-price {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.plan-card .plan-features-list {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 30px;
    flex-grow: 1; /* Pushes button to bottom */
}

.plan-card .plan-features-list li {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.plan-card .plan-features-list li::before {
    content: '\f00c'; /* Font Awesome checkmark icon */
    font-family: 'Font Awesome 5 Free'; /* Ensure Font Awesome is loaded */
    font-weight: 900;
    color: var(--accent-color);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1rem;
}

.plan-card .btn {
    width: 100%;
    margin-top: auto; /* Push button to bottom */
}


/* --- Website Type Grid Styles (Replaces Carousel) --- */
.website-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
    justify-content: center;
}

/* Reusable style for all option boxes within the builder content */
.option-box { /* This class is used widely, so make its base strong */
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px; /* Consistent height for better grid alignment */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.option-box:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px); /* Add a slight lift on hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Enhanced shadow on hover */
}
.option-box.selected {
    border-color: var(--accent-color);
    background-color: rgba(39, 174, 96, 0.1); /* Subtle background for selected */
    box-shadow: 0 0 15px rgba(39, 174, 96, 0.3);
    transform: scale(1.02); /* Slight scale on selected */
}
body.light-theme .option-box.selected {
    background-color: rgba(124, 58, 237, 0.1);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.2);
}
/* Disabled state for any option-box */
.option-box.disabled {
    opacity: 0.4 !important; /* Make it more faded */
    pointer-events: none;
    cursor: not-allowed;
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
    transform: none !important; /* Remove any scale/translate on disabled */
}


/* Re-use card-icon, h4, p styles from existing CSS where applicable */
.website-type-grid .option-box .card-icon {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    background-color: transparent; /* Remove background circle */
    width: auto;
    height: auto;
    border-radius: 0;
}

.website-type-grid .option-box h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.website-type-grid .option-box p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}


/* --- PAGE COUNT SELECTION STYLES (NEW) --- */
/* REMOVED: No longer needed as all websites are single page */


/* --- COLOR SELECTION STYLES --- */
.color-options-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.color-options-grid h4 {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 15px;
    text-align: left;
}

.color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
}

.color-swatch {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 2px solid var(--border-subtle);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.color-swatch:hover {
    border-color: var(--accent-color);
    transform: translateY(-3px);
}

.color-swatch.selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.5);
    transform: scale(1.05);
}
body.light-theme .color-swatch.selected {
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.4);
}
/* Disable styles for color swatches when not allowed by plan */
.color-swatch.disabled {
    opacity: 0.4 !important; /* Make it more faded */
    pointer-events: none;
    cursor: not-allowed;
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
    transform: none !important;
}


/* Specific styles for color combinations */
.color-swatch.combination {
    display: flex;
    border-radius: 8px;
}

.color-swatch.combination div {
    width: 50%;
    height: 100%;
}

/* Styles for the custom color swatch option */
.color-swatch[data-color-type="custom"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.7em; /* Make space for text */
}

.color-swatch[data-color-type="custom"] .card-icon {
    font-size: 1.5rem;
    position: static;
    transform: none;
    color: var(--text-primary);
    margin-bottom: 0;
}
.color-swatch[data-color-type="custom"].selected .card-icon {
    color: var(--accent-color);
}
.color-swatch[data-color-type="custom"] p {
    font-size: 0.65rem;
    margin-top: 5px;
    color: var(--text-muted);
    text-align: center;
    white-space: normal;
}

/* Styles for 'Leave it to us' color option (NEW) */
.color-swatch[data-color-type="our-choice"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
}

.color-swatch[data-color-type="our-choice"] .card-icon {
    font-size: 1.5rem;
    position: static;
    transform: none;
    color: var(--text-primary);
    margin-bottom: 0;
}
.color-swatch[data-color-type="our-choice"].selected .card-icon {
    color: var(--accent-color);
}
.color-swatch[data-color-type="our-choice"] p {
    font-size: 0.65rem;
    margin-top: 5px;
    color: var(--text-muted);
    text-align: center;
    white-space: normal;
}


/* --- BUTTON SHAPE & EFFECT STYLES --- */
.button-shape-grid, .button-effect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
    justify-content: center;
}

.shape-option, .effect-option {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.shape-option:hover, .effect-option:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Enhanced shadow on hover */
}

.shape-option.selected, .effect-option.selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(39, 174, 96, 0.3);
    transform: scale(1.02);
}
body.light-theme .shape-option.selected, body.light-theme .effect-option.selected {
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.2);
}
/* Disable styles for options when not allowed by plan */
.shape-option.disabled, .effect-option.disabled {
    opacity: 0.4 !important; /* Make it more faded */
    pointer-events: none;
    cursor: not-allowed;
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
    transform: none !important;
}


.shape-option span, .effect-option span {
    display: block;
    margin-top: 15px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.preview-btn {
    padding: 12px 25px !important;
    font-size: 0.9rem !important;
    pointer-events: none;
    min-width: auto !important;
    /* NEW: Add specific background and text color to ensure visibility */
    background-color: var(--accent-color);
    color: white;
}

/* Button Shape Previews */
.preview-btn.rounded { border-radius: 8px; }
.preview-btn.pill { border-radius: 50px; }
.preview-btn.square { border-radius: 0; }
.preview-btn.custom-shape-preview,
.preview-btn.custom-effect-preview {
    /* No special visual, user describes */
}


/* Button Hover Effect Previews */
.preview-btn.effect-none { /* No special static styling, uses default btn */ }
.preview-btn.effect-shadow { box-shadow: 0 4px 8px rgba(0,0,0,0.2); }

.preview-btn.effect-grow:hover { transform: scale(1.05); }
.preview-btn.effect-shadow:hover { box-shadow: 0 6px 12px rgba(0,0,0,0.3); transform: translateY(-2px); }
.preview-btn.effect-slide-fill {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.preview-btn.effect-slide-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: rgba(255,255,255,0.2);
    transition: width 0.3s ease-out;
    z-index: -1;
}
.preview-btn.effect-slide-fill:hover::before {
    width: 100%;
}


/* --- WEBSITE SECTIONS STYLES (reusing option-box) --- */
.section-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.section-options-grid .option-box { /* Reusing .option-box styles */
    min-height: 120px; /* Give a minimum height */
    position: relative; /* For icon positioning */
}

/* Add a specific icon placeholder for general options */
.section-options-grid .option-box .icon {
    font-size: 2rem; /* Size for icons */
    color: var(--accent-color);
    margin-bottom: 10px;
}

.section-options-grid .option-box h4 {
    font-size: 1.2rem;
    margin-top: 10px; /* Space between icon and text (if no icon, ignored) */
    margin-bottom: 5px;
    color: var(--text-primary);
}

.section-options-grid .option-box p {
    font-size: 0.85rem;
    color: var(--text-muted);
}


/* --- ADVANCED EFFECTS GRID STYLES (NEW) --- */
/* Reuses .section-options-grid for general layout, but adds specific overrides */
.advanced-effects-grid .option-box {
    /* Example: Give them a subtle glow that matches accent color */
    border-color: var(--border-subtle); /* Reset to default if needed */
}

.advanced-effects-grid .option-box:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.2); /* Lighter shadow than selected */
}

.advanced-effects-grid .option-box.selected {
    box-shadow: 0 0 18px rgba(39, 174, 96, 0.4); /* Stronger glow when selected */
}
body.light-theme .advanced-effects-grid .option-box.selected {
    box-shadow: 0 0 18px rgba(124, 58, 237, 0.3);
}

/* Icons within advanced effects */
.advanced-effects-grid .option-box .card-icon {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    background-color: transparent; /* Ensure no background circle for icons */
    width: auto;
    height: auto;
    border-radius: 0;
}
.advanced-effects-grid .option-box h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.advanced-effects-grid .option-box p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}


/* --- IMAGE DISPLAY STYLES --- */
.image-display-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    justify-content: center;
}

/* Re-using option-box for image display options for consistent styling */
.image-display-grid .option-box { /* Reusing .option-box styles */
    /* No specific overrides beyond base .option-box for now */
}


.image-display-grid .option-box .style-icon {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.image-display-grid .option-box h4 {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.image-display-grid .option-box p {
    font-size: 0.85rem;
    color: var(--text-muted);
}


/* --- FONT SELECTION STYLES --- */
.font-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    justify-content: center;
}

.font-option { /* Reusing .option-box styles, but custom height to fit font previews */
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px; /* Adjusted min-height for font options */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.font-option:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Enhanced shadow on hover */
}

.font-option.selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(39, 174, 96, 0.3);
    transform: scale(1.02);
}
body.light-theme .font-option.selected {
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.2);
}
/* Disable styles for font options when not allowed by plan */
.font-option.disabled {
    opacity: 0.4 !important; /* Make it more faded */
    pointer-events: none;
    cursor: not-allowed;
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
    transform: none !important;
}

.font-option h4 {
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: 5px;
    line-height: 1.2;
}

.font-option p {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.font-option span {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
}


/* --- REVIEW & PAYMENT STYLES --- */
.review-summary {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px; /* Adjusted margin */
    text-align: left;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.review-summary h4 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.review-summary ul {
    list-style: none;
    padding: 0;
}

.review-summary ul li {
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 1rem;
}

.review-summary ul li strong {
    color: var(--text-primary);
    margin-right: 5px;
}

/* NEW: Recommended Plan Box Styles */
.recommended-plan-box {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.recommended-plan-box h4 {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 10px;
}

.recommended-plan-box .plan-tagline {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.recommended-plan-box .plan-features-list {
    list-style: none;
    padding: 0;
}

.recommended-plan-box .plan-features-list li {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}

.recommended-plan-box .plan-features-list li::before {
    content: '\f00c'; /* Checkmark emoji */
    font-family: 'Font Awesome 5 Free'; /* Using FA for consistency */
    font-weight: 900;
    color: var(--accent-color);
    position: absolute;
    left: 0;
    top: 2px; /* Adjust for alignment */
}

.final-quote-box {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    margin-top: 30px; /* Added margin */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.final-quote-box h4 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.final-quote-box .estimated-price-value {
    font-family: 'Poppins', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--accent-color);
    display: block;
}


/* --- Delivery & Upsell Info Boxes --- */
.delivery-info-box {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px; /* Space between this and upsell */
    text-align: left;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.delivery-info-box h4 {
    font-size: 1.3rem;
    color: var(--accent-color); /* Highlight with accent color */
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.delivery-info-box h4 .fas {
    font-size: 1.5rem;
}

.delivery-info-box ul {
    list-style: none;
    padding: 0;
}

.delivery-info-box ul li {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    position: relative;
    padding-left: 25px; /* Space for custom bullet */
}

.delivery-info-box ul li:last-child {
    margin-bottom: 0;
}

.delivery-info-box ul li::before {
    content: '\f00c'; /* Font Awesome checkmark icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--accent-color);
    position: absolute;
    left: 0;
    top: 2px; /* Adjust for alignment */
}

.upsell-offer-box {
    background: var(--bg-primary);
    border: 2px solid var(--accent-color); /* Stronger border to make it stand out */
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(39, 174, 96, 0.2); /* Subtle glow for upsell */
    transition: all 0.3s ease;
}
body.light-theme .upsell-offer-box {
    border-color: var(--accent-color); /* Purple accent for light theme */
    box-shadow: 0 5px 20px rgba(124, 58, 237, 0.15);
}

.upsell-offer-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(39, 174, 96, 0.3);
}
body.light-theme .upsell-offer-box:hover {
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.25);
}


.upsell-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.upsell-icon {
    font-size: 2.5rem;
    color: var(--accent-color);
    animation: pulse 2s infinite ease-in-out; /* Subtle animation */
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}


.upsell-offer-box h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    color: var(--text-primary);
    margin: 0;
}

.upsell-tagline {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.upsell-price {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 25px;
}

/* Custom Checkbox Styling (reusing pattern from product-detail.css if available) */
.checkbox-option {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.checkbox-option input[type="checkbox"] {
    position: absolute; /* Hide default checkbox */
    opacity: 0;
    pointer-events: none;
}

.checkbox-option label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-primary);
    position: relative;
    padding-left: 35px; /* Space for custom checkbox */
}

.checkbox-custom {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 24px;
    width: 24px;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-subtle);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.checkbox-option input[type="checkbox"]:checked + label .checkbox-custom {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.checkbox-option input[type="checkbox"]:checked + label .checkbox-custom::after {
    content: '\f00c'; /* Checkmark icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: white;
    font-size: 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.upsell-note {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 20px;
    line-height: 1.5;
}


/* --- Blog Content Upsell Modal Styles (NEW) --- */
.modal-overlay#blog-upsell-modal .modal-box { /* Specificity for this modal */
    max-width: 550px;
}

.blog-upsell-modal .upsell-options-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.blog-upsell-option {
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
    background-color: var(--bg-primary);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow */
}

.blog-upsell-option:hover {
    border-color: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Enhanced shadow on hover */
}

.blog-upsell-option.selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.4);
}
body.light-theme .blog-upsell-option.selected {
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.3);
}

.blog-upsell-option label {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-primary);
    position: relative;
    padding-left: 35px;
}

.blog-upsell-option .radio-circle {
    position: absolute;
    left: 0;
    top: 2px;
    height: 20px;
    width: 20px;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-subtle);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.blog-upsell-option input[type="radio"]:checked + label .radio-circle {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.blog-upsell-option input[type="radio"]:checked + label .radio-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
}

.blog-upsell-option .option-header-content {
    display: flex;
    align-items: center;
    flex-basis: 100%;
    margin-bottom: 5px;
}

.blog-upsell-option .option-name {
    font-weight: 600;
    margin-right: 10px;
    line-height: 1.2;
}

.blog-upsell-option .option-price {
    font-weight: 700;
    color: var(--accent-color);
    margin-left: auto; /* Push price to the right */
}

.blog-upsell-option .option-description {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding-left: 35px; /* Align with label content */
    line-height: 1.4;
    text-align: left;
    flex-basis: 100%;
}


/* --- EDIT EXISTING CODE SECTION (Original Calculator, remains mostly same) --- */
.edit-code-layout {
    max-width: 900px; /* Slightly wider for better layout of options */
    margin: 80px auto;
    padding: 0 25px;
}

.edit-code-form {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Added shadow for consistency */
}

.edit-code-form h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.edit-code-form .form-intro-text {
    color: var(--text-muted);
    font-size: 1rem;
    margin-top: -20px;
    margin-bottom: 20px;
}

.upload-box {
    border: 2px dashed var(--border-subtle);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    background-color: var(--bg-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow */
}

.upload-box .upload-btn {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
}

.upload-box #file-upload-status {
    font-weight: 600;
    color: var(--text-primary);
}

.upload-box .upload-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Re-style the Edit Options Grid */
.edit-options-grid {
    display: grid;
    /* Adjusted grid-template-columns for better responsiveness and visual balance */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Larger base size for better card appearance */
    gap: 20px; /* Increased gap for better spacing */
    margin-top: 20px; /* Space from section title */
}

.edit-options-grid .option-box {
    background: var(--bg-primary); /* Card background */
    border: 1px solid var(--border-subtle); /* Card border */
    border-radius: 12px; /* Rounded corners for cards */
    padding: 20px; /* Internal padding */
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex; /* Enable flex for internal layout (icon + text) */
    flex-direction: column; /* Stack icon and text */
    align-items: center; /* Center horizontally */
    justify-content: center;
    min-height: 120px; /* Ensure consistent height for all cards */
    position: relative; /* For badge/icon positioning */
    line-height: 1.4; /* Improve readability */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.edit-options-grid .option-box:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Subtle shadow on hover */
}

.edit-options-grid .option-box.selected {
    border-color: var(--accent-color);
    background-color: rgba(39, 174, 96, 0.1); /* Green tint for selected (dark theme) */
    box-shadow: 0 0 15px rgba(39, 174, 96, 0.3); /* Stronger glow for selected */
    transform: scale(1.02); /* Slight scale */
}
body.light-theme .edit-options-grid .option-box.selected {
    background-color: rgba(124, 58, 237, 0.1); /* Purple tint for light theme selected */
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.2);
}

/* Add styles for icons within edit option boxes */
.edit-options-grid .option-box .edit-icon {
    font-size: 2rem; /* Icon size */
    color: var(--accent-color); /* Icon color */
    margin-bottom: 10px; /* Space between icon and text */
}

.edit-options-grid .option-box span.price-tag {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--text-primary); /* Or a specific price color */
    margin-top: 5px; /* Space between description and price */
    display: block; /* Ensure it's on its own line */
}


/* Separate styling for the "Bundled Edits" section if desired */
/* This can be achieved by adding a class to the second edit-options-grid or its parent */
/* For example, if you add <div class="form-section bundled-edits-section"> around it */
.form-section.bundled-edits-section {
    background-color: var(--bg-primary); /* A slightly different background */
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow */
}
.form-section.bundled-edits-section h4 {
    color: var(--accent-color); /* Highlight bundle title */
    margin-bottom: 15px;
}
/* Adjust option-box within bundled edits if they need distinct style */
.form-section.bundled-edits-section .option-box {
    background: var(--bg-secondary); /* A different background for bundle cards */
    border-color: var(--accent-color-light); /* Lighter accent border */
}
.form-section.bundled-edits-section .option-box.selected {
    background-color: rgba(39, 174, 96, 0.2); /* Stronger tint for selected bundles */
}
body.light-theme .form-section.bundled-edits-section .option-box.selected {
    background-color: rgba(124, 58, 237, 0.2);
}

.edit-price-summary {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow */
}

.edit-price-summary h4 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.edit-price-summary #edit-estimated-price {
    font-family: 'Poppins', sans-serif;
    color: var(--accent-color);
    font-size: 2.5rem;
    font-weight: 700;
    display: inline-block;
    margin-left: 10px;
}

.edit-price-summary .book-edit-btn {
    width: 100%;
}


/* Ensure the custom text areas are hidden by default */
.input-group.hidden {
    display: none !important;
}


/* --- NEW: Modal Overlay & Box Styles for Warnings --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1005; /* Ensure it's above other elements */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal-box {
    background: var(--bg-secondary);
    padding: 30px;
    border-radius: 12px;
    max-width: 500px; /* Adjust max width as needed */
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    border: 1px solid var(--border-subtle);
    text-align: center; /* Center text by default */
}

.modal-overlay.show .modal-box {
    transform: scale(1);
}

.modal-box h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    color: var(--text-primary);
    margin-bottom: 15px;
    display: flex; /* For icon alignment */
    align-items: center;
    justify-content: center;
}

.modal-box p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap; /* Allow buttons to wrap on small screens */
}

.modal-buttons .btn {
    flex: 1; /* Allow buttons to grow */
    min-width: 180px; /* Ensure buttons don't get too small */
}


/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 992px) {
    .selection-layout {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .selection-card {
        width: 100%;
        max-width: 450px;
    }
    .custom-builder-layout {
        flex-direction: column;
        gap: 40px;
    }
    .builder-sidebar {
        width: 100%;
        position: static;
        margin-top: 0;
    }
    .builder-sidebar h3 {
        text-align: center;
    }
    .progress-indicator {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 20px;
        margin-bottom: 30px;
    }
    .progress-step {
        flex-direction: column;
        font-size: 0.85rem;
        gap: 5px;
        text-align: center;
        flex-basis: 20%;
        min-width: 80px;
    }
    .step-number {
        margin-bottom: 5px;
    }
    .price-estimate-box {
        margin-top: 30px;
    }
    .builder-content {
        padding: 30px;
    }
    .form-step h3 {
        font-size: 1.8rem;
    }
    /* New plan selection grid responsiveness */
    .plan-selection-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 20px auto;
    }
    /* Website Type Grid Responsive*/
    .website-type-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    /* Page Count Grid Responsive*/
    /* REMOVED: No longer needed as all websites are single page */

    .color-grid, .button-shape-grid, .button-effect-grid, .section-options-grid, .image-display-grid, .font-options-grid, .advanced-effects-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 15px;
    }
    .color-swatch {
        width: 50px;
        height: 50px;
    }
    .preview-btn {
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
    }
    /* New Custom Number Input responsiveness (was removed in html update, so commenting out this specific media query target) */
    /* .custom-number-input {
        max-width: 180px;
    }
    .custom-number-input button {
        width: 35px;
        height: 35px;
        font-size: 1.3rem;
    }
    .custom-number-input input[type="number"] {
        font-size: 1rem;
        padding: 8px 5px;
    } */

    /* EDIT CODE SECTION - RESPONSIVENESS FOR 992px*/
    .edit-code-layout {
        padding: 0 30px; /* Adjust padding for larger tablets */
    }
    .edit-code-form {
        padding: 30px; /* Reduce padding slightly */
    }
    .upload-box {
        padding: 25px; /* Adjust upload box padding */
    }
    .edit-options-grid {
        /* INCREASED MINMAX TO GIVE MORE SPACE FOR TEXT*/
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px; /* Increase gap slightly*/
    }
    .edit-options-grid .option-box {
        padding: 18px; /* Slightly more padding for touch*/
    }
    .edit-code-form h3 {
        font-size: 1.8rem;
    }
    .edit-price-summary h4 {
        font-size: 1.4rem;
    }
    .edit-price-summary #edit-estimated-price {
        font-size: 2.2rem;
    }
}

@media (max-width: 576px) {
    .custom-builder-layout {
        padding: 0 15px;
    }
    .builder-sidebar, .builder-content, .edit-code-form {
        padding: 20px;
        border-radius: 12px;
    }
    .progress-indicator {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 10px;
    }
    .progress-step {
        flex-basis: 28%;
        min-width: 60px;
        font-size: 0.75rem;
    }
    .step-number {
        width: 25px;
        height: 25px;
        font-size: 0.8rem;
    }
    .form-step h3 {
        font-size: 1.5rem;
    }
    .section-description {
        font-size: 0.9rem;
    }
    /* Website Type Grid Responsive*/
    .website-type-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Further adjust for mobile*/
    }
    /* Page Count Grid Responsive*/
    /* REMOVED: No longer needed as all websites are single page */

    .color-grid, .button-shape-grid, .button-effect-grid, .section-options-grid, .image-display-grid, .font-options-grid, .advanced-effects-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Adjusted minmax for tiny screens*/
        gap: 10px;
    }
    .color-swatch {
        width: 40px; /* Smaller swatches for tiny screens */
        height: 40px;
    }
    .preview-btn {
        padding: 8px 15px !important;
        font-size: 0.75rem !important;
    }
    .navigation-buttons .btn {
        padding: 12px 15px !important;
        font-size: 0.9rem !important;
        max-width: 180px;
    }
    .review-summary h4, .final-quote-box h4 {
        font-size: 1.2rem;
    }
    .final-quote-box .estimated-price-value {
        font-size: 3rem;
    }
    .upload-box .upload-btn {
        padding: 8px 15px !important;
        font-size: 0.8rem !important;
    }

    /* EDIT CODE SECTION - RESPONSIVENESS FOR 576px*/
    .edit-code-layout {
        padding: 0 15px; /* Match overall layout padding*/
    }
    .edit-code-form {
        padding: 20px; /* Match overall form padding*/
    }
    .edit-code-form h3 {
        font-size: 1.5rem; /* Smaller heading*/
    }
    .edit-code-form .form-intro-text {
        font-size: 0.85rem; /* Smaller intro text*/
        margin-bottom: 15px;
    }
    .upload-box {
        padding: 20px;
        gap: 10px;
    }
    .upload-box .upload-hint {
        font-size: 0.75rem; /* Smaller hint text*/
    }
    .edit-options-grid {
        grid-template-columns: 1fr; /* Stack options vertically on very small screens*/
        gap: 10px; /* Smaller gap*/
    }
    .edit-options-grid .option-box {
        padding: 12px; /* Smaller padding*/
        font-size: 0.85rem; /* Smaller font for options*/
    }
    .edit-price-summary h4 {
        font-size: 1.2rem;
    }
    .edit-price-summary #edit-estimated-price {
        font-size: 1.8rem;
    }
    /* Adjusted existing modal styling to use specific ID or class for blog upsell modal */
    .modal-overlay#blog-upsell-modal .modal-box {
        max-width: 550px;
    }
}