/* *****************************************************
    **  Yahmis NG — Design refinements  **
    Loaded after style.min.css: overrides only,
    no structural markup changes.
***************************************************** */

/* ---------- 0. Floating WhatsApp button ---------- */
/* Injected via wa-float.html snippet on every page; lives above the
   template's .cd-top scroll-to-top button (bottom:100px, right:30px). */
.wa-float {
  position: fixed;
  right: 30px;
  bottom: 32px;
  z-index: 998;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  box-shadow: 0 8px 24px -6px rgba(18, 140, 126, .55);
  transition: transform .25s var(--yn-ease, ease), box-shadow .25s var(--yn-ease, ease);
}
.wa-float svg { width: 30px; height: 30px; display: block; }
.wa-float:hover,
.wa-float:focus-visible {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 30px -6px rgba(18, 140, 126, .65);
  color: #fff;
}
.wa-float:active { transform: translateY(-1px) scale(.98); }
/* WhatsApp brand color survives in light mode */
body[data-background="light"] .wa-float {
  box-shadow: 0 8px 24px -6px rgba(18, 140, 126, .45);
}
/* Tooltip label on hover, hidden from touch where hover is sticky */
.wa-float::after {
  content: "Chat with us on WhatsApp";
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  background: var(--yn-card, #131e28);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  box-shadow: var(--yn-shadow, 0 10px 30px -12px rgba(0,0,0,.45));
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, translate .2s var(--yn-ease, ease);
  pointer-events: none;
}
body[data-background="light"] .wa-float::after { background: #0d151c; }
.wa-float:hover::after,
.wa-float:focus-visible::after { opacity: 1; visibility: visible; translate: -4px -50%; }
@media (hover: none) {
  .wa-float::after { display: none; }
}
@media (max-width: 767px) {
  .wa-float { right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  .wa-float svg { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float::after { transition: none; }
  .wa-float:hover { transform: none; }
}

/* ---------- 1. Design tokens ---------- */
:root {
  --yn-pink: #f01387;
  --yn-pink-soft: rgba(240, 19, 135, .12);
  --yn-yellow: #fdd700;
  --yn-navy: #0d151c;
  --yn-navy-2: #111b24;
  --yn-card: #131e28;
  --yn-card-hover: #17232f;
  --yn-line: rgba(255, 255, 255, .07);
  --yn-muted: #8b98a5;
  --yn-radius: 14px;
  --yn-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45);
  --yn-shadow-lift: 0 18px 40px -14px rgba(0, 0, 0, .55);
  --yn-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Typography ---------- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .01em;
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -.015em; }
.section-heading { font-weight: 800; }
.section-subheading { color: var(--yn-muted); max-width: 720px; margin-inline: auto; line-height: 1.7; }

/* ---------- 3. Header / navigation ---------- */
/* NOTE: blur only on the desktop wrapper. A backdrop-filter on the mobile
   .menu-wrap would create a containing block and break the fixed-position
   slide-in mobile menu panel. */
.menu-wrap:not(.mobile) {
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 var(--yn-line), 0 8px 24px -18px rgba(0, 0, 0, .6);
  transition: box-shadow .3s var(--yn-ease), background-color .3s var(--yn-ease);
}
.menu-wrap.fixed {
  box-shadow: 0 1px 0 var(--yn-line), 0 14px 34px -18px rgba(0, 0, 0, .7);
}
.menu-wrap .main-menu > .menu-item > a {
  position: relative;
  transition: color .25s var(--yn-ease);
}
.menu-wrap .main-menu > .menu-item > a::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, var(--yn-pink), var(--yn-yellow));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--yn-ease);
}
.menu-wrap .main-menu > .menu-item:hover > a::after,
.menu-wrap .main-menu > .menu-item > a.active::after {
  transform: scaleX(1);
}
.menu-wrap .sub-menu {
  border: 1px solid var(--yn-line);
  border-radius: var(--yn-radius);
  box-shadow: var(--yn-shadow-lift);
  overflow: hidden;
}
.menu-wrap .sub-menu .service {
  border-radius: 10px;
  transition: background-color .25s var(--yn-ease), transform .25s var(--yn-ease);
}
.menu-wrap .sub-menu .service:hover { background: var(--yn-pink-soft); transform: translateX(2px); }
.btn.question { box-shadow: 0 6px 18px -8px rgba(253, 215, 0, .55); }

/* ---------- 4. Buttons ---------- */
.btn {
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .2s var(--yn-ease), box-shadow .25s var(--yn-ease), filter .25s var(--yn-ease);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn-default-yellow-fill {
  box-shadow: 0 8px 20px -10px rgba(253, 215, 0, .5);
}
.btn-default-yellow-fill:hover { box-shadow: 0 12px 26px -10px rgba(253, 215, 0, .65); }
.btn-default-pink-fill {
  background-color: var(--yn-pink) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -10px rgba(240, 19, 135, .55);
}
.btn-default-pink-fill:hover { box-shadow: 0 12px 26px -10px rgba(240, 19, 135, .7); }
.btn-default-fill,
.btn-default-grad-purple-fill {
  border-radius: 10px;
}

/* ---------- 5. Cards & pricing ---------- */
.service-section,
.help-container,
.wrapper,
.card {
  border-radius: var(--yn-radius) !important;
  transition: transform .3s var(--yn-ease), box-shadow .3s var(--yn-ease), border-color .3s var(--yn-ease);
}
.service-section:hover,
.help-container:hover {
  transform: translateY(-4px);
  box-shadow: var(--yn-shadow-lift);
}
/* pricing columns */
.pricing .wrapper {
  border: 1px solid var(--yn-line);
  overflow: hidden;
}
.pricing .wrapper.first,
.pricing .wrapper.third { box-shadow: none; }
.pricing .wrapper .top-content {
  border-bottom: 1px solid var(--yn-line);
}
.pricing .wrapper:nth-child(2),
.pricing .wrapper.noshadow + .wrapper { position: relative; }
.pricing .badge.feat {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 6px 14px;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6);
}
.pricing .list-info li { transition: background-color .25s var(--yn-ease); }
.pricing .list-info li:hover { background: rgba(255, 255, 255, .025); }
.pricing .price { font-weight: 800; }

/* ---------- 6. Slider / hero ---------- */
.slider-content h1 { text-shadow: 0 4px 30px rgba(0, 0, 0, .45); }
.slider-content .special-note {
  border-left: 3px solid var(--yn-yellow);
  padding-left: 12px;
  border-radius: 4px;
}
.domains-search .special-input {
  border-radius: 10px;
  border: 1px solid var(--yn-line);
  box-shadow: var(--yn-shadow);
}
.domains-search .btn { border-radius: 10px; }

/* ---------- 7. Forms & inputs ---------- */
.general-input .fill-input,
input[type="text"], input[type="email"], input[type="search"], select, textarea {
  border-radius: 10px;
  transition: border-color .25s var(--yn-ease), box-shadow .25s var(--yn-ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--yn-pink);
  box-shadow: 0 0 0 3px var(--yn-pink-soft);
}

/* ---------- 8. Footer ---------- */
.footer {
  border-top: 1px solid var(--yn-line);
}
.footer .heading {
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}
.footer-menu .menu-item a {
  transition: color .2s var(--yn-ease), padding-left .2s var(--yn-ease);
}
.footer-menu .menu-item a:hover {
  color: var(--yn-yellow) !important;
  padding-left: 4px;
}
.soc-icons a.withborder {
  border-radius: 10px;
  transition: background-color .25s var(--yn-ease), transform .25s var(--yn-ease), color .25s var(--yn-ease);
}
.soc-icons a.withborder:hover {
  transform: translateY(-3px);
  background: var(--yn-pink) !important;
  color: #fff !important;
}

/* ---------- 9. Badges, ribbons & accents ---------- */
.badge.feat,
.badge.inside {
  border-radius: 999px;
  letter-spacing: .05em;
}
.bg-pink { background-color: var(--yn-pink) !important; }
.randomline .bigline {
  background: linear-gradient(180deg, transparent, var(--yn-pink-soft), transparent);
}
.golink { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- 10. Section rhythm ---------- */
.sec-normal { scroll-margin-top: 90px; }
.breadcrumbs, .top-header {
  border-bottom: 1px solid var(--yn-line);
}

/* ---------- 11. Misc polish ---------- */
.cd-top {
  border-radius: 12px;
  box-shadow: var(--yn-shadow);
  transition: background-color .25s var(--yn-ease), transform .25s var(--yn-ease);
}
.cd-top:hover { transform: translateY(-3px); }
.infonews .badge.bg-purple { border-radius: 999px; }
::selection { background: var(--yn-pink); color: #fff; }

/* ---------- 12. Mobile menu polish ---------- */
@media (max-width: 750px) {
  .menu-wrap.mobile .main-menu {
    border-radius: 0 0 var(--yn-radius) var(--yn-radius);
    box-shadow: var(--yn-shadow-lift);
  }
  .menu-wrap.mobile .menu-item > a {
    transition: color .2s var(--yn-ease), background-color .2s var(--yn-ease);
    border-radius: 8px;
  }
  .menu-wrap.mobile .menu-item > a:hover { background: var(--yn-pink-soft); }
  .menu-wrap.mobile .dropdown-menu { border: none; box-shadow: none; background: transparent; }
}

/* ---------- 14. Theme toggle button ---------- */
.theme-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.theme-btn i { font-size: 16px; }
.yn-icon-moon { display: none; }
[data-background="light"] .yn-icon-sun { display: none; }
[data-background="light"] .yn-icon-moon { display: inline-block; }

.mobile-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 10px;
  border-radius: 10px;
  border: 1px solid var(--yn-line);
  color: var(--yn-muted);
  transition: color .25s var(--yn-ease), border-color .25s var(--yn-ease), background-color .25s var(--yn-ease);
}
.mobile-theme-toggle:hover { color: var(--yn-pink); border-color: var(--yn-pink); background: var(--yn-pink-soft); }
.mobile-theme-toggle i { font-size: 15px; }
.mobile-theme-toggle .yn-icon-moon { display: none; }
[data-background="light"] .mobile-theme-toggle .yn-icon-sun { display: none; }
[data-background="light"] .mobile-theme-toggle .yn-icon-moon { display: inline-block; }

/* ---------- 15. Light-mode harmony for custom surfaces ---------- */
[data-background="light"] .menu-wrap:not(.mobile) {
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 8px 24px -18px rgba(0, 0, 0, .25);
}
[data-background="light"] .menu-wrap .sub-menu {
  border-color: rgba(0, 0, 0, .08);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .18);
}
[data-background="light"] .menu-wrap .sub-menu .service:hover { background: var(--yn-pink-soft); }
[data-background="light"] .section-subheading { color: #5b6570; }
[data-background="light"] .slider-content h1 { text-shadow: 0 4px 30px rgba(0, 0, 0, .35); }
[data-background="light"] .pricing .wrapper { border-color: rgba(0, 0, 0, .08); }
[data-background="light"] .pricing .wrapper .top-content { border-color: rgba(0, 0, 0, .08); }
[data-background="light"] .pricing .list-info li:hover { background: rgba(0, 0, 0, .03); }
[data-background="light"] .footer { border-top-color: rgba(0, 0, 0, .08); }
[data-background="light"] ::selection { background: var(--yn-pink); color: #fff; }

/* ---------- 13. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}