/* ETTL CMS v2.4.2 targeted refinement
   Layout/data preserved. Hero structure and hero tabs are not changed. */

:root {
  --ettl-navy: #071b33;
  --ettl-blue: #0b5fff;
  --ettl-cyan: #20b8ff;
  --ettl-line: rgba(148, 163, 184, 0.34);
  --ettl-soft-shadow: 0 16px 38px rgba(7, 27, 51, 0.09);
  --ettl-strong-shadow: 0 22px 48px rgba(7, 27, 51, 0.14);
}

/* HERO FORM: readability polish only. No geometry, tab, headline or section changes. */
#ettl-react-root .ettl-hero-form-polish input:not([type='checkbox']),
#ettl-react-root .ettl-hero-form-polish select,
#ettl-react-root .ettl-hero-form-polish textarea {
  background: #ffffff !important;
  border-color: #c7d2e1 !important;
  color: #10243f !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 12px rgba(7, 27, 51, 0.035) !important;
}

#ettl-react-root .ettl-hero-form-polish input:not([type='checkbox']):focus,
#ettl-react-root .ettl-hero-form-polish select:focus,
#ettl-react-root .ettl-hero-form-polish textarea:focus {
  border-color: rgba(11, 95, 255, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.10), 0 7px 18px rgba(7, 27, 51, 0.06) !important;
}

#ettl-react-root .ettl-hero-form-polish input::placeholder,
#ettl-react-root .ettl-hero-form-polish textarea::placeholder {
  color: #74849b !important;
  opacity: 1 !important;
}

#ettl-react-root .ettl-hero-form-polish label,
#ettl-react-root .ettl-hero-form-polish [class*='text-slate-500'],
#ettl-react-root .ettl-hero-form-polish [class*='text-slate-600'] {
  color: #4b5f79 !important;
}

/* Home service cards: clear buttons and a deliberate full-width corporate card. */
#ettl-react-root .ettl-view-button {
  background: linear-gradient(135deg, #071b33, #0d315d) !important;
  color: #ffffff !important;
  border: 1px solid rgba(11, 95, 255, 0.22) !important;
  box-shadow: 0 10px 24px rgba(7, 27, 51, 0.15) !important;
}

#ettl-react-root .ettl-view-button:hover {
  background: linear-gradient(135deg, #0b5fff, #0a4dcc) !important;
  color: #ffffff !important;
}

@media (min-width: 1024px) {
  #ettl-react-root .ettl-home-services-grid > #service-card-corporate-travel {
    grid-column: 1 / -1;
    width: min(100%, 1120px);
    justify-self: center;
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(285px, 0.85fr);
    box-shadow: var(--ettl-soft-shadow);
  }

  #ettl-react-root #service-card-corporate-travel > div:first-child {
    display: grid;
    grid-template-columns: minmax(320px, 1.15fr) minmax(300px, 0.85fr);
    align-items: stretch;
  }

  #ettl-react-root #service-card-corporate-travel > div:first-child > div:first-child {
    aspect-ratio: auto !important;
    min-height: 250px;
    height: 100%;
  }

  #ettl-react-root #service-card-corporate-travel > div:first-child > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px !important;
  }

  #ettl-react-root #service-card-corporate-travel > div:last-child {
    margin-top: 0 !important;
    padding: 28px !important;
    border-top: 0 !important;
    border-left: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Reduce the large dead spaces between homepage sections. */
#ettl-react-root [data-ettl-active-page='home'] main > div.space-y-16 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 2.5rem !important;
}

#ettl-react-root .ettl-airline-section {
  padding-top: 2.25rem !important;
  padding-bottom: 2.75rem !important;
}

#ettl-react-root .ettl-tight-before-airlines {
  padding-bottom: 1.75rem !important;
}

/* Airline carousel: bigger, readable, real airline-specific aircraft photos. */
#ettl-react-root .ettl-airline-card-real {
  width: 330px !important;
  height: 188px !important;
  padding: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow: 0 14px 32px rgba(7, 27, 51, 0.10) !important;
}

#ettl-react-root .ettl-airline-card-real:hover {
  box-shadow: 0 20px 42px rgba(7, 27, 51, 0.15) !important;
  transform: translateY(-3px);
}

#ettl-react-root .ettl-airline-card-real > div {
  position: relative;
  z-index: 2;
}

#ettl-react-root .ettl-airline-card-real h3,
#ettl-react-root .ettl-airline-card-real h3 + div {
  max-width: 47%;
  white-space: normal !important;
}

#ettl-react-root .ettl-airline-card-real .ettl-airline-real-photo {
  position: absolute;
  z-index: 1;
  right: 10px;
  top: 58px;
  width: 49%;
  height: 86px;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  background: rgba(245, 248, 252, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.20);
  box-shadow: 0 10px 20px rgba(7, 27, 51, 0.09);
}

#ettl-react-root .ettl-airline-card-real [class*='border-t'] {
  position: relative;
  z-index: 3;
  margin-right: 45%;
}

#ettl-react-root .ettl-airline-card-real img:not(.ettl-airline-real-photo) {
  position: relative;
  z-index: 3;
}

/* Travel Services: Japan belongs to the Japan division, not the travel-services tabs. */
#ettl-react-root [data-ettl-active-page='travel-services'] .space-y-20 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 3rem !important;
}

#ettl-react-root [data-ettl-active-page='travel-services'] .mt-12.space-y-20 {
  margin-top: 2.5rem !important;
}

#ettl-react-root .ettl-service-detail-section {
  box-shadow: var(--ettl-soft-shadow) !important;
}

#ettl-react-root .ettl-service-detail-section:hover {
  box-shadow: var(--ettl-strong-shadow) !important;
}

/* Detail pages: trim excess vertical padding while keeping layout/content intact. */
#ettl-react-root [data-ettl-active-page='flights'] main > div,
#ettl-react-root [data-ettl-active-page='visa'] main > div,
#ettl-react-root [data-ettl-active-page='umrah'] main > div,
#ettl-react-root [data-ettl-active-page='corporate'] main > div,
#ettl-react-root [data-ettl-active-page='japan'] main > div {
  padding-top: 2.25rem !important;
  padding-bottom: 2.5rem !important;
}

/* Automatically repaired low-contrast text. */
#ettl-react-root .ettl-force-dark-text {
  color: #24364e !important;
  opacity: 1 !important;
}

#ettl-react-root h1.ettl-force-dark-text,
#ettl-react-root h2.ettl-force-dark-text,
#ettl-react-root h3.ettl-force-dark-text,
#ettl-react-root h4.ettl-force-dark-text,
#ettl-react-root strong.ettl-force-dark-text {
  color: #071b33 !important;
}

#ettl-react-root .ettl-force-light-text {
  color: #f8fafc !important;
  opacity: 1 !important;
}

/* Japan imagery: clearer, richer, still editable through Visual Editor. */
#ettl-react-root .ettl-japan-activity-image {
  filter: saturate(1.04) contrast(1.03);
  transition: transform 0.35s ease, filter 0.35s ease;
}

#ettl-react-root .ettl-japan-activity-image:hover {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.025);
}

/* Footer: navy glass overlay only; no gold patches. */
#ettl-react-root footer.ettl-glass-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 -14px 34px rgba(7, 27, 51, 0.10);
}

#ettl-react-root footer.ettl-glass-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01) 46%, rgba(255, 255, 255, 0.025)),
    radial-gradient(ellipse at 50% 0%, rgba(120, 196, 255, 0.09), transparent 58%);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
}

#ettl-react-root footer.ettl-glass-footer::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: -30%;
  left: -48%;
  width: 36%;
  height: 170%;
  transform: rotate(12deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.02), rgba(204, 234, 255, 0.14), rgba(255, 255, 255, 0.03), transparent);
  animation: ettlFooterGlassSweep 13s cubic-bezier(.4, 0, .2, 1) infinite;
}

#ettl-react-root footer.ettl-glass-footer > * {
  position: relative;
  z-index: 1;
}

@keyframes ettlFooterGlassSweep {
  0%, 64% { left: -48%; }
  100% { left: 125%; }
}

@media (prefers-reduced-motion: reduce) {
  #ettl-react-root footer.ettl-glass-footer::after { animation: none; display: none; }
  #ettl-react-root .ettl-japan-activity-image { transition: none; }
}

@media (max-width: 768px) {
  #ettl-react-root [data-ettl-active-page='home'] main > div.space-y-16 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 2rem !important;
  }

  #ettl-react-root .ettl-airline-card-real {
    width: 292px !important;
    height: 180px !important;
  }

  #ettl-react-root .ettl-airline-card-real .ettl-airline-real-photo {
    width: 47%;
    height: 76px;
    top: 62px;
  }

  #ettl-react-root .ettl-airline-card-real [class*='border-t'] {
    margin-right: 39%;
  }
}


/* v2.4.2.1 final readability patch */
#ettl-react-root .ettl-view-button,
#ettl-react-root button[id^="view-service-btn-"],
#ettl-react-root button[id^="view-tour-details-"] {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  text-shadow:none !important;
}

#ettl-react-root .ettl-view-button span,
#ettl-react-root button[id^="view-service-btn-"] span,
#ettl-react-root button[id^="view-tour-details-"] span {
  color:#ffffff !important;
  opacity:1 !important;
}

/* Airline aircraft layer: cleaner transparent-style presentation */
#ettl-react-root .ettl-airline-card-real .ettl-airline-real-photo {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  width:56% !important;
  height:112px !important;
  right:4px !important;
  top:48px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 12px 18px rgba(7,27,51,.18));
}

#ettl-react-root .ettl-airline-card-real h3,
#ettl-react-root .ettl-airline-card-real h3 + div {
  max-width:42% !important;
}

@media(max-width:768px){
 #ettl-react-root .ettl-airline-card-real .ettl-airline-real-photo{
   width:54% !important;
   height:96px !important;
   top:54px !important;
 }
}

/* v2.4.2.2 focused polish: View Details buttons + Corporate tab + clearer airline aircraft */
#ettl-react-root .ettl-view-button,
#ettl-react-root button[id^="view-service-btn-"],
#ettl-react-root button[id^="view-tour-details-"],
#ettl-react-root a[id^="view-tour-details-"] {
  background: linear-gradient(135deg, #071b33, #0d315d) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(11, 95, 255, 0.22) !important;
  box-shadow: 0 10px 24px rgba(7, 27, 51, 0.15) !important;
}

#ettl-react-root .ettl-view-button:hover,
#ettl-react-root button[id^="view-service-btn-"]:hover,
#ettl-react-root button[id^="view-tour-details-"]:hover,
#ettl-react-root a[id^="view-tour-details-"]:hover {
  background: linear-gradient(135deg, #0b5fff, #094ecc) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#ettl-react-root .ettl-view-button span,
#ettl-react-root .ettl-view-button svg,
#ettl-react-root button[id^="view-service-btn-"] span,
#ettl-react-root button[id^="view-service-btn-"] svg,
#ettl-react-root button[id^="view-tour-details-"] span,
#ettl-react-root button[id^="view-tour-details-"] svg,
#ettl-react-root a[id^="view-tour-details-"] span,
#ettl-react-root a[id^="view-tour-details-"] svg {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

#ettl-react-root .ettl-airline-card-real {
  overflow: visible !important;
}

#ettl-react-root .ettl-airline-card-real .ettl-airline-real-photo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 62% !important;
  height: 122px !important;
  right: -2px !important;
  top: 42px !important;
  object-fit: contain !important;
  object-position: right center !important;
  mix-blend-mode: multiply;
  filter: contrast(1.08) saturate(1.08) drop-shadow(0 14px 18px rgba(7,27,51,.16));
}

#ettl-react-root .ettl-airline-card-real h3,
#ettl-react-root .ettl-airline-card-real h3 + div {
  max-width: 40% !important;
}

@media(max-width:768px){
  #ettl-react-root .ettl-airline-card-real .ettl-airline-real-photo{
    width:58% !important;
    height:100px !important;
    top:52px !important;
    right:0 !important;
  }
  #ettl-react-root .ettl-airline-card-real h3,
  #ettl-react-root .ettl-airline-card-real h3 + div {
    max-width: 42% !important;
  }
}