/* ==========================================
   ORCAi - Global Theme Variables
   ========================================== */

:root {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

:root {
  /* Light Theme */
  --background: #f4f8fb;
  --foreground: #102533;
  --text: #526B7B;
  --card-glass-background: #ffffffe4;

  --surface: #ffffff;
  --card: #eaf3f8;
  --border: #cddde8;
  --shadow: rgba(34, 78, 103, 0.09) 0px 18px 45px 0px;

  --tint: #007ea7;

  --tab-icon-default: #7a8d9a;
  --tab-icon-selected: #007ea7;

  /* Pillar Colors */
  --objective: #3b82f6;
  --reach: #8b5cf6;
  --convert: #10b981;
  --amplify: #f59e0b;

  /* Theme Aliases */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card-glass-background: var(--card-glass-background);

  --color-surface: var(--surface);
  --color-card: var(--card);
  --color-border: var(--border);
  --box-shadow: var(--shadow);
  --shadow-tint: 0 8px 22px color-mix(in srgb, var(--tint) 15%, transparent);

  --color-tint: var(--tint);

  --color-tab-icon-default: var(--tab-icon-default);
  --color-tab-icon-selected: var(--tab-icon-selected);

  --color-objective: var(--objective);
  --color-reach: var(--reach);
  --color-convert: var(--convert);
  --color-amplify: var(--amplify);

  /* Typography */
  --font-sans: "Inter", sans-serif;
  --font-mono: "Space Mono", monospace;
}

/* ==========================================
   Dark Theme
   ========================================== */

html.dark {
  --background: #07131d;
  --foreground: #eef8ff;
  --text: #A2B6C6;
  --card-glass-background: transparent;

  --surface: #0f1f2d;
  --card: #162b3c;
  --border: #244155;
  --shadow: rgba(0, 0, 0, 0.25) 0px 20px 60px 0px;

  --tint: #44b3ea;

  --tab-icon-default: #8096a8;
  --tab-icon-selected: #53c7ff;

  --objective: #0284c7;
  --reach: #6366f1;
  --convert: #14b8a6;
  --amplify: #fb923c;
}

/* ==========================================
   Global Styles
   ========================================== */

body {
  background-color: var(--background) !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-mono) !important;
	margin: 0;
	color: var(--foreground) !important;
}

h1 {
	font-weight: 400;
	font-size: 40px !important;
	line-height: 56px;
}

h2 {
	font-weight: 400;
	font-size: 30px !important;
	line-height: 39px;
}

h3 {
	font-size: 20px !important;
	line-height: 28px;
	font-weight: 400;
}

p.small, div.small, div.small p, label, a, button, textarea, li, ol, ul, span, input {
	font-size: 14px;
	margin: 0;
	line-height: 22px;
}

p {
	font-size: 16px;
	margin: 0;
	line-height: 26px;
	text-wrap: wrap;
}

svg.lucide {
	fill: none !important;
    stroke-width: 2 !important;
}

.tint p, .tint a, .tint {
	color: var(--tint) !important;
}

/* Mobile */
@media (max-width: 768px) {
	h1 {
		font-size: 28px !important;
		line-height: 39px;
		text-wrap: wrap;
	}
	
	h2 {
		font-size: 26px !important;
		line-height: 36px;
		text-wrap: wrap;
	}
	
	.container {
		width: 100% !important;
		padding: 0 24px;
	}
}

/* ==========================================
   Theme-Aware Logos
   ========================================== */

/* Light mode */
.theme-image-light {
  display: inline;
}

.theme-image-dark {
  display: none;
}

/* Dark mode */
.dark .theme-image-light {
  display: none;
}

.dark .theme-image-dark {
  display: inline;
}

/* ==========================================
   Header Style
   ========================================== */

.orcai-header.is-scrolled {
	background-color: color-mix(in oklab, var(--background) 55%, transparent);
	border-bottom-color: color-mix(in oklab, var(--border) 60%, transparent);
	backdrop-filter: blur(64px);
	-webkit-backdrop-filter: blur(64px);
	box-shadow: var(--shadow-tint);
}

.logo-container {
	display: flex;
	flex-direction: row !important;
	align-items: center !important;
	color: var(--text) !important;
	gap: 12px;
	white-space: nowrap;
}

.orcai-menu .bde-loop-list {
	display: flex!important;
	flex-direction: row !important;
}

.orcai-menu a {
	color: var(--foreground) !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	line-height: 22px;
}

.orcai-logout {
	margin-right: 20px;
}

.ofa-logout-button {
	width: max-content;
    background: none;
    border: none;
    color: var(--tint);
    font-weight: 600;
	cursor: pointer;
	padding: 0;
}

/* Mobile */
@media (max-width: 767px) {
	.orcai-web-button {
		display: none !important;
	}
	
	.orcai-mobile-menu-container {
		display: block;
		border: none !important;
	}
	
	.orcai-links-container a {
		color: var(--text) !important;
		text-decoration: none;
		font-weight: 600;
		font-size: 18px;
		line-height: 26px;
	}
	
	.ofa-logout-button span {
		font-size: 18px;
		line-height: 26px;
	}
	
	.orcai-mobile-menu-container .bde-custom-area-link {
		flex-direction: column !important;
		align-items: flex-start !important;
		text-align: left !important;
		gap: 32px;
		padding: 24px !important;
		border: none !important;
	}
	
	.orcai-mobile-menu-container p {
		color: var(--text) !important;
	}
	
	html.is-breakdance-menu-open .orcai-header {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	.orcai-menu-mobile .breakdance-responsive-menu--open > .breakdance-menu-list {
		background: color-mix(in srgb, var(--background) 55%, transparent) !important;
		backdrop-filter: blur(15px) saturate(150%) !important;
		-webkit-backdrop-filter: blur(15px) saturate(150%) !important;
	}
	
	.orcai-menu-mobile .breakdance-menu-topbar {
		padding: 34px 34px 20px 30px;
	}
	
	.orcai-menu-mobile .breakdance-menu-toggle__custom-open-icon {
		background: var(--surface);
		border-radius: 8px;
		color: var(--tint);
		padding: 8px;
		width: auto;
		height: fit-content;
		line-height: 0px;
		box-shadow: var(--shadow-tint);
	}
	
	.orcai-menu-mobile .breakdance-menu-close-button:before, .orcai-menu-mobile .breakdance-menu-close-button:after {
		color: var(--tint) !important;
		background-color: var(--tint) !important;
	}
}

/* ==========================================
   Footer Style
   ========================================== */

.footer-links p {
	margin: 0 !important;
}

.footer-links a {
	color: var(--text) !important;
	text-decoration: none;
}

.footer-links a:hover {
	color: var(--foreground) !important;
}

.footer-logo-container {
	gap: 24px !important;
}

/* Mobile */
@media (max-width: 768px) {
	.footer-logo-container {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
	}
}

/* ==========================================
   Lavalamp
   ========================================== */

.orcai-lavalamp {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background: var(--background);
}
.orcai-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(110px);
	opacity: 0.3;
	will-change: transform;
}
/* TINT */
.orcai-blob-1 {
	width: 46rem;
	height: 46rem;
	top: -18rem;
	right: -12rem;
	background: var(--tint);
	opacity: 0.25;
	animation: moveOne 32s ease-in-out infinite alternate;
}
/* BORDER */
.orcai-blob-2 {
	width: 40rem;
	height: 40rem;
	bottom: -14rem;
	left: -12rem;
	background: var(--border);
	animation: moveTwo 28s ease-in-out infinite alternate;
}
/* TEXT — intentionally very subtle */
.orcai-blob-3 {
	width: 34rem;
	height: 34rem;
	top: 35%;
	left: 18%;
	background: var(--foreground);
	opacity: 0.08;
	animation: moveThree 35s ease-in-out infinite alternate;
}
/* BACKGROUND */
.orcai-blob-4 {
	width: 52rem;
	height: 52rem;
	top: 15%;
	right: 18%;
	background: var(--background);
	opacity: 0.5;
	animation: moveFour 30s ease-in-out infinite alternate;
}
/* SECOND TINT GLOW */
.orcai-blob-5 {
	width: 30rem;
	height: 30rem;
	bottom: 8%;
	right: 6%;
	background: var(--tint);
	opacity: 0.18;
	animation: moveFive 26s ease-in-out infinite alternate;
}
/* CARD / NEUTRAL */
.orcai-blob-6 {
	width: 44rem;
	height: 44rem;
	top: -8%;
	left: 12%;
	background: var(--card);
	opacity: 0.35;
	animation: moveSix 34s ease-in-out infinite alternate;
}

/* Moving animations */
@keyframes moveOne {
	from {
    	transform: translate3d(0, 0, 0) scale(1);
	}
	to {
    	transform: translate3d(-18vw, 18vh, 0) scale(1.12);
	}
}

@keyframes moveTwo {
	from {
    	transform: translate3d(0, 0, 0) scale(1);
  }
	to {
    	transform: translate3d(22vw, -18vh, 0) scale(1.15);
	}
}

@keyframes moveThree {
	from {
    	transform: translate3d(-6vw, 0, 0) scale(0.95);
	}
	to {
    	transform: translate3d(18vw, 16vh, 0) scale(1.18);
	}
}

@keyframes moveFour {
	from {
    	transform: translate3d(0, 10vh, 0) scale(1);
	}
	to {
    	transform: translate3d(-22vw, -14vh, 0) scale(1.08);
	}
}

@keyframes moveFive {
	from {
    	transform: translate3d(0, 0, 0) scale(1);
	}
	to {
    	transform: translate3d(-28vw, -20vh, 0) scale(1.2);
	}
}

@keyframes moveSix {
	from {
    	transform: translate3d(0, 0, 0) scale(1.1);
	}
	to {
    	transform: translate3d(20vw, 22vh, 0) scale(0.95);
	}
}

@media (prefers-reduced-motion: reduce) {
	.orcai-blob {
    	animation: none;
	}
}

/* ==========================================
   Buttons
   ========================================== */
.primary-link-button, .secondary-link-button, .orcai-pagination .page-numbers.current, .orcai-pagination .page-numbers {
	box-shadow: var(--shadow-tint);
	padding: 12px 16px;
	border-radius: 8px;
	display: flex;
	gap: 8px;
	flex-direction: row !important;
	align-items: center !important;
	white-space: nowrap;
	width: fit-content;
	height: fit-content;
	text-decoration: none;
	cursor: pointer;
	border: none !important;
}

.primary-link-button, .orcai-pagination .page-numbers.current {
	color: #fff;
	background: var(--tint);
}

.primary-link-button:hover, .orcai-pagination .page-numbers.current:hover {
	color: #fff;
	background-color: color-mix(in oklab, var(--tint) 90%, transparent);
}

.secondary-link-button, .orcai-pagination .page-numbers {
	color: var(--tint);
	background: var(--surface);
}

.secondary-link-button:hover, .orcai-pagination .page-numbers:hover {
	color: var(--tint);
	background-color: color-mix(in oklab,var(--tint) 5%, var(--surface));
}

.primary-link {
	color: var(--tint);
	flex-direction: row !important;
	font-weight: 600;
	align-items: center !important;
	cursor: pointer;
	width: fit-content;
	text-decoration: none !important;
}

.primary-link:hover {
	color: color-mix(in oklab, var(--tint) 90%, transparent);
}

.button-white {
	border: var(--border) 1px solid !important;
}

/* ==========================================
   Eyebrow
   ========================================== */

.eyebrow {
	color: var(--tint);
	font-size: 11px;
	line-height: 16px;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 4px;
}

/* ==========================================
   Pill
   ========================================== */

.eyebrow-pill-primary, .eyebrow-pill-secondary {
	padding: 8px 14px;
	border-radius: 99px;
	font-size: 11px;
	line-height: 16px;
	text-transform: uppercase;
	font-weight: 700;	
	width: fit-content;
	text-wrap: nowrap;
}
.eyebrow-pill-primary, .pill-primary {
	background: var(--card);
}

.eyebrow-pill-secondary {
	background: var(--surface);
}

.pill-primary, .pill-secondary {
	padding: 5px 10px;
	border-radius: 99px;
	font-size: 11px;
	line-height: 16px;
	width: fit-content;
}

.pill-primary, .eyebrow-pill-primary, .eyebrow-pill-secondary {
	color: var(--tint);
}

.pill-secondary {
	color: var(--text);
	border: var(--text) 1px solid;
}

a.pill-secondary {
	color: var(--text);
	cursor: pointer;
	text-decoration: none;
}

a.pill-secondary:hover {
	color: var(--tint);
	border: var(--tint) 1px solid;
}

/* ==========================================
   Support Footer
   ========================================== */

.orcai-support {
	background: var(--card);
	padding: 28px;
}

.support-heading {
	margin-bottom: 8px !important;
}

/* ==========================================
   HOME
   ========================================== */

/* Hero Search section */

.popular-search-text {
	color: var(--text) !important;
	margin-bottom: 0;
	text-wrap: nowrap;
}

.popular-search-wrapper .bde-loop {
	display: flex !important;
	flex-direction: row !important;
}

.orcai-search-bar .search-form__container {
	border: var(--border) 1px solid !important;
	background-color: var(--surface) !important;
	border-radius: 16px !important;
}

.orcai-search-bar .search-form__field {
	padding: 0 18px 0 14px !important;
}

.orcai-search-bar .search-form__button {
	background-color: transparent !important;
    width: auto !important;
    padding: 0 0 0 18px;
}

.orcai-search-bar svg {
	color: var(--tint) !important;
}

.orcai-search-bar input::placeholder {
	color: var(--text) !important;
}

/* Highlight section */

.orcai-highlight {
	background-color: var(--surface);
	border: var(--border) 1px solid;
	padding: 28px;
	border-radius: 24px;
	box-shadow: var(--shadow);
}

.highlight-column-right {
	background: var(--card);
	border-radius: 20px;
	padding: 20px;
}

/* Guides Section */

.guide-card {
	background: var(--surface);
	border: var(--border) 1px solid;
	box-shadow: var(--shadow);
	padding: 24px;
	border-radius: 24px;
}

.guide-icon[data-icon="objective"] {
  color: var(--objective);
}

.guide-icon[data-icon="reach"] {
  color: var(--reach);
}

.guide-icon[data-icon="convert"] {
  color: var(--convert);
}

.guide-icon[data-icon="amplify"] {
  color: var(--amplify);
}

.guide-icon[data-icon="text"] {
  color: var(--text);
}

.guide-icon[data-icon="tint"] {
  color: var(--tint);
}

/* FAQ */
.faq-cards {
	background: var(--surface);
	box-shadow: var(--shadow);
	border-radius: 16px;
}

.faq-cards .bde-faq__item {
	border-width: 1px !important;
	border-color: var(--border) !important;
	border-radius: 16px;
}

.faq-cards h3 {
	font-family: var(--font-sans) !important;
	font-size: 14px;
	color: var(--foreground);
	font-weight: 600 !important;
}

.faq-cards .bde-faq__answer p {
	font-size: 14px !important;
}

.faq-cards svg {
	color: var(--tint) !important;
}

/* Related Guides section */

.guide-card-vertical {
	background: var(--surface);
	border-radius: 16px;
	padding: 20px;
	border: var(--border) 1px solid;
	box-shadow: var(--shadow);
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: var(--tint) !important;
}

.swiper-pagination-bullet {
	background: var(--text) !important;
}

/* TABLET */
@media (max-width: 1024px) {
	.home-search {
		width: 100% !important;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.popular-search-wrapper .bde-loop {
		flex-direction: column !important;
	}
}

/* ==========================================
   SINGLE GUIDE PAGE
   ========================================== */

.guide-cat-wrapper .bde-loop-list {
	display: flex !important;
}

.guide-sticky-column {
	background: var(--surface);
	border-radius: 24px;
	padding: 24px;
	border: var(--border) 1px solid;
	box-shadow: var(--shadow);
	height: fit-content;
	position: sticky !important;
}

.guide-content, .related-guides {
	width: 100%;
}

.guide-requirements-wrapper {
	width: 100%;
	padding: 20px;
	border-radius: 16px;
	background: var(--card);
	box-shadow: var(--shadow);
}

.requirements-desc {
	color: var(--foreground) !important;
	margin-top: 8px;
}

/* Guide Tabs */
.guide-tabs .bde-tabs__tabslist {
  	display: inline-flex;
  	align-items: center;
  	gap: 8px !important;
  	width: fit-content !important;
  	padding: 8px;
  	border-radius: 999px !important;
  	background: var(--card) !important;
	box-shadow: var(--shadow-tint);
}

/* Individual tabs */
.guide-tabs .bde-tabs__tab {
  	display: inline-flex;
  	align-items: center;
  	justify-content: center;
  	padding: 9px 16px;
  	border: 1px solid transparent;
  	border-radius: 999px !important;
  	background: transparent;
  	cursor: pointer;
  	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.guide-tabs .bde-tabs__tab span {
	font-size: 14px !important;
  	font-weight: 400 !important;
	color: var(--text) !important;
}

/* Active tab */
.guide-tabs .bde-tabs__tab.is-active {
  	background: var(--surface) !important;
  	border-color: var(--border);
  	box-shadow: var(--shadow);
}

.guide-tabs .bde-tabs__tab.is-active span, .guide-tabs .bde-tabs__tab.is-active svg,
.guide-tabs .bde-tabs__tab:hover:not(.is-active) span, .guide-tabs .bde-tabs__tab:hover:not(.is-active) svg {
	color: var(--tint) !important;
}

.guide-tabs .bde-tabs__tab:not(.is-active) span, .guide-tabs .bde-tabs__tab:not(.is-active) svg {
	color: var(--text) !important;
}

/* Icons */
.guide-tabs .bde-tabs__tab svg {
  	width: 16px;
  	height: 16px;
  	flex-shrink: 0;
}

/* Keyboard accessibility */
.guide-tabs .bde-tabs__tab:focus-visible {
  	outline: 2px solid var(--tint);
  	outline-offset: 2px;
}

.video-wrapper {
	background: var(--card);
	padding:20px;
	border-radius: 20px;
	width: 100%;
}

.video-platform-wrapper, .step-title-wrapper {
	margin-bottom: 14px;
}

.guide-video-eyebrow {
	color: var(--foreground);
	font-weight: 600 !important;
}

.step-number {
	color: var(--tint);
	font-weight: 600;
	font-size: 11px;
	background: var(--card);
	padding: 8px 10px;
	border-radius: 99px;
}

.guide-steps {
    counter-reset: guide-step;
}

.guide-step {
    counter-increment: guide-step;
}

.step-number::before {
    content: counter(guide-step, decimal-leading-zero);
}

.guide-card-horizontal {
	padding: 20px;
	border-radius: 16px;
	background: var(--surface);
	border: var(--border) 1px solid;
	cursor: pointer;
	box-shadow: var(--shadow);
	text-decoration: none !important;
}

.guide-card-title {
	color: var(--foreground) !important;
	font-weight: 600;
}

.guide-card-horizontal p {
	color: var(--text);
}

.guide-card-icon {
	font-size: 24px;
	color: var(--tint);
}

.nav-divider .bde-fancy-divider__separator, .footer-divider .bde-fancy-divider__separator {
	border-top: solid 1px var(--border) !important;
}

/* Side Sticky Nav */
.guide-sidebar-nav {
  	display: flex;
  	flex-direction: column;
  	gap: 14px;
}

.guide-nav-link {
  	display: flex;
  	align-items: baseline;
  	gap: 8px;
  	text-decoration: none;
  	transition: color 0.2s ease;
	color: var(--text) !important;
}

.guide-nav-link:hover, .guide-nav-link.is-active {
  	color: var(--tint) !important;
}

.guide-nav-number {
  	font-size: 12px;
  	font-variant-numeric: tabular-nums;
  	color: inherit;
}

.guide-nav-link.is-intro {
  	margin-bottom: 4px;
}

[data-guide-nav] {
  	scroll-margin-top: 110px;
}

/* ==========================================
   GUIDE TOPIC ARCHIVE
   ========================================== */

.topic-guide-title {
	margin-bottom: 20px !important;
}

/* ==========================================
   FAQ PAGE
   ========================================== */

.faq-heading {
	max-width: 400px !important;
	margin-bottom: 20px !important;
}

/* ==========================================
   SEARCH RESULTS
   ========================================== */

.empty-result-container {
	padding: 28px;
	border-radius: 24px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

/* ==========================================
   SUPPORT PAGE
   ========================================== */

.support-form {
	padding: 24px;
	border-radius: 24px;
	border: var(--border) 1px solid;
	background: var(--surface);
	color: var(--foreground);
	width: 100%;
}

.contact-form-webcase {
	display: flex;
    flex-direction: column;
}

.contact-form-webcase label, .ofa-login label {
	margin-bottom: 8px;
}

.support-submit {
	cursor: pointer;
	border: none;
}

.contact-form-webcase input:not([type="submit"]), .contact-form-webcase textarea, #ofa-email {
	background: color-mix(in oklab,var(--card) 70%,transparent);
	padding: 16px;
	border-radius: 12px;
	border: var(--border) 1px solid;
}

.contact-form-webcase input:focus, .contact-form-webcase input:focus-visible,
.contact-form-webcase textarea:focus, .contact-form-webcase textarea:focus-visible,
 #ofa-email:focus, #ofa-email:focus-visible {
    border: var(--tint) 2px solid !important;
	outline: none !important;
}

.contact-form-webcase input:not([type="submit"])::placeholder, .contact-form-webcase textarea::placeholder, #ofa-email::placeholder {
	color: var(--text) !important;
}

.button_submit {
	display: flex;
	gap: 8px;
	align-items: center;
}

.button_submit p {
	color: var(--text);
}

/* Tablet */
@media (max-width: 1024px) {
	.support-column.guide-sticky-column {
		display: block !important;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.button_submit {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

/* ==========================================
   GUIDES ARCHIVE
   ========================================== */

.browse-title {
	margin-bottom: 8px !important;
}

.orcai-archive-topics {
	display: flex;
	flex-direction: row;
	gap: 8px;
	flex-wrap: wrap;
}

.orcai-archive-topics .orcai-topic-pill {
	background: var(--surface);
	border: var(--border) 1px solid;
	color: var(--text);
	text-decoration: none;
	border-radius: 99px;
	padding: 8px 18px;
}

.orcai-archive-topics .orcai-topic-pill.is-active {
	background: var(--tint);
	color: #fff;
	border: var(--tint) 1px solid;
}

.orcai-archive-type select {
	color: var(--text);
	background: var(--surface);
	border-radius: 12px;
	border: var(--border) 1px solid;
	padding: 12px;
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: 14px;
}

@supports (appearance: base-select) {
	.orcai-archive-type select,
	.orcai-archive-type select::picker(select) {
		appearance: base-select;
	}
	.orcai-archive-type select {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}
	.orcai-archive-type select::picker(select) {
		margin-top: 6px;
		border-radius: 12px;
		border: 1px solid var(--border);
		background: var(--surface);
		color: #fff !important;
		font-family: var(--font-sans);
		box-shadow: var(--shadow);
	}
	.orcai-archive-type select option {
		color: var(--text);
		background: var(--surface);
		cursor: pointer;
		font-family: var(--font-sans);
		padding: 8px;
		font-size: 14px;
		
		&::checkmark {
			display: none;
		}
	}
	.orcai-archive-type select option:hover,
	.orcai-archive-type select option:focus {
		background: var(--tint);
		color: #fff;
	}
	.orcai-archive-type select option:checked {
		background: var(--tint);
		color: #fff;
	}
}

.current-range {
	text-align: center;
	margin-bottom: 16px !important;
}

.orcai-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	align-items: center;
}

.orcai-pagination .page-numbers {
	padding: 12px 18px !important;
}

/* ==========================================
   SIGN IN PAGE
   ========================================== */

.orcai-login-container {
	width: 100vw;
	height: 100vh;
	display: flex;
    justify-content: center;
    align-items: center;
}

.signin-desc {
	margin-top: 12px !important;
}

.signin-title-wrapper {
	text-align: center;
}

.orcai-login {
	background: var(--surface);
	border-radius: 24px;
	box-shadow: var(--shadow);
	border: var(--border) 1px solid;
	padding: 28px;
}

.ofa-login, .ofa-login__providers {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ofa-login form {
	display: flex;
	flex-direction: column;
}

.ofa-login .primary-link-button {
	justify-content: center !important;
}

#ofa-email {
	margin-bottom: 16px;
}

.span-divider {
	height: 1px;
	background-color: var(--border);
	width: 100%;
}

.signin-divider {
	text-transform: uppercase;
	display: flex;
	gap: 12px;
	align-items: center;
}

.signin-button {
	width: 100% !important;
}

/* Google Button - BEGIN */
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: var(--surface);
  background-image: none;
  border: 1px solid var(--border);
  -webkit-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: var(--foreground);
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 44px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 10px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
}
/* Google Button - END */

/* Apple Button - BEGIN */
.orcai-social-login {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 12px 20px;
	border-radius: 12px;
	background: var(--foreground);
	color: var(--surface);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
	border: none;
}
.orcai-social-login:hover {
 	box-shadow: var(--shadow);
}
/* Apple Button - END*/

@media (max-width: 767px) {
	.orcai-login-container {
    	width: 90vw;
		margin: auto;
	}
}

/* ==========================================
   AUTH CHECK PAGE
   ========================================== */

.ofa-check-card {
	display: flex;
    align-items: center;
    gap: 12px;
}

.ofa-check-card.error {
	flex-direction: column;
	gap: 22px;
}

.ofa-check-card svg {
	color: var(--tint);
}

.ofa-check-card.error .animate-spin, .ofa-check-card .ofa-retry {
	display: none;
}

.ofa-check-card.error .ofa-retry {
	display: flex !important;
}

.animate-spin {
	animation: spin 1s linear infinite; /* spin 1s linear infinite */
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================
   Default Style
   ========================================== */


.breakdance .bde-section.desktop-menu{
	position: fixed;
    z-index: 99;
    background: #495965;
    padding: 16px 0px;
}
.breakdance .bde-section.desktop-menu   .header-col{
	position:relative;
}
.breakdance .bde-section.desktop-menu   .header-col .bde-container-link.breakdance-link{
	 position: absolute;
    top: -7px;
    width: auto;
} 
.breakdance .menu-col.bde-column{
	    align-items: center;
}
.breakdance .booking-btn-sec.bde-section .section-container {padding:0px;}
.default-container{
	padding:50px 0px;
	max-width:1520px!important;
	margin:0px auto!important;
	}


.section-featured-image {
    line-height: 0;
    padding: 0px;
    margin: 0px;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    display: block;
    position: relative;
    left: 50%;
    right: 50%;
}
.section-featured-image .overlay h1 {
    color: #fff !important;
}

.section-featured-image img {
    width: 100%;
    height: 500px;
    display: block;object-fit: cover;
}
.section-featured-image .overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(to bottom, rgb(0 0 0 / 18%), #0000002c);
}

.ee-gallery--justified .ee-gallery-item-figure {
/*     box-shadow: 0px 3px 6px #00000029;
    border: 10px solid #fff;
    background: #fff; */
}
.breakdance .service-heading{
	text-align:left!important;
}
.breakdance .bde-gallery-111-104 .ee-gallery-item{
/* 	    background: #00000030;
    background-color: #FFF;
    box-shadow: 0px 3px 6px 0px #00000029; */
}

/* custom post container */

.breakdance .custom-post-container .bde-loop .bde-loop-item,.breakdance .custom-post-container .bde-loop{
	gap:0px;padding:0px; margin:0px;
}
.breakdance .custom-post-container .button-group .bde-loop .bde-loop-item,.breakdance .custom-post-container .button-group .bde-loop{
	gap:20px;padding:0px; margin:0px;
}
.breakdance .custom-post-container .bde-loop .bde-loop-item .ee-gallery-swiper{
	padding: 0px;
    margin: 0px;
}

.breakdance .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n+1) .bde-columns{
	    flex-direction: row-reverse;
    align-items: center;
}
.breakdance .custom-post-container .bde-loop.ee-posts .bde-loop-item .bde-columns  .bde-column{ justify-content:center; }
.breakdance .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n+1) .bde-columns .bde-column{
	       padding-left: 20px;
}
.breakdance .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n) .bde-columns .bde-column{
	       padding-right: 20px;
} 

.breakdance .custom-post-container .bde-loop.ee-posts .bde-loop-item .bde-columns  .bde-column figure{max-height:500px; }




.breakdance .catering-services .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n+1) .bde-columns .bde-column{
	       padding: 0px!important;background:var(--bde-palette-color-1-0f797681-ba80-45c0-a45a-275b5138f070);color: var(--bde-text-color, var(--bde-body-text-color))!important;
	
}
.breakdance .catering-services .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n+1) .bde-columns .bde-column:nth-child(2n)>div{
	       max-width:100%;
	padding-left:8%;
	padding-right:8%;
	color: var(--bde-text-color, var(--bde-body-text-color))!important;
	
}
.breakdance   .catering-services .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n) .bde-columns .bde-column {
    padding-right: 0px!important;align-items: flex-end;
}
.breakdance .catering-services .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n) .bde-columns .bde-column:nth-child(2n)>div{
	  max-width:100%px;
	padding-right:8%;  padding-left:8%;   width: 100%;
}

.breakdance .default-service .catering-services .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n+1) .bde-columns .bde-column:nth-child(2n)>div{
	       max-width:100%;
	padding-left:30px;color: var(--bde-text-color, var(--bde-body-text-color))!important;
	
}
.breakdance   .default-service .catering-services .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n) .bde-columns .bde-column {
    padding-right: 0px!important;align-items: flex-end;
}
.breakdance .default-service .catering-services .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n) .bde-columns .bde-column:nth-child(2n)>div{
	  max-width:100%;
	padding-right:30px;    width: 100%;
}


.breakdance  .custom-post-container .bde-loop.ee-posts .bde-loop-item .bde-columns .bde-gallery, .breakdance  .custom-post-container .bde-loop.ee-posts .bde-loop-item .bde-columns .bde-gallery .swiper ,.breakdance  .custom-post-container .bde-loop.ee-posts .bde-loop-item .bde-columns .bde-gallery .breakdance-swiper-wrapper, .breakdance .custom-post-container .bde-loop.ee-posts .bde-loop-item .bde-columns , .breakdance .custom-post-container .bde-loop.ee-posts .bde-loop-item .bde-columns .bde-column{
	height: 100%;
}
.breakdance  .custom-post-container .bde-loop.ee-posts .bde-loop-item .bde-columns .button-group {
	padding-bottom:20px;
}
.catering-services{
	

}

.catering-services .section-container{
	width: 100%!important;
    max-width: 100%!important;
    padding: 0px!important;
    margin: 0px!important;
    
    gap: 0px!important;
}

.social-media .bde-loop .bde-loop-item *{ 
color:#495965 !important;
}

@media only screen and (max-width: 1119px){
	
	.breakdance .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n) .bde-columns{        flex-direction: column;}
	.breakdance .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n+1) .bde-columns .bde-column {
    padding-left: 0px;
}
	.breakdance .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n) .bde-columns .bde-column{
		 padding-right: 0px;
	}
	.breakdance .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(2n+1) .bde-columns {
    flex-direction: column;
    align-items: center;
}
	.breakdance .catering-services .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(n) .bde-columns .bde-column:nth-child(n)>div {
    max-width: 100%;
   padding: 20px!important;
    width: 100%;
}
	
.breakdance .custom-post-container .bde-loop.ee-posts .bde-loop-item:nth-child(n) .bde-columns .bde-column:nth-child(n)>div {

    padding: 20px!important;
    width: 100%;
}
	
	.homepage-image {
    width: 100%;
    height: 50vh !important;
    object-fit: cover;
    object-position: center center;
}
	}
	
.post-watson{
  display:flex;
  flex-direction:column;
  height:100%;
}
	.whatson-readmore{
  margin-top:auto;
}
	.post-container
	{
		height: 100%
	}

.homepage-image
{
	width:100%;
	height:100vh;
	object-fit: cover;
object-position: center center;
}

/* ===== OUTER WRAPPER (repeater item / clickable card) ===== */
.post-link {
  display: flex;
  height: 100%;
  text-decoration: none;
  padding: 0px;
  transition: all 0.3s ease;
}

/* ensure all children animate nicely */
.post-link * {
  transition: all 0.3s ease;
}

/* ===== CARD STRUCTURE ===== */
.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* ===== IMAGE ===== */
.card-media {
  width: 100%;

  overflow: hidden;
}

.card-image {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== CONTENT AREA ===== */
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
}

/* ===== TEXT ===== */
.card-title {
  margin: 0;
}

.card-excerpt {
  margin: 0;
}

/* ===== READ MORE (sticks to bottom) ===== */
.card-readmore {
  margin-top: auto;
  padding-top: 8px;
}

/* ===== HOVER EFFECT ===== */
.post-link:hover {
  background-color: #495965;
  transform: translateY(-4px);
}

/* change all text on hover */
.post-link:hover .card-title,
.post-link:hover .card-excerpt,
.post-link:hover .card-readmore,
.post-link:hover a {
  color: #ffffff;
}

/* ===== OPTIONAL: force override if Oxygen styles fight back ===== */
/* uncomment ONLY if needed */
/*
.post-link:hover * {
  color: #ffffff !important;
}
*/

/* ===== OPTIONAL: ensure repeater items stretch properly ===== */
.post-container,
.post-link {
  display: flex;
}

.post-container > * {
  height: 100%;
}

.omnihyper-logo
{
width: 20px !important;
    height: 13px !important;
}


@media only screen and (max-width: 600px){

	
	.section-featured-image img {
    width: 100%;
    height: 300px;
    display: block;
	object-fit: cover;
	object-position: center center;
}
}
/* offcanvas menu */
.hd-menu-section .breakdance-dropdown--wp .breakdance-dropdown-links {
    width: 100%;
    z-index: 9;
}
.hd-menu-section .breakdance-dropdown .breakdance-dropdown-link{
	z-index: 9;    display: inline-block;
}
.hd-menu-section .breakdance-dropdown .breakdance-dropdown-section{
	    gap: 0px;
    padding: 15px;
}
.offcanvasmenu .breakdance-dropdown--wp .breakdance-dropdown-links .menu-item{    padding: 0px 0px;}
.offcanvasmenu .breakdance-dropdown--wp .breakdance-dropdown-links .menu-item a{    padding: 10px 10px;}

/* visible when JS adds .open */
.offcanvasmenu .breakdance-dropdown.open .breakdance-dropdown-floater {display: block !important;}
.offcanvasmenu .breakdance-dropdown .breakdance-dropdown-floater {
  display: none !important;
  opacity: 1 !important;
  visibility: visible !important;position:relative!important;top:0px!important;left: 0px !important;
}
.offcanvasmenu .breakdance-dropdown-caret {display:none!important;}
.offcanvasmenu .breakdance-dropdown .breakdance-dropdown-floater .breakdance-dropdown-body{ background:transparent!important;} 

.offcanvasmenu .hd-menu-section ul.breakdance-menu-list li{
	    padding: 10px;
}


.hd-menu-section.hid-menu-section{
  top: 0px;

  transform: translateX(100%); 
  transition: transform 0.4s ease;
}
.hd-menu-section.show-section{
 transform: translateX(0);
}

.hd-menu-section .breakdance-menu-link li a{
	padding-bottom:0px!important; color:#fff!important;
}

.hd-menu-section {

  transform: translateX(100%); 
  transition: transform 0.4s ease;
	 transform: translateX(100%); 
       width: 400px;
    margin: 0px 0px 0px 0px;
    align-items: right;
    text-align: right;
    position: fixed;
    min-height: 100vh;
    right: 0px;   
	background:#e8e8e8;
    top: 0px;
    padding: 60px 0px 0px 0px !important;
    z-index: 99;
    overflow-y: auto;
    height: 100%!Important;
    overflow-x: hidden;
}



.hd-menu-section .breakdance-menu-list{
	    display: inline-block;width:100%;

	
}
.hd-menu-section .menu-website-logo{
	 align-items: flex-start;
    display: flex;
}


.hd-menu-section ul.breakdance-menu-list li.current_page_item{ background: var(--bde-brand-primary-color);}
.hd-menu-section ul.breakdance-menu-list li{
	padding: 0px;
    width: 100%;
    display: block;
    width: 100%;
    margin-bottom: 10px;
    line-height:26px;
}

.hd-menu-section ul.breakdance-menu-list li.breakdance-menu-topbar{
	display:none;
}
.hd-menu-section .menu-col-block{
	
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: self-start;
    text-align: left;
	padding:0px 20px 20px 20px;    border-bottom: 1px solid #ccc;width:100%;
  
}
    
.hd-menu-section .menu-col-block .bde-button{
	margin-bottom: 20px;margin-bottom: 20px;
    width: calc(100%) !important;
}
.hd-menu-section .menu-col-block .bde-button button{
	width:100%;
}
.hd-menu-section  .menu-hd-social-media .bde-loop{
	display:flex;
	flex-direction:row;
	gap:0px;padding-bottom:30px;
}
.hd-menu-section  .menu-hd-social-media .bde-loop a{
	font-size:32px;
}
.hd-menu-section  .menu-hd-social-media .bde-loop-item {
    display: inline-block;
    margin-bottom: 8px;
    position: relative;
    margin-left: 10px!important; padding: 10px 0px!important;
}
.hd-menu-section .et-menu.nav{
	display:block;
}
.hd-menu-section .menu-opening-hours .bde-loop{
	gap:10px!important;
}
.hd-menu-section .menu-opening-hours .bde-loop-item {

    flex-direction: column;
    gap: 0px;
    padding: 0px;
}
.hd-menu-section .menu-layout{
	display:block;
}
.menu-opening-hours .bde-loop-item .opening-hours {
    padding-right: 10px;
}
 .breakdance  .bde-section.header  .section-container {
	 padding:10px 0px;
}
.ft-opening-hours .bde-loop {
	display:flex!important;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
	gap: 0px;
    padding: 0px;
}
.ft-opening-hours .bde-loop .bde-loop-item {
  width: 100%;
    gap: 0px;
    padding: 0px;
}
.ft-opening-hours .bde-loop .bde-loop-item  span{
	font-weight:800;
	padding-top:20px;
}
.ft-opening-hours h4{
	padding:0px;margin:0px;
}
.menu-website-logo{
	width:180px;
}
.ft-opening-hours .bde-loop .bde-loop-item span:nth-child(1){
	padding-top:0px;
}
.hd-menu-section ul.breakdance-menu-list li:hover a,.hd-menu-section ul.breakdance-menu-list li  .breakdance-dropdown--wp .breakdance-dropdown-links .menu-item:hover  a, .hd-menu-section ul.breakdance-menu-list li:hover button.breakdance-menu-link-arrow, .offcanvasmenu .breakdance-dropdown--wp .breakdance-dropdown-links .menu-item a:hover{
	background: var(--bde-brand-primary-color);!important;
	
	color: #ffffff!important;
}

.hd-menu-section ul.breakdance-menu-list li:hover .breakdance-dropdown-item , .hd-menu-section ul.breakdance-menu-list li:hover  .breakdance-dropdown-item  a{
	background: transparent!important;color:var(--bde-brand-primary-color)!important;
} 
.close-block {
    position: absolute;
    top: 20px;
    right: 20px;
}
.breakdance img.menu-close {
    max-width: 50px !important;
}
.menu-opening-hours .bde-loop-item .opening-hours {
    padding-right: 10px;
}
.opening-hours {
    display: flex;
}
.main-menu-block {
        justify-content: center;
        align-items: center;
        padding: 20px;
    }
.header-right-icon {
        align-items: flex-end !important;
    }
.menu-col-block .bde-loop-item{
	    padding: 0px!important;
}
.menu-col-block a:hover{
	    color: #000 !important;
}
.menu-hd-social-media{
	padding-left:10px;
}

.gift a, .reservation a{
	width:100%!important;
}

.social-media .bde-loop >div{
	border:none;
}
.social-media .bde-loop >div i{
	font-size:32px;
}
.social-media .bde-loop >div a:hover, .social-media .bde-loop >div a:hover i, footer .cont-footer-details a:hover{
	color: var(--bde-links-color)!important;
}
    
.social-media .bde-loop .bde-loop-item{
	    padding: 6px;gap: 0px;
}
.opening-hours{
	flex-direction:column;
}

/* Hide on desktop */
@media (min-width: 1119px) {
  .offcanvasmenu {
    display: none !important;
  }
}

/* Show on tablet & mobile */
@media (max-width: 1119px) {
  .offcanvasmenu {
    display: block;
        z-index: 9999;
  }
}

@media (max-width: 600px) {
    .offcanvasmenu {
        display: block;
        z-index: 9999;
        width: 100%;
    }
}