/*
Theme Name: Carmala Hiperbarik Bali
Theme URI: https://balihyperbaric.com
Description: Website theme for Carmala Hiperbarik Bali, built on Hello Elementor. After activating it, click "Import the Carmala website" (Appearance > Carmala Setup) to create every page, the header, the footer, the menu and the photos in one step. All pages stay editable in Elementor.
Author: ImmerShift
Author URI: https://immershift.com
Template: hello-elementor
Version: 1.4.5
Requires at least: 6.2
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: carmala
*/

/* Brand colors follow Elementor Site Settings > Global Colors (the values after the comma are fallbacks). */
body {
	--cm-blue: var(--e-global-color-primary, #0057B8);
	--cm-navy: var(--e-global-color-secondary, #0A2A6C);
	--cm-text: var(--e-global-color-text, #4A5873);
	--cm-teal-dark: var(--e-global-color-accent, #007A70);
	--cm-teal-deep: var(--e-global-color-tealdeep, #00584F);
	--cm-ink: var(--e-global-color-ink, #0B1B3A);
	--cm-sky: var(--e-global-color-sky, #EEF4FB);
	--cm-mint: var(--e-global-color-mint, #5FD4C9);
	--cm-mint-tint: var(--e-global-color-minttint, #E5F5F3);
	--cm-line: var(--e-global-color-line, #E6EDF5);
	--cm-field-line: var(--e-global-color-fieldline, #DCE5F0);
	--cm-field-bg: var(--e-global-color-fieldbg, #F6F9FC);
	--cm-shadow: 0 20px 50px rgba(10, 42, 108, .16);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#book, #packages { scroll-margin-top: 110px; }
.cm-main { display: block; }
:is(.cm-nav, .cm-drawer, .cm-form, .cm-posts, .cm-crumbs, .cm-article, .cm-btn) svg { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ------------------------------------------------------------------ header: sticks to the top of the window */
/* The wrappers step aside so the white header bar can stick for the whole page, not only inside its template. */
.cm-site-header, .cm-site-header > .elementor { display: contents; }
.e-con.cm-header { --position: sticky; --z-index: 100; top: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.admin-bar .e-con.cm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .e-con.cm-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .e-con.cm-header { top: 0; } }
.cm-header .elementor-widget-shortcode { position: static; } /* the phone menu opens under the whole bar */
.cm-id-note { background: var(--cm-mint-tint); color: var(--cm-teal-deep); font-size: 14px; font-weight: 600; text-align: center; padding: 10px 24px; }

/* Language switch in the top bar */
.cm-lang { display: flex; gap: 2px; align-items: center; background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 3px; width: max-content; }
.cm-lang button, .cm-lang a { position: relative; display: flex; align-items: center; border: 0; border-radius: 999px; padding: 6px 10px; min-height: 28px; background: transparent; opacity: .75; cursor: pointer; }
.cm-lang button::after, .cm-lang a::after { content: ""; position: absolute; inset: -8px -1px; } /* 44px tall tap area, same look */
.cm-lang button:hover, .cm-lang button:focus, .cm-lang a:hover { background: rgba(255, 255, 255, .14); opacity: 1; }
.cm-lang .is-on, .cm-lang .is-on:hover, .cm-lang .is-on:focus { background: #fff; opacity: 1; }
.cm-lang svg { display: block; width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .22); }

/* Main menu */
.cm-nav { display: flex; justify-content: center; align-items: center; }
.cm-nav ul { list-style: none; margin: 0; padding: 0; }
.cm-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.cm-nav__item { position: relative; }
.cm-nav .cm-nav__link { display: flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: transparent; color: var(--cm-ink); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; padding: 10px 16px; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.cm-nav .cm-nav__link svg { width: 12px; height: 12px; }
.cm-nav .cm-nav__link:hover, .cm-nav .cm-nav__link:focus, .cm-nav__item.is-open > .cm-nav__link,
.cm-nav .cm-nav__link[aria-current="page"], .cm-nav__item.is-current > .cm-nav__link { background: var(--cm-sky); color: var(--cm-blue); }
.cm-nav__drop { display: none; position: absolute; top: 100%; left: 0; padding-top: 10px; z-index: 70; }
.cm-nav__item.is-open > .cm-nav__drop { display: block; }
.cm-nav__drop ul { display: flex; flex-direction: column; gap: 2px; min-width: 240px; padding: 8px; background: #fff; border: 1px solid var(--cm-line); border-radius: 20px; box-shadow: var(--cm-shadow); }
.cm-nav__drop a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; color: var(--cm-ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
.cm-nav__drop a svg, .cm-drawer__sub a svg { width: 13px; height: 13px; opacity: .5; }
.cm-nav__drop a:hover, .cm-nav__drop a:focus, .cm-nav__drop a[aria-current="page"] { background: var(--cm-sky); color: var(--cm-blue); }
.cm-nav .cm-nav__toggle { display: none; width: 48px; height: 48px; margin-left: auto; padding: 0; border: 1.5px solid var(--cm-field-line); border-radius: 50%; background: #fff; color: var(--cm-navy); cursor: pointer; }
.cm-nav .cm-nav__toggle:hover, .cm-nav .cm-nav__toggle:focus { background: var(--cm-sky); color: var(--cm-navy); }
.cm-burger, .cm-burger::before, .cm-burger::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, background .2s; }
.cm-burger { position: relative; margin: auto; }
.cm-burger::before, .cm-burger::after { content: ""; position: absolute; left: 0; }
.cm-burger::before { top: -6px; }
.cm-burger::after { top: 6px; }
.cm-nav__toggle.is-open .cm-burger { background: transparent; }
.cm-nav__toggle.is-open .cm-burger::before { transform: translateY(6px) rotate(45deg); }
.cm-nav__toggle.is-open .cm-burger::after { transform: translateY(-6px) rotate(-45deg); }
.cm-drawer { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 120px); overflow-y: auto; padding: 12px 24px 28px; background: #fff; border-top: 1px solid var(--cm-line); box-shadow: 0 24px 40px rgba(10, 42, 108, .10); }
.cm-drawer[hidden] { display: none; }
.cm-drawer__list { display: flex; flex-direction: column; gap: 2px; }
.cm-drawer__list > li { padding: 4px 0; }
.cm-drawer__link { display: flex; align-items: center; min-height: 48px; padding: 12px 16px; border-radius: 14px; color: var(--cm-ink); font-size: 18px; font-weight: 700; }
.cm-drawer__label { display: block; padding: 10px 16px 2px; color: var(--cm-text); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cm-drawer__sub a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 16px; border-radius: 14px; color: var(--cm-ink); font-size: 17px; font-weight: 600; }
.cm-drawer a:hover, .cm-drawer a[aria-current="page"] { background: var(--cm-sky); color: var(--cm-blue); }
.cm-drawer .cm-drawer__book { display: flex; align-items: center; justify-content: center; min-height: 54px; margin-top: 14px; border-radius: 999px; background: var(--cm-blue); color: #fff; font-size: 16px; font-weight: 700; }
.cm-drawer .cm-drawer__book:hover { background: var(--cm-navy); color: #fff; }
@media (max-width: 1024px) {
	.cm-nav { justify-content: flex-end; }
	.cm-nav__list { display: none; }
	.cm-nav .cm-nav__toggle { display: grid; place-items: center; }
}
@media (min-width: 1025px) { .cm-drawer { display: none !important; } }

/* Header with the logo in the middle (Appearance > Header style): half the menu on each side */
.cm-header--center .e-con { --position: static; } /* the phone menu opens under the whole bar */
.cm-nav--left, .cm-nav--left .cm-nav__list { justify-content: flex-start; }
.cm-nav--right, .cm-nav--right .cm-nav__list { justify-content: flex-end; }
.cm-nav--right .cm-nav__drop { left: auto; right: 0; }
@media (max-width: 1024px) { .cm-nav--left { display: none; } }

/* ------------------------------------------------------------------ helpers used by the Elementor widgets */
/* Elementor's widget CSS loads after this file, so these helpers use one extra class to win. */
/* Button with an arrow (or WhatsApp) icon in a white circle: add the class cm-arrow to a Button widget. */
.cm-arrow .elementor-button-content-wrapper { align-items: center; }
.cm-arrow .elementor-button-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--cm-blue); fill: var(--cm-blue); font-size: 15px; transition: color .2s; }
.cm-arrow.cm-arrow--sm .elementor-button-icon { width: 36px; height: 36px; }
.cm-arrow.cm-arrow--lg .elementor-button-icon { width: 42px; height: 42px; font-size: 17px; }
.cm-arrow.cm-arrow--navy .elementor-button-icon { color: var(--cm-navy); fill: var(--cm-navy); }
.cm-arrow .elementor-button-icon svg { width: 1em; height: 1em; fill: currentColor; }
.cm-arrow .elementor-button:hover .elementor-button-icon { color: var(--cm-navy); fill: var(--cm-navy); }
.cm-arrow.cm-arrow--navy .elementor-button:hover .elementor-button-icon { color: var(--cm-blue); fill: var(--cm-blue); }
/* FAQ: plus / minus in a circle */
.cm-faq.elementor-widget-n-accordion .e-n-accordion-item-title-icon { justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cm-sky); }
.cm-faq.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon { background: var(--cm-blue); }
/* Long e-mail addresses wrap instead of overflowing a card */
.cm-break .elementor-heading-title { overflow-wrap: anywhere; }
/* The floating WhatsApp button steps aside while the booking form is on screen */
.cm-wa-float { transition: opacity .2s, transform .2s; }
.cm-wa-float:hover { transform: scale(1.08); }
.cm-book-visible .cm-wa-float { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ buttons used by the theme */
.cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 1.5px solid transparent; border-radius: 14px; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.cm-btn svg { width: 20px; height: 20px; }
.cm-btn--pill { border-radius: 999px; min-height: 54px; font-size: 16px; }
.cm-btn.cm-btn--teal, .cm-btn.cm-btn--teal:focus { background: var(--cm-teal-dark); border-color: var(--cm-teal-dark); color: #fff; }
.cm-btn.cm-btn--teal:hover { background: var(--cm-teal-deep); border-color: var(--cm-teal-deep); color: #fff; }
.cm-btn.cm-btn--blue, .cm-btn.cm-btn--blue:focus { background: var(--cm-blue); border-color: var(--cm-blue); color: #fff; border-radius: 999px; min-height: 54px; font-size: 16px; }
.cm-btn.cm-btn--blue:hover { background: var(--cm-navy); border-color: var(--cm-navy); color: #fff; }
.cm-btn.cm-btn--blue:disabled { opacity: .45; cursor: not-allowed; background: var(--cm-blue); }
.cm-btn.cm-btn--outline, .cm-btn.cm-btn--outline:focus { background: transparent; border-color: var(--cm-navy); color: var(--cm-navy); border-radius: 999px; padding: 0 24px; min-height: 50px; }
.cm-btn.cm-btn--outline:hover { background: var(--cm-navy); color: #fff; }
.cm-btn svg { flex: none; }

/* ------------------------------------------------------------------ booking forms ([carmala_booking]) */
.cm-form { display: grid; gap: 16px; align-items: end; margin: 0; }
.cm-form--strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.cm-form--card { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: start; }
.cm-form--quick { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.cm-form--package { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px; align-items: start; }
.cm-form .cm-field--full, .cm-form__status, .cm-form__title { grid-column: 1 / -1; }
.cm-form__title { color: var(--cm-navy); font-size: 18px; font-weight: 800; line-height: 1.3; }
.cm-field { display: flex; flex-direction: column; gap: 8px; margin: 0; line-height: 1.4; }
.cm-form--quick .cm-field { gap: 6px; }
.cm-field__label { color: var(--cm-navy); font-size: 14px; font-weight: 700; }
.cm-form input[type=text], .cm-form input[type=date], .cm-form select { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--cm-field-line); border-radius: 14px; background: var(--cm-field-bg); color: var(--cm-ink); font-family: inherit; font-size: 15px; font-weight: 500; box-shadow: none; }
.cm-form select { padding: 0 12px; }
.cm-form--quick input[type=text], .cm-form--quick input[type=date], .cm-form--quick .cm-btn { height: 50px; min-height: 50px; }
.cm-form input:focus, .cm-form select:focus { border-color: var(--cm-blue); background: #fff; outline: none; }
.cm-form input.is-invalid { border-color: #B4233A; }
.cm-field__error { display: flex; align-items: center; gap: 6px; color: #B4233A; font-size: 13px; font-weight: 600; }
.cm-field__error[hidden] { display: none; }
.cm-form .cm-btn { width: 100%; white-space: normal; text-align: center; }
.cm-form__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 18px; border-radius: 14px; background: var(--cm-mint-tint); color: var(--cm-teal-deep); font-size: 15px; font-weight: 600; }
.cm-form__status[hidden] { display: none; }
.cm-form__status a { color: var(--cm-teal-deep); font-weight: 700; text-decoration: underline; }

/* Group session quiz ([carmala_group_quiz]) */
.cm-quiz { display: block; }
.cm-quiz__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.cm-quiz__count { color: var(--cm-text); font-size: 14px; font-weight: 700; }
.cm-quiz__bar { height: 8px; margin-bottom: 28px; overflow: hidden; border-radius: 999px; background: var(--cm-sky); }
.cm-quiz__bar span { display: block; width: 25%; height: 100%; border-radius: 999px; background: var(--cm-blue); transition: width .3s; }
.cm-quiz fieldset { margin: 0; padding: 0; border: 0; }
.cm-quiz fieldset[hidden] { display: none; }
.cm-quiz legend { margin-bottom: 6px; padding: 0; color: var(--cm-navy); font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; line-height: 1.25; outline: none; }
.cm-quiz fieldset > p { margin: 0 0 20px; color: var(--cm-text); font-size: 15px; }
.cm-quiz fieldset[data-step="3"] legend, .cm-quiz fieldset[data-step="4"] legend { margin-bottom: 20px; }
.cm-quiz .cm-field { margin-bottom: 18px; }
.cm-quiz .cm-field__label { display: block; margin-bottom: 8px; }
.cm-quiz .cm-field .cm-field__label { margin-bottom: 0; }
.cm-quiz input[type=text], .cm-quiz input[type=date] { height: 54px; font-size: 16px; }
.cm-choices { display: grid; gap: 10px; }
.cm-choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cm-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-choices--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.cm-quiz .cm-choice { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 76px; padding: 0 12px; border: 2px solid var(--cm-field-line); border-radius: 18px; background: #fff; color: var(--cm-navy); font-family: inherit; font-size: 26px; font-weight: 800; white-space: normal; cursor: pointer; transition: border-color .2s, background .2s; }
.cm-quiz .cm-choice svg { width: 26px; height: 26px; color: var(--cm-blue); fill: var(--cm-blue); }
.cm-quiz .cm-choices--auto .cm-choice { justify-content: flex-start; min-height: 64px; padding: 0 18px; font-size: 16px; font-weight: 700; text-align: left; }
.cm-quiz .cm-choices--3 .cm-choice { flex-direction: column; gap: 4px; font-size: 15px; font-weight: 700; }
.cm-quiz .cm-choices--3 .cm-choice svg { width: 24px; height: 24px; }
.cm-quiz .cm-choice:hover, .cm-quiz .cm-choice:focus { border-color: var(--cm-blue); background: #fff; color: var(--cm-navy); }
.cm-quiz .cm-choice[aria-pressed="true"] { border-color: var(--cm-blue); background: var(--cm-sky); }
.cm-quiz__summary { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 20px; background: var(--cm-sky); }
.cm-quiz__row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.cm-quiz__row span { color: var(--cm-text); }
.cm-quiz__row strong { color: var(--cm-navy); text-align: right; }
.cm-quiz__total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--cm-field-line); }
.cm-quiz__total span { color: var(--cm-navy); font-weight: 700; }
.cm-quiz__total strong { color: var(--cm-blue); font-size: 20px; font-weight: 800; }
.cm-quiz__note { margin: 12px 0 0; color: var(--cm-text); font-size: 13px; }
.cm-quiz__nav { display: flex; gap: 12px; margin-top: 28px; }
.cm-quiz__nav .cm-btn { width: auto; min-height: 54px; }
.cm-quiz__nav [data-quiz-next], .cm-quiz__nav [data-quiz-send] { flex: 1; border-radius: 999px; font-size: 16px; }
.cm-quiz__nav [hidden] { display: none; }
.cm-quiz .cm-form__status { margin-top: 14px; }

/* ------------------------------------------------------------------ article cards ([carmala_posts]) */
.cm-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 44px; }
.cm-filter button { padding: 11px 22px; border: 1.5px solid var(--cm-field-line); border-radius: 999px; background: #fff; color: var(--cm-navy); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; cursor: pointer; transition: border-color .2s, background .2s; }
.cm-filter button:hover, .cm-filter button:focus { border-color: var(--cm-blue); background: #fff; color: var(--cm-navy); }
.cm-filter button[aria-pressed="true"] { border-color: var(--cm-blue); background: var(--cm-blue); color: #fff; }
.cm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px; }
.cm-posts--all .cm-cards, .cm-archive .cm-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.cm-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cm-line); border-radius: 28px; background: #fff; transition: box-shadow .25s, transform .25s; }
.cm-card[hidden] { display: none; }
.cm-card:hover { box-shadow: 0 24px 50px rgba(10, 42, 108, .10); transform: translateY(-4px); }
.cm-card__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cm-sky); }
.cm-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-card__tag { position: absolute; top: 16px; left: 16px; padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--cm-blue); font-size: 13px; font-weight: 700; }
.cm-card__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 26px 26px 28px; }
.cm-card__date { display: flex; align-items: center; gap: 6px; color: var(--cm-text); font-size: 13px; }
.cm-card__title { margin: 0; color: var(--cm-navy); font-size: 21px; font-weight: 800; line-height: 1.35; }
.cm-card__title a { color: inherit; }
.cm-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 28px; }
.cm-card__excerpt { margin: 0; color: var(--cm-text); font-size: 15px; line-height: 1.7; }
.cm-card__more { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; color: var(--cm-blue); font-size: 15px; font-weight: 700; }
.cm-card__more svg { width: 14px; height: 14px; }
.cm-posts__empty { color: var(--cm-text); text-align: center; }

/* ------------------------------------------------------------------ article and archive templates */
.cm-banner-wrap { padding: 20px 20px 0; }
.cm-banner { max-width: 1400px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) clamp(24px, 5vw, 72px); border-radius: 36px; background: linear-gradient(160deg, var(--cm-sky) 0%, var(--cm-mint-tint) 100%); text-align: center; }
.cm-banner__title { max-width: 1000px; margin: 0 auto 16px; color: var(--cm-navy); font-size: clamp(38px, 5vw, 64px); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.cm-crumbs { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; }
.cm-crumbs a { color: var(--cm-text); }
.cm-crumbs a:hover { color: var(--cm-blue); }
.cm-crumbs [aria-current] { color: var(--cm-blue); }
.cm-crumbs__sep { display: inline-flex; color: var(--cm-text); }
.cm-crumbs__sep svg { width: 10px; height: 10px; }
.cm-article { max-width: 820px; margin: 0 auto; padding: clamp(56px, 6vw, 88px) 24px 0; }
.cm-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 28px; }
.cm-chip { padding: 6px 14px; border-radius: 999px; background: var(--cm-sky); color: var(--cm-blue); font-size: 13px; font-weight: 700; }
.cm-article__date { display: flex; align-items: center; gap: 6px; color: var(--cm-text); font-size: 14px; }
.cm-article__img { aspect-ratio: 16 / 9; margin-bottom: 40px; overflow: hidden; border-radius: 28px; background: var(--cm-sky); }
.cm-article__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-article__body { color: var(--cm-text); font-size: 17px; line-height: 1.8; }
.cm-article__body > p:first-child { color: var(--cm-ink); font-size: 20px; font-weight: 500; line-height: 1.7; }
.cm-article__body p { margin: 0 0 20px; }
.cm-article__body h2 { margin: 40px 0 16px; color: var(--cm-navy); font-size: clamp(26px, 2.6vw, 32px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.cm-article__body h3 { margin: 32px 0 12px; color: var(--cm-navy); font-size: 22px; font-weight: 800; }
.cm-article__body a { text-decoration: underline; }
.cm-article__body img { border-radius: 20px; }
.cm-note { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0 32px; padding: 22px 24px; border-radius: 22px; background: #FFF8EA; color: #6B4E00; }
.cm-note svg { width: 26px; height: 26px; color: #B07A00; fill: #B07A00; }
.cm-note p { margin: 0; font-size: 15px; line-height: 1.7; }
.cm-archive { max-width: 1280px; margin: 0 auto; padding: clamp(56px, 6vw, 88px) 24px 0; }
.cm-archive .nav-links { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.cm-archive .page-numbers { padding: 8px 14px; border-radius: 999px; color: var(--cm-navy); font-weight: 700; }
.cm-archive .page-numbers.current { background: var(--cm-blue); color: #fff; }
/* Top bar: the EN / ID switch stays on the right when the bar wraps on phones */
.e-con .cm-push { margin-inline-start: auto; }

/* ------------------------------------------------------------------ accessibility (WCAG 2.2 AA) */
/* One visible keyboard focus ring everywhere: a blue ring with a white halo, so it shows on white and on navy. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #0057B8 !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #fff !important;
}
/* Form fields: the border is the only thing that marks the field, so it needs 3:1 against the card (was 1.3:1). */
/* !important: Elementor's Site Settings form style outranks a plain class rule */
.cm-form input[type=text], .cm-form input[type=date], .cm-form select { border-color: #7A8FB3 !important; }
.cm-form input:focus, .cm-form select:focus { border-color: var(--cm-blue) !important; }
.cm-form input::placeholder { color: #5B6B85; opacity: 1; }
.cm-form input.is-invalid { border-color: #B4233A !important; border-width: 2px; }
.cm-form__note { grid-column: 1 / -1; margin: 0; color: var(--cm-ink); font-size: 14px; line-height: 1.5; text-align: center; }
/* Spam trap: a field people never see; scripts fill it in. */
.cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Phones: finger-sized links in the top bar, breadcrumb, footer and the booking call link. */
@media (max-width: 767px) {
	.cm-site-header .elementor-icon-list-item > a, .cm-site-footer .elementor-icon-list-item > a, .cm-crumbs a,
	.cm-banner a, .cm-site-footer a, nav.elementor-element a, .elementor-icon-box-title a { display: inline-flex; align-items: center; min-height: 44px; }
	/* The "Ask Mala" chat bubble sits on top of the booking form's fields; it steps aside while the form is on screen. */
	.cm-book-visible .carmala-trigger:not(.open) { visibility: hidden !important; }
}

/* The floating WhatsApp button and the "Ask Mala" chat bubble used to sit on the same spot, leaving a 4px sliver of WhatsApp to tap.
   When the chat bubble is on the page, WhatsApp stacks just above it. */
body:has(.carmala-trigger) .cm-wa-float { bottom: 102px !important; right: 26px !important; }
@media (max-width: 767px) { body:has(.carmala-trigger) .cm-wa-float { bottom: 88px !important; right: 13px !important; } }
/* Phones: smaller WhatsApp float and no "Ask Mala" tag, so the two round buttons cover less of the page */
@media (max-width: 767px) { .cm-wa-float .elementor-icon { padding: 11px !important; font-size: 26px !important; } .carmala-trigger-label { display: none !important; } }
/* The header Book Now button stays on one line, in English and in Indonesian. */
.cm-site-header .elementor-button-text, .cm-drawer__book { white-space: nowrap; }

/* ------------------------------------------------------------------ colourful look (October 2026) */
/* Header: Appearance > Header style > Colourful. Stacked logo in the middle, half the menu on each side. */
.cm-header--colourful .e-con { --position: static; } /* the phone menu opens under the whole bar */
.cm-header--colourful .cm-nav .cm-nav__link:hover, .cm-header--colourful .cm-nav .cm-nav__link:focus,
.cm-header--colourful .cm-nav .cm-nav__link[aria-current="page"], .cm-header--colourful .cm-nav__item.is-current > .cm-nav__link { background: #fff; color: #0B3FA8; box-shadow: 0 6px 16px rgba(11, 63, 168, .08); }
.cm-header--colourful > .e-con-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 32px; }
.cm-header--colourful .cmc-hleft { grid-column: 1; }
.cm-header--colourful .cmc-hleft .cm-nav, .cm-header--colourful .cmc-hleft .cm-nav__list { justify-content: flex-end; }
.cm-header--colourful .cmc-hlogo { grid-column: 2; justify-self: center; }
.cm-header--colourful .cmc-hnav { grid-column: 3; }
@media (max-width: 1024px) {
	.cm-header--colourful > .e-con-inner { grid-template-columns: 48px minmax(0, 1fr) 48px; column-gap: 0; }
}

/* Homepage pieces: add these classes in Elementor (Advanced > CSS Classes). */
.cmc-page { background: linear-gradient(180deg, #E6F1FC 0%, #F7FBFF 38%, #EAF6F6 100%); }
.cmc-gbtn .elementor-button { background: linear-gradient(90deg, #0B3FA8, #0B7F8A) !important; box-shadow: 0 14px 30px rgba(11, 63, 168, .3); }
.cmc-gbtn .elementor-button:hover { filter: brightness(1.1); }
.cmc-pill { background: linear-gradient(90deg, #0B3FA8, #0B7F8A); }
/* Gradient words: write them in <em> inside a heading with the class cmc-h */
.cmc-h em { font-style: italic; font-weight: 700; background: linear-gradient(90deg, #0B3FA8, #0B8F84); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.cmc-h1 em { display: block; font-size: .6em; line-height: 1.15; margin-top: 6px; }
.cmc-band-h em { font-style: italic; color: #7CF0DB; }
.cmc-mintgrad .elementor-heading-title { background: linear-gradient(180deg, #8FF3E2, #2BD3B5); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* Hero: clips the photo backdrop on narrow screens */
.cmc-glow { position: relative; overflow: hidden; }
/* Hero photo: round, with two blue/teal circle lines and white cards over its edge */
.cmc-photowrap { position: relative; }
/* Elementor also styles a container's ::before and ::after, so size and layer are set in full here */
.cmc-photowrap::before, .cmc-photowrap::after { content: ""; position: absolute; width: auto; height: auto; z-index: 0; opacity: 1; background: none; border-radius: 50%; border-style: solid; border-color: transparent; pointer-events: none; }
.cmc-photowrap::before { inset: -24px; border-width: 3px; border-top-color: #10B5A4; border-right-color: #0B3FA8; transform: rotate(-24deg); }
.cmc-photowrap::after { inset: -11px; border-width: 8px; border-left-color: #0B3FA8; border-bottom-color: #10B5A4; transform: rotate(12deg); }
.cmc-photo { position: relative; z-index: 1; }
.cmc-photo img { width: 100%; aspect-ratio: 1; height: auto !important; object-fit: cover; border-radius: 50% !important; padding: 10px; background: linear-gradient(135deg, #fff, #CFE6FA); }
.cmc-chip .elementor-icon-box-description { margin: 0; }
@media (max-width: 767px) { .cmc-photowrap::before { inset: -16px; } .cmc-photowrap::after { inset: -8px; border-width: 6px; } }
.cmc-seat { border: 4px solid #fff; box-shadow: 0 16px 36px rgba(11, 127, 138, .4); }
/* Pressure scale: a gradient line with a dot at each level */
.cmc-scale { position: relative; padding-left: 34px !important; }
.cmc-scale::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 10px; border-radius: 99px; background: linear-gradient(#9FE7DD, #0B3FA8); }
.cmc-lvl { position: relative; }
.cmc-lvl::before { content: ""; position: absolute; left: -34px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid #0B8F84; box-sizing: border-box; }
/* Group session ticket and booking band */
.cmc-ticket, .cmc-band { position: relative; overflow: hidden; }
.cmc-ticket::before { content: ""; position: absolute; inset: 12px; border: 2px dashed rgba(255, 255, 255, .35); border-radius: 26px; pointer-events: none; }
/* Elementor also sizes a container's ::before (its background overlay), so every side is set here */
.cmc-band.e-con::before, .cmc-band.e-con::after { content: ""; position: absolute; left: auto; bottom: auto; z-index: 0; opacity: 1; background: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .16); pointer-events: none; }
.cmc-band.e-con::before { right: -120px; top: -120px; width: 380px; height: 380px; }
.cmc-band.e-con::after { right: -60px; top: -60px; width: 260px; height: 260px; }
.cmc-ticket > .e-con-inner, .cmc-band > .e-con-inner { position: relative; z-index: 1; }
/* FAQ questions are H3s: follow the accordion's own colours, not the site H3 colour */
.cmc-page .e-n-accordion-item-title-text { color: inherit; }
/* Numbered rows in the price lists */
.cmc-n { flex: none; }

/* ------------------------------------------------------------------ colourful inner pages (only while the colourful header is on) */
/* Classes added in Elementor: cmc-ibanner (page banner box), cmc-crumb (breadcrumb), cmc-kick (small label), cmc-gbtn (main button). */
body:has(.cm-header--colourful) { background: #EAF6F6; } /* the gap above the footer matches the page's last colour */
body:has(.cm-header--colourful) .cm-main { background: linear-gradient(180deg, #E6F1FC 0%, #F7FBFF 30%, #F3FAFA 70%, #EAF6F6 100%); }
body:has(.cm-header--colourful) .cmc-ibanner { background: linear-gradient(120deg, #0B3FA8 0%, #0B5FA0 55%, #0B8F84 100%) !important; position: relative; overflow: hidden; box-shadow: 0 24px 60px rgba(11, 63, 168, .18); }
body:has(.cm-header--colourful) .cmc-ibanner .elementor-heading-title { color: #fff !important; }
body:has(.cm-header--colourful) .cmc-ibanner > .e-con-inner, body:has(.cm-header--colourful) .cmc-ibanner > .elementor-element { position: relative; z-index: 1; }
/* Circle lines, like the homepage photo (Elementor sizes a container's ::before, so every side is set) */
body:has(.cm-header--colourful) .cmc-ibanner.e-con::before, body:has(.cm-header--colourful) .cmc-ibanner.e-con::after { content: ""; position: absolute; left: auto; bottom: auto; z-index: 0; opacity: 1; background: none; border-radius: 50%; border-style: solid; border-color: transparent; pointer-events: none; }
body:has(.cm-header--colourful) .cmc-ibanner.e-con::before { right: -90px; top: -150px; width: 420px; height: 420px; border-width: 3px; border-top-color: #9FF3E3; border-left-color: rgba(255, 255, 255, .45); transform: rotate(-20deg); }
body:has(.cm-header--colourful) .cmc-ibanner.e-con::after { right: -40px; top: -100px; width: 320px; height: 320px; border-width: 8px; border-bottom-color: rgba(159, 243, 227, .55); border-left-color: rgba(255, 255, 255, .25); transform: rotate(10deg); }
body:has(.cm-header--colourful) .cmc-crumb { background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .25) !important; box-shadow: none !important; }
body:has(.cm-header--colourful) .cmc-crumb .elementor-heading-title, body:has(.cm-header--colourful) .cmc-crumb a, body:has(.cm-header--colourful) .cmc-crumb i, body:has(.cm-header--colourful) .cmc-crumb svg { color: #fff !important; fill: #fff !important; }
body:has(.cm-header--colourful) .cmc-crumb > :last-child .elementor-heading-title, body:has(.cm-header--colourful) .cmc-crumb > .e-con-inner > :last-child .elementor-heading-title { color: #9FF3E3 !important; }
@media (max-width: 767px) {
	body:has(.cm-header--colourful) .cmc-ibanner.e-con::before, body:has(.cm-header--colourful) .cmc-ibanner.e-con::after { display: none; } /* phones: no room for the lines beside the title */
}
/* Small labels: the homepage gradient pill */
body:has(.cm-header--colourful) .cmc-kick, body:has(.cm-header--colourful) .cmc-kick > .elementor-widget-container { background: linear-gradient(90deg, #0B3FA8, #0B7F8A) !important; }
body:has(.cm-header--colourful) .cmc-kick > .elementor-widget-container { border-radius: 999px; }
body:has(.cm-header--colourful) .cmc-kick .elementor-icon-list-text { color: #fff !important; }
body:has(.cm-header--colourful) .cmc-kick .elementor-icon-list-icon i, body:has(.cm-header--colourful) .cmc-kick .elementor-icon-list-icon svg { color: #9FF3E3 !important; fill: #9FF3E3 !important; }