@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); *{
margin:0;
padding:0;
box-sizing:border-box;
} .upse-front-wrap{
font-family:'Inter',sans-serif;
max-width:1800px;
margin:auto;
padding:10px;
display:grid;
grid-template-columns:1fr;
gap:12px;
background:#f5f7fa;
} .upse-package-card{
background:#ffffff;
border:2px solid #065f46;
border-radius:18px;
overflow:hidden;
box-shadow:
0 5px 18px rgba(15,23,42,0.05);
transition:.25s ease;
}
.upse-package-card:hover{
transform:translateY(-1px);
box-shadow:
0 10px 24px rgba(15,23,42,0.08);
} .upse-package-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
padding:18px;
position:relative;
} .upse-package-top h2{
color:#ffffff;
font-size:28px;
font-weight:800;
line-height:1.1;
letter-spacing:-0.3px;
} .upse-total-nights{
margin-top:6px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 12px;
background:rgba(255,255,255,0.14);
backdrop-filter:blur(8px);
border-radius:10px;
color:#ffffff;
font-size:12px;
font-weight:700;
} .upse-badge{
background:#facc15;
color:#111827;
padding:8px 14px;
border-radius:10px;
font-size:12px;
font-weight:800;
letter-spacing:.2px;
box-shadow:
0 3px 10px rgba(0,0,0,.10);
} .upse-departure-select-wrap{
display:flex;
flex-direction:column;
gap:8px;
width:100%;
max-width:360px;
min-width:300px;
position:relative;
margin:auto;
} .upse-departure-select-wrap label{
font-size:13px;
font-weight:800;
color:#ffffff;
display:flex;
align-items:center;
gap:6px;
letter-spacing:.3px;
line-height:1.2;
text-shadow:
0 2px 4px rgba(0,0,0,.30);
} .upse-departure-select{
width:100%;
height:52px;
border:none;
border-radius:15px;
padding:
0 52px 0 16px;
font-size:15px;
font-weight:700;
color:#065f46;
background:
linear-gradient(
135deg,
#ffffff,
#f0fdf4
);
box-shadow:
0 6px 18px rgba(0,0,0,.12);
appearance:none;
-webkit-appearance:none;
outline:none;
cursor:pointer;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.upse-departure-select:hover{
transform:translateY(-1px);
box-shadow:
0 10px 24px rgba(0,0,0,.16);
}
.upse-departure-select:focus{
box-shadow:
0 0 0 4px rgba(16,185,129,.18),
0 10px 24px rgba(0,0,0,.16);
} .upse-departure-select-wrap::after{
content:"⌄";
position:absolute;
right:16px;
bottom:13px;
font-size:20px;
font-weight:700;
color:#065f46;
pointer-events:none;
z-index:3;
} .upse-top-strip{
display:grid;
grid-template-columns:
minmax(120px,1fr) minmax(170px,1.2fr) minmax(180px,1.3fr) minmax(140px,1fr) minmax(180px,1.2fr) minmax(170px,1.2fr); border-top:1px solid #e5e7eb;
border-bottom:1px solid #e5e7eb;
background:#ffffff;
align-items:stretch;
}
.upse-strip-item{
padding:12px;
border-right:1px solid #e5e7eb;
display:flex;
flex-direction:column;
justify-content:flex-start;
min-width:0;
}
.upse-strip-item:hover{
background:#f8fafc;
}
.upse-strip-item:last-child{
border-right:none;
}
.upse-strip-title{
font-size:12px;
font-weight:800;
color:#065f46;
margin-bottom:5px;
display:flex;
align-items:center;
gap:5px;
line-height:1.3;
}
.upse-strip-value{
font-size:13px;
line-height:1.7;
color:#111827;
word-break:break-word;
} .upse-hotels-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
padding:10px;
} @media(max-width:768px){
.upse-front-wrap{
padding:8px;
gap:10px;
}
.upse-package-top{
flex-direction:column;
align-items:stretch;
padding:14px;
}
.upse-package-top h2{
font-size:24px;
}
.upse-departure-select-wrap{
max-width:100%;
min-width:100%;
}
.upse-departure-select{
height:50px;
font-size:14px;
border-radius:14px;
}
.upse-top-strip{
grid-template-columns:1fr 1fr;
}
.upse-hotels-row{
grid-template-columns:1fr;
}
}
@media(max-width:520px){
.upse-top-strip{
grid-template-columns:1fr;
}
} .upse-services-row{
display:grid;
grid-template-columns:repeat(5,1fr);
border-top:1px solid #e5e7eb;
border-bottom:1px solid #e5e7eb;
background:#ffffff;
}
.upse-service-box{
padding:12px;
border-right:1px solid #e5e7eb;
transition:.2s ease;
}
.upse-service-box:hover{
background:#f8fafc;
}
.upse-service-box:last-child{
border-right:none;
}
.upse-service-box h4{
display:flex;
align-items:center;
gap:6px;
font-size:14px;
font-weight:800;
color:#065f46;
margin-bottom:6px;
line-height:1.3;
}
.upse-service-icon{
display:inline-flex;
align-items:center;
justify-content:center;
font-size:15px;
line-height:1;
flex-shrink:0;
}
.upse-service-box div{
font-size:12px;
line-height:1.7;
color:#111827;
word-break:break-word;
} .upse-pricing-row{
display:grid;
grid-template-columns:2fr 1fr;
gap:10px;
padding:10px;
}
.upse-room-section,
.upse-child-box{
border:1px solid #e5e7eb;
border-radius:16px;
padding:14px;
background:#ffffff;
box-shadow:
0 3px 10px rgba(15,23,42,.04);
}
.upse-room-section h3,
.upse-child-box h3{
font-size:18px;
font-weight:800;
color:#065f46;
margin-bottom:10px;
line-height:1.3;
}
.upse-room-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
}
.upse-room-card{
border:1px solid #dbe2ea;
border-radius:12px;
padding:10px;
background:#ffffff;
transition:.2s ease;
}
.upse-room-card:hover{
transform:translateY(-1px);
box-shadow:
0 6px 14px rgba(15,23,42,.06);
}
.upse-room-title{
font-size:16px;
font-weight:800;
margin-bottom:6px;
color:#111827;
line-height:1.3;
letter-spacing:.1px;
}
.upse-room-price{
font-size:24px;
font-weight:800;
color:#065f46;
margin-bottom:4px;
line-height:1.1;
}
.upse-room-occ{
font-size:12px;
color:#475569;
line-height:1.5;
}
.upse-child-item{
padding:8px 0;
border-bottom:1px solid #e5e7eb;
font-size:13px;
font-weight:600;
color:#111827;
line-height:1.6;
}
.upse-child-item:last-child{
border-bottom:none;
} .upse-description-card{
margin:0 10px 10px;
border:1px solid #e5e7eb;
border-radius:16px;
padding:14px;
background:#ffffff;
box-shadow:
0 3px 10px rgba(15,23,42,.04);
}
.upse-description-card h3{
font-size:18px;
font-weight:800;
color:#065f46;
margin-bottom:8px;
}
.upse-description-card p{
font-size:13px;
line-height:1.8;
color:#334155;
} .upse-front-actions{
padding:0 10px 10px;
}
.upse-request-btn{
width:100%;
height:50px;
border:none;
border-radius:14px;
background:
linear-gradient(
135deg,
#065f46,
#047857
);
color:#ffffff;
font-size:15px;
font-weight:800;
letter-spacing:.2px;
cursor:pointer;
transition:.2s ease;
box-shadow:
0 6px 18px rgba(6,95,70,.18);
}
.upse-request-btn:hover{
transform:translateY(-1px);
box-shadow:
0 10px 24px rgba(6,95,70,.22);
}
.upse-request-btn:active{
transform:scale(.99);
}
.upse-request-btn.disabled{
background:#9ca3af;
box-shadow:none;
cursor:not-allowed;
} @media(max-width:1200px){
.upse-services-row{
grid-template-columns:1fr 1fr;
}
.upse-pricing-row{
grid-template-columns:1fr;
}
}
@media(max-width:768px){
.upse-services-row{
grid-template-columns:1fr 1fr;
}
.upse-service-box{
border-right:none;
border-bottom:1px solid #e5e7eb;
}
.upse-service-box:last-child{
border-bottom:none;
}
.upse-room-grid{
grid-template-columns:1fr 1fr !important;
gap:8px;
}
.upse-room-card{
padding:10px;
}
.upse-room-title{
font-size:15px;
}
.upse-room-price{
font-size:18px;
}
.upse-room-occ{
font-size:11px;
}
.upse-request-btn{
height:46px;
font-size:14px;
border-radius:12px;
}
}
@media(max-width:520px){
.upse-services-row{
grid-template-columns:1fr;
}
.upse-room-grid{
grid-template-columns:1fr 1fr !important;
}
} .upse-package-card{
border-radius:16px;
}
.upse-package-top{
padding:14px;
}
.upse-top-strip{
gap:0;
}
.upse-strip-item{
padding:10px;
}
.upse-strip-title{
margin-bottom:4px;
}
.upse-hotels-row{
gap:10px;
padding:10px;
}
.upse-services-row{
gap:0;
}
.upse-service-box{
padding:10px;
}
.upse-service-box h4{
margin-bottom:5px;
}
.upse-pricing-row{
padding:10px;
gap:10px;
}
.upse-room-section,
.upse-child-box{
padding:12px;
border-radius:14px;
}
.upse-room-section h3,
.upse-child-box h3{
margin-bottom:8px;
}
.upse-room-grid{
gap:8px;
}
.upse-room-card{
padding:10px;
border-radius:12px;
}
.upse-room-title{
margin-bottom:5px;
}
.upse-room-price{
margin-bottom:3px;
line-height:1.1;
}
.upse-child-item{
padding:7px 0;
}
.upse-description-card{
margin:0 10px 10px;
padding:12px;
border-radius:14px;
}
.upse-description-card h3{
margin-bottom:6px;
} .upse-hotels-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
padding:10px;
}
@media(max-width:768px){
.upse-hotels-row{
grid-template-columns:1fr;
}
}  .upse-hotel-card{
border:2px solid #111827;
border-radius:16px;
padding:14px;
background:#ffffff;
color:#111827;
box-shadow:
0 4px 14px rgba(15,23,42,.04);
transition:.2s ease;
} .upse-hotel-card.gold{
border:2px solid #15803d;
border-radius:16px;
padding:14px;
background:#ffffff;
color:#111827;
box-shadow:
0 4px 14px rgba(15,23,42,.04);
transition:.2s ease;
}  .upse-city-label{
display:flex;
justify-content:center;
align-items:center;
width:max-content;
margin:0 auto 10px;
padding:7px 18px;
border-radius:999px;
background:#111827;
color:#ffffff;
border:2px solid #111827;
font-size:13px;
font-weight:800;
letter-spacing:.3px;
box-shadow:
0 3px 10px rgba(0,0,0,.08);
} .upse-city-label.gold{
background:
linear-gradient(
135deg,
#166534,
#15803d
);
color:#ffffff;
border:2px solid #15803d;
} .upse-hotel-label{
font-size:10px;
font-weight:800;
opacity:.75;
margin-bottom:3px;
text-transform:uppercase;
letter-spacing:.5px;
} .upse-hotel-title{
font-size:20px;
font-weight:800;
color:#111827;
margin-bottom:5px;
line-height:1.2;
letter-spacing:-0.1px;
} .upse-hotel-sub{
font-size:13px;
line-height:1.7;
color:#374151;
margin-bottom:10px;
} .upse-hotel-main-row{
display:grid;
grid-template-columns:
2.5fr
.9fr
.9fr
.7fr;
gap:10px;
align-items:flex-start;
} .upse-hotel-left{
min-width:0;
}
.upse-hotel-right{
display:contents;
} .upse-date-box{
background:#f8fafc;
border:1px solid #e5e7eb;
border-radius:12px;
padding:9px;
font-size:12px;
line-height:1.6;
color:#111827;
font-weight:600;
} .upse-meal-box{
margin-top:10px;
padding-top:10px;
border-top:1px solid #e5e7eb;
font-size:12px;
line-height:1.7;
color:#111827;
} @media(max-width:768px){
.upse-hotel-main-row{
display:grid !important;
grid-template-columns:
1fr
1fr
1fr !important;
gap:8px !important;
align-items:stretch;
}
.upse-hotel-left{
grid-column:1 / -1;
}
.upse-date-box{
width:100%;
min-height:68px;
padding:8px !important;
font-size:11px !important;
line-height:1.5 !important;
}
.upse-meal-box{
grid-column:1 / -1;
margin-top:4px !important;
padding-top:8px !important;
font-size:12px !important;
}
} .upse-departure-select-wrap{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
width:auto;
max-width:320px;
min-width:260px;
margin:auto;
position:relative;
}
.upse-departure-select-wrap label{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
font-size:13px;
font-weight:800;
color:#ffffff;
background:
rgba(255,255,255,.15);
padding:6px 14px;
border-radius:999px;
backdrop-filter:blur(8px);
}
.upse-departure-select{
width:100%;
height:48px;
border:none;
border-radius:16px;
padding:
0 42px 0 16px;
font-size:14px;
font-weight:700;
color:#111827;
background:#ffffff;
box-shadow:
0 8px 18px rgba(0,0,0,.14);
appearance:none;
-webkit-appearance:none;
outline:none;
cursor:pointer;
}
.upse-departure-select-wrap::after{
content:"⌄";
position:absolute;
right:14px;
bottom:13px;
font-size:18px;
font-weight:700;
color:#065f46;
pointer-events:none;
}
@media(max-width:768px){
.upse-departure-select-wrap{
max-width:260px;
min-width:220px;
}
.upse-departure-select{
height:44px;
font-size:13px;
}
} .upse-inquiry-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.60);
display:none;
align-items:center;
justify-content:center;
z-index:99999;
padding:12px;
backdrop-filter:blur(3px);
}
.upse-inquiry-box{
width:100%;
max-width:460px;
background:#ffffff;
border-radius:18px;
padding:20px;
position:relative;
max-height:90vh;
overflow-y:auto;
box-shadow:
0 14px 34px rgba(0,0,0,.18);
} .upse-close-modal{
position:absolute;
top:10px;
right:14px;
font-size:24px;
cursor:pointer;
color:#111827;
transition:.2s ease;
line-height:1;
}
.upse-close-modal:hover{
transform:rotate(90deg);
} .upse-inquiry-box input,
.upse-inquiry-box textarea{
width:100%;
padding:12px 14px;
border:1px solid #d1d5db;
border-radius:12px;
margin-bottom:12px;
font-size:13px;
outline:none;
transition:.2s ease;
background:#ffffff;
}
.upse-inquiry-box textarea{
min-height:90px;
resize:vertical;
}
.upse-inquiry-box input:focus,
.upse-inquiry-box textarea:focus{
border-color:#10b981;
box-shadow:
0 0 0 3px rgba(16,185,129,.12);
} .upse-submit-inquiry-btn{
width:100%;
border:none;
background:
linear-gradient(
135deg,
#065f46,
#047857
);
color:#ffffff;
padding:14px;
border-radius:12px;
font-weight:800;
font-size:14px;
cursor:pointer;
transition:.2s ease;
box-shadow:
0 6px 18px rgba(6,95,70,.16);
}
.upse-submit-inquiry-btn:hover{
transform:translateY(-1px);
background:
linear-gradient(
135deg,
#047857,
#059669
);
box-shadow:
0 10px 24px rgba(6,95,70,.22);
}
.upse-submit-inquiry-btn:active{
transform:scale(.99);
} @media(max-width:768px){
.upse-inquiry-box{
padding:16px;
border-radius:16px;
}
.upse-submit-inquiry-btn{
padding:13px;
font-size:13px;
}
} .upse-guest-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
} .upse-btn-loading{
display:none;
}
.upse-request-btn.loading{
opacity:.7;
pointer-events:none;
}
.upse-request-btn.loading .upse-btn-text{
display:none;
}
.upse-request-btn.loading .upse-btn-loading{
display:inline-block;
} @media(max-width:1024px){
.upse-hotel-main-row{
grid-template-columns:1fr 1fr;
gap:10px;
}
} @media(max-width:768px){
.upse-hotels-row{
grid-template-columns:1fr;
}
.upse-hotel-main-row{
grid-template-columns:1fr;
gap:10px;
}
.upse-hotel-title{
font-size:18px;
}
.upse-guest-grid{
grid-template-columns:1fr;
}
.upse-inquiry-box{
padding:16px;
border-radius:16px;
}
} .upse-package-card{
position:relative;
overflow:hidden;
} .package-theme-1{
background:
linear-gradient(
180deg,
#ecfeff,
#ffffff
);
border:2px solid #99f6e4;
}
.package-theme-1 .upse-package-top{
background:
linear-gradient(
135deg,
#0f766e,
#14b8a6
) !important;
} .package-theme-2{
background:
linear-gradient(
180deg,
#eff6ff,
#ffffff
);
border:2px solid #bfdbfe;
}
.package-theme-2 .upse-package-top{
background:
linear-gradient(
135deg,
#2563eb,
#60a5fa
) !important;
} .package-theme-3{
background:
linear-gradient(
180deg,
#faf5ff,
#ffffff
);
border:2px solid #d8b4fe;
}
.package-theme-3 .upse-package-top{
background:
linear-gradient(
135deg,
#9333ea,
#c084fc
) !important;
} .package-theme-4{
background:
linear-gradient(
180deg,
#fff7ed,
#ffffff
);
border:2px solid #fdba74;
}
.package-theme-4 .upse-package-top{
background:
linear-gradient(
135deg,
#ea580c,
#fb923c
) !important;
} .package-theme-5{
background:
linear-gradient(
180deg,
#fefce8,
#ffffff
);
border:2px solid #fde047;
}
.package-theme-5 .upse-package-top{
background:
linear-gradient(
135deg,
#ca8a04,
#facc15
) !important;
}
.package-theme-5 .upse-package-top h2,
.package-theme-5 .upse-total-nights,
.package-theme-5 .upse-departure-select-wrap label{
color:#111827 !important;
text-shadow:none !important;
} .package-theme-6{
background:
linear-gradient(
180deg,
#fff1f2,
#ffffff
);
border:2px solid #fda4af;
}
.package-theme-6 .upse-package-top{
background:
linear-gradient(
135deg,
#be123c,
#fb7185
) !important;
} .package-theme-1,
.package-theme-2,
.package-theme-3,
.package-theme-4,
.package-theme-5,
.package-theme-6{
transition:.22s ease;
box-shadow:
0 5px 16px rgba(15,23,42,.04);
}
.package-theme-1:hover,
.package-theme-2:hover,
.package-theme-3:hover,
.package-theme-4:hover,
.package-theme-5:hover,
.package-theme-6:hover{
transform:translateY(-1px);
box-shadow:
0 10px 24px rgba(15,23,42,.08);
} .upse-per-person{
display:block;
margin-top:3px;
font-size:11px;
font-weight:700;
color:#475569;
line-height:1.2;
text-transform:uppercase;
letter-spacing:.4px;
}