/* ===============================
   404 PAGE - Improved Layout Fix
   =============================== */

/* 1) Wrapper ko full viewport height do
      (header/nav/footer include ke saath bhi center proper rahega) */
.error-404-wrapper{
  /* if navbar fixed/sticky, safe top space */
  --nav-safe: 96px; /* adjust 70-110px if needed */

  min-height: calc(100vh - var(--nav-safe));
  display:flex;
  justify-content:center;
  align-items:center;

  padding: clamp(34px, 5vw, 80px) 18px;
  padding-top: calc(clamp(34px, 5vw, 80px) + 10px);

  background:
    radial-gradient(circle at 20% 10%, rgba(212,41,144,0.10), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(31,9,54,0.08), transparent 45%),
    #f6f7fb;
}

/* 2) Container */
.error-container{
  width: min(760px, 100%);
  position: relative;
  text-align:center;
  border-radius: 18px;

  padding: clamp(28px, 4vw, 52px) clamp(18px, 3.5vw, 46px);

  background: #fff;
  box-shadow: 0 26px 70px rgba(31, 9, 54, 0.14);
  border: 1px solid rgba(31, 9, 54, 0.08);
  overflow: hidden;

  /* avoid clipping by watermark */
  isolation: isolate;
}

/* 3) Gradient Border */
.error-container::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1.5px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(212,41,144,0.55),
    rgba(31,9,54,0.35),
    rgba(212,41,144,0.25)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  z-index: 0;
}

/* 4) Watermark 404 - behind content, no overlap */
.error-code{
  position:absolute;
  top: -22px;
  right: 10px;

  font-size: clamp(86px, 10vw, 140px);
  font-weight: 900;
  color: rgba(31,9,54,0.06);
  letter-spacing: -6px;

  user-select:none;
  pointer-events:none;
  z-index: 0;
}

/* bring content above watermark */
.error-title,
.error-subtitle,
.error-text,
.error-actions{
  position: relative;
  z-index: 1;
}

.error-title{
  font-size: clamp(54px, 6.5vw, 92px);
  font-weight: 900;
  color:#1f0936;
  line-height: 1;
  letter-spacing: -1px;
  margin: 0 0 10px;
}
.error-title span{ color:#d42990; }

.error-subtitle{
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 900;
  color:#241046;
  margin: 0 0 12px;
}

.error-text{
  font-size: clamp(14px, 1.5vw, 16px);
  color:#666;
  line-height: 1.7;
  margin: 0 auto 26px;
  max-width: 560px;
}

/* 5) Buttons */
.error-actions{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-home{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding: 13px 28px;
  border-radius: 12px;
  text-decoration:none;

  font-weight: 900;
  font-size: 15px;

  color:#fff;
  background: linear-gradient(135deg, #d42990, #1f0936);
  box-shadow: 0 14px 30px rgba(212,41,144,0.25);

  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  will-change: transform;
}
.btn-home:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(31,9,54,0.28);
  filter: brightness(1.03);
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding: 13px 22px;
  border-radius: 12px;

  font-weight: 900;
  font-size: 15px;

  color:#1f0936;
  background: rgba(31,9,54,0.06);
  border: 1px solid rgba(31,9,54,0.10);

  transition: transform .25s ease, background .25s ease;
  cursor: pointer;
  will-change: transform;
}
.btn-ghost:hover{
  transform: translateY(-2px);
  background: rgba(31,9,54,0.10);
}

/* 6) Mobile tweaks */
@media (max-width: 480px){
  .error-code{
    top: -14px;
    right: 8px;
    letter-spacing: -4px;
  }
  .btn-home, .btn-ghost{
    width: 100%;
  }
}

/* 7) Subtle animation */
@media (prefers-reduced-motion: no-preference){
  .error-container{
    animation: pop .6s ease both;
  }
  @keyframes pop{
    from{ opacity:0; transform: translateY(10px) scale(.985); }
    to{ opacity:1; transform: translateY(0) scale(1); }
  }
}