/* ==========================================================================
   1. GLOBAL RESPONSIVE SAFETY NET
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

img,
video,
iframe,
canvas {
  max-width: 100% !important;
  height: auto !important;
}


/* ==========================================================================
   2. HEADER & LOGO
   ========================================================================== */

/* Full-width header container */
.header-main .container,
header.header .container {
  width: 100% !important;
  max-width: 95% !important;
  margin: 0 auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Main header row */
.header-inner > .flex-element {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* Logo */
.header-left {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
}

.logo,
.logo a {
  display: flex !important;
  align-items: center !important;
}

.logo {
  margin: 0 !important;
}

.logo img,
.header-left .logo img {
  width: auto !important;
  height: auto !important;
  max-height: 85px !important;
  display: block !important;
  object-fit: contain !important;
}


/* ==========================================================================
   3. HEADER RIGHT — LEFT-ALIGNED NAVIGATION & RIGHT-ALIGNED SEARCH
   ========================================================================== */

.header-right {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  margin-left: auto !important;
}

/* Top row */
.header-right .head-right-top {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.header-right .head-right-top > .flex-element {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.header-right .top-header-col,
.header-right .header-df-social {
  flex: 0 0 auto !important;
}

.header-right .top-header-col > .flex-element {
  justify-content: flex-end !important;
}

/* Top Right Row Font Size */
.header-right .head-right-top,
.header-right .head-right-top a,
.header-right .head-right-top span,
.header-right .head-right-top li {
  font-size: 14px !important;
}

/* Navigation row container */
.header-right .navigation,
.header-right .nav-inner {
  width: 100% !important;
}

.header-right .nav-inner > .flex-element {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Force menu links to the left side of the row */
.header-right .sitenav {
  flex: 0 0 auto !important;
  order: 1 !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.header-right .sitenav > div > ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Navigation text size */
.header-right .navigation .sitenav > div > ul > li > a {
  font-size: 20px !important;
}

/* Force search to the far right of the navigation row */
.header-right .searchbar,
.header-right .search-box,
.header-right .search-box-part,
.header-right .header-search-form {
  order: 2 !important;
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  float: none !important;
  height: auto !important;
}

.header-right .searchbar form,
.header-right .search-box form,
.header-right .search-box-part form {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
}

/* ==========================================================================
   4. HIDE HEADER DOMAIN / BUILDING ICON
   ========================================================================== */

.header-right .top-header-col:has(i.fa-buildings) {
  display: none !important;
}




/* ==========================================================================
   5. REMOVE TWITTER / X ICON (HEADER & FOOTER)
   ========================================================================== */

a[title*="twitter" i],
a[title*="x.com" i],
.social-icons a[href*="twitter.com"],
.social-icons a[href*="x.com"],
.footer-social a[href*="twitter.com"],
.footer-social a[href*="x.com"],
i.fa-twitter,
i.fa-x-twitter {
  display: none !important;
}


/* ==========================================================================
   6. FOOTER: REPLACE "OUR LOCATION" WITH "OUR PRIVACY POLICY" (CLICKABLE)
   ========================================================================== */

/* Make container position-relative so overlay anchor fits exactly */
.footer-top .foot-cont-box:has(i.fa-buildings) .foot-cont-text {
  position: relative !important;
  cursor: pointer !important;
}

/* Hide original "Our Location :" text and render "Our Privacy Policy :" */
.footer-top .foot-cont-box:has(i.fa-buildings) .foot-cont-text h5 {
  font-size: 0 !important;
}

.footer-top .foot-cont-box:has(i.fa-buildings) .foot-cont-text h5::before {
  content: "Our Privacy Policy :" !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  display: block !important;
}

/* Hide original text "www.LOTO-PRO.com" and replace with "Privacy Policy" link label */
.footer-top .foot-cont-box:has(i.fa-buildings) .foot-cont-text p {
  font-size: 0 !important;
  margin: 0 !important;
}

.footer-top .foot-cont-box:has(i.fa-buildings) .foot-cont-text p::after {
  content: "Privacy Policy" !important;
  font-size: 14px !important;
  text-decoration: underline !important;
  color: inherit !important;
  display: inline-block !important;
}

/* Pointer overlay over the text block */
.footer-top .foot-cont-box:has(i.fa-buildings) .foot-cont-text::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
  cursor: pointer !important;
}

/* CSS-only redirect trigger fallback if HTML <p> contains an <a> or if clicked directly */
.footer-top .foot-cont-box:has(i.fa-buildings) .foot-cont-text a {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 11 !important;
  opacity: 0 !important;
}


/* ==========================================================================
   7. MOBILE LOGO
   ========================================================================== */

@media (max-width: 991px) {
  .logo img {
    max-height: 50px !important;
  }
}


/* ==========================================================================
   8. HERO SECTION
   ========================================================================== */

.loto-hero-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
  width: 100%;
}

.loto-image-col {
  flex: 0 0 250px;
  max-width: 100%;
  text-align: center;
}

.loto-content-col {
  flex: 1 1 300px;
  max-width: 100%;
}


/* ==========================================================================
   9. NUMBERED LIST
   ========================================================================== */

.loto-steps {
  padding-left: 20px;
  line-height: 1.6;
}

.loto-steps li {
  margin-bottom: 8px;
}


/* ==========================================================================
   10. BLOG AUTHOR META
   ========================================================================== */

li.post-auth a[rel="author"],
li.post-auth a {
  margin-left: 5px !important;
  display: inline-block !important;
}

li.post-auth i.fa-user {
  margin-right: 5px !important;
}