/* Sky Activity Booking - frontend styles */
:root {
	--sab-orange: #ff6a00;
	--sab-orange-dark: #e05e00;
	--sab-dark: #16181d;
	--sab-dark-2: #1f2229;
	--sab-text-light: #f2f2f2;
	--sab-text-muted: #b7b7b7;
	--sab-radius: 10px;
}

/* ---------- Admin: Activity product data panel ---------- */
.sab-panel-heading { padding-left: 12px; }
.sab-price-field .sab-price-input {
	border: 2px solid var(--sab-orange) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
}

/* ---------- Custom title & price classes (independent of WooCommerce's own CSS classes) ---------- */
.sab-activity-title {
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 0 16px !important;
}
.sab-activity-price-value, .sab-activity-price-symbol {
	color: inherit !important;
	font: inherit !important;
}

/* ---------- Hide WooCommerce's own default title/price on activity pages ----------
   The plugin renders its own title + price inside the booking box, so
   WooCommerce's normal (default-theme) title/price markup — if it ever
   renders in addition to ours — is hidden here. Scoped narrowly (specific
   WooCommerce classes only, not generic h1/h2) so it can't accidentally
   hide unrelated headings elsewhere on the page. Our own elements are
   excluded via :not() as an extra safeguard. */
body.sab-activity-product h1.product_title,
body.sab-activity-product .woocommerce-product-details__short-description,
body.sab-activity-product .summary > .price:not(.sab-activity-price-value),
body.sab-activity-product .summary > form.cart,
body.sab-activity-product .single_add_to_cart_button {
	display: none !important;
}
/* Make sure our own title/box always sit above and clear any leftover floats. */
.sab-activity-title, .sab-booking-box {
	position: relative !important;
	z-index: 5 !important;
	clear: both !important;
}

/* ---------- Booking box (single product) ---------- */
.sab-booking-box {
	background: var(--sab-dark-2) !important;
	color: var(--sab-text-light) !important;
	border-radius: 14px !important;
	padding: 22px !important;
	max-width: 380px !important;
	margin: 16px 0 24px !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25) !important;
	border: 1px solid #2a2e37 !important;
}
.sab-booking-price {
	display: flex !important;
	align-items: baseline !important;
	gap: 8px !important;
	margin-bottom: 14px !important;
}
.sab-price-amount {
	font-size: 26px !important;
	font-weight: 700 !important;
	color: var(--sab-orange) !important;
}
.sab-price-label {
	font-size: 13px !important;
	color: var(--sab-text-muted) !important;
}
.sab-booking-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}
.sab-field-label {
	font-size: 13px !important;
	color: var(--sab-text-muted) !important;
	margin-top: 4px !important;
}
.sab-booking-form input[type="date"] {
	background: #2a2e37 !important;
	border: 1px solid #3a3f4a !important;
	color: var(--sab-text-light) !important;
	border-radius: 8px !important;
	padding: 10px 12px !important;
	width: 90% !important;
	max-width: 100% !important;
	font-size: 14px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: border-color .15s ease !important;
}
.sab-booking-form input[type="date"]:focus {
	border-color: var(--sab-orange) !important;
	outline: none !important;
}
.sab-booking-form input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1) brightness(1.6) !important;
	cursor: pointer !important;
	opacity: .9 !important;
}
.sab-booking-form input[type="date"]::-webkit-datetime-edit {
	color: var(--sab-text-light) !important;
}
.sab-booking-form select {
	background: #2a2e37 !important;
	border: 1px solid #3a3f4a !important;
	color: var(--sab-text-light) !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	width: 100% !important;
}
.sab-persons-box {
	display: flex !important;
	align-items: center !important;
	background: #2a2e37 !important;
	border: 1px solid #3a3f4a !important;
	border-radius: 8px !important;
	overflow: hidden !important;
}
body.sab-activity-product .sab-persons-box button.sab-persons-minus,
body.sab-activity-product .sab-persons-box button.sab-persons-plus,
.sab-persons-box button {
	background: #3a3f4a !important;
	background-color: #3a3f4a !important;
	background-image: none !important;
	color: var(--sab-text-light) !important;
	border: 0 !important;
	width: 42px !important;
	height: 42px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: background .15s ease !important;
}
.sab-persons-box button:hover {
	background: var(--sab-orange) !important;
	background-color: var(--sab-orange) !important;
	background-image: none !important;
}
.sab-persons-box input {
	flex: 1 !important;
	text-align: center !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--sab-text-light) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
}
.sab-total-row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	border-top: 1px solid #3a3f4a !important;
	padding-top: 10px !important;
	margin-top: 4px !important;
	font-weight: 600 !important;
}
.sab-total-amount { color: var(--sab-orange) !important; font-size: 18px !important; }
body.sab-activity-product .sab-booking-box button.sab-book-now-btn,
body.sab-activity-product .sab-booking-box a.sab-book-now-btn,
.sab-book-now-btn {
	background: var(--sab-orange) !important;
	background-color: var(--sab-orange) !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 14px 18px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: .3px !important;
	cursor: pointer !important;
	text-align: center !important;
	text-decoration: none !important;
	display: inline-block !important;
	width: 100% !important;
	box-shadow: 0 4px 14px rgba(255, 106, 0, .35) !important;
	transition: background .15s ease, transform .1s ease !important;
}
.sab-book-now-btn:hover {
	background: var(--sab-orange-dark) !important;
	background-color: var(--sab-orange-dark) !important;
	background-image: none !important;
	color: #fff !important;
	transform: translateY(-1px) !important;
}
.sab-book-now-btn:active { transform: translateY(0) !important; }

/* ---------- Extra content (description / faq / restrictions) ---------- */
.sab-extra-content { margin-top: 32px !important; max-width: 1100px !important; }
.sab-content-block { margin-bottom: 8px !important; }

.sab-section-title {
	margin: 26px 0 16px !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	position: relative !important;
	padding-left: 14px !important;
}
.sab-section-title::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 4px !important;
	bottom: 4px !important;
	width: 4px !important;
	border-radius: 2px !important;
	background: var(--sab-orange) !important;
}

.sab-faq-list { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.sab-faq-2col {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 20px !important;
	align-items: start !important;
}
@media (max-width: 780px) {
	.sab-faq-2col { grid-template-columns: 1fr !important; }
}
.sab-faq-item {
	background: var(--sab-dark-2) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	border: 1px solid #2a2e37 !important;
	align-self: start !important;
}
.sab-faq-question {
	width: 100% !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--sab-text-light) !important;
	padding: 14px 16px !important;
	text-align: left !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 10px !important;
}
.sab-faq-question:hover { color: var(--sab-orange) !important; }
.sab-faq-icon { transition: transform .2s ease !important; font-size: 11px !important; color: var(--sab-orange) !important; flex-shrink: 0 !important; }
.sab-faq-item.open .sab-faq-icon { transform: rotate(180deg) !important; }
.sab-faq-answer {
	max-height: 0 !important;
	overflow: hidden !important;
	transition: max-height .25s ease !important;
	padding: 0 16px !important;
	color: var(--sab-text-muted) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
}
.sab-faq-item.open .sab-faq-answer { max-height: 400px !important; padding: 0 16px 14px !important; }

.sab-restrictions-list { padding-left: 20px !important; color: var(--sab-text-muted) !important; font-size: 14px !important; line-height: 1.9 !important; }
.sab-description-1 { color: var(--sab-text-muted) !important; line-height: 1.8 !important; font-size: 15px !important; }

/* ---------- Grid / cards ---------- */
.sab-grid {
	display: grid !important;
	gap: 20px !important;
	grid-template-columns: repeat(3, 1fr) !important;
}
.sab-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.sab-grid-1 { grid-template-columns: 1fr !important; }
@media (max-width: 780px) {
	.sab-grid, .sab-grid-2, .sab-grid-1 { grid-template-columns: 1fr !important; }
}

.sab-card {
	background: var(--sab-dark) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	color: var(--sab-text-light) !important;
	box-shadow: 0 4px 18px rgba(0,0,0,.25) !important;
}
.sab-card-image {
	display: block !important;
	height: 190px !important;
	background-size: cover !important;
	background-position: center !important;
}
.sab-card-body { padding: 18px !important; text-align: center !important; }
.sab-card-title {
	display: block !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--sab-text-light) !important;
	text-decoration: none !important;
	margin-bottom: 8px !important;
}
.sab-card-price { color: #4da3ff !important; font-weight: 600 !important; margin-bottom: 14px !important; }
.sab-card-price-unit { font-size: 12px !important; color: var(--sab-text-muted) !important; font-weight: 400 !important; }
.sab-card-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	background: var(--sab-orange) !important;
	color: #fff !important;
	text-decoration: none !important;
	padding: 12px 20px !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	width: 100% !important;
}
.sab-card-btn:hover { background: var(--sab-orange-dark) !important; color: #fff !important; }

/* ---------- Checkout page ---------- */
.sab-checkout-box {
	max-width: 520px !important;
	margin: 30px auto !important;
	background: var(--sab-dark-2) !important;
	color: var(--sab-text-light) !important;
	padding: 30px !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 30px rgba(0,0,0,.3) !important;
}
.sab-checkout-header {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin-bottom: 22px !important;
	padding-bottom: 18px !important;
	border-bottom: 1px solid #2f3440 !important;
}
.sab-checkout-thumb {
	width: 60px !important;
	height: 60px !important;
	object-fit: cover !important;
	border-radius: 10px !important;
	flex-shrink: 0 !important;
}
.sab-checkout-title { font-size: 19px !important; margin: 0 0 2px !important; font-weight: 700 !important; color: var(--sab-text-light) !important; }
.sab-checkout-subtitle { font-size: 13px !important; color: var(--sab-text-muted) !important; }

.sab-checkout-summary {
	background: #262a33 !important;
	border-radius: 10px !important;
	padding: 4px 16px !important;
	margin-bottom: 26px !important;
}
.sab-summary-row {
	display: flex !important;
	justify-content: space-between !important;
	padding: 11px 0 !important;
	border-bottom: 1px solid #333844 !important;
	font-size: 14px !important;
	color: var(--sab-text-muted) !important;
}
.sab-summary-row:last-child { border-bottom: none !important; }
.sab-summary-total { color: var(--sab-text-light) !important; font-weight: 700 !important; font-size: 17px !important; }
.sab-summary-total span:last-child { color: var(--sab-orange) !important; }

.sab-checkout-form { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.sab-form-row { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-bottom: 12px !important; }
.sab-checkout-form label {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--sab-text-muted) !important;
}
.sab-checkout-form input[type="text"],
.sab-checkout-form input[type="email"] {
	background: #262a33 !important;
	border: 1px solid #3a3f4a !important;
	color: var(--sab-text-light) !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	font-size: 14px !important;
	transition: border-color .15s ease !important;
}
.sab-checkout-form input[type="text"]:focus,
.sab-checkout-form input[type="email"]:focus {
	border-color: var(--sab-orange) !important;
	outline: none !important;
}
.sab-confirm-label {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: var(--sab-text-muted) !important;
	margin: 6px 0 18px !important;
	line-height: 1.5 !important;
}
.sab-confirm-label input { margin-top: 2px !important; }
.sab-checkout-submit-btn { width: 100% !important; padding: 14px !important; font-size: 16px !important; }
.sab-checkout-error {
	background: #3a1414 !important;
	border: 1px solid #5a1f1f !important;
	color: #ff8a8a !important;
	padding: 12px 14px !important;
	border-radius: 8px !important;
	margin-bottom: 18px !important;
	font-size: 14px !important;
}
.sab-thank-you { text-align: center !important; }
.sab-thank-you h2 { color: var(--sab-orange) !important; margin-bottom: 8px !important; }

/* ---------- Comments ---------- */
.sab-comments-section { margin-top: 40px !important; background: var(--sab-orange) !important; padding: 30px !important; border-radius: 12px !important; }
.sab-comments-section .sab-section-title { color: #fff !important; text-align: center !important; }
.sab-comment-textarea { width: 100% !important; min-height: 110px !important; border-radius: 8px !important; border: 0 !important; padding: 12px !important; }
.sab-comments-section .form-submit input {
	background: var(--sab-dark) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 12px 22px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
}