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

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

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

.left-box{
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.logo{
  width:130px;
  height:130px;
  border-radius:50%;
  margin:0 auto 18px;
  box-shadow:0 0 30px #ffb300;
}

.left-box h1{
  font-size:42px;
  color:#ffbf22;
  line-height:1.15;
  font-weight:900;
}

.left-box h1 span{
  color:#fff;
}

.left-box h3{
  color:#ffd65a;
  font-size:26px;
  margin:18px 0 50px;
}

.left-box p{
  max-width:500px;
  margin:8px auto;
  font-size:18px;
  line-height:1.6;
}

.welcome{
  font-size:22px !important;
  font-weight:bold;
}

.left-stats{
  margin:70px auto 0;
  width:90%;
  background:rgba(60,0,10,.85);
  border:1px solid #8b5a18;
  border-radius:14px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:22px;
  box-shadow:0 0 25px rgba(255,180,0,.25);
}

.left-stats div{
  border-right:1px solid rgba(255,255,255,.2);
}

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

.left-stats i{
  color:#ffbf22;
  font-size:32px;
}

.left-stats b{
  display:block;
  font-size:26px;
  margin-top:5px;
}

.left-stats span{
  font-size:14px;
}

.login-card{
  background:#fffaf5;
  color:#230005;
  border-radius:35px;
  max-width:760px;
  width:100%;
  margin:auto;
  padding:65px 60px;
  box-shadow:0 15px 45px rgba(0,0,0,.35);
  border:8px solid rgba(255,255,255,.8);
  position:relative;
}

.login-card h2{
  text-align:center;
  font-family:Georgia, serif;
  font-size:42px;
  color:#2d0007;
  margin-bottom:8px;
}

.sub{
  text-align:center;
  font-size:20px;
  color:#555;
  margin-bottom:45px;
}

label{
  display:block;
  margin:18px 0 10px;
  font-size:16px;
  color:#2d0007;
}

.input-box{
  height:64px;
  border:1px solid #ddd;
  border-radius:10px;
  display:flex;
  align-items:center;
  padding:0 20px;
  background:#fff;
}

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

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

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

.options{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:20px 0;
}

.remember{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
}

.remember input{
  width:20px;
  height:20px;
  accent-color:#750015;
}

.options a,
.register-text a{
  color:#750015;
  font-weight:bold;
  text-decoration:none;
}

.login-btn{
  width:100%;
  height:65px;
  border:none;
  border-radius:9px;
  background:linear-gradient(#92001d,#5b0010);
  color:white;
  font-size:22px;
  font-weight:bold;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(100,0,20,.35);
}

.login-btn i{
  margin-left:12px;
}

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

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

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

.social-login button{
  padding:15px;
  border:1px solid #ddd;
  background:#fff;
  border-radius:8px;
  font-size:17px;
  cursor:pointer;
}

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

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

.register-text{
  text-align:center;
  margin-top:35px;
  font-size:17px;
}

footer{
  height:8vh;
  background:#fffaf5;
  color:#230005;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 40px;
  font-size:15px;
}

@media(max-width:900px){
  .login-page{
    grid-template-columns:1fr;
    padding:30px 20px;
  }

  .login-card{
    padding:35px 25px;
  }

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

  footer{
    height:auto;
    flex-direction:column;
    gap:8px;
    padding:15px;
    text-align:center;
  }
}


/* =========================================================
   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;
    }
}


/* ===== VJM HOSTING LOGIN HEADER FIX =====
   Keeps included header/logo controlled even when page CSS loads before/after header.css.
*/
.vj-header{
  width:100% !important;
  background:#150003 !important;
  color:#fff !important;
  overflow:visible !important;
  position:relative !important;
  z-index:50 !important;
}
.vj-top-header{
  width:100% !important;
  min-height:120px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
  padding:14px 38px !important;
  background:linear-gradient(90deg,#120000,#250006 55%,#120000) !important;
  border-bottom:2px solid #ffc328 !important;
}
.vj-brand{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  min-width:0 !important;
}
.vj-brand .vj-logo-link{
  display:flex !important;
  width:105px !important;
  height:105px !important;
  flex:0 0 105px !important;
  align-items:center !important;
  justify-content:center !important;
}
.vj-brand .vj-logo-link img,
.vj-header .vj-brand img{
  width:105px !important;
  height:105px !important;
  max-width:105px !important;
  max-height:105px !important;
  object-fit:contain !important;
  border-radius:50% !important;
  display:block !important;
  filter:drop-shadow(0 0 14px rgba(255,191,34,.75)) !important;
}
.vj-brand-text h1{
  margin:0 !important;
  font-size:34px !important;
  line-height:1.08 !important;
  color:#fff !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
}
.vj-brand-text h1 span{color:#ffc328 !important;}
.vj-brand-text p{
  margin:8px 0 0 !important;
  color:#ffd65a !important;
  font-weight:800 !important;
  font-size:16px !important;
}
.vj-contact-info{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:18px !important;
  color:#fff !important;
  font-weight:700 !important;
  font-size:15px !important;
}
.vj-contact-info i{color:#ffc328 !important;}
.vj-auth-buttons{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.vj-auth-buttons a{
  color:#fff !important;
  border:1px solid #ffc328 !important;
  border-radius:10px !important;
  padding:10px 14px !important;
  background:linear-gradient(145deg,#7b0018,#2b0008) !important;
  font-weight:900 !important;
  text-decoration:none !important;
}
.vj-navbar{
  width:calc(100% - 28px) !important;
  margin:0 auto !important;
}
.login-page{
  margin-top:0 !important;
}
.login-page .left-box > .logo{
  width:150px !important;
  height:150px !important;
  max-width:150px !important;
  max-height:150px !important;
}
@media(max-width:900px){
  .vj-top-header{
    flex-direction:column !important;
    padding:16px !important;
    text-align:center !important;
  }
  .vj-brand{
    flex-direction:column !important;
    text-align:center !important;
  }
  .vj-brand .vj-logo-link,
  .vj-brand .vj-logo-link img,
  .vj-header .vj-brand img{
    width:82px !important;
    height:82px !important;
    max-width:82px !important;
    max-height:82px !important;
  }
  .vj-brand-text h1{font-size:26px !important;}
}