/*
 * ═══════════════════════════════════════════════
 *  layout.css — استایل‌های لایه‌بندی BaseV5
 *  header + sticky-menu + footer
 *  استخراج‌شده از components/layout/
 * ═══════════════════════════════════════════════
 */

/* ══ HEADER ══ */
header { width: 100%; background: #F8F9FA; margin: 0 auto }
.EM-header { display: flex; justify-content: center; align-items: center; padding-top: 100px; flex-direction: column }
.EM-header .EM-img-box { border-radius: 10px; border: 5px solid #FFF; width: 100%; max-height: 138px; max-width: 138px; object-fit: cover; overflow: hidden; background-color: #fff; margin-bottom: 22px }
.EM-header .EM-img-box img { width: 100%; height: 100% }
.EM-header h1 { color: #343A40; text-align: center; font-size: 30px; font-weight: 700; line-height: 60px; margin-bottom: 27px }
.EM-header .EM-info-user { display: flex; border-radius: 50px; border: 1px solid #DEE2E6; background: #FFF; justify-content: space-between; max-width: 600px; padding: 12px 69px; width: 100%; margin-bottom: 31px }
.EM-header .EM-info-user > div { display: flex; flex-direction: column; align-items: center; justify-content: center }
.EM-header .EM-info-user h6 { color: #343A40; text-align: center; font-size: 16px; font-weight: 700; line-height: 32px }
.EM-header .EM-info-user span { color: #868E96; text-align: center; font-size: 14px; font-weight: 400; line-height: 24px }
.EM-header p { color: #343A40; text-align: justify; font-size: 18px; font-weight: 400; line-height: 34px; margin-bottom: 51px }

@media screen and (max-width: 768px) {
  .EM-header .EM-img-box { max-height: 104px; max-width: 104px; margin-bottom: 20px }
  .EM-header h1 { font-size: 23px; line-height: 46px; margin-bottom: 20px }
  .EM-header p { font-size: 16px; line-height: 30px }
}
@media screen and (max-width: 576px) {
  .EM-header { padding-top: 57px }
  .EM-header .EM-img-box { max-height: 88px; max-width: 88px; margin-bottom: 16px }
  .EM-header h1 { font-size: 18px; line-height: 36px; margin-bottom: 16px }
  .EM-header .EM-info-user h6 { font-size: 13px; line-height: 24px }
  .EM-header .EM-info-user span { font-size: 12px; line-height: 25px }
  .EM-header .EM-info-user { margin-bottom: 32px; padding: 14px 24px 10px 24px; border-radius: 10px }
  .EM-header p { font-size: 16px; line-height: 30px; margin-bottom: 44px }
}


/* ══ STICKY MENU ══ */
.EM-sticky-menu { border-top: 1px solid #DEE2E6; padding: 15px 0; position: sticky; top: 0; background-color: #F8F9FA; z-index: 999; margin-bottom: 68px }
.EM-items-menu { display: flex; align-items: center; justify-content: space-between }
.EM-items-menu .EM-btns-menu { display: flex; gap: 15px }
.EM-items-menu .EM-btn { border-radius: 10px; border: 0.2px solid #DEE2E6; background: #FFF; padding: 9px; color: #343A40; font-size: 16px; font-weight: 500; line-height: 22px; display: flex; align-items: center; cursor: pointer; font-family: inherit }
.EM-items-menu .EM-btn::before { margin-left: 10px; position: relative; top: 2px }
.EM-items-menu .EM-btn.menu::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.5 19.9V4.1C10.5 2.6 9.86 2 8.27 2H4.23C2.64 2 2 2.6 2 4.1V19.9C2 21.4 2.64 22 4.23 22H8.27C9.86 22 10.5 21.4 10.5 19.9Z' stroke='%23343A40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 8.52V3.98C22 2.57 21.36 2 19.77 2H15.73C14.14 2 13.5 2.57 13.5 3.98V8.51C13.5 9.93 14.14 10.49 15.73 10.49H19.77C21.36 10.5 22 9.93 22 8.52Z' stroke='%23343A40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 19.77V15.73C22 14.14 21.36 13.5 19.77 13.5H15.73C14.14 13.5 13.5 14.14 13.5 15.73V19.77C13.5 21.36 14.14 22 15.73 22H19.77C21.36 22 22 21.36 22 19.77Z' stroke='%23343A40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.EM-items-menu .EM-btn.EM-share { color: #339AF0 }
.EM-items-menu .EM-btn.EM-save { color: #12B886 }
.EM-items-menu .EM-btn.EM-comment { color: #FCC419 }
.EM-items-menu .EM-btn.EM-btn-pro { color: #FFF; background-color: #845EF7; padding: 11px 9px }
.EM-items-menu .EM-btn.EM-share::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.40005 6.32015L15.8901 3.49015C19.7001 2.22015 21.7701 4.30015 20.5101 8.11015L17.6801 16.6002C15.7801 22.3102 12.6601 22.3102 10.7601 16.6002L9.92005 14.0802L7.40005 13.2402C1.69005 11.3402 1.69005 8.23015 7.40005 6.32015Z' stroke='%23339AF0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.11 13.6501L13.69 10.0601' stroke='%23339AF0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.EM-items-menu .EM-btn.EM-save::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z' stroke='%2312B886' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 11.5098L12 14.5098L15 11.5098' stroke='%2312B886' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 14.5098V6.50977' stroke='%2312B886' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 16.5098C9.89 17.8098 14.11 17.8098 18 16.5098' stroke='%2312B886' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.EM-items-menu .EM-btn.EM-comment::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8.5 19H8C4 19 2 18 2 13V8C2 4 4 2 8 2H16C20 2 22 4 22 8V13C22 17 20 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z' stroke='%23FCC419' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 8H17' stroke='%23FCC419' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 13H13' stroke='%23FCC419' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.EM-items-menu .EM-btn.EM-btn-pro::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='20' viewBox='0 0 22 20' fill='none'%3E%3Cpath d='M11 18.5L20.4972 7.65431C20.7941 7.31527 20.8275 6.81953 20.5789 6.4437L17.3077 1.5M11 18.5L1.49272 7.64283C1.20058 7.30921 1.16305 6.82303 1.40053 6.44852L4.53846 1.5M11 18.5L14.1757 7.08015M11 18.5L7.82432 7.08015M17.3077 1.5H11M17.3077 1.5L14.1757 7.08015M4.53846 1.5L7.82432 7.08015M4.53846 1.5H11M7.82432 7.08015L11 1.5M11 1.5L14.1757 7.08015' stroke='white' stroke-width='1.3'/%3E%3C/svg%3E") }

@media screen and (max-width: 768px) {
  .EM-items-menu .EM-btn { padding: 7px; font-size: 14px; line-height: 14px }
  .EM-items-menu .EM-btn.EM-btn-pro { padding: 9px; margin-right: 15px; min-width: max-content }
  .EM-items-menu { width: 100%; overflow-x: auto }
}


/* ══ FOOTER ══ */
.em-footer { background: #F8F9FA; border-top: 1px solid #E5E7EB; padding: 32px 0; margin-top: 60px }
.em-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 12px }
.em-footer__logo { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #343A40 }
.em-footer__logo svg { width: 24px; height: 24px; color: #12B886 }
.em-footer__text { font-size: 12px; color: #9CA3AF; text-align: center; line-height: 1.8 }
.em-footer__links { display: flex; gap: 20px; margin-top: 4px }
.em-footer__link { font-size: 12px; font-weight: 600; color: #6B7280; text-decoration: none; transition: color .2s }
.em-footer__link:hover { color: #12B886 }
.em-footer__copy { font-size: 11px; color: #CBD5E1; margin-top: 8px; direction: ltr }