/* ==========================================================================
   Sky Tours Travels — WhatsApp Functionality Styles
   Floating button, mobile sticky CTA bar, modals, and booking forms.
   ========================================================================== */

:root {
	--wa-green: #25D366;
	--wa-green-dark: #16A34A;
	--wa-forest: #185ce3;
	--wa-forest-dark: #0E3D1B;
	--wa-charcoal: #1F2430;
	--wa-muted: #5B6472;
	--wa-muted-2: #8B93A3;
	--wa-line: #E3E7EE;
	--wa-line-strong: #D3D9E3;
	--wa-surface: #F7F9FB;
	--wa-white: #FFFFFF;
	--wa-ring: rgba(20, 83, 45, 0.14);
	--wa-radius-lg: 18px;
	--wa-radius-md: 12px;
	--wa-radius-sm: 9px;
	--wa-shadow-sm: 0 2px 6px rgba(17, 24, 39, 0.06);
	--wa-shadow-md: 0 10px 26px rgba(17, 24, 39, 0.10);
	--wa-shadow-lg: 0 26px 60px rgba(17, 24, 39, 0.22);
	--wa-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* WhatsApp UI Font */
.fab-whatsapp,
.wa-modal,
.wa-form,
.mobile-cta-bar,
.wa-button,
.wa-popup {
    font-family: "Barlow", Sans-serif
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 20px 25px;
	border-radius: var(--wa-radius-sm);
	border: none;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s var(--wa-ease), box-shadow 0.15s var(--wa-ease),
		background-color 0.15s var(--wa-ease), color 0.15s var(--wa-ease), border-color 0.15s var(--wa-ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 15px; font-size: 0.85rem; border-radius: 8px; }

.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--wa-forest); outline-offset: 2px; }

.btn-whatsapp { background: var(--wa-green); color: #063d1c; box-shadow: 0 8px 20px rgba(34, 197, 94, 0.28); }
.btn-whatsapp:hover { background: var(--wa-green-dark); color: #fff; box-shadow: 0 12px 26px rgba(34, 197, 94, 0.36); transform: translateY(-1px); }

.btn-primary { background: var(--wa-forest); color: #fff; box-shadow: 0 8px 20px rgba(20, 83, 45, 0.22); }
.btn-primary:hover { background: var(--wa-forest-dark); box-shadow: 0 12px 26px rgba(20, 83, 45, 0.28); transform: translateY(-1px); }

.btn-outline { background: var(--wa-white); color: var(--wa-charcoal); border: 1.5px solid var(--wa-line-strong); }
.btn-outline:hover { border-color: var(--wa-forest); color: var(--wa-forest); background: var(--wa-surface); }

/* ---------------------------------------------------------------------
   Floating WhatsApp button (FAB) + mobile sticky CTA bar
   --------------------------------------------------------------------- */
.fab-whatsapp {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9990;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--wa-green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 28px rgba(34, 197, 94, 0.42);
	border: none;
	cursor: pointer;
	transition: transform 0.2s var(--wa-ease), box-shadow 0.2s var(--wa-ease);
}
.fab-whatsapp:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 34px rgba(34, 197, 94, 0.5); }
.fab-whatsapp:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fab-whatsapp svg { width: 29px; height: 29px; }

.mobile-cta-bar { display: none; }

body.skytours-wa-modal-open { overflow: hidden; }

@media (max-width: 760px) {	
	.mobile-cta-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9980;
		background: var(--wa-white);
		border-top: 1px solid var(--wa-line);
		padding: 6px 10px; /* Reduced vertical padding from 10px to 6px */
		gap: 8px;
		box-sizing: border-box;
		box-shadow: 0 -8px 22px rgba(17, 24, 39, 0.09);
	}
		
	.mobile-cta-bar .btn {
		flex: 1 1 0;
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 12px 12px; /* Set smaller padding for the buttons */
		font-size: 14px;    /* Optional: slightly reduce text size if needed */
	}

	.fab-whatsapp { bottom: 62px; } /* Adjusted lower to match the thinner bar */
	body.skytours-wa-padding { padding-bottom: 56px; } /* Adjusted bottom spacing */
}

@media (max-width: 480px) {
	.fab-whatsapp { width: 52px; height: 52px; right: 16px; }
	.fab-whatsapp svg { width: 25px; height: 25px; }
}

/* ---------------------------------------------------------------------
   Modals (Book Now / Customize Package / General Enquiry)
   --------------------------------------------------------------------- */
.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9995;
	background: rgba(15, 21, 33, 0.6);
	backdrop-filter: blur(2px);
	padding: 24px;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
}
.modal-overlay.is-open { display: flex; }

.modal-box {
	background: var(--wa-white);
	border-radius: var(--wa-radius-lg);
	padding: 34px;
	max-width: 540px;
	width: 100%;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	position: relative;
	box-shadow: var(--wa-shadow-lg);
	animation: skytours-wa-pop 0.2s var(--wa-ease);
}
@keyframes skytours-wa-pop {
	from { opacity: 0; transform: translateY(10px) scale(0.97); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-box h3 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; color: var(--wa-charcoal); letter-spacing: -0.01em; }
.modal-box .lead { margin: 0 0 22px; color: var(--wa-muted); font-size: 0.93rem; line-height: 1.5; }

.modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--wa-surface);
	color: var(--wa-charcoal);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s var(--wa-ease), transform 0.15s var(--wa-ease);
}
.modal-close:hover { background: var(--wa-line); transform: rotate(90deg); }
.modal-close:focus-visible { outline: 2px solid var(--wa-forest); outline-offset: 2px; }

@media (max-width: 560px) {
	.modal-overlay { padding: 0; align-items: flex-end; }
	.modal-box { border-radius: 20px 20px 0 0; max-height: calc(100vh - 24px); padding: 26px 20px 22px; }
}

/* ---------------------------------------------------------------------
   Forms shared by modals, inline package/hotel/contact forms
   --------------------------------------------------------------------- */
.booking-panel {
	background: var(--wa-white);
	border: 1px solid var(--wa-line);
	border-radius: var(--wa-radius-lg);
	padding: 32px;
	box-shadow: var(--wa-shadow-sm);
}
@media (max-width: 560px) {
	.booking-panel { padding: 22px 18px; border-radius: var(--wa-radius-md); }
}

.booking-panel h3 {
	font-family: "Barlow", Sans-serif;
	margin: 0 0 16px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wa-charcoal);
	letter-spacing: -0.01em;
}
.booking-panel h3:not(:first-child) {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--wa-line);
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 18px;
}
.form-row.single { grid-template-columns: 1fr; }
@media (max-width: 620px) {
	.form-row { grid-template-columns: 1fr; gap: 16px; }
}

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 0.83rem; font-weight: 700; color: var(--wa-charcoal); letter-spacing: 0.01em; }
.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 12px 15px;
	border-radius: var(--wa-radius-sm);
	border: 1.5px solid var(--wa-line-strong);
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--wa-charcoal);
	background: var(--wa-white);
	transition: border-color 0.15s var(--wa-ease), box-shadow 0.15s var(--wa-ease), background-color 0.15s var(--wa-ease);
	box-sizing: border-box;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--wa-muted-2); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--wa-muted-2); }
.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--wa-forest);
	box-shadow: 0 0 0 4px var(--wa-ring);
}
.field input[readonly] { background: var(--wa-surface); color: var(--wa-muted); cursor: default; }
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235B6472' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
}

.form-disclaimer { margin-top: 14px; font-size: 0.78rem; color: var(--wa-muted-2); text-align: center; line-height: 1.5; }

.form-status {
	margin: 12px 0 0;
	min-height: 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wa-forest);
	text-align: center;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity 0.2s var(--wa-ease), max-height 0.2s var(--wa-ease);
}
.form-status.is-visible { opacity: 1; max-height: 40px; margin-bottom: 4px; }

/* Duration picker (pill radio group) used in [wa_package_form] */
.duration-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}
.duration-picker input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.duration-picker label {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border-radius: 100px;
	border: 1.5px solid var(--wa-line-strong);
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--wa-charcoal);
	cursor: pointer;
	transition: background-color 0.15s var(--wa-ease), border-color 0.15s var(--wa-ease), color 0.15s var(--wa-ease), box-shadow 0.15s var(--wa-ease);
	user-select: none;
}
.duration-picker label:hover { border-color: var(--wa-forest); }
.duration-picker input[type="radio"]:checked + label {
	background: var(--wa-forest);
	border-color: var(--wa-forest);
	color: #fff;
	box-shadow: 0 6px 14px rgba(20, 83, 45, 0.25);
}
.duration-picker input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--wa-forest);
	outline-offset: 2px;
}
@media (max-width: 480px) {
	.duration-picker { gap: 8px; }
	.duration-picker label { padding: 9px 14px; font-size: 0.8rem; }
}
html,
body {
    overflow-x: hidden;
}

.mobile-cta-bar * {
    box-sizing: border-box;
}
/* WhatsApp button hover */
.btn-whatsapp:hover,
.btn-whatsapp:focus,
.btn-whatsapp:active {
    background: #185CE3 !important;
    color: #fff !important;
    border-color: #185CE3 !important;
}

.btn-whatsapp:hover svg,
.btn-whatsapp:focus svg {
    color: #fff !important;
    fill: currentColor;
}
/* Hide floating WhatsApp button on mobile */
@media (max-width: 760px) {
    .fab-whatsapp {
        display: none !important;
    }
}
/* Floating WhatsApp Button - Keep Blue on Hover */
.fab-whatsapp,
.fab-whatsapp:link,
.fab-whatsapp:visited {
    background: #25d366 !important;
    border-color: #25d366 !important;
    color: #fff !important;
}

.fab-whatsapp:hover,
.fab-whatsapp:focus,
.fab-whatsapp:active {
    background: #185CE3 !important;
    border-color: #185CE3 !important;
    color: #fff !important;
    transform: translateY(-3px);
}

.fab-whatsapp svg,
.fab-whatsapp:hover svg {
    fill: #fff !important;
    color: #fff !important;
}