:root{
--teal:#0f766e;
--teal-light:#14b8a6;
--teal-soft:#ccfbf1;
--amber:#f59e0b;
--amber-soft:#fef3c7;
--red:#dc2626;
--red-soft:#fee2e2;
--navy:#0b1f3a;
--text:#334155;
--muted:#64748b;
--border:#e2e8f0;
--bg:#f8fafc;
--white:#fff;
--shadow:0 10px 25px rgba(15,23,42,.08);
--radius:14px;
--transition:.3s;
}

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

body{
font-family:Arial,Helvetica,sans-serif;
background:var(--bg);
color:var(--text);
font-size:15px;
}

.registration-section{
padding:70px 0;
}

.registration-header{
margin-bottom:45px;
}

.registration-header h1{
font-size:38px;
font-weight:700;
color:var(--navy);
margin-bottom:10px;
}

.registration-header p{
color:var(--muted);
margin:0;
}

.section-title{
margin-bottom:18px;
}

.section-title h3{
font-size:24px;
font-weight:700;
color:var(--navy);
margin:0 0 5px;
}

.section-title p{
margin:0;
color:var(--muted);
}

.registration-card{
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow);
height:100%;
}

.registration-card.active{
border-top:5px solid var(--teal);
}

.registration-card.disabled{
border-top:5px solid var(--amber);
opacity:.8;
}

.registration-card.closed{
border-top:5px solid #94a3b8;
opacity:.7;
}

.card-header-custom{
padding:22px;
border-bottom:1px solid var(--border);
}

.card-header-custom h4{
font-size:21px;
font-weight:700;
margin:12px 0 5px;
color:var(--navy);
}

.card-header-custom p{
font-size:14px;
color:var(--muted);
margin:0;
}

.status{
display:inline-block;
padding:5px 14px;
border-radius:30px;
font-size:11px;
font-weight:700;
}

.active-status{
background:var(--teal-soft);
color:var(--teal);
}

.coming-status{
background:var(--amber-soft);
color:#b45309;
}

.closed-status{
background:var(--red-soft);
color:var(--red);
}

.card-body-custom{
padding:20px;
}

.registration-option{
display:block;
margin-bottom:12px;
cursor:pointer;
}

.registration-option:last-child{
margin-bottom:0;
}

.registration-option input{
display:none;
}

.option-content{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding:14px 16px;
border:1px solid var(--border);
border-radius:10px;
transition:.3s;
}

.registration-option.active .option-content{
background:var(--teal-soft);
border-color:var(--teal);
}

.registration-option:hover .option-content{
border-color:var(--teal);
}

.option-content h6{
margin:0;
font-size:15px;
font-weight:600;
color:var(--navy);
}

.option-content small{
display:block;
margin-top:2px;
color:var(--muted);
}

.option-content strong{
font-size:17px;
color:var(--teal);
}

.option-preview{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 0;
border-bottom:1px solid var(--border);
}

.option-preview:last-child{
border-bottom:none;
}

.option-preview h6{
margin:0;
font-size:15px;
font-weight:600;
color:var(--navy);
}

.option-preview strong{
font-size:16px;
color:var(--muted);
}

.accommodation-card{
display:block;
position:relative;
padding:25px 20px;
background:#fff;
border:2px solid #e2e8f0;
border-radius:16px;
text-align:center;
cursor:pointer;
transition:.3s;
height:100%;
box-shadow:0 8px 20px rgba(15,23,42,.05);
}

.accommodation-card{
    position:relative;
    cursor:pointer;
}

.accommodation-card input{
    position:absolute;
    opacity:0;
    inset:0;
    width:100%;
    height:100%;
    cursor:pointer;
}

.accommodation-card:hover{
transform:translateY(-4px);
border-color:var(--teal);
}

.accommodation-card.active{
border-color:var(--teal);
background:var(--teal-soft);
}

.room-icon{
width:70px;
height:70px;
margin:0 auto 18px;
border-radius:50%;
background:var(--teal-soft);
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
color:var(--teal);
}

.accommodation-card.active .room-icon{
background:var(--teal);
color:#fff;
}

.accommodation-card h5{
font-size:18px;
font-weight:700;
margin-bottom:8px;
color:var(--navy);
}

.accommodation-card p{
font-size:14px;
color:var(--muted);
margin-bottom:18px;
}

.room-price{
font-size:22px;
font-weight:700;
color:var(--teal);
}

@media(max-width:767px){

.accommodation-card{
padding:20px 15px;
}

.room-icon{
width:60px;
height:60px;
font-size:24px;
}

.room-price{
font-size:18px;
}

}

.stay-details{
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:24px;
margin-top:15px;
}

.summary-card{
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius);
padding:50px;
box-shadow:var(--shadow);
top:25px;
}

.registration-summary-bottom {
    position: static;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin: 2rem auto 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-top: 4px solid var(--teal);
}

.registration-summary-bottom .summary-total {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border);
}

.registration-summary-bottom #grandTotal {
    color: var(--teal);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.summary-title{
font-size:22px;
font-weight:700;
margin-bottom:20px;
color:var(--navy);
}

.summary-row{
display:flex;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid var(--border);
}

.summary-row span{
color:var(--muted);
}

.summary-row strong{
color:var(--navy);
}

.summary-total{
padding-top:20px;
margin-top:20px;
border-top:2px solid var(--border);
}

.summary-total span{
display:block;
margin-bottom:5px;
color:var(--muted);
}

.summary-total h2{
margin:0;
font-size:32px;
font-weight:700;
color:var(--teal);
}

.btn-register{
background:var(--teal);
color:#fff;
padding:14px;
border:none;
border-radius:999px;
font-weight:600;
box-shadow:0 2px 10px rgba(15,118,110,0.25);
transition:background 0.2s ease, box-shadow 0.2s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-register:hover{
background:#0b5d56;
color:#fff;
transform:translateY(-2px);
box-shadow:0 10px 28px rgba(15,118,110,0.4);
}

.btn-register:active{
transform:translateY(0) scale(0.98);
box-shadow:0 4px 14px rgba(15,118,110,0.3);
}

.btn-register:focus-visible{
outline:none;
box-shadow:0 0 0 3px rgba(15,118,110,0.35);
}

.btn-register:disabled{
background:#cbd5e1;
box-shadow:none;
transform:none;
cursor:not-allowed;
}

@media(max-width:991px){

.summary-card{
margin-top:30px;
position:static!important;
}

}

@media(max-width:767px){

.future-phase{
display:none;
}

.registration-section{
padding:40px 0;
}

.registration-header h1{
font-size:28px;
}

.option-content,
.accommodation-content{
flex-direction:column;
align-items:flex-start;
}

.summary-row{
flex-direction:column;
align-items:flex-start;
gap:4px;
}

.summary-total h2{
font-size:28px;
}

}