/*
Theme Name: DWT Listing MoveAbroad
Description: Child theme for DWT Listing
Author: MoveAbroad
Template: dwt-listing
Version: 1.0.0
Text Domain: dwt-listing-moveabroad
*/

/* Google Fonts — loaded via functions.php wp_enqueue for performance */

/* ══════════════════════════════════════════════════════════════
   BRAND COLOURS — 7-Colour Final Palette · Locked March 2026
   ══════════════════════════════════════════════════════════════ */
:root {
  /* Core 7 */
  --midnight: #1C3550;
  --slate:    #2A6494;
  --seafoam:  #3AABAA;
  --gold:     #D4A852;
  --peach:    #F2B89A;
  --stone:    #EDE0D0;
  --ice:      #E8F4F4;

  /* Derived tints — CSS use only, not standalone brand colours */
  --aqua:     #7ECFC8;   /* Seafoam @ ~55% — hover states only */
  --gold-lt:  #ECC96A;   /* Gold light — dark bg text/logo use */
  --peach-lt: #FADDCC;   /* Peach light — alert backgrounds */

  /* Semantic tokens */
  --text:     #1C3550;   /* = Midnight */
  --text-2:   #3A5870;   /* Body secondary */
  --text-3:   #7A9AAE;   /* Muted / labels */
  --divider:  rgba(28, 53, 80, 0.10);
}


/* ══════════════════════════════════════════════════════════════
   BASE DEFAULTS
   ══════════════════════════════════════════════════════════════ */
body {
  background-color: var(--ice);
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  line-height: 1.6;
}

/* Never pure white page background — use Ice */
.bg-white,
.bg-gray {
  background-color: var(--ice) !important;
}


/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   Playfair Display: headlines, city names, editorial
   DM Sans: body, UI, nav, buttons, labels
   ══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.heading-2 h2,
.heading-2 h3 {
  font-family: 'Playfair Display', serif;
  color: var(--midnight);
}

p,
.form-control,
label,
input,
textarea,
select,
button,
.btn,
.menu-links > li > a,
.menu-button li a {
  font-family: 'DM Sans', sans-serif;
}

a {
  color: var(--slate);
}

a:hover,
a:focus {
  color: var(--seafoam);
}


/* ══════════════════════════════════════════════════════════════
   HEADER & NAVIGATION
   ══════════════════════════════════════════════════════════════ */
.header-top,
.mega-menu,
.mega-menu.transparent,
.mega-menu.header2 {
  background-color: var(--midnight);
}

.header-info-bar {
  background-color: var(--midnight);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.menu-links > li > a,
.menu-button li a {
  color: rgba(255, 255, 255, 0.85);
}

.menu-links > li > a:hover,
.menu-links > li > a:focus,
.menu-button li a:hover {
  color: var(--aqua);
}

.menu-logo > li > a {
  color: #fff;
}

/* Topbar text */
.header-top-profile,
.header-top-profile a,
.location-selector,
.header-social a {
  color: rgba(255, 255, 255, 0.60);
}

.header-top-profile a:hover,
.header-social a:hover {
  color: var(--aqua);
}


/* ══════════════════════════════════════════════════════════════
   BUTTONS
   Primary: Midnight  |  CTA: Seafoam  |  Premium: Gold
   ══════════════════════════════════════════════════════════════ */
.btn-theme {
  background-color: var(--seafoam);
  border-color: var(--seafoam);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  border-radius: 8px;
}

.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active {
  background-color: var(--aqua);
  border-color: var(--aqua);
  color: #fff;
}

/* Override parent theme red hover — never use red */
.btn-theme:hover,
.btn-theme:active {
  background-color: var(--aqua) !important;
  border-color: var(--aqua) !important;
}

.btn-default {
  background-color: var(--midnight);
  border-color: var(--midnight);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  border-radius: 8px;
}

.btn-default:hover,
.btn-default:focus {
  background-color: var(--slate);
  border-color: var(--slate);
  color: #fff;
}

/* Outline / ghost button */
.btn-light {
  background-color: transparent;
  border: 1.5px solid var(--seafoam);
  color: var(--seafoam);
  border-radius: 8px;
}

.btn-light:hover {
  background-color: var(--seafoam);
  color: #fff;
}


/* ══════════════════════════════════════════════════════════════
   LISTING CARDS
   ══════════════════════════════════════════════════════════════ */
.listing-item {
  border-radius: 16px;
  border: 1px solid var(--divider);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(28, 53, 80, 0.06);
}

.listing-item:hover {
  box-shadow: 0 8px 32px rgba(28, 53, 80, 0.12);
}

.listing-details {
  font-family: 'DM Sans', sans-serif;
}

.listing-item .ratings {
  color: var(--gold);
}

.cardz {
  border-radius: 14px;
  border: 1px solid var(--divider);
  overflow: hidden;
}

.card-title {
  font-family: 'Playfair Display', serif;
  color: var(--midnight);
}

.card-info {
  font-family: 'DM Sans', sans-serif;
  color: var(--text-2);
}


/* ══════════════════════════════════════════════════════════════
   FORMS & INPUTS
   ══════════════════════════════════════════════════════════════ */
.form-control {
  border: 1px solid var(--divider);
  border-radius: 8px;
  color: var(--text);
  background-color: #fff;
}

.form-control:focus {
  border-color: var(--seafoam);
  box-shadow: 0 0 0 3px rgba(58, 171, 170, 0.15);
}

.form-group label {
  color: var(--text);
  font-weight: 500;
}

.input-group-addon {
  background-color: var(--ice);
  border-color: var(--divider);
  color: var(--text-2);
}


/* ══════════════════════════════════════════════════════════════
   SEARCH & FILTERS
   ══════════════════════════════════════════════════════════════ */
.main-search-bar,
.top-search-form {
  background-color: var(--midnight);
}

.filter {
  font-family: 'DM Sans', sans-serif;
  border-radius: 8px;
}

.location-filters,
.main-filters {
  background-color: #fff;
  border: 1px solid var(--divider);
  border-radius: 12px;
}


/* ══════════════════════════════════════════════════════════════
   SECTIONS & BACKGROUNDS
   ══════════════════════════════════════════════════════════════ */
section {
  background-color: var(--ice);
}

.highlights {
  background-color: var(--stone);
}

.subscribe-section {
  background-color: var(--midnight);
  color: #fff;
}

.heading-2 {
  text-align: center;
}

.heading-white h2,
.heading-white h3 {
  color: #fff;
}

/* Section backgrounds — alternating Ice and Stone */
.home-main,
.home-main-2 {
  background-color: var(--ice);
}

.page-header-area-2 {
  background-color: var(--midnight);
}


/* ══════════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════════ */
.small-breadcrumb {
  background-color: var(--midnight);
}

.breadcrumb-link,
.breadcrumb-link a {
  color: rgba(255, 255, 255, 0.60);
}

.breadcrumb-link a:hover {
  color: var(--aqua);
}


/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.footer,
footer.footer-3 {
  background-color: var(--midnight);
}

.footer h3,
.footer h4,
.footer_block h4 {
  font-family: 'Playfair Display', serif;
  color: #fff;
}

.footer p,
.footer_block p,
.footer-content .copyright {
  color: rgba(255, 255, 255, 0.50);
  font-family: 'DM Sans', sans-serif;
}

.footer a,
.footer-links a,
ul.footer-menu a {
  color: rgba(255, 255, 255, 0.60);
}

.footer a:hover,
.footer-links a:hover,
ul.footer-menu a:hover {
  color: var(--aqua);
}

.footer-bottom-section,
.footer-bottom {
  background-color: var(--midnight);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-social a {
  color: rgba(255, 255, 255, 0.40);
}

.footer-social a:hover {
  color: var(--seafoam);
}

.footer-logo {
  color: #fff;
}


/* ══════════════════════════════════════════════════════════════
   SIDEBAR & WIDGETS
   ══════════════════════════════════════════════════════════════ */
.widget {
  border-radius: 14px;
  border: 1px solid var(--divider);
}

.sidebar .panel {
  border-radius: 14px;
  border: 1px solid var(--divider);
}


/* ══════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════ */
.pagination > li > a,
.pagination > li > span {
  color: var(--slate);
  border-color: var(--divider);
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--seafoam);
  border-color: var(--seafoam);
  color: #fff;
}

.pagination > li > a:hover {
  background-color: var(--ice);
  color: var(--seafoam);
}


/* ══════════════════════════════════════════════════════════════
   ALERTS & WARNINGS — Peach only, never red
   ══════════════════════════════════════════════════════════════ */
.alert-danger,
.alert-warning {
  background-color: var(--peach-lt);
  border-color: var(--peach);
  color: #8a3010;
}

.alert-success {
  background-color: #e0f4f4;
  border-color: var(--seafoam);
  color: var(--midnight);
}

.alert-info {
  background-color: var(--ice);
  border-color: var(--slate);
  color: var(--slate);
}


/* ══════════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════════ */
.modal-content {
  border-radius: 16px;
  border: 1px solid var(--divider);
}

.modal-header {
  background-color: var(--ice);
  border-bottom: 1px solid var(--divider);
  border-radius: 16px 16px 0 0;
}

.modal-header h4,
.modal-header h5 {
  font-family: 'Playfair Display', serif;
  color: var(--midnight);
}

.modal-footer {
  border-top: 1px solid var(--divider);
}


/* ══════════════════════════════════════════════════════════════
   SPINNER / LOADING
   ══════════════════════════════════════════════════════════════ */
.dwt-preloader {
  background-color: var(--ice);
}


/* ══════════════════════════════════════════════════════════════
   SELECTION
   ══════════════════════════════════════════════════════════════ */
::selection {
  background-color: var(--seafoam);
  color: #fff;
}

::-moz-selection {
  background-color: var(--seafoam);
  color: #fff;
}


/* ══════════════════════════════════════════════════════════════
   WOOCOMMERCE OVERRIDES
   ══════════════════════════════════════════════════════════════ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--seafoam);
  color: #fff;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--aqua);
  color: #fff;
}


/* ══════════════════════════════════════════════════════════════
   REGION / DESTINATION CARDS
   Card-based browse-by-region layout for homepage and archive.
   Use these classes in WPBakery or page content.
   ══════════════════════════════════════════════════════════════ */

/* Grid container — use on a wrapper div */
.mar-region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 24px 0;
}

@media (max-width: 768px) {
  .mar-region-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Region card */
.mar-region-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--divider);
  background: #fff;
  box-shadow: 0 4px 20px rgba(28, 53, 80, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}

.mar-region-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(28, 53, 80, 0.14);
  color: inherit;
  text-decoration: none;
}

/* Card image/gradient header */
.mar-region-card__header {
  height: 180px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  background-size: cover;
  background-position: center;
}

/* Gradient overlays per region — apply as extra class */
.mar-region-card__header--thailand {
  background: linear-gradient(160deg, #3AABAA 0%, #1C3550 100%);
}

.mar-region-card__header--portugal {
  background: linear-gradient(160deg, #2A6494 0%, #1C3550 100%);
}

.mar-region-card__header--mexico {
  background: linear-gradient(160deg, #1C3550, #3AABAA, #D4A852);
}

/* When using a real photo, add a scrim */
.mar-region-card__header--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 53, 80, 0.75) 0%, transparent 60%);
  border-radius: 18px 18px 0 0;
}

.mar-region-card__header > * {
  position: relative;
  z-index: 1;
}

.mar-region-card__region-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.50);
  margin-bottom: 4px;
  font-family: 'DM Sans', sans-serif;
}

.mar-region-card__country {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

/* Card body */
.mar-region-card__body {
  padding: 20px;
}

.mar-region-card__desc {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 16px;
}

.mar-region-card__price {
  font-size: 14px;
  color: var(--midnight);
  font-weight: 600;
  margin-bottom: 16px;
}

.mar-region-card__cta {
  font-size: 14px;
  color: var(--seafoam);
  font-weight: 600;
  text-decoration: none;
}

.mar-region-card:hover .mar-region-card__cta {
  color: var(--aqua);
}

/* City tags inside a region card */
.mar-region-card__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.mar-city-tag {
  background: var(--ice);
  color: var(--midnight);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  transition: background 0.15s ease;
}

.mar-city-tag:hover {
  background: var(--seafoam);
  color: #fff;
  text-decoration: none;
}


/* ══════════════════════════════════════════════════════════════
   LISTING GRID — Card layout for search results / archives
   ══════════════════════════════════════════════════════════════ */

/* Override DWT default listing grid for cleaner card layout */
.papular-listing .listing-item,
.papular-listing-2 .listing-item {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}

/* Featured listing — larger card at top */
.mar-featured-listing {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--divider);
  background: #fff;
  box-shadow: 0 6px 32px rgba(28, 53, 80, 0.08);
}

@media (max-width: 768px) {
  .mar-featured-listing {
    grid-template-columns: 1fr;
  }
}

.mar-featured-listing__image {
  min-height: 280px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.mar-featured-listing__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Listing card amenity tags */
.mar-amenity-tag {
  background: #e0f4f4;
  color: var(--seafoam);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
}

/* Badge styles — verified, premium, new, red flag */
.mar-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
}

.mar-badge--new {
  background: var(--midnight);
  color: #fff;
}

.mar-badge--verified {
  background: #e0f4f4;
  color: var(--seafoam);
  border: 1px solid #a8ddd8;
}

.mar-badge--premium {
  background: linear-gradient(135deg, #ECC96A, #D4A852);
  color: #5a3200;
  font-weight: 700;
}

.mar-badge--redflag {
  background: var(--peach-lt);
  color: #8a3010;
  border: 1px solid var(--peach);
}

.mar-badge--country {
  background: var(--ice);
  color: var(--midnight);
}

/* AI Quality Score circle */
.mar-score {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--seafoam));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mar-score__value {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
}

/* Score bar */
.mar-score-bar {
  height: 6px;
  background: #e0ecf0;
  border-radius: 3px;
  overflow: hidden;
}

.mar-score-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--seafoam), var(--gold));
  border-radius: 3px;
}


/* ══════════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER — GDPR requirement
   Add cookie consent plugin and style with these classes.
   ══════════════════════════════════════════════════════════════ */
.mar-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--midnight);
  color: rgba(255, 255, 255, 0.80);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 0 -4px 24px rgba(28, 53, 80, 0.20);
}

.mar-cookie-banner a {
  color: var(--aqua);
  text-decoration: underline;
}

.mar-cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.mar-cookie-accept {
  background: var(--seafoam);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}

.mar-cookie-accept:hover {
  background: var(--aqua);
}

.mar-cookie-decline {
  background: transparent;
  color: rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.20);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}

.mar-cookie-decline:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.40);
}

@media (max-width: 600px) {
  .mar-cookie-banner {
    flex-direction: column;
    text-align: center;
    padding: 16px 20px;
  }
  .mar-cookie-banner__actions {
    width: 100%;
    justify-content: center;
  }
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE POLISH
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
}