/* Hindi Lead — night indigo, marigold, cream. Devanagari first. */

:root {
  --raat: #12141C;
  --genda: #E8A020;
  --malai: #F3E6D0;
  --khatra: #C0392B;
  --khat: 18px;
  --line: 1.55;
}

html,
body,
#ghar {
  overflow: hidden;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--raat);
  color: var(--malai);
  font-family: "Noto Sans Devanagari", "Noto Sans", system-ui, sans-serif;
  font-size: var(--khat);
  line-height: var(--line);
  overscroll-behavior: none;
}

#ghar {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  padding: 10px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[hidden] {
  display: none !important;
}

.patta {
  margin: 0;
  padding: 6px 0 8px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--malai) 78%, var(--genda));
  border-bottom: 1px solid color-mix(in srgb, var(--genda) 35%, var(--raat));
}

.tilak {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
}

.brow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--genda) 70%, var(--malai));
}

.nishaan {
  display: flex;
  align-items: center;
  gap: 8px;
}

.diya {
  display: block;
  flex: 0 0 16px;
  opacity: 0.92;
}

.naam {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--malai);
}

.dvaar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 0;
  flex: 0 0 auto;
}

.dvaar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 12px 14px 11px 14px;
  border: 0;
  border-left: 3px solid var(--genda);
  background: color-mix(in srgb, var(--malai) 7%, var(--raat));
  color: var(--malai);
  font: inherit;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
}

.dvaar .hi {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.dvaar .en {
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--malai) 62%, var(--raat));
}

.pair {
  margin: auto 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--malai) 46%, var(--raat));
}

.pata {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 10px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--raat);
  overflow: hidden;
}

.sir {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sir .hi,
.slip .hi,
.parde-box .hi {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.sir .en,
.slip .en,
.parde-box .en,
.yojna .en {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: color-mix(in srgb, var(--malai) 62%, var(--raat));
}

.manake {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.manaka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--genda) 45%, var(--raat));
  background: color-mix(in srgb, var(--genda) 10%, var(--raat));
  color: var(--malai);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.manaka .hi {
  font-size: 16px;
  line-height: 1.5;
}

.manaka .en {
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--malai) 62%, var(--raat));
}

.manaka.lage {
  border-color: var(--genda);
  background: color-mix(in srgb, var(--genda) 18%, var(--raat));
}

.yojna {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.yojna li {
  padding: 8px 0 8px 12px;
  border-left: 2px solid color-mix(in srgb, var(--genda) 50%, var(--raat));
}

.yojna .hi {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

.slip {
  margin: 12px 0 auto;
}

.slip p {
  margin: 0;
}

.call-112 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  margin: 4px 0 0;
  padding: 12px 14px;
  border: 0;
  background: var(--khatra);
  color: var(--malai);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.call-112 .hi {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.call-112 .en {
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--malai) 86%, var(--khatra));
}

.nikas {
  display: flex;
  gap: 8px;
}

.nikas-btn,
.wapas,
.parde-stay {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--malai) 22%, var(--raat));
  background: color-mix(in srgb, var(--malai) 6%, var(--raat));
  color: var(--malai);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.nikas-btn {
  flex: 1 1 0;
}

.nikas-btn .hi,
.wapas .hi,
.parde-stay .hi {
  font-size: 16px;
  line-height: 1.5;
}

.nikas-btn .en,
.wapas .en,
.parde-stay .en {
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--malai) 62%, var(--raat));
}

.wapas {
  margin-top: auto;
  width: 100%;
}

.parde {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: color-mix(in srgb, var(--raat) 82%, black);
  overflow: hidden;
}

.parde-box {
  width: 100%;
  max-width: 320px;
  padding: 18px 16px 16px;
  background: var(--raat);
  border: 1px solid color-mix(in srgb, var(--genda) 40%, var(--raat));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.parde-box p {
  margin: 0;
}

.parde-dial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--khatra);
  color: var(--malai);
  text-decoration: none;
  font: inherit;
}

.parde-dial .hi {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.parde-dial .en {
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--malai) 86%, var(--khatra));
}

.parde-stay {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}