/* Global Resets */
    body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #e8eaf6; color: #0f172a; line-height: 1.0; }
    img { max-width: 100%; height: auto; }

    /* Header Styling - Responsive */
    .site-header { width: 100%; font-family: 'Segoe UI', Arial, sans-serif; background-color: #003366; border-bottom: 3px solid #d9232e; }
    .top-bar { background-color: rgba(0,0,0,0.2); padding: 8px 20px; color: #ffffff; font-size: 13px; text-transform: uppercase; font-weight: 600; }
    /* 1. Update the top bar alignment */
.top-bar-content { 
    max-width: 800px; /* Match the grid width */
    margin: 0 auto; 
    display: flex; 
    justify-content: flex-end; 
    gap: 15px; 
    flex-wrap: wrap; 
}


    .top-bar-content a, .top-bar-content span { color: #ffffff; text-decoration: none; white-space: nowrap; }

    .main-header { 
    max-width: 800px; /* Match the grid width */
    margin: 0 auto; 
    padding: 15px 20px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    gap: 20px; 
}

    .logo-link img { height: 80px; display: block; } /* Reduced height slightly for mobile utility */
    
    .nav-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
    .nav-menu a { color: #ffffff; text-decoration: none; font-size: 10px; font-weight: 700; text-transform: uppercase; }
    .secure-badge { background: #d9232e; color: #ffffff; padding: 5px 12px; border-radius: 3px; font-size: 10px; font-weight: bold; letter-spacing: 0.5px; white-space: nowrap; }

    /* Layout Wrappers */
    .wrap { max-width: 800px; margin: 20px auto; padding: 0 15px; }
    h1 { font-size: clamp(24px, 5vw, 40px); margin: 0; color: #123b63; }
    
    /* --- Desktop & Mobile Layout (Single Column) --- */
.grid { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    max-width: 800px; /* This is the anchor width */
    margin: 0 auto; 
}
/* Ensure both cards take up the full width of the container */
.grid .card { 
    width: 100%; 
    box-sizing: border-box; 
}
    
    .card { background: #fff; border: 1px solid #e1e6f0; border-radius: 16px; padding: 15px; box-shadow: 0 10px 25px rgba(0,0,0,.05); margin-bottom: 10px; font-size: 14px; }
    .section { font-weight: 600; margin: 25px 0 15px; font-size: 16px; color: #123b63; border-bottom: 1px solid #eee; padding-bottom: 5px; 
	
	
	}
	
    
    /* Form Grid: 2 columns on desktop, 1 on mobile */
    .form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .full { grid-column: 1 / -1; }

    input, select { width: 100%; box-sizing: border-box; padding: 14px; border-radius: 10px; border: 1.5px solid #9fa8da; background: #c5cae9; font-weight: 700; font-size: 12px; }
    
 /* 1. Target the checkbox specifically to override the global 100% width */
.ship input[type="checkbox"] {
    width: auto; 
    margin: 0; /* Remove default margins to ensure alignment */
    cursor: pointer;
}

/* 2. Style the label to align items to the left */
.ship label {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Forces content to the left */
    gap: 10px; /* Modern way to space the box and text */
    cursor: pointer;
}

/* 3. Container styling (Removed the extra brace that was here) */
.ship {
    margin-top: 15px; 
    padding: 15px; 
    border-radius: 12px; 
    background: #f7fbff; 
    border: 1px solid #e1e6f0;
}

    .shipFields { margin-top: 15px; padding: 15px; border-radius: 12px; background: #f7fbff; border: 1px solid #e1e6f0; display:none; }

    button { width: 100%; padding: 18px; border-radius: 10px; border: none; background: linear-gradient(180deg,#f2a100,#d98900); color: #fff; font-weight: 900; font-size: 20px; margin-top: 20px; cursor: pointer; transition: transform 0.1s; }
    button:active { transform: scale(0.98); }

    /* Order Summary Lines */
    .summaryLine { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0; font-weight: 400; font-size: 14px; }
    .summaryLine span:first-child { color: #64748b; }
    .total { font-size: 24px; color: #123b63; border-top: 2px solid #e1e6f0; padding-top: 15px; margin-top: 15px; }

    /* Logos and Reviews */
.logos { 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
    margin-top: 10px; 
    justify-content: flex-start; /* Aligns logos to the left */
}

.logo { 
    padding: 8px 12px; 
    border: 1px solid #e1e6f0; 
    border-radius: 12px; 
    background: #fff; 
    display: inline-flex; 
    align-items: center; 
}

.logo img { 
    
    width: auto;     /* Maintains aspect ratio so it doesn't stretch */
    max-width: 50%; /* Prevents it from overflowing on tiny screens */
    display: block;
}
    .stars { color: #f2a100; font-size: 16px; }
    .review { background: #f7fbff; border: 1px solid #e1e6f0; border-radius: 12px; padding: 12px; margin-top: 10px; font-size: 14px; }

    /* --- RESPONSIVE BREAKPOINTS --- */

/* Tablets / Pads */
@media (max-width: 1024px) {
    .wrap { margin: 10px auto; padding: 0 10px; }
    h1 { font-size: 32px; text-align: center; }
}

/* Mobile Phones */
@media (max-width: 600px) {
    .main-header { 
        flex-direction: column; 
        text-align: center; 
        gap: 15px; 
    }
    
    .nav-menu { 
        justify-content: center; 
        margin-bottom: 10px; 
    }

    .top-bar-content { 
        justify-content: center; 
        font-size: 11px; 
        gap: 10px; 
    }

    /* Force form inputs to stack vertically on small screens */
    .form { 
        grid-template-columns: 1fr; 
    }

    .logo-link img { 
        height: 60px; 
    }

    /* Adjust Order Summary text size for small screens */
    .summaryLine { 
        font-size: 14px; 
    }
    
    .total { 
        font-size: 22px; 
    }
}