/* ==========================================================================
   lingamdynasty.lk additions on top of the original stylesheets.
   Everything else is unchanged from the original template stylesheets.
   ========================================================================== */

/* --- Icons --------------------------------------------------------------
   The template's "icomoon" icon font is missing on the original server, so
   these icons rendered empty there. Map them to Font Awesome equivalents. */
.icon-arrow-right::before,
.icon-arrow-up-right::before,
.icon-location-6::before,
.icon-letter-2::before,
.icon-close::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.icon-arrow-right::before { content: "\f061"; }
.icon-arrow-up-right::before { content: "\f061"; transform: rotate(-45deg); }
.icon-location-6::before { content: "\f3c5"; }
.icon-letter-2::before { content: "\f0e0"; font-weight: 400; }
.icon-close::before { content: "\f00d"; font-size: 20px; cursor: pointer; }

/* Bullet list items: keep text (with its line break) in one block next to the icon */
.text-with-img .list li > span { flex: 1; }
.text-with-img .list li > i { flex-shrink: 0; }

/* --- Language switcher ------------------------------------------------- */
.lang-switch {
  position: relative;
}
.lang-switch .lang-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--Line);
  border-radius: 99px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--Heading);
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.lang-switch .lang-current .lang-caret {
  font-size: 10px;
  transition: transform 0.3s ease;
}
.lang-switch:hover .lang-current,
.lang-switch:focus-within .lang-current {
  border-color: var(--Primary);
  color: var(--Primary);
}
.lang-switch:hover .lang-caret,
.lang-switch:focus-within .lang-caret,
.lang-switch.open .lang-caret {
  transform: rotate(180deg);
}
.lang-switch .lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 150px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--White);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 1000;
}
.lang-switch .lang-menu::before {
  /* hover bridge between button and menu */
  content: "";
  position: absolute;
  inset: -12px 0 auto 0;
  height: 12px;
}
.lang-switch:hover .lang-menu,
.lang-switch:focus-within .lang-menu,
.lang-switch.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-switch .lang-menu a {
  display: block;
  padding: 8px 20px;
  font-size: 15px;
  color: var(--Heading);
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.lang-switch .lang-menu a:hover,
.lang-switch .lang-menu li.active a {
  color: var(--Primary);
}
.lang-switch .lang-menu a:hover {
  padding-left: 26px;
}

/* Room for the extra language button on small desktops */
.main-menu .navigation > li > a {
  white-space: nowrap;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header .header-right.gap-20 { gap: 12px !important; }
  .header .phone-number .icons { display: none; }
  .lang-switch .lang-current { padding: 8px 10px; }
}

/* --- Tamil & Sinhala typography -----------------------------------------
   The template fonts (Lexend, Manrope…) have no Tamil/Sinhala glyphs, so add
   Noto Sans as the fallback for every text element (icons excluded). */
html[lang="ta"] body *:not(i):not(.fa-solid):not(.fa-regular) {
  font-family: "Lexend", "Noto Sans Tamil", sans-serif !important;
}
html[lang="si"] body *:not(i):not(.fa-solid):not(.fa-regular) {
  font-family: "Lexend", "Noto Sans Sinhala", sans-serif !important;
}
/* Longer menu labels: keep the header on one line */
html[lang="ta"] .main-menu .navigation > li > a,
html[lang="si"] .main-menu .navigation > li > a {
  font-size: 15px;
}
@media (max-width: 1599.98px) {
  html[lang="ta"] .header .phone-number,
  html[lang="si"] .header .phone-number {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  html[lang="ta"] .main-menu .navigation,
  html[lang="si"] .main-menu .navigation {
    gap: 8px;
  }
  html[lang="ta"] .main-menu .navigation > li > a,
  html[lang="si"] .main-menu .navigation > li > a {
    font-size: 13px;
  }
  html[lang="ta"] .btn-add,
  html[lang="si"] .btn-add {
    display: none !important;
  }
}

/* Longer words in these scripts: tone down the largest headings a little */
html[lang="ta"] .page-title .heading-title .title,
html[lang="si"] .page-title .heading-title .title {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.35;
}
html[lang="ta"] h2.title,
html[lang="si"] h2.title {
  line-height: 1.4;
  overflow-wrap: anywhere;
}
html[lang="ta"] .banner-text,
html[lang="si"] .banner-text {
  line-height: 1.5;
}

/* --- Hero ---------------------------------------------------------------
   The hero's height came from its padding + text, so the shorter English and
   Tamil/Sinhala headings made it smaller than the German original. Always fill
   the screen below the header and keep the text centred. */
.page-title.home01 {
  min-height: calc(100vh - var(--header-offset, 85px));
  min-height: calc(100svh - var(--header-offset, 85px));
  display: flex;
  align-items: center;
}
.page-title.home01 > .tf-container {
  width: 100%;
}

/* --- Port City Countdown Timer ------------------------------------------- */
.location-panel.location-port-city .location-content {
  max-width: 680px !important;
  width: 100% !important;
}
.location-body-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 20px !important;
}
.location-address-col {
  flex: 1 1 auto !important;
}
.location-address-col .location-meta {
  margin: 16px 0 0 !important;
}
.location-timer-col {
  flex: 0 0 auto !important;
}

/* --- Simple Flip Clock Timer -------------------------------------------- */
.flip-clock-container {
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.flip-clock-status {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.flip-clock-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background-color: var(--Primary, #f1913d) !important;
  box-shadow: 0 0 6px var(--Primary, #f1913d) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.flip-clock-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.flip-unit {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
}

.flip-card {
  position: relative !important;
  display: inline-flex !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  border-radius: 6px !important;
}

.flip-card-inner {
  position: relative !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: #181b20 !important;
  display: flex !important;
  flex-direction: column !important;
}

.flip-card-top,
.flip-card-bottom {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 44px !important;
  padding: 0 8px !important;
  height: 22px !important;
  font-family: var(--font-primary, "Lexend", -apple-system, sans-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  overflow: hidden !important;
  position: relative !important;
  user-select: none !important;
  line-height: 1 !important;
}

.flip-card-top {
  background: linear-gradient(180deg, #242830 0%, #1c1f26 100%) !important;
  align-items: flex-end !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7) !important;
}

.flip-card-top span {
  transform: translateY(50%) !important;
  display: block !important;
}

.flip-card-bottom {
  background: linear-gradient(180deg, #181a20 0%, #121417 100%) !important;
  align-items: flex-start !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.flip-card-bottom span {
  transform: translateY(-50%) !important;
  display: block !important;
}

/* Horizontal split line across center */
.flip-card-line {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: rgba(0, 0, 0, 0.85) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  z-index: 2 !important;
}

.flip-colon {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin-top: -16px !important;
  padding: 0 2px !important;
}

.flip-colon span {
  width: 3.5px !important;
  height: 3.5px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.5) !important;
}

.flip-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

@media (max-width: 991.98px) {
  .location-body-wrap {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .location-timer-col {
    width: 100% !important;
  }
}

/* Prevent "Sri Lanka" and similar text from breaking mid-word on mobile */
.location-panel .location-address-col p,
.location-panel .location-content > p {
  word-break: normal;
  overflow-wrap: break-word;
}

.location-address-col .location-line {
  display: block !important;
  width: 100%;
}

/* Override the template's 'br { display: none }' on screens <= 991px for address and contact elements */
@media (max-width: 991.98px) {
  .location-panel br,
  .location-address-col br,
  .contact-item br,
  .list-info br,
  .footer-top br {
    display: inline !important;
  }
}