/* =========================================================================
   OutdoorGate Asia — site-wide "Tidal Mangrove" design framework
   Applies to every page except the bespoke homepage. Reversible (deactivate
   the plugin to revert). Transforms chrome + content styling to the new design.
   ========================================================================= */
:root{
  --og-teal:#12857A; --og-teal-d:#0E5A52; --og-leaf:#5CB08E;
  --og-sun:#F0793F; --og-sun-d:#DA5F2A; --og-ink:#0A2622;
  --og-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --og-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
body.og-skin{ overflow-x:hidden; }
/* Site-wide guard: never let long words/URLs overflow their box (prevents the
   unprofessional horizontal text overrun, especially on mobile). */
.og-skin p,.og-skin li,.og-skin a,.og-skin h1,.og-skin h2,.og-skin h3,.og-skin h4,.og-skin h5,.og-skin span,.og-skin td,.og-skin blockquote,.og-skin figcaption{ overflow-wrap:break-word; }
.og-skin img,.og-skin video,.og-skin iframe{ max-width:100%; height:auto; }

/* ---- Page-hero banner (title in serif over a branded gradient) ---- */
.og-pagehero{
  position:relative; margin:0 0 clamp(30px,4vw,48px); background:linear-gradient(135deg,#0E5A52,#07231F); overflow:hidden;
}
.og-pagehero::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 150% at 88% 0%,rgba(240,121,63,.22),transparent 55%); }
.og-pagehero::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 10% 100%,rgba(92,176,142,.18),transparent 60%); }
.og-pagehero-in{ position:relative; max-width:1180px; margin:0 auto; min-height:clamp(148px,16vw,208px); display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,4.2vw,46px) clamp(24px,6vw,48px); color:#fff; }
.og-skin .og-pagehero .og-eyebrow,.og-skin .og-pagehero .og-pagehero-title{ overflow-wrap:break-word; }
.og-skin .og-pagehero .og-eyebrow{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#8fe0c6 !important; margin:0 0 14px; }
.og-skin .og-pagehero .og-pagehero-title{ font-family:var(--og-serif) !important; color:#fff !important; font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.04; margin:0; max-width:22ch; text-wrap:balance; }
/* hide the theme's own page title where the hero is injected */
.og-hero-page .wpbf-page-title-container,.og-hero-page .wpbf-page-title,.og-hero-page .page-header .entry-title,.og-hero-page .entry-header .entry-title,.og-hero-page h1.entry-title,.og-hero-page .wp-block-post-title{ display:none !important; }

/* ---- Typography ---- */
.og-skin h1,.og-skin h2,.og-skin h3,.og-skin h4,
.og-skin .elementor-heading-title,.og-skin .entry-title,.og-skin .widget-title,.og-skin .elementor-price-table__heading{
  font-family:var(--og-serif) !important; letter-spacing:-.01em;
}
.og-skin h1,.og-skin h2,.og-skin h3,.og-skin .elementor-heading-title,.og-skin .entry-title{ color:var(--og-teal-d) !important; }
.og-skin a:not(.wpbf-button):not(.elementor-button):not(.button):not(.wpbf-menu-item):not(.wp-block-button__link):not(.og-foot-logo):not(.og-site-footer a){ color:var(--og-teal); }
.og-skin a:not(.wpbf-button):not(.elementor-button):not(.button):hover{ color:var(--og-teal-d); }
::selection{ background:var(--og-teal); color:#fff; }

/* ---- Buttons: legible coral ---- */
.og-skin .wpbf-button,.og-skin .elementor-button,.og-skin .wp-block-button__link,.og-skin .wp-element-button,.og-skin .button,
.og-skin .woocommerce a.button,.og-skin .woocommerce button.button,.og-skin .woocommerce input.button,.og-skin .woocommerce button.button.alt,.og-skin .woocommerce #place_order,.og-skin .woocommerce #respond input#submit,
.og-skin .forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit,.og-skin .elementor-form .elementor-button{
  background:#DA5F2A !important; background-image:linear-gradient(180deg,#F0793F,#DA5F2A) !important; color:#fff !important; border:none !important;
  border-radius:100px !important; padding:13px 30px !important; font-weight:600 !important; text-shadow:none !important; opacity:1 !important;
  box-shadow:0 8px 18px -6px rgba(218,95,42,.5) !important; transition:transform .16s ease,box-shadow .16s ease,filter .16s ease !important;
}
.og-skin .elementor-button:hover,.og-skin .button:hover,.og-skin .wpbf-button:hover,.og-skin .woocommerce .button:hover,.og-skin .forminator-button-submit:hover,.og-skin .elementor-form .elementor-button:hover{ filter:brightness(1.06); transform:translateY(-1px) !important; }

/* ---- Content polish: rounded media + soft shadows ---- */
.og-skin .elementor-widget-image img,.og-skin .wp-block-image img,.og-skin .wpbf-post-image img{ border-radius:14px; }
.og-skin .elementor-widget-image img{ box-shadow:0 26px 54px -32px rgba(10,38,34,.5); }

/* ---- Pricing tables (Elementor) ----
   The design left headers/buttons transparent (white text = invisible), AND
   Elementor's lazy-load rule `.e-con.e-parent:nth-of-type(n+4)…{background:none!important}`
   (specificity 0,0,5,0) was zeroing them out. These selectors are built to
   exceed 0,0,5,0 with !important + literal hex so they always win. */
.og-skin .elementor-price-table{ border-radius:16px !important; overflow:hidden; box-shadow:0 24px 50px -34px rgba(10,38,34,.4); background:#fff !important; }
body.og-skin .elementor-widget-price-table .elementor-price-table .elementor-price-table__header.elementor-price-table__header{
  background:#0E5A52 !important; background-image:linear-gradient(135deg,#12857A,#0E5A52) !important; padding:26px 18px !important;
}
body.og-skin .elementor-price-table__header .elementor-price-table__heading,
body.og-skin .elementor-price-table__header .elementor-price-table__subheading,
body.og-skin .elementor-price-table__header *{ color:#fff !important; }
body.og-skin .elementor-price-table__price,body.og-skin .elementor-price-table__integer-part,body.og-skin .elementor-price-table__currency{ color:#0E5A52 !important; }
body.og-skin .elementor-widget-price-table .elementor-price-table .elementor-price-table__button.elementor-price-table__button{
  background:#DA5F2A !important; background-image:linear-gradient(180deg,#F0793F,#DA5F2A) !important; color:#fff !important;
  border:none !important; opacity:1 !important; box-shadow:0 8px 18px -6px rgba(218,95,42,.5) !important;
}
body.og-skin .elementor-price-table__features-list li{ color:#33413d !important; }
body.og-skin .elementor-price-table__ribbon-inner{ background:#12857A !important; }

/* ---- Premium navigation ---- */
.og-skin .wpbf-navigation{ border-bottom:1px solid #eef2f0; background:#fff; box-shadow:0 1px 24px -18px rgba(10,38,34,.5); }
/* trim the logo + add the "OutdoorGate Asia" wordmark so inner pages match the homepage nav (was ~93px tall, logo-only) */
.og-skin .wpbf-logo a{ display:inline-flex !important; align-items:center; gap:11px; text-decoration:none; }
.og-skin .wpbf-logo img{ max-height:46px !important; width:auto !important; height:auto !important; }
.og-skin .wpbf-logo a::after{ content:"OutdoorGate Asia"; font-family:var(--og-serif); font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--og-teal-d); white-space:nowrap; }
@media(max-width:480px){ .og-skin .wpbf-logo a::after{ font-size:17px; } }
.og-skin .wpbf-menu>.menu-item>a{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:15px; font-weight:500; letter-spacing:.005em; color:#1d2b27; transition:color .15s ease; }
.og-skin .wpbf-menu>.menu-item>a:hover,.og-skin .wpbf-menu>.current-menu-item>a,.og-skin .wpbf-menu>.current-menu-ancestor>a,.og-skin .wpbf-mobile-menu .menu-item>a:hover{ color:#12857A !important; }
/* dropdowns */
.og-skin .wpbf-menu .sub-menu{ background:#fff !important; border:1px solid #eef2f0 !important; border-radius:14px !important; box-shadow:0 26px 54px -26px rgba(10,38,34,.32) !important; padding:8px !important; min-width:238px; }
.og-skin .wpbf-menu .sub-menu .menu-item>a{ border-radius:9px; padding:11px 15px !important; font-size:14.5px; font-weight:500; color:#33413d !important; transition:background .14s ease,color .14s ease; }
.og-skin .wpbf-menu .sub-menu .menu-item>a:hover{ background:#EEF5F2 !important; color:#0E5A52 !important; }
/* CTA pill (Book Now) — desktop */
.og-skin .wpbf-menu>.og-nav-cta{ display:flex; align-items:center; margin-left:6px; }
.og-skin .wpbf-menu>.og-nav-cta>a{ background:#DA5F2A !important; background-image:linear-gradient(180deg,#F0793F,#DA5F2A) !important; color:#fff !important; border-radius:100px !important; padding:10px 24px !important; font-weight:600 !important; box-shadow:0 10px 20px -8px rgba(218,95,42,.55) !important; transition:transform .16s ease,filter .16s ease !important; line-height:1.2 !important; }
.og-skin .wpbf-menu>.og-nav-cta>a:hover{ filter:brightness(1.06); transform:translateY(-1px); color:#fff !important; }
/* CTA in mobile menu */
.og-skin .wpbf-mobile-menu .og-nav-cta>a{ color:#F0793F !important; font-weight:700 !important; }
/* Convert the theme's 320px right-drawer mobile menu into the SAME full-width
   dropdown the homepage uses (fixes both the "different mechanism" and the
   "fixed 320px width" inconsistency). Reuses the theme toggle + .active JS. */
@media(max-width:920px){
  .og-skin .wpbf-mobile-menu-container{
    position:fixed !important; top:83px !important; left:0 !important; right:0 !important; bottom:auto !important;
    width:100% !important; max-width:100% !important; height:auto !important; max-height:0 !important; overflow:hidden !important;
    background:rgba(255,255,255,.98) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    box-shadow:0 26px 46px -26px rgba(10,38,34,.45) !important; border-top:1px solid #eef2f0 !important;
    transform:none !important; transition:max-height .32s ease !important;
  }
  .og-skin .wpbf-mobile-menu-container.active{ max-height:calc(100vh - 83px) !important; overflow-y:auto !important; }
  .og-skin .wpbf-mobile-menu{ width:100% !important; max-width:100% !important; padding:8px clamp(22px,6vw,34px) calc(24px + env(safe-area-inset-bottom)) !important; box-shadow:none !important; background:transparent !important; }
  .og-skin .wpbf-mobile-menu>.menu-item{ width:100% !important; float:none !important; }
  .og-skin .wpbf-mobile-menu>.menu-item>a{ font-family:var(--og-serif) !important; font-size:18px !important; font-weight:600 !important; color:#1d2b27 !important; padding:15px 4px !important; border-bottom:1px solid #eef2f0 !important; }
  .og-skin .wpbf-mobile-menu .sub-menu{ box-shadow:none !important; border:none !important; padding:0 0 0 12px !important; background:transparent !important; }
  .og-skin .wpbf-mobile-menu .sub-menu .menu-item>a{ font-size:15.5px !important; padding:11px 4px !important; }
  .og-skin .wpbf-mobile-menu>.og-nav-cta>a{ margin-top:16px !important; background:#DA5F2A !important; background-image:linear-gradient(180deg,#F0793F,#DA5F2A) !important; color:#fff !important; border-radius:100px !important; text-align:center; border-bottom:none !important; font-weight:700 !important; }
}

/* ---- WooCommerce ---- */
.og-skin .woocommerce span.onsale{ background:var(--og-sun) !important; color:#fff !important; }
.og-skin .woocommerce ul.products li.product,.og-skin .woocommerce div.product{ }
.og-skin .woocommerce .price,.og-skin .woocommerce span.amount{ color:var(--og-teal-d) !important; }
.og-skin .woocommerce .star-rating span::before,.og-skin .woocommerce p.stars a::before{ color:var(--og-sun) !important; }
:focus-visible{ outline:2.5px solid var(--og-sun); outline-offset:2px; }

/* ---- Forms: align every field to the Tidal Mangrove design ----
   (Forminator booking/contact, WooCommerce checkout, Elementor forms, core
   inputs). Submit buttons are already handled by the buttons block above. */
.og-skin .forminator-input,.og-skin .forminator-textarea,
.og-skin .forminator-custom-form input[type=text],.og-skin .forminator-custom-form input[type=email],.og-skin .forminator-custom-form input[type=tel],.og-skin .forminator-custom-form input[type=number],.og-skin .forminator-custom-form input[type=date],.og-skin .forminator-custom-form input[type=url],.og-skin .forminator-custom-form textarea,.og-skin .forminator-custom-form select,
.og-skin .woocommerce form .form-row input.input-text,.og-skin .woocommerce form .form-row textarea,.og-skin .woocommerce form .form-row select,
.og-skin .elementor-field-group input:not([type=submit]):not([type=radio]):not([type=checkbox]),.og-skin .elementor-field-group textarea,.og-skin .elementor-field-group select,
.og-skin input[type=text],.og-skin input[type=email],.og-skin input[type=tel],.og-skin input[type=number],.og-skin input[type=search],.og-skin input[type=url],.og-skin input[type=date],.og-skin textarea{
  border:1.5px solid #D7E0DA !important; border-radius:12px !important; background:#fff !important; color:#122A26 !important;
  padding:13px 16px !important; font-family:var(--og-sans) !important; font-size:15px !important; line-height:1.5 !important; box-shadow:none !important;
  transition:border-color .15s ease,box-shadow .15s ease !important;
}
body.og-skin .forminator-custom-form input:focus,body.og-skin .forminator-custom-form textarea:focus,body.og-skin .forminator-custom-form select:focus,body.og-skin .forminator-input:focus,
.og-skin .woocommerce form .form-row input.input-text:focus,.og-skin .woocommerce form .form-row textarea:focus,
.og-skin .elementor-field-group input:focus,.og-skin .elementor-field-group textarea:focus,
.og-skin input:focus,.og-skin textarea:focus,.og-skin select:focus{
  border-color:#12857A !important; box-shadow:0 0 0 3px rgba(18,133,122,.16) !important; outline:none !important;
}
.og-skin ::placeholder{ color:#8aa39b !important; opacity:1; }
/* labels */
.og-skin .forminator-label,.og-skin .forminator-custom-form label,.og-skin .woocommerce form .form-row > label,.og-skin .elementor-field-label{
  color:#0E5A52 !important; font-weight:600 !important; font-family:var(--og-sans) !important;
}
/* Select2 dropdowns (Forminator + Woo) — match the inputs */
.og-skin .select2-container--default .select2-selection--single,.og-skin .select2-container--default .select2-selection--multiple{
  min-height:50px !important; padding:7px 12px !important; border:1.5px solid #D7E0DA !important; border-radius:12px !important; background:#fff !important;
}
.og-skin .select2-container--default.select2-container--focus .select2-selection--single,.og-skin .select2-container--default.select2-container--open .select2-selection--single{
  border-color:#12857A !important; box-shadow:0 0 0 3px rgba(18,133,122,.16) !important;
}
.og-skin .select2-container--default .select2-selection--single .select2-selection__rendered{ color:#122A26 !important; line-height:34px !important; padding:0 !important; }
.og-skin .select2-container--default .select2-selection--single .select2-selection__arrow{ height:48px !important; right:8px !important; }
.og-skin .select2-dropdown{ border:1.5px solid #D7E0DA !important; border-radius:12px !important; overflow:hidden; box-shadow:0 20px 44px -22px rgba(10,38,34,.3) !important; }
.og-skin .select2-container--default .select2-results__option--highlighted[aria-selected]{ background:#12857A !important; color:#fff !important; }
/* checkboxes / radios */
.og-skin input[type=checkbox],.og-skin input[type=radio]{ accent-color:#12857A; width:17px; height:17px; }

/* ---- Footer: hide the theme footer, show the premium one ---- */
.og-skin .wpbf-page-footer,.og-skin #wpbf-footer{ display:none !important; }
.og-site-footer{ background:var(--og-ink); color:#c9ded7; margin-top:clamp(22px,3vw,40px); padding:52px 0 calc(38px + env(safe-area-inset-bottom)); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.og-foot-wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(24px,6vw,48px); }
.og-site-footer a,.og-foot-brand p,.og-foot-bottom span,.og-foot-logo span{ overflow-wrap:break-word; word-break:break-word; }
.og-foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
@media(max-width:820px){ .og-foot-grid{ grid-template-columns:1fr 1fr; } }
.og-foot-logo{ display:inline-flex; align-items:center; gap:11px; color:#fff !important; font-family:var(--og-serif); font-size:20px; font-weight:600; text-decoration:none; }
.og-foot-logo img{ width:44px; height:44px; border-radius:50%; object-fit:contain; background:#fff; padding:3px; }
.og-foot-brand p{ color:#9dbbb1; font-size:14px; max-width:36ch; margin:14px 0 0; line-height:1.6; }
.og-foot-rating{ color:#f0a35f !important; font-weight:600; }
.og-site-footer h5{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#7fa89d; margin:0 0 14px; }
.og-site-footer a{ display:block; color:#dcebe5 !important; font-size:14.5px; padding:5px 0; text-decoration:none; opacity:.9; }
.og-site-footer a:hover{ color:var(--og-leaf) !important; opacity:1; }
.og-foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:46px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); color:#7fa89d; font-size:13px; }
