/* EasyClippers 13.14: the giveaway page's buttons everywhere in the app and on the home page. The owner, Nov 5 2026:
   "I love the buttons on the giveaway page i think we should make all buttons on easyclippers.com page like that and
   as well as the platform itself", and for how strong: "Full on main, lighter on small". So the main buttons are flat
   aqua pills with an ink outline and a hard shadow that presses down, like the poster; every other button keeps its
   colours and gets the same outline and shadow, thinner; small buttons thinner again; text buttons stay plain.
   On dark navy an ink edge disappears, so the dark theme draws the same outline and shadow in white, like white ink
   (the owner, Nov 5: "for the dark theme we should make the shaddow or whatever white like the bottom part").
   Loaded over app.css and glass.css (the liquid finish), just before the card-free layer (flat.css stays last). Those
   and home-light.css use several selectors of different weight for the same buttons, so the skin here (background,
   border, radius, shadow, the press) is set with !important, and only the skin. Also the 3D picture on dialogs. */
:root {
  --pb-fill: #2ee6d6; --pb-fill-hi: #74f1e6; --pb-on: #03141a;
  --pb-edge: #0b1020;                    /* main buttons: the outline and the hard shadow */
  --pb-line: rgba(11, 16, 32, .82);      /* every other button: its outline */
  --pb-drop: rgba(11, 16, 32, .88);      /* every other button: its hard shadow */
  --pb-glow: 0 14px 28px -16px rgba(46, 230, 214, .75);
}
:root[data-theme="dark"] {     /* the owner, Nov 5: in dark "make the shaddow or whatever white like the bottom part" */
  --pb-edge: #ffffff;
  --pb-line: rgba(255, 255, 255, .8);
  --pb-drop: rgba(255, 255, 255, .85);
  --pb-glow: 0 14px 30px -16px rgba(46, 230, 214, .5);
}

/* ---------- main buttons: the one main colour (13.9, EC-126), now in the poster's ink ---------- */
:is(.btn.primary, .btn.success, .hm-btn.primary, .hm-sticky a):not(.side-card *) {
  background: var(--pb-fill) !important; color: var(--pb-on) !important; filter: none !important;
  border: 2px solid var(--pb-edge) !important; border-radius: 999px !important;
  box-shadow: 0 4px 0 var(--pb-edge), var(--pb-glow) !important;
  transition: transform .14s, box-shadow .14s, background-color .14s !important;
}
:is(.btn.primary, .btn.success, .hm-btn.primary, .hm-sticky a):not(.side-card *):hover {
  background: var(--pb-fill-hi) !important; transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--pb-edge), var(--pb-glow) !important;
}
:is(.btn.primary, .btn.success, .hm-btn.primary, .hm-sticky a):not(.side-card *):active {
  transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--pb-edge) !important;
}
:is(.btn.primary, .btn.success).sm:not(.side-card *) { border-width: 1.5px !important; box-shadow: 0 3px 0 var(--pb-edge) !important; }
:is(.btn.primary, .btn.success).sm:not(.side-card *):hover { box-shadow: 0 4px 0 var(--pb-edge) !important; }
:is(.btn.primary, .btn.success).sm:not(.side-card *):active { transform: translateY(2px) !important; box-shadow: 0 1px 0 var(--pb-edge) !important; }

/* ---------- every other button: its own colours, a thinner outline and shadow ---------- */
:is(.btn:not(.primary):not(.success):not(.ghost), .hm-btn.line):not(.side-card *) {
  border: 1.5px solid var(--pb-line) !important; border-radius: 999px !important;
  box-shadow: 0 3px 0 var(--pb-drop) !important;
  transition: transform .14s, box-shadow .14s, background-color .14s, color .14s !important;
}
:is(.btn:not(.primary):not(.success):not(.ghost), .hm-btn.line):not(.side-card *):hover {
  transform: translateY(-1px); box-shadow: 0 4px 0 var(--pb-drop) !important;
}
:is(.btn:not(.primary):not(.success):not(.ghost), .hm-btn.line):not(.side-card *):active {
  transform: translateY(2px) !important; box-shadow: 0 1px 0 var(--pb-drop) !important;
}
.btn.sm:not(.primary):not(.success):not(.ghost):not(.side-card *) { border-width: 1px !important; box-shadow: 0 2px 0 var(--pb-drop) !important; }
.btn.sm:not(.primary):not(.success):not(.ghost):not(.side-card *):hover { box-shadow: 0 3px 0 var(--pb-drop) !important; }
.btn.sm:not(.primary):not(.success):not(.ghost):not(.side-card *):active { transform: translateY(1px) !important; box-shadow: 0 1px 0 var(--pb-drop) !important; }

/* text buttons stay plain, only rounder; a disabled button lies flat */
.btn.ghost:not(.side-card *) { border-radius: 999px !important; }
:is(.btn, .hm-btn, .hm-sticky a):is(:disabled, [aria-disabled="true"]):not(.side-card *),
:is(.btn, .hm-btn, .hm-sticky a):is(:disabled, [aria-disabled="true"]):not(.side-card *):is(:hover, :active) {
  transform: none !important; box-shadow: none !important; }

/* ---------- a 3D picture above the dialogs that have one (core.js, DLG_ART) ---------- */
.modal .dlg-art { display: block; width: 72px; height: 72px; margin: 0 0 10px -4px; filter: drop-shadow(0 10px 14px rgba(6, 18, 48, .22)); }
@media (max-width: 560px) { .modal .dlg-art { width: 60px; height: 60px; } }

@media (prefers-reduced-motion: reduce) {
  :is(.btn, .hm-btn, .hm-sticky a) { transition: none !important; }
  :is(.btn, .hm-btn, .hm-sticky a):is(:hover, :active) { transform: none !important; }
}