/* SAJ Travel & Tourism - public website + portal */
:root {
	--saj-navy: #0B3A8C;
	--saj-navy-deep: #08285F;
	--saj-orange: #E08A00;
	--saj-orange-soft: #FFF3E0;
	--saj-ink: #1B2333;
	--saj-muted: #5B6476;
	--saj-line: #E4E8F0;
	--saj-bg-soft: #F5F7FB;
}
.saj-web { color: var(--saj-ink); }
.saj-web a { color: var(--saj-navy); }
.navbar .navbar-brand img { max-height: 44px; }
.btn-saj { background: var(--saj-orange); border-color: var(--saj-orange); color: #fff !important; font-weight: 600; border-radius: 8px; padding: .55rem 1.2rem; }
.btn-saj:hover { background: #C77A00; border-color: #C77A00; }
.btn-saj-outline { border: 1.5px solid var(--saj-navy); color: var(--saj-navy) !important; border-radius: 8px; font-weight: 600; padding: .5rem 1.1rem; background: #fff; }
.btn-saj-outline:hover { background: var(--saj-navy); color: #fff !important; }

/* hero */
.saj-hero { background: linear-gradient(120deg, var(--saj-navy-deep) 0%, var(--saj-navy) 60%, #1456C4 100%); color: #fff; position: relative; overflow: hidden; }
.saj-hero::after { content: ""; position: absolute; right: -120px; top: -80px; width: 520px; height: 520px; border-radius: 50%; border: 60px solid rgba(224,138,0,.18); }
.saj-hero .container { position: relative; z-index: 1; padding-top: 4.5rem; padding-bottom: 4.5rem; }
.saj-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.5px; color: #fff; max-width: 14ch; }
.saj-hero p.lead { color: rgba(255,255,255,.85); max-width: 46ch; font-size: 1.1rem; margin: 1rem 0 1.6rem; }
.saj-hero .eyebrow { color: var(--saj-orange); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: .78rem; }
.saj-hero .btn-saj-outline { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.7); }
.saj-hero .btn-saj-outline:hover { background: #fff; color: var(--saj-navy) !important; }

/* quick search card */
.saj-quick { background: #fff; color: var(--saj-ink); border-radius: 14px; padding: 1.25rem; box-shadow: 0 18px 50px rgba(8,40,95,.35); }
.saj-quick .nav-pills .nav-link { color: var(--saj-muted); font-weight: 600; border-radius: 8px; padding: .4rem .8rem; }
.saj-quick .nav-pills .nav-link.active { background: var(--saj-orange-soft); color: var(--saj-orange); }

.saj-section { padding: 4rem 0; }
.saj-section.soft { background: var(--saj-bg-soft); }
.saj-web h1, .saj-web h2, .saj-web h3, .saj-web h4 { margin-top: 0; }
.saj-section h2 { font-weight: 800; letter-spacing: -.3px; color: var(--saj-ink); }
.saj-section .sub { color: var(--saj-muted); max-width: 60ch; }
.saj-kicker { color: var(--saj-orange); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: .75rem; }

.saj-service { border: 1px solid var(--saj-line); border-radius: 14px; padding: 1.5rem; height: 100%; background: #fff; transition: transform .15s, box-shadow .15s; }
.saj-service:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(11,58,140,.10); }
.saj-service .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--saj-orange-soft); color: var(--saj-orange); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.saj-service h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.saj-service p { color: var(--saj-muted); font-size: .95rem; margin-bottom: .8rem; }

.saj-pkg { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--saj-line); height: 100%; display: flex; flex-direction: column; }
.saj-pkg .img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(224,138,0,.35) 0, transparent 40%), radial-gradient(circle at 10% 110%, rgba(255,255,255,.15) 0, transparent 45%); }
.saj-pkg .img[style*=url]::after { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35)); }
.saj-pkg .badge-type { z-index: 1; }
.saj-pkg .img { height: 180px; background: linear-gradient(135deg, var(--saj-navy), #1456C4); background-size: cover; background-position: center; position: relative; }
.saj-pkg .badge-type { position: absolute; left: 12px; top: 12px; background: var(--saj-orange); color: #fff; font-weight: 700; font-size: .72rem; padding: .3rem .6rem; border-radius: 6px; text-transform: uppercase; letter-spacing: .5px; }
.saj-pkg .body { padding: 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
.saj-pkg h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: .3rem; }
.saj-pkg .meta { color: var(--saj-muted); font-size: .88rem; }
.saj-pkg .price { font-size: 1.35rem; font-weight: 800; color: var(--saj-navy); }
.saj-pkg .price small { font-size: .78rem; color: var(--saj-muted); font-weight: 500; }
.saj-seats { font-size: .8rem; font-weight: 600; }
.saj-seats.low { color: #C2410C; }

.saj-trust { display: flex; flex-wrap: wrap; gap: 2rem; }
.saj-trust .num { font-size: 2rem; font-weight: 800; color: var(--saj-orange); line-height: 1; }
.saj-trust .lbl { color: rgba(255,255,255,.8); font-size: .9rem; }

.saj-contact-card { background: var(--saj-navy); color: #fff; border-radius: 16px; padding: 2rem; }
.saj-contact-card a { color: #fff; font-weight: 600; }
.saj-contact-card .row-item { display: flex; gap: .8rem; margin-bottom: 1rem; align-items: flex-start; }
.saj-contact-card .row-item svg { flex: 0 0 auto; margin-top: 3px; color: var(--saj-orange); }

/* forms */
.saj-form label { font-weight: 600; font-size: .85rem; color: var(--saj-ink); margin-bottom: .25rem; }
.saj-form .form-control { border-radius: 8px; border: 1px solid #CDD3DF; min-height: 42px; background: #fff; }
.saj-form .form-control:focus { border-color: var(--saj-navy); box-shadow: 0 0 0 3px rgba(11,58,140,.12); }
.saj-form .hp { position: absolute; left: -9999px; }
.saj-form-card { background: #fff; border: 1px solid var(--saj-line); border-radius: 16px; padding: 1.75rem; }
.saj-svc-pick { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.saj-svc-pick label { border: 1.5px solid var(--saj-line); border-radius: 999px; padding: .4rem 1rem; cursor: pointer; margin: 0; font-weight: 600; color: var(--saj-muted); }
.saj-svc-pick input { display: none; }
.saj-svc-pick input:checked + span { color: var(--saj-orange); }
.saj-svc-pick label:has(input:checked) { border-color: var(--saj-orange); background: var(--saj-orange-soft); }
.saj-success { background: #ECFDF3; border: 1px solid #A6F4C5; color: #05603A; border-radius: 12px; padding: 1.25rem; }

/* portal */
.saj-portal h1 { font-size: 1.6rem; font-weight: 800; }
.saj-stat { border: 1px solid var(--saj-line); border-radius: 12px; padding: 1rem 1.2rem; background: #fff; height: 100%; }
.saj-stat .k { color: var(--saj-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.saj-stat .v { font-size: 1.5rem; font-weight: 800; color: var(--saj-navy); }
.saj-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.saj-table th { text-align: left; color: var(--saj-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; padding: .6rem .5rem; border-bottom: 2px solid var(--saj-line); }
.saj-table td { padding: .7rem .5rem; border-bottom: 1px solid var(--saj-line); vertical-align: top; }
.saj-table .r { text-align: right; white-space: nowrap; }
.saj-pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: #EEF2FF; color: var(--saj-navy); }
.saj-pill.green { background: #ECFDF3; color: #067647; }
.saj-pill.orange { background: var(--saj-orange-soft); color: #B54708; }
.saj-pill.red { background: #FEF3F2; color: #B42318; }
.saj-pill.grey { background: #F2F4F7; color: #475467; }
.saj-trip { border: 1px solid var(--saj-line); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: .8rem; background: #fff; }
.saj-trip .route { font-size: 1.15rem; font-weight: 800; color: var(--saj-navy); letter-spacing: .5px; }
.saj-wa { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 54px; height: 54px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.saj-wa svg { color: #fff; }
@media (max-width: 767px) {
	.saj-hero .container { padding-top: 2.5rem; padding-bottom: 2.5rem; }
	.saj-section { padding: 2.5rem 0; }
	.saj-table thead { display: none; }
	.saj-table tr { display: block; border-bottom: 1px solid var(--saj-line); padding: .4rem 0; }
	.saj-table td { display: flex; justify-content: space-between; border: 0; padding: .25rem 0; }
	.saj-table td::before { content: attr(data-label); color: var(--saj-muted); font-size: .78rem; font-weight: 600; margin-right: 1rem; }
	.saj-table .r { text-align: right; }
}