/*
Theme Name: TheShotFilm
Theme URI: http://www.shotfilm.net/
Description: The Shot Film
Version: 1.0
Author: Abasi.Org
Author URI: http://www.abasi.org/
*/

@font-face {font-family: Yekan; font-style: normal; font-weight: bold; src: url('fonts/iranyekanwebbold.eot'); src: url('fonts/iranyekanwebbold.eot?#iefix') format('embedded-opentype'), url('fonts/iranyekanwebbold.woff2') format('woff2'), url('fonts/iranyekanwebbold.woff') format('woff'), url('fonts/iranyekanwebbold.ttf') format('truetype');}
@font-face {font-family: Yekan; font-style: normal; font-weight: normal; src: url('fonts/iranyekanwebregular.eot'); src: url('fonts/iranyekanwebregular.eot?#iefix') format('embedded-opentype'), url('fonts/iranyekanwebregular.woff2') format('woff2'), url('fonts/iranyekanwebregular.woff') format('woff'), url('fonts/iranyekanwebregular.ttf') format('truetype');}

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?103see');
  src:  url('fonts/icomoon.eot?103see#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?103see') format('truetype'),
    url('fonts/icomoon.woff?103see') format('woff'),
    url('fonts/icomoon.svg?103see#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-chevron-right:before {content: "\e900";}
.icon-menu:before {content: "\e901";}
.icon-instagram:before {content: "\e904";}
.icon-mail:before {content: "\e905";}
.icon-rss:before {content: "\e906";}
.icon-send:before {content: "\e907";}
.icon-twitter:before {content: "\e908";}
.icon-clock:before {content: "\e94e";}
.icon-drawer:before {content: "\e95c";}
.icon-bubbles2:before {content: "\e96d";}
.icon-search:before {content: "\e986";}
.icon-eye:before {content: "\e9ce";}
.icon-share:before {content: "\ea7d";}

/* ============ Design tokens ============ */
:root {
  --paper: #faf8f4;
  --surface: #ffffff;
  --ink: #262420;
  --ink-soft: #6f6a63;
  --line: #ece7dd;
  --accent: #b8471f;
  --accent-dark: #97381a;
  --accent-soft: #f4e3da;
  --radius: 10px;
}

/* ============ Reset / base ============ */
html, body {background-color: var(--paper); color: var(--ink); direction: rtl; font: 15px/1.9 Yekan, Tahoma, sans-serif; margin: 0; padding: 0;}
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
p, h1, h2, h3, h4, h5, ul {margin: 0; padding: 0;}
input, textarea, button {font: 14px/1.6 Yekan, Tahoma, sans-serif; padding: 5px 5px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink);}
	input:focus, textarea:focus {border: 1px solid var(--accent); outline: none;}
select {font: 13px Yekan; border-radius: 8px; border: 1px solid var(--line); background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 9px 10px 9px 28px; background-image: url('images/select-arrow.png'); background-repeat: no-repeat; background-position: 10px center;}
ul {list-style: none outside none; margin: 0; padding: 0;}
	ul li {display: inline;}
a {color: var(--ink); text-decoration: none;}
.nowrap {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.hide{display: none;}

.s0 *{font-size: 10px !important;}
.s1 *{font-size: 12px !important;}
.s2 *{font-size: 14px !important;}
.s3 *{font-size: 16px !important;}
.s4 *{font-size: 18px !important;}
.s5 *{font-size: 20px !important;}

.btn {display: inline-block; padding: 10px 18px; border-radius: 6px; transition: all 0.2s; cursor: pointer; font-size: 13px;}
	.btn.gray {background-color: #eee;}
	.btn.red {background-color: #c0392b; color: #fff;}
	.btn.blue {background-color: var(--accent); color: #fff;}
	.btn.green {background-color: #5a7d4a; color: #fff;}
		.btn:hover {opacity: 0.88;}
	.btn.w100{display: block; margin-top: 15px; width: 100%;}

.abasi_org {position: relative; max-width: 1080px; width: 100%; margin: 0 auto;}
.fr {float: right;}
.fl {float: left;}
.clr {clear: both}

.ads {text-align: center; padding: 20px 0;}

/* ============ Header ============ */
header {background-color: var(--surface); border-bottom: 1px solid var(--line);}
	header .top {padding: 22px 0;}
		header .top > .fr {}
			header .top > .fr a{display: inline-block;}
			header .top > .fr img {height: 46px; border-radius: 6px;}
			header .top > .fr div.fr {margin: 0;}
				header .top > .fr div.fr .t1 {display: block; font-size: 20px; font-weight: bold; color: var(--ink); letter-spacing: -0.2px;}
				header .top > .fr div.fr .shoar {display: block; font-weight: normal; font-size: 12px; color: var(--ink-soft); margin-top: 3px;}
		header .top .search {margin: 6px 0 0 0;}
			header .top .search form {background-color: var(--paper); position: relative; width: 280px; border-radius: 8px; border: 1px solid var(--line);}
				header .top .search form input[type='text'] {border: none; background-color: transparent; width: 100%; padding: 11px 15px 11px 46px; border-radius: 8px;}
				header .top .search form button {position: absolute; left: 0; top: 0; bottom: 0; border: none; background-color: transparent; padding: 0; width: 44px; cursor: pointer; color: var(--ink-soft);}
					header .top .search form button:hover {color: var(--accent);}
				header .top .search form .stat {position: absolute; font-size: 10px; font-style: italic; color: #c0c0c0; padding-top: 4px; left: 0;}
					header .top .search form .stat span {display: inline-block; padding-right: 10px;}
	header .top-menu {font-size: 0; border-top: 1px solid var(--line); text-align: center;}
		header .top-menu a {font-size: 13px; display: inline-block; padding: 13px 16px; transition: all 0.2s; color: var(--ink-soft); font-weight: bold;}
			header .top-menu a:hover {color: var(--accent);}

/* ============ Layout ============ */
article {padding: 45px 0 60px 0;}
	article .right {width: 700px;}
	article .left {width: 320px;}

/* ============ Blog post — list & single ============ */
.post {background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 26px; overflow: hidden; transition: box-shadow 0.2s, border-color .2s;}
	.post:hover {box-shadow: 0 8px 24px rgba(38,36,32,0.06); border-color: #e2dccd;}
	.post > .poster {font-size: 0; border-radius: 8px; overflow: hidden; margin: -20px -20px 20px -20px;}
		.post > .poster a {display: block;}
			.post > .poster a img {width: 100%; height: 320px; display: block; object-fit: cover; transition: all 0.35s;}
				.post > .poster a:hover img {transform: scale(1.04);}
	.post > .top {margin-bottom: 14px; color: var(--ink);}
		.post > .top .post-title {color: var(--ink); font-weight: bold; padding-bottom: 10px; font-size: 23px; line-height: 1.5;}
			.post > .top .post-title a {color: var(--ink); transition: color .15s;}
				.post > .top .post-title a:hover {color: var(--accent);}
		.post > .top .item {display: inline-block; margin: 0 0 8px 14px; font-size: 12px; color: var(--ink-soft);}
			.post > .top .item a {color: var(--ink-soft); transition: all 0.2s;}
				.post > .top .item a:hover {color: var(--accent);}
	.post .bottom {}
		.post .bottom .plot {color: #45423c; line-height: 1.9; margin-bottom: 18px;}
			.post .bottom .plot p {margin: 0 0 14px 0;}
		.post .bottom .f {border-top: 1px solid var(--line); padding-top: 16px;}
			.post .bottom .f > .fr {}
				.post .bottom .f > .fr .item {display: inline-block; color: var(--ink-soft); margin: 0 0 0 18px; font-size: 11px;}
					.post .bottom .f > .fr .item i {margin: 2px 0 0 5px; color: var(--accent);}
						.post .bottom .f > .fr .item i.icon-drawer {margin-top: 0;}
						.post .bottom .f > .fr .item a:hover {color: var(--accent);}
			.post .bottom .f > .fl {margin: -6px 0 0 0;}
				.post .bottom .f .fl .more {background-color: var(--accent); color: #fff; display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 6px; font-size: 12px;}
					.post .bottom .f .fl .more i {font-size: 12px; margin: 0 0 0 8px; line-height: 1;}
					.post .bottom .f .fl .more:hover {background-color: var(--accent-dark);}

/* Single-post specific reading experience */
.single .post {padding: 28px;}
	.single .post > .poster {margin: -28px -28px 24px -28px;}
		.single .post > .poster a img {height: 420px;}
	.single .post > .top .post-title {font-size: 30px;}
	.single .post .bottom .plot {font-size: 16px; line-height: 2;}
		.single .post .bottom .plot h2, .single .post .bottom .plot h3 {margin: 30px 0 12px 0; color: var(--ink); font-weight: bold;}
		.single .post .bottom .plot img {max-width: 100%; border-radius: 8px;}
		.single .post .bottom .plot blockquote {margin: 20px 0; padding: 5px 20px; border-right: 3px solid var(--accent); color: var(--ink-soft); font-style: italic;}
		.single .post .bottom .plot a {color: var(--accent); text-decoration: underline;}

.tags {color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 0 10px 0; margin-bottom: 30px;}
	.tags-label {display: inline-flex; align-items: center; gap: 6px; font-weight: bold; color: var(--ink); font-size: 13px;}
		.tags-label i {font-size: 15px; color: var(--accent);}
	.tags a {display: inline-block; color: var(--ink-soft); background-color: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px; font-size: 12px; transition: all .15s;}
		.tags a:hover {color: #fff; background-color: var(--accent); border-color: var(--accent);}

.help {background-color: var(--accent-soft); border-radius: var(--radius); margin-bottom: 30px; color: #6b3418; border: 1px solid rgba(0,0,0,0.03);}
	.help .h {}
		.help .h .in {background-color: var(--accent); display: inline-block; padding: 6px 12px; border-radius: var(--radius) 0 0 0; color: #fff; font-size: 12px;}
			.help .h .in i {margin: 1px 0 0 5px;}
	.help .c {padding: 15px;}

.description {margin-bottom: 30px; background-color: var(--accent-soft); padding: 16px; border-radius: var(--radius); border: 1px solid rgba(0,0,0,0.03); color: #6b3418;}

/* ============ Sidebar widgets ============ */
.block {background-color: var(--surface); border: 1px solid var(--line); padding: 18px; border-radius: var(--radius); margin-bottom: 22px;}
	.block .h {font-size: 14px; font-weight: bold; color: var(--ink); padding: 0 0 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 14px; display: flex; align-items: center; gap: 8px;}
		.block .h i {font-size: 15px; color: var(--accent); line-height: 1;}
	.block .tab {display: table; width: 100%; margin: 10px 0;}
		.block .tab span {display: table-cell; text-align: center; padding: 5px 0; color: var(--ink-soft); font-size: 11px; cursor: pointer; width: 1%;}
			.block .tab span:hover {color: var(--ink);}
			.block .tab span.sel {background-color: var(--accent); color: #fff; border-radius: 10px;}
	.block .cat-list {font-size: 0;}
		.block .cat-list .item {width: 50%; display: inline-block; padding: 3px;}
			.block .cat-list .item a {font-size: 12px; display: block; border-radius: 6px; padding: 7px 9px; color: var(--ink-soft); background-color: var(--paper); transition: all .15s;}
				.block .cat-list .item a:hover {color: #fff; background-color: var(--accent);}
	.block .update-seri {}
		.block .update-seri .item {padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--line);}
			.block .update-seri .item:last-child {padding-bottom: 0; margin-bottom: 0; border-bottom: none;}
			.block .update-seri .item a {display: flex; align-items: center; gap: 12px;}
				.block .update-seri .item a .poster {flex: 0 0 60px; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background-color: var(--paper);}
					.block .update-seri .item a .poster img {width: 100%; height: 100%; object-fit: cover; transition: all 0.2s;}
						.block .update-seri .item a:hover .poster img {transform: scale(1.08);}
				.block .update-seri .item a .caption {flex: 1; min-width: 0;}
					.block .update-seri .item a .caption span.fl {display: block; font-size: 13.5px; color: var(--ink); line-height: 1.5; white-space: normal; max-width: 100%;}
						.block .update-seri .item a:hover .caption span.fl {color: var(--accent);}

.social {text-align: center; font-size: 0;}
	.social a {display: inline-block; background-color: var(--surface); border: 1px solid var(--line); height: 36px; width: 36px; margin: 5px; border-radius: 8px; padding: 8px 0 0 0; color: var(--ink-soft);}
		.social a i {font-size: 18px;}
		.social a:hover {color: #fff; background-color: var(--accent); border-color: var(--accent);}

/* ============ Footer ============ */
footer {background-color: #211f1c; color: rgba(255,255,255,0.7); margin-top: 20px;}
	footer .h {padding: 45px 0 0 0;}
		footer .h .content {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; padding-bottom: 25px;}
			footer .h .content .about {flex: 1 1 320px;}
				footer .h .content .about .site-title {font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 10px;}
				footer .h .content .about p {color: rgba(255,255,255,0.55); line-height: 1.9; font-size: 13px; max-width: 420px;}
			footer .h .content .last-movie {flex: 0 0 auto;}
			footer .h .content .copy_right {width: 100%; text-align: center; padding: 20px 0; color: rgba(255,255,255,0.4); font-size: 12px; border-top: 1px solid rgba(255,255,255,0.08);}
				footer .h .content .copy_right a {color: rgba(255,255,255,0.4);}
				footer .h .content .copy_right .links {display: block; margin-bottom: 12px;}
					footer .h .content .copy_right .links a {color: rgba(255,255,255,0.75); display: inline-block; padding: 0 12px; border-left: 1px solid rgba(255,255,255,0.15);}
						footer .h .content .copy_right .links li:last-child a {border-left: none;}
					footer .h .content .copy_right a:hover {color: var(--accent);}

/* ============ Comments ============ */
.comments {background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 30px; overflow: hidden;}
	.comments > .h {background-color: var(--paper); border-bottom: 1px solid var(--line); padding: 15px 18px; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 10px;}
		.comments > .h .title-group {display: flex; align-items: center; gap: 6px;}
			.comments > .h .title-group i {font-size: 16px; color: var(--accent); line-height: 1;}
		.comments > .h h2 {font-size: 14px; font-weight: bold; line-height: 1;}
		.comments > .h .total {font-size: 12px; color: var(--ink-soft); line-height: 1; white-space: nowrap;}
	.comments .form {padding: 18px;}
		.comments .form h2, .comments .form .title {color: var(--ink); margin-bottom: 12px; font-size: 15px; font-weight: bold;}
		.comments .form .input {margin-bottom: 12px;}
			.comments .form .input input {padding: 12px 12px; width: 100%; max-width: 320px;}
			.comments .form .input textarea {width: 100%; padding: 12px 12px; min-height: 110px;}
		.comments .form button {border: none; background-color: var(--accent); color: #fff; padding: 11px 18px; width: 100%; max-width: 200px; margin: 0 auto 0 0; display: block; cursor: pointer; border-radius: 6px;}
			.comments .form button i {font-size: 10px; padding-left: 5px;}
			.comments .form button:hover {background-color: var(--accent-dark);}
	.comments .comment{display:flex;padding:16px 18px; border-top: 1px solid var(--line);}
		.comments .content > ul > li:first-child .comment {border-top: none;}
		.comments .comment .avatar{margin-left:12px;display:flex;align-items:flex-start;justify-content:center;width:10%;}
			.comments .comment .avatar img{width:50px;height:50px;border:2px solid var(--paper);background-color:var(--paper);-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
		.comments .comment .content{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;width:90%;}
			.comments .comment .content .h{display:block;font-size:13px; font-weight: bold;}
				.comments .comment .content .h span{display:flex; font-size:11px; color: var(--ink-soft); font-weight: normal; margin-top: 2px;}
			.comments .comment .content .detail{background-color:var(--paper);padding:12px 14px;display:flex;flex-direction:column;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px; margin-top: 8px;}
				.comments .comment .content .detail .replay {background-color: var(--surface); border: 1px solid var(--line); padding: 0 8px; border-radius: 20px; height: 26px; line-height: 24px; transition: all .2s ease-in-out; margin-top: 10px; width: 80px; text-align: center; font-size: 12px;}
					.comments .comment .content .detail .replay:hover{background-color: var(--accent); color:#fff; border-color: var(--accent);}
				.comments li li .comment .content .detail{background-color: var(--accent-soft); color:#6b3418;}

/* ============ Static page ============ */
.page {padding: 26px; background-color: var(--surface); border: 1px solid var(--line); margin-bottom: 30px; border-radius: var(--radius);}
	.page .h {margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 14px;}
		.page .h h1 {color: var(--ink); font-size: 26px;}
	.page .content {color: #45423c; line-height: 1.9; font-size: 15.5px;}
		.page .content p {margin: 0 0 14px 0;}

.page-numbers {margin-bottom:10px; text-align:center; direction:ltr}
	.page-numbers a {color: var(--ink-soft); padding:6px 12px; border-radius: 6px;}
		.page-numbers a:hover {background-color: var(--surface); color: var(--accent);}
	.page-numbers .current {background-color: var(--accent); color:#fff; display:inline-block; padding:6px 12px; border-radius: 6px;}
	.page-numbers li:last-child a {float:right}
	.page-numbers li:first-child a {float:left}
	.page-numbers li:first-child a,
	.page-numbers li:last-child a {background-color: var(--surface); border: 1px solid var(--line); color:var(--ink-soft); display:inline-block; padding:6px 0; text-align:center; width:34px;}

/* ============ Responsive ============ */
@media (max-width:1090px){
	.abasi_org {padding-right: 15px; padding-left: 15px;}
	article .right {width: 660px;}
	article .left {width: 280px;}
}
@media (max-width:1024px){
	article .right, article .left {float: unset; width: auto;}
	.left {margin-top: 20px;}
}
@media (max-width:800px){
	header .top > .fr {float: unset; text-align: center;}
	header .top .search {float: unset; margin-top: 15px;}
		header .top .search form {width: 100%;}
	.post > .top .post-title {text-align: center;}
	.post > .top .item {display: block; margin: 0 0 8px 0;}
	.post .bottom .f > .fr {float: unset; text-align: center;}
	.post .bottom .f > .fl {float: unset; margin: 15px 0 0 0; text-align: center;}
	.post .bottom .f .fl .more {display: block; text-align: center;}
	.single .post > .poster a img {height: 220px;}
	footer .h .content {text-align: center; justify-content: center;}
		footer .h .content .about p {margin: 0 auto;}
}