:root {
    --bg: #fdfcf9;
    --card: #ffffff;
    --primary: #111111;
    --gold: #8a6d3b;
    --border: #eceae5;
    --text-light: #555555; 
    --err: #b03a2e;
    --success: #27ae60;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }

html {
    height: 100%;
}

body { 
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100%;
    background: #000; /* Fallback black */
    font-family: 'Inter', sans-serif;
    color: var(--primary);
}

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.background-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4); /* Makes your form pop! */
}

.viewport-lock {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* IMPORTANT for mobile scrolling */
    padding: 40px 20px;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Make the card flexible */
.card {
    width: 100%;
    max-width: 440px;
    background: var(--card);
    padding: 40px 25px;
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
    margin: auto; /* Centers the card when it's shorter than the screen */
}

.reveal {
    opacity: 0; transform: translateY(30px);
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }



header { text-align: center; margin-bottom: 30px; }
h1 { font-family: 'Playfair Display', serif; font-size: 2.2rem; letter-spacing: 12px; margin-right: -12px; }
.subtitle { font-size: 11px; color: var(--gold); letter-spacing: 5px; margin-top: 10px; font-weight: 600; text-transform: uppercase; }

.system-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; }
.dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; box-shadow: 0 0 10px var(--success); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }
.status-text { font-size: 10px; color: var(--text-light); letter-spacing: 1px; font-weight: 600; }

.section-label {
    font-size: 11px; color: var(--gold); font-weight: 600;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px; margin: 25px 0 15px; letter-spacing: 2px; text-transform: uppercase;
}

.group { margin-bottom: 22px; position: relative; }
.input-row { display: flex; gap: 15px; }

@media (max-width: 480px) { 
    .input-row { flex-direction: column; gap: 0; } 
    .card { padding: 30px 20px; }
}

label { display: block; font-size: 11px; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; letter-spacing: 1px; font-weight: 600; }

input, select, textarea {
    width: 100%; border: 1px solid var(--border); padding: 14px;
    font-size: 16px; background: transparent; transition: all 0.3s ease;
    font-family: inherit; border-radius: 0;
}

input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(166, 139, 91, 0.05);
    background: #fff;
}

input:required:valid { border-color: var(--success); }
.invalid-input { border-color: var(--err) !important; }

.error-msg {
    color: var(--err); font-size: 10px; position: absolute;
    bottom: -18px; left: 0; opacity: 0; transition: 0.3s; font-weight: 600;
}
.show-error { opacity: 1; }

.pill-selector { display: flex; gap: 10px; }
.pill { flex: 1; cursor: pointer; position: relative; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill span {
    display: block; padding: 12px; border: 1px solid var(--border);
    text-align: center; font-size: 12px; transition: 0.3s; font-weight: 500;
}
.pill input:checked + span { background: var(--primary); color: white; border-color: var(--primary); }

.btn {
    width: 100%; padding: 20px; background: var(--primary); color: white;
    border: none; font-weight: 600; letter-spacing: 3px;
    cursor: pointer; position: relative; margin-top: 10px; transition: 0.4s;
    font-size: 14px;
}
.btn:hover:not(:disabled) { background: var(--gold); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.loader {
    width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff; border-radius: 50%;
    animation: spin 0.8s linear infinite;
    position: absolute; left: calc(50% - 10px); top: calc(50% - 10px);
}
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none; }

.hidden-msg { height: 0; opacity: 0; overflow: hidden; transition: 0.5s; text-align: center; }
.show-msg { height: auto; opacity: 1; margin-top: 25px; padding: 15px; border: 1px solid var(--border); }
.success-theme { color: var(--success); border-color: var(--success) !important; font-weight: 600; }
.error-theme { color: var(--err); border-color: var(--err) !important; font-weight: 600; }

footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); text-align: center; }
.footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px; }
.footer-links a { font-size: 12px; color: var(--text-light); text-decoration: none; font-weight: 600; letter-spacing: 1px; transition: 0.3s; }
.footer-links a:hover { color: var(--gold); }
footer p { 
    font-size: 10px; 
    color: #888888; 
    margin-top: 10px; 
}

.shake { animation: shake 0.4s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }


.hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes sure the beach view isn't squashed */
    filter: brightness(0.6);
}

.footer-links { 
    gap: 25px; /* Increase gap slightly for easier tapping */
}