/*
Theme Name: Roam Child
Theme URI: https://roam.qodeinteractive.com
Description: A child theme of Roam Theme
Author: Mikado Themes
Author URI: http://themeforest.net/user/mikado-themes
Version: 1.0.2
Text Domain: roam
Template: roam
*/

.single-tour-item .mkdf-sidebar {
	background-image: url(https://roam.hu/wp-content/uploads/2017/08/background-booking-img-1.jpg);
	padding: 20px;
}

.recze .mkdf-tour-title {display: inline-block !important;}

.recze .mkdf-tours-standard-item-price-holder {display: block !important; width: 100% !important;}


/* Layout */
.kuoni-wrap{--gap:48px;max-width:1200px;margin:0 auto;padding:32px 20px;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--gap)}
@media (max-width:1024px){.kuoni-wrap{grid-template-columns:1fr}}
.kuoni-hero{background:#f7f7f7;border-bottom:1px solid #eee}
.kuoni-hero__inner{max-width:1200px;margin:0 auto;padding:32px 20px}
.kuoni-hero__title{font-size:40px;line-height:1.1;margin:0 0 8px}
.kuoni-hero__lead{font-size:18px;color:#555;margin:0}

.kuoni-aside__sticky{position:sticky;top:calc(24px + var(--wp-admin-bar,0px))}
body.admin-bar .kuoni-aside__sticky{--wp-admin-bar:32px}
.kuoni-aside__title{margin:0 0 16px}

/* Kártyák (jobb hasáb) */
.kuoni-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:1px solid #eee;border-radius:12px;background:#fff;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.kuoni-card__thumb img{display:block;width:100%;height:auto;border-radius:10px}
.kuoni-card__title{font-size:16px;margin:0}
.kuoni-card__title a{text-decoration:none}

/* Multi-step űrlap (alap) */
.ti-form{background:#fff;border:1px solid #eee;border-radius:16px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.ti-steps{display:flex;gap:12px;margin:0 0 20px;counter-reset:st}
.ti-step-dot{display:flex;align-items:center;gap:10px}
.ti-step-dot__num{width:28px;height:28px;border-radius:50%;border:1.5px solid #bbb;display:inline-flex;align-items:center;justify-content:center;font-weight:600;background:#fafafa}
.ti-step-dot.is-active .ti-step-dot__num{border-color:#111}
.ti-step-dot__label{font-size:14px;color:#666}
.ti-step{margin:0}
.ti-step[hidden]{display:none}
.ti-grid{display:grid;gap:16px}
@media (min-width:680px){.ti-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ti-actions{display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.ti-btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;border:1px solid #ddd;background:#111;color:#fff;padding:10px 16px;cursor:pointer}
.ti-btn--ghost{background:#fff;color:#111}
.ti-help{font-size:13px;color:#666;margin-top:4px}
.ti-list{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}

/* --- Inspirációk rács --- */
.kuoni-inspo-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:1024px){
  .kuoni-inspo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* első kártya legyen „nagy” (mint a screenshoton) */
.kuoni-inspo:first-child{grid-column:1 / -1}

.kuoni-inspo__img{
  position:relative; display:block; overflow:hidden;
  border-radius:16px; background:#f6f6f6;
}
.kuoni-inspo__img img{
  width:100%; height:100%; display:block; object-fit:cover;
  aspect-ratio: 4 / 3; /* nagy kártya is szépen kitölt */
  transition:transform .35s ease;
}
.kuoni-inspo__img:hover img{ transform:scale(1.03) }

.kuoni-inspo__badge{
  position:absolute; left:12px; bottom:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; font-size:12px; font-weight:700;
  background:rgba(255,255,255,.95); border-radius:9999px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.kuoni-inspo__badge svg{opacity:.7}

.kuoni-inspo__title{
  font-size:16px; margin:8px 4px 0; line-height:1.3;
}
.kuoni-inspo__title a{ text-decoration:none }

/* Képes hero */
.kuoni-hero--bg{position:relative;isolation:isolate;color:#fff}
.kuoni-hero--bg{min-height:220px}
@media (min-width:1024px){.kuoni-hero--bg{min-height:350px}}

.kuoni-hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.kuoni-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);filter:saturate(1.05) contrast(1.05)}
.kuoni-hero__overlay{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.35) 100%)
}

.kuoni-hero__inner{max-width:1200px;margin:0 auto;padding:72px 20px}
.kuoni-hero__title{font-size:44px;line-height:1.1;margin:0 0 10px;text-shadow:0 2px 12px rgba(0,0,0,.4); color: #ffff;}
.kuoni-hero__lead{font-size:18px;margin:0 0 18px;color:#f5f5f5}
@media (max-width:640px){.kuoni-hero__title{font-size:32px}}

.kuoni-hero__cta{
  display:inline-block;margin-top:4px;padding:12px 18px;border-radius:999px;
  font-weight:700;text-decoration:none;background:#ffffff;color:#111;
  box-shadow:0 6px 20px rgba(0,0,0,.18)
}
.kuoni-hero__cta:hover{transform:translateY(-1px)}

/* Egységes bevitelmezők */
.ti-input, .ti-textarea, .ti-input--select{
  width:100%;
  padding:12px 14px;
  border:1px solid #e5e5e5;
  border-radius:12px;
  background:#fff;
  font-size:16px;
  line-height:1.4;
  color:#111;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ti-input:focus, .ti-textarea:focus, .ti-input--select:focus{
  outline:none;
  border-color:#111;
  box-shadow:0 0 0 3px rgba(0,0,0,.08);
}

/* Placeholder és disabled */
.ti-input::placeholder, .ti-textarea::placeholder{ color:#9aa0a6; }
.ti-input[disabled], .ti-textarea[disabled]{ background:#f6f6f6; color:#777; }

/* Számmezők – spinnerek elrejtése (cross-browser barát) */
.ti-input[type="number"]::-webkit-outer-spin-button,
.ti-input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.ti-input[type="number"]{ -moz-appearance:textfield; }

/* Dátum input – finomhangolás */
.ti-input--date{ font-variant-numeric: tabular-nums; letter-spacing:.02em; }
.ti-input--date::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:.7; filter:invert(.3);
}
.ti-input--date::-webkit-datetime-edit{ padding:0 2px; }
.ti-input--date::-webkit-clear-button{ display:none; }

/* Select – egységes megjelenés */
.ti-input--select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:
  linear-gradient(45deg, transparent 50%, #888 50%),
  linear-gradient(135deg, #888 50%, transparent 50%),
  linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%, 100% 0;
  background-size: 6px 6px, 6px 6px, 2.5em 100%;
  background-repeat: no-repeat;
  padding-right:42px;
}

/* Textarea – szép doboz */
.ti-textarea{
  min-height:120px;
  resize:vertical;
}

/* Címkék és űrlap rács igazítás */
.ti-grid label{ display:block; }
.ti-grid label > .ti-input,
.ti-grid label > .ti-textarea,
.ti-grid label > .ti-input--select{ margin-top:6px; }

/* Telefon input extra */
.ti-input--tel{ letter-spacing:.02em }

/* Egységes mezők (ha még nincs) */
.ti-input, .ti-textarea, .ti-input--select{
  width:100%; padding:12px 14px; border:1px solid #e5e5e5; border-radius:12px;
  background:#fff; font-size:16px; line-height:1.4; color:#111;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.ti-input:focus, .ti-textarea:focus, .ti-input--select:focus{
  outline:none; border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.08);
}
.ti-textarea{ min-height:120px; resize:vertical }
.ti-input--date::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.7; filter:invert(.3) }
.ti-input--select{ appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #888 50%),
    linear-gradient(135deg, #888 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%, 100% 0;
  background-size: 6px 6px, 6px 6px, 2.5em 100%;
  background-repeat: no-repeat; padding-right:42px;
}

/* Köszönő modal */
.ti-modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:1000 }
.ti-modal.is-open{ display:block }
.ti-modal__dialog{ position:relative; background:#fff; max-width:520px; margin:12vh auto; padding:24px;
  border-radius:16px; box-shadow:0 12px 32px rgba(0,0,0,.25) }
.ti-modal__close{ position:absolute; top:8px; right:12px; border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer }
.ti-modal__ok{ margin-top:8px }

.ti-hide{display:none !important}

/* Ez a CSS a MEZŐKET rendezi egy sorba */
.mailchimp-sor {
  display: flex;
  flex-wrap: wrap; /* Mobilon egymás alá törnek */
  column-gap: 15px; /* Térköz az elemek között */
  margin-left: 10px;
  margin-right: 10px;
}

/* A mezők rugalmasan nőnek/zsugorodnak */
.mailchimp-mezo {
  flex: 1 1 200px; 
  min-width: 200px; /* Alap szélesség, mielőtt törni kezd */
}

/* Input mezők stílusai */
.mailchimp-mezo input[type="text"],
.mailchimp-mezo input[type="email"] {
  width: 100%;
  box-sizing: border-box; 
}


/* --- GOMB STÍLUSOK (MÓDOSÍTVA) --- */

/* A GOMB SORA: KÖZÉPRE IGAZÍTOTT TARTALOM */
.mailchimp-gomb-sor {
  margin-top: 15px; /* Térköz a felette lévő mezőktől */
  text-align: center; /* EZ A MÓDOSÍTÁS: A gombot középre igazítja */
}

/* A GOMB STÍLUSA: EGYEDI SZÍN, NEM TELJES SZÉLESSÉG */
.mailchimp-gomb-sor input[type="submit"] {
  background-color: #303030; /* EZ A MÓDOSÍTÁS: kért háttérszín */
  /* A 'width: 100%' EL LETT TÁVOLÍTVA, 
     így a gomb csak annyi helyet foglal, amennyi kell neki. */
  box-sizing: border-box;
}

/* Opcionális: Szín a gomb szövegének, ha az alap nem látszik */
.mailchimp-gomb-sor input[type="submit"] {
  color: #FFFFFF; /* Fehér szövegszín a sötét háttérhez */
}

/* Opcionális: Hover (rávitt egér) effektus a gombhoz */
.mailchimp-gomb-sor input[type="submit"]:hover {
  background-color: #505050; /* Egy kicsit világosabb szürke, ha ráviszik az egeret */
  cursor: pointer;
}

.sticky-price-wrapper .offer-button:hover {
    color: white;
}

@media (max-width: 768px) {
    
    
    /* A szülő konténer beállítása */
    body.page-template-tours .mkdf-grid-row,
    body.post-type-archive-tour-item .mkdf-grid-row {
        display: flex;       /* Flexbox aktiválása */
        flex-direction: column; /* Egymás alá rendezés */
    }

    /* A kisebb oszlop (sidebar) előre hozása */
    body.page-template-tours .mkdf-grid-col-3,
    body.post-type-archive-tour-item .mkdf-grid-col-3
     {
        order: -1; /* Ez teszi a lista legelejére */
        margin-bottom: 30px; /* Opcionális: kis hely, hogy ne folyjon össze az alatta lévővel */
    }
    
    /* Opcionális: ha a col-9-et biztosan alá akarod */
    body.page-template-tours .mkdf-grid-col-9,
    body.post-type-archive-tour-item .mkdf-grid-col-9 {
        order: 1;
    }
}