/* * WOW Cha-Am components. * Design tokens can be overridden by the theme or Elementor Site Settings * (e.g. set --wow-primary in Elementor > Site Settings > Custom CSS). */ :root { --wow-navy: #0f2e5c; --wow-navy-2: #12396f; --wow-primary: #0a6cdb; --wow-primary-dark: #0857b2; --wow-sky: #80c8f2; --wow-sky-soft: #eaf4fd; --wow-yellow: #ffd23f; --wow-gold: #ffd700; --wow-cream: #fff8ec; --wow-text: #1d2b3f; --wow-muted: #5b6b82; --wow-line: #e3eaf3; --wow-bg: #ffffff; --wow-bg-soft: #f5f9fe; --wow-danger: #dc2626; --wow-success: #15803d; --wow-radius: 14px; --wow-radius-sm: 10px; --wow-radius-lg: 20px; --wow-shadow: 0 6px 22px rgba(15, 46, 92, .08); --wow-shadow-lg: 0 14px 40px rgba(15, 46, 92, .14); --wow-font-head: "Prompt", "Noto Sans Thai", "Roboto", system-ui, sans-serif; --wow-font: "Roboto", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif; --wow-container: 1240px; --wow-gutter: clamp(16px, 3vw, 32px); --wow-header-h: 76px; /* Type scale (one place to keep heading sizes consistent). */ --wow-fs-display: clamp(2.2rem, 5.4vw, 4.1rem); /* Hero */ --wow-fs-h1: clamp(1.9rem, 4vw, 2.8rem); /* Page / place / article title */ --wow-fs-h2: clamp(1.5rem, 2.6vw, 2.1rem); /* Section title */ --wow-fs-h3: clamp(1.25rem, 2vw, 1.5rem); /* Sub-section, content H2 */ --wow-fs-h4: 1.2rem; --wow-fs-h5: 1.06rem; /* Card title */ --wow-fs-h6: 1rem; --wow-fs-body: 1rem; --wow-fs-small: .875rem; } /* * With Elementor, Site Settings → Global Colors / Global Fonts drive the tokens * (Elementor defines its variables on the body, so the mapping lives here). */ body[class*="elementor-kit-"] { --wow-primary: var(--e-global-color-primary, #0a6cdb); --wow-navy: var(--e-global-color-secondary, #0f2e5c); --wow-text: var(--e-global-color-text, #1d2b3f); --wow-yellow: var(--e-global-color-accent, #ffd23f); --wow-sky: var(--e-global-color-wowsky, #80c8f2); --wow-sky-soft: var(--e-global-color-wowskysoft, #eaf4fd); --wow-gold: var(--e-global-color-wowgold, #ffd700); --wow-cream: var(--e-global-color-wowcream, #fff8ec); --wow-muted: var(--e-global-color-wowmuted, #5b6b82); --wow-line: var(--e-global-color-wowline, #e3eaf3); --wow-bg-soft: var(--e-global-color-wowbgsoft, #f5f9fe); --wow-primary-dark: color-mix(in srgb, var(--wow-primary) 82%, #000); --wow-navy-2: color-mix(in srgb, var(--wow-navy) 90%, #fff); --wow-font-head: var(--e-global-typography-primary-font-family, "Prompt"), "Prompt", "Noto Sans Thai", "Roboto", system-ui, sans-serif; --wow-font: "Roboto", var(--e-global-typography-text-font-family, "Noto Sans Thai"), "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif; } /* Base helpers ----------------------------------------------------------- */ .wow-container { width: 100%; max-width: var(--wow-container); margin-inline: auto; padding-inline: var(--wow-gutter); box-sizing: border-box; } .wow-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .wow-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } [hidden] { display: none !important; } .wow-section { padding-block: clamp(40px, 6vw, 72px); } .wow-section--cream { background: var(--wow-cream); } .wow-section--soft { background: var(--wow-bg-soft); } .wow-block { margin-block: 0 clamp(32px, 4vw, 48px); } /* Typography ------------------------------------------------------------- */ .wow-eyebrow { margin: 0 0 4px; color: var(--wow-primary); font: 500 .95rem/1.3 var(--wow-font); letter-spacing: .04em; } .wow-title { margin: 0; color: var(--wow-navy); font: 700 var(--wow-fs-h2)/1.25 var(--wow-font-head); } .wow-sparkle::after { content: "\2060"; display: inline; padding-left: 1.15em; /* word joiner: the sparkle never wraps onto a line of its own */ background: no-repeat .25em -.05em/.9em .9em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC72C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 13l-2 7M11 11l3-9M15 15l7-4'/%3E%3C/svg%3E"); } .wow-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin-bottom: clamp(18px, 2.5vw, 28px); } .wow-section-head__text { flex: 1 1 auto; min-width: 0; } .wow-section-head__sub { margin: 6px 0 0; color: var(--wow-muted); } .wow-section-head__extra { flex: 0 1 auto; } .wow-link-more { display: inline-flex; align-items: center; gap: 6px; color: var(--wow-primary); font-weight: 500; text-decoration: none; white-space: nowrap; } .wow-link-more:hover { text-decoration: underline; } .wow-link-back { display: inline-flex; align-items: center; gap: 6px; color: var(--wow-muted); text-decoration: none; } /* Buttons ---------------------------------------------------------------- */ .wow-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border: 1.5px solid transparent; border-radius: 999px; font: 500 1rem/1.2 var(--wow-font); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .2s; white-space: nowrap; box-sizing: border-box; } .wow-btn--primary { background: var(--wow-primary); color: #fff; } .wow-btn--primary:hover { background: var(--wow-primary-dark); color: #fff; } .wow-btn--navy { background: var(--wow-navy); color: #fff; } .wow-btn--navy:hover { background: var(--wow-navy-2); color: #fff; } .wow-btn--outline { background: #fff; color: var(--wow-primary); border-color: rgba(10, 108, 219, .45); } .wow-btn--outline:hover { border-color: var(--wow-primary); background: var(--wow-sky-soft); color: var(--wow-primary); } .wow-btn--ghost { background: transparent; color: var(--wow-text); border-color: var(--wow-line); } .wow-btn--ghost:hover { background: var(--wow-bg-soft); } .wow-btn--danger { background: var(--wow-danger); color: #fff; } .wow-btn--danger-text { color: var(--wow-danger); } .wow-btn--sm { min-height: 36px; padding: 6px 16px; font-size: .9rem; } .wow-btn--block { width: 100%; } .wow-btn.is-saved { background: #fff; color: #e11d48; border-color: #fecdd3; } .wow-btn.is-saved .wow-icon { fill: currentColor; } .wow-btn:disabled, .wow-btn.is-loading { opacity: .65; cursor: progress; } .wow-btn:focus-visible, .wow-fav:focus-visible, .wow-chip:focus-visible, .wow-filter:focus-visible, .wow-tab:focus-visible { outline: 3px solid var(--wow-yellow); outline-offset: 2px; } /* Keyboard focus for every WOW component, also without the WOW theme (yellow ring + navy inner ring). */ :where([class*="wow-"]:not(input, textarea, select), [class*="wow-"] :is(a, button, summary, [tabindex])):focus-visible { outline: 3px solid var(--wow-yellow); outline-offset: 2px; } /* Badges & pills --------------------------------------------------------- */ .wow-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font: 500 .78rem/1.4 var(--wow-font); color: var(--badge, var(--wow-primary)); background: var(--badge-bg, var(--wow-sky-soft)); } .wow-badge--soft { color: #7c3aed; background: #f3e8ff; } .wow-badge--yellow { color: #1d2b3f; background: var(--wow-yellow); } .wow-badge--blue { color: #fff; background: var(--wow-primary); } .wow-badge--green { color: #fff; background: #15803d; } .wow-badge--cat { color: #1d2b3f; background: var(--wow-yellow); } .wow-badge--cat-food { background: #fde68a; } .wow-badge--cat-community { background: #e0f2fe; color: #075985; } .wow-badge--cat-otop { background: #ede9fe; color: #5b21b6; } .wow-badge--cat-news { background: #dbeafe; color: #1e40af; } .wow-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; } .wow-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--wow-sky-soft); color: var(--wow-primary); font-size: .8rem; text-decoration: none; } a.wow-pill:hover { background: #dbeafe; } /* Meta lines ------------------------------------------------------------- */ .wow-meta { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--wow-muted); font-size: .9rem; } .wow-meta .wow-icon { color: var(--wow-primary); } .wow-rating { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 0; color: var(--wow-text); font-size: .92rem; text-decoration: none; } .wow-rating__star { color: #f5a524; fill: #f5a524; } .wow-rating__count { color: var(--wow-muted); } .wow-rating__google { margin-left: 2px; padding: 1px 7px; border: 1px solid var(--wow-line); border-radius: 999px; color: var(--wow-muted); font-size: .72rem; font-weight: 500; line-height: 1.5; text-decoration: none; white-space: nowrap; } a.wow-rating__google:hover, a.wow-rating__google:focus-visible { border-color: currentColor; color: var(--wow-primary); } /* Grid ------------------------------------------------------------------- */ .wow-grid { display: grid; gap: clamp(14px, 2vw, 22px); } .wow-grid--1 { grid-template-columns: 1fr; } .wow-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wow-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wow-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1024px) { .wow-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wow-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .wow-grid--2, .wow-grid--3 { grid-template-columns: 1fr; } .wow-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } /* Placeholder image ------------------------------------------------------ */ .wow-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 120px; background: linear-gradient(160deg, #cfe9fb 0%, #9fd3f3 45%, #f6e7c6 100%); color: rgba(255, 255, 255, .95); } .wow-placeholder .wow-icon { width: 38%; max-width: 64px; height: auto; aspect-ratio: 1; stroke-width: 1.5; } /* Cards ------------------------------------------------------------------ */ .wow-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--wow-line); border-radius: var(--wow-radius); overflow: hidden; box-shadow: 0 2px 10px rgba(15, 46, 92, .04); transition: box-shadow .25s, transform .25s; min-width: 0; } .wow-card:hover { box-shadow: var(--wow-shadow-lg); transform: translateY(-2px); } .wow-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--wow-sky-soft); } .wow-card__media > a { display: block; height: 100%; } .wow-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .wow-card:hover .wow-card__media img { transform: scale(1.04); } .wow-card__badge { position: absolute; left: 12px; bottom: 12px; z-index: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); } .wow-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; min-width: 0; } .wow-card__title { margin: 0; color: var(--wow-navy); font: 600 var(--wow-fs-h5)/1.35 var(--wow-font-head); } .wow-card__title a { color: inherit; text-decoration: none; } .wow-card__title a:hover { color: var(--wow-primary); } .wow-card__excerpt { margin: 8px 0 0; color: var(--wow-muted); font-size: .92rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wow-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .wow-card__meta { margin: 10px 0 14px; padding: 0; list-style: none; color: var(--wow-muted); font-size: .9rem; } .wow-card__meta li { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; } .wow-card__meta .wow-icon { color: var(--wow-primary); margin-top: 2px; } .wow-card__meta-line { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 0; color: var(--wow-muted); font-size: .85rem; } .wow-card__meta-line span { display: inline-flex; align-items: center; gap: 5px; } .wow-card .wow-btn--sm { align-self: flex-start; margin-top: auto; } .wow-fav { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; cursor: pointer; backdrop-filter: blur(3px); transition: transform .2s, background .2s; } .wow-fav .wow-icon { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); } .wow-fav:hover { transform: scale(1.1); background: rgba(255, 255, 255, .35); } .wow-fav.is-saved { background: #fff; color: #e11d48; } .wow-fav.is-saved .wow-icon { fill: currentColor; filter: none; } /* Mini place card (sidebar) */ .wow-card--mini { flex-direction: row; align-items: center; gap: 12px; padding: 8px; border: 0; box-shadow: none; border-radius: var(--wow-radius-sm); } .wow-card--mini:hover { transform: none; box-shadow: none; background: var(--wow-bg-soft); } .wow-card--mini .wow-card__media { flex: 0 0 96px; aspect-ratio: 4 / 3; border-radius: var(--wow-radius-sm); } .wow-card--mini .wow-fav { width: 28px; height: 28px; top: 4px; right: 4px; } .wow-card--mini .wow-fav .wow-icon { width: 16px; height: 16px; } .wow-card--mini .wow-card__body { padding: 0; } .wow-card--mini .wow-card__title { font-size: .95rem; } .wow-card--mini .wow-card__badges { margin-top: 6px; } /* Event cards */ .wow-card--event .wow-card__body { gap: 4px; } .wow-card--event .wow-badge { align-self: flex-start; margin-bottom: 6px; } .wow-card--feature { display: grid; grid-template-columns: 1fr; color: #fff; border: 0; min-height: 320px; } .wow-card--feature .wow-card__media { position: absolute; inset: 0; aspect-ratio: auto; } .wow-card--feature .wow-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 44, 92, .82) 0%, rgba(10, 44, 92, .5) 45%, rgba(10, 44, 92, 0) 75%); pointer-events: none; } .wow-card--feature .wow-card__body { position: relative; z-index: 1; justify-content: center; max-width: 60%; padding: clamp(20px, 3vw, 32px); } .wow-card--feature .wow-card__title { color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.9rem); } .wow-card--feature .wow-card__title a:hover { color: var(--wow-yellow); } .wow-card--feature .wow-card__meta, .wow-card--feature .wow-card__meta .wow-icon { color: #fff; } .wow-card--feature .wow-btn--outline { border-color: #fff; } /* Story cards */ .wow-card--story-overlay { border: 0; } .wow-stories__grid .wow-card--story-overlay .wow-card__cover { height: 100%; min-height: 260px; aspect-ratio: auto; } .wow-card__cover { position: relative; display: block; aspect-ratio: 4 / 3; color: #fff; text-decoration: none; overflow: hidden; } .wow-card__cover img, .wow-card__cover .wow-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .wow-card--story-overlay:hover img { transform: scale(1.05); } .wow-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(5, 25, 55, .82) 100%); } .wow-card__over { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; } .wow-card__cover .wow-card__flag { position: absolute; top: 14px; left: 14px; z-index: 1; } .wow-card__over .wow-card__title { color: #fff; font-size: 1.12rem; } .wow-card__over .wow-card__excerpt { margin: 0; color: rgba(255, 255, 255, .88); font-size: .85rem; -webkit-line-clamp: 1; } .wow-card--story-row, .wow-card--story-mini { flex-direction: row; align-items: center; gap: 12px; padding: 8px; } .wow-card--story-row:hover, .wow-card--story-mini:hover { transform: none; } .wow-card__thumb { flex: 0 0 82px; aspect-ratio: 1; overflow: hidden; border-radius: var(--wow-radius-sm); background: var(--wow-sky-soft); } .wow-card--story-mini .wow-card__thumb { flex-basis: 120px; aspect-ratio: 4 / 3; } .wow-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .wow-card--story-row .wow-card__body, .wow-card--story-mini .wow-card__body { padding: 0; } .wow-card--story-row .wow-card__title, .wow-card--story-mini .wow-card__title { font-size: .95rem; } .wow-card--story-row .wow-card__excerpt { margin-top: 2px; font-size: .82rem; -webkit-line-clamp: 1; } .wow-card--story-mini .wow-badge { align-self: flex-start; margin-top: 6px; } .wow-card__chev { color: var(--wow-muted); margin-right: 6px; } .wow-card--story-featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; border: 0; box-shadow: none; background: transparent; overflow: visible; } .wow-card--story-featured:hover { transform: none; box-shadow: none; } .wow-card--story-featured .wow-card__media { border-radius: var(--wow-radius-lg); aspect-ratio: 16 / 10; } .wow-card--story-featured .wow-card__flag { position: absolute; top: 16px; left: 16px; z-index: 2; } .wow-card--story-featured .wow-card__body { padding: 0; } .wow-card--story-featured .wow-card__title { font-size: clamp(1.4rem, 2.6vw, 2rem); } .wow-card--story-featured .wow-card__excerpt { -webkit-line-clamp: 4; font-size: 1rem; margin-block: 14px 22px; } .wow-card--story-featured .wow-btn { align-self: flex-start; } @media (max-width: 800px) { .wow-card--story-featured { grid-template-columns: 1fr; } .wow-card--feature .wow-card__body { max-width: 100%; } } /* Hero ------------------------------------------------------------------- */ .wow-hero { position: relative; isolation: isolate; color: var(--wow-navy); overflow: hidden; } .wow-hero__bg { position: absolute; inset: 0; z-index: -1; background: var(--hero-img, linear-gradient(180deg, #bfe3fa 0%, #e8f5fd 55%, #f7ecd6 100%)) center/cover no-repeat; } .wow-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .6) 38%, rgba(255, 255, 255, 0) 70%); } .wow-hero__inner { display: flex; flex-direction: column; gap: 22px; padding-block: clamp(48px, 8vw, 96px) clamp(36px, 5vw, 56px); } .wow-hero__title { margin: 0; color: var(--wow-navy); font: 700 var(--wow-fs-display)/1.12 var(--wow-font-head); } .wow-hero__sub { max-width: 34em; margin: 12px 0 0; color: var(--wow-navy); font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 500; } /* Alignment (Elementor "จัดข้อความ" sets these variables on .wow-hero__inner). */ .wow-hero__text { box-sizing: border-box; width: 100%; margin-left: var(--wow-hero-ml, 0); margin-right: var(--wow-hero-mr, auto); text-align: var(--wow-hero-ta, left); } .wow-hero__text .wow-hero__sub { margin-left: var(--wow-hero-ml, 0); margin-right: var(--wow-hero-mr, auto); } .wow-hero__text .wow-breadcrumb ol { justify-content: var(--wow-hero-jc, flex-start); } .wow-hero .wow-search { align-self: var(--wow-hero-tools-jc, center); } .wow-hero .wow-chips { justify-content: var(--wow-hero-tools-jc, center); } .wow-hero--home .wow-search { margin-top: 8px; } .wow-hero--page .wow-hero__inner { padding-block: clamp(44px, 5vw, 60px) clamp(28px, 4vw, 44px); } .wow-hero--page .wow-hero__title { font-size: clamp(2rem, 4.4vw, 3.2rem); } .wow-hero--compact .wow-hero__inner { padding-block: 48px 32px; } .wow-hero--compact .wow-hero__title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); } .wow-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; font-size: .9rem; color: var(--wow-muted); } .wow-breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--wow-muted); } .wow-breadcrumb a { color: var(--wow-text); text-decoration: none; } .wow-breadcrumb a:hover { color: var(--wow-primary); } .wow-breadcrumb [aria-current] { color: var(--wow-primary); } .wow-search { display: flex; align-items: center; gap: 8px; width: min(100%, 760px); padding: 6px 6px 6px 18px; background: #fff; border-radius: 999px; box-shadow: var(--wow-shadow-lg); box-sizing: border-box; } .wow-search__icon { color: var(--wow-muted); width: 20px; height: 20px; } .wow-search input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; font: 1rem var(--wow-font); color: var(--wow-text); outline: none; } .wow-search input::placeholder { color: var(--wow-muted); opacity: 1; } .wow-search:focus-within { outline: 3px solid var(--wow-yellow); outline-offset: 2px; } /* The input has no outline of its own. */ .wow-search .wow-btn { min-width: 110px; } .wow-chips { display: flex; flex-wrap: wrap; gap: var(--wow-chips-gap, 12px); margin: 0; padding: 0; list-style: none; } /* v1.7: columns mode (phones by default, or "คอลัมน์ปุ่มหมวด" in Elementor): every chip fills its cell * (--wow-chips-basis) and the last chip fills what is left of its row (--wow-chips-last, on by default). */ .wow-chips > li { display: flex; flex: 0 0 var(--wow-chips-basis, auto); min-width: 0; max-width: 100%; box-sizing: border-box; } .wow-chips > li:last-child { flex-grow: calc(var(--wow-chips-cm, 0) * var(--wow-chips-last, 1)); } .wow-chips > li > .wow-chip { flex: 1 1 auto; min-width: 0; box-sizing: border-box; } .wow-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 22px; background: #fff; border-radius: 14px; box-shadow: var(--wow-shadow); color: var(--wow-navy); font-weight: 500; text-decoration: none; transition: transform .2s, box-shadow .2s; } .wow-chip .wow-icon { width: 26px; height: 26px; color: var(--chip, var(--wow-primary)); } .wow-chip:hover { transform: translateY(-2px); box-shadow: var(--wow-shadow-lg); } @media (max-width: 600px) { .wow-chips { --wow-chips-basis: calc((100% - var(--wow-chips-gap, 12px)) / 2); --wow-chips-cm: 1; width: 100%; } .wow-chip { justify-content: center; padding: 8px 12px; } .wow-search .wow-btn { min-width: 0; padding-inline: 16px; } } /* Category tiles --------------------------------------------------------- */ .wow-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } .wow-tile a { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--wow-radius); color: #fff; text-decoration: none; background: var(--wow-sky-soft); } .wow-tile img, .wow-tile .wow-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .wow-tile a:hover img { transform: scale(1.06); } .wow-tile__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(5, 25, 55, .78) 100%); } .wow-tile__text { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 2px; padding: 14px; } .wow-tile__text .wow-icon { width: 28px; height: 28px; margin-bottom: 6px; } .wow-tile__text strong { font: 600 1.1rem/1.3 var(--wow-font-head); } .wow-tile__text small { font-size: .78rem; opacity: .9; line-height: 1.35; } @media (max-width: 1024px) { .wow-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .wow-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wow-tile a { aspect-ratio: 4 / 3; } } /* Events ----------------------------------------------------------------- */ .wow-events__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(14px, 2vw, 22px); } @media (max-width: 1024px) { .wow-events__grid { grid-template-columns: 1fr 1fr; } .wow-events__grid > .wow-card--feature { grid-column: 1 / -1; } } @media (max-width: 600px) { .wow-events__grid { grid-template-columns: 1fr; } } /* Tabs ------------------------------------------------------------------- */ .wow-tabs { display: inline-flex; flex-wrap: wrap; gap: 8px; } .wow-tab { min-width: 92px; padding: 9px 20px; border: 0; border-radius: 999px; background: var(--wow-bg-soft); color: var(--wow-navy); font: 500 .95rem var(--wow-font); cursor: pointer; } .wow-tab.is-active { background: var(--wow-navy); color: #fff; } .wow-recommended .wow-section-head { align-items: center; } .wow-recommended .wow-section-head__extra { margin-inline: auto; } /* Trip CTA --------------------------------------------------------------- */ .wow-trip-cta { position: relative; overflow: hidden; background: linear-gradient(100deg, #e9f6fe 0%, #f1f9ff 50%, #fff3dc 100%); } .wow-trip-cta--wide .wow-trip-cta__inner { position: relative; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.25fr) var(--wow-cta-img-w, minmax(0, .6fr)); gap: 24px; align-items: center; min-height: 260px; padding-block: 40px; } .wow-trip-cta__title { margin: 0 0 10px; color: var(--wow-navy); font: 700 var(--wow-fs-h2)/1.25 var(--wow-font-head); } .wow-trip-cta__text p { margin: 0 0 18px; color: var(--wow-text); } .wow-trip-cta__img { align-self: center; justify-self: center; width: 100%; aspect-ratio: var(--wow-cta-ratio, auto); overflow: hidden; border-radius: var(--wow-radius-lg); } .wow-trip-cta__img img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; border-radius: inherit; } .wow-trip-cta__img--cover img { object-fit: cover; } .wow-trip-cta__img--cover { align-self: stretch; min-height: 220px; } .wow-trip-cta__img--cover[style*="--wow-cta-ratio"] { align-self: center; min-height: 0; } .wow-steps { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: s; } .wow-step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; } .wow-step + .wow-step::before { content: "→"; position: absolute; left: -14px; top: 42px; color: var(--wow-primary); font-size: 1.2rem; } .wow-step__num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wow-primary); color: #fff; font-size: .8rem; font-weight: 700; } .wow-step__icon { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #fff; box-shadow: var(--wow-shadow); color: var(--step); } .wow-step__icon .wow-icon { width: 34px; height: 34px; fill: color-mix(in srgb, var(--step) 85%, transparent); } .wow-step strong { color: var(--wow-navy); font: 600 .98rem var(--wow-font-head); } .wow-step small { color: var(--wow-muted); font-size: .82rem; line-height: 1.4; max-width: 15em; } @media (max-width: 1024px) { .wow-trip-cta--wide .wow-trip-cta__inner { grid-template-columns: 1fr; } .wow-trip-cta__img:not(.wow-trip-cta__img--mobile) { display: none; } .wow-trip-cta__img--mobile { max-width: 520px; } } @media (max-width: 600px) { .wow-steps { flex-direction: column; } .wow-step + .wow-step::before { display: none; } } .wow-trip-cta--sidebar { border-radius: var(--wow-radius-lg); } .wow-trip-cta--sidebar .wow-trip-cta__inner { position: relative; padding: 24px; } .wow-trip-cta--sidebar .wow-trip-cta__text { position: relative; z-index: 1; } .wow-trip-cta--sidebar .wow-trip-cta__title { font-size: 1.4rem; max-width: 9em; } .wow-trip-cta--sidebar .wow-trip-cta__text p { max-width: 15em; font-size: .9rem; } .wow-trip-cta--sidebar .wow-btn { width: 100%; } .wow-trip-cta--sidebar .wow-trip-cta__img { position: absolute; right: -10px; top: 0; width: 45%; height: 60%; min-height: 0; border-radius: 0; } .wow-trip-cta--sidebar .wow-trip-cta__img img { object-position: top center; } /* Stories ---------------------------------------------------------------- */ .wow-stories__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, .95fr); gap: 16px; } .wow-stories__grid.is-full { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wow-stories__list { display: flex; flex-direction: column; gap: 10px; } .wow-stories__list .wow-card { flex: 1; } @media (max-width: 1024px) { .wow-stories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wow-stories__list { grid-column: 1 / -1; } } @media (max-width: 600px) { .wow-stories__grid { grid-template-columns: 1fr; } } /* Essentials ------------------------------------------------------------- */ .wow-essentials { padding-block: 32px; } .wow-essentials__inner { display: grid; grid-template-columns: minmax(0, 250px) 1fr; gap: 24px; align-items: center; } .wow-essentials .wow-title { font-size: clamp(1.35rem, 2vw, 1.6rem); } .wow-essentials .wow-section-head { margin: 0; } .wow-essentials__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } .wow-essential { display: flex; align-items: center; gap: 10px; height: 100%; padding: 14px 12px 14px 14px; background: #fff; border: 1px solid var(--wow-line); border-radius: var(--wow-radius); color: var(--wow-text); text-decoration: none; box-shadow: 0 2px 8px rgba(15, 46, 92, .04); box-sizing: border-box; transition: box-shadow .2s; } .wow-essential:hover { box-shadow: var(--wow-shadow); } .wow-essential__icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--ess) 12%, #fff); color: var(--ess); } .wow-essential__icon .wow-icon { width: 22px; height: 22px; } .wow-essential__text { display: flex; flex-direction: column; flex: 1; min-width: 0; } .wow-essential__text strong { color: var(--wow-navy); font: 600 .98rem var(--wow-font-head); } .wow-essential__text small { color: var(--wow-muted); font-size: .8rem; line-height: 1.4; } .wow-essential__chev { color: var(--wow-muted); } @media (max-width: 1024px) { .wow-essentials__inner { grid-template-columns: 1fr; } .wow-essentials__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .wow-essentials__list { grid-template-columns: 1fr; } } /* Directory -------------------------------------------------------------- */ .wow-directory { padding-block: clamp(28px, 4vw, 44px) clamp(40px, 6vw, 64px); } .wow-directory__layout { display: grid; grid-template-columns: 1fr; gap: 28px; } .wow-directory.has-map .wow-directory__layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .wow-directory__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .wow-directory__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } .wow-sort select { min-height: 42px; padding: 8px 36px 8px 16px; border: 1px solid var(--wow-line); border-radius: 999px; background: #fff; font: .92rem var(--wow-font); color: var(--wow-text); } .wow-directory__query { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--wow-muted); } .wow-directory__query a { display: inline-flex; align-items: center; gap: 4px; color: var(--wow-primary); font-size: .9rem; text-decoration: none; } .wow-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; } .wow-filter { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--wow-line); border-radius: 999px; background: #fff; color: var(--wow-text); font-size: .9rem; text-decoration: none; transition: background .2s, color .2s; } .wow-filter .wow-icon { color: var(--chip, var(--wow-primary)); } .wow-filter span { color: var(--wow-muted); font-size: .85em; } .wow-filter:hover { border-color: var(--wow-primary); } .wow-filter.is-active { background: var(--wow-primary); border-color: var(--wow-primary); color: #fff; } .wow-filter.is-active .wow-icon, .wow-filter.is-active span { color: #fff; } .wow-directory__results { transition: opacity .2s; } .wow-directory.is-loading .wow-directory__results { opacity: .45; pointer-events: none; } .wow-directory__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; } .wow-directory__summary { margin: 0; color: var(--wow-muted); font-size: .9rem; } .wow-directory__map { position: relative; } .wow-directory__map .wow-map { position: sticky; top: calc(var(--wow-header-h) + 16px); height: calc(100vh - var(--wow-header-h) - 32px); min-height: 480px; } .wow-directory.is-map-expanded .wow-directory__map { position: fixed; inset: 0; z-index: 9999; background: #fff; } .wow-directory.is-map-expanded .wow-directory__map .wow-map { position: absolute; inset: 0; height: 100%; border-radius: 0; } body.wow-no-scroll { overflow: hidden; } @media (max-width: 960px) { .wow-directory.has-map .wow-directory__layout { grid-template-columns: 1fr; } .wow-directory__map { order: -1; } .wow-directory__map .wow-map { position: relative; top: 0; height: 320px; min-height: 0; } } .wow-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; text-align: center; color: var(--wow-muted); background: var(--wow-bg-soft); border-radius: var(--wow-radius); } .wow-empty > .wow-icon { width: 40px; height: 40px; color: var(--wow-sky); } .wow-empty p { margin: 0; } /* Pagination */ .wow-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .wow-page-btn { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--wow-line); border-radius: 50%; background: #fff; color: var(--wow-text); font-weight: 500; text-decoration: none; box-sizing: border-box; } .wow-page-btn:hover { border-color: var(--wow-primary); color: var(--wow-primary); } .wow-page-btn.is-current { background: var(--wow-primary); border-color: var(--wow-primary); color: #fff; } .wow-page-btn.is-disabled { opacity: .4; } .wow-page-gap { display: grid; place-items: center; min-width: 24px; height: 40px; color: var(--wow-muted); } /* Maps ------------------------------------------------------------------- */ .wow-map { position: relative; overflow: hidden; border-radius: var(--wow-radius-lg); background: #dbeefb; box-shadow: var(--wow-shadow); } .wow-map__canvas { position: absolute; inset: 0; z-index: 0; } .wow-map--single { height: 320px; } .wow-map--trip { height: 340px; margin-bottom: 20px; } .wow-map__toggle { position: absolute; top: 14px; left: 14px; z-index: 500; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fff; border-radius: 999px; box-shadow: var(--wow-shadow); font-size: .88rem; font-weight: 500; cursor: pointer; } .wow-map__toggle input { accent-color: var(--wow-primary); width: 16px; height: 16px; } .wow-map__expand { position: absolute; top: 14px; right: 14px; z-index: 500; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; background: #fff; border-radius: 999px; box-shadow: var(--wow-shadow); font: 500 .88rem var(--wow-font); cursor: pointer; } .wow-map__big { position: absolute; left: 14px; bottom: 24px; z-index: 500; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: #fff; border-radius: 999px; box-shadow: var(--wow-shadow); color: var(--wow-navy); font-size: .88rem; font-weight: 500; text-decoration: none; } .wow-map .leaflet-control-zoom { border: 0; box-shadow: var(--wow-shadow); border-radius: 12px; overflow: hidden; } .wow-pin-wrap { background: none; border: 0; } .wow-pin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pin); border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); color: #fff; transition: transform .2s; box-sizing: border-box; } .wow-pin .wow-icon { width: 17px; height: 17px; transform: rotate(45deg); } .wow-pin.is-hover, .leaflet-marker-icon:hover .wow-pin { transform: rotate(-45deg) scale(1.25); } .wow-popup { display: flex; gap: 10px; font-family: var(--wow-font); } .wow-popup img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; } .wow-popup__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wow-popup__type { color: var(--wow-primary); font-size: .75rem; } .wow-popup strong { color: var(--wow-navy); font-size: .92rem; } .wow-popup small { color: var(--wow-muted); } .wow-popup a { margin-top: 4px; font-size: .85rem; } .leaflet-container { font-family: var(--wow-font); } /* Gallery (single) ------------------------------------------------------- */ .wow-gallery-hero { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 10px; height: clamp(260px, 42vw, 480px); margin-bottom: 28px; } .wow-gallery-hero.is-single { grid-template-columns: 1fr; } .wow-gallery-hero__main { position: relative; min-height: 0; overflow: hidden; border-radius: var(--wow-gal-radius, var(--wow-radius-lg)); background: var(--wow-sky-soft); } .wow-slider__track { height: 100%; margin: 0; padding: 0; list-style: none; touch-action: pan-y; user-select: none; } .wow-slider__slide { height: 100%; margin: 0; } .wow-gallery-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .wow-gallery-open img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; } .wow-slider__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; margin-top: -21px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--wow-navy); box-shadow: var(--wow-shadow); cursor: pointer; } .wow-slider__nav.is-prev { left: 16px; } .wow-slider__nav.is-next { right: 16px; } .wow-slider__count { position: absolute; right: 16px; bottom: 16px; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .85rem; } /* Side thumbnails. Layout presets set these variables (Elementor → Style → แกลเลอรี → รูปแบบ). */ .wow-gallery-hero__side { display: grid; grid-template-columns: var(--wow-gal-cols, 1fr 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: inherit; min-height: 0; } .wow-gallery-hero__side > :nth-child(1) { grid-column: var(--wow-gal-span, 1 / -1); } .wow-gallery-hero__side > :nth-child(3) { display: var(--wow-gal-t3, block); } .wow-gallery-hero__side > :nth-child(4) { display: var(--wow-gal-t4, none); } .wow-gallery-hero__side.has-1 { grid-template-rows: minmax(0, 1fr); } .wow-gallery-hero__side.has-1 > *, .wow-gallery-hero__side.has-2 > * { grid-column: 1 / -1; } .wow-gallery-hero__side.has-3 > :nth-child(3) { grid-column: var(--wow-gal-span3, auto); } .wow-gallery-hero__thumb { position: relative; min-height: 0; overflow: hidden; border-radius: var(--wow-gal-radius, var(--wow-radius-lg)); background: var(--wow-sky-soft); } .wow-gallery-hero__thumb img { transition: transform .5s; } .wow-gallery-hero__thumb:hover img, .wow-gallery-hero__main .wow-gallery-open:hover img { transform: scale(1.03); } .wow-gallery-hero__main .wow-gallery-open img { transition: transform .5s; } .wow-gallery-hero__more { position: absolute; inset: 0; display: none; place-items: center; background: rgba(5, 25, 55, .45); color: #fff; font-size: 1.3rem; font-weight: 600; } .wow-gallery-hero__more[data-at="2"] { display: var(--wow-gal-m2, none); } .wow-gallery-hero__more[data-at="3"] { display: var(--wow-gal-m3, grid); } .wow-gallery-hero__more[data-at="4"] { display: var(--wow-gal-m4, none); } .wow-gallery-hero__side.has-2 .wow-gallery-hero__more[data-at="2"], .wow-gallery-hero__side.has-3 .wow-gallery-hero__more[data-at="3"] { display: grid; } @media (max-width: 700px) { .wow-gallery-hero { grid-template-columns: 1fr; height: 280px; } .wow-gallery-hero__side { display: none; } } .wow-gallery-strip__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .wow-gallery-strip__list .wow-gallery-open { aspect-ratio: 4 / 3; border-radius: var(--wow-radius-sm); overflow: hidden; } @media (max-width: 700px) { .wow-gallery-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wow-gallery-strip__list li:nth-child(n+4) { display: none; } } /* Lightbox */ :root { --wow-lb-bg: rgba(8, 22, 42, .78); } html.wow-lb-open { overflow: hidden; } .wow-lightbox { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; } .wow-lightbox::backdrop { background: var(--wow-lb-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .wow-lightbox[open] { display: flex; flex-direction: column; } .wow-lightbox__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 0 24px; } .wow-lightbox__count { padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .35); font-size: .9rem; } .wow-lightbox__count:empty { visibility: hidden; } .wow-lightbox__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background .2s; } .wow-lightbox__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; } .wow-lightbox__stage:active { cursor: grabbing; } .wow-lightbox__track { display: flex; height: 100%; transition: transform .35s cubic-bezier(.2, .7, .2, 1); } .wow-lightbox__slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; box-sizing: border-box; } .wow-lightbox__slide img { position: absolute; inset: 12px 80px; width: calc(100% - 160px); height: calc(100% - 24px); max-width: none; object-fit: contain; border-radius: 12px; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .35)); -webkit-user-drag: none; } .wow-lightbox__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; transition: background .2s; } .wow-lightbox__nav:hover, .wow-lightbox__close:hover { background: rgba(255, 255, 255, .28); } .wow-lightbox__nav.is-prev { left: 16px; } .wow-lightbox__nav.is-next { right: 16px; } .wow-lightbox.is-single .wow-lightbox__nav { display: none; } .wow-lightbox__cap { min-height: 1.4em; margin: 6px auto 0; padding: 0 24px; text-align: center; opacity: .85; font-size: .92rem; } .wow-lightbox__thumbs { display: flex; justify-content: center; gap: 8px; padding: 10px 16px 18px; overflow-x: auto; scrollbar-width: none; } .wow-lightbox__thumbs:empty { display: none; } .wow-lightbox__thumb { flex: 0 0 auto; width: 64px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; opacity: .55; overflow: hidden; cursor: pointer; transition: opacity .2s, border-color .2s; } .wow-lightbox__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .wow-lightbox__thumb:hover, .wow-lightbox__thumb.is-active { opacity: 1; } .wow-lightbox__thumb.is-active { border-color: #fff; } .wow-entry img, .wowt-entry img, .wow-lightboxable img { cursor: zoom-in; } .wow-entry a:not([href$=".jpg"]):not([href$=".jpeg"]):not([href$=".png"]):not([href$=".webp"]):not([href$=".gif"]) img, .wow-card img, .elementor img { cursor: auto; } .wow-lightboxable .elementor img, .wow-lightboxable img, .elementor-widget-theme-post-content img { cursor: zoom-in; } @media (max-width: 700px) { .wow-lightbox__slide img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); } .wow-lightbox__nav { display: none; } .wow-lightbox__thumbs { justify-content: flex-start; } } /* Place header & info ---------------------------------------------------- */ .wow-place-header__title { margin: 0; color: var(--wow-navy); font: 700 var(--wow-fs-h1)/1.2 var(--wow-font-head); } .wow-place-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 10px; } .wow-place-header__meta .wow-rating, .wow-place-header__meta .wow-meta { margin: 0; } .wow-place-header__intro { margin: 16px 0 0; color: var(--wow-text); font-size: 1.02rem; line-height: 1.75; } .wow-place-header__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .wow-info-card { padding: 22px; background: #fff; border: 1px solid var(--wow-line); border-radius: var(--wow-radius-lg); box-shadow: var(--wow-shadow); } .wow-info { margin: 0; padding: 0; list-style: none; } .wow-info__row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--wow-line); font-size: .95rem; } .wow-info__row:last-child { border-bottom: 0; } .wow-info__icon { color: var(--wow-primary); } .wow-info__icon .wow-icon { width: 22px; height: 22px; } .wow-info__text { flex: 1; min-width: 0; overflow-wrap: anywhere; } .wow-info__text small { color: var(--wow-muted); } .wow-info__text a { color: var(--wow-primary); text-decoration: none; } .wow-info__link { display: inline-flex; align-items: center; gap: 2px; color: var(--wow-primary); font-size: .88rem; text-decoration: none; white-space: nowrap; } .wow-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; } .wow-social__link { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; text-decoration: none; transition: transform .2s; } .wow-social__link:hover { transform: translateY(-2px); } .wow-social__link .wow-icon { width: 20px; height: 20px; } .wow-social__link.is-facebook { background: #1877f2; } .wow-social__link.is-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .wow-social__link.is-tiktok { background: #111; } .wow-social__link.is-youtube { background: #ff0000; } .wow-social__link.is-line { background: #06c755; } .wow-highlights__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } .wow-highlight { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; text-align: center; background: #fff; border: 1px solid var(--wow-line); border-radius: var(--wow-radius); } .wow-highlight__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; background: color-mix(in srgb, var(--hl) 10%, #fff); color: var(--hl); } .wow-highlight__icon .wow-icon { width: 28px; height: 28px; } .wow-highlight strong { color: var(--wow-navy); font: 600 1rem var(--wow-font-head); } .wow-highlight small { color: var(--wow-muted); font-size: .85rem; line-height: 1.5; } @media (max-width: 800px) { .wow-highlights__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wow-facilities__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .wow-facility { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; padding: 14px 6px; text-align: center; border: 1px solid var(--wow-line); border-radius: var(--wow-radius-sm); font-size: .78rem; line-height: 1.35; } .wow-facility .wow-icon { width: 26px; height: 26px; color: var(--wow-primary); } /* Article sidebar --------------------------------------------------------- */ .wow-post-sidebar { display: flex; flex-direction: column; gap: 20px; } .wow-side-box { padding: 18px; background: #fff; border: 1px solid var(--wow-line); border-radius: var(--wow-radius-lg); box-shadow: var(--wow-shadow); } .wow-side-box h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--wow-navy); font: 600 1.1rem var(--wow-font-head); } .wow-side-box h2 .wow-icon { color: var(--wow-primary); } .wow-side-box__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; } .wow-side-box__head h2 { margin: 0; } .wow-side-box__head .wow-link-more { font-size: .85rem; } .wow-side-box__list { display: flex; flex-direction: column; } .wow-side-box__list .wow-card + .wow-card { border-top: 1px solid var(--wow-line); border-radius: 0; } .wow-side-box--tint { background: var(--wow-sky-soft); border-color: transparent; box-shadow: none; } .wow-side-box--tint h2 .wow-icon { color: #f59e0b; } .wow-ideas { margin: 0; padding: 0; list-style: none; } .wow-ideas li { position: relative; padding: 8px 0 8px 24px; } .wow-ideas li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--wow-primary); box-sizing: border-box; } .wow-ideas a { color: var(--wow-text); text-decoration: none; } .wow-ideas a:hover { color: var(--wow-primary); } /* Calendar --------------------------------------------------------------- */ .wow-calendar__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; } .wow-calendar__bar .wow-filter-tabs { margin: 0; } .wow-calendar__nav { display: flex; align-items: center; gap: 12px; } .wow-calendar__month { min-width: min(9em, calc(100vw - 150px)); margin: 0; text-align: center; color: var(--wow-navy); font: 700 1.5rem var(--wow-font-head); } .wow-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--wow-line); border-radius: var(--wow-radius); background: var(--wow-line); } .wow-calendar__wd { padding: 10px 4px; background: var(--wow-navy); color: #fff; text-align: center; font-size: .9rem; font-weight: 500; } .wow-calendar__cell { display: flex; flex-direction: column; gap: 4px; min-height: 104px; padding: 8px; background: #fff; min-width: 0; } .wow-calendar__cell.is-empty { background: var(--wow-bg-soft); } .wow-calendar__cell.is-today .wow-calendar__day { background: var(--wow-primary); color: #fff; } .wow-calendar__day { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .9rem; font-weight: 500; } .wow-calendar__event { display: block; padding: 3px 7px; border-radius: 6px; background: var(--wow-sky-soft); color: var(--wow-primary); font-size: .76rem; line-height: 1.3; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wow-calendar__event:hover { background: var(--wow-primary); color: #fff; } .wow-calendar__more { color: var(--wow-muted); font-size: .75rem; } .wow-calendar__list { margin-top: 36px; } .wow-calendar__list-title { margin: 0 0 16px; color: var(--wow-navy); font: 600 1.3rem var(--wow-font-head); } @media (max-width: 700px) { .wow-calendar__cell { min-height: 54px; padding: 4px; align-items: center; } .wow-calendar__event { width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%; background: var(--wow-primary); } .wow-calendar__more { display: none; } } /* Blog ------------------------------------------------------------------- */ .wow-blog .wow-card--story-featured { margin-bottom: 32px; } .wow-pill-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; } .wow-pill-tab { display: inline-block; min-width: 96px; padding: 10px 22px; border-radius: 999px; background: var(--wow-bg-soft); color: var(--wow-navy); text-align: center; text-decoration: none; font-weight: 500; } .wow-pill-tab:hover { background: #dbeafe; } .wow-pill-tab.is-active { background: var(--wow-primary); color: #fff; } .wow-blog__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); } .wow-blog__grid > .wow-card { grid-column: span 2; } .wow-blog__grid > .wow-card:nth-child(-n+2) { grid-column: span 3; } .wow-blog .wow-pagination { display: flex; justify-content: center; margin-top: 30px; } @media (max-width: 900px) { .wow-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wow-blog__grid > .wow-card, .wow-blog__grid > .wow-card:nth-child(-n+2) { grid-column: span 1; } } @media (max-width: 600px) { .wow-blog__grid { grid-template-columns: 1fr; } } /* Forms ------------------------------------------------------------------ */ .wow-form { display: flex; flex-direction: column; gap: 16px; } .wow-field { display: flex; flex-direction: column; gap: 6px; } .wow-field__label { color: var(--wow-navy); font-weight: 500; font-size: .95rem; } .wow-form input[type="text"], .wow-form input[type="email"], .wow-form input[type="password"], .wow-form input[type="tel"], .wow-form input[type="url"], .wow-form input[type="number"], .wow-form input[type="date"], .wow-form select, .wow-form textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #cfd9e6; border-radius: var(--wow-radius-sm); background: #fff; font: 1rem var(--wow-font); color: var(--wow-text); box-sizing: border-box; } .wow-form textarea { min-height: 90px; line-height: 1.6; } .wow-form input:focus, .wow-form select:focus, .wow-form textarea:focus { outline: none; border-color: var(--wow-primary); box-shadow: 0 0 0 3px rgba(10, 108, 219, .15); } .wow-form__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .92rem; } .wow-form__row a { color: var(--wow-primary); } .wow-check { display: inline-flex; align-items: flex-start; gap: 8px; font-size: .95rem; cursor: pointer; } .wow-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--wow-primary); flex: none; } .wow-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; } .wow-help { margin: 0; color: var(--wow-muted); font-size: .85rem; } .wow-req { color: var(--wow-danger); } .wow-consent-check a { color: var(--wow-primary); } .wow-panel { margin: 0; padding: 22px; border: 1px solid var(--wow-line); border-radius: var(--wow-radius-lg); background: #fff; } .wow-panel legend, .wow-panel h3 { padding: 0 6px; margin: 0 0 6px; color: var(--wow-navy); font: 600 1.1rem var(--wow-font-head); } .wow-panel--danger { border-color: #fecaca; background: #fffafa; } .wow-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .wow-fields-grid .wow-field--textarea, .wow-fields-grid .wow-field--latlng, .wow-fields-grid .wow-field--checkboxes { grid-column: 1 / -1; } @media (max-width: 700px) { .wow-fields-grid { grid-template-columns: 1fr; } } .wow-fields-grid .wow-field--full, .wow-fields-grid .wow-fgroup { grid-column: 1 / -1; } .wow-fields-grid .wow-field--select.wow-field--full select { max-width: 360px; } .wow-fgroup { min-width: 0; margin: 0; padding: 0 16px 16px; border: 1px solid var(--wow-line); border-radius: var(--wow-radius-sm); background: var(--wow-bg-soft); } .wow-fgroup__legend { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--wow-navy); font-weight: 600; font-size: .95rem; } .wow-fgroup__legend .wow-icon { width: 18px; height: 18px; color: var(--wow-primary); } .wow-fgroup__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding-top: 6px; } .wow-fields-grid .wow-field--checkbox .wow-check { min-height: 46px; align-items: center; } @media (max-width: 700px) { .wow-fgroup__grid { grid-template-columns: 1fr; } } .wow-latlng__map { height: 280px; border-radius: var(--wow-radius-sm); border: 1px solid var(--wow-line); } .wow-latlng__inputs { display: flex; gap: 12px; margin-top: 8px; } .wow-latlng__inputs label { display: flex; align-items: center; gap: 6px; flex: 1; font-size: .85rem; color: var(--wow-muted); } .wow-account-type { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; border: 0; } .wow-account-type legend { margin-bottom: 8px; } .wow-choice { position: relative; cursor: pointer; } .wow-choice input { position: absolute; opacity: 0; } .wow-choice > span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; text-align: center; border: 1.5px solid var(--wow-line); border-radius: var(--wow-radius); transition: border-color .2s, background .2s; } .wow-choice .wow-icon { width: 28px; height: 28px; color: var(--wow-primary); } .wow-choice small { color: var(--wow-muted); font-size: .8rem; } .wow-choice input:checked + span { border-color: var(--wow-primary); background: var(--wow-sky-soft); } .wow-choice input:focus-visible + span { outline: 3px solid var(--wow-yellow); outline-offset: 2px; } /* Notices ---------------------------------------------------------------- */ .wow-notice { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border-radius: var(--wow-radius-sm); font-size: .95rem; } .wow-notice--error { background: #fef2f2; color: #991b1b; } .wow-notice--success { background: #f0fdf4; color: #166534; } .wow-notice--info { background: var(--wow-sky-soft); color: var(--wow-navy); } .wow-notice--warning { background: #fffbeb; color: #92400e; } .wow-notice .wow-icon { margin-top: 2px; } /* Auth & account --------------------------------------------------------- */ .wow-auth { display: flex; justify-content: center; padding-block: 24px; } .wow-auth__card { width: min(100%, 460px); padding: clamp(22px, 4vw, 36px); background: #fff; border: 1px solid var(--wow-line); border-radius: var(--wow-radius-lg); box-shadow: var(--wow-shadow-lg); box-sizing: border-box; } .wow-auth__card--wide { width: min(100%, 560px); } .wow-auth__title { margin: 0 0 6px; color: var(--wow-navy); font: 700 1.7rem var(--wow-font-head); } .wow-auth__intro { margin: 0 0 20px; color: var(--wow-muted); } .wow-auth__switch { margin: 18px 0 0; text-align: center; color: var(--wow-muted); } .wow-auth__switch a { color: var(--wow-primary); font-weight: 500; } .wow-auth__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .wow-account__hello { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; } .wow-account__hello img { border-radius: 50%; } .wow-account__hello h2 { margin: 0; color: var(--wow-navy); font: 700 1.5rem var(--wow-font-head); } .wow-account__hello p { margin: 2px 0 0; color: var(--wow-muted); } .wow-account__hello .wow-btn { margin-left: auto; } .wow-account__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0 0 24px; padding: 0; list-style: none; } .wow-account__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; } @media (max-width: 800px) { .wow-account__grid { grid-template-columns: 1fr; } .wow-account__hello { flex-wrap: wrap; } } /* Vendor ----------------------------------------------------------------- */ .wow-vendor__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 20px; } .wow-vendor__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .wow-vendor__item { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 14px; background: #fff; border: 1px solid var(--wow-line); border-radius: var(--wow-radius); } .wow-vendor__thumb { aspect-ratio: 1; overflow: hidden; border-radius: var(--wow-radius-sm); } .wow-vendor__thumb img { width: 100%; height: 100%; object-fit: cover; } .wow-vendor__info h3 { margin: 0 0 6px; color: var(--wow-navy); font: 600 1.05rem var(--wow-font-head); } .wow-vendor__info p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; } .wow-vendor__note { padding: 8px 12px; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: .88rem; } .wow-vendor__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .wow-vendor__actions form { margin: 0; } .wow-status { padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 500; } .wow-status--live { background: #dcfce7; color: #166534; } .wow-status--pending { background: #fef3c7; color: #92400e; } .wow-status--draft { background: #fee2e2; color: #991b1b; } @media (max-width: 700px) { .wow-vendor__item { grid-template-columns: 72px 1fr; } .wow-vendor__actions { grid-column: 1 / -1; justify-content: flex-start; } } .wow-vendor-form { margin-top: 18px; } .wow-upload { display: flex; align-items: center; gap: 16px; } .wow-upload__preview { width: 180px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--wow-radius-sm); background: var(--wow-bg-soft); } .wow-upload__preview img { width: 100%; height: 100%; object-fit: cover; } .wow-upload__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 0 0 10px; padding: 0; list-style: none; } .wow-upload__grid li { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--wow-radius-sm); } .wow-upload__grid li.is-new { outline: 2px dashed var(--wow-primary); outline-offset: -2px; } .wow-upload__grid img { width: 100%; height: 100%; object-fit: cover; } .wow-upload__remove { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; } .wow-form__submit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-radius: var(--wow-radius-lg); background: var(--wow-bg-soft); } /* Weather ---------------------------------------------------------------- */ .wow-weather { padding: 20px; border-radius: var(--wow-radius-lg); background: linear-gradient(140deg, #0a6cdb 0%, #3aa0ee 100%); color: #fff; box-shadow: var(--wow-shadow); } .wow-weather__now { display: flex; align-items: center; gap: 16px; } .wow-weather__icon .wow-icon { width: 56px; height: 56px; color: var(--wow-yellow); } .wow-weather__now p { margin: 0; } .wow-weather__place { opacity: .9; font-size: .9rem; } .wow-weather__temp { font: 700 2rem/1.2 var(--wow-font-head); } .wow-weather__temp small { font: 400 1rem var(--wow-font); opacity: .9; } .wow-weather__extra { display: flex; gap: 14px; font-size: .85rem; opacity: .9; } .wow-weather__extra span { display: inline-flex; align-items: center; gap: 4px; } .wow-weather__days { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; margin: 16px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .25); } .wow-weather__days li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .82rem; } .wow-weather__days .wow-icon { width: 24px; height: 24px; } .wow-weather__rain { display: inline-flex; gap: 2px; align-items: center; opacity: .85; font-size: .75rem; } .wow-weather__rain .wow-icon { width: 12px; height: 12px; } .wow-weather--empty { display: flex; gap: 10px; align-items: center; padding: 16px; border-radius: var(--wow-radius); background: var(--wow-bg-soft); color: var(--wow-muted); } .wow-weather-inline { display: inline-flex; align-items: center; gap: 6px; } /* My Trip ---------------------------------------------------------------- */ .wow-mytrip__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 24px; } .wow-mytrip__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; } .wow-mytrip__side { position: sticky; top: calc(var(--wow-header-h) + 16px); } .wow-mytrip__group { margin-bottom: 28px; } .wow-mytrip__group-title { margin: 0 0 12px; color: var(--wow-navy); font: 600 1.2rem var(--wow-font-head); } .wow-mytrip__group-title span { color: var(--wow-muted); font-weight: 400; } .wow-mytrip__guest { width: min(100%, 520px); margin-inline: auto; text-align: center; } .wow-mytrip__heart { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; border-radius: 50%; background: #ffe4e6; color: #e11d48; } .wow-mytrip__heart .wow-icon { width: 30px; height: 30px; fill: currentColor; } .wow-mytrip__guest h2 { margin: 0 0 8px; color: var(--wow-navy); font: 700 1.5rem var(--wow-font-head); } .wow-mytrip__guest p { color: var(--wow-muted); } @media (max-width: 960px) { .wow-mytrip__layout { grid-template-columns: 1fr; } .wow-mytrip__side { position: static; order: -1; } } /* Toast & consent -------------------------------------------------------- */ .wow-toast { position: fixed; left: 50%; bottom: 24px; z-index: 100000; padding: 12px 20px; border-radius: 999px; background: var(--wow-navy); color: #fff; box-shadow: var(--wow-shadow-lg); font-size: .95rem; transform: translate(-50%, 140%); opacity: 0; transition: transform .3s, opacity .3s; pointer-events: none; } .wow-toast.is-visible { transform: translate(-50%, 0); opacity: 1; } .wow-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 99999; display: flex; justify-content: center; } .wow-consent__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; width: min(100%, 1000px); padding: 18px 22px; background: #fff; border-radius: var(--wow-radius-lg); box-shadow: 0 10px 40px rgba(15, 46, 92, .25); box-sizing: border-box; } .wow-consent__text { flex: 1 1 420px; margin: 0; font-size: .92rem; color: var(--wow-text); } .wow-consent__text a { color: var(--wow-primary); } .wow-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; } @media (prefers-reduced-motion: reduce) { .wow-card, .wow-card img, .wow-chip, .wow-fav, .wow-toast { transition: none !important; } } /* Article header --------------------------------------------------------- */ .wow-post-header { padding-top: 8px; } .wow-post-header > .wow-badge { margin-bottom: 12px; text-decoration: none; } .wow-post-header__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; } .wow-post-header__main { flex: 1 1 520px; min-width: 0; } .wow-post-header__title { margin: 0; color: var(--wow-navy); font: 700 var(--wow-fs-h1)/1.25 var(--wow-font-head); } .wow-post-header__intro { margin: 12px 0 0; color: var(--wow-muted); font-size: 1.08rem; } .wow-post-header__byline { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .wow-post-header__byline img { border-radius: 50%; } .wow-post-header__byline div { display: flex; flex-direction: column; } .wow-post-header__byline small { color: var(--wow-muted); } .wow-share { display: flex; align-items: center; gap: 10px; } .wow-share > span { color: var(--wow-muted); font-size: .9rem; } .wow-social__link.is-copy { border: 1px solid var(--wow-line); background: #fff; color: var(--wow-text); cursor: pointer; padding: 0; } /* Elementor compatibility ------------------------------------------------ * Elementor's base CSS (".elementor img { height: auto; border-radius: 0 }") and * Site Settings → Buttons (".elementor-kit-N button { … }") load after this file * and override our images and buttons. These rules sit one step above them but * below anything set in a widget's Style tab ({{WRAPPER}} …). */ body[class*="elementor-kit-"] .wow-card__media img, body[class*="elementor-kit-"] .wow-card__thumb img, body[class*="elementor-kit-"] .wow-gallery-open img, body[class*="elementor-kit-"] .wow-vendor__thumb img, body[class*="elementor-kit-"] .wow-upload__preview img, body[class*="elementor-kit-"] .wow-upload__grid img { width: 100%; height: 100%; max-width: none; object-fit: cover; } body[class*="elementor-kit-"] .wow-card__cover img, body[class*="elementor-kit-"] .wow-tile img { width: 100%; height: 100%; max-width: none; } body[class*="elementor-kit-"] .wow-popup img { height: 64px; border-radius: 8px; } body[class*="elementor-kit-"] .wow-account__hello img, body[class*="elementor-kit-"] .wow-post-header__byline img, body[class*="elementor-kit-"] .wowt-account__btn img { border-radius: 50%; } body[class*="elementor-kit-"] .wow-lightbox__thumb img { height: 100%; } body[class*="elementor-kit-"] button.wow-gallery-open, body[class*="elementor-kit-"] button.wow-gallery-open:is(:hover, :focus) { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; } body[class*="elementor-kit-"] button.wow-gallery-hero__thumb { border-radius: var(--wow-gal-radius-sm, var(--wow-radius)); } body[class*="elementor-kit-"] button.wow-slider__nav, body[class*="elementor-kit-"] button.wow-slider__nav:is(:hover, :focus) { padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--wow-navy); box-shadow: var(--wow-shadow); } body[class*="elementor-kit-"] .wow-lightbox button, body[class*="elementor-kit-"] .wow-lightbox button:is(:hover, :focus) { padding: 0; border: 0; box-shadow: none; color: #fff; text-transform: none; } body[class*="elementor-kit-"] .wow-lightbox button.wow-lightbox__close { background: rgba(255, 255, 255, .14); border-radius: 50%; } body[class*="elementor-kit-"] .wow-lightbox button.wow-lightbox__nav { background: rgba(255, 255, 255, .14); border-radius: 50%; } body[class*="elementor-kit-"] .wow-lightbox button:hover { background: rgba(255, 255, 255, .28); } body[class*="elementor-kit-"] .wow-lightbox button.wow-lightbox__thumb { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; } body[class*="elementor-kit-"] .wow-lightbox button.wow-lightbox__thumb.is-active { border-color: #fff; } body[class*="elementor-kit-"] button.wow-fav, body[class*="elementor-kit-"] button.wow-fav:focus { padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; } body[class*="elementor-kit-"] button.wow-fav:hover { background: rgba(255, 255, 255, .35); } body[class*="elementor-kit-"] button.wow-fav.is-saved { background: #fff; color: #e11d48; } body[class*="elementor-kit-"] button.wow-tab, body[class*="elementor-kit-"] button.wow-tab:is(:hover, :focus) { padding: 9px 20px; border: 0; border-radius: 999px; background: var(--wow-bg-soft); color: var(--wow-navy); font: 500 .95rem var(--wow-font); text-transform: none; box-shadow: none; } body[class*="elementor-kit-"] button.wow-tab.is-active { background: var(--wow-navy); color: #fff; } body[class*="elementor-kit-"] button.wow-map__expand, body[class*="elementor-kit-"] button.wow-map__expand:is(:hover, :focus) { padding: 8px 14px; border: 0; border-radius: 999px; background: #fff; color: var(--wow-navy); } body[class*="elementor-kit-"] button.wow-btn { padding: 10px 22px; border-width: 1.5px; border-style: solid; border-radius: 999px; font: 500 1rem/1.2 var(--wow-font); text-transform: none; letter-spacing: normal; box-shadow: none; } body[class*="elementor-kit-"] button.wow-btn--sm { padding: 6px 16px; font-size: .9rem; } body[class*="elementor-kit-"] button.wow-btn--primary, body[class*="elementor-kit-"] button.wow-btn--primary:focus { background: var(--wow-primary); color: #fff; border-color: transparent; } body[class*="elementor-kit-"] button.wow-btn--primary:hover { background: var(--wow-primary-dark); color: #fff; } body[class*="elementor-kit-"] button.wow-btn--outline, body[class*="elementor-kit-"] button.wow-btn--outline:focus { background: #fff; color: var(--wow-primary); border-color: rgba(10, 108, 219, .45); } body[class*="elementor-kit-"] button.wow-btn--outline:hover { background: var(--wow-sky-soft); color: var(--wow-primary); border-color: var(--wow-primary); } body[class*="elementor-kit-"] button.wow-btn--ghost, body[class*="elementor-kit-"] button.wow-btn--ghost:focus { background: transparent; color: var(--wow-text); border-color: var(--wow-line); } body[class*="elementor-kit-"] button.wow-btn--ghost:hover { background: var(--wow-bg-soft); color: var(--wow-text); } body[class*="elementor-kit-"] button.wow-btn--danger, body[class*="elementor-kit-"] button.wow-btn--danger:is(:hover, :focus) { background: var(--wow-danger); color: #fff; border-color: transparent; } body[class*="elementor-kit-"] button.wow-btn--danger-text, body[class*="elementor-kit-"] button.wow-btn--danger-text:is(:hover, :focus) { color: var(--wow-danger); } body[class*="elementor-kit-"] button.wow-btn.is-saved { background: #fff; color: #e11d48; border-color: #fecdd3; } @media (max-width: 600px) { body[class*="elementor-kit-"] .wow-search button.wow-btn { padding-inline: 16px; } } /* v1.7 content-page widgets (assets/css/wow-pages-v17.css): buttons, coloured links, images. */ body[class*="elementor-kit-"] button.wow-pinmap__tab, body[class*="elementor-kit-"] button.wow-pinmap__tab:is(:hover, :focus) { padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--wow-navy); font: 500 .86rem/1.2 var(--wow-font); text-transform: none; letter-spacing: normal; box-shadow: none; } body[class*="elementor-kit-"] button.wow-pinmap__tab:hover { background: var(--wow-sky-soft); } body[class*="elementor-kit-"] button.wow-pinmap__tab.is-active { background: var(--wow-primary); color: #fff; } body[class*="elementor-kit-"] button.wow-pinmap__item-name, body[class*="elementor-kit-"] button.wow-pinmap__item-name:is(:hover, :focus) { padding: 0; border: 0; border-radius: 0; background: none; color: var(--wow-navy); font: 600 .95rem/1.35 var(--wow-font-head); text-align: left; text-transform: none; box-shadow: none; } body[class*="elementor-kit-"] .wow-pinmap__item.is-active button.wow-pinmap__item-name { color: var(--wow-primary); } body[class*="elementor-kit-"] button.wow-pinmap__locate, body[class*="elementor-kit-"] button.wow-pinmap__locate:is(:hover, :focus) { padding: 7px 12px; border: 1px dashed var(--wow-primary); border-radius: 999px; background: var(--wow-sky-soft); color: var(--wow-primary); font: 500 .82rem/1.2 var(--wow-font); text-transform: none; box-shadow: none; } body[class*="elementor-kit-"] a.wow-emg__call, body[class*="elementor-kit-"] a.wow-emg__btn, body[class*="elementor-kit-"] a.wow-emg__call:hover, body[class*="elementor-kit-"] a.wow-emg__btn:hover { color: #fff; text-decoration: none; } body[class*="elementor-kit-"] a.wow-routes__go, body[class*="elementor-kit-"] a.wow-routes__more, body[class*="elementor-kit-"] a.wow-pinmap__dir, body[class*="elementor-kit-"] a.wow-pinmap__more { color: var(--wow-primary); } body[class*="elementor-kit-"] a.wow-routes__more:hover { color: #fff; } body[class*="elementor-kit-"] a.wow-routes__ititle, body[class*="elementor-kit-"] a.wow-smap__link { color: var(--wow-navy); text-decoration: none; } body[class*="elementor-kit-"] .wow-smap__sub a { color: var(--wow-muted); text-decoration: none; } body[class*="elementor-kit-"] a.wow-smap__link:hover, body[class*="elementor-kit-"] .wow-smap__sub a:hover { color: var(--wow-primary); } body[class*="elementor-kit-"] .wow-routes__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; } body[class*="elementor-kit-"] .wow-emg__img img { width: 100%; height: 100%; max-width: none; object-fit: contain; border-radius: 0; } body[class*="elementor-kit-"] .wow-ct-polaroid img { border-radius: 4px; } @media (max-width: 767px) { body[class*="elementor-kit-"] .wow-routes__media img { height: 170px; } } /* Opening hours ---------------------------------------------------------- */ .wow-open { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0; font-size: .85rem; font-weight: 600; color: var(--wow-success, #15803d); } .wow-open i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); } .wow-open small { font-weight: 400; color: var(--wow-muted); font-size: inherit; } .wow-open--no { color: var(--wow-danger, #b91c1c); } .wow-card .wow-open { display: flex; } .wow-hours-list { display: grid; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; font-size: .9rem; } .wow-hours-list li { display: flex; justify-content: space-between; gap: 12px; } .wow-hours-list li.is-today { font-weight: 600; color: var(--wow-navy); } .wow-hours-note { display: block; margin-top: 4px; color: var(--wow-muted); } .wow-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .wow-open-toggle { position: relative; display: inline-flex; cursor: pointer; } .wow-open-toggle input { position: absolute; opacity: 0; pointer-events: none; } .wow-open-toggle span { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px; border: 1px solid var(--wow-line); border-radius: 999px; background: #fff; font-size: .92rem; color: var(--wow-text); transition: background .2s, border-color .2s, color .2s; } .wow-open-toggle i { width: 8px; height: 8px; border-radius: 50%; background: var(--wow-muted); } .wow-open-toggle input:checked + span { border-color: var(--wow-success); background: color-mix(in srgb, var(--wow-success) 10%, #fff); color: var(--wow-success); font-weight: 600; } .wow-open-toggle input:checked + span i { background: var(--wow-success); } .wow-open-toggle input:focus-visible + span { outline: 3px solid var(--wow-yellow); outline-offset: 2px; } /* Vendor gallery: reorder + cover */ .wow-upload__grid li[draggable="true"] { cursor: grab; } .wow-upload__grid li.is-dragging { opacity: .4; } .wow-upload__grid li.is-cover { outline: 3px solid var(--wow-yellow, #ffd23f); outline-offset: -3px; } .wow-upload__tools { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; justify-content: space-between; gap: 4px; opacity: 0; transition: opacity .2s; } .wow-upload__grid li:hover .wow-upload__tools, .wow-upload__grid li:focus-within .wow-upload__tools { opacity: 1; } @media (hover: none) { .wow-upload__tools { opacity: 1; } } .wow-upload__tool { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; } .wow-upload__tool .wow-icon { width: 14px; height: 14px; } .wow-upload__grid li.is-cover [data-wow-cover-set] { background: var(--wow-yellow, #ffd23f); color: var(--wow-navy); } .wow-upload__badge { position: absolute; top: 4px; left: 4px; display: none; padding: 2px 8px; border-radius: 999px; background: var(--wow-yellow, #ffd23f); color: var(--wow-navy); font-size: .72rem; font-weight: 600; } .wow-upload__grid li.is-cover .wow-upload__badge { display: block; } body[class*="elementor-kit-"] button.wow-upload__tool, body[class*="elementor-kit-"] button.wow-upload__remove { padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; } .wow-vendor__add { display: flex; flex-wrap: wrap; gap: 10px; } .wow-vendor__tally { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; } .wow-vendor__tally li { padding: 8px 16px; border-radius: 12px; background: var(--wow-bg-soft); font-size: .92rem; } .wow-vendor__tally strong { font-size: 1.1rem; } .wow-vendor__tally .is-live strong { color: var(--wow-success); } .wow-vendor__tally .is-pending strong { color: #b45309; } .wow-vendor__tally .is-draft strong { color: var(--wow-danger); } /* v1.3 Search heading, active filters, card sliders, term pills ---------- * (directory.php, cards/media-slider.php, place-header.php, theme search.php) */ .wow-directory__heading { min-width: 0; flex: 1 1 320px; } .wow-directory__head.is-search .wow-directory__title { font-size: clamp(1.6rem, 3vw, 2.3rem); overflow-wrap: anywhere; } .wow-directory__count { margin: 6px 0 0; color: var(--wow-muted); font-size: 1rem; } .wow-directory__head.is-search .wow-directory__count { color: var(--wow-navy); font-weight: 500; } .wow-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -4px 0 16px; } .wow-active-filters[hidden] { display: none; } .wow-active-filters__label { color: var(--wow-muted); font-size: .88rem; } .wow-active-filters__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .wow-filter-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px 6px 14px; border: 1px solid color-mix(in srgb, var(--wow-primary) 35%, #fff); border-radius: 999px; background: var(--wow-sky-soft); color: var(--wow-navy); font-size: .88rem; font-weight: 500; text-decoration: none; transition: background .2s, border-color .2s; } .wow-filter-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; } .wow-filter-chip .wow-icon { width: 16px; height: 16px; flex: 0 0 16px; padding: 2px; border-radius: 50%; background: rgba(15, 46, 92, .08); color: var(--wow-navy); box-sizing: content-box; } .wow-filter-chip:hover { border-color: var(--wow-primary); background: #dbeafe; } .wow-filter-chip:hover .wow-icon { background: var(--wow-primary); color: #fff; } .wow-active-filters__clear { color: var(--wow-primary); font-size: .88rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .wow-empty--search { gap: 8px; padding-block: 32px; } .wow-empty--search strong { color: var(--wow-navy); font-size: 1.05rem; } .wow-suggest { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; width: 100%; } .wow-suggest__label { margin: 8px 0 0 !important; color: var(--wow-navy); font-weight: 600; font-size: .92rem; } .wow-suggest__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .wow-suggest .wow-pills { margin: 0; } /* Card image slider */ .wow-card__slider { position: relative; height: 100%; } .wow-card__track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .wow-card__track::-webkit-scrollbar { display: none; } .wow-card__slide { flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background: var(--wow-sky-soft); -webkit-user-drag: none; user-select: none; } .wow-card__slide img:not([src]) { opacity: 0; } .wow-card__slider.is-dragging .wow-card__track { scroll-snap-type: none; cursor: grabbing; } .wow-card__slider.is-dragging img { transform: none !important; } .wow-card__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--wow-navy); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); cursor: pointer; transition: opacity .2s, transform .2s; } .wow-card__nav[hidden] { display: none; } .wow-card__nav .wow-icon { width: 18px; height: 18px; } .wow-card__nav.is-prev { left: 8px; } .wow-card__nav.is-next { right: 8px; } .wow-card__nav:hover { transform: scale(1.08); } .wow-card__nav:focus-visible { outline: 3px solid var(--wow-yellow); outline-offset: 2px; opacity: 1; } @media (hover: hover) { .wow-card__nav { opacity: 0; } .wow-card:hover .wow-card__nav, .wow-card__slider:focus-within .wow-card__nav { opacity: 1; } } @media (hover: none) { .wow-card__nav { display: none; } } .wow-card__dots { position: absolute; left: 50%; bottom: 10px; z-index: 1; display: flex; gap: 5px; transform: translateX(-50%); pointer-events: none; } .wow-card__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 2px rgba(0, 0, 0, .35); transition: width .2s, background .2s; } .wow-card__dots i.is-active { width: 16px; border-radius: 3px; background: #fff; } /* Clickable badges and category labels */ .wow-card__media > a.wow-badge { display: inline-flex; height: auto; } a.wow-badge { text-decoration: none; transition: filter .2s, box-shadow .2s; } a.wow-badge:hover { filter: brightness(.95); box-shadow: 0 0 0 2px color-mix(in srgb, var(--badge, var(--wow-primary)) 30%, transparent); } .wow-card--event .wow-card__media .wow-card__badge { margin: 0; background: #fff; } .wow-card--story-overlay > .wow-card__flag { position: absolute; top: 14px; left: 14px; z-index: 2; } .wow-card--story-featured .wow-eyebrow a { color: inherit; text-decoration: none; } .wow-card--story-featured .wow-eyebrow a:hover { text-decoration: underline; } /* Place header term pills */ .wow-term-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; letter-spacing: normal; } .wow-term-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border: 1px solid var(--wow-line); border-radius: 999px; background: #fff; color: var(--wow-muted); font: 500 .88rem/1.4 var(--wow-font); text-decoration: none; transition: background .2s, border-color .2s, color .2s; } .wow-term-pill .wow-icon { width: 16px; height: 16px; } .wow-term-pill:hover { border-color: var(--wow-primary); color: var(--wow-primary); } .wow-term-pill.is-primary { border-color: transparent; background: var(--pill, var(--wow-primary)); color: #fff; } .wow-term-pill.is-primary:hover { filter: brightness(1.08); color: #fff; } /* Site search page (theme search.php) */ .wow-search-head { margin-bottom: 18px; } .wow-search-head .wow-active-filters { margin: 14px 0 0; } .wow-search-types { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; padding: 0; list-style: none; } .wowt-blog-search { margin: 0 auto 24px; } @media (max-width: 600px) { .wow-filter-chip span { max-width: 200px; } .wow-directory__head.is-search .wow-directory__title { font-size: 1.55rem; } } /* Elementor compatibility for the v1.3 UI */ body[class*="elementor-kit-"] .wow-card__slide img { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; } body[class*="elementor-kit-"] button.wow-card__nav, body[class*="elementor-kit-"] button.wow-card__nav:is(:hover, :focus) { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--wow-navy); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); } body[class*="elementor-kit-"] .wow-filter-chip, body[class*="elementor-kit-"] .wow-term-pill { text-decoration: none; } /* v1.3 Sign in with Google, places in articles, event venues ------------- */ .wow-gsi { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 0 4px; } .wow-gsi__btn { display: flex; justify-content: center; width: 100%; min-height: 44px; } /* Google draws the button inside an iframe with 10px side padding; the theme's `iframe { max-width: 100% }` would cut its right edge off. */ .wow-gsi__btn iframe, .wow-gsi__btn > div { max-width: none; } .wow-gsi__loading { display: inline-flex; align-items: center; justify-content: center; width: min(100%, 400px); min-height: 44px; border: 1px solid var(--wow-line); border-radius: 999px; color: var(--wow-muted); font-size: .9rem; } .wow-gsi.is-ready .wow-gsi__loading { display: none; } .wow-gsi.is-busy { opacity: .6; pointer-events: none; } .wow-gsi__note { margin: 0; color: var(--wow-muted); font-size: .82rem; text-align: center; } .wow-or { display: flex; align-items: center; gap: 12px; margin: 14px 0 18px; color: var(--wow-muted); font-size: .85rem; } .wow-or::before, .wow-or::after { content: ""; flex: 1; height: 1px; background: var(--wow-line); } .wow-google-status { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--wow-sky-soft); color: var(--wow-navy); font-size: .88rem; font-weight: 500; } .wow-google-status small { color: var(--wow-muted); font-weight: 400; } .wow-google-status__g { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4285f4; font: 700 .85rem/1 Arial, sans-serif; box-shadow: 0 1px 3px rgba(15, 46, 92, .2); } .wow-google-panel .wow-gsi { align-items: flex-start; } .wow-google-panel .wow-gsi__btn { justify-content: flex-start; } .wow-article-places { clear: both; margin: clamp(32px, 5vw, 48px) 0 8px; padding-top: clamp(24px, 4vw, 32px); border-top: 1px solid var(--wow-line); font-size: 1rem; line-height: 1.55; } .wow-article-places .wow-section-head { margin-bottom: 16px; } .wow-article-places__map { height: clamp(260px, 42vw, 380px); margin-bottom: 20px; } .wow-article-places .wow-card a, .wow-inline-places .wow-card a, .wow-place-articles .wow-card a { text-decoration: none; } .wow-inline-places { margin: 1.4em 0; font-size: 1rem; line-height: 1.55; } .wow-inline-places--one .wow-grid { grid-template-columns: minmax(0, 360px); } .wow-inline-places--list { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--wow-line); border-radius: var(--wow-radius); background: var(--wow-bg-soft); } .wow-entry .wow-inline-places img, .wow-entry .wow-article-places img { border-radius: 0; } .wow-entry .wow-inline-places .wow-card__title, .wow-entry .wow-article-places .wow-card__title { margin: 0; font-size: var(--wow-fs-h5); } .wow-venue-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--wow-sky-soft); color: var(--wow-navy); font-size: .8rem; font-weight: 500; line-height: 1.4; white-space: nowrap; } .wow-venue-chip .wow-icon { width: 14px; height: 14px; color: var(--wow-primary); } .wow-venue-chip--cap { background: #fff6dc; color: #8a5a00; } .wow-venue-chip--cap .wow-icon { color: #e0a100; } .wow-card__cap { margin-top: 2px; } .wow-venues__filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 18px; } .wow-venues__tabs { margin: 0; } .wow-venues__tabs .wow-filter { cursor: pointer; font: inherit; font-size: .9rem; } .wow-venues__size, .wow-venue-filters__cap { display: inline-flex; align-items: center; gap: 8px; color: var(--wow-navy); font-size: .9rem; font-weight: 500; } .wow-venues__size .wow-icon, .wow-venue-filters__cap .wow-icon { width: 18px; height: 18px; color: var(--wow-primary); } .wow-venues__size select, .wow-venue-filters__cap select { min-height: 38px; padding: 6px 30px 6px 12px; border: 1px solid var(--wow-line); border-radius: 999px; background-color: #fff; color: var(--wow-text); font: inherit; } .wow-venue-card .wow-card__body { display: flex; flex-direction: column; gap: 8px; } .wow-venue-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; padding: 0; list-style: none; } .wow-venue-card__more { align-self: flex-start; margin-top: auto; } .wow-venue-card[hidden] { display: none; } .wow-venues__empty { margin: 8px 0 0; padding: 18px; border: 1px dashed var(--wow-line); border-radius: var(--wow-radius); color: var(--wow-muted); text-align: center; } .wow-venue-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--wow-line); border-radius: var(--wow-radius); background: var(--wow-bg-soft); } .wow-venue-filters__fmt { display: flex; flex-wrap: wrap; gap: 6px; } .wow-venue-fmt input { position: absolute; opacity: 0; pointer-events: none; } .wow-venue-fmt span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--wow-line); border-radius: 999px; background: #fff; font-size: .85rem; cursor: pointer; } .wow-venue-fmt span .wow-icon { width: 14px; height: 14px; color: var(--wow-primary); } .wow-venue-fmt input:checked + span { border-color: var(--wow-primary); background: var(--wow-primary); color: #fff; } .wow-venue-fmt input:checked + span .wow-icon { color: #fff; } .wow-venue-fmt input:focus-visible + span { outline: 2px solid var(--wow-primary); outline-offset: 2px; } @media (max-width: 600px) { .wow-venues__filters { flex-direction: column; align-items: stretch; } .wow-venues__tabs { flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .wow-venues__tabs .wow-filter { white-space: nowrap; } .wow-venues__size select { flex: 1; } .wow-inline-places--one .wow-grid { grid-template-columns: 1fr; } } body[class*="elementor-kit-"] .wow-venues__tabs button.wow-filter { padding: 8px 14px; border: 1px solid var(--wow-line); border-radius: 999px; background: #fff; color: var(--wow-text); font-size: .9rem; box-shadow: none; } body[class*="elementor-kit-"] .wow-venues__tabs button.wow-filter.is-active { background: var(--wow-primary); border-color: var(--wow-primary); color: #fff; } body[class*="elementor-kit-"] .wow-venue-card .wow-card__media img, body[class*="elementor-kit-"] .wow-article-places .wow-card__media img, body[class*="elementor-kit-"] .wow-inline-places .wow-card__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; } body[class*="elementor-kit-"] .wow-google-status, body[class*="elementor-kit-"] .wow-venue-card__more { text-decoration: none; } /* v1.3 Content page templates (About, MICE, Contact, Guide, General) ------ * Classes added by includes/content-templates.php to core Elementor widgets, * plus the WOW แผนที่ปักหมุด / ช่องทางติดต่อ / สารบัญ sections. * Sizes are fallbacks: anything set in a widget's Style tab wins. */ /* Sparkle on Elementor headings: draw it after the text, not after the widget box. */ .elementor-widget.wow-sparkle::after { content: none; } .elementor-widget.wow-sparkle .elementor-heading-title::after { content: "\2060"; display: inline; padding-left: 1.15em; /* word joiner: the sparkle never wraps onto a line of its own */ background: no-repeat .25em -.05em/.9em .9em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC72C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 13l-2 7M11 11l3-9M15 15l7-4'/%3E%3C/svg%3E"); } .wow-ct-title .elementor-heading-title { margin: 0; color: var(--wow-navy); font-family: var(--wow-font-head); font-weight: 700; line-height: 1.25; } .wow-ct-title--h1 .elementor-heading-title { font-size: var(--wow-fs-display); line-height: 1.12; } .wow-ct-title--h2 .elementor-heading-title { font-size: var(--wow-fs-h2); } .wow-ct-title--h3 .elementor-heading-title { font-size: var(--wow-fs-h4); font-weight: 600; line-height: 1.35; } .wow-ct-title--script .elementor-heading-title { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.35; transform: rotate(-4deg); color: var(--wow-primary); } .wow-ct-title--quote .elementor-heading-title { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 600; line-height: 1.5; } .wow-ct-eyebrow .elementor-heading-title { margin: 0; color: var(--wow-primary); font: 600 .85rem/1.3 var(--wow-font); letter-spacing: .12em; text-transform: uppercase; } .wow-ct-text p:last-child, .wow-ct-text ul:last-child { margin-bottom: 0; } .wow-ct-text p { margin: 0 0 .8em; } .wow-ct-sub p, .wow-ct-sub { color: var(--wow-muted); } .wow-ct-lead p, .wow-ct-lead { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--wow-text); } .wow-ct-hero .wow-breadcrumb { margin-bottom: 4px; } @media (max-width: 767px) { /* Photo heroes: fade from the top so the text stays readable on small screens. */ .e-con.wow-ct-hero::before { background-image: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .82) 55%, rgba(255, 255, 255, .45) 100%) !important; opacity: 1 !important; } } /* Icon / image boxes */ .wow-ct-ibox .elementor-icon-box-title { margin: 0 0 6px; color: var(--wow-navy); font: 600 1.06rem/1.35 var(--wow-font-head); } .wow-ct-ibox .elementor-icon-box-description { margin: 0; color: var(--wow-muted); font-size: .92rem; line-height: 1.55; } .wow-ct-imgcard .elementor-image-box-wrapper { display: flex; flex-direction: column; height: 100%; } .wow-ct-imgcard .elementor-image-box-img { width: 100% !important; margin: 0 !important; overflow: hidden; } .wow-ct-imgcard .elementor-image-box-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s; } .wow-ct-imgcard:hover .elementor-image-box-img img { transform: scale(1.04); } .wow-ct-imgcard .elementor-image-box-content { padding: 14px 18px 18px; text-align: left; } .wow-ct-imgcard .elementor-image-box-title { margin: 0 0 6px; color: var(--wow-navy); font: 600 1.06rem/1.35 var(--wow-font-head); } .wow-ct-imgcard .elementor-image-box-title a { color: inherit; text-decoration: none; } .wow-ct-imgcard .elementor-image-box-description { margin: 0; color: var(--wow-muted); font-size: .92rem; line-height: 1.55; } .wow-ct-mini .elementor-image-box-wrapper { flex-direction: row; align-items: center; } .wow-ct-mini .elementor-image-box-img { flex: 0 0 42%; width: 42% !important; } .wow-ct-mini .elementor-image-box-img img { aspect-ratio: 4 / 3; } .wow-ct-mini .elementor-image-box-content { padding: 10px 14px; } .wow-ct-mini .elementor-image-box-title { font-size: .98rem; } .wow-ct-mini .elementor-image-box-title a::after { content: " →"; color: var(--wow-primary); } .wow-ct-img img { display: block; } .wow-ct-tip .elementor-icon-box-title { font-size: 1rem; margin-bottom: 2px; } .wow-ct-tip .elementor-icon-box-wrapper { align-items: flex-start; } /* MICE steps: numbered badges and arrows between the steps. */ .wow-ct-steps .e-con-inner > .e-con, .wow-ct-steps > .e-con { counter-reset: wow-step; } .wow-ct-step { position: relative; counter-increment: wow-step; padding-top: 34px; } .wow-ct-step::before { content: counter(wow-step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--wow-primary); color: #fff; font: 600 .9rem/1 var(--wow-font-head); } @media (min-width: 1025px) { .e-con:has(> .wow-ct-step) + .e-con:has(> .wow-ct-step)::before { content: "→"; position: absolute; left: -16px; top: 62px; color: var(--wow-primary); font-size: 1.3rem; } .e-con:has(> .wow-ct-step) { position: relative; } } .wow-ct-quote .elementor-icon { color: var(--wow-primary); } .wow-ct-note { padding: 16px 18px; border: 1px dashed var(--wow-primary); border-radius: var(--wow-radius); background: var(--wow-sky-soft); color: var(--wow-text); } .wow-ct-note p { margin: 0 0 6px; } .wow-ct-prose h2 { margin: 1.6em 0 .5em; color: var(--wow-navy); font: 700 var(--wow-fs-h3)/1.3 var(--wow-font-head); } .wow-ct-prose h2:first-child { margin-top: 0; } .wow-ct-prose h3 { margin: 1.3em 0 .4em; color: var(--wow-navy); font: 600 var(--wow-fs-h4)/1.35 var(--wow-font-head); } .wow-ct-prose p, .wow-ct-prose li { line-height: 1.8; } .wow-ct-faq .elementor-toggle-item { margin-bottom: 10px; border: 1px solid var(--wow-line); border-radius: 14px; background: #fff; overflow: hidden; } .wow-ct-faq .elementor-tab-title { border: 0 !important; padding: 14px 18px; } .wow-ct-faq .elementor-tab-content { border: 0 !important; padding: 0 18px 16px; } .wow-ct-form .elementor-field-group .elementor-field { min-height: 46px; } body[class*="elementor-kit-"] .wow-ct-imgcard .elementor-image-box-img img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; } body[class*="elementor-kit-"] .wow-ct-mini .elementor-image-box-img img { aspect-ratio: 4 / 3; } body[class*="elementor-kit-"] .wow-ct-img img { object-fit: cover; } /* WOW แผนที่ปักหมุด */ .wow-pinmap__frame { position: relative; height: 420px; border-radius: var(--wow-radius-lg); overflow: hidden; box-shadow: var(--wow-shadow); } .wow-pinmap__map.wow-map { height: 100%; border-radius: inherit; box-shadow: none; } .wow-pinmap__map .wow-map__canvas { width: 100%; height: 100%; } .wow-pinmap__gmaps { position: absolute; top: 14px; right: 14px; z-index: 500; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: #fff; box-shadow: var(--wow-shadow); color: var(--wow-navy); font: 500 .88rem/1.2 var(--wow-font); text-decoration: none; } .wow-pinmap__gmaps:hover { color: var(--wow-primary); } .wow-pinmap__gmaps .wow-icon { width: 16px; height: 16px; color: var(--wow-primary); } .wow-pinmap__note { position: absolute; right: 14px; bottom: 14px; z-index: 500; width: min(300px, calc(100% - 28px)); padding: 14px 16px; border-radius: var(--wow-radius); background: rgba(255, 255, 255, .96); box-shadow: var(--wow-shadow); font-size: .88rem; } .wow-pinmap--route .wow-pinmap__note { top: 64px; bottom: auto; } .wow-pinmap__note-title { margin: 0 0 8px; color: var(--wow-navy); font: 600 .95rem/1.3 var(--wow-font-head); } .wow-pinmap__note ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .wow-pinmap__note li { display: flex; flex-direction: column; padding-left: 16px; position: relative; color: var(--wow-text); } .wow-pinmap__note li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--wow-primary); } .wow-pinmap__note strong { color: var(--wow-muted); font-weight: 400; font-size: .84rem; } .wow-pinmap__route { stroke: var(--wow-primary); } .wow-pinmap__route-halo { stroke: #fff; stroke-opacity: .85; } .leaflet-tooltip.wow-pinmap__label { padding: 4px 10px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(15, 46, 92, .18); color: var(--wow-navy); font: 600 .8rem/1.3 var(--wow-font); white-space: nowrap; } .leaflet-tooltip.wow-pinmap__label::before { display: none; } @media (max-width: 767px) { .wow-pinmap__frame { height: auto; overflow: visible; box-shadow: none; } .wow-pinmap__map.wow-map { height: 320px; box-shadow: var(--wow-shadow); } .wow-pinmap__note, .wow-pinmap--route .wow-pinmap__note { position: static; width: auto; margin-top: 12px; box-shadow: none; border: 1px solid var(--wow-line); } .leaflet-tooltip.wow-pinmap__label { font-size: .72rem; padding: 3px 8px; } } body[class*="elementor-kit-"] .wow-pinmap__gmaps { text-decoration: none; } /* v1.6 "ยืดให้เต็มความสูง" (pin map / contact list): an Elementor row stretches its columns to the * same height; the widget, its wrapper and the map (or list) grow into that height. The set map * height stays the minimum. Without :has() support nothing grows (the v1.5 look). */ .e-con > .elementor-widget:has(> .elementor-widget-container > :is(.wow-pinmap--fill, .wow-contact--fill)), .e-con > .elementor-widget:has(> :is(.wow-pinmap--fill, .wow-contact--fill)), .e-con-inner > .elementor-widget:has(> .elementor-widget-container > :is(.wow-pinmap--fill, .wow-contact--fill)), .e-con-inner > .elementor-widget:has(> :is(.wow-pinmap--fill, .wow-contact--fill)), .elementor-widget > .elementor-widget-container:has(> :is(.wow-pinmap--fill, .wow-contact--fill)) { display: flex; flex-direction: column; flex-grow: 1; --flex-grow: 1; } .wow-pinmap--fill, .wow-contact--fill { display: flex; flex-direction: column; flex-grow: 1; } /* The block's own bottom margin is empty space at the end of an Elementor container (its padding * and gap already space the widgets), and it kept a filled map/list short of the column bottom. */ :is(.e-con, .e-con-inner) > .elementor-widget:last-child > .elementor-widget-container > .wow-block:last-child, :is(.e-con, .e-con-inner) > .elementor-widget:last-child > .wow-block:last-child, .wow-pinmap--fill, .wow-contact--fill { margin-bottom: 0; } .wow-pinmap--fill .wow-pinmap__frame { display: flex; flex-direction: column; flex-grow: 1; } .wow-pinmap--fill .wow-pinmap__map.wow-map { flex-grow: 1; height: auto; min-height: 0; } .wow-contact--fill .wow-contact__list { display: flex; flex-direction: column; flex-grow: 1; } .wow-contact--fill .wow-contact__row { flex-grow: 1; } .wow-contact--grid.wow-contact--fill .wow-contact__list { display: grid; align-content: stretch; } @media (max-width: 767px) { .wow-pinmap--fill .wow-pinmap__frame { flex-grow: 0; } .wow-pinmap--fill .wow-pinmap__map.wow-map { flex: none; height: 320px; } } /* WOW ช่องทางติดต่อ */ .wow-contact .wow-section-head { margin-bottom: 10px; } .wow-contact__list { margin: 0; padding: 0; list-style: none; } .wow-contact__row { display: grid; grid-template-columns: 44px minmax(84px, 120px) minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--wow-line); } .wow-contact__row:last-child { border-bottom: 0; } .wow-contact__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--wow-sky-soft); color: var(--wow-primary); } .wow-contact__icon .wow-icon { width: 20px; height: 20px; } .wow-contact__label { color: var(--wow-navy); font: 600 .98rem/1.35 var(--wow-font-head); } .wow-contact__value { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--wow-text); font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; } .wow-contact__value small { color: var(--wow-muted); font-size: .82rem; } .wow-contact__value a { color: inherit; text-decoration: none; } .wow-contact__value a:hover { color: var(--wow-primary); } .wow-contact__value .wow-social { justify-content: flex-start; margin: 0; gap: 8px; } .wow-contact__value .wow-social__link { width: 36px; height: 36px; } .wow-contact--grid .wow-contact__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .wow-contact--grid .wow-contact__row { grid-template-columns: 44px minmax(0, 1fr); align-content: start; padding: 16px; border: 1px solid var(--wow-line); border-radius: var(--wow-radius); background: #fff; } .wow-contact--grid .wow-contact__icon { grid-row: span 2; } @media (max-width: 480px) { .wow-contact__row { grid-template-columns: 40px minmax(0, 1fr); } .wow-contact__icon { grid-row: span 2; width: 40px; height: 40px; } } body[class*="elementor-kit-"] .wow-contact__value a { text-decoration: none; } /* WOW สารบัญ */ .wow-toc { --wow-toc-top: calc(var(--wow-header-h) + 16px); } .wow-toc:not(.is-ready) .wow-toc__list:empty { display: none; } .wow-toc:not(.is-empty) .wow-toc__empty, .wow-toc.is-ready .wow-toc__empty { display: none; } .wow-toc__empty { margin: 8px 0 0; color: var(--wow-muted); font-size: .85rem; } .wow-toc__box { padding: 18px 18px 14px; border: 1px solid var(--wow-line); border-radius: var(--wow-radius-lg); background: #fff; box-shadow: var(--wow-shadow); } .wow-toc__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--wow-navy); font: 600 1.05rem/1.3 var(--wow-font-head); cursor: pointer; list-style: none; } .wow-toc__title::-webkit-details-marker { display: none; } .wow-toc__title .wow-icon { width: 18px; height: 18px; color: var(--wow-muted); transition: transform .2s; } .wow-toc__box[open] .wow-toc__title .wow-icon { transform: rotate(180deg); } .wow-toc__list { position: relative; margin: 12px 0 0; padding: 0 0 0 4px; list-style: none; counter-reset: wow-toc; } .wow-toc__list::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--wow-line); } .wow-toc__item { position: relative; margin: 0; padding: 0; } .wow-toc__link { position: relative; display: block; padding: 7px 10px 7px 22px; border-radius: 10px; color: var(--wow-muted); font-size: .92rem; line-height: 1.45; text-decoration: none; transition: background .2s, color .2s; } .wow-toc__link::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #c9d6e6; transition: background .2s, box-shadow .2s; } .wow-toc__item.is-sub .wow-toc__link { padding-left: 36px; font-size: .86rem; } .wow-toc__link:hover { color: var(--wow-primary); } .wow-toc__link.is-active { background: var(--wow-sky-soft); color: var(--wow-primary); font-weight: 600; } .wow-toc__link.is-active::before { background: var(--wow-primary); box-shadow: 0 0 0 4px rgba(10, 108, 219, .18); } /* v1.5 numbered TOC: "01" in a soft circle, the item being read filled (designs/privacy-policy.png). */ .wow-toc.is-numbered .wow-toc__list { display: grid; gap: 4px; padding-left: 0; } .wow-toc.is-numbered .wow-toc__list::before { display: none; } .wow-toc.is-numbered .wow-toc__item:not(.is-sub) { counter-increment: wow-toc; } .wow-toc.is-numbered .wow-toc__link { padding: 9px 12px 9px 52px; color: var(--wow-navy); } .wow-toc.is-numbered .wow-toc__item:not(.is-sub) > .wow-toc__link { display: flex; align-items: center; min-height: 46px; box-sizing: border-box; } .wow-toc.is-numbered .wow-toc__item:not(.is-sub) > .wow-toc__link::before { content: counter(wow-toc, decimal-leading-zero); left: 10px; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; color: var(--wow-primary); background: #e3effc; box-shadow: none; font: 600 .78rem/1 var(--wow-font); } .wow-toc.is-numbered .wow-toc__item:not(.is-sub) > .wow-toc__link:hover::before { background: #d3e6fb; } .wow-toc.is-numbered .wow-toc__item:not(.is-sub) > .wow-toc__link.is-active::before { color: #fff; background: var(--wow-primary); box-shadow: 0 4px 10px rgba(10, 108, 219, .28); } .wow-toc.is-numbered .wow-toc__link.is-active { color: var(--wow-navy); } .wow-toc.is-numbered .wow-toc__item.is-sub .wow-toc__link { padding-left: 52px; } .wow-toc.is-numbered .wow-toc__item.is-sub .wow-toc__link::before { left: 36px; width: 6px; height: 6px; margin-top: -3px; } @media (min-width: 1025px) { .wow-toc.is-sticky { position: sticky; top: var(--wow-toc-top); } .admin-bar .wow-toc.is-sticky { top: calc(var(--wow-toc-top) + 32px); } .elementor-widget.wow-toc-host { flex-grow: 1; align-self: stretch; } .elementor-widget.wow-toc-host > .elementor-widget-container { height: 100%; } } @media (max-width: 1024px) { .wow-toc__box { padding: 14px 16px; box-shadow: none; } .wow-toc__box:not([open]) .wow-toc__list { display: none; } } :target { scroll-margin-top: calc(var(--wow-header-h) + 16px); } body[class*="elementor-kit-"] .wow-toc__link { text-decoration: none; } /* v1.4 WOW สภาพอากาศ: layouts (vertical / horizontal / compact / auto) ------- The --wx-* variables come from wow_weather_layouts() (includes/weather.php), printed with the card; "auto" uses the width classes (wow-wx--lt200/lt280/lt480/ge560) set by wow_weather_sizer_js() - no container queries (they break Elementor flex sizing). */ .wow-wx { width: 100%; min-width: 0; } :where(.wow-wx) .wow-weather { position: relative; isolation: isolate; display: grid; grid-template-columns: var(--wx-cols, minmax(0, 1fr)); grid-template-areas: var(--wx-areas, "main" "days" "more"); column-gap: var(--wx-gap, 0px); align-items: start; overflow: hidden; padding: var(--wx-pad, 22px); border-radius: var(--wow-radius-lg); background: linear-gradient(140deg, #0a6cdb 0%, #2f8ee8 55%, #56b3f2 100%); color: #fff; box-shadow: var(--wow-shadow); } :where(.wow-wx) .wow-weather::before { content: ""; position: absolute; z-index: -1; top: -70px; right: -50px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; } :where(.wow-wx) .wow-weather p { margin: 0; } .wow-weather__main { grid-area: main; display: flex; flex-direction: var(--wx-main, column); flex-wrap: wrap; align-items: var(--wx-main-ai, flex-start); gap: 10px 14px; min-width: 0; } :where(.wow-wx) .wow-weather__place { flex: 0 0 100%; color: inherit; font-size: .88rem; font-weight: 600; letter-spacing: .01em; opacity: .92; } :where(.wow-wx) .wow-weather__now { display: flex; align-items: center; gap: 12px; min-width: 0; } :where(.wow-wx) .wow-weather__icon { display: inline-flex; flex: none; } :where(.wow-wx) .wow-weather__icon .wow-icon { width: var(--wx-icon, 60px); height: var(--wx-icon, 60px); color: var(--wow-yellow); filter: drop-shadow(0 4px 10px rgba(8, 40, 90, .25)); } :where(.wow-wx) .wow-weather__temp { display: grid; gap: 2px; font: inherit; } .wow-weather__deg { font: 700 var(--wx-temp, 2.75rem)/1 var(--wow-font-head); letter-spacing: -.02em; } :where(.wow-wx) .wow-weather__temp small { font: 400 .92rem/1.3 var(--wow-font); opacity: .92; } :where(.wow-wx) .wow-weather__extra { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0 var(--wx-extra-ml, 0); padding: 0; list-style: none; font-size: .8rem; opacity: 1; } :where(.wow-wx) .wow-weather__extra li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .16); white-space: nowrap; } :where(.wow-wx) .wow-weather__extra li > span { display: var(--wx-xlabel, inline); opacity: .85; } :where(.wow-wx) .wow-weather__extra b { font-weight: 600; } :where(.wow-wx) .wow-weather__extra .wow-icon { width: 14px; height: 14px; } :where(.wow-wx) .wow-weather__days { grid-area: days; align-self: center; display: grid; grid-template-columns: var(--wx-days, minmax(0, 1fr)); gap: var(--wx-day-gap, 0px); min-width: 0; margin: var(--wx-days-mt, 14px) 0 0; padding: var(--wx-days-pad, 12px 0 0); list-style: none; border: 0 solid rgba(255, 255, 255, .24); border-width: var(--wx-days-bw, 1px 0 0 0); } :where(.wow-wx) .wow-weather__days li { display: grid; grid-auto-flow: row dense; align-content: start; grid-template-columns: var(--wx-day, 3.6em 26px minmax(0, 1fr) auto); justify-items: var(--wx-day-ji, start); justify-content: center; align-items: center; gap: 4px 8px; min-width: 0; padding: var(--wx-day-pad, 7px 2px); border-radius: 12px; background: var(--wx-day-bg, transparent); border-bottom: var(--wx-day-line, 1px) solid rgba(255, 255, 255, .16); font-size: .85rem; text-align: center; } :where(.wow-wx) .wow-weather__days li:last-child { border-bottom-width: 0; } :where(.wow-wx) .wow-weather__days .wow-icon { width: var(--wx-dicon, 24px); height: var(--wx-dicon, 24px); } :where(.wow-wx) .wow-weather__day { font-weight: 600; white-space: nowrap; } :where(.wow-wx) .wow-weather__range { grid-column: var(--wx-range-col, auto); justify-self: var(--wx-range-js, end); white-space: nowrap; } :where(.wow-wx) .wow-weather__range b { font-weight: 700; } :where(.wow-wx) .wow-weather__range span { display: var(--wx-min, inline); margin-left: 3px; opacity: .72; } :where(.wow-wx) .wow-weather__rain { grid-column: var(--wx-rain-col, auto); display: var(--wx-rain, inline-flex); align-items: center; gap: 3px; color: #d9eeff; font-size: .75rem; opacity: 1; } :where(.wow-wx) .wow-weather__rain .wow-icon { width: 12px; height: 12px; } .wow-weather__foot { grid-area: more; align-self: end; margin-top: 14px; } :where(.wow-wx) a.wow-weather__more { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: .82rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background .2s, gap .2s; } :where(.wow-wx) a.wow-weather__more:hover, :where(.wow-wx) a.wow-weather__more:focus-visible { gap: 9px; background: rgba(255, 255, 255, .28); color: #fff; } :where(.wow-wx) a.wow-weather__more .wow-icon { width: 14px; height: 14px; } :where(.wow-wx--lt200) .wow-weather { padding: 12px; } :where(.wow-wx--lt200) .wow-weather__now { flex-wrap: wrap; gap: 6px; } :where(.wow-wx--lt200) .wow-weather__extra { margin-left: 0; } :where(.wow-wx--lt200) .wow-weather__extra li { padding: 4px 8px; } :where(.wow-wx--lt200) a.wow-weather__more { padding: 6px 10px; } /* Empty / failed state */ :where(.wow-wx) .wow-weather--empty { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px dashed #c4d8f2; background: linear-gradient(140deg, #f2f8ff 0%, #f8fbff 100%); color: var(--wow-muted); box-shadow: none; } :where(.wow-wx) .wow-weather--empty::before { display: none; } :where(.wow-wx) .wow-weather--empty .wow-weather__icon .wow-icon { width: 44px; height: 44px; color: #93b8e6; filter: none; } .wow-weather__emptytext { display: grid; gap: 3px; min-width: 0; } :where(.wow-wx) .wow-weather--empty .wow-weather__place { color: var(--wow-navy); font-size: .82rem; opacity: .8; } :where(.wow-wx) .wow-weather__msg { color: var(--wow-navy); font-weight: 600; } .wow-weather__emptytext small { font-size: .82rem; } :where(.wow-wx) .wow-weather--empty a.wow-weather__more { justify-self: start; margin-top: 6px; border: 1px solid var(--wow-line); background: #fff; color: var(--wow-primary); } :where(.wow-wx) .wow-weather--empty a.wow-weather__more:hover { background: var(--wow-sky-soft); color: var(--wow-primary); } :where(.wow-wx--lt280) .wow-weather--empty { flex-direction: column; align-items: flex-start; } body[class*="elementor-kit-"] .wow-wx a.wow-weather__more { color: #fff; text-decoration: none; } body[class*="elementor-kit-"] .wow-wx .wow-weather--empty a.wow-weather__more { color: var(--wow-primary); } /* ========================================================================== * v1.4 — Profile card (avatar crop), shop logo, Google Maps links * ========================================================================== */ .wow-profile { align-items: flex-start; padding: 22px; border: 1px solid var(--wow-line); border-radius: var(--wow-radius-lg); background: linear-gradient(135deg, #fff 0%, var(--wow-bg-soft) 100%); box-shadow: var(--wow-shadow); } .wow-profile__photo { position: relative; flex: 0 0 auto; } .wow-profile__avatar { display: block; width: 96px; height: 96px; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: var(--wow-sky-soft); box-shadow: 0 4px 14px rgba(15, 46, 92, .15); } .wow-profile .wow-profile__avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .wow-profile__cam { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #fff; border-radius: 50%; background: var(--wow-primary); color: #fff; cursor: pointer; transition: background .2s; } .wow-profile__cam:hover { background: var(--wow-primary-dark); } .wow-profile__cam .wow-icon { width: 16px; height: 16px; } .wow-profile__body { flex: 1 1 320px; min-width: 0; } .wow-account__hello .wow-profile__name { margin: 0; overflow-wrap: anywhere; } .wow-form.wow-profile__nameform { display: block; margin: 12px 0 0; } .wow-form.wow-profile__nameform input[type="text"] { min-height: 38px; padding: 6px 14px; } .wow-profile__nameform .wow-field__label { display: block; margin-bottom: 4px; font-size: .85rem; } .wow-profile__namerow { display: flex; gap: 8px; max-width: 460px; } .wow-profile__namerow input { flex: 1 1 auto; min-width: 0; min-height: 36px; } .wow-profile__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; } .wow-profile__actions .wow-help { flex-basis: 100%; margin: 0; font-size: .82rem; } .wow-profile__actions .wow-google-status__g { width: 18px; height: 18px; margin-right: 2px; font-size: .7rem; } .wow-profile__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .wow-profile__file:focus-visible + label { outline: 2px solid var(--wow-primary); outline-offset: 2px; } .wow-account__hello.wow-profile .wow-btn { margin-left: 0; } .wow-account__hello.wow-profile .wow-profile__logout { margin-left: auto; } @media (max-width: 640px) { .wow-account__hello.wow-profile { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 14px; padding: 18px 16px; } .wow-profile__photo { grid-row: 1 / span 2; align-self: start; } .wow-profile__avatar { width: 80px; height: 80px; } .wow-profile__body { display: contents; } .wow-profile__name, .wow-profile__role, .wow-profile .wow-google-status { grid-column: 2; } .wow-account__hello .wow-profile__name { align-self: end; font-size: 1.25rem; } .wow-profile__nameform, .wow-profile__actions { grid-column: 1 / -1; } .wow-account__hello.wow-profile .wow-profile__logout { grid-column: 1 / -1; margin: 14px 0 0; width: 100%; } .wow-profile__namerow { max-width: none; } } .wow-cropper { width: min(400px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--wow-radius-lg); box-shadow: var(--wow-shadow-lg); } .wow-cropper::backdrop { background: rgba(15, 46, 92, .55); } .wow-cropper__box { margin: 0; padding: 20px; } .wow-cropper__box h3 { margin: 0 0 4px; color: var(--wow-navy); font: 700 1.2rem var(--wow-font-head); } .wow-cropper__stage { margin: 12px auto; width: min(280px, 100%); aspect-ratio: 1; border-radius: var(--wow-radius); overflow: hidden; background: #0f2e5c; } .wow-cropper__stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; } .wow-cropper__stage canvas.is-dragging { cursor: grabbing; } .wow-cropper__stage canvas:focus-visible { outline: 3px solid var(--wow-yellow); outline-offset: -3px; } .wow-cropper__zoom { display: flex; align-items: center; gap: 10px; color: var(--wow-muted); } .wow-cropper__zoom input { flex: 1; accent-color: var(--wow-primary); } .wow-cropper__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .wow-vendor__avatar { flex: 0 0 auto; align-self: center; } .wow-vendor .wow-vendor__avatar img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .wow-vendor__who { flex: 1 1 auto; min-width: 0; } /* Shop logo */ .wow-logo { display: inline-grid; flex: 0 0 auto; place-items: center; width: var(--wow-logo-size, 64px); height: var(--wow-logo-size, 64px); overflow: hidden; border: 1px solid var(--wow-line); border-radius: var(--wow-radius); background: #fff; box-shadow: 0 2px 8px rgba(15, 46, 92, .06); } .wow-logo img { display: block; width: 100%; height: 100%; object-fit: contain; } .wow-place-header__brand { display: flex; align-items: center; gap: 14px; } .wow-place-header__brand .wow-place-header__title { min-width: 0; } .wow-info-card { --wow-logo-size: 48px; } .wow-info-card__brand { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding-bottom: 14px; border-bottom: 1px solid var(--wow-line); color: var(--wow-navy); font: 600 1.02rem/1.3 var(--wow-font-head); } @media (max-width: 640px) { .wow-place-header__brand { --wow-logo-size: 52px; gap: 10px; } } .wow-field--logo .wow-upload--logo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .wow-upload__logo { display: grid; place-items: center; width: 88px; height: 88px; overflow: hidden; border: 1px dashed #c9d6e6; border-radius: var(--wow-radius); background: var(--wow-bg-soft); color: var(--wow-muted); } .wow-upload__logo img { width: 100%; height: 100%; object-fit: contain; } .wow-upload__logo .wow-icon { width: 28px; height: 28px; } body[class*="elementor-kit-"] .wow-profile__avatar img, body[class*="elementor-kit-"] .wow-vendor__avatar img { width: 100%; height: 100%; max-width: none; border-radius: 50%; object-fit: cover; } body[class*="elementor-kit-"] .wow-vendor__avatar img { width: 56px; height: 56px; } body[class*="elementor-kit-"] .wow-logo img, body[class*="elementor-kit-"] .wow-upload__logo img { width: 100%; height: 100%; max-width: none; object-fit: contain; } body[class*="elementor-kit-"] .wow-cropper canvas { max-width: none; height: 100%; } /* v1.4: section heads, "ดูทั้งหมด" pill, category tiles + counts, essentials ---- * Eyebrow: bold, small, wide tracking. "ดูทั้งหมด" (and other text links that act * as buttons) is a light-blue pill with an arrow. The --wow-more-* variables are * set per device by the widgets' Style tab (wow_el_more_dict()). */ .wow-eyebrow--head { margin: 0 0 6px; color: var(--wow-primary); font: 700 .78rem/1.3 var(--wow-font); letter-spacing: .14em; text-transform: uppercase; } .wow-more-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; width: var(--wow-more-w, auto); min-height: 36px; margin-bottom: .2em; padding: var(--wow-more-pad, 7px 10px 7px 16px); box-sizing: border-box; border-radius: 999px; background: var(--wow-more-bg, var(--wow-sky-soft)); color: var(--wow-primary); font: 600 .9rem/1.2 var(--wow-font); text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; } .wow-more-pill .wow-icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #fff; color: var(--wow-primary); box-sizing: border-box; vertical-align: 0; transition: transform .2s; } .wow-more-pill:hover, .wow-more-pill:focus-visible { background: var(--wow-more-hbg, var(--wow-primary)); color: var(--wow-more-hc, #fff); text-decoration: none; } .wow-more-pill:hover .wow-icon { transform: translateX(2px); } .wow-more-pill:focus-visible { outline: 3px solid var(--wow-yellow); outline-offset: 2px; } .wow-more-pill__text { position: var(--wow-more-text, static); clip-path: var(--wow-more-clip, none); } .wow-more-pill--sm { min-height: 30px; padding: 4px 5px 4px 12px; font-size: .8rem; } .wow-more-pill--sm .wow-icon { width: 20px; height: 20px; } .wow-side-box__head .wow-more-pill { font-size: .8rem; } @media (max-width: 600px) { .wow-section-head { flex-direction: column; align-items: flex-start; gap: 10px; } .wow-section-head > .wow-more-pill { min-height: 32px; font-size: .85rem; } } @media (prefers-reduced-motion: reduce) { .wow-more-pill, .wow-more-pill .wow-icon { transition: none; } } body[class*="elementor-kit-"] .wow-more-pill { color: var(--wow-primary); text-decoration: none; } body[class*="elementor-kit-"] .wow-more-pill:is(:hover, :focus-visible) { color: var(--wow-more-hc, #fff); } /* Category tiles: N types fill rows evenly (one row up to 8; the last row stretches). */ .wow-tiles { --_g: var(--wow-tiles-gap, 14px); --_c: var(--wow-tiles-cols, var(--wow-tiles-d, 6)); --_ar: var(--wow-tiles-ar, .75); display: flex; flex-wrap: wrap; gap: var(--_g); } .wow-tile { flex: 0 0 calc((100% - (var(--_c) - 1) * var(--_g)) / var(--_c)); min-width: 0; } .wow-tiles.is-fill .wow-tile { flex-grow: 1; } /* v1.7: tiles have a real in-flow height (the v1.6 percentage padding-top on the li and the * absolutely positioned link let Elementor 4 containers count only some of the rows on phones, * so the next section covered the last row). Each li is a flex row: a hidden ::before box as wide * as a normal (unstretched) tile carries the height (aspect-ratio, or the fixed height from * Style → รูปภาพ via --wow-tiles-h) and takes no width (negative margin); the link fills the li. * A tile of a stretched last row gets --wow-tile-rN = k / c from the template (k tiles in that row, * c columns; N = screen range): a normal tile is r × (its width + gap) − gap wide. The image and * the shade are decoration on top; the text is in the flow, so a long text makes the tile taller * instead of spilling out. */ .wow-tile { --_r: var(--wow-tile-r1, 1); position: relative; display: flex; box-sizing: border-box; padding-top: 0 !important; } .wow-tile::before { content: ""; flex: 0 0 auto; width: calc((100% + var(--_g)) * var(--_r) - var(--_g)); margin-inline-end: calc(var(--_g) - (100% + var(--_g)) * var(--_r)); height: var(--wow-tiles-h, auto); aspect-ratio: var(--_ar); visibility: hidden; pointer-events: none; } .wow-tile > a { position: relative; inset: auto; display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-end; min-width: 0; } .wow-tile__text { position: relative; inset: auto; } @media (max-width: 1024px) { .wow-tile { --_r: var(--wow-tile-r2, 1); } } @media (max-width: 767px) { .wow-tile { --_r: var(--wow-tile-r3, 1); } } @media (max-width: 600px) { .wow-tile { --_r: var(--wow-tile-r4, 1); } } /* The link always fills the li: Elementor CSS cached from v1.5 (ratio / height on the link) must not * change it; until that CSS is regenerated the tile keeps the default size. */ .wow-tile > a { height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; } .wow-tile__text small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .wow-tile .wow-count { font-weight: 500; font-size: .85em; opacity: .85; white-space: nowrap; } .wow-tile__count { align-self: flex-start; margin-top: 2px; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .22); font: 500 .75rem/1.4 var(--wow-font); } @media (max-width: 1024px) { .wow-tiles { --_c: var(--wow-tiles-cols, min(4, var(--wow-tiles-n, 4))); } } @media (max-width: 600px) { .wow-tiles { --_c: var(--wow-tiles-cols, min(2, var(--wow-tiles-n, 2))); --_ar: var(--wow-tiles-ar, 1.33); } } .wow-chip .wow-count { color: var(--wow-muted); font-weight: 400; } .wow-tab .wow-count { font-size: .85em; opacity: .75; } /* Essentials: any number of items. */ .wow-essentials__list { grid-template-columns: repeat(var(--ess-n, 4), minmax(0, 1fr)); } div.wow-essential:hover { box-shadow: none; } @media (max-width: 1024px) { .wow-essentials__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .wow-essentials__list { grid-template-columns: 1fr; } } /* v1.6: narrow boxes (Elementor columns, side content) pick a layout instead of a container query: * class wow-essentials--two / --one (shortcode "layout") or the widget's per-device "การจัดวาง" * (sets --ess-head / --ess-cols from the presets below). */ .wow-essentials { --ess-head-wide: minmax(0, 250px) 1fr; --ess-cols-wide: repeat(var(--ess-n, 4), minmax(0, 1fr)); --ess-auto: repeat(auto-fit, minmax(max(min(100%, 210px), calc((100% - (var(--ess-n, 4) - 1) * 14px) / var(--ess-n, 4))), 1fr)); --ess-head-two: 1fr; --ess-cols-two: repeat(2, minmax(0, 1fr)); --ess-head-one: 1fr; --ess-cols-one: 1fr; } .wow-essentials--two { --ess-head: var(--ess-head-two); --ess-cols: var(--ess-cols-two); } .wow-essentials--one { --ess-head: var(--ess-head-one); --ess-cols: var(--ess-cols-one); } .wow-essentials .wow-essentials__inner { grid-template-columns: var(--ess-head, minmax(0, 250px) 1fr); } /* Auto: up to --ess-n per row, fewer when the box is too narrow for 210px items. */ .wow-essentials .wow-essentials__list { grid-template-columns: var(--ess-cols, var(--ess-auto)); } @media (max-width: 1024px) { .wow-essentials .wow-essentials__inner { grid-template-columns: var(--ess-head, 1fr); } .wow-essentials .wow-essentials__list { grid-template-columns: var(--ess-cols, repeat(2, minmax(0, 1fr))); } } @media (max-width: 600px) { .wow-essentials .wow-essentials__list { grid-template-columns: var(--ess-cols, 1fr); } } /* Content page templates use the same eyebrow (Typography set in the widget still wins). */ .wow-eyebrow-style .elementor-heading-title, .elementor-widget.wow-eyebrow-style .elementor-heading-title { margin: 0; color: var(--wow-primary); font: 700 .78rem/1.3 var(--wow-font); letter-spacing: .14em; text-transform: uppercase; } /* v1.4 WOW ปฏิทินกิจกรรม: category dots, hover popover, bottom sheet (assets/js/wow-calendar.js) */ .wow-calendar__dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--wow-primary)); } .wow-calendar .wow-filter .wow-calendar__dot { margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); } .wow-calendar__head { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; } .wow-calendar__dots { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; min-width: 0; padding-right: 2px; } button.wow-calendar__day { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; } button.wow-calendar__day:hover { background: var(--wow-sky-soft); color: var(--wow-primary); } .wow-calendar__cell.is-today button.wow-calendar__day:hover { background: var(--wow-primary-dark); color: #fff; } button.wow-calendar__day:focus-visible, button.wow-calendar__more:focus-visible, .wow-calendar__event:focus-visible { outline: 3px solid var(--wow-yellow); outline-offset: 1px; } .wow-calendar__cell.has-events { background: linear-gradient(180deg, #fff 0%, #fbfdff 100%); } .wow-calendar__event { position: relative; padding-left: 10px; background: color-mix(in srgb, var(--c, var(--wow-primary)) 12%, #fff); color: var(--wow-navy); font-weight: 500; transition: background .15s, color .15s; } .wow-calendar__event::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: 3px; border-radius: 3px; background: var(--c, var(--wow-primary)); } .wow-calendar__event:hover, .wow-calendar__event[aria-expanded="true"] { background: var(--c, var(--wow-primary)); color: #fff; } .wow-calendar__event:hover::before, .wow-calendar__event[aria-expanded="true"]::before { background: rgba(255, 255, 255, .7); } button.wow-calendar__more { align-self: flex-start; padding: 1px 8px; border: 0; border-radius: 999px; background: var(--wow-bg-soft); color: var(--wow-primary); font: 600 .74rem/1.6 var(--wow-font); cursor: pointer; } button.wow-calendar__more:hover, button.wow-calendar__more[aria-expanded="true"] { background: var(--wow-primary); color: #fff; } .wow-calendar__empty { margin: 16px 0 0; color: var(--wow-muted); text-align: center; } /* Popover */ .wow-calpop { position: fixed; z-index: 100050; display: flex; flex-direction: column; overflow: hidden; width: 340px; max-height: min(460px, calc(100vh - 16px)); border: 1px solid var(--wow-line); border-radius: var(--wow-radius); background: #fff; color: var(--wow-text); box-shadow: 0 18px 48px rgba(15, 46, 92, .22); text-align: left; animation: wow-calpop-in .12s ease-out; } @keyframes wow-calpop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .wow-calpop.is-above { animation-name: wow-calpop-up; } @keyframes wow-calpop-up { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .wow-calpop__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--wow-line); background: var(--wow-bg-soft); } .wow-calpop__date { flex: 1; min-width: 0; color: var(--wow-navy); font: 600 .9rem/1.3 var(--wow-font-head); } .wow-calpop__count { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--wow-sky-soft); color: var(--wow-primary); font-size: .74rem; font-weight: 600; } .wow-calpop__list { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; padding: 6px; } .wow-calpop.is-single .wow-calpop__head { display: none; } .wow-calpop.is-single .wow-calpop__list { padding: 0; } .wow-calev { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 8px; border-radius: var(--wow-radius-sm); } .wow-calev + .wow-calev { margin-top: 2px; } .wow-calev.is-current { background: color-mix(in srgb, var(--c, var(--wow-primary)) 9%, #fff); box-shadow: inset 3px 0 0 var(--c, var(--wow-primary)); } .wow-calev__media { display: block; overflow: hidden; aspect-ratio: 1; border-radius: 10px; background: var(--wow-sky-soft); } .wow-calev__media img, .wow-calev__media .wow-placeholder { display: block; width: 100%; height: 100% !important; object-fit: cover; } .wow-calev__body { display: grid; align-content: start; gap: 4px; min-width: 0; } .wow-calev__cat { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--c, var(--wow-primary)) 80%, #000); font-size: .74rem; font-weight: 600; } .wow-calev__cat .wow-calendar__dot { width: 7px; height: 7px; } .wow-calendar .wow-calev__title, .wow-calev__title { margin: 0; color: var(--wow-navy); font: 600 .95rem/1.35 var(--wow-font-head); } .wow-calev__title a { color: inherit; text-decoration: none; } .wow-calev__title a:hover { color: var(--wow-primary); } .wow-calev__meta { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--wow-muted); font-size: .8rem; } .wow-calev__meta li { display: flex; align-items: flex-start; gap: 6px; min-width: 0; } .wow-calev__meta .wow-icon { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--wow-primary); } .wow-calev__actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .wow-calev__actions .wow-btn--sm { min-height: 32px; padding: 4px 12px; font-size: .82rem; } .wow-calev__actions .wow-btn .wow-icon { width: 15px; height: 15px; } .wow-calev .wow-fav { position: static; flex: none; width: 34px; height: 34px; border: 1px solid var(--wow-line); background: #fff; color: var(--wow-primary); backdrop-filter: none; } .wow-calev .wow-fav .wow-icon { width: 18px; height: 18px; filter: none; } .wow-calev .wow-fav:hover { transform: scale(1.06); background: var(--wow-sky-soft); } .wow-calev .wow-fav.is-saved { border-color: #fecdd3; background: #fff1f2; color: #e11d48; } /* One event: big image on top. */ .wow-calpop.is-single .wow-calev { grid-template-columns: 1fr; gap: 0; padding: 0; border-radius: 0; } .wow-calpop.is-single .wow-calev__media { aspect-ratio: 16 / 9; border-radius: 0; } .wow-calpop.is-single .wow-calev__body { padding: 12px 14px 14px; } .wow-calpop.is-single .wow-calev__title { font-size: 1.02rem; } /* Bottom sheet (touch) */ .wow-calsheet-backdrop { position: fixed; inset: 0; z-index: 100049; background: rgba(15, 30, 55, .45); opacity: 0; transition: opacity .2s; } .wow-calsheet-backdrop.is-open { opacity: 1; } .wow-calpop--sheet { inset: auto 0 0 0; width: auto !important; max-height: min(78vh, 640px); border: 0; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0); transform: translateY(100%); transition: transform .24s ease-out; animation: none; } .wow-calpop--sheet.is-open { transform: none; } .wow-calpop--sheet::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #cfd9e6; } .wow-calpop--sheet .wow-calpop__head, .wow-calpop--sheet.is-single .wow-calpop__head { display: flex; padding: 18px 12px 10px 18px; background: #fff; } .wow-calpop--sheet .wow-calpop__date { font-size: 1rem; } .wow-calpop--sheet .wow-calpop__list, .wow-calpop--sheet.is-single .wow-calpop__list { padding: 6px 10px 14px; } .wow-calpop--sheet .wow-calev, .wow-calpop--sheet.is-single .wow-calev { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 10px 8px; border-radius: var(--wow-radius-sm); } .wow-calpop--sheet .wow-calev + .wow-calev { border-top: 1px solid var(--wow-line); } .wow-calpop--sheet.is-single .wow-calev__media { aspect-ratio: 1; border-radius: 10px; } .wow-calpop--sheet.is-single .wow-calev__body { padding: 0; } .wow-calpop__close { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--wow-bg-soft); color: var(--wow-navy); cursor: pointer; } html.wow-calsheet-open, html.wow-calsheet-open body { overflow: hidden; } @media (max-width: 700px) { .wow-calendar__head { flex-direction: column; gap: 3px; } .wow-calendar__cell.has-events .wow-calendar__event, .wow-calendar__cell .wow-calendar__more { display: none; } .wow-calendar__dots { justify-content: center; padding: 0; gap: 2px; } .wow-calendar__dots .wow-calendar__dot { width: 6px; height: 6px; } .wow-calendar__cell.has-events { cursor: pointer; } .wow-calendar__cell.has-events:active { background: var(--wow-sky-soft); } .wow-calendar__day { width: 26px; height: 26px; font-size: .85rem; } } @media (prefers-reduced-motion: reduce) { .wow-calpop, .wow-calpop--sheet, .wow-calsheet-backdrop { animation: none; transition: none; } } body[class*="elementor-kit-"] button.wow-calendar__day { padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; font-size: .9rem; font-weight: 600; text-transform: none; box-shadow: none; } body[class*="elementor-kit-"] .wow-calendar__cell.is-today button.wow-calendar__day { background: var(--wow-primary); color: #fff; } body[class*="elementor-kit-"] button.wow-calendar__more { padding: 1px 8px; border: 0; border-radius: 999px; background: var(--wow-bg-soft); color: var(--wow-primary); font: 600 .74rem/1.6 var(--wow-font); text-transform: none; } body[class*="elementor-kit-"] .wow-calev button.wow-fav { position: static; width: 34px; height: 34px; border: 1px solid var(--wow-line); border-radius: 50%; background: #fff; color: var(--wow-primary); } body[class*="elementor-kit-"] .wow-calev button.wow-fav.is-saved { border-color: #fecdd3; background: #fff1f2; color: #e11d48; } body[class*="elementor-kit-"] button.wow-calpop__close { padding: 0; border: 0; border-radius: 50%; background: var(--wow-bg-soft); color: var(--wow-navy); } body[class*="elementor-kit-"] .wow-calev__media img { height: 100% !important; } /* v1.4 Map pin popups: "ดูรายละเอียด" + "นำทาง" (Google Maps) buttons, hover preview (wow-maps.js) */ .wow-popup { flex-wrap: wrap; } .wow-popup__body { flex: 1 1 120px; } .wow-popup__actions { display: flex; flex: 0 0 100%; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .wow-popup .wow-popup__actions a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 1 1 auto; min-height: 32px; margin: 0; padding: 5px 12px; border-radius: 999px; font: 600 .8rem/1.2 var(--wow-font); text-decoration: none; transition: background .15s, color .15s; } .wow-popup .wow-popup__view { border: 1px solid var(--wow-line); background: #fff; color: var(--wow-primary); } .wow-popup .wow-popup__view:hover { background: var(--wow-sky-soft); color: var(--wow-primary); } .wow-popup .wow-popup__dir { border: 1px solid var(--wow-primary); background: var(--wow-primary); color: #fff; } .wow-popup .wow-popup__dir:hover { background: var(--wow-primary-dark); color: #fff; } .wow-popup__dir .wow-icon { width: 14px; height: 14px; } .leaflet-container .wow-popup .wow-popup__dir, .leaflet-container .wow-popup .wow-popup__dir:hover { color: #fff; } body[class*="elementor-kit-"] .wow-popup .wow-popup__dir { color: #fff; text-decoration: none; } body[class*="elementor-kit-"] .wow-popup .wow-popup__view { color: var(--wow-primary); text-decoration: none; } /* v1.4 — shop logo on place cards */ .wow-card__logo { display: inline-flex; vertical-align: -6px; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--wow-line, #e3e8ef); } .wow-card__logo img, body[class*="elementor-kit-"] .wow-card__logo img { width: 100%; height: 100%; object-fit: cover; margin: 0; } /* v1.5 — MICE chip only in MICE contexts (templates/cards/place.php), revealed by `.wow-show-mice` on any ancestor */ .wow-card .wow-mice-only { display: none; } .wow-show-mice .wow-card .wow-mice-only { display: flex; } /* v1.5 — "WOW ข้อมูลสถานที่จัดงาน" (templates/sections/venue-info.php) */ .wow-venue-info { padding: clamp(18px, 2.5vw, 26px); border: 1px solid var(--wow-line); border-radius: var(--wow-radius-lg); background: #fff; box-shadow: 0 2px 10px rgba(15, 46, 92, .04); } .wow-venue-info .wow-section-head { margin-bottom: 16px; } .wow-venue-info__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .wow-venue-info__stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--wow-radius); background: var(--wow-bg-soft); } .wow-venue-info__icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--wow-primary); box-shadow: 0 2px 8px rgba(15, 46, 92, .08); } .wow-venue-info__icon .wow-icon { width: 22px; height: 22px; } .wow-venue-info__stat strong { display: block; color: var(--wow-navy); font: 700 1.45rem/1.15 var(--wow-font-head); } .wow-venue-info__stat small { display: block; color: var(--wow-muted); font-size: .86rem; } .wow-venue-info__label { margin: 18px 0 8px; color: var(--wow-navy); font-weight: 600; } .wow-venue-info__stats + .wow-venue-info__formats { margin-top: 16px; } .wow-venue-info__formats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .wow-venue-info__fmt { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--wow-line); border-radius: 999px; background: #fff; color: var(--wow-navy); font-size: .92rem; font-weight: 500; } .wow-venue-info__fmt .wow-icon { width: 18px; height: 18px; color: var(--wow-primary); } .wow-venue-info__btn { margin-top: 20px; } .wow-venue-info__btn .wow-icon { width: 18px; height: 18px; } /* The Elementor widget wrapper of an empty box takes no room. */ .elementor-widget-wow-venue-info:not(:has(.wow-venue-info)) { display: none; } body[class*="elementor-kit-"] .wow-venue-info a.wow-venue-info__btn { color: #fff; text-decoration: none; } /* v1.5 — community enterprise / OTOP badges (card image corner + place header) */ .wow-otop-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; } .wow-otop-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font: 600 .76rem/1.4 var(--wow-font); white-space: nowrap; } .wow-otop-badge--otop { background: #f59e0b; color: #1d2b3f; } .wow-otop-badge__stars { letter-spacing: 1px; } .wow-otop-badge--ent { background: #fff; color: var(--wow-success); box-shadow: inset 0 0 0 1px #bbf7d0; } .wow-card__otop { position: absolute; left: 12px; bottom: 12px; z-index: 1; } .wow-card__otop .wow-otop-badge { box-shadow: 0 2px 6px rgba(0, 0, 0, .14); } .wow-place-header__otop .wow-otop-badge { font-size: .82rem; padding: 4px 12px; } /* v1.5 — card style "วิสาหกิจ/OTOP" */ .wow-card--otop .wow-card__media { aspect-ratio: 2 / 1; } .wow-card--otop .wow-card__body { padding: 14px 16px 14px; } .wow-card--otop .wow-card__title { font-size: 1.04rem; } .wow-card--otop .wow-card__excerpt { margin-top: 6px; font-size: .88rem; min-height: calc(2 * 1.55em); } .wow-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; } .wow-card__foot .wow-meta { margin: 0; min-width: 0; font-size: .85rem; } .wow-card__foot .wow-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wow-card__foot .wow-meta .wow-icon { color: var(--wow-danger); flex: none; } .wow-card__go { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid var(--wow-line); border-radius: 50%; background: #fff; color: var(--wow-primary); transition: background .2s, color .2s, border-color .2s; } .wow-card__go .wow-icon { width: 17px; height: 17px; } .wow-card--otop:hover .wow-card__go { background: var(--wow-primary); border-color: var(--wow-primary); color: #fff; } body[class*="elementor-kit-"] .wow-card a.wow-card__go { color: var(--wow-primary); text-decoration: none; } body[class*="elementor-kit-"] .wow-card--otop:hover a.wow-card__go { color: #fff; } /* v1.5 — Directory filter bar: search box + dropdowns on one row (wraps below on small screens) */ .wow-dir-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; } .wow-dir-filters__search { position: relative; display: flex; align-items: center; flex: 1 1 320px; min-width: 0; } .wow-dir-filters__search > .wow-icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--wow-muted); pointer-events: none; } .wow-dir-filters__search input { width: 100%; min-height: 44px; padding: 10px 46px 10px 42px; border: 1px solid var(--wow-line); border-radius: 999px; background: #fff; color: var(--wow-text); font: inherit; font-size: .95rem; } .wow-dir-filters__search input:focus { outline: none; border-color: var(--wow-primary); box-shadow: 0 0 0 3px rgba(10, 108, 219, .15); } .wow-dir-filters__go { position: absolute; right: 5px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--wow-primary); color: #fff; cursor: pointer; } .wow-dir-filters__go .wow-icon { width: 16px; height: 16px; } .wow-dir-filters__selects { display: flex; flex-wrap: wrap; gap: 8px; } .wow-dir-filters:not(.has-search) .wow-dir-filters__selects { flex: 1 1 100%; } .wow-dir-select { position: relative; display: inline-flex; } .wow-dir-select[hidden] { display: none; } .wow-dir-select select { min-height: 44px; max-width: 220px; padding: 9px 34px 9px 14px; border: 1px solid var(--wow-line); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2e5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; color: var(--wow-navy); font: 500 .9rem/1.2 var(--wow-font); -webkit-appearance: none; appearance: none; cursor: pointer; } .wow-dir-select select:focus { outline: none; border-color: var(--wow-primary); box-shadow: 0 0 0 3px rgba(10, 108, 219, .15); } @media (max-width: 700px) { .wow-dir-filters__search { flex-basis: 100%; } .wow-dir-filters__selects { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .wow-dir-select select { width: 100%; max-width: none; } .wow-dir-select { display: flex; } } body[class*="elementor-kit-"] .wow-dir-filters button.wow-dir-filters__go, body[class*="elementor-kit-"] .wow-dir-filters button.wow-dir-filters__go:is(:hover, :focus) { padding: 0; border: 0; border-radius: 50%; background: var(--wow-primary); color: #fff; box-shadow: none; } body[class*="elementor-kit-"] .wow-dir-filters input[type="search"] { border-radius: 999px; padding-left: 42px; } @media (min-width: 1100px) { .wow-directory:not(.has-map) .wow-directory__cards--otop { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* v1.5 — trip banner image keeps its own ratio (Elementor kit sets img height:auto) */ body[class*="elementor-kit-"] .wow-trip-cta__img img { height: 100%; max-width: 100%; border-radius: inherit; } /* =================================================================== v1.6 widgets (Elementor controls & cards) — widgets worker block. Everything here is inert until a v1.6 control is set (variables are undefined, classes absent), so v1.5 pages render as before. =================================================================== */ /* Per-device alignment: the "การจัดวาง" choices set --wow-

-ta / -ml / -mr / -jc (wow_el_align_vars()) on the widget box; a var without fallback on an inherited property (text-align) is a no-op while unset. */ .wow-trip-cta__text { text-align: var(--wow-cta-ta); } .wow-trip-cta__title, .wow-trip-cta__text p { margin-left: var(--wow-cta-ml, 0); margin-right: var(--wow-cta-mr, 0); } .wow-trip-cta--sidebar .wow-trip-cta__title, .wow-trip-cta--sidebar .wow-trip-cta__text p { margin-left: var(--wow-cta-ml, 0); margin-right: var(--wow-cta-mr, 0); } .wow-steps { justify-content: var(--wow-ctas-jc, space-between); } .wow-step { align-items: var(--wow-ctas-jc, center); text-align: var(--wow-ctas-ta, center); } .wow-step small { margin-left: var(--wow-ctas-ml, 0); margin-right: var(--wow-ctas-mr, 0); } /* My Trip parts: .wow-tp prefix so the later wow-trip.css does not win. */ .wow-tp .wow-tp-hero__text { text-align: var(--wow-tps-ta); margin-left: var(--wow-tps-ml, 0); margin-right: var(--wow-tps-mr, 0); } .wow-tp .wow-tp-hero .wow-breadcrumb ol, .wow-tp .wow-tp-hero__btns { justify-content: var(--wow-tps-jc, flex-start); } .wow-tp .wow-tp-cta { justify-content: var(--wow-tpa-jc, space-between); } .wow-tp .wow-tp-cta__text { text-align: var(--wow-tpa-ta); } .wow-tp .wow-tp-cta__btns { justify-content: var(--wow-tpa-jc, flex-start); } .wow-calendar__bar { justify-content: var(--wow-calbar-jc, space-between); } .wow-weather__main { align-items: var(--wow-wxa-jc, var(--wx-main-ai, flex-start)); text-align: var(--wow-wxa-ta); } .wow-weather__foot { text-align: var(--wow-wxa-ta); } /* Responsive columns ("คอลัมน์ (เลือกแยกตามอุปกรณ์ได้)"): Elementor adds wow-tablet-rcols-N / wow-mobile-rcols-N to the widget wrapper. */ @media (max-width: 1024px) { .wow-tablet-rcols-1 .wow-grid { grid-template-columns: minmax(0, 1fr); } .wow-tablet-rcols-2 .wow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wow-tablet-rcols-3 .wow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wow-tablet-rcols-4 .wow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 767px) { .wow-mobile-rcols-1 .wow-grid { grid-template-columns: minmax(0, 1fr); } .wow-mobile-rcols-2 .wow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wow-mobile-rcols-3 .wow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wow-mobile-rcols-4 .wow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Separate tablet / phone images (Hero, My Trip header, My Trip bottom banner). !important beats the inline custom property of the desktop image. */ @media (max-width: 1024px) { .wow-hero[style*="--hero-img-t"] { --hero-img: var(--hero-img-t) !important; } } @media (max-width: 767px) { .wow-hero[style*="--hero-img-m"] { --hero-img: var(--hero-img-m) !important; } .wow-tp-hero[style*="--tp-hero-m"] { --tp-hero: var(--tp-hero-m) !important; } .wow-tp-cta[style*="--tp-cta-m"] { --tp-cta: var(--tp-cta-m) !important; } .wow-trip-cta__img.wow-trip-cta__img--has-m { display: block; } } .wow-trip-cta__img picture { display: contents; } /* Hero custom link chip. */ .wow-chip--link .wow-icon { color: var(--chip, var(--wow-primary)); } /* OTOP ★ / วิสาหกิจชุมชน on full / compact / mini place cards. */ .wow-card__cbadges { position: absolute; left: 10px; top: 10px; z-index: 2; max-width: calc(100% - 64px); pointer-events: none; } .wow-card__cbadges .wow-otop-badge { padding: 2px 8px; font-size: .7rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .14); } .wow-card__cbadges--row { position: static; max-width: none; gap: 4px; } .wow-card__cbadges--row .wow-otop-badge { box-shadow: none; } .wow-card__cbadges--row .wow-otop-badge--ent { box-shadow: inset 0 0 0 1px #bbf7d0; } /* Chinese pages (TranslatePress zh / zh_CN): CJK fonts in the stacks. Noto Sans SC itself is loaded only on zh pages (includes/i18n.php); otherwise the system CJK font is used. */ :root:lang(zh) { --wow-font-head: "Prompt", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans Thai", "Roboto", system-ui, sans-serif; --wow-font: "Roboto", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif; } body[class*="elementor-kit-"]:lang(zh) { --wow-font-head: var(--e-global-typography-primary-font-family, "Prompt"), "Prompt", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans Thai", system-ui, sans-serif; --wow-font: "Roboto", var(--e-global-typography-text-font-family, "Noto Sans Thai"), "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; } /* v1.11 Vendor form: step buttons, progress, section cards, live preview ------ */ .wow-vendor-form { --wow-vtop: 0px; --wow-vtotal: 140px; } .wow-vsteps { position: sticky; top: var(--wow-vtop); z-index: 20; margin: 0 0 20px; padding: 12px 0 10px; background: #fff; border-bottom: 1px solid var(--wow-line); } .wow-vsteps__bar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .wow-vprogress { flex: 1; height: 10px; overflow: hidden; border-radius: 999px; background: var(--wow-sky-soft); } .wow-vprogress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--wow-primary), var(--wow-sky)); transition: width .35s ease; } .wow-vsteps.is-ready .wow-vprogress > span { background: #16a34a; } .wow-vsteps__pct { flex: none; color: var(--wow-navy); font-weight: 600; font-size: .95rem; white-space: nowrap; } .wow-vsteps__pct small { color: var(--wow-muted); font-weight: 400; font-size: .82rem; } .wow-vlayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; } .wow-vmain { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .wow-vpanel { scroll-margin-top: var(--wow-vtotal); border-radius: var(--wow-radius-lg); box-shadow: var(--wow-shadow); transition: border-color .25s; } .wow-vpanel.is-done { border-color: #bbf7d0; } .wow-vpanel :is(input, select, textarea) { scroll-margin-top: var(--wow-vtotal); } .wow-vpanel legend { display: inline-flex; align-items: center; gap: 10px; float: left; width: 100%; margin-bottom: 14px; padding: 0; font-size: 1.15rem; } .wow-vpanel legend + * { clear: both; } .wow-vpanel__n { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--wow-primary); color: #fff; font: 700 .95rem var(--wow-font-head); } .wow-vpanel.is-done .wow-vpanel__n { background: #16a34a; font-size: 0; } .wow-vpanel.is-done .wow-vpanel__n::before { content: "\2713"; font-size: 1.05rem; } .wow-vpreview { min-width: 0; order: -1; } .wow-vpreview__toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border: 1px solid var(--wow-line); border-radius: var(--wow-radius); background: #fff; color: var(--wow-navy); font: 600 .95rem var(--wow-font); cursor: pointer; } .wow-vpreview__toggle .wow-icon { width: 18px; height: 18px; color: var(--wow-primary); } .wow-vpreview__toggle::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; } .wow-vpreview__toggle[aria-expanded="true"]::after { transform: rotate(-135deg); } .wow-vpreview__body { margin-top: 10px; padding: 16px; border: 1px dashed var(--wow-sky); border-radius: var(--wow-radius-lg); background: var(--wow-sky-soft); } .wow-vpreview.is-collapsed .wow-vpreview__body { display: none; } .wow-vpreview__label { margin: 0 0 10px; color: var(--wow-navy); font-size: .85rem; font-weight: 600; } .wow-vpreview .wow-help { margin-top: 10px; } .wow-vcard { pointer-events: none; } .wow-vcard [hidden] { display: none !important; } .wow-vcard__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--wow-muted); font-size: .85rem; } .wow-vcard__empty .wow-icon { width: 30px; height: 30px; opacity: .6; } .wow-vcard .is-placeholder { color: var(--wow-muted); opacity: .7; } .wow-vcard .wow-card__title.is-placeholder { font-weight: 500; } @media (min-width: 960px) { .wow-vlayout { grid-template-columns: minmax(0, 1fr) 340px; } .wow-vpreview { order: 0; position: sticky; top: var(--wow-vtotal); } .wow-vpreview__toggle { display: none; } .wow-vpreview.is-collapsed .wow-vpreview__body { display: block; } .wow-vpreview__body { margin-top: 0; } } @media (max-width: 700px) { .wow-vsteps__t { max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wow-vsteps__pct small { display: none; } } @media (prefers-reduced-motion: reduce) { .wow-vprogress > span, .wow-vpanel, .wow-vsteps__nav .wow-vstep { transition: none; } } /* v1.11.1 Vendor form fixes: full-width compact sticky bar, map stacking, sub-heading spacing ------ */ html:has(.wow-vendor-form) { overflow-x: clip; } .leaflet-container { isolation: isolate; } .wow-vsteps { margin-bottom: 16px; padding: 8px 0 6px; border-bottom: 0; background: transparent; } .wow-vsteps::before { content: ""; position: absolute; z-index: -1; inset: 0 auto; left: 50%; width: 100vw; margin-left: -50vw; background: #fff; border-bottom: 1px solid var(--wow-line); box-shadow: 0 6px 16px rgba(15, 46, 92, .06); } .wow-vsteps__bar { margin-bottom: 6px; } .wow-vprogress { height: 6px; } .wow-vpanel .wow-fgroup { padding: 20px 16px 18px; } .wow-vpanel .wow-fgroup__legend { float: left; width: 100%; margin: 0; padding: 0 0 12px; font-size: 1rem; } .wow-vpanel .wow-fgroup__legend + * { clear: both; } .wow-vpanel .wow-fgroup__grid { padding-top: 0; } /* v1.11.4 step nav contrast */ /* v1.12 Step bar: plain full-width tabs with a tick / empty ring, no numbers, no boxes ------ */ .wow-vsteps__nav { display: flex; flex-wrap: nowrap; gap: 4px 22px; justify-content: space-between; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; } .wow-vsteps__nav::-webkit-scrollbar { display: none; } .wow-vsteps__nav .wow-vstep { flex: none; display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 7px; min-height: 0; padding: 5px 2px 6px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--wow-muted); font-size: .9rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .2s, border-color .2s; } .wow-vsteps__nav .wow-vstep[hidden] { display: none !important; } .wow-vsteps__nav .wow-vstep::before, .wow-vsteps__nav .wow-vstep::after { content: none !important; display: none !important; } .wow-vsteps__nav .wow-vstep:hover { color: var(--wow-primary); background: none; } .wow-vsteps__nav .wow-vstep.is-active, .wow-vsteps__nav .wow-vstep.is-active:hover { color: var(--wow-navy); font-weight: 700; border-bottom-color: var(--wow-primary); background: none; } .wow-vsteps__n { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid #b8c7da; border-radius: 50%; background: #fff; color: #fff; font-size: 0; transition: background-color .2s, border-color .2s; } .wow-vsteps__nav .wow-vstep.is-active .wow-vsteps__n { border-color: var(--wow-primary); } .wow-vsteps__nav .wow-vstep.is-done .wow-vsteps__n { border-color: #16a34a; background: #16a34a; } .wow-vsteps__nav .wow-vstep.is-done .wow-vsteps__n::after { content: ""; width: 4px; height: 8px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } @media (min-width: 960px) { .wow-vsteps__nav { flex-wrap: wrap; overflow: visible; } } .wow-typepicks { display: flex; flex-wrap: wrap; gap: 8px; } .wow-typepick { position: relative; display: inline-flex; cursor: pointer; } .wow-typepick input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .wow-typepick span { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 16px; border: 1px solid var(--wow-line); border-radius: 999px; background: #fff; color: var(--wow-text); font-size: .92rem; transition: background-color .2s, border-color .2s, color .2s; } .wow-typepick:hover span { border-color: var(--wow-primary); background: var(--wow-sky-soft); } .wow-typepick input:checked + span { border-color: var(--wow-primary); background: var(--wow-primary); color: #fff; } .wow-typepick input:focus-visible + span { outline: 2px solid var(--wow-navy); outline-offset: 2px; } .wow-typepick input:disabled + span { opacity: .45; cursor: not-allowed; } .wow-form__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .wow-form__btns .wow-form__preview { order: -1; } .wow-previewbar { position: fixed; z-index: 100000; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 20px; background: var(--wow-navy); color: #fff; box-shadow: 0 -6px 20px rgba(15, 46, 92, .25); } .wow-previewbar p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .95rem; } .wow-previewbar .wow-icon { width: 20px; height: 20px; flex: none; } body:has(.wow-previewbar) .wow-consent { bottom: 88px; } /* v1.12.1 Step bar: tight group in the middle of the bar, one row, immune to the site's capsule link style */ .wow-vsteps .wow-vsteps__nav { flex-wrap: nowrap !important; justify-content: flex-start; gap: 4px 18px; overflow-x: auto; } .wow-vsteps .wow-vsteps__nav > .wow-vstep:first-child { margin-left: auto; } .wow-vsteps .wow-vsteps__nav > .wow-vstep:last-child { margin-right: auto; } .wow-vsteps .wow-vsteps__nav > .wow-vstep, .wow-vsteps .wow-vsteps__nav > .wow-vstep:hover, .wow-vsteps .wow-vsteps__nav > .wow-vstep.is-active { padding: 5px 2px 6px !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; text-decoration: none !important; } .wow-vsteps .wow-vsteps__nav > .wow-vstep { border: 0 !important; border-bottom: 2px solid transparent !important; } .wow-vsteps .wow-vsteps__nav > .wow-vstep.is-active { border-bottom-color: var(--wow-primary) !important; } /* v1.12.2 Step bar: text colour fixed in every state (site-wide link hover must not turn it white) */ .wow-vsteps .wow-vsteps__nav > .wow-vstep, .wow-vsteps .wow-vsteps__nav > .wow-vstep:visited { color: var(--wow-muted) !important; } .wow-vsteps .wow-vsteps__nav > .wow-vstep:hover, .wow-vsteps .wow-vsteps__nav > .wow-vstep:focus-visible { color: var(--wow-primary) !important; } .wow-vsteps .wow-vsteps__nav > .wow-vstep.is-active, .wow-vsteps .wow-vsteps__nav > .wow-vstep.is-active:hover { color: var(--wow-navy) !important; } .wow-vsteps .wow-vsteps__nav > .wow-vstep:focus-visible { outline: 2px solid var(--wow-navy); outline-offset: 2px; } /* v1.12.2 Map controls keep their own look when the site styles every link (zoom buttons, attribution) */ .leaflet-container a { padding: 0; border-radius: 0; text-decoration: none; } .leaflet-container .leaflet-bar a, .leaflet-container .leaflet-bar a:visited { background: #fff !important; color: #0f2e5c !important; } .leaflet-container .leaflet-bar a:hover, .leaflet-container .leaflet-bar a:focus-visible, .leaflet-container .leaflet-bar a:active { background: #eaf4fd !important; color: #0a4fa8 !important; } .leaflet-container .leaflet-control-attribution a, .leaflet-container .leaflet-control-attribution a:hover { background: none !important; color: #0a5a8a !important; text-decoration: underline; } /* v1.12.3 The add / edit form page scrolls with the normal header; only the step bar sticks */ body:has(.wow-vendor-form) .wowt-header--sticky, body:has(.wow-vendor-form) .elementor-location-header:has(.wowt-header--sticky) { position: static; } /* v1.12.11: default cover in place of the sun graphic. */ .wow-placeholder.has-img { padding: 0; background: var(--wow-sky-soft); } .wow-placeholder.has-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* v1.12.11: cards keep their own look inside article content and Elementor Post Content, whatever link styles the theme/kit gives to `a` there (pill padding, background, hover colour). */ body .wow-card .wow-card__media > a:not(.wow-badge), body .wow-card .wow-card__slide, body .wow-card > a.wow-card__thumb, body .wow-card > a.wow-card__cover, body .wow-ct-card > a.wow-ct-card__media, body .wow-card .wow-card__title a { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; text-decoration: none !important; } body .wow-card .wow-card__media > a:not(.wow-badge) { display: block !important; width: 100%; height: 100% !important; } body .wow-card > a.wow-card__thumb, body .wow-card > a.wow-card__cover, body .wow-ct-card > a.wow-ct-card__media { display: block !important; } body .wow-card .wow-card__title a { display: inline !important; color: inherit !important; } body .wow-card .wow-card__title a:hover, body .wow-card .wow-card__title a:focus-visible { color: var(--wow-primary) !important; } body .wow-card--feature .wow-card__title a:hover { color: var(--wow-yellow) !important; } body .wow-card .wow-card__media > a:not(.wow-badge)::before, body .wow-card .wow-card__media > a:not(.wow-badge)::after, body .wow-card .wow-card__title a::before, body .wow-card .wow-card__title a::after { content: none !important; } /* v1.12.11: "WOW สถานที่ในบทความ" map under the cards. */ .wow-article-places__cards + .wow-article-places__map { margin: 20px 0 0; } /* v1.12.12: card direction (Elementor → การแสดงผล → ทิศทางการ์ด). Elementor puts wow-cardo-X / wow-tablet-cardo-X / wow-mobile-cardo-X on the widget wrapper. */ .wow-cardo-v .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature), .wow-cardo-v .wow-ct-card { display: flex; flex-direction: column; align-items: stretch; } .wow-cardo-v .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__media, .wow-cardo-v .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__thumb, .wow-cardo-v .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__media, .wow-cardo-v .wow-ct-card > .wow-card__media, .wow-cardo-v .wow-ct-card > .wow-card__thumb, .wow-cardo-v .wow-ct-card > .wow-ct-card__media { flex: none; width: 100%; max-width: none; } .wow-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature), .wow-cardo-h .wow-ct-card { display: flex; flex-direction: row; align-items: stretch; } .wow-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__media, .wow-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__thumb, .wow-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__media, .wow-cardo-h .wow-ct-card > .wow-card__media, .wow-cardo-h .wow-ct-card > .wow-card__thumb, .wow-cardo-h .wow-ct-card > .wow-ct-card__media { flex: 0 0 var(--wow-card-imgw, 38%); width: auto; max-width: none; height: auto; min-height: 110px; aspect-ratio: auto; align-self: stretch; } .wow-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__body, .wow-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__body, .wow-cardo-h .wow-ct-card > .wow-card__body, .wow-cardo-h .wow-ct-card > .wow-ct-card__body { flex: 1 1 auto; min-width: 0; } .wow-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature), .wow-cardo-hr .wow-ct-card { display: flex; flex-direction: row-reverse; align-items: stretch; } .wow-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__media, .wow-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__thumb, .wow-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__media, .wow-cardo-hr .wow-ct-card > .wow-card__media, .wow-cardo-hr .wow-ct-card > .wow-card__thumb, .wow-cardo-hr .wow-ct-card > .wow-ct-card__media { flex: 0 0 var(--wow-card-imgw, 38%); width: auto; max-width: none; height: auto; min-height: 110px; aspect-ratio: auto; align-self: stretch; } .wow-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__body, .wow-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__body, .wow-cardo-hr .wow-ct-card > .wow-card__body, .wow-cardo-hr .wow-ct-card > .wow-ct-card__body { flex: 1 1 auto; min-width: 0; } @media (max-width: 1024px) { .wow-tablet-cardo-v .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature), .wow-tablet-cardo-v .wow-ct-card { display: flex; flex-direction: column; align-items: stretch; } .wow-tablet-cardo-v .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__media, .wow-tablet-cardo-v .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__thumb, .wow-tablet-cardo-v .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__media, .wow-tablet-cardo-v .wow-ct-card > .wow-card__media, .wow-tablet-cardo-v .wow-ct-card > .wow-card__thumb, .wow-tablet-cardo-v .wow-ct-card > .wow-ct-card__media { flex: none; width: 100%; max-width: none; } .wow-tablet-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature), .wow-tablet-cardo-h .wow-ct-card { display: flex; flex-direction: row; align-items: stretch; } .wow-tablet-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__media, .wow-tablet-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__thumb, .wow-tablet-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__media, .wow-tablet-cardo-h .wow-ct-card > .wow-card__media, .wow-tablet-cardo-h .wow-ct-card > .wow-card__thumb, .wow-tablet-cardo-h .wow-ct-card > .wow-ct-card__media { flex: 0 0 var(--wow-card-imgw, 38%); width: auto; max-width: none; height: auto; min-height: 110px; aspect-ratio: auto; align-self: stretch; } .wow-tablet-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__body, .wow-tablet-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__body, .wow-tablet-cardo-h .wow-ct-card > .wow-card__body, .wow-tablet-cardo-h .wow-ct-card > .wow-ct-card__body { flex: 1 1 auto; min-width: 0; } .wow-tablet-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature), .wow-tablet-cardo-hr .wow-ct-card { display: flex; flex-direction: row-reverse; align-items: stretch; } .wow-tablet-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__media, .wow-tablet-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__thumb, .wow-tablet-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__media, .wow-tablet-cardo-hr .wow-ct-card > .wow-card__media, .wow-tablet-cardo-hr .wow-ct-card > .wow-card__thumb, .wow-tablet-cardo-hr .wow-ct-card > .wow-ct-card__media { flex: 0 0 var(--wow-card-imgw, 38%); width: auto; max-width: none; height: auto; min-height: 110px; aspect-ratio: auto; align-self: stretch; } .wow-tablet-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__body, .wow-tablet-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__body, .wow-tablet-cardo-hr .wow-ct-card > .wow-card__body, .wow-tablet-cardo-hr .wow-ct-card > .wow-ct-card__body { flex: 1 1 auto; min-width: 0; } } @media (max-width: 767px) { .wow-mobile-cardo-v .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature), .wow-mobile-cardo-v .wow-ct-card { display: flex; flex-direction: column; align-items: stretch; } .wow-mobile-cardo-v .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__media, .wow-mobile-cardo-v .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__thumb, .wow-mobile-cardo-v .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__media, .wow-mobile-cardo-v .wow-ct-card > .wow-card__media, .wow-mobile-cardo-v .wow-ct-card > .wow-card__thumb, .wow-mobile-cardo-v .wow-ct-card > .wow-ct-card__media { flex: none; width: 100%; max-width: none; } .wow-mobile-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature), .wow-mobile-cardo-h .wow-ct-card { display: flex; flex-direction: row; align-items: stretch; } .wow-mobile-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__media, .wow-mobile-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__thumb, .wow-mobile-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__media, .wow-mobile-cardo-h .wow-ct-card > .wow-card__media, .wow-mobile-cardo-h .wow-ct-card > .wow-card__thumb, .wow-mobile-cardo-h .wow-ct-card > .wow-ct-card__media { flex: 0 0 var(--wow-card-imgw, 38%); width: auto; max-width: none; height: auto; min-height: 110px; aspect-ratio: auto; align-self: stretch; } .wow-mobile-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__body, .wow-mobile-cardo-h .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__body, .wow-mobile-cardo-h .wow-ct-card > .wow-card__body, .wow-mobile-cardo-h .wow-ct-card > .wow-ct-card__body { flex: 1 1 auto; min-width: 0; } .wow-mobile-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature), .wow-mobile-cardo-hr .wow-ct-card { display: flex; flex-direction: row-reverse; align-items: stretch; } .wow-mobile-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__media, .wow-mobile-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__thumb, .wow-mobile-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__media, .wow-mobile-cardo-hr .wow-ct-card > .wow-card__media, .wow-mobile-cardo-hr .wow-ct-card > .wow-card__thumb, .wow-mobile-cardo-hr .wow-ct-card > .wow-ct-card__media { flex: 0 0 var(--wow-card-imgw, 38%); width: auto; max-width: none; height: auto; min-height: 110px; aspect-ratio: auto; align-self: stretch; } .wow-mobile-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-card__body, .wow-mobile-cardo-hr .wow-card:not(.wow-card--story-overlay):not(.wow-card--feature) > .wow-ct-card__body, .wow-mobile-cardo-hr .wow-ct-card > .wow-card__body, .wow-mobile-cardo-hr .wow-ct-card > .wow-ct-card__body { flex: 1 1 auto; min-width: 0; } }