:root {
    --apple-blue: #007aff;
    --text-color: #1d1d1f;
    --subtle-gray: #f5f5f7;
    --border-color: #d2d2d7;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: var(--text-color);
    margin: 0;
    padding-top: 50px; /* Space for fixed navbar */
        background-color: rgb(245, 245, 247);
}

.IconControl_paddleNavIcons__ZzEXW{
    display: flex;
}

/* --- Navigation Bar (Same as before) --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid #e3e3e3;
}
.navbar-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.5px;
}
nav a {
    margin: 0 15px;
    text-decoration: none;
    color: var(--text-color);
    font-size: 0.9rem;
    padding: 5px 0;
    transition: color 0.2s;
}
nav a.active { color: var(--apple-blue); }

/* --- Center Aligned Content --- */
.center-container {
    max-width: 900px; /* Maximum width for central content */
    margin: 40px auto;
    padding: 0 20px;
    text-align: center;
}

.main-title {
    font-size: 2.8rem;
    font-weight: 700;
    background-clip: text;
    background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAICAgICAgICAgIDAgICAwQDAgIDBAUEBAQEBAUGBQUFBQUFBgYHBwgHBwYJCQoKCQkMDAwMDAwMDAwMDAwMDAwBAwMDBQQFCQYGCQ0LCQsNDw4ODg4PDwwMDAwMDw8MDAwMDAwPDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDP/AABEIAC8AqAMBEQACEQEDEQH/xAB6AAEAAwEBAQAAAAAAAAAAAAAEAgMFBgABEAACAgADCAICAwEAAAAAAAAAAgEDBBExISMzU3KRkrETQTJCEkNRcQEAAgIDAQEBAAAAAAAAAAAABAUDBgECBwkACBEAAgICAwEBAQAAAAAAAAAAAAECAwQxBRFRIRJB/9oADAMBAAIRAxEAPwDirrrflt3r/m37T/p+x4xXS+H4slJ9v6V/NdzX8pNvyvDX9P09813Nfyk+/K8Pv0/ReHsumY3r+Ukcorwf8am2jdw725RvH8pBpJeHReMqfw2qGtnLeP3kHkl4X/jaO+jWqa2Mt43eSCSRecHH0PRrOY3eSJpFtxMcUr2cxu8kUuix41C8JTbZzG7yCWSQ6ooXhU11kf2N3kXXTQ1qpXgV77OY3eRXdYhjVQvAz32cxu8iy61DCqheBXxFvNbvInvuD66V4DfEW81vKRRfcG10rwI+Jt5rd5E994ZCleA3xNvNfykTZGQFwqXgdr7ea/lIhycronjWvClr7ea/lJVs7O+bJo1rw8tl3NfykpGflOX9NnFeC6Lbflq3r/lH7T/pVcixt7IpxXT+HKXca3rb2euMdI8RpbZWZMHj4zFds0cKuhDNlt4mnvo6HDpoDTZ07isfvo26E0BpM6LxtBq1KQSZdsGj4hqKRSZa8Sgu+gayRYceorachfbYN6agztqKrrBnVWFdhVdaMaqwljCi+0PrgDsfUTX3BtcAVj6ia+4NhAI7iW+8KhEMzCLJyAiKKpkrOZlEsURiM9pU83I7N2WxBWcmzs0Yini1da+xNa/ppPTOXu41vW3s9d46R4iy2ysyYPqxm0HzJqI/qRtYVNAebL/w+Po6HDJsgEmzqPE4+jbpTQHkzonHUaNKtdCCTLphU6FrBDNlpxqj0gNsx5RWUPIsvsG1VYR5FF1gyqrCOwovtGNcAdjCW+0MrgBscS33BsIA3YSX3BcIhWkSZN4RFFUyV3LyCVIhrJV8u8k0WRBXMmfZqycCa5mC6ni19UexZPZpLTOXu41vW3s9eY6R4iy2ysyYL6E/k0GsmNeOo/UuzoMLXoCzZ07h8XR0GHTQFmzp3FY+jYpXQHkzoHH0mgkZEMmXHDr+F/0DWMseNBEGnYLrZDuiKCvIpvmNKohHkT3zGdUAVjCXIsDoRA2MJMiwNriBsYR5FgXCIRpEmRaExRTMiHKtJUiuSu5NjZIj0CDIMlkCW9GCUCm5GC6ni19UexZZs0lpnL3ca3rb2evMdI8RZbZBYlpygy30SU1Ob6NXDVRsIJyLrxOGl0b+HTQGkzpfF0JdG3QuyAaTOicbXo1KoIJF3wY/By6EUi1Yq+EwSwf45U07BbcxxSEeRPexrSwlkia9jOpgbJEeQw+tgbJEeQw6sDZIiyGFwDMJMhhESuRFkG6Iia+Juj4KL4GxOBPfA1JQJ74mC+ni1dcexRavppPTOWt222Tpm0zlOup67R0jxG2y6qIz1g1kNsKEe9o16IjZtggkXnjYx+fTboiNm2AeR0DjUvhsUfRBIv3H/wANOsgZc8IWuhFIs+LonOgJaPqGUvoK7xxSwjie8Z0tg3+xNeNKmwVgjyA+tgbBHkB9YKwR5AbAOwlvQRErn7E16RuiIpuSN0fBVckbEoE96RglAlyOjBfVOVlc65NE5R/0R37NJaZ//9k=);
    margin-bottom: 5px;
    background-clip: text;
    background-size: 100% 100%;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
}

.subtitle {
    font-size: 1.2rem;
    color: #6e6e73;
    /* margin-bottom: 40px; */
}

/* --- Question Section --- */
.question-section {
    padding: 0px 0;
    margin-bottom: 13px;
}

.step-header h2 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Option Buttons (Apple-style pill buttons) */
.option-list {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.option-item {
    cursor: pointer;
    background-color: white;
    color: var(--text-color);
    border: 1px solid #d2d2d7;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s;
    user-select: none;
}

.option-item:hover {
    border-color: #a1a1a6;
    background-color: var(--subtle-gray);
}

.option-item.selected {
    border-color: var(--apple-blue);
    background-color: var(--apple-blue);
    color: white;
}

/* --- iPad Mockup Styling --- */
.product-preview-center {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    /* align-items: center; */
    align-content: center;
}

.ipad-mockup-container-center {
    /* width: 90%; */
    display: flex;
    /* max-width: 700px; */
    /* aspect-ratio: 4/3; */
    /* height: 576px; */
    padding: 0;
    /* background: #000000; */
    border-radius: 43px; /* Larger, premium rounded corners */
    /* position: relative; */
    /* box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); */
    /* border: 2px solid #949494; */ /* Frame effect */
    align-content: center;
    justify-content: center;
}

/* Animation for iPad screen - slides up from below */
@keyframes slideUpFromBottom {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.ipad-screen {
    position: relative;
    width: 95%;
    display: flex;
    overflow: hidden;
    border-radius: 40px;
    justify-content: center;
    align-content: center;
    box-shadow: 0px 16px 59px 9px #00000040;
    border: 23px solid #352e2e;
    height: fit-content;
    
    /* Cool slide-up animation */
    animation: slideUpFromBottom 0.8s ease-out forwards;
    opacity: 0; /* Start invisible, animation will make it visible */
}

.ipad-screen img {
    width: 100;
    height: 100%;
    position: relative;
    /* -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 3px 14px 43px -3px #000000; */
    /* box-shadow: 1px 20px 82px 106px #000000; */
    /* margin-bottom: -41px; */
    /* -webkit-box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, 5px 5px 15px 5px rgba(0, 0, 0, 0); */
    /* box-shadow: #FFF 0 -1px 4px, #000000 0 -2px 10px, inset #000000 2px 14px 20px 13px, red 0 -18px 40px, 5px 5px 15px 5px rgba(0, 0, 0, 0); */
    object-fit: cover;
    display: block;
    transition: filter 0.5s;
}

/* --- Navigation & Summary Bar --- */
.step-navigation-center {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 0;
}

.summary-bar {
    margin-bottom: 20px;
    font-size: 1rem;
    color: #3d3d41;
}

.summary-bar span {
    margin: 0 10px;
    font-weight: 600;
    color: var(--apple-blue);
    display: inline-block;
}

.button-controls {
    display: flex;
    justify-content: space-between;
}

/* Buttons (Same as before) */
.btn-primary, .btn-secondary {
    padding: 10px 25px;
    border-radius: 999px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s;
    text-align: center;
    text-decoration: none;
    font-size: 1.1rem;
    min-width: 120px;
}
.btn-primary {
    background-color: var(--apple-blue);
    color: white;
    border: none;
}
.btn-secondary {
    background-color: transparent;
    color: var(--apple-blue);
    border: 1px solid var(--apple-blue);
}

/* ... (rest of the modal/disabled CSS remains the same) ... */


/* --- Modal Styling for Popup Window --- */
.modal {
    /* 1. Ensure the modal covers the entire viewport */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    /* 2. Create a translucent black background */
    background-color: rgb(0 0 0 / 47%);
    
    /* 3. Place it above all other elements */
    z-index: 2000; 
    
    /* 4. Use Flexbox to center the content when shown */
    display: none; /* Hidden by default */
    justify-content: center; /* Centers horizontally */
    /* filter: blur(2px); */
    align-items: center;    /* Centers vertically */
}

/* When modal is displayed, use flexbox for centering */
.modal[style*="display"] {
    display: flex !important;
}

.modal-content {
    /* Styles for the white box inside the modal */
    background-color: white;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 400px;
    width: 90%;
    
    /* Ensure it has enough breathing room */
    margin: 20px; 

    /* Animation for a clean appearance */
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}

.modal-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--apple-blue);
}

#download-link-btn {
    display: inline-block;
    margin-top: 20px;
    margin-right: 10px;
}

.modal .btn-secondary {
    margin-top: 20px;
}






/* --- Navigation Arrow Styling --- */

/* 1. Wrapper to contain the question and the side arrows */
.question-navigation-wrapper {
    position: relative; /* Crucial for positioning the arrows absolutely */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* margin-bottom: 20px; */ /* Add some space below the question area */
}

/* 2. Styling the arrows (the circular buttons) */
.arrow-nav-button {
    position: absolute; /* Position relative to the wrapper */
    top: 50%;
    transform: translateY(-50%); /* Center vertically */
    
    /* Style for the circle */
    background: #e6e6e6;
    color: #6d6d6e; /* Darker grey for the arrow symbol */
    text-align: center;
    border: none;
    border-radius: 50%;
    width: 47px;
    height: 47px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: background 0.2s, color 0.2s;
    user-select: none;
}

.arrow-nav-button:hover:not(:disabled) {
    background: #e0e0e0; /* Slight hover effect */
}

.arrow-nav-button:disabled {
    background: #dfdfdfb0;
    color: #c0c0c0; /* Lighter grey when disabled */
    cursor: not-allowed;
    opacity: 0.6;
}

/* Positioning the specific buttons */
#prev-step-side {
    left: 11%; /* Adjust this percentage to move the button closer/further from the center */
    z-index: 100;
}

#next-step-side {
    right: 11%; /* Adjust this percentage to move the button closer/further from the center */
    z-index: 100;
}

/* Ensure the central question/options container still looks right */
#step-content {
    /* Center the options horizontally within the main area */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 80;
    width: 92%; /* Make the content area narrower so arrows have room */
    min-width: 300px; /* Prevent it from getting too small on tiny screens */
}