/* =========================================================
   ظ†ظ‚ظ„ط© — NAQLAH
   ط«ظٹظ… ط¹ط§ظ„ظٹ | ط§ظ„ظ†ط³ط®ط© ط§ظ„ط¯ط§ظƒظ†ط© ط§ظ„ظ…ط­ط³ظ†ط©
   ط®ظ„ظپظٹط© ظپط­ظ…ظٹط© + ط·ط¨ظ‚ط§طھ ط²ط¬ط§ط¬ظٹط© ط¨ط¯ظˆظ† ط®ط·ظˆط· ط£ظˆ ظ†ظ‚ط§ط· ظ…طھظƒط±ط±ط©
   ========================================================= */

:root {
  --naqlah-ink: #151515;
  --naqlah-surface: #242424;

  --naqlah-text: #ffffff;
  --naqlah-muted: #bdbdbd;

  --naqlah-border: rgba(255, 255, 255, 0.16);

  --naqlah-dark-gradient:
    linear-gradient(
      180deg,
      #353535 0%,
      #484848 100%
    );

  --naqlah-light-gradient:
    linear-gradient(
      180deg,
      #dddddd 0%,
      #fafafa 100%
    );

  --naqlah-glass:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(18, 18, 20, 0.42) 45%,
      rgba(255, 255, 255, 0.06) 100%
    );

  --naqlah-glass-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.28),
    inset 0 -1px 1px rgba(255, 255, 255, 0.06),
    inset 0 0 24px rgba(255, 255, 255, 0.04),
    0 12px 40px rgba(0, 0, 0, 0.60);
}


/* =========================================================
   ط§ظ„ط®ظ„ظپظٹط© ط§ظ„ط±ط¦ظٹط³ظٹط©
   ========================================================= */

body.color-mode-dark {
  background-color: var(--naqlah-ink) !important;

  background-image:
    radial-gradient(
      ellipse 70% 45% at 50% 18%,
      rgba(255, 255, 255, 0.055) 0%,
      rgba(255, 255, 255, 0.025) 38%,
      rgba(21, 21, 21, 0) 72%
    ),
    linear-gradient(
      180deg,
      #1a1a1a 0%,
      #151515 45%,
      #151515 100%
    ) !important;

  background-repeat: no-repeat !important;
  background-size: 100% 900px, 100% 100% !important;
  background-position: top center !important;
  background-attachment: scroll !important;

  color: var(--naqlah-text);
}


/* =========================================================
   ط§ظ„ظ…ط­طھظˆظ‰ ط§ظ„ط±ط¦ظٹط³ظٹ
   ========================================================= */

body.color-mode-dark #main-content {
  background-color: transparent !important;
  background-image: none !important;
}


/* =========================================================
   ظ‚ط³ظ… ط§ظ„ظ‡ظٹط±ظˆ / ط§ط¹ط±ظپ ط£ظƒط«ط±
   ========================================================= */

body.color-mode-dark section.know-more .know-more-inner {
  background-color: var(--naqlah-surface) !important;
  background-image: var(--naqlah-glass) !important;

  border: 1px solid var(--naqlah-border) !important;
  border-radius: 30px !important;

  box-shadow: var(--naqlah-glass-shadow);

  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}


/* ط²ط± ط§ظ„ظ‡ظٹط±ظˆ */

body.color-mode-dark section.know-more .more-btn a.btn {
  background-color: #353535 !important;
  background-image: var(--naqlah-dark-gradient) !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  color: var(--naqlah-text) !important;

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.28),
    0 8px 20px rgba(0, 0, 0, 0.30);

  transition:
    filter 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


/* =========================================================
   ط§ظ„ظ‡ظٹط¯ط±
   ========================================================= */

body.color-mode-dark header.store-header {
  background-color: rgba(21, 21, 21, 0.96) !important;
  background-image: none !important;

  color: var(--naqlah-text);

  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}


/* =========================================================
   ط§ظ„ظپظˆطھط±
   ========================================================= */

body.color-mode-dark footer.store-footer,
body.color-mode-dark footer.store-footer .store-footer__inner {
  background-color: var(--naqlah-ink) !important;
  background-image: none !important;

  color: var(--naqlah-text);
}


body.color-mode-dark footer.store-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}


/* =========================================================
   ظˆط³ط§ط¦ظ„ ط§ظ„ط¯ظپط¹
   ========================================================= */

body.color-mode-dark footer.store-footer .s-payments-list-item {
  background-color: #eeeeee !important;
  background-image: var(--naqlah-light-gradient) !important;

  border: 1px solid #d4d4d4 !important;

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.70),
    0 4px 12px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   ط¨ط·ط§ظ‚ط§طھ ط§ظ„ظ…ظ†طھط¬ط§طھ / ط§ظ„ط¨ط§ظ‚ط§طھ
   ========================================================= */

body.color-mode-dark custom-salla-product-card {
  background-color: var(--naqlah-surface) !important;
  background-image: var(--naqlah-glass) !important;

  border-color: var(--naqlah-border) !important;

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.35);

  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}


/* =========================================================
   ط£ط²ط±ط§ط± ط§ظ„ظ…ظ†طھط¬ط§طھ
   ========================================================= */

body.color-mode-dark
custom-salla-product-card
.s-button-btn.s-button-primary:not(:disabled) {

  background-color: #dddddd !important;
  background-image: var(--naqlah-light-gradient) !important;

  border: 1px solid #d4d4d4 !important;

  color: var(--naqlah-ink) !important;

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.70),
    0 6px 16px rgba(0, 0, 0, 0.20);

  transition:
    filter 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


/* =========================================================
   Hover
   ========================================================= */

body.color-mode-dark section.know-more .more-btn a.btn:hover,
body.color-mode-dark
custom-salla-product-card
.s-button-btn.s-button-primary:not(:disabled):hover {

  filter: brightness(1.08);
}


/* =========================================================
   Focus
   ========================================================= */

body.color-mode-dark
:is(
  section.know-more .more-btn a.btn,
  custom-salla-product-card .s-button-btn.s-button-primary
):focus-visible {

  outline: 2px solid #dddddd;
  outline-offset: 3px;
}


/* =========================================================
   ط¥ط²ط§ظ„ط© ط£ظٹ ط®ظ„ظپظٹط§طھ ظ…طھظƒط±ط±ط© ظ‚ط¯ طھط³ط¨ط¨ ط®ط·ظˆط· ط£ظˆ ظپظˆط§طµظ„ ط؛ط±ظٹط¨ط©
   ========================================================= */

body.color-mode-dark,
body.color-mode-dark #main-content {
  background-repeat: no-repeat !important;
}


/* =========================================================
   ط²ط± ط§ظ„ط±ط¬ظˆط¹ ط¥ظ„ظ‰ ط£ط¹ظ„ظ‰ ط§ظ„طµظپط­ط©
   ========================================================= */

body.color-mode-dark .scroll-progress-wrapper::after {
  background-color: var(--naqlah-ink) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--naqlah-text) !important;
}


/* =========================================================
   ط§ظ„ط¬ظˆط§ظ„
   ========================================================= */

@media (max-width: 767px) {

  body.color-mode-dark {
    background-size: 100% 650px, 100% 100% !important;
    background-position: top center !important;
    background-attachment: scroll !important;
  }

  body.color-mode-dark section.know-more .know-more-inner {
    border-radius: 22px !important;

    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}


/* =========================================================
   طھظ‚ظ„ظٹظ„ ط§ظ„ط­ط±ظƒط© ظ„ظ…ظ† ظٹظپط¶ظ„ ط°ظ„ظƒ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  body.color-mode-dark section.know-more .more-btn a.btn,

  body.color-mode-dark
  custom-salla-product-card
  .s-button-btn.s-button-primary {

    transition: none !important;
  }
}