/* ===================================================================
   assets/css/style.css
   Shared stylesheet for all public pages of the temple website.
   =================================================================== */

:root{
  --maroon:#7a1620;
  --gold:#caa44a;
  --deep-gold:#9c7a2c;
  --cream:#fff8ec;
  --dark:#2a1108;
  --green:#1f6b3f;
}

*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Segoe UI', Tahoma, Verdana, sans-serif; background:var(--cream); color:var(--dark); line-height:1.6;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
.icon{width:1em; text-align:center; display:inline-block;}

/* Top bar */
.topbar{background:var(--dark); color:#eee; font-size:13px; padding:6px 20px; display:flex; justify-content:space-between; flex-wrap:wrap;}
.topbar a{color:#f3d8a0;}
.topbar span{display:flex; align-items:center; gap:6px;}

/* Nav */
header.nav{background:linear-gradient(135deg,var(--maroon),#5e0f17); padding:14px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; box-shadow:0 3px 10px rgba(0,0,0,.25); position:sticky; top:0; z-index:50;}
.brand{display:flex; align-items:center; gap:12px; color:#fff;}
.brand .logo-icon{font-size:30px; color:var(--gold);}
.brand img.logo-img{height:42px; width:42px; border-radius:50%; object-fit:cover; border:2px solid var(--gold);}
.brand h1{font-size:18px; letter-spacing:.5px;}
.brand p{font-size:12px; color:#f1d9ab;}
nav.menu{display:flex; gap:8px; flex-wrap:wrap;}
nav.menu a{color:#fce9c4; font-weight:600; font-size:14px; padding:8px 12px; border-radius:6px; transition:.2s; display:flex; align-items:center; gap:6px;}
nav.menu a:hover, nav.menu a.active{background:var(--gold); color:var(--maroon);}

/* Hero
   To use a background photo, place an image at assets/images/hero-bg.jpg
   and uncomment the background-image line below. */
.hero{
  background: linear-gradient(135deg, rgba(122,22,32,.95), rgba(60,10,15,.95));
  /* background: linear-gradient(135deg, rgba(122,22,32,.92), rgba(60,10,15,.92)), url('../images/hero-bg.jpg') center/cover; */
  color:#fff; padding:70px 24px; text-align:center;
}
.hero h2{font-size:34px; margin-bottom:10px; color:var(--gold);}
.hero p{max-width:700px; margin:0 auto 24px; font-size:16px; color:#fbe9cb;}
.btn{display:inline-block; padding:13px 28px; border-radius:30px; font-weight:700; font-size:15px; transition:.2s; border:none; cursor:pointer;}
.btn i{margin-right:6px;}
.btn-gold{background:var(--gold); color:var(--maroon);}
.btn-gold:hover{background:#e3bc62; transform:translateY(-2px);}
.btn-outline{border:2px solid var(--gold); color:var(--gold);}
.btn-outline:hover{background:var(--gold); color:var(--maroon);}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* Stats */
.stats{display:flex; justify-content:center; gap:40px; flex-wrap:wrap; padding:36px 20px; background:#fff;}
.stat{text-align:center;}
.stat .num{font-size:32px; font-weight:800; color:var(--maroon);}
.stat .label{font-size:13px; color:#666; text-transform:uppercase; letter-spacing:.5px;}

section{padding:50px 24px; max-width:1180px; margin:0 auto;}
.section-title{text-align:center; margin-bottom:36px;}
.section-title h3{font-size:28px; color:var(--maroon); position:relative; display:inline-block;}
.section-title h3::after{content:""; display:block; width:60px; height:4px; background:var(--gold); margin:10px auto 0; border-radius:2px;}
.section-title p{color:#777; margin-top:8px;}

/* Prize grid */
.prize-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:22px;}
.prize-card{background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.08); transition:.25s; border:1px solid #f0e2c0;}
.prize-card:hover{transform:translateY(-6px); box-shadow:0 10px 26px rgba(0,0,0,.15);}
.prize-card .img-wrap{height:180px; background:#f3e6c8; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.prize-card .img-wrap img{width:100%; height:100%; object-fit:cover;}
.prize-card .img-wrap .ph{font-size:46px; color:var(--gold);}
.prize-card .body{padding:16px;}
.rank-badge{display:inline-block; background:var(--maroon); color:var(--gold); font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; margin-bottom:8px;}
.prize-card h4{font-size:17px; margin-bottom:6px; color:var(--dark);}
.prize-card p{font-size:13px; color:#666; margin-bottom:10px;}
.stock{font-size:12px; font-weight:700;}
.stock i{margin-right:4px;}
.stock.in{color:var(--green);}
.stock.low{color:#b9750a;}
.stock.out{color:#b32020;}

/* Winners */
.winner-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:18px;}
.winner-card{background:#fff; border-radius:12px; text-align:center; padding:18px; box-shadow:0 4px 14px rgba(0,0,0,.08); border-top:4px solid var(--gold);}
.winner-card .photo{width:90px; height:90px; border-radius:50%; object-fit:cover; margin:0 auto 12px; border:3px solid var(--gold); background:#f3e6c8; display:flex; align-items:center; justify-content:center; font-size:30px; color:var(--gold);}
.winner-card h5{color:var(--maroon); font-size:15px;}
.winner-card .rank{font-size:12px; color:var(--deep-gold); font-weight:700;}

/* Info / about cards */
.info-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px;}
.info-card{background:#fff; border-radius:12px; padding:22px; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.06);}
.info-card .ic{font-size:32px; margin-bottom:10px; color:var(--gold);}
.info-card h4{color:var(--maroon); margin-bottom:6px; font-size:16px;}
.info-card p{font-size:13px; color:#666;}

.cta-band{background:linear-gradient(135deg,var(--maroon),#4a0d12); color:#fff; text-align:center; padding:50px 24px;}
.cta-band h3{color:var(--gold); font-size:26px; margin-bottom:10px;}
.cta-band p{color:#f3dcb0; margin-bottom:22px;}

/* Gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px;}
.gallery-grid img{height:140px; width:100%; object-fit:cover; border-radius:10px;}

/* Footer */
footer{background:var(--dark); color:#cbb98a; padding:40px 24px 18px;}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:24px; max-width:1180px; margin:0 auto 24px;}
.footer-grid h5{color:var(--gold); margin-bottom:12px; font-size:15px;}
.footer-grid a, .footer-grid p{display:flex; align-items:center; gap:8px; font-size:13px; color:#cbb98a; margin-bottom:8px;}
.footer-bottom{text-align:center; font-size:12px; border-top:1px solid #4a3a26; padding-top:14px; color:#9a8a6a;}

/* Generic form card (buy-receipt, pooja, tenant forms) */
.wrap{max-width:640px; margin:40px auto; padding:0 20px;}
.wrap.wide{max-width:680px;}
.card{background:#fff; border-radius:16px; padding:34px; box-shadow:0 8px 28px rgba(0,0,0,.1);}
.card h2{color:var(--maroon); margin-bottom:6px; text-align:center;}
.card h2 i{margin-right:8px;}
.sub{text-align:center; color:#777; margin-bottom:24px; font-size:14px;}
label{display:block; font-weight:600; font-size:13px; margin:14px 0 6px; color:#444;}
input, select, textarea{width:100%; padding:11px 13px; border:1px solid #ddd; border-radius:8px; font-size:14px; font-family:inherit;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--gold); border-color:var(--gold);}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
fieldset{border:1px solid #eee; border-radius:10px; padding:16px; margin-bottom:18px;}
legend{font-weight:700; color:var(--maroon); padding:0 8px; font-size:14px;}
.errors{background:#fde2e2; color:#9c2020; padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:13px;}
.success{background:#e7f6ec; color:#1f6b3f; padding:16px; border-radius:10px; margin-bottom:18px; text-align:center; font-weight:700;}
.note{font-size:12px; color:#888; margin-top:14px; text-align:center;}
.privacy{font-size:12px; color:#999; margin-top:14px; line-height:1.5;}
.badge-pill{display:inline-block; background:var(--green); color:#fff; padding:4px 12px; border-radius:20px; font-size:12px; margin-bottom:14px;}
.center{text-align:center;}

/* Quantity selector (buy-receipt) */
.qty-row{display:flex; align-items:center; gap:12px; margin-top:6px;}
.qty-btn{width:38px; height:38px; border-radius:8px; border:1px solid var(--gold); background:#fff7e6; color:var(--maroon); font-size:16px; font-weight:700; cursor:pointer;}
#quantity{text-align:center; max-width:90px;}
.amount-box{background:#fff3da; border:1px dashed var(--gold); border-radius:10px; padding:16px; margin-top:20px; text-align:center;}
.amount-box .amt{font-size:30px; font-weight:800; color:var(--maroon);}

/* Payment page */
.pay-table{width:100%; margin-bottom:18px; font-size:14px;}
.pay-table td{padding:6px 0;}
.pay-table td:first-child{color:#777;}
.pay-table td:last-child{text-align:right; font-weight:600;}
.total-row td{font-size:18px; color:var(--maroon); font-weight:800; border-top:2px dashed var(--gold); padding-top:12px;}
.methods{display:flex; gap:10px; margin:18px 0; flex-wrap:wrap;}
.methods label{flex:1; text-align:center; border:1px solid #ddd; border-radius:10px; padding:10px 8px; font-size:13px; cursor:pointer; transition:.2s;}
.methods input{display:none;}
.methods label:has(input:checked){border-color:var(--gold); background:#fff7e6; color:var(--maroon); font-weight:700;}
.secure{text-align:center; font-size:12px; color:#888; margin-top:14px;}

/* Receipt view (printable) */
.success-banner{max-width:680px; margin:0 auto 20px; background:#e7f6ec; border:1px solid #1f6b3f; color:#1f6b3f; padding:14px 20px; border-radius:10px; text-align:center; font-weight:700;}
.receipt-card{max-width:680px; margin:0 auto; background:#fff; border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,.12); overflow:hidden;}
.r-header{background:linear-gradient(135deg,var(--maroon),#5e0f17); color:#fff; padding:24px; text-align:center;}
.r-header h2{color:var(--gold); margin-bottom:4px;}
.r-header p{font-size:13px; color:#f1d9ab;}
.r-body{padding:26px;}
.r-no{text-align:center; font-size:14px; color:#777; margin-bottom:18px;}
.r-no b{color:var(--maroon); font-size:18px; letter-spacing:1px;}
.r-table{width:100%; border-collapse:collapse; font-size:14px;}
.r-table td{padding:10px 6px; border-bottom:1px solid #f0e6d2;}
.r-table td:first-child{color:#777; width:45%;}
.r-table td:last-child{font-weight:700; text-align:right;}
.total{background:#fff3da; border-radius:10px; padding:16px; margin-top:18px; text-align:center;}
.total .amt{font-size:28px; font-weight:800; color:var(--maroon);}
.actions{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap;}
.actions .btn{flex:1; text-align:center;}
.footer-note{text-align:center; font-size:12px; color:#999; padding:16px;}

/* Empty states */
.empty{text-align:center; padding:60px 20px; color:#999;}
.empty .ic{font-size:46px; margin-bottom:10px; color:var(--gold);}

@media print{ .no-print{display:none;} body{background:#fff;} }
@media(max-width:600px){
  .hero h2{font-size:26px;}
  nav.menu{justify-content:center; width:100%;}
  header.nav{flex-direction:column; gap:10px;}
  .row2{grid-template-columns:1fr;}
}