*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}

body{
  background:#210004;
  color:white;
}

.top-login{
  position:absolute;
  top:18px;
  right:35px;
  z-index:10;
  font-size:16px;
}

.top-login a{
  color:white;
  text-decoration:none;
  border:1px solid #b76b18;
  padding:12px 25px;
  border-radius:8px;
  margin-left:12px;
  background:#38000c;
}

.register-page{
  min-height:90vh;
  display:grid;
  grid-template-columns:35% 65%;
  gap:35px;
  padding:55px 35px 25px;
  background:
    linear-gradient(90deg,rgba(35,0,5,.9),rgba(35,0,5,.25)),
    url("../images/login-bg.jpg") center/cover no-repeat;
}

.left-panel{
  text-align:center;
  padding-top:10px;
}

.logo{
  width:120px;
  height:120px;
  border-radius:50%;
  box-shadow:0 0 25px #ffbf22;
}

.left-panel h1{
  margin-top:15px;
  font-size:39px;
  color:#ffbf22;
  line-height:1.15;
}

.left-panel h1 span{color:#fff}

.left-panel h3{
  color:#ffd65a;
  font-size:24px;
  margin:18px 0 45px;
}

.left-panel p{
  font-size:17px;
  line-height:1.5;
  max-width:430px;
  margin:auto;
}

.feature-box{
  margin:25px auto 0;
  max-width:430px;
  border:1px solid #8b5a18;
  border-radius:12px;
  overflow:hidden;
  background:rgba(70,0,15,.65);
}

.feature-box div{
  display:grid;
  grid-template-columns:55px 1fr;
  text-align:left;
  padding:16px 20px;
  border-bottom:1px solid rgba(255,190,60,.25);
}

.feature-box div:last-child{border-bottom:0}

.feature-box i{
  grid-row:span 2;
  color:#ffbf22;
  font-size:30px;
  margin-top:6px;
}

.feature-box b{
  font-size:16px;
}

.feature-box span{
  font-size:13px;
  margin-top:5px;
}

.register-card{
  background:#fffaf6;
  color:#260006;
  border-radius:28px;
  padding:35px 42px;
  border:7px solid rgba(255,255,255,.85);
  box-shadow:0 15px 45px rgba(0,0,0,.45);
}

.icon-head{
  width:62px;
  height:62px;
  border-radius:50%;
  background:#fff0d9;
  margin:0 auto 10px;
  color:#5b0010;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
}

.register-card h2{
  text-align:center;
  font-family:Georgia,serif;
  font-size:38px;
}

.sub{
  text-align:center;
  color:#555;
  font-size:18px;
  margin:8px 0 28px;
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 24px;
}

label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
}

.input-box{
  height:52px;
  border:1px solid #ddd;
  border-radius:8px;
  background:white;
  display:flex;
  align-items:center;
  padding:0 14px;
}

.input-box i{
  color:#333;
  margin-right:12px;
  font-size:18px;
}

.input-box input{
  border:0;
  outline:0;
  flex:1;
  font-size:15px;
}

.eye{
  cursor:pointer;
  margin-right:0!important;
}

select{
  width:100%;
  height:52px;
  border:1px solid #ddd;
  border-radius:8px;
  padding:0 14px;
  font-size:15px;
  background:white;
}

.terms{
  text-align:center;
  margin:22px 0;
  font-weight:400;
}

.terms b{color:#5b0010}

.create-btn{
  width:100%;
  height:58px;
  border:0;
  border-radius:8px;
  background:linear-gradient(#97001f,#5c0010);
  color:white;
  font-size:20px;
  font-weight:bold;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(90,0,15,.35);
}

.or{
  display:flex;
  align-items:center;
  gap:12px;
  color:#777;
  margin:25px 0 18px;
}

.or span{
  height:1px;
  flex:1;
  background:#ddd;
}

.social-login{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.social-login button{
  height:50px;
  background:white;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:17px;
  cursor:pointer;
}

.social-login i{
  margin-right:10px;
  font-size:22px;
}

.fa-google{color:#db4437}
.fa-facebook{color:#1877f2}
.fa-apple{color:#000}

.secure{
  text-align:center;
  margin-top:20px;
  color:#555;
}

.bottom-stats{
  background:#45000d;
  border-top:1px solid #9b6a19;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:18px 60px;
}

.bottom-stats div{
  display:flex;
  align-items:center;
  gap:14px;
  border-right:1px solid rgba(255,255,255,.15);
  justify-content:center;
}

.bottom-stats div:last-child{border-right:0}

.bottom-stats i{
  color:#ffbf22;
  font-size:30px;
}

.bottom-stats b{
  display:block;
  font-size:18px;
}

.bottom-stats span{
  display:block;
  font-size:13px;
}

footer{
  text-align:center;
  padding:15px;
  background:#2b0006;
}

@media(max-width:900px){
  .register-page{
    grid-template-columns:1fr;
    padding:80px 18px 25px;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .social-login,
  .bottom-stats{
    grid-template-columns:1fr;
  }

  .bottom-stats{
    gap:18px;
  }

  .bottom-stats div{
    border-right:0;
  }

  .top-login{
    right:15px;
    top:12px;
  }
}


/* =========================================================
   INDEX THEME RESPONSIVE + BUTTON EFFECT UPDATE
   Color palette matched with index page style:
   Dark: #090000 / #120202 / #170006
   Maroon: #8a001d / #4d0015 / #25000a
   Gold: #ffbf22 / #ffc328 / #ff8a00
   Added by ChatGPT
========================================================= */

:root {
    --vjm-bg-dark: #090000;
    --vjm-bg-deep: #120202;
    --vjm-bg-card: #170006;
    --vjm-maroon: #8a001d;
    --vjm-maroon-dark: #4d0015;
    --vjm-gold: #ffbf22;
    --vjm-gold-2: #ffc328;
    --vjm-orange: #ff8a00;
    --vjm-cream: #fffaf3;
}

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

body {
    background-color: var(--vjm-bg-dark);
}

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

a {
    text-decoration: none;
}

table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

input,
select,
textarea {
    max-width: 100%;
}

/* Header include should not be affected by old page navbar CSS */
.vj-header,
.vj-header * {
    box-sizing: border-box;
}

.vj-header .vj-navbar {
    display: block !important;
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    min-height: 98px !important;
    background:
        linear-gradient(145deg, var(--vjm-maroon) 0%, #650015 28%, #470008 62%, #250003 100%) !important;
    border: 2px solid var(--vjm-gold) !important;
}

.vj-header .vj-navbar .vj-menu {
    width: 100% !important;
    min-height: 98px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: 0 !important;
    background: transparent !important;
}

.vj-header .vj-navbar .vj-menu li {
    width: 100% !important;
    min-width: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vj-header .vj-navbar .vj-menu li a {
    width: 100% !important;
    height: 98px !important;
    float: none !important;
    margin: 0 !important;
    padding: 12px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #fff !important;
    font-weight: 900 !important;
    word-break: normal !important;
}

.vj-header .vj-navbar .vj-menu li a i {
    color: var(--vjm-gold) !important;
    text-shadow:
        0 0 6px rgba(255, 191, 34, 0.95),
        0 0 14px rgba(255, 138, 0, 0.85) !important;
}

.vj-header .vj-navbar .vj-menu li a:hover,
.vj-header .vj-navbar .vj-menu li a.active {
    background: linear-gradient(145deg, var(--vjm-gold), var(--vjm-orange) 58%, #8a2d05) !important;
    color: #fff !important;
    box-shadow:
        inset 2px 2px 8px rgba(255,255,255,0.35),
        inset -6px -6px 14px rgba(70,10,0,0.55),
        0 0 25px rgba(255, 191, 34, 0.75) !important;
}

/* Header effect for all page buttons */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.submit-btn,
.gold-btn,
.reset-btn,
.primary-btn,
.secondary-btn,
.search-btn,
.entry-btn,
.top-btn,
.dark-btn,
.view-btn,
.book-btn,
.pay-btn,
.register-btn,
.login-btn,
.btn,
.card button,
.plan-card a,
.plan-card button,
.contact-form button,
.pay-form button,
.enquiry-card button,
.register-card button,
.login-card button,
.left-sidebar button,
.left-filter button,
.sidebar button,
a.button,
a.btn {
    border-radius: 10px !important;
    border: 1px solid var(--vjm-gold) !important;
    background: linear-gradient(145deg, var(--vjm-gold), var(--vjm-orange)) !important;
    color: #1c0000 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow:
        inset 2px 2px 6px rgba(255,255,255,0.45),
        inset -5px -5px 10px rgba(124, 51, 0, 0.40),
        0 0 18px rgba(255, 191, 34, 0.55),
        0 10px 22px rgba(0, 0, 0, 0.35) !important;
    transition: transform 0.30s ease, box-shadow 0.30s ease, background 0.30s ease !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.submit-btn:hover,
.gold-btn:hover,
.reset-btn:hover,
.primary-btn:hover,
.secondary-btn:hover,
.search-btn:hover,
.entry-btn:hover,
.top-btn:hover,
.dark-btn:hover,
.view-btn:hover,
.book-btn:hover,
.pay-btn:hover,
.register-btn:hover,
.login-btn:hover,
.btn:hover,
.card button:hover,
.plan-card a:hover,
.plan-card button:hover,
.contact-form button:hover,
.pay-form button:hover,
.enquiry-card button:hover,
.register-card button:hover,
.login-card button:hover,
.left-sidebar button:hover,
.left-filter button:hover,
.sidebar button:hover,
a.button:hover,
a.btn:hover {
    transform: translateY(-4px) scale(1.03) !important;
    background: linear-gradient(145deg, #ffe27a, var(--vjm-gold) 48%, #b65d10) !important;
    color: #210004 !important;
    box-shadow:
        inset 2px 2px 8px rgba(255,255,255,0.55),
        inset -6px -6px 14px rgba(70, 10, 0, 0.45),
        0 0 26px rgba(255, 191, 34, 0.85),
        0 14px 28px rgba(0,0,0,0.45) !important;
}

/* Page cards/boxes index-theme border and fit */
.page-box,
.contact-card,
.box,
.share-box,
.sidebar,
.right-sidebar,
.left-sidebar,
.left-filter,
.pay-card,
.pay-summary,
.plan-card,
.register-card,
.login-card,
.enquiry-card,
.status-card,
.temple-card,
.card {
    max-width: 100%;
    border-color: rgba(255, 191, 34, 0.55) !important;
}

/* Common content fit */
.page-wrapper,
.page-box,
.payment-page,
.contact-section,
.ebook-layout,
.main-layout,
.matri-layout,
.dashboard,
.layout,
.cards,
.stats,
.register-page,
.login-page,
.plan-page,
.viewer-wrapper,
.enquiry-page,
.about-page,
.page {
    max-width: 100% !important;
}

/* Desktop wrapping fixes */
.cards,
.stats,
.temples-grid,
.contact-section,
.plans {
    width: 100%;
}

@media (max-width: 1200px) {
    .cards,
    .stats,
    .temples-grid,
    .contact-section,
    .plans {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ebook-layout,
    .main-layout,
    .matri-layout,
    .dashboard,
    .layout,
    .payment-box {
        grid-template-columns: 1fr !important;
    }

    .left-sidebar,
    .right-sidebar,
    .left-filter,
    .sidebar,
    .right-panel,
    .main-content,
    .center-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 900px) {
    body {
        overflow-x: hidden !important;
    }

    .vj-header .vj-navbar {
        width: calc(100% - 20px) !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .vj-header .vj-navbar .vj-menu {
        display: none !important;
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .vj-header .vj-navbar #vj-menu-toggle:checked ~ .vj-menu {
        display: grid !important;
    }

    .vj-header .vj-navbar .vj-menu li a {
        height: 75px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 12px !important;
        padding-left: 28px !important;
    }

    .top-header,
    .header,
    .top,
    .vj-top-header {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        gap: 14px !important;
    }

    .contact,
    .top-info,
    .header-info,
    .vj-contact-info {
        flex-direction: column !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .register-page,
    .login-page,
    .page,
    .about-page,
    .enquiry-page,
    .payment-box {
        display: grid !important;
        grid-template-columns: 1fr !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 18px !important;
    }

    .left-panel,
    .right-panel,
    .left-box,
    .login-card,
    .register-card,
    .enquiry-card {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .cards,
    .stats,
    .temples-grid,
    .contact-section,
    .plans {
        grid-template-columns: 1fr !important;
    }

    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .submit-btn,
    .gold-btn,
    .reset-btn,
    .primary-btn,
    .secondary-btn,
    .search-btn,
    .entry-btn,
    .top-btn,
    .dark-btn,
    .view-btn,
    .book-btn,
    .pay-btn,
    .register-btn,
    .login-btn,
    .btn,
    .card button,
    .plan-card a,
    .plan-card button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 520px) {
    .vj-header .vj-brand-text h1,
    .logo-box h1,
    .brand h1,
    .logo h1,
    .left-box h1,
    .left-panel h1 {
        font-size: 24px !important;
        line-height: 1.15 !important;
    }

    .vj-header .vj-brand img,
    .logo-box img,
    .brand img,
    .logo img,
    .main-logo {
        width: 72px !important;
        height: 72px !important;
    }

    .page-title h1,
    .page-title h2,
    .hero-title h1,
    .contact-hero h1,
    .register-card h2,
    .login-card h2 {
        font-size: 28px !important;
    }

    .page-box,
    .contact-card,
    .box,
    .share-box,
    .register-card,
    .login-card,
    .enquiry-card,
    .plan-card,
    .payment-page,
    .pay-card,
    .pay-summary {
        padding: 16px !important;
    }
}


/* =========================================================
   REGISTER PAGE COMPACT WIDTH FIX
   Horizontal size kam karne ke liye added
========================================================= */

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

.register-page {
  width: 100% !important;
  max-width: 1180px !important;
  min-height: auto !important;
  margin: 0 auto !important;
  grid-template-columns: minmax(260px, 340px) minmax(0, 720px) !important;
  gap: 22px !important;
  padding: 42px 18px 22px !important;
  justify-content: center !important;
}

.left-panel {
  width: 100% !important;
  max-width: 340px !important;
  justify-self: center !important;
  padding-top: 0 !important;
}

.logo {
  width: 95px !important;
  height: 95px !important;
}

.left-panel h1 {
  font-size: 30px !important;
}

.left-panel h3 {
  font-size: 19px !important;
  margin: 12px 0 22px !important;
}

.left-panel p {
  font-size: 15px !important;
  max-width: 320px !important;
}

.feature-box {
  max-width: 330px !important;
  margin-top: 18px !important;
}

.feature-box div {
  grid-template-columns: 42px 1fr !important;
  padding: 12px 14px !important;
}

.feature-box i {
  font-size: 24px !important;
}

.feature-box b {
  font-size: 14px !important;
}

.feature-box span {
  font-size: 12px !important;
}

.register-card {
  width: 100% !important;
  max-width: 720px !important;
  justify-self: center !important;
  padding: 24px 28px !important;
  border-radius: 22px !important;
}

.icon-head {
  width: 50px !important;
  height: 50px !important;
  font-size: 22px !important;
}

.register-card h2 {
  font-size: 30px !important;
}

.sub {
  font-size: 15px !important;
  margin: 6px 0 18px !important;
}

.grid {
  gap: 13px 16px !important;
}

label {
  margin-bottom: 6px !important;
  font-size: 14px !important;
}

.input-box,
select {
  height: 45px !important;
}

.input-box input,
select {
  font-size: 14px !important;
}

.terms {
  margin: 16px 0 !important;
  font-size: 14px !important;
}

.create-btn {
  height: 50px !important;
  font-size: 17px !important;
}

.or {
  margin: 18px 0 14px !important;
}

.social-login {
  gap: 12px !important;
}

.social-login button {
  height: 44px !important;
  font-size: 14px !important;
}

.secure {
  margin-top: 14px !important;
  font-size: 13px !important;
}

.bottom-stats {
  padding: 14px 20px !important;
}

@media (min-width: 901px) {
  .register-page {
    grid-template-columns: 32% 58% !important;
  }
}

@media (max-width: 900px) {
  .register-page {
    max-width: 720px !important;
    grid-template-columns: 1fr !important;
    padding: 70px 14px 22px !important;
  }

  .left-panel,
  .register-card {
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  .register-card {
    padding: 16px !important;
    border-width: 4px !important;
  }

  .top-login {
    position: static !important;
    text-align: center !important;
    margin: 10px auto !important;
    padding: 0 10px !important;
  }

  .top-login a {
    display: inline-flex !important;
    margin-top: 8px !important;
    padding: 9px 14px !important;
  }
}

/* =========================================================
   REGISTER PAGE - LOGO SECTION BIGGER FIX
   Left/logo wala part bada, form compact hi rahega
========================================================= */
@media (min-width: 901px) {
  .register-page {
    max-width: 1240px !important;
    grid-template-columns: minmax(340px, 430px) minmax(0, 700px) !important;
    gap: 28px !important;
    padding: 42px 22px 24px !important;
  }

  .left-panel {
    max-width: 430px !important;
    padding-top: 8px !important;
  }

  .left-panel .logo,
  .logo {
    width: 138px !important;
    height: 138px !important;
    box-shadow: 0 0 35px #ffbf22 !important;
  }

  .left-panel h1 {
    font-size: 38px !important;
    line-height: 1.12 !important;
    margin-top: 16px !important;
  }

  .left-panel h3 {
    font-size: 23px !important;
    margin: 16px 0 30px !important;
  }

  .left-panel p {
    font-size: 16px !important;
    max-width: 400px !important;
  }

  .feature-box {
    max-width: 410px !important;
    margin-top: 22px !important;
  }

  .feature-box div {
    grid-template-columns: 52px 1fr !important;
    padding: 15px 18px !important;
  }

  .feature-box i {
    font-size: 29px !important;
  }

  .feature-box b {
    font-size: 15px !important;
  }

  .feature-box span {
    font-size: 13px !important;
  }

  .register-card {
    max-width: 700px !important;
  }
}

@media (max-width: 900px) {
  .left-panel .logo,
  .logo {
    width: 112px !important;
    height: 112px !important;
  }

  .left-panel h1 {
    font-size: 32px !important;
  }

  .left-panel h3 {
    font-size: 20px !important;
  }
}