/* =========================================================
   SAKSAN — components.css
   Global variables + shared icon buttons
   ========================================================= */


/* ================== VARIABLES ================== */

:root {
  --glass-bg: rgba(20, 20, 25, 0.75);
  --glass-bg-solid: rgba(11, 11, 13, 0.90);
  --glass-blur: 22px;

  --header-h: 94px;
  --tabs-h: 102px;
  --line: rgba(255, 255, 255, 0.12);

  --statusbar-top-color: #050505;
  --statusbar-top-line: 2px;
  --statusbar-fade: 138px;

  --glass-stroke: rgba(255, 255, 255, 0.10);
  --glass-stroke-strong: rgba(255, 255, 255, 0.16);
  --glass-highlight: rgba(255, 255, 255, 0.20);
  --glass-highlight-soft: rgba(255, 255, 255, 0.08);
  --glass-shadow: rgba(0, 0, 0, 0.28);
  --glass-shadow-deep: rgba(0, 0, 0, 0.38);

  --hdr-p: 0;
}

@media (min-width: 900px) {
  :root {
    --header-h: 106px;
    --tabs-h: 110px;
  }
}


/* ================== ICON BUTTONS ================== */

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  position: relative;

  background: linear-gradient(
    180deg,
    rgba(48, 48, 56, 0.82) 0%,
    rgba(24, 24, 30, 0.78) 100%
  );

  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  user-select: none;
  -webkit-user-select: none;

  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 8px 18px rgba(0, 0, 0, 0.22);

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.18s ease,
    box-shadow 0.25s ease;
}

.icon-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 34%,
    rgba(255, 255, 255, 0) 60%
  );

  opacity: 1;
}

.icon-btn svg {
  width: 21px;
  height: 21px;
  opacity: 0.96;
}

.icon-btn:active {
  transform: scale(0.98);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 4px 12px rgba(0, 0, 0, 0.20);
}

@media (min-width: 900px) {
  .icon-btn {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
}


/* ================== ICON BUTTONS — ACCENT ================== */

.icon-btn--accent {
  background: linear-gradient(
    180deg,
    rgba(72, 58, 20, 0.84) 0%,
    rgba(34, 28, 12, 0.80) 100%
  );

  border-color: rgba(201, 162, 77, 0.30);
  color: #d7ad4a;

  box-shadow:
    inset 0 1px 0 rgba(255, 235, 170, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 8px 18px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(201, 162, 77, 0.08);
}


/* ================== HEADER ACTION BUTTONS ================== */

#menuBtn,
#cartBtn {
  overflow: hidden;
  isolation: isolate;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.095) 0%,
      rgba(255, 255, 255, 0.028) 100%
    ),
    rgba(22, 22, 28, 0.50);

  border-color: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.92);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 18px rgba(0, 0, 0, 0.20);

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

#menuBtn::before,
#cartBtn::before {
  z-index: 0;
  inset: 1px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.04) 42%,
      rgba(255, 255, 255, 0) 72%
    );
  opacity: 0.58;
}

#menuBtn::after,
#cartBtn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

#cartBtn {
  overflow: visible;

  background:
    linear-gradient(
      180deg,
      rgba(201, 162, 77, 0.16) 0%,
      rgba(201, 162, 77, 0.055) 100%
    ),
    rgba(23, 21, 18, 0.52);

  border-color: rgba(201, 162, 77, 0.28);
  color: #e2b95a;

  box-shadow:
    inset 0 1px 0 rgba(255, 235, 170, 0.17),
    0 8px 18px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(201, 162, 77, 0.06);
}

#cartBtn svg {
  position: relative;
  z-index: 2;
  width: 22px;
  height: 22px;
  opacity: 1;
  filter:
    drop-shadow(0 1px 0 rgba(255, 245, 196, 0.10))
    drop-shadow(0 4px 7px rgba(0, 0, 0, 0.22));
}

#cartBtn .cart-count {
  z-index: 3;
  top: -5px;
  right: -5px;
  min-width: 18px;
  padding: 2px 6px;
  color: #15100a;
  background:
    linear-gradient(180deg, #ffe39a 0%, #cfa042 100%);
  border: 1px solid rgba(255, 247, 206, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 5px 12px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(64, 42, 12, 0.18);
}

@media (max-width: 899px) {
  #cartBtn {
    margin-top: 3px;
    margin-right: 10px;
  }
}