html{
scroll-behavior:smooth;
}

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

body{
background:#0f0f0f;
color:#eee;
line-height:1.8;
font-family:'Vazirmatn', sans-serif;
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
background:#121212;
border-bottom:1px solid #222;
}

.logo{
color:#f7b733;
font-size:24px;
font-weight:600;
}

.nav-links{
list-style:none;
display:flex;
gap:30px;
}

.nav-links a{
text-decoration:none;
color:#ddd;
transition:0.3s;
}

.nav-links a:hover{
color:#f7b733;
}

.btn{
background:#f7b733;
border:none;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
font-weight:600;
}

/* HERO */

.hero {
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background:
    linear-gradient(rgba(18, 12, 10, 0.45), rgba(18, 12, 10, 0.72)),
    url("sun.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-content {
  background: rgba(15, 10, 8, 0.35);
  backdrop-filter: blur(6px);
  padding: 24px 32px;
  border-radius: 18px;
}

.hero-content h2{
font-size:48px;
margin-bottom:15px;
color:#f7b733;
}

.hero-content p{
margin-bottom:20px;
color:#ccc;
}

.hero-btn{
background:#f7b733;
border:none;
padding:14px 26px;
border-radius:8px;
font-size:16px;
cursor:pointer;
}

/* SECTIONS */

.section-title{
text-align:center;
font-size:32px;
margin-bottom:40px;
color:#f7b733;
}

.featured{
padding:80px 8%;
}

.book-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
}

.book-card{
background:#1a1a1a;
padding:20px;
border-radius:10px;
text-align:center;
transition:0.3s;
}

.book-card:hover{
transform:translateY(-8px);
box-shadow:0 10px 25px rgba(0,0,0,0.6);
}

.book-card img{
width:100%;
border-radius:6px;
margin-bottom:10px;
}

/* CATEGORIES */

.categories{
padding:80px 8%;
background:#141414;
}

.category-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:20px;
}

.category{
background:#1d1d1d;
padding:25px;
text-align:center;
border-radius:8px;
font-weight:500;
cursor:pointer;
transition:0.3s;
}

.category:hover{
background:#f7b733;
color:#000;
}

/* NEWSLETTER */

.newsletter{
padding:80px 8%;
text-align:center;
}

.newsletter-form{
margin-top:20px;
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}

.newsletter input{
padding:12px;
width:250px;
border:none;
border-radius:6px;
}

.newsletter button{
padding:12px 20px;
border:none;
background:#f7b733;
border-radius:6px;
cursor:pointer;
}

/* FOOTER */
/* FOOTER */

footer{
background:#111;
padding:80px 8%;
margin-top:60px;
border-top:1px solid #1d1d1d;
}

.footer-container{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:60px;
margin-bottom:40px;

}

.footer-section{
flex:1;
min-width:250px;
}

.footer-section h3{
color:#f7b733;
margin-bottom:15px;
}



.social-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    direction: rtl;
    margin-top: 15px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;  /* وسط‌چین کردن متن */
    text-decoration: none;
    padding: 14px 18px;
    border-radius: 8px;
    background:#111;
    border: 1px solid #2a2a2a;
    color: #eee;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 15px;          /* سایز یکسان برای همه */
    font-weight: 500;
    transition: 0.3s ease;
    width: 40%;              /* عرض کامل کانتینر والد */
    min-height: 52px;         /* ارتفاع یکسان */
}

/* افکت Hover طلایی */
.social-links a:hover {
    border-color: #f7b733;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    color: #f7b733;
}

/* آیدی انگلیسی */
.social-links .id-text {
    direction: ltr;
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    opacity: 0.8;
    margin-right: 8px;
}

/* CONTACT FORM */

.contact-form{
display:flex;
flex-direction:column;
gap:12px;
margin-top:10px;
}

.contact-form input,
.contact-form textarea{
padding:12px;
border-radius:6px;
border:none;
background:#1a1a1a;
color:#ddd;
font-family:'Vazirmatn', sans-serif;
}

.contact-form textarea{
resize:none;
}

.contact-form button{
padding:12px;
border:none;
background:#f7b733;
color:#000;
border-radius:6px;
cursor:pointer;
font-weight:600;
transition:0.25s;
}

.contact-form button:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.6);
}

.copyright{
text-align:center;
color:#777;
margin-top:30px;
}

.book-showcase{
padding:80px 8%;
}

.book-container{
display:flex;
gap:50px;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}

.book-cover{
width:260px;
height:auto;
border-radius:12px;
box-shadow:0 20px 45px rgba(0,0,0,0.65);
}
.book-info{
max-width:400px;
}

.author{
color:#aaa;
margin:10px 0;
}

.description{
margin:20px 0;
}

.price{
font-size:24px;
color:#f7b733;
margin-bottom:20px;
}

.buy-btn{
display:inline-block;
background:#f7b733;
color:black;
padding:12px 25px;
border-radius:8px;
text-decoration:none;
font-weight:600;
}

.book-page{
padding:80px 8%;
}

.book-detail{
display:flex;
gap:60px;
flex-wrap:wrap;
align-items:flex-start;
}

.book-text{
max-width:500px;
}

.poem{
margin:20px 0;
padding:20px;
background:#1a1a1a;
border-left:4px solid #f7b733;
font-style:italic;
}


/* PURCHASE PAGE */


.purchase-page {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120px 20px;
}

.purchase-container {
    background: #151515;
    padding: 40px;
    border-radius: 10px;
    width: 420px;
    max-width: 95%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

.purchase-container h2 {
    color: #f7b733;
    margin-bottom: 10px;
}


.purchase-info {
    color: #bbb;
    margin-bottom: 25px;
}
.purchase-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.purchase-form input,
.purchase-form textarea {
    padding: 12px;
    border-radius: 6px;
    background: #1f1f1f;
    color: #ddd;
    font-family: 'Vazirmatn', sans-serif;
    /* اضافه کردن مرز پیش‌فرض */
    border: 1px solid #2a2a2a; 
    outline: none;
    transition: 0.3s ease;
}

/* افکت فوکوس طلایی برای تمام فیلدها (به جز فیلد موبایل که کلاس جدا دارد) */
.purchase-form input:focus,
.purchase-form textarea:focus {
    border-color: #f7b733;
    box-shadow: 0 0 8px rgba(247, 183, 51, 0.2);
}

.price-box{
display:flex;
justify-content:space-between;
margin-top:10px;
color:#ddd;
}

.pay-btn{
margin-top:15px;
padding:12px;
border:none;
border-radius:6px;
background:#f7b733;
color:#000;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.pay-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.6);
}


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

.quantity-box button{
width:35px;
height:35px;
border:none;
border-radius:6px;
background:#f7b733;
color:#000;
font-size:18px;
cursor:pointer;
}

.quantity-box span{
min-width:25px;
text-align:center;
font-size:18px;
color:#ddd;
}


.back-link{
display:flex;
align-items:center;
gap:8px;
text-decoration:none;
color:#ddd;
transition:0.3s;
font-weight:500;
}

.back-link:hover{
color:#f7b733;
}

.back-link .arrow{
transition:0.3s;
}

.back-link:hover .arrow{
transform:translateX(-4px);
}


/* استایل اختصاصی فیلد شماره تماس هماهنگ با تم سایت */
.phone-wrapper {
    display: flex;
    align-items: center;
    direction: ltr; /* جهت شماره از چپ به راست */
    background: #1f1f1f; /* هماهنگ با ورودی‌های دیگر فرم شما */
    border: 1px solid #2a2a2a; /* مرز تیره */
    border-radius: 6px;
    padding: 2px 12px;
    transition: 0.3s;
}

/* حالت فوکوس: تغییر رنگ مرز به طلایی ساتی */
.phone-wrapper:focus-within {
    border-color: #f7b733;
    box-shadow: 0 0 8px rgba(247, 183, 51, 0.2);
}

/* پیش‌شماره +98 با رنگ طلایی سایت */
.country-code {
    color: #f7b733; 
    font-weight: 600;
    font-size: 16px;
    padding-right: 12px;
    border-right: 1px solid #333;
    margin-right: 12px;
    user-select: none;
}

/* استایل ورودی متن شماره */
#phoneInput {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #ddd !important;
    width: 100%;
    font-size: 16px;
    padding: 12px 0 !important; /* هماهنگ با padding سایر اینپوت‌ها */
    margin: 0 !important;
    letter-spacing: 1.5px;
}

/* تغییر رنگ Placeholder برای هماهنگی */
#phoneInput::placeholder {
    color: #555;
    letter-spacing: 0;
}