.elementor-14300 .elementor-element.elementor-element-58b4fd6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}#elementor-popup-modal-14300{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-14300 .dialog-message{width:83vw;height:100vh;align-items:flex-start;}#elementor-popup-modal-14300 .dialog-close-button{display:flex;}#elementor-popup-modal-14300 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}/* Start custom CSS for html, class: .elementor-element-0a6d2bd *//* ============================================================
   VOYAGE CAROUSEL — GO TRAVEL PHUKET
   ============================================================ */

/* ─── ELEMENTOR POPUP OVERFLOW FIX ─────────────────────────
   ป้องกัน Elementor clip การ์ดซ้าย/ขวาออก                  */
.elementor-popup-modal,
.elementor-popup-modal .dialog-widget-content,
.elementor-popup-modal .elementor-section,
.elementor-popup-modal .elementor-container,
.elementor-popup-modal .elementor-column,
.elementor-popup-modal .elementor-widget-wrap,
.elementor-popup-modal .elementor-widget,
.elementor-popup-modal .elementor-widget-container {
  overflow: visible !important;
}

/* ─── BRAND COLORS ──────────────────────────────────────── */
:root {
  --primary:    #326998;
  --secondary:  #FFCE47;
  --dark:       #2D3748;
  --text-dark:  #0E0D0D;
  --text-light: #FFFFFF;
}

/* ─── WRAPPER ───────────────────────────────────────────────
   overflow: visible → การ์ดซ้าย/ขวาโผล่ออกนอกได้
   bg blur จัดการด้วย .voyage-bg ที่อยู่ภายใน               */
#voyage-carousel {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ─── BACKGROUND BLUR ───────────────────────────────────── */
.voyage-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(40%);
  z-index: 0;
  /* ไม่ใส่ transition เพราะ background-image animate ไม่ได้ */
}

/* ─── TRACK ─────────────────────────────────────────────── */
.voyage-track {
  position: relative;
  width: 100%;
  height: 450px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

/* ─── CARDS ─────────────────────────────────────────────── */
.voyage-card {
  position: absolute;
  width: 260px;
  height: 420px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--text-light);
}

.voyage-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(14, 13, 13, 0.6);
  transition: background 0.5s;
  z-index: 1;
  border-radius: 12px;
  pointer-events: none;   /* ← ไม่ให้ overlay นี้รับ click แทนปุ่ม */
}

.voyage-card.active::after {
  background: rgba(14, 13, 13, 0.15);
}

/* ─── CARD TEXT ─────────────────────────────────────────── */
.voyage-text {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease-out;
  pointer-events: none;
  padding: 0 15px;
}

.voyage-card.active .voyage-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
  pointer-events: auto;
}

.voyage-text h2 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;
  letter-spacing: 1px;
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
  word-wrap: break-word;
}

.voyage-text .line {
  width: 50px;
  height: 3px;
  background: var(--secondary);
  margin: 12px auto;
}

.voyage-text p {
  font-size: 13px;
  margin: 0 0 16px 0;
  font-weight: 400;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
  line-height: 1.4;
}

/* ─── ACTIONS AREA ──────────────────────────────────────── */
.voyage-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;           /* ← อยู่เหนือ ::after overlay */
  pointer-events: auto;  /* ← บังคับรับ click */
}

/* ─── ปุ่ม ดูรายละเอียด ─────────────────────────────────── */
.voyage-btn {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  display: inline-block;
}

.btn-book {
  background-color: var(--secondary);
  color: var(--text-dark);
  border: 1px solid var(--secondary);
}
.btn-book:hover {
  background-color: #fff;
  border-color: #fff;
  transform: scale(1.05);
  color: var(--text-dark);
}

.btn-details {
  background-color: rgba(50, 105, 152, 0.85);
  color: var(--text-light);
  border: 1px solid var(--primary);
  backdrop-filter: blur(5px);
}
.btn-details:hover {
  background-color: var(--primary);
  transform: scale(1.05);
  color: var(--text-light);
}

/* ─── elementor-template shortcode (Book Now button) ────── */
.voyage-actions .elementor-button-wrapper,
.voyage-actions .elementor-widget-button {
  width: auto !important;
}

.voyage-actions .elementor-button {
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  background-color: var(--secondary) !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--secondary) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s !important;
}

.voyage-actions .elementor-button:hover {
  background-color: #fff !important;
  border-color: #fff !important;
  transform: scale(1.05) !important;
  color: var(--text-dark) !important;
}

/* ─── CARD POSITIONS ────────────────────────────────────── */
.voyage-card.active  { transform: translateX(0)      scale(1.10); z-index: 5; border: 2px solid rgba(255, 206, 71, 0.4); }
.voyage-card.left-1  { transform: translateX(-210px) scale(0.85); z-index: 4; filter: brightness(65%); }
.voyage-card.right-1 { transform: translateX(210px)  scale(0.85); z-index: 4; filter: brightness(65%); }
.voyage-card.left-2  { transform: translateX(-350px) scale(0.65); z-index: 3; filter: brightness(38%); }
.voyage-card.right-2 { transform: translateX(350px)  scale(0.65); z-index: 3; filter: brightness(38%); }
.voyage-card.hidden  { transform: translateX(0)      scale(0.50); z-index: 1; opacity: 0; pointer-events: none; }

/* ─── NAV ARROWS ────────────────────────────────────────── */
.voyage-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  font-size: 40px;
  cursor: pointer;
  z-index: 10;
  opacity: 0.6;
  transition: all 0.3s;
  padding: 20px;
  background: rgba(45, 55, 72, 0.6);
  border-radius: 50%;
  user-select: none;
}
.voyage-nav:hover { opacity: 1; background: var(--primary); }
.voyage-nav.prev  { left: 30px; }
.voyage-nav.next  { right: 30px; }

/* ─── RESPONSIVE 768px ──────────────────────────────────── */
@media (max-width: 768px) {
  .voyage-card         { width: 220px; height: 360px; }
  .voyage-card.left-1  { transform: translateX(-120px) scale(0.85); }
  .voyage-card.right-1 { transform: translateX(120px)  scale(0.85); }
  .voyage-card.left-2  { transform: translateX(-185px) scale(0.60); opacity: 0; }
  .voyage-card.right-2 { transform: translateX(185px)  scale(0.60); opacity: 0; }
  .voyage-nav          { font-size: 24px; padding: 10px; }
  .voyage-nav.prev     { left: 8px; }
  .voyage-nav.next     { right: 8px; }
  .voyage-text h2      { font-size: 17px; }
}/* End custom CSS */