/*
 * Hand-written additions to the ported theme.
 *
 * Kept separate from blog.css, which is generated by
 * tools/extract-metronic-css.mjs and overwritten every time it runs. Anything
 * written by hand belongs here.
 */

/* ------------------------------------------------------------------ */
/* The blog reads like the rest of the site                            */
/* ------------------------------------------------------------------ */

/*
 * The blog markup comes from Metronic, so it arrives asking for Metronic's
 * type: its own sans-serif stack at 1rem/1.5. Next to the site's Roboto —
 * Dana in Persian — at 16px/1.4 the difference is obvious the moment you
 * scroll from a page into an article.
 *
 * Re-pointing the variables is enough: every rule the extractor copied reads
 * them, so the layout, spacing and colours stay Metronic's while the letters
 * become the site's.
 */
.mt-blog {
  --bs-font-sans-serif: var(--secondary-font);
  --bs-body-font-family: var(--secondary-font);
  --bs-body-font-size: 16px;
  --bs-body-line-height: 1.4;

  font-family: var(--secondary-font);
  font-size: 16px;
  line-height: 1.4;
}

/* Headings follow the site's display face, as they do everywhere else. */
.mt-blog h1,
.mt-blog h2,
.mt-blog h3,
.mt-blog h4,
.mt-blog h5,
.mt-blog h6,
.mt-blog .fw-bold,
.mt-blog .fw-semibold {
  font-family: var(--primary-font);
}

/*
 * Metronic's scale runs larger than the site's. These bring the sizes the blog
 * actually uses into line with .title-1 / .para-1 / .para-3 without touching
 * the layout classes around them.
 */
.mt-blog .fs-2 { font-size: 22px !important; }
.mt-blog .fs-4 { font-size: 17px !important; }
.mt-blog .fs-5 { font-size: 15px !important; }
.mt-blog .fs-6 { font-size: 14px !important; }
.mt-blog h3 { font-size: 18px; }

.mt-blog .rich-content {
  font-family: var(--secondary-font);
  font-size: 16px;
}

/* ------------------------------------------------------------------ */
/* Badges on footer links                                              */
/* ------------------------------------------------------------------ */

/*
 * The theme only styles New/Soon inside the navbar dropdown. The menu editor
 * offers the same badge on footer links, so the footer needs to draw it too —
 * a control that does nothing is worse than no control.
 *
 * Same visual as the navbar's, minus the margin-left:auto, because a footer
 * link is not a flex row that pushes the badge to the far edge.
 */
.theme-footer .footer-list .list-link a.st-new::after,
.theme-footer .footer-list .list-link a.st-soon::after {
  position: relative;
  display: inline-block;
  font-size: 10px;
  font-family: var(--secondary-font);
  padding: 3px 7px;
  border-radius: 2px;
  margin-inline-start: 8px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
}

.theme-footer .footer-list .list-link a.st-new::after {
  content: 'New';
  color: #15cd72;
  background-color: rgba(21, 205, 113, 0.1);
}

.theme-footer .footer-list .list-link a.st-soon::after {
  content: 'Soon';
  color: var(--gold);
  background-color: rgba(255, 183, 48, 0.1);
}

/* Light / dark toggle in the navbar (shared with the panel via localStorage). */
.theme-navbar .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-inline-start: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  opacity: .5;
  cursor: pointer;
  transition: all .15s ease;
}
.theme-navbar .theme-toggle:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .08);
}
.light-theme .theme-navbar .theme-toggle {
  color: var(--dark);
  opacity: 1;
}
.light-theme .theme-navbar .theme-toggle:hover {
  background: rgba(15, 16, 20, .06);
}
.theme-navbar .theme-toggle .icon-sun { display: none; }
.theme-navbar .theme-toggle .icon-moon { display: block; }
.light-theme .theme-navbar .theme-toggle .icon-sun { display: block; }
.light-theme .theme-navbar .theme-toggle .icon-moon { display: none; }
.theme-navbar .second-options .theme-toggle {
  width: 24px;
  height: 24px;
  margin-inline-start: 0;
}

/* Footer in light mode. The original template styled the footer dark-only;
   these mirror the navbar's light rules so the whole page follows the toggle. */
.light-theme .theme-footer {
  background-color: var(--light);
  border-top: 1px solid var(--border);
}
.light-theme .theme-footer .footer-list .list-title,
.light-theme .theme-footer .footer-bottom .links li a,
.light-theme .theme-footer .footer-bottom .para-3 a {
  color: var(--dark);
}
.light-theme .theme-footer .footer-list .list-link > a:hover,
.light-theme .theme-footer .footer-bottom .links li a:hover,
.light-theme .theme-footer .footer-bottom .para-3 a:hover {
  color: var(--primary);
}
.light-theme .theme-footer .footer-bottom .links li:not(:last-of-type)::after {
  background-color: rgba(15, 16, 20, .25);
}
@media only screen and (max-width: 767.98px) {
  .light-theme .theme-footer .footer-list .list-title::before,
  .light-theme .theme-footer .footer-list .list-title::after {
    background-color: var(--dark);
  }
}
.light-theme .theme-footer .footer-bottom .social-list a img {
  filter: invert(0);
}
.theme-footer .footer-bottom .logo img.lt-img { display: none; }
.light-theme .theme-footer .footer-bottom .logo img.lt-img { display: block; }
.light-theme .theme-footer .footer-bottom .logo img.dt-img { display: none; }

/* Header, footer and cookie dialog are LTR in every locale (dir="ltr" on the
   element); rtl.css mirrors Bootstrap-style utilities for the whole Persian
   page, so restore them inside that chrome. */
[dir="ltr"] .ml-auto { margin-left: auto !important; margin-right: unset !important; }
[dir="ltr"] .mr-auto { margin-right: auto !important; margin-left: unset !important; }
[dir="ltr"] .ml-1 { margin-left: .25rem !important; margin-right: 0 !important; }
[dir="ltr"] .ml-2 { margin-left: .5rem !important; margin-right: 0 !important; }
[dir="ltr"] .ml-3 { margin-left: 1rem !important; margin-right: 0 !important; }
[dir="ltr"] .mr-1 { margin-right: .25rem !important; margin-left: 0 !important; }
[dir="ltr"] .mr-2 { margin-right: .5rem !important; margin-left: 0 !important; }
[dir="ltr"] .mr-3 { margin-right: 1rem !important; margin-left: 0 !important; }
[dir="ltr"] .text-left { text-align: left !important; }
[dir="ltr"] .text-right { text-align: right !important; }
[dir="ltr"] ul, [dir="ltr"] ol { padding-left: 20px; padding-right: 0; }
[dir="ltr"] .list-unstyled { padding-left: 0; }
[dir="ltr"] .dropdown-menu, [dir="ltr"] .sub-menu { right: auto; left: auto; text-align: left; }

/* The Persian compare table is wider than a phone; let it scroll inside its
   box instead of widening the whole page (which zoomed the mobile layout out). */
.compare-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* The plan feature tooltips (.float-box::after, 280px, hidden until hover)
   hang past the card's left edge. LTR clips that side for free; RTL makes it
   scrollable and the phone layout zooms out. Clip at the section so the
   hidden tooltip never widens the page (clip is not a scroll container). */
.se-iii {
  overflow-x: clip;
}

/* ---------------------------------------------------------------- Contact */
/* Contact block, after Metronic's contact page: one card holding the form
   and a map, two rounded info boxes, a social strip. Theme palette only. */
.se-contact .se-head .para-1 {
  max-width: 720px;
  margin: 14px auto 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-gray);
}

.se-contact .contact-card {
  padding: 60px;
  border-radius: 12px;
  background-color: var(--semi-dark);
  border: 1px solid rgba(255, 255, 255, .08);
}
.light-theme .se-contact .contact-card {
  background-color: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 2px 5px #dde5eb;
}
@media only screen and (max-width: 991.98px) {
  .se-contact .contact-card { padding: 32px 24px; }
}
@media only screen and (max-width: 575.98px) {
  .se-contact .contact-card { padding: 24px 16px; }
}

/* form */
.se-contact .contact-form-col { padding-inline-end: 40px; }
.se-contact .contact-map-col { padding-inline-start: 40px; }
@media only screen and (max-width: 991.98px) {
  .se-contact .contact-form-col,
  .se-contact .contact-map-col { padding-inline: 15px; }
  .se-contact .contact-map-col { margin-top: 30px; }
}
.se-contact .form-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 30px;
}
.light-theme .se-contact .form-title { color: var(--dark); }
.se-contact .contact-form label {
  display: block;
  font-size: 15px;
  font-family: var(--secondary-font);
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}
.light-theme .se-contact .contact-form label { color: var(--dark); }
.se-contact .contact-form .form-group { margin-bottom: 20px; }
.se-contact .contact-form .form-group-lg { margin-bottom: 30px; }
.se-contact .contact-form .form-control {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--secondary-font);
  color: #fff;
  background-color: #1e2129;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 6px;
  outline: none;
  transition: all .15s ease;
}
.se-contact .contact-form textarea.form-control {
  height: auto;
  min-height: 150px;
  padding: 12px 16px;
  line-height: 1.7;
  resize: vertical;
}
.se-contact .contact-form .form-control:hover { background-color: #23262f; border-color: rgba(255, 255, 255, .15); }
.se-contact .contact-form .form-control:focus { background-color: #23262f; border-color: var(--primary); }
.light-theme .se-contact .contact-form .form-control {
  background-color: var(--light);
  color: var(--dark);
}
.light-theme .se-contact .contact-form .form-control:hover { background-color: #eaf0f5; }
.light-theme .se-contact .contact-form .form-control:focus { background-color: #eaf0f5; border-color: var(--primary); }
.se-contact .contact-form .btn { height: 46px; padding: 0 28px; }

/* map */
.se-contact .contact-map {
  height: 100%;
  min-height: 420px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #1e2129;
}
.light-theme .se-contact .contact-map { background-color: var(--light); }
.se-contact .contact-map iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }

/* info boxes */
.se-contact .contact-info { margin-top: 40px; }
.se-contact .info-box {
  height: 100%;
  padding: 40px 24px;
  text-align: center;
  border-radius: 12px;
  background-color: #1b1e25;
  border: 1px solid rgba(255, 255, 255, .06);
}
.light-theme .se-contact .info-box { background-color: var(--light); border-color: transparent; }
@media only screen and (max-width: 575.98px) {
  .se-contact .info-box { margin-bottom: 16px; }
}
.se-contact .info-box .icon { width: 44px; height: 44px; filter: invert(52%) sepia(78%) saturate(1800%) hue-rotate(10deg); }
.se-contact .info-box .title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 18px 0 10px;
}
.light-theme .se-contact .info-box .title { color: var(--dark); }
.se-contact .info-box .value {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-gray);
  text-decoration: none;
}
.se-contact .info-box a.value:hover { color: var(--primary); }

/* social */
.se-contact .contact-social {
  margin-top: 24px;
  padding: 34px 16px;
  text-align: center;
  border-radius: 12px;
  background-color: #1b1e25;
  border: 1px solid rgba(255, 255, 255, .06);
}
.light-theme .se-contact .contact-social { background-color: var(--light); border-color: transparent; }
.se-contact .contact-social a { display: inline-block; margin: 0 16px; opacity: .85; transition: all .15s ease; }
.se-contact .contact-social a:hover { opacity: 1; transform: translateY(-2px); }
.se-contact .contact-social img { height: 28px; width: 28px; filter: invert(1); }
.light-theme .se-contact .contact-social img { filter: invert(0); }

/* notices */
.se-contact .notify {
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 14px;
  color: #fff;
}
.light-theme .se-contact .notify { color: var(--dark); }
.se-contact .notify-success { background-color: rgba(21, 205, 114, .12); border: 1px solid rgba(21, 205, 114, .5); }
.se-contact .notify-error { background-color: rgba(244, 201, 131, .12); border: 1px solid rgba(244, 201, 131, .6); }

/* ------------------------------------------------------------ Terms block */
/* The structured terms block stores clause bodies as editor HTML (no class
   names), so the theme's .list-level-i / .list-item / .list-level-ii looks are
   re-created here by structure: section > ul > li, and a nested ul inside. */
.terms-page main > div > .content .terms-intro p {
  font-size: 16px;
  font-family: var(--secondary-font);
  line-height: 1.8;
  color: var(--text-gray);
  margin-bottom: 20px;
}
.terms-page main > div > .content .terms-body > ul,
.terms-page main > div > .content .terms-body > ol {
  padding-left: 44px;
  list-style: upper-alpha;
  counter-reset: list-item;
}
[dir="rtl"] .terms-page main > div > .content .terms-body > ul,
[dir="rtl"] .terms-page main > div > .content .terms-body > ol {
  padding-left: 0;
  padding-right: 44px;
}
.terms-page main > div > .content .terms-body > ul > li,
.terms-page main > div > .content .terms-body > ol > li {
  position: relative;
  font-size: 16px;
  font-family: var(--secondary-font);
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-gray);
  padding: 10px 0;
  list-style: none;
}
.terms-page main > div > .content .terms-body > ul > li::before,
.terms-page main > div > .content .terms-body > ol > li::before {
  display: inline-block;
  width: 20px;
  padding-right: 10px;
  font-weight: bold;
  color: #ffffff;
  content: counter(list-item, upper-latin) ".";
}
[dir="rtl"] .terms-page main > div > .content .terms-body > ul > li::before,
[dir="rtl"] .terms-page main > div > .content .terms-body > ol > li::before {
  padding-right: 0;
  padding-left: 10px;
}
.light-theme.terms-page main > div > .content .terms-body > ul > li::before,
.light-theme.terms-page main > div > .content .terms-body > ol > li::before {
  color: var(--text-gray);
}
.terms-page main > div > .content .terms-body li > p {
  display: inline;
  margin: 0;
}
.terms-page main > div > .content .terms-body p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-gray);
  margin-bottom: 12px;
}
.terms-page main > div > .content .terms-body li ul,
.terms-page main > div > .content .terms-body li ol {
  padding: 10px 0 0 45px;
  list-style: disc;
}
[dir="rtl"] .terms-page main > div > .content .terms-body li ul,
[dir="rtl"] .terms-page main > div > .content .terms-body li ol {
  padding: 10px 45px 0 0;
}
.terms-page main > div > .content .terms-body li li {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-gray);
  padding: 4px 0;
  list-style: disc;
}
.terms-page main > div > .content .terms-body li li::before { content: none; }
.terms-page main > div > .content .terms-body a {
  color: var(--primary);
}
.terms-page main > div > .content .terms-body a:hover { text-decoration: underline; }
@media only screen and (max-width: 767.98px) {
  .terms-page main > div > .content .terms-body > ul,
  .terms-page main > div > .content .terms-body > ol { padding-left: 24px; }
  [dir="rtl"] .terms-page main > div > .content .terms-body > ul,
  [dir="rtl"] .terms-page main > div > .content .terms-body > ol { padding-right: 24px; padding-left: 0; }
  .terms-page main > div > .content .terms-body > ul > li,
  .terms-page main > div > .content .terms-body li li,
  .terms-page main > div > .content .terms-body p { font-size: 14px; }
}

/* --------------------------------------------------------- Domain prices */
.domain-actions { gap: 8px; }
.domain-action-btn {
  border: 1px solid rgba(255, 255, 255, .15);
  background: transparent;
  color: var(--text-gray);
  border-radius: 50px;
  padding: 10px 26px;
  font-size: 14px;
  font-family: var(--secondary-font);
  cursor: pointer;
  transition: all .15s ease;
}
.domain-action-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .35); }
.domain-action-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.light-theme .domain-action-btn { border-color: var(--border); color: var(--text-gray); }
.light-theme .domain-action-btn:hover { color: var(--dark); }
.light-theme .domain-action-btn.active { color: #fff; }
.domain-vat-note { font-size: 13px; color: var(--text-gray); margin-top: 8px; }