/* ============================
   RESET + BASE
============================ */
*{margin:0;padding:0;box-sizing:border-box}

html,body{
height:100%;
font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
background:
radial-gradient(circle at top,#1a2a45 0%,#050b17 70%);
color:#e8f0ff;
overflow-x:hidden;
}

/* ============================
   LAYOUT
============================ */
.booking-container{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:24px;
}

.booking-body{
background:transparent;
}

/* ============================
   CARD
============================ */
.booking-card{
position:relative;
width:440px;
max-width:100%;
padding:44px 38px 38px;
border-radius:26px;
background:
linear-gradient(160deg,rgba(30,50,85,.88),rgba(10,18,35,.96));
box-shadow:
0 50px 140px rgba(0,0,0,.75),
inset 0 0 0 1px rgba(255,255,255,.05);
overflow:hidden;
animation:fadeIn .8s ease;
backdrop-filter: blur(10px);
}

/* premium modifier */
.premium-card{
border:1px solid rgba(255,255,255,.06);
}

/* ============================
   WATERMARK LOGO (FIXED)
============================ */
.logo-watermark{
position:absolute;
inset:-20%;
background:url('/app/public/images/logo.svg') center no-repeat;
background-size:60%;
opacity:.08;
pointer-events:none;
z-index:0;
filter:contrast(110%) brightness(120%);
}

/* ============================
   CONTENT LAYER
============================ */
.card-content{
position:relative;
z-index:2;
}

.premium-content{
display:flex;
flex-direction:column;
gap:22px;
}

/* ============================
   HEADER
============================ */
.header-block{
text-align:center;
}

.title{
font-size:32px;
letter-spacing:.3px;
margin-bottom:6px;
}

.subtitle{
font-size:14px;
color:#9fb3d9;
}

/* ============================
   WORKSHOP BUTTON
============================ */
.workshop-section{
display:flex;
flex-direction:column;
gap:14px;
margin-top:10px;
}

.workshop-button{
display:block;
padding:18px 20px;
border-radius:16px;
text-decoration:none;
color:#fff;
background:
linear-gradient(135deg,#2bd673,#1ea35a);
box-shadow:
0 15px 35px rgba(43,214,115,.35),
inset 0 0 0 1px rgba(255,255,255,.18);
transition:.25s ease;
position:relative;
overflow:hidden;
}

.workshop-button::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);
opacity:0;
transition:.4s;
}

.workshop-button:hover{
transform:translateY(-3px) scale(1.03);
box-shadow:0 25px 55px rgba(43,214,115,.45);
}

.workshop-button:hover::after{
opacity:1;
}

.workshop-name{
font-size:18px;
font-weight:700;
}

.workshop-desc{
font-size:13px;
opacity:.85;
margin-top:4px;
}

/* ============================
   SERVICE INFO
============================ */
.premium-info h3{
font-size:18px;
margin-bottom:8px;
}

.premium-info p{
font-size:14px;
line-height:1.6;
color:#c9d6f2;
margin-bottom:10px;
}

/* ============================
   CONTACTS
============================ */
.contacts-premium{
display:flex;
justify-content:center;
margin-top:10px;
}

.contact-card{
padding:18px 20px;
border-radius:18px;
background:
linear-gradient(160deg,rgba(40,65,110,.45),rgba(12,20,40,.9));
box-shadow:
0 14px 35px rgba(0,0,0,.45),
inset 0 0 0 1px rgba(255,255,255,.08);
transition:.25s;
max-width:280px;
backdrop-filter: blur(8px);
}

.contact-card:hover{
transform:translateY(-3px) scale(1.03);
}

.contact-title{
font-weight:600;
margin-bottom:6px;
}

.contact-row{
font-size:13px;
margin-top:4px;
color:#bcd0ff;
}

.contact-row a{
color:#7fb3ff;
text-decoration:none;
}

/* ============================
   FOOTER
============================ */
.premium-footer{
margin-top:8px;
text-align:center;
font-size:12px;
color:#7f93c4;
opacity:.8;
}

/* ============================
   MOBILE
============================ */
@media(max-width:520px){

.booking-card{
padding:32px 22px;
border-radius:22px;
}

.logo-watermark{
background-size:85%;
opacity:.07;
}

.title{
font-size:26px;
}

}

/* ============================
   ANIMATION
============================ */
@keyframes fadeIn{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}