/* assets/css/main.css - KitaabZaar Publishers Main Styles */
:root {
  --primary-deep-blue: #0A2647;
  --primary-rich-blue: #1E3A5F;
  --accent-gold: #D4AF37;
  --accent-bronze: #B76E2E;
  --accent-terracotta: #A75D3B;
  --neutral-cream: #FDF6E9;
  --neutral-soft-sand: #F5E6D3;
  --neutral-warm-gray: #E8D9CD;
  --text-charcoal: #2C3E50;
  --text-warm-brown: #5D4A3A;
  --text-soft-brown: #7D6B5D;
  --white-pure: #FFFFFF;
  --white-soft: #FFF9F0;
  --shadow-warm: rgba(167, 93, 59, 0.15);
  --error-soft: #D32F2F;
  --success-soft: #2E7D32;
  --card-bg: #FFFFFF;
  --card-bg-hover: #FFFCF5;
  --card-border: #F0E4D5;
  --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #B76E2E 100%);
  --gradient-warm: linear-gradient(135deg, #FFF9F0 0%, #F5E6D3 100%);
  --gradient-header: linear-gradient(135deg, #0A2647 0%, #1E3A5F 100%);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--neutral-cream);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-charcoal);
  line-height: 1.5;
}

.container { max-width:1280px; margin:0 auto; padding:0 2rem; }
h1, h2, h3, .logo-text, .package-quantity, .estimate-amount { font-family:'Playfair Display', Georgia, serif; font-weight:500; letter-spacing:-0.02em; }

/* ===== CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--neutral-cream); }
::-webkit-scrollbar-thumb { background: var(--gradient-gold); border-radius: 6px; border: 3px solid var(--neutral-cream); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-bronze); }

/* ===== HEADER ===== */
.site-header { background:var(--white-pure); border-bottom:2px solid var(--accent-gold); padding:1.2rem 0; position:sticky; top:0; z-index:100; box-shadow:0 4px 20px var(--shadow-warm); }
.header-container { max-width:1280px; margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.logo { display:flex; align-items:center; gap:1.2rem; cursor:pointer; }
.logo-img { width:54px; height:54px; border-radius:50%; object-fit:cover; border:3px solid var(--accent-gold); box-shadow:0 4px 10px var(--shadow-warm); }
.logo-text { font-family:'Playfair Display', serif; font-size:2rem; font-weight:600; background:var(--gradient-header); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.logo-text span { font-weight:300; color:var(--accent-bronze); margin-left:0.25rem; font-size:1.6rem; -webkit-text-fill-color:var(--accent-bronze); }
.bookstore-link-container { flex:1; display:flex; justify-content:center; align-items:center; }
.bookstore-link { display:inline-block; background:var(--gradient-gold); color:#0A2647; text-decoration:none; padding:0.7rem 1.8rem; border-radius:50px; font-weight:700; font-size:0.95rem; transition:all 0.3s ease; box-shadow:0 4px 15px rgba(212,175,55,0.3); border:1px solid rgba(255,255,255,0.3); letter-spacing:0.3px; white-space:nowrap; }
.bookstore-link:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(212,175,55,0.4); background:linear-gradient(135deg, #e0c450 0%, #c97e3a 100%); color:#0A2647; }
.contact-info { min-width:auto; width:250px; display:flex; justify-content:center; align-items:center; }
.contact-link { color:var(--primary-deep-blue); text-decoration:none; display:flex; align-items:center; justify-content:center; gap:0.6rem; font-size:0.95rem; padding:0.7rem 1rem; border-radius:50px; background:var(--neutral-soft-sand); border:1px solid var(--accent-gold); transition:all 0.3s ease; font-weight:500; width:100%; white-space:nowrap; box-sizing:border-box; }
.contact-link:hover { background:var(--accent-gold); color:var(--primary-deep-blue); transform:translateY(-2px); box-shadow:0 8px 15px var(--shadow-warm); }
.contact-link i { color:var(--accent-bronze); }
.contact-link:hover i { color:var(--primary-deep-blue); }

/* ===== HERO ===== */
.hero { position:relative; padding:3rem 2rem; text-align:center; border-bottom:3px solid var(--accent-gold); overflow:hidden; background:linear-gradient(rgba(10,38,71,0.6), rgba(30,58,95,0.7)), url('bg-image.png'); background-size:cover; background-position:center; background-repeat:no-repeat; min-height:auto; display:flex; align-items:center; justify-content:center; }
.hero-content { position:relative; z-index:10; max-width:900px; margin:0 auto; }
.hero-title { font-family:'Playfair Display', serif; font-size:4rem; font-weight:700; color:var(--white-pure); margin-bottom:1rem; line-height:1.2; text-shadow:2px 2px 8px rgba(0,0,0,0.5); animation:fadeInUp 1s ease-out; }
.hero-subtitle { font-size:1.4rem; color:var(--white-pure); max-width:800px; margin:0 auto; font-weight:400; font-style:italic; text-shadow:1px 1px 4px rgba(0,0,0,0.5); animation:fadeInUp 1s ease-out 0.2s both; }
.hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.2) 100%); z-index:1; pointer-events:none; }

/* ===== PORTFOLIO ===== */
.portfolio-section { padding:3rem 0 1.5rem 0; background:var(--white-pure); }
.section-title { text-align:center; font-size:2rem; font-weight:500; color:var(--primary-deep-blue); margin-bottom:0.3rem; }
.section-subtitle { text-align:center; color:var(--text-warm-brown); font-size:1rem; margin-bottom:2rem; font-weight:300; }
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:1.2rem; max-width:1280px; margin:0 auto; padding:0 2rem; justify-items:center; align-items:start; }
.portfolio-card { background:var(--white-pure); border-radius:16px; overflow:hidden; box-shadow:0 6px 15px -8px rgba(0,0,0,0.06); border:1px solid var(--neutral-warm-gray); transition:all 0.25s ease; cursor:pointer; width:100%; max-width:200px; display:flex; flex-direction:column; align-items:center; }
.portfolio-card:hover { transform:translateY(-4px); border-color:var(--accent-gold); box-shadow:0 12px 20px -10px rgba(212,175,55,0.15); }
.book-cover { position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--neutral-soft-sand); width:100%; }
.book-cover img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease; }
.portfolio-card:hover .book-cover img { transform:scale(1.02); }
.cover-overlay { position:absolute; inset:0; background:rgba(10,38,71,0.6); display:flex; flex-direction:column; align-items:center; justify-content:center; color:white; opacity:0; transition:opacity 0.25s ease; gap:0.3rem; }
.portfolio-card:hover .cover-overlay { opacity:1; }
.cover-overlay i { font-size:1.6rem; color:var(--accent-gold); }
.cover-overlay span { font-size:0.75rem; font-weight:500; letter-spacing:0.05em; }
.book-info { padding: 0.8rem 0.8rem 1rem; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.book-title { font-family:'Playfair Display', serif; font-size:0.95rem; font-weight:600; color:var(--primary-deep-blue); margin-bottom:0.1rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.book-author { font-size:0.8rem; color:var(--text-warm-brown); margin-bottom:0.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.book-category { display:inline-block; background:var(--gradient-warm); padding:0.15rem 0.6rem; border-radius:20px; font-size:0.6rem; font-weight:600; color:var(--accent-terracotta); border:1px solid var(--accent-gold); white-space:nowrap; margin:0 auto; }
.buy-btn { display: inline-block; margin-top: 0.2rem; padding: 0.2rem 0.8rem; background: var(--gradient-gold); color: var(--primary-deep-blue); font-size: 0.65rem; font-weight: 700; border-radius: 30px; text-decoration: none; transition: all 0.2s; border: 1px solid var(--accent-gold); }
.buy-btn:hover { transform:scale(1.05); box-shadow:0 4px 10px rgba(212,175,55,0.3); }

/* ===== MODAL ===== */
.preview-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:1000; align-items:center; justify-content:center; padding:2rem; backdrop-filter:blur(4px); }
.preview-overlay.active { display:flex; }
.preview-modal { background:white; max-width:900px; width:100%; max-height:90vh; border-radius:0px; padding:1.8rem; overflow-y:auto; position:relative; box-shadow:0 30px 60px rgba(0,0,0,0.5); border:2px solid var(--accent-gold); }
.preview-modal .close-btn { position:sticky; top:0; float:right; background:var(--primary-deep-blue); color:white; border:none; width:36px; height:36px; border-radius:50%; font-size:1.2rem; cursor:pointer; transition:all 0.2s; z-index:10; display:flex; align-items:center; justify-content:center; }
.preview-modal .close-btn:hover { background:var(--accent-bronze); transform:rotate(90deg); }
.preview-modal .modal-title { font-family:'Playfair Display', serif; font-size:1.6rem; color:var(--primary-deep-blue); margin:0.5rem 0 0.1rem 0; text-align:center; }
.preview-modal .modal-author { font-size:1rem; color:var(--text-warm-brown); margin-bottom:0.3rem; text-align:center; }
.preview-modal .modal-category { display:inline-block; background:var(--gradient-gold); color:var(--primary-deep-blue); padding:0.2rem 1rem; border-radius:30px; font-size:0.75rem; font-weight:600; margin:0 auto 1.2rem auto; text-align:center; display:table; }
.preview-modal .modal-cover { width:100%; max-height:250px; object-fit:contain; border-radius:14px; margin-bottom:1.2rem; border:1px solid var(--neutral-warm-gray); cursor: pointer; }
.preview-modal .inner-pages { display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem; margin-top:1.2rem; }
.preview-modal .inner-pages .inner-thumb { position:relative; cursor:zoom-in; border-radius:10px; overflow:hidden; border:1px solid var(--neutral-warm-gray); transition:transform 0.2s; }
.preview-modal .inner-pages .inner-thumb:hover { transform:scale(1.02); border-color:var(--accent-gold); }
.preview-modal .inner-pages .inner-thumb img { width:100%; display:block; }
.preview-modal .inner-pages .inner-thumb .zoom-hint { position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,0.6); color:white; font-size:0.65rem; padding:2px 8px; border-radius:12px; pointer-events:none; }
.lightbox-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:2000; align-items:center; justify-content:center; padding:2rem; cursor:zoom-out; }
.lightbox-overlay.active { display:flex; }
.lightbox-overlay img { max-width:90%; max-height:90%; object-fit:contain; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,0.6); }

/* ===== PACKAGES ===== */
.packages { padding:2.5rem 0 3rem 0; background:var(--neutral-cream); }
.packages-title { text-align:center; font-size:2rem; font-weight:500; color:var(--primary-deep-blue); margin-bottom:1.5rem; position:relative; display:inline-block; left:50%; transform:translateX(-50%); }
.packages-title::after { content:''; position:absolute; bottom:-8px; left:25%; width:50%; height:3px; background:var(--gradient-gold); border-radius:3px; }
.package-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; max-width:1280px; margin:0 auto; padding:0 2rem; }
.package-card { background:var(--white-pure); border-radius:24px; padding:1.2rem 1rem; border:1px solid var(--card-border); transition:all 0.3s ease; cursor:pointer; position:relative; box-shadow:0 10px 25px -15px rgba(0,0,0,0.1); }
.package-card:hover { transform:translateY(-6px); border-color:var(--accent-gold); background:var(--card-bg-hover); box-shadow:0 20px 30px -15px rgba(212,175,55,0.2); }
.package-card.selected { border:2px solid var(--accent-gold); background:linear-gradient(145deg,#FFFFFF,#FFFCF2); box-shadow:0 15px 30px -12px rgba(212,175,55,0.25); }
.package-badge { position:absolute; top:-0.6rem; right:1.2rem; background:var(--gradient-gold); color:var(--primary-deep-blue); font-size:0.55rem; text-transform:uppercase; letter-spacing:0.1em; padding:0.2rem 0.8rem; border-radius:25px; font-weight:700; box-shadow:0 4px 8px rgba(212,175,55,0.3); }
.package-quantity { font-size:1.8rem; font-weight:600; color:var(--primary-deep-blue); margin-bottom:0.1rem; line-height:1; }
.custom-quantity-badge { font-size:1.4rem; font-weight:600; color:var(--primary-deep-blue); margin-bottom:0.1rem; display:flex; align-items:baseline; gap:0.3rem; }
.custom-quantity-badge span { font-size:0.8rem; color:var(--accent-bronze); font-family:'Inter',sans-serif; font-weight:400; }
.package-label { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--accent-terracotta); margin-bottom:0.6rem; font-weight:600; }
.package-price { font-size:1.3rem; font-weight:400; color:var(--text-warm-brown); margin-bottom:0.6rem; padding-bottom:0.6rem; border-bottom:2px dashed rgba(212,175,55,0.3); }
.package-price small { font-size:0.6rem; color:var(--accent-bronze); font-weight:500; display:block; margin-top:0.1rem; }
.package-features { list-style:none; margin:0.6rem 0; }
.package-features li { display:flex; align-items:center; gap:0.5rem; padding:0.2rem 0; font-size:0.75rem; color:var(--text-soft-brown); }
.package-features i { color:var(--accent-gold); font-size:0.7rem; }
.package-btn { width:100%; background:var(--gradient-gold); border:none; color:var(--primary-deep-blue); padding:0.6rem; border-radius:40px; font-size:0.8rem; font-weight:600; cursor:pointer; transition:all 0.2s; margin-top:0.3rem; box-shadow:0 4px 8px rgba(212,175,55,0.2); }
.package-btn:hover { transform:scale(1.02); box-shadow:0 6px 15px rgba(212,175,55,0.3); }

/* ===== FORM & ESTIMATE ===== */
.form-section { padding:4rem 0; background:var(--white-pure); }
.form-container { display:grid; grid-template-columns:1.4fr 0.9fr; gap:2rem; max-width:1280px; margin:0 auto; padding:0 2rem; }
.form-card { background:var(--neutral-cream); border-radius:32px; padding:2.5rem; border:1px solid var(--card-border); box-shadow:0 15px 30px -15px rgba(0,0,0,0.05); }
.form-card h2 { font-size:2.2rem; font-weight:500; background:var(--gradient-header); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:2rem; padding-bottom:1rem; border-bottom:2px solid var(--accent-gold); }
.form-row { margin-bottom:1.8rem; }
.form-row label { display:block; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--accent-bronze); margin-bottom:0.5rem; font-weight:700; }
.form-row select, .form-row input { width:100%; padding:1rem 1.2rem; background:var(--white-pure); border:1px solid var(--card-border); border-radius:16px; font-family:'Inter',sans-serif; font-size:1rem; color:var(--text-charcoal); transition:all 0.3s; }
.form-row select:focus, .form-row input:focus { outline:none; border-color:var(--accent-gold); box-shadow:0 0 0 4px rgba(212,175,55,0.1); }
.form-row select:hover, .form-row input:hover { border-color:var(--accent-bronze); }
.form-row input:disabled { background:var(--neutral-soft-sand); border-color:var(--card-border); color:var(--text-soft-brown); opacity:0.7; cursor:not-allowed; }
.form-row input.error { border-color:var(--error-soft); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.paper-notice { background:var(--gradient-warm); border-radius:20px; padding:1.2rem; margin:2rem 0; font-size:0.95rem; color:var(--text-warm-brown); border:1px solid var(--accent-gold); display:flex; align-items:center; gap:1rem; }
.paper-notice i { color:var(--accent-gold); font-size:1.3rem; }
.contact-section { margin-top:2.5rem; padding-top:2rem; border-top:2px solid var(--accent-gold); }
.contact-section h3 { font-size:1.8rem; font-weight:500; color:var(--primary-deep-blue); margin-bottom:2rem; }
.checkbox-item { display:flex; align-items:center; gap:1rem; margin:1.2rem 0; padding:0.5rem; background:var(--neutral-soft-sand); border-radius:12px; transition:all 0.2s; border:1px solid transparent; }
.checkbox-item:hover { background:var(--neutral-warm-gray); border-color:var(--accent-gold); }
.checkbox-item input { width:1.2rem; height:1.2rem; accent-color:var(--accent-gold); }
.checkbox-item label { font-size:1rem; color:var(--text-warm-brown); font-weight:500; }
.error-text { color:var(--error-soft); font-size:0.8rem; margin-top:0.5rem; font-weight:500; }
.estimate-card { background:var(--gradient-warm); border-radius:32px; padding:2.5rem; border:2px solid var(--accent-gold); position:sticky; top:6rem; text-align:center; box-shadow:0 20px 40px -15px rgba(212,175,55,0.15); height:fit-content; }
.estimate-total { background:var(--white-pure); border-radius:28px; padding:2rem 1.5rem; margin-bottom:2rem; border:1px solid var(--accent-gold); box-shadow:inset 0 2px 10px rgba(212,175,55,0.05); }
.estimate-label { font-size:0.8rem; text-transform:uppercase; letter-spacing:0.2em; color:var(--accent-bronze); font-weight:700; }
.estimate-amount { font-size:3.5rem; font-weight:600; background:var(--gradient-header); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1.2; margin:0.3rem 0; }
.estimate-note { font-size:0.9rem; color:var(--text-warm-brown); font-style:italic; font-weight:500; }
.wa-button { background:#25D366; color:white; border:none; padding:1.2rem; border-radius:50px; font-weight:700; font-size:1.1rem; display:flex; align-items:center; justify-content:center; gap:1rem; width:100%; cursor:pointer; transition:all 0.3s; margin:1.5rem 0; box-shadow:0 10px 25px -8px rgba(37,211,102,0.4); border:2px solid transparent; }
.wa-button:hover:not(:disabled) { background:#20b859; transform:translateY(-3px); box-shadow:0 15px 30px -8px #25D366; }
.wa-button:disabled { opacity:0.4; cursor:not-allowed; }
.estimate-footer { color:var(--text-warm-brown); font-size:0.9rem; font-style:italic; border-top:2px dashed var(--accent-gold); padding-top:1.2rem; font-weight:500; }

/* ===== FOOTER ===== */
.site-footer { background:var(--gradient-header); padding:5rem 0 3rem; color:var(--white-soft); margin-top:2rem; border-top:4px solid var(--accent-gold); }
.footer-container { max-width:1280px; margin:0 auto; padding:0 2rem; display:flex; flex-direction:column; align-items:center; gap:3rem; }
.footer-social { display:flex; gap:2rem; }
.social-link { color:var(--accent-gold); font-size:1.5rem; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all 0.3s; border:2px solid var(--accent-gold); }
.social-link:hover { color:var(--primary-deep-blue); background:var(--accent-gold); transform:translateY(-5px) scale(1.1); box-shadow:0 15px 30px rgba(212,175,55,0.3); }
.footer-copyright { color:var(--neutral-warm-gray); font-size:0.95rem; text-align:center; }

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* ===== RESPONSIVE ===== */
@media (max-width:1100px) { .package-grid { grid-template-columns:repeat(2,1fr); gap:1.2rem; } .portfolio-grid { grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); } }
@media (max-width:850px) { .form-container { grid-template-columns:1fr; gap:2rem; } .bookstore-link { white-space:normal; text-align:center; padding:0.5rem 1rem; } .bookstore-text { font-size:0.7rem; } }
@media (max-width:768px) { .hero-title { font-size:2rem; } .hero-subtitle { font-size:1rem; } .portfolio-grid { grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:0.8rem; } .portfolio-card { max-width:160px; } .preview-modal .inner-pages { grid-template-columns:repeat(2,1fr); } .header-container { flex-direction:column; gap:0.8rem; text-align:center; } .logo { order:1; justify-content:center; width:100%; } .bookstore-link-container { order:2; width:100%; justify-content:center; } .contact-info { order:3; width:100%; text-align:center; } }
@media (max-width:600px) { .package-grid { grid-template-columns:1fr; gap:0.8rem; padding:0 1rem; } .package-card { padding:1rem; } .package-quantity { font-size:1.6rem; } .package-price { font-size:1.2rem; } .form-card { padding:1.5rem; } .estimate-card { padding:1.5rem; } .estimate-amount { font-size:2.5rem; } .two-col { grid-template-columns:1fr; gap:0.8rem; } .portfolio-grid { grid-template-columns:repeat(2,1fr); gap:0.6rem; padding:0 1rem; } .portfolio-card { max-width:100%; } }
@media (max-width:480px) { .hero-title { font-size:1.5rem; } .hero-subtitle { font-size:0.85rem; } .portfolio-grid { grid-template-columns:1fr 1fr; gap:0.6rem; padding:0 0.8rem; } .book-title { font-size:0.8rem; } .book-author { font-size:0.7rem; } .book-category { font-size:0.55rem; padding:0.1rem 0.5rem; } .preview-modal { padding:1rem; } .preview-modal .modal-title { font-size:1.2rem; } .preview-modal .inner-pages { grid-template-columns:1fr; } }