/*
Theme Name: Ocean Mandala for PropertyFlow Pro
Theme URI: https://example.com
Author: Your Studio
Description: A luxury coastal-accommodation theme built for the PropertyFlow Pro plugin. Every booking, search, dashboard, portal and review feature on this theme is rendered live by PropertyFlow Pro's own shortcodes -- nothing is a static mock. Requires PropertyFlow Pro (WordPress 6.0+, PHP 8.0+, WooCommerce).
Version: 1.0.0
Requires PHP: 8.0
Text Domain: oceanmandala
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* -----------------------------------------------------------------------
   0. Design tokens
------------------------------------------------------------------------ */
:root{
	--color-bg: #faf6ee;
	--color-surface: #ffffff;
	--color-navy: #0c2b36;
	--color-navy-2: #123a49;
	--color-gold: #c08a45;
	--color-gold-dark: #a5763a;
	--color-text: #1c2b2e;
	--color-text-muted: #5c6b6d;
	--color-border: #e8e0d0;
	--font-display: 'Playfair Display', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--radius-sm: 4px;
	--radius-md: 10px;
	--radius-lg: 18px;
	--shadow-card: 0 20px 45px -20px rgba(12,43,54,0.25);
	--shadow-soft: 0 10px 30px -18px rgba(12,43,54,0.35);
	--container: 1220px;
}

/* -----------------------------------------------------------------------
   1. Reset & base
------------------------------------------------------------------------ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; margin: 0 0 .5em; color: var(--color-navy); }
p{ margin: 0 0 1em; }
:focus-visible{ outline: 3px solid var(--color-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.omp-container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.omp-eyebrow{ font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-gold-dark); font-weight: 600; }
.omp-section{ padding: 72px 0; }
.omp-section-tight{ padding: 40px 0; }
.omp-section-head{ text-align: center; max-width: 620px; margin: 0 auto 40px; }
.omp-section-head h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); }
.omp-divider{ width: 56px; height: 3px; background: var(--color-gold); margin: 14px auto 0; border-radius: 2px; }
.omp-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 26px; border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem;
	letter-spacing: .02em; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.omp-btn:hover{ transform: translateY(-1px); }
.omp-btn-gold{ background: var(--color-gold); color: #fff; }
.omp-btn-gold:hover{ background: var(--color-gold-dark); }
.omp-btn-navy{ background: var(--color-navy); color: #fff; }
.omp-btn-navy:hover{ background: var(--color-navy-2); }
.omp-btn-outline{ background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.omp-btn-outline:hover{ background: rgba(255,255,255,.12); }
.omp-admin-notice{ background:#fff3cd; border:1px solid #f0c36d; color:#5c4400; padding:12px 20px; font-size:.85rem; }

/* -----------------------------------------------------------------------
   2. Header
------------------------------------------------------------------------ */
.omp-utility-bar{ background: var(--color-navy); color: rgba(255,255,255,.8); font-size: .78rem; }
.omp-utility-bar .omp-container{ display:flex; justify-content:flex-end; gap:20px; padding-top:8px; padding-bottom:8px; }
.omp-utility-bar a{ opacity:.9; }
.omp-utility-bar a:hover{ color: var(--color-gold); }

.omp-header{ background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top:0; z-index: 40; }
.omp-header .omp-container{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; gap: 24px; }
.omp-logo{ font-family: var(--font-display); font-size: 1.35rem; letter-spacing:.04em; color: var(--color-navy); font-weight:700; line-height:1.05; }
.omp-logo span{ display:block; font-size:.62rem; letter-spacing:.32em; color: var(--color-gold-dark); font-weight:600; font-family: var(--font-body); }
.omp-logo img{ max-height: 54px; width: auto; }

.omp-nav ul{ display:flex; align-items:center; gap: 30px; list-style:none; margin:0; padding:0; }
.omp-nav a{ font-size:.82rem; letter-spacing:.06em; text-transform: uppercase; font-weight:600; color: var(--color-navy); }
.omp-nav a:hover{ color: var(--color-gold-dark); }

.omp-header-actions{ display:flex; align-items:center; gap:16px; }
.omp-menu-toggle{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.omp-menu-toggle span{ display:block; width:24px; height:2px; background:var(--color-navy); margin:5px 0; }

/* -----------------------------------------------------------------------
   3. Hero
------------------------------------------------------------------------ */
.omp-hero{
	position: relative; min-height: 640px; display:flex; align-items:center; color:#fff;
	background-size: cover; background-position: center;
}
.omp-hero::after{
	content:''; position:absolute; inset:0;
	background: linear-gradient(100deg, rgba(9,32,40,.82) 0%, rgba(9,32,40,.55) 45%, rgba(9,32,40,.25) 100%);
}
.omp-hero .omp-container{ position:relative; z-index:2; padding-top: 90px; padding-bottom: 170px; }
.omp-hero-inner{ max-width: 620px; }
.omp-hero h1{ color:#fff; font-size: clamp(2.3rem, 5vw, 3.4rem); line-height:1.1; margin-bottom:.4em; }
.omp-hero p{ font-size:1.05rem; color: rgba(255,255,255,.88); max-width: 480px; }
.omp-hero-actions{ margin-top: 20px; }

/* Floating search/book card, overlapping the hero bottom like the reference design */
.omp-search-card{
	position: relative; z-index: 5; margin-top: -120px; margin-bottom: 60px;
	background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
	padding: 32px clamp(20px,4vw,40px);
}
.omp-search-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom: 18px; }
.omp-search-card-head h2{ font-size:1.3rem; margin:0; }
.omp-search-card-head p{ margin:0; color: var(--color-text-muted); font-size:.9rem; }
.omp-search-card-body :where(input, select, button){ font-family: var(--font-body); }

/* -----------------------------------------------------------------------
   4. Cards / grids
------------------------------------------------------------------------ */
.omp-grid{ display:grid; gap: 26px; }
.omp-grid-2{ grid-template-columns: repeat(2, 1fr); }
.omp-grid-3{ grid-template-columns: repeat(3, 1fr); }
.omp-grid-4{ grid-template-columns: repeat(4, 1fr); }

.omp-card{
	background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden;
	box-shadow: var(--shadow-soft); border: 1px solid var(--color-border);
	display:flex; flex-direction:column;
}
.omp-card-media{ aspect-ratio: 4/3; overflow:hidden; }
.omp-card-media img{ width:100%; height:100%; object-fit: cover; transition: transform .5s ease; }
.omp-card:hover .omp-card-media img{ transform: scale(1.06); }
.omp-card-body{ padding: 18px 20px 22px; flex:1; display:flex; flex-direction:column; }
.omp-card-body h3{ font-size:1.1rem; margin-bottom:.3em; }
.omp-card-body p{ color: var(--color-text-muted); font-size:.92rem; }
.omp-card-price{ margin-top:auto; padding-top:10px; font-weight:700; color: var(--color-navy); }
.omp-card-price small{ font-weight:500; color: var(--color-text-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.omp-card-tag{ position:absolute; margin:12px; background: var(--color-gold); color:#fff; font-size:.72rem; font-weight:700; padding:4px 10px; border-radius: 20px; }
.omp-card-media-wrap{ position:relative; }

/* -----------------------------------------------------------------------
   5. How it works
------------------------------------------------------------------------ */
.omp-steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: 26px; }
.omp-step{ text-align:center; }
.omp-step-icon{
	width:64px; height:64px; border-radius:50%; background: var(--color-bg); border:1px solid var(--color-border);
	display:flex; align-items:center; justify-content:center; margin: 0 auto 14px; font-family: var(--font-display); font-size:1.3rem; color: var(--color-gold-dark);
}
.omp-step h3{ font-size:1rem; }
.omp-step p{ font-size:.88rem; color: var(--color-text-muted); }

/* -----------------------------------------------------------------------
   6. Panels (Airport transfer / feature callouts)
------------------------------------------------------------------------ */
.omp-panel{
	display:grid; grid-template-columns: 1.1fr 1fr; align-items:center; gap:0;
	background: var(--color-surface); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft);
}
.omp-panel-media{ height:100%; min-height:280px; }
.omp-panel-media img{ width:100%; height:100%; object-fit:cover; }
.omp-panel-body{ padding: 40px clamp(20px,4vw,48px); }
.omp-panel-body h2{ font-size:1.6rem; }
.omp-panel-list{ margin: 18px 0 24px; }
.omp-panel-list li{ display:flex; gap:10px; padding:6px 0; color: var(--color-text-muted); font-size:.92rem; }
.omp-panel-list li::before{ content:'✓'; color: var(--color-gold-dark); font-weight:700; }
.omp-panel-reverse{ grid-template-columns: 1fr 1.1fr; }
.omp-panel-reverse .omp-panel-media{ order:2; }

/* -----------------------------------------------------------------------
   7. Reviews / plugin shortcode wrapper
------------------------------------------------------------------------ */
.omp-shortcode-frame{
	background: var(--color-surface); border-radius: var(--radius-lg); border:1px solid var(--color-border);
	box-shadow: var(--shadow-soft); padding: clamp(20px,4vw,44px);
}
.omp-shortcode-frame-flush{ background:transparent; border:0; box-shadow:none; padding:0; }

/* -----------------------------------------------------------------------
   8. Footer
------------------------------------------------------------------------ */
.omp-footer{ background: var(--color-navy); color: rgba(255,255,255,.78); margin-top: 80px; }
.omp-footer-top{ padding: 60px 0 40px; display:grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 40px; }
.omp-footer h4{ color:#fff; font-size:1rem; font-family: var(--font-body); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom: 16px; }
.omp-footer ul li{ padding: 5px 0; font-size:.9rem; display:flex; gap:8px; }
.omp-footer ul li::before{ content:'✓'; color: var(--color-gold); }
.omp-footer a:hover{ color: var(--color-gold); }
.omp-footer-form{ display:flex; gap:8px; margin-top:8px; }
.omp-footer-form input[type=email]{
	flex:1; padding:11px 14px; border-radius: var(--radius-sm); border:1px solid rgba(255,255,255,.25);
	background: rgba(255,255,255,.06); color:#fff; font-family: var(--font-body);
}
.omp-footer-form input::placeholder{ color: rgba(255,255,255,.55); }
.omp-footer-note{ font-size:.82rem; margin-top:10px; color: rgba(255,255,255,.6); }
.omp-social{ display:flex; gap:14px; margin-top:16px; }
.omp-social a{ width:34px; height:34px; border:1px solid rgba(255,255,255,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.omp-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding: 18px 0; }
.omp-footer-bottom .omp-container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:.8rem; }
.omp-footer-bottom a{ margin-left: 18px; }

/* -----------------------------------------------------------------------
   9. Simple pages (about, contact, gallery, generic)
------------------------------------------------------------------------ */
.omp-page-hero{
	background: var(--color-navy); color:#fff; padding: 70px 0 56px; text-align:center; background-size:cover; background-position:center; position:relative;
}
.omp-page-hero::after{ content:''; position:absolute; inset:0; background: rgba(9,32,40,.68); }
.omp-page-hero .omp-container{ position:relative; z-index:2; }
.omp-page-hero h1{ color:#fff; margin-bottom:.2em; }
.omp-page-hero p{ color: rgba(255,255,255,.85); max-width:560px; margin:0 auto; }

.omp-content{ padding: 60px 0; }
.omp-prose{ max-width: 760px; margin: 0 auto; }
.omp-prose h2{ margin-top:1.4em; }

.omp-gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.omp-gallery-grid img{ width:100%; height:220px; object-fit:cover; border-radius: var(--radius-sm); }
.omp-gallery-grid .tall{ grid-row: span 2; height:100%; }

.omp-contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items:start; }
.omp-form-row{ margin-bottom: 16px; }
.omp-form-row label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; color: var(--color-navy); }
.omp-form-row input, .omp-form-row textarea{
	width:100%; padding: 12px 14px; border-radius: var(--radius-sm); border:1px solid var(--color-border);
	font-family: var(--font-body); font-size:.95rem; background: var(--color-surface);
}
.omp-form-note{ margin-top: 14px; padding: 10px 14px; border-radius: var(--radius-sm); font-size:.88rem; }
.omp-form-note-ok{ background:#e6f4ea; color:#1e6b34; }
.omp-form-note-err{ background:#fbe9e7; color:#8a2c1f; }
.omp-info-list{ margin-top: 18px; }
.omp-info-list li{ padding: 8px 0; border-bottom:1px solid var(--color-border); font-size:.94rem; }
.omp-info-list li strong{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--color-text-muted); margin-bottom:2px; }
.omp-map{ margin-top: 24px; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-soft); }
.omp-map iframe{ width:100%; height:280px; border:0; display:block; }

/* -----------------------------------------------------------------------
   10. Responsive
------------------------------------------------------------------------ */
@media (max-width: 960px){
	.omp-grid-4{ grid-template-columns: repeat(2,1fr); }
	.omp-grid-3{ grid-template-columns: repeat(2,1fr); }
	.omp-steps{ grid-template-columns: repeat(2,1fr); }
	.omp-panel, .omp-panel-reverse{ grid-template-columns: 1fr; }
	.omp-panel-media{ min-height: 220px; order: 1 !important; }
	.omp-footer-top{ grid-template-columns: 1fr 1fr; }
	.omp-contact-grid{ grid-template-columns: 1fr; }
	.omp-gallery-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px){
	.omp-nav{
		position:absolute; top:100%; left:0; right:0; background:var(--color-surface);
		border-bottom:1px solid var(--color-border);
		display:none;
	}
	.omp-nav.is-open{ display:block; }
	.omp-nav ul{ flex-direction:column; align-items:stretch; gap: 4px; padding: 16px 24px 24px; }
	.omp-nav a{ display:block; padding: 10px 0; }
	.omp-menu-toggle{ display:block; }
	.omp-grid-2, .omp-grid-3, .omp-grid-4{ grid-template-columns: 1fr; }
	.omp-steps{ grid-template-columns: 1fr 1fr; }
	.omp-footer-top{ grid-template-columns: 1fr; }
	.omp-gallery-grid{ grid-template-columns: 1fr 1fr; }
	.omp-utility-bar .omp-container{ justify-content:center; }
	.omp-search-card{ margin-top: -70px; }
}