@font-face{
font-family:"Vazirmatn";
src:url("/static/fonts/Vazir.woff2") format("woff2");
font-display:swap;
}

*{
box-sizing:border-box;
font-family:"Vazirmatn",sans-serif;
}

body{
margin:0;
background:#fff;
direction:rtl;
color:#202124;
}

/* HOME PAGE */

.home{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.home-container{
text-align:center;
width:100%;
}

.logo-big{
font-size:72px;
font-weight:700;
margin-bottom:40px;
color:#4285f4;
}

/* SEARCH BOX */
/* search page version of search-box */
.search-page .search-box{
    width:100%;
    max-width:584px;
    margin:0;
}

.search-box{
position:relative;
width:584px;
margin:auto;
}

.search-box input{
width:100%;
height:48px;
border:1px solid #dfe1e5;
border-radius:24px;
padding:0 100px 0 50px;
font-size:16px;
outline:none;
background:#fff;
}

.search-box input:hover{
box-shadow:0 1px 6px rgba(32,33,36,.28);
border-color:transparent;
}

.search-box input:focus{
box-shadow:0 1px 6px rgba(32,33,36,.28);
border-color:transparent;
}

/* icons */

.search-icon{
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
border:none;
background:none;
cursor:pointer;
}

.clear-btn{
position:absolute;
left:60px;
top:50%;
transform:translateY(-50%);
border:none;
background:none;
font-size:18px;
cursor:pointer;
color:#9aa0a6;
display:none;
}

.mic-icon{
position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
font-size:18px;
color:#9aa0a6;
}

/* AUTOCOMPLETE */

.autocomplete{
position:absolute;
top:52px;
right:0;
left:0;
background:#fff;
border:1px solid #ddd;
border-top:none;
border-radius:0 0 24px 24px;
box-shadow:0 4px 6px rgba(32,33,36,.28);
z-index:20;
}

.autocomplete div{
padding:10px 16px;
cursor:pointer;
font-size:14px;
}

.autocomplete div:hover{
background:#f1f3f4;
}

/* TOPBAR */

.topbar{
display:flex;
align-items:center;
gap:30px;
padding:18px 30px;
border-bottom:1px solid #eee;
}

.logo-small{
font-size:24px;
font-weight:bold;
color:#4285f4;
}

.logo-small a{
text-decoration:none;
color:#4285f4;
}

/* RESULTS */

.results-container{
max-width:720px;
margin:30px auto;
}

.result{
margin-bottom:32px;
}

.result-header{
display:flex;
align-items:center;
gap:10px;
margin-bottom:4px;
}

.favicon{
width:16px;
height:16px;
}

.site-url{
color:#0b8043;
font-size:14px;
}

.title{
font-size:20px;
color:#1a0dab;
text-decoration:none;
display:block;
margin:4px 0;
}

.title:hover{
text-decoration:underline;
}

.snippet{
font-size:14px;
color:#4d5156;
line-height:1.7;
}

.highlight{
background:#ffff00;
}

/* PAGINATION */

#pagination{
margin-top:40px;
text-align:center;
}

#pagination button{
padding:8px 14px;
border:1px solid #dadce0;
background:#fff;
border-radius:6px;
cursor:pointer;
margin:4px;
}

#pagination button:hover{
background:#f8f9fa;
}

/* MOBILE */

@media(max-width:700px){

.search-box{
width:92%;
}

.logo-big{
font-size:44px;
}

.results-container{
padding:0 14px;
}

}

/* ===== Home Footer ===== */
.home-footer {
  background: #f2f2f2;
  color: #70757a;
  font-size: 14px;
  border-top: 1px solid #dadce0;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: right;
  direction: rtl;
}

.home-footer .footer-location {
  padding: 15px 30px;
  border-bottom: 1px solid #dadce0;
}

.home-footer .footer-links {
  display: flex;
  justify-content: space-between;
  padding: 10px 30px;
  flex-wrap: wrap;
}

.home-footer a {
  color: #70757a;
  text-decoration: none;
  margin: 5px 10px;
}

.home-footer a:hover {
  text-decoration: underline;
}

/* ===== Search Page Footer ===== */
.search-footer {
  background: linear-gradient(to top, #f8f9fa 0%, #fff 60%);
  box-shadow: 0 -2px 8px rgba(60,64,67,0.1);  color: #70757a;
  font-size: 13px;
  margin-top: 60px;
  border-top: 1px solid #dadce0;
  text-align: right;
  padding: 15px 40px 25px;
  direction: rtl;
}

.search-footer-location {
  margin-bottom: 8px;
}

.search-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.search-footer a {
  color: #70757a;
  text-decoration: none;
}

.search-footer a:hover {
  text-decoration: underline;
}

.home-copyright{
  margin-top:28px;
  font-size:13px;
  color:#5f6368;
}