/* Base Styles */
body {
    font-family: 'Poppins', sans-serif;
    /* Slightly different, professional gradient */
    background: linear-gradient(135deg, #f5f7fa 0%, #b8c6db 100%);
    color: #333;
    margin: 0;
    padding: 20px;
    line-height: 1.6;
}

.container {
    max-width: 900px;
    margin: 20px auto;
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid #dee2e6;
}

header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

header h1 {
    margin: 0 0 10px 0;
    font-size: 2.4em;
    /* Color from index.html perhaps */
    color: #667eea;
    font-weight: 700;
}

header p {
    font-size: 1.1em;
    color: #555;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Sections */
.steps-section, .pricing-section, .payment-partners-section, .faq-section, .terms-notice {
    margin-bottom: 40px;
}

h2 {
    font-size: 1.8em;
    color: #495057;
    margin-bottom: 20px;
    text-align: center;
}

/* Steps List */
.steps-list {
    list-style: none;
    padding-left: 0;
    counter-reset: steps-counter;
    max-width: 750px;
    margin: 0 auto;
}

.steps-list li {
    counter-increment: steps-counter;
    margin-bottom: 25px;
    position: relative;
    padding-left: 50px; /* Space for number */
    font-size: 1.05em;
}

.steps-list li::before {
    content: counter(steps-counter);
    position: absolute;
    left: 0;
    top: -2px;
    width: 35px;
    height: 35px;
    background-color: #667eea; /* Use a theme color */
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.1em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.steps-list li strong {
    display: block;
    margin-bottom: 5px;
    color: #343a40;
}

/* Contact Methods within Step 1 (Updated) */
.contact-methods {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 10px; /* Indent slightly */
}

.contact-link {
    display: inline-flex; /* Align icon and text */
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 7px;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: 2px solid transparent;
    font-weight: 600;
    width: fit-content; /* Prevent links taking full width */
}

.contact-link i { /* Font Awesome Icon styling */
    font-size: 1.5em;
    width: 22px; /* Ensure alignment */
    text-align: center;
}

.contact-link.email { color: #d9534f; border-color: #f8d7da; }
.contact-link.email:hover { background-color: #f8d7da; color: #721c24; }

.contact-link.whatsapp { color: #25D366; border-color: #d1f8dd; }
.contact-link.whatsapp:hover { background-color: #d1f8dd; color: #116430; }

/* Pricing Section */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 30px;
    /* Align items at the start to handle different heights better */
    align-items: start;
}

.pricing-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
    padding: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* For popular badge */
    overflow: hidden; /* For popular badge ribbon */
     min-height: 350px; /* Optional: give cards a min-height */
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* "Most Popular" Badge - Subtle Psychology */
.popular-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ffc107; /* Yellow for attention */
    color: #333;
    padding: 5px 15px;
    font-size: 0.8em;
    font-weight: bold;
    border-bottom-left-radius: 10px; /* Style it */
}

.pricing-card.popular {
    border: 2px solid #667eea; /* Highlight popular choice */
    transform: scale(1.03); /* Make it slightly larger */
}
.pricing-card.popular:hover {
    transform: scale(1.03) translateY(-5px); /* Keep scale on hover */
}


.card-header h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.5em;
}
.card-header p {
    font-size: 0.95em;
    color: #6c757d;
    margin-bottom: 20px;
}

.card-price {
    font-size: 2.2em;
    font-weight: 700;
    color: #00796b; /* Use a distinct color for price */
    margin-bottom: 25px;
}

.card-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: left;
    color: #555;
    flex-grow: 1; /* Pushes button down */
}
.card-features li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-features li i { /* Checkmark icon */
    color: #28a745; /* Green check */
}

.pricing-card .button { /* Button styling within card */
    margin-top: auto; /* Push button to bottom */
}

/* Payment Partners Section CSS */
.payment-partners-section {
    margin-top: 40px;
    margin-bottom: 30px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.payment-partners-section h2 {
    margin-bottom: 25px;
    font-size: 1.6em;
}

.partners-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.partner-logo {
    max-height: 45px;
    width: auto;
    vertical-align: middle;
}

/* Terms Notice */
.terms-notice {
    text-align: center;
    font-size: 0.95em;
    color: #6c757d;
    margin-top: 40px;
}

.terms-notice i { /* Italic styling */
    font-style: italic;
}

.terms-notice a {
    color: #007bff; /* Standard link blue */
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}
.terms-notice a:hover {
    color: #0056b3;
}

/* Action Buttons (Back Button & Thank You Button) */
.action-buttons {
    display: flex;
    justify-content: center; /* Center the buttons */
    align-items: center;
    flex-wrap: wrap; /* Allow buttons to wrap on small screens */
    gap: 15px; /* Add gap between buttons */
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

/* General Button Styles */
.button {
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Ensure text is centered */
}

.primary-button {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
}
.primary-button:hover {
    background: linear-gradient(45deg, #5a6fd5, #673f93);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.secondary-button {
    background-color: #6c757d;
    color: white;
}
.secondary-button:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
}

/* Modal Styling (Common for both) */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    padding: 20px; /* Add padding for small screens */
}

.modal-content {
    background-color: #fefefe;
    color: #333;
    margin: auto; /* Centered */
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 600px; /* Default max-width */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: fadeInModal 0.3s ease-out;
    text-align: left;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.close-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close-btn:hover,
.close-btn:focus {
    color: #333;
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #555;
    text-align: center;
}

/* Terms Modal Specific */
.modal-content ol {
    padding-left: 25px;
    margin: 0;
}
.modal-content li {
    margin-bottom: 15px;
    line-height: 1.5;
    color: #444;
}
.modal-content li:last-child {
    margin-bottom: 0;
}

/* ****** START: NEW CSS for FAQ Section ****** */

.faq-section {
    margin-top: 50px; /* More space before FAQ */
    padding-top: 30px;
    border-top: 1px solid #e9ecef; /* Separator line */
}

.faq-section h2 {
    margin-bottom: 30px;
}

.faq-container {
    max-width: 750px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
}
.faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.faq-question { /* Styles the <summary> tag */
    font-weight: 600;
    font-size: 1.1em;
    color: #495057;
    padding: 15px 25px 15px 0; /* Add padding for indicator */
    cursor: pointer;
    position: relative; /* For indicator */
    list-style: none; /* Remove default marker */
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: #667eea; /* Theme color on hover */
}

/* Simple indicator for open/closed state */
.faq-question::after {
    content: '+';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    font-weight: 400; /* Make indicator less bold */
    color: #adb5bd;
    transition: transform 0.3s ease;
}

details[open] > summary.faq-question::after {
    content: '−'; /* Minus sign when open */
    transform: translateY(-50%);
}

/* Hide the default <details> marker */
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { display: none; }


.faq-answer { /* Styles the content inside <details> */
    padding: 15px 5px 20px 5px; /* Add some padding */
    color: #555;
    line-height: 1.7;
    background-color: #f8f9fc; /* Very light background, slightly different */
    border-radius: 0 0 5px 5px;
    /* Animation for smooth opening - might need JS for height */
    /* transition: max-height 0.5s ease-out;
    overflow: hidden;
    max-height: 0; */
}
/* details[open] .faq-answer {
    max-height: 1000px; /* Set a large max-height when open */
/* } */

.faq-answer ol, .faq-answer ul {
    padding-left: 25px;
    margin-top: 10px;
    margin-bottom: 15px;
}
.faq-answer li {
    margin-bottom: 10px;
}
.faq-answer strong {
    color: #343a40;
}

.faq-answer a {
    color: #007bff;
    text-decoration: underline;
}
.faq-answer a:hover {
    color: #0056b3;
}

/* Placeholder for images in FAQ - basic styling */
.faq-image-placeholder {
    display: block; /* Ensure it takes its own line */
    max-width: 80%; /* Limit width */
    height: auto;
    margin: 10px auto 10px 20px; /* Indent slightly */
    border: 1px dashed #ccc;
    padding: 10px;
    background-color: #f9f9f9;
    text-align: center;
    font-style: italic;
    color: #888;
    min-height: 50px; /* Give it some size even without src */
    border-radius: 4px;
}
/* You might want to remove border/bg when actual images are added */


/* ****** END: NEW CSS for FAQ Section ****** */


/* ****** START: NEW CSS for Easter Egg Modal ****** */

.qr-modal-content {
    text-align: center; /* Center content in QR modal */
    max-width: 450px; /* Smaller modal */
}

#qr-code-image {
    display: block;
    max-width: 200px; /* Adjust QR code size */
    height: auto;
    margin: 20px auto; /* Center image */
    border: 1px solid #eee; /* Optional border */
}

.qr-modal-content p {
    margin-bottom: 15px;
    color: #444;
    line-height: 1.6;
}
.qr-modal-content p em {
    color: #666;
    font-size: 0.95em;
}
.qr-modal-content strong {
    color: #d9534f; /* Highlight price */
}

/* ****** END: NEW CSS for Easter Egg Modal ****** */


//* Responsive Adjustments */
@media (max-width: 768px) {
    .container { padding: 25px 20px; }
    header h1 { font-size: 2em; }
    .steps-list li { padding-left: 45px; }
    .steps-list li::before { width: 30px; height: 30px; font-size: 1em; }
    .pricing-cards { grid-template-columns: 1fr; /* Stack cards */ }
    .pricing-card.popular { transform: scale(1); } /* Remove scale on mobile */
    .pricing-card.popular:hover { transform: translateY(-5px); } /* Keep hover effect */
    .pricing-card { min-height: auto; } /* Remove min-height */
    .modal-content { width: 95%; padding: 25px 20px; }
    .faq-question { font-size: 1em; padding-right: 20px; } /* Adjust FAQ font size */

    /* ****** FIX: Remove padding from modal container on mobile ****** */
    .modal {
        padding: 0; /* Remove padding on the overlay for mobile */
                     /* Rely solely on flexbox centering */
    }
    /* ****** END FIX ****** */
}/* Adjust FAQ font size */
}

@media (max-width: 480px) {
    header h1 { font-size: 1.8em; }
    header p { font-size: 1em; }
    h2 { font-size: 1.5em; }
    .card-price { font-size: 2em; }
    .button { font-size: 0.9em; padding: 10px 20px; }
    .action-buttons { flex-direction: column; gap: 10px; } /* Stack action buttons */
    .modal-content { padding: 20px 15px; }
    .close-btn { font-size: 24px; top: 8px; right: 15px; }
    .faq-question { font-size: 0.95em; }
}