/* ===== RESET & BASE ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
:root {
    --primary: #0c2d48;
    --primary-mid: #145374;
    --primary-light: #2e86ab;
    --accent: #e8951a;
    --accent-light: #f5b940;
    --accent-dark: #c67c10;
    --success: #1a9e5c;
    --danger: #dc3545;
    --dark: #1a1a2e;
    --text: #333;
    --text-light: #6b7280;
    --light: #f0f4f8;
    --lighter: #f8fafc;
    --white: #ffffff;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow: 0 4px 20px rgba(0,0,0,.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,.12);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --transition: all .3s ease;
}
html { scroll-behavior:smooth; }
body { font-family:'Poppins',sans-serif; color:var(--text); background:var(--lighter); line-height:1.7; }
a { color:var(--primary-light); text-decoration:none; transition:var(--transition); }
a:hover { color:var(--accent); }
img { max-width:100%; height:auto; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* ===== TOP BAR ===== */
.top-bar { background:var(--dark); color:rgba(255,255,255,.8); font-size:13px; padding:8px 0; }
.top-bar .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.top-bar a { color:rgba(255,255,255,.8); margin-left:15px; font-size:12px; }
.top-bar a:hover { color:var(--accent); }
.top-bar-left { display:flex; align-items:center; gap:15px; }
.top-bar-left span { display:flex; align-items:center; gap:5px; }

/* ===== HEADER ===== */
header.main-header {
    background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
    box-shadow:var(--shadow-sm); position:sticky; top:0; z-index:100;
    border-bottom:1px solid rgba(0,0,0,.05);
}
header .container { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; }
.logo { font-family:'Playfair Display',serif; font-size:24px; font-weight:700; color:var(--primary); letter-spacing:-.5px; }
.logo span { color:var(--accent); }
nav { display:flex; align-items:center; gap:8px; }
nav a { font-weight:500; color:var(--text); padding:8px 14px; border-radius:var(--radius-sm); font-size:14px; }
nav a:hover { color:var(--primary); background:var(--light); }
nav .btn-nav { background:var(--accent); color:#fff !important; font-weight:600; }
nav .btn-nav:hover { background:var(--accent-dark); }

/* ===== HERO ===== */
.hero {
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 50%, var(--primary-light) 100%);
    color:#fff; padding:70px 0 50px; position:relative; overflow:hidden;
}
.hero::before {
    content:''; position:absolute; top:0; left:0; right:0; bottom:0;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero .container { position:relative; z-index:1; text-align:center; }
.hero h1 { font-family:'Playfair Display',serif; font-size:42px; font-weight:700; margin-bottom:12px; line-height:1.2; }
.hero p { font-size:18px; opacity:.9; max-width:600px; margin:0 auto 10px; font-weight:300; }
.hero-badges { display:flex; justify-content:center; gap:20px; margin-top:20px; flex-wrap:wrap; }
.hero-badge { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.12); padding:8px 16px; border-radius:30px; font-size:13px; font-weight:500; }

/* ===== BOOKING BOX ===== */
.booking-box {
    background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
    padding:35px; margin:-35px auto 40px; max-width:1000px; position:relative; z-index:10;
    border:1px solid rgba(0,0,0,.04);
}
.booking-box h2 { text-align:center; margin-bottom:6px; color:var(--primary); font-family:'Playfair Display',serif; font-size:26px; }
.booking-box .subtitle { text-align:center; color:var(--text-light); font-size:14px; margin-bottom:20px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-weight:500; font-size:13px; color:var(--text); margin-bottom:4px; }
.form-group input, .form-group select, .form-group textarea {
    padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:var(--radius-sm);
    font-size:14px; font-family:inherit; transition:var(--transition); background:var(--lighter);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color:var(--primary-light); outline:none; box-shadow:0 0 0 3px rgba(46,134,171,.12); background:#fff;
}
.form-group textarea { resize:vertical; min-height:60px; }

/* Transfer toggle */
.transfer-toggle { display:flex; gap:10px; margin-bottom:18px; }
.transfer-toggle label {
    flex:1; text-align:center; padding:12px; border:2px solid #e2e8f0;
    border-radius:var(--radius-sm); cursor:pointer; font-weight:600; transition:var(--transition); font-size:14px;
}
.transfer-toggle input { display:none; }
.transfer-toggle input:checked + label {
    border-color:var(--primary); background:var(--primary); color:#fff;
}
.transfer-toggle label:hover { border-color:var(--primary-light); }

/* ===== BUTTONS ===== */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:12px 28px; border:none; border-radius:var(--radius-sm);
    font-size:15px; font-weight:600; cursor:pointer; transition:var(--transition);
    text-align:center; font-family:inherit;
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-dark); color:#fff; transform:translateY(-1px); box-shadow:0 4px 15px rgba(232,149,26,.3); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#158a50; color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#b02a37; color:#fff; }
.btn-outline { background:transparent; border:2px solid var(--primary); color:var(--primary); }
.btn-outline:hover { background:var(--primary); color:#fff; }
.btn-sm { padding:7px 16px; font-size:13px; }
.btn-block { display:flex; width:100%; }
.btn-whatsapp { background:#25d366; color:#fff; }
.btn-whatsapp:hover { background:#1da851; color:#fff; }
.btn-whatsapp-float {
    position:fixed; bottom:25px; right:25px; z-index:999;
    width:60px; height:60px; border-radius:50%; background:#25d366;
    color:#fff; font-size:28px; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 20px rgba(37,211,102,.4); transition:var(--transition); text-decoration:none;
}
.btn-whatsapp-float:hover { transform:scale(1.1); box-shadow:0 6px 25px rgba(37,211,102,.5); color:#fff; }

/* ===== VEHICLE CARDS ===== */
.vehicle-section { padding:10px 0 0; }
.vehicle-section h3 { color:var(--primary); font-family:'Playfair Display',serif; font-size:22px; margin-bottom:15px; text-align:center; }
.vehicle-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0 0 20px; }
.vehicle-card {
    background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden;
    border:2px solid transparent; cursor:pointer; transition:var(--transition); position:relative;
}
.vehicle-card:hover { border-color:var(--primary-light); transform:translateY(-4px); box-shadow:var(--shadow); }
.vehicle-card.selected { border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,149,26,.2); }
.vehicle-card.selected::after {
    content:'✓'; position:absolute; top:10px; right:10px; width:28px; height:28px;
    background:var(--accent); color:#fff; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:14px; font-weight:700;
}
.vehicle-card-img {
    width:100%; height:180px; object-fit:cover; background:var(--light);
}
.vehicle-card-img-placeholder {
    width:100%; height:180px; background:linear-gradient(135deg, var(--light), #e2e8f0);
    display:flex; align-items:center; justify-content:center; font-size:50px;
}
.vehicle-card-body { padding:16px; }
.vehicle-card-body h4 { color:var(--primary); font-size:17px; margin-bottom:6px; }
.vehicle-card-body .specs { display:flex; gap:12px; font-size:12px; color:var(--text-light); margin-bottom:6px; }
.vehicle-card-body .specs span { display:flex; align-items:center; gap:3px; }
.vehicle-card-body p { font-size:13px; color:var(--text-light); line-height:1.5; }

/* ===== PRICE RESULT ===== */
.price-result {
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    color:#fff; padding:25px; border-radius:var(--radius); text-align:center;
}
.price-result .amount { font-size:38px; font-weight:700; font-family:'Playfair Display',serif; }
.price-result small { opacity:.8; font-size:14px; }

/* ===== FEATURES / WHY US ===== */
.features { padding:70px 0; background:var(--white); }
.section-title { text-align:center; font-family:'Playfair Display',serif; font-size:32px; color:var(--primary); margin-bottom:10px; }
.section-subtitle { text-align:center; color:var(--text-light); font-size:15px; margin-bottom:40px; max-width:600px; margin-left:auto; margin-right:auto; }
.features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; }
.feature-card {
    text-align:center; padding:30px 20px; border-radius:var(--radius);
    transition:var(--transition); background:var(--lighter); border:1px solid transparent;
}
.feature-card:hover { border-color:rgba(46,134,171,.15); transform:translateY(-3px); box-shadow:var(--shadow); }
.feature-card .icon {
    width:60px; height:60px; margin:0 auto 15px; border-radius:50%;
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px;
}
.feature-card h3 { color:var(--primary); margin-bottom:8px; font-size:16px; }
.feature-card p { color:var(--text-light); font-size:13px; line-height:1.6; }

/* ===== REGIONS / DESTINATIONS ===== */
.regions-section { padding:70px 0; background:var(--lighter); }
.regions-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.region-card {
    border-radius:var(--radius); overflow:hidden; background:var(--white);
    box-shadow:var(--shadow-sm); transition:var(--transition); position:relative;
}
.region-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.region-card-img {
    width:100%; height:220px; object-fit:cover; transition:transform .5s ease;
}
.region-card:hover .region-card-img { transform:scale(1.05); }
.region-card-img-wrap { overflow:hidden; position:relative; }
.region-card-img-wrap::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:60%;
    background:linear-gradient(transparent, rgba(0,0,0,.5));
}
.region-card-overlay {
    position:absolute; bottom:0; left:0; right:0; padding:20px; color:#fff; z-index:1;
}
.region-card-overlay h3 { font-family:'Playfair Display',serif; font-size:20px; margin-bottom:4px; }
.region-card-overlay p { font-size:12px; opacity:.9; }
.region-card-body { padding:16px; }
.region-card-body p { font-size:13px; color:var(--text-light); line-height:1.6; }
.region-card-body .region-link {
    display:inline-flex; align-items:center; gap:4px; font-size:13px;
    font-weight:600; color:var(--accent); margin-top:8px;
}

/* ===== FAQ ===== */
.faq-section { padding:70px 0; background:var(--white); }
.faq-list { max-width:800px; margin:0 auto; }
.faq-item {
    border:1px solid #e2e8f0; border-radius:var(--radius-sm); margin-bottom:10px;
    overflow:hidden; background:var(--white);
}
.faq-question {
    padding:18px 20px; font-weight:600; font-size:15px; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center;
    color:var(--primary); transition:var(--transition);
}
.faq-question:hover { background:var(--lighter); }
.faq-question .arrow { font-size:18px; transition:transform .3s; color:var(--text-light); }
.faq-item.open .faq-question .arrow { transform:rotate(180deg); }
.faq-answer {
    max-height:0; overflow:hidden; transition:max-height .3s ease;
    padding:0 20px; font-size:14px; color:var(--text-light); line-height:1.7;
}
.faq-item.open .faq-answer { max-height:300px; padding:0 20px 18px; }

/* ===== CTA SECTION ===== */
.cta-section {
    padding:60px 0; text-align:center;
    background:linear-gradient(135deg, var(--primary), var(--primary-mid));
    color:#fff;
}
.cta-section h2 { font-family:'Playfair Display',serif; font-size:30px; margin-bottom:10px; }
.cta-section p { opacity:.9; margin-bottom:25px; font-size:15px; }
.cta-buttons { display:flex; justify-content:center; gap:15px; flex-wrap:wrap; }
.cta-buttons .btn-primary { background:var(--accent); padding:14px 35px; font-size:16px; }
.cta-buttons .btn-whatsapp { padding:14px 35px; font-size:16px; }

/* ===== FOOTER ===== */
footer {
    background:var(--dark); color:rgba(255,255,255,.7); padding:50px 0 20px;
}
footer .footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; margin-bottom:30px; }
footer h4 { color:#fff; margin-bottom:16px; font-size:16px; font-weight:600; }
footer p, footer li { font-size:14px; line-height:1.9; }
footer ul { list-style:none; }
footer a { color:rgba(255,255,255,.7); }
footer a:hover { color:var(--accent); }
footer .footer-about { font-size:13px; line-height:1.8; }
footer .footer-about .logo { margin-bottom:12px; color:#fff; }
footer .footer-contact-item { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:14px; }
footer .bottom-bar {
    border-top:1px solid rgba(255,255,255,.1); padding-top:20px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
    font-size:12px; color:rgba(255,255,255,.5);
}
footer .bottom-links { display:flex; gap:20px; }
footer .bottom-links a { font-size:12px; color:rgba(255,255,255,.5); }

/* ===== ALERT ===== */
.alert { padding:14px 18px; border-radius:var(--radius-sm); margin-bottom:18px; font-size:14px; }
.alert-success { background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }
.alert-danger { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.alert-warning { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.alert-info { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }

/* ===== CARD ===== */
.card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:25px; margin-bottom:20px; border:1px solid rgba(0,0,0,.04); }
.card h3 { color:var(--primary); margin-bottom:15px; border-bottom:2px solid var(--light); padding-bottom:10px; font-size:18px; }

/* ===== TABLES ===== */
.table-wrap { overflow-x:auto; }
table.data-table { width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--radius); overflow:hidden; }
table.data-table th { background:var(--primary); color:#fff; padding:12px 15px; text-align:left; font-size:13px; font-weight:500; }
table.data-table td { padding:10px 15px; border-bottom:1px solid #f1f5f9; font-size:14px; }
table.data-table tr:hover { background:var(--lighter); }

/* ===== VOUCHER ===== */
.voucher { max-width:700px; margin:0 auto; background:#fff; border:2px solid var(--primary); border-radius:var(--radius); overflow:hidden; }
.voucher-header { background:linear-gradient(135deg,var(--primary),var(--primary-mid)); color:#fff; padding:22px; text-align:center; }
.voucher-body { padding:25px; }
.voucher-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f1f5f9; }
.voucher-row:last-child { border:none; }
.voucher-label { font-weight:500; color:var(--text-light); font-size:14px; }
.voucher-value { font-weight:600; color:var(--text); font-size:14px; }
.voucher-footer { background:var(--lighter); padding:14px; text-align:center; font-size:12px; color:var(--text-light); }

/* ===== PANEL LAYOUT (Admin/Agency) ===== */
.panel-layout { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.sidebar { background:var(--dark); color:#fff; padding:20px 0; }
.sidebar .logo { padding:15px 20px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:10px; font-size:18px; }
.sidebar a { display:flex; align-items:center; gap:8px; padding:11px 20px; color:rgba(255,255,255,.65); font-size:14px; transition:var(--transition); }
.sidebar a:hover, .sidebar a.active { background:rgba(255,255,255,.08); color:#fff; }
.panel-content { padding:30px; background:var(--lighter); }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; }
.panel-header h1 { font-size:22px; color:var(--text); }
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:20px; margin-bottom:30px; }
.stat-card { background:var(--white); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); text-align:center; border:1px solid rgba(0,0,0,.04); }
.stat-card .number { font-size:30px; font-weight:700; color:var(--primary); font-family:'Playfair Display',serif; }
.stat-card .label { font-size:13px; color:var(--text-light); margin-top:4px; }

/* ===== LOGIN ===== */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--primary), var(--primary-mid)); }
.login-box { background:var(--white); padding:40px; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:420px; }
.login-box h2 { text-align:center; color:var(--primary); margin-bottom:25px; font-family:'Playfair Display',serif; }
.login-box .form-group { margin-bottom:15px; }

/* ===== PAGE HEADER (inner pages) ===== */
.page-hero { background:linear-gradient(135deg, var(--primary), var(--primary-mid)); color:#fff; padding:40px 0; text-align:center; }
.page-hero h1 { font-family:'Playfair Display',serif; font-size:32px; }
.page-hero p { opacity:.8; margin-top:5px; }

/* ===== LEGAL PAGES ===== */
.legal-content { max-width:800px; margin:40px auto; padding:0 20px; }
.legal-content h2 { color:var(--primary); font-family:'Playfair Display',serif; margin:30px 0 12px; font-size:22px; }
.legal-content p, .legal-content li { font-size:14px; line-height:1.8; color:var(--text-light); }
.legal-content ul { padding-left:20px; margin:10px 0; }

/* ===== RETURN FIELDS ===== */
.return-fields { display:none; }
.return-fields.show { display:block; }

/* ===== SECTION ===== */
.section { padding:50px 0; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
    .features-grid { grid-template-columns:repeat(2,1fr); }
    .regions-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
    .form-grid { grid-template-columns:1fr; }
    .panel-layout { grid-template-columns:1fr; }
    .sidebar { display:none; }
    .hero h1 { font-size:28px; }
    .hero p { font-size:15px; }
    header .container { flex-wrap:wrap; }
    nav { width:100%; justify-content:center; margin-top:8px; }
    nav a { padding:6px 10px; font-size:13px; }
    .vehicle-cards { grid-template-columns:1fr; }
    .features-grid { grid-template-columns:1fr; }
    .regions-grid { grid-template-columns:1fr; }
    footer .footer-grid { grid-template-columns:1fr; }
    footer .bottom-bar { flex-direction:column; text-align:center; }
    .cta-buttons { flex-direction:column; align-items:center; }
    .booking-box { padding:20px; margin:-25px 10px 30px; }
    .section-title { font-size:24px; }
}

/* ===== PRINT ===== */
@media print {
    header, footer, nav, .sidebar, .btn, .no-print, .btn-whatsapp-float { display:none !important; }
    .voucher { border:1px solid #000; }
}
