@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root {
--deep-green: #123b30;
--emerald: #1d5745;
--gold: #c4a46a;
--ivory: #f7f5ee;
--text: #203b32;
--muted: #7b877f;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

body {
min-height: 100vh;
font-family: 'DM Sans', sans-serif;
color: var(--text);

background:
radial-gradient(ellipse at 10% 15%, rgba(196,164,106,0.18), transparent 35%),
radial-gradient(ellipse at 90% 85%, rgba(29,87,69,0.13), transparent 35%),
linear-gradient(135deg, #e9eee5, #f8f6ef 48%, #e8eee7);

overflow-x: hidden;
position: relative;
}

/* Decorative background */

body::before,
body::after {
content: "";
position: fixed;
border-radius: 50%;
pointer-events: none;
z-index: -1;
}

body::before {
width: 420px;
height: 420px;
border: 1px solid rgba(29,87,69,0.12);
top: -180px;
right: -100px;

box-shadow:
0 0 0 35px rgba(29,87,69,0.025),
0 0 0 75px rgba(29,87,69,0.02);
}

body::after {
width: 350px;
height: 350px;
border: 1px solid rgba(196,164,106,0.25);
bottom: -180px;
left: -100px;

box-shadow:
0 0 0 35px rgba(196,164,106,0.035),
0 0 0 75px rgba(196,164,106,0.025);
}

/* Header */

.demo-header {
width: min(1180px, 90%);
margin: auto;
padding: 28px 0;

display: flex;
align-items: center;
gap: 15px;
}

.demo-back-link {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}

.demo-logo {
width: 48px;
height: 48px;
object-fit: contain;
border-radius: 50%;
border: 2px solid var(--gold);
}

.brand-text {
color: var(--deep-green);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}

.back-divider {
width: 1px;
height: 28px;
background: #c9cfc5;
margin-left: 10px;
}

.back-label {
color: var(--emerald);
font-size: 13px;
text-decoration: none;
margin-left: 5px;
transition: 0.3s;
}

.back-label:hover {
color: var(--gold);
}

/* Main section */

.booking-container {
min-height: calc(100vh - 105px);

display: flex;
justify-content: center;
align-items: center;

padding: 30px 20px 75px;
}

/* Booking card */

.booking-card {
width: 100%;
max-width: 590px;

padding: 55px 58px;

position: relative;
overflow: hidden;

background: rgba(255,255,255,0.88);

border: 1px solid rgba(196,164,106,0.4);
border-radius: 24px;

box-shadow:
0 25px 70px rgba(18,59,48,0.10),
0 5px 20px rgba(18,59,48,0.04);

backdrop-filter: blur(16px);

animation: cardAppear 0.8s ease both;
}

.booking-card::before {
content: "";

position: absolute;
top: 0;
left: 0;

width: 100%;
height: 5px;

background: linear-gradient(
90deg,
#123b30,
#c4a46a,
#1d5745
);
}

.decorative-symbol {
position: absolute;
right: 28px;
top: 22px;

color: var(--gold);
font-size: 30px;
opacity: 0.7;

animation: symbolFloat 4s ease-in-out infinite;
}

@keyframes symbolFloat {
0%, 100% {
transform: rotate(0deg) translateY(0);
}

50% {
transform: rotate(15deg) translateY(-5px);
}
}

@keyframes cardAppear {
from {
opacity: 0;
transform: translateY(25px);
}

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

/* Heading */

.eyebrow {
color: #a3834f;
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
margin-bottom: 18px;
}

.booking-card h1 {
font-family: 'Playfair Display', serif;

font-size: clamp(38px, 5vw, 52px);
line-height: 1.12;
font-weight: 500;

color: var(--deep-green);
margin-bottom: 17px;
}

.booking-card h1 em {
color: #a98752;
font-weight: 500;
}

.intro {
font-size: 14px;
line-height: 1.8;
color: #78847c;
margin-bottom: 30px;
}

/* Form */

#demoForm {
display: flex;
flex-direction: column;
gap: 17px;
}

.form-group {
width: 100%;
}

#demoForm label {
display: block;

font-size: 12px;
font-weight: 600;
color: var(--deep-green);

margin-bottom: 8px;
}

#demoForm input,
#demoForm select,
#demoForm textarea {
width: 100%;
min-height: 51px;

padding: 14px 15px;

border: 1px solid #dfe5dc;
border-radius: 10px;

outline: none;

background: #fbfcf9;
color: var(--deep-green);

font-family: 'DM Sans', sans-serif;
font-size: 13px;

transition: 0.25s ease;
}

#demoForm textarea {
min-height: 105px;
resize: vertical;
line-height: 1.6;
}

#demoForm input:focus,
#demoForm select:focus,
#demoForm textarea:focus {
border-color: var(--emerald);
background: #fff;

box-shadow: 0 0 0 4px rgba(29,87,69,0.08);
}

#demoForm input::placeholder {
color: #aab2aa;
}

/* Button */

#demoForm button {
width: 100%;
height: 56px;

border: none;
border-radius: 10px;

margin-top: 8px;

background: linear-gradient(110deg, #123b30, #24644d);

color: #fff;

font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.5px;

cursor: pointer;

box-shadow: 0 10px 24px rgba(18,59,48,0.18);

transition: 0.3s ease;
}

#demoForm button span {
display: inline-block;
margin-left: 10px;

color: #e5c58e;
font-size: 18px;

transition: 0.3s;
}

#demoForm button:hover {
transform: translateY(-3px);

box-shadow: 0 15px 30px rgba(18,59,48,0.25);

background: linear-gradient(110deg, #1b5744, #123b30);
}

#demoForm button:hover span {
transform: translate(4px, -3px);
}

#demoForm button:disabled {
cursor: wait;
opacity: .75;
transform: none;
}

/* Confirmation message */

#confirmation {
margin-top: 20px;
padding: 15px;

background: #edf5ed;

border: 1px solid #c9dfcc;
border-radius: 10px;

color: #245b3f;
font-size: 13px;
line-height: 1.7;
}

#confirmation[data-state="error"] {
  border-color: #e4c7c2;
  background: #fbefed;
  color: #963b31;
}

#confirmation[data-state="sending"] {
  border-color: #d7ddcf;
  background: #f3f5ef;
  color: var(--deep-green);
}

/* Bottom note */

.note {
margin-top: 23px;

text-align: center;

font-size: 10px;
letter-spacing: 0.8px;

color: #8b968d;
}

/* Responsive */

@media (max-width: 600px) {

.demo-header {
width: 92%;
padding: 20px 0;
gap: 9px;
}

.demo-logo {
width: 40px;
height: 40px;
}

.brand-text {
font-size: 9px;
letter-spacing: 1px;
}

.back-divider {
margin-left: 3px;
}

.back-label {
font-size: 11px;
}

.booking-container {
padding: 20px 15px 45px;
}

.booking-card {
padding: 40px 24px;
border-radius: 18px;
}

.booking-card h1 {
font-size: 39px;
}

.intro {
font-size: 13px;
}
}

@media (max-width: 380px) {
.back-label {
font-size: 10px;
}

.brand-text {
font-size: 8px;
}

.booking-card {
padding: 35px 19px;
}
}