/* /content/themes/default/css/identity.css */
/* Ehna - user identity: name colors, badges, tags, avatar frames & effects */
/*
  Loaded after style/features.css but before the inline _head.css.tpl rules, so every
  override uses a `:not(#i)` id-weight bump. Class names / CSS vars used by templates,
  admin.js and voice_rooms.js are kept: identity-name(-custom|-owner|-featured|-badged),
  identity-effect-*, --identity-*, user-badge-chip, avatar-frame-custom,
  avatar-frame-effect-*, --avatar-frame-*, owner-avatar-ring, featured-avatar-ring.
*/

@property --idf-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ===================================================================
   1. Theme tokens (light default, dark for night mode & dark surfaces)
   =================================================================== */
:root,
.idt-light {
  --identity-plain: #111827;
  --idf-gap: #ffffff;
  --idn-contour: drop-shadow(0 0 .35px rgba(15, 23, 42, .55));
  --idn-halo-mix: 34%;
  --idn-mix-color: #000;
  --idn-neon-mix: 24%;
  --idn-pal-badged: linear-gradient(100deg, #0369a1 0%, #4f46e5 55%, #7c3aed 100%);
  --idn-pal-featured: linear-gradient(100deg, #6d28d9 0%, #2563eb 25%, #0891b2 50%, #2563eb 75%, #6d28d9 100%);
  --idn-pal-gold: linear-gradient(100deg, #7a4a05 0%, #b7791f 24%, #d9a43c 44%, #9a6410 66%, #7a4a05 100%);
  --idn-pal-chrome: linear-gradient(100deg, #1f2937 0%, #4b5563 26%, #8a94a3 46%, #374151 70%, #1f2937 100%);
  --idn-pal-fire: linear-gradient(100deg, #b91c1c 0%, #ea580c 25%, #d97706 50%, #ea580c 75%, #b91c1c 100%);
  --idn-pal-ice: linear-gradient(100deg, #0c4a6e 0%, #0284c7 30%, #0891b2 52%, #1d4ed8 78%, #0c4a6e 100%);
  --idn-pal-rainbow: linear-gradient(100deg, #dc2626 0%, #d97706 16%, #16a34a 33%, #0891b2 50%, #4f46e5 66%, #c026d3 83%, #dc2626 100%);
  --idn-pal-royal: linear-gradient(100deg, #4c1d95 0%, #7c3aed 32%, #a16207 52%, #7c3aed 72%, #4c1d95 100%);
  --idn-sheen: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%, transparent 100%);
}

body.night-mode,
.idt-dark,
.vr-sugo,
.lightbox[data-live-post-id] {
  --identity-plain: #eef1ff;
  --idf-gap: #0c1129;
  --idn-contour: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
  --idn-halo-mix: 60%;
  --idn-mix-color: #fff;
  --idn-neon-mix: 52%;
  --idn-pal-badged: linear-gradient(100deg, #38bdf8 0%, #818cf8 55%, #c084fc 100%);
  --idn-pal-featured: linear-gradient(100deg, #a78bfa 0%, #67e8f9 25%, #818cf8 50%, #67e8f9 75%, #a78bfa 100%);
  --idn-pal-gold: linear-gradient(100deg, #b8860b 0%, #f6d77a 28%, #fff3c4 45%, #e2a93b 64%, #b07a0e 100%);
  --idn-pal-chrome: linear-gradient(100deg, #8d97a5 0%, #e9eef5 28%, #ffffff 45%, #b8c2cf 66%, #7b8494 100%);
  --idn-pal-fire: linear-gradient(100deg, #ef4444 0%, #f97316 25%, #fbbf24 50%, #f97316 75%, #ef4444 100%);
  --idn-pal-ice: linear-gradient(100deg, #7dd3fc 0%, #e0f2fe 30%, #67e8f9 52%, #93c5fd 78%, #7dd3fc 100%);
  --idn-pal-rainbow: linear-gradient(100deg, #f87171 0%, #fbbf24 16%, #4ade80 33%, #22d3ee 50%, #818cf8 66%, #e879f9 83%, #f87171 100%);
  --idn-pal-royal: linear-gradient(100deg, #a78bfa 0%, #c4b5fd 30%, #fcd34d 52%, #c4b5fd 72%, #a78bfa 100%);
}

.vr-sugo { --idf-gap: #1b1033; }
.lightbox[data-live-post-id] { --idf-gap: #111111; }

/* ===================================================================
   2. User names
   =================================================================== */

/* Regular users: clean solid name, no glow/underline (like big networks) */
html body .identity-name:not(#i) {
  --idn-weight: 700;
  font-weight: var(--idn-weight) !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
  animation: none !important;
  color: var(--identity-plain) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

html body a.identity-name:not(#i):hover,
html body .identity-name:not(#i) a:hover {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

/* Decorated names: gradient text with a solid-color fallback */
html body .identity-name:is(.identity-name-custom, .identity-name-owner, .identity-name-featured, .identity-name-badged):not(#i) {
  --idn-fill: var(--identity-gradient, linear-gradient(var(--identity-solid), var(--identity-solid)));
  --idn-halo: drop-shadow(0 0 0 transparent);
  --idn-anim: none;
  color: var(--identity-solid, #2563eb) !important;
  background-image: var(--idn-fill) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 0 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: var(--idn-contour) var(--idn-halo) !important;
  animation: var(--idn-anim) !important;
}

/* Built-in defaults when no custom colors were picked */
html body .identity-name.identity-name-badged:not(.identity-name-custom):not(.identity-name-owner):not(.identity-name-featured):not(#i) {
  --identity-solid: #4f46e5;
  --idn-fill: var(--idn-pal-badged);
}

html body .identity-name.identity-name-featured:not(.identity-name-custom):not(#i) {
  --identity-solid: #7c3aed;
  --identity-glow: #8b5cf6;
  --idn-fill: var(--idn-pal-featured);
  --idn-halo: drop-shadow(0 0 4px color-mix(in srgb, #8b5cf6 var(--idn-halo-mix), transparent));
  --idn-anim: idn-flow 7s linear infinite;
  background-size: 200% 100% !important;
  background-repeat: repeat-x !important;
}

html body .identity-name.identity-name-owner:not(.identity-name-custom):not(#i) {
  --identity-solid: #b7791f;
  --idn-anim: idn-sheen 4.2s ease-in-out infinite;
  background-image: var(--idn-sheen), var(--idn-pal-gold) !important;
  background-size: 300% 100%, 100% 100% !important;
  background-position: 100% 0, 0 50% !important;
}

/* --- Name effects (keys stored in users.user_name_effect) --- */

/* glow: soft readable halo */
html body .identity-name.identity-effect-glow:not(#i) {
  --idn-halo: drop-shadow(0 0 4px color-mix(in srgb, var(--identity-glow, var(--identity-solid)) var(--idn-halo-mix), transparent));
}

/* shimmer: light sheen sweeping over the gradient */
html body .identity-name.identity-effect-shimmer:not(#i),
html body .identity-name.identity-effect-gold:not(#i),
html body .identity-name.identity-effect-chrome:not(#i),
html body .identity-name.identity-effect-ice:not(#i),
html body .identity-name.identity-effect-royal:not(#i) {
  --idn-anim: idn-sheen 3.8s ease-in-out infinite;
  background-image: var(--idn-sheen), var(--idn-fill) !important;
  background-size: 300% 100%, 100% 100% !important;
  background-position: 100% 0, 0 50% !important;
}

/* pulse: colors breathe back and forth + soft halo */
html body .identity-name.identity-effect-pulse:not(#i) {
  --idn-fill: var(--identity-loop, var(--identity-gradient));
  --idn-halo: drop-shadow(0 0 4px color-mix(in srgb, var(--identity-glow, var(--identity-solid)) var(--idn-halo-mix), transparent));
  --idn-anim: idn-breathe 2.6s ease-in-out infinite alternate;
  background-size: 200% 100% !important;
}

/* aurora: smooth endless color flow */
html body .identity-name.identity-effect-aurora:not(#i),
html body .identity-name.identity-effect-fire:not(#i),
html body .identity-name.identity-effect-rainbow:not(#i) {
  --idn-fill: var(--identity-loop, var(--identity-gradient));
  --idn-anim: idn-flow 6s linear infinite;
  background-size: 200% 100% !important;
  background-repeat: repeat-x !important;
}

/* neon: bright core + crisp tube glow, still readable on light pages */
html body .identity-name.identity-effect-neon:not(#i) {
  --idn-fill: linear-gradient(color-mix(in srgb, var(--identity-solid) , var(--idn-mix-color) var(--idn-neon-mix)), color-mix(in srgb, var(--identity-solid) , var(--idn-mix-color) var(--idn-neon-mix)));
  --idn-halo: drop-shadow(0 0 1.5px color-mix(in srgb, var(--identity-glow, var(--identity-solid)) 85%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--identity-glow, var(--identity-solid)) var(--idn-halo-mix), transparent));
}

/* fixed premium palettes (ignore the user colors on purpose) */
html body .identity-name.identity-effect-gold:not(#i) {
  --identity-solid: #b7791f;
  --idn-fill: var(--idn-pal-gold);
  --idn-anim: idn-sheen 4.2s ease-in-out infinite;
}

html body .identity-name.identity-effect-chrome:not(#i) {
  --identity-solid: #6b7280;
  --idn-fill: var(--idn-pal-chrome);
  --idn-anim: idn-sheen 4.6s ease-in-out infinite;
}

html body .identity-name.identity-effect-fire:not(#i) {
  --identity-solid: #ea580c;
  --idn-fill: var(--idn-pal-fire);
  --idn-halo: drop-shadow(0 0 3px color-mix(in srgb, #f97316 var(--idn-halo-mix), transparent));
  --idn-anim: idn-flow 2.8s linear infinite;
}

html body .identity-name.identity-effect-ice:not(#i) {
  --identity-solid: #0284c7;
  --idn-fill: var(--idn-pal-ice);
  --idn-anim: idn-sheen 4.4s ease-in-out infinite;
}

html body .identity-name.identity-effect-rainbow:not(#i) {
  --identity-solid: #4f46e5;
  --idn-fill: var(--idn-pal-rainbow);
  --idn-anim: idn-flow 9s linear infinite;
}

html body .identity-name.identity-effect-royal:not(#i) {
  --identity-solid: #7c3aed;
  --idn-fill: var(--idn-pal-royal);
  --idn-halo: drop-shadow(0 0 4px color-mix(in srgb, #a855f7 var(--idn-halo-mix), transparent));
  --idn-anim: idn-sheen 4.4s ease-in-out infinite;
}

html body .identity-name.identity-effect-none:not(#i) {
  --idn-anim: none;
}

/* contexts */
html body .profile-name-wrapper .identity-name:not(#i) {
  --idn-weight: 800;
  --identity-plain: #fff;
  --idn-contour: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
}

html body .profile-name-wrapper .identity-name:not(.identity-name-custom):not(.identity-name-owner):not(.identity-name-featured):not(.identity-name-badged):not(#i) {
  filter: var(--idn-contour) !important;
}

html body .vr-sugo :is(.voice-room-message, .voice-seat) .identity-name:not(#i),
html body .lightbox[data-live-post-id] .live-audience-comments .identity-name:not(#i) {
  --idn-weight: 600;
}

@keyframes idn-flow {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

@keyframes idn-breathe {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes idn-sheen {
  0% { background-position: 100% 0, 0 50%; }
  45%, 100% { background-position: 0% 0, 0 50%; }
}

/* no background-clip:text support -> solid color */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  html body .identity-name.identity-name:not(#i) {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

/* ===================================================================
   3. Badges / tags (.user-badge-chip)
   =================================================================== */
html body .user-badge-chip:not(#i) {
  --ub-h: 20px;
  --ub-fs: 11px;
  --ub-ic: 10px;
  --ub-px: 8px;
  --ub-gap: 4px;
  --ub-c: var(--badge-color, #0ea5e9);
  --ub-g: var(--badge-glow, var(--ub-c));
  --ub-ring: rgba(255, 255, 255, .24);
  --ub-anim: none;
  --ub-shine: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, .55) 50%, transparent 85%);
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--ub-gap) !important;
  height: var(--ub-h);
  min-height: 0 !important;
  max-width: 16em;
  margin: 0 !important;
  margin-inline-start: 6px !important;
  padding: 0 var(--ub-px) !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--badge-text-color, #fff) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 58%),
    linear-gradient(135deg, var(--ub-c) 0%, color-mix(in srgb, var(--ub-c) 52%, var(--ub-g)) 100%) !important;
  box-shadow:
    inset 0 0 0 1px var(--ub-ring),
    inset 0 -1px 0 rgba(0, 0, 0, .14),
    0 1px 2px rgba(15, 23, 42, .2),
    0 2px 8px -3px color-mix(in srgb, var(--ub-g) 70%, transparent) !important;
  font-size: var(--ub-fs) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18) !important;
  white-space: nowrap;
  vertical-align: middle;
  transform: none !important;
  filter: none !important;
  zoom: 1;
  transition: box-shadow .18s ease !important;
}

html body .user-badge-chip:not(#i):hover {
  transform: none !important;
  filter: none !important;
  box-shadow:
    inset 0 0 0 1px var(--ub-ring),
    inset 0 -1px 0 rgba(0, 0, 0, .14),
    0 1px 2px rgba(15, 23, 42, .2),
    0 3px 12px -3px color-mix(in srgb, var(--ub-g) 85%, transparent) !important;
}

html body .user-badge-chip:not(#i) > i,
html body .user-badge-chip:not(#i) .js-user-badge-preview-icon {
  display: inline-block !important;
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--badge-icon-color, #fff) !important;
  font-size: var(--ub-ic) !important;
  line-height: 1 !important;
  text-shadow: none !important;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .22));
}

html body .user-badge-chip:not(#i) > span,
html body .user-badge-chip:not(#i) .js-user-badge-preview-label {
  display: block !important;
  min-width: 0;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--badge-text-color, #fff) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-shadow: inherit !important;
}

html body .user-badge-chip:not(#i)::before {
  display: none !important;
}

/* shine sweep, used by premium tiers (transform-only animation) */
html body .user-badge-chip:not(#i)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  z-index: 1;
  width: 45% !important;
  height: auto !important;
  border-radius: inherit;
  background: var(--ub-shine) !important;
  opacity: 0 !important;
  transform: translateX(-130%) !important;
  pointer-events: none;
  animation: var(--ub-anim) !important;
}

@keyframes ub-sheen {
  0% { opacity: 1; transform: translateX(-130%); }
  32% { opacity: 1; transform: translateX(260%); }
  33%, 100% { opacity: 0; transform: translateX(260%); }
}

/* tiers, detected from the badge icon (or explicit .user-badge-tier-* classes) */
html body .user-badge-chip:is(.user-badge-tier-royal, .user-badge-tier-gold, :has(> i:is(.fa-crown, .fa-chess-king, .fa-chess-queen))):not(#i) {
  --ub-ring: rgba(255, 228, 150, .7);
  --ub-anim: ub-sheen 4.8s ease-in-out infinite;
}

html body .user-badge-chip:is(.user-badge-tier-diamond, :has(> i:is(.fa-gem, .fa-diamond))):not(#i) {
  --ub-ring: rgba(207, 250, 254, .75);
  --ub-shine: linear-gradient(105deg, transparent 10%, rgba(165, 243, 252, .55) 38%, rgba(255, 255, 255, .8) 50%, rgba(240, 171, 252, .5) 62%, transparent 90%);
  --ub-anim: ub-sheen 4.2s ease-in-out infinite;
}

html body .user-badge-chip:is(.user-badge-tier-vip, :has(> i:is(.fa-star, .fa-award, .fa-medal, .fa-trophy, .fa-fire, .fa-bolt))):not(#i) {
  --ub-ring: rgba(255, 255, 255, .42);
  --ub-anim: ub-sheen 5.6s ease-in-out infinite;
}

html body .user-badge-chip:is(.user-badge-tier-verified, :has(> i:is(.fa-check, .fa-circle-check, .fa-check-circle, .fa-certificate, .fa-badge-check))):not(#i) {
  --ub-ring: rgba(255, 255, 255, .34);
}

html body .user-badge-chip:is(.user-badge-tier-mod, .user-badge-tier-admin, :has(> i:is(.fa-shield, .fa-shield-alt, .fa-shield-halved, .fa-user-shield, .fa-gavel, .fa-user-gear, .fa-user-cog))):not(#i) {
  --ub-ring: rgba(255, 255, 255, .3);
  box-shadow:
    inset 0 0 0 1px var(--ub-ring),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    0 1px 2px rgba(15, 23, 42, .25) !important;
}

html body .user-badge-chip:is(.user-badge-tier-creator, :has(> i:is(.fa-pen-nib, .fa-palette, .fa-video, .fa-camera, .fa-microphone, .fa-music, .fa-paintbrush, .fa-brush, .fa-wand-magic-sparkles))):not(#i) {
  --ub-ring: rgba(255, 255, 255, .38);
  --ub-anim: ub-sheen 6.4s ease-in-out infinite;
}

/* owner: black card with gold hairline */
html body .user-badge-chip.user-badge-owner:not(#i) {
  --ub-ring: rgba(246, 215, 122, .75);
  --ub-anim: ub-sheen 4.8s ease-in-out infinite;
  --ub-shine: linear-gradient(105deg, transparent 15%, rgba(255, 236, 170, .45) 50%, transparent 85%);
  color: #fde68a !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 55%),
    linear-gradient(120deg, #0b1220 0%, #1f2937 55%, #3b2a0a 100%) !important;
}

html body .user-badge-chip.user-badge-owner:not(#i) > i {
  color: #f6c945 !important;
}

html body .user-badge-chip.user-badge-owner:not(#i) > span {
  color: #fdf1c7 !important;
}

/* sizes per context */
html body :is(.comment, .comments, .voice-room-message, .live-audience-comments, .conversation, .chat-conversations, .chat-widget, .notification, .js_notifications, .dropdown-widget, .data-content .name):not(#i) .user-badge-chip,
html body .user-badge-chip.user-badge-xs:not(#i) {
  --ub-h: 16px;
  --ub-fs: 9.5px;
  --ub-ic: 8.5px;
  --ub-px: 6px;
  --ub-gap: 3px;
  margin-inline-start: 4px !important;
}

html body .profile-name-wrapper .user-badge-chip:not(#i),
html body .user-badge-preview-wrap .user-badge-chip:not(#i),
html body .user-badge-chip.user-badge-lg:not(#i) {
  --ub-h: 26px;
  --ub-fs: 12.5px;
  --ub-ic: 11.5px;
  --ub-px: 11px;
  --ub-gap: 6px;
  margin-inline-start: 8px !important;
}

/* undo old scale/zoom hacks in voice rooms (they made the chip blurry) */
html body .vr-sugo .voice-room-message .user-badge-chip:not(#i) {
  transform: none !important;
  zoom: 1 !important;
  margin: 0 !important;
  margin-inline: 4px 2px !important;
}

/* ===================================================================
   4. Avatar frames
   Ring is drawn inside the avatar footprint (no layout shift, no clipping):
   [conic ring --idf-w][gap --idf-gap / transparent][photo]
   =================================================================== */

/* neutralize legacy borders/outlines/filters (hue-rotate distorted the photo) */
html body :is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(.voice-seat-avatar):not(.voice-seat-video-placeholder > img):not(#i),
html body .profile-header[class*="avatar-frame-effect-"]:not(#i) {
  outline: 0 !important;
  outline-offset: 0 !important;
  filter: none !important;
  animation: none !important;
}

/* palettes */
html body :is(.owner-avatar-ring, .owner-luxury-profile):not(#i) {
  --idf-c1: #a8740d;
  --idf-c2: #f6d77a;
  --idf-c3: #fff4cf;
  --idf-c4: #d4a017;
  --idf-glow: #f5c542;
  --idf-anim: idf-spin 9s linear infinite;
}

html body :is(.featured-avatar-ring, .featured-identity-profile):not(#i) {
  --idf-c1: #7c3aed;
  --idf-c2: #22d3ee;
  --idf-c3: #a78bfa;
  --idf-c4: #6366f1;
  --idf-glow: #8b5cf6;
  --idf-anim: idf-spin 11s linear infinite;
}

html body :is(.avatar-frame-custom, .custom-avatar-profile):not(#i) {
  --idf-c1: var(--avatar-frame-start, #0ea5e9);
  --idf-c2: var(--avatar-frame-end, var(--avatar-frame-start, #8b5cf6));
  --idf-c3: var(--avatar-frame-glow, var(--avatar-frame-end, #22d3ee));
  --idf-c4: color-mix(in srgb, var(--avatar-frame-start, #0ea5e9) 50%, var(--avatar-frame-end, #8b5cf6));
  --idf-glow: var(--avatar-frame-glow, var(--avatar-frame-start, #22d3ee));
  --idf-anim: none;
}

/* frame effects (users.user_avatar_frame_effect) */
html body .avatar-frame-effect-none:not(#i) { --idf-anim: none; }
html body .avatar-frame-effect-pulse:not(#i) { --idf-anim: idf-sway 3.2s ease-in-out infinite alternate; }
html body .avatar-frame-effect-spin:not(#i) { --idf-anim: idf-spin 6s linear infinite; }
html body .avatar-frame-effect-halo:not(#i) { --idf-anim: none; --idf-glow-mix: 85%; --idf-blur-k: 1.6; }
html body .avatar-frame-effect-shine:not(#i) { --idf-hi: #ffffff; --idf-anim: idf-spin 3.6s linear infinite; }
html body .avatar-frame-effect-aurora:not(#i) { --idf-anim: idf-spin 14s linear infinite; --idf-glow-mix: 75%; --idf-blur-k: 1.4; }
html body .avatar-frame-effect-neon:not(#i) {
  --idf-c2: var(--idf-c1);
  --idf-c3: color-mix(in srgb, var(--idf-c1) 55%, #fff);
  --idf-c4: var(--idf-c1);
  --idf-glow: var(--idf-c1);
  --idf-glow-mix: 90%;
  --idf-anim: none;
}
html body .avatar-frame-effect-gold:not(#i) {
  --idf-c1: #a8740d; --idf-c2: #f6d77a; --idf-c3: #fff4cf; --idf-c4: #d4a017; --idf-glow: #f5c542;
  --idf-hi: #fffbe8;
  --idf-anim: idf-spin 7s linear infinite;
}
html body .avatar-frame-effect-royal:not(#i) {
  --idf-c1: #4c1d95; --idf-c2: #a855f7; --idf-c3: #fcd34d; --idf-c4: #7c3aed; --idf-glow: #a855f7;
  --idf-anim: idf-spin 9s linear infinite;
}
html body .avatar-frame-effect-diamond:not(#i) {
  --idf-c1: #67e8f9; --idf-c2: #e0f2fe; --idf-c3: #a5b4fc; --idf-c4: #f0abfc; --idf-glow: #67e8f9;
  --idf-hi: #ffffff;
  --idf-anim: idf-spin 5s linear infinite;
}
html body .avatar-frame-effect-fire:not(#i) {
  --idf-c1: #dc2626; --idf-c2: #f97316; --idf-c3: #fde047; --idf-c4: #ea580c; --idf-glow: #f97316;
  --idf-anim: idf-spin 2.8s linear infinite;
}

/* ring on <img> avatars (and the <img> inside framed wrappers) */
html body img:is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(.voice-seat-avatar):not(.voice-seat-video-placeholder > img):not(#i),
html body :is(.data-avatar, .chat-avatar):is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(#i) > img {
  box-sizing: border-box !important;
  padding: var(--idf-g, 1.5px) !important;
  border: var(--idf-w, 2px) solid transparent !important;
  outline: 0 !important;
  object-fit: cover;
  background:
    linear-gradient(var(--idf-gap), var(--idf-gap)) padding-box,
    conic-gradient(from var(--idf-angle), var(--idf-c1), var(--idf-c2) 25%, var(--idf-c3) 50%, var(--idf-hi, var(--idf-c4)) 72%, var(--idf-c1)) border-box !important;
  box-shadow:
    0 0 0 .5px rgba(0, 0, 0, .08),
    0 0 calc(var(--idf-blur, 7px) * var(--idf-blur-k, 1)) calc(var(--idf-blur, 7px) * -.2) color-mix(in srgb, var(--idf-glow) var(--idf-glow-mix, 55%), transparent) !important;
  filter: none !important;
  animation: var(--idf-anim, none) !important;
}

/* framed wrappers keep no frame of their own */
html body :is(.data-avatar, .chat-avatar):is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(#i) {
  border: 0 !important;
  box-shadow: none !important;
}

/* ring on background-image avatars (post/comment avatars, previews, story card) */
html body :is(.post-avatar-picture, .comment-avatar-picture, .user-identity-avatar-preview, .img):is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(#i) {
  position: relative !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow:
    0 0 calc(var(--idf-blur, 7px) * var(--idf-blur-k, 1)) calc(var(--idf-blur, 7px) * -.2) color-mix(in srgb, var(--idf-glow) var(--idf-glow-mix, 55%), transparent) !important;
  animation: none !important;
}

html body :is(.post-avatar-picture, .comment-avatar-picture, .user-identity-avatar-preview, .img):is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(#i)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  border: var(--idf-w, 2px) solid transparent;
  border-radius: inherit;
  padding: var(--idf-g, 1.5px);
  background:
    linear-gradient(var(--idf-gap), var(--idf-gap)) padding-box,
    conic-gradient(from var(--idf-angle), var(--idf-c1), var(--idf-c2) 25%, var(--idf-c3) 50%, var(--idf-hi, var(--idf-c4)) 72%, var(--idf-c1)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) border-box;
  pointer-events: none;
  animation: var(--idf-anim, none);
}

/* proportional ring sizes */
html body :is(.comment-avatar-picture, .user-menu img, img.avatar-xs, img.rounded-circle.mr10, .voice-room-message-avatar img, .live-audience-comment-avatar, .live-audience-comment-avatar *, .data-avatar img, .chat-avatar img, .conversation img):not(#i) {
  --idf-w: 1.5px;
  --idf-g: 1px;
  --idf-blur: 5px;
}

html body :is(.post-avatar-picture, img.publisher-avatar):not(#i) {
  --idf-w: 2px;
  --idf-g: 1.5px;
  --idf-blur: 7px;
}

html body :is(.user-box img, img.user-profile-picture, .user-identity-avatar-preview, .idt-avatar-lg):not(#i) {
  --idf-w: 3px;
  --idf-g: 2.5px;
  --idf-blur: 12px;
}

/* profile header avatar */
html body .profile-header:is(.owner-luxury-profile, .featured-identity-profile, .custom-avatar-profile) .profile-avatar-wrapper:not(#i) {
  padding: 4px !important;
  background: conic-gradient(from var(--idf-angle), var(--idf-c1), var(--idf-c2) 25%, var(--idf-c3) 50%, var(--idf-hi, var(--idf-c4)) 72%, var(--idf-c1)) !important;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .28),
    0 0 calc(22px * var(--idf-blur-k, 1)) -4px color-mix(in srgb, var(--idf-glow) var(--idf-glow-mix, 60%), transparent) !important;
  filter: none !important;
  animation: var(--idf-anim, none) !important;
}

html body .profile-header:is(.owner-luxury-profile, .featured-identity-profile, .custom-avatar-profile) .profile-avatar-wrapper:not(#i) > img {
  border: 4px solid var(--idf-gap) !important;
  background: var(--idf-gap) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html body .owner-avatar-crown:not(#i) {
  top: 2% !important;
  inset-inline-end: 2% !important;
  width: 30px !important;
  height: 30px !important;
  border: 1.5px solid #f6d77a !important;
  background: linear-gradient(145deg, #1f2937, #0b1220) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35), 0 0 10px -2px rgba(246, 201, 69, .7) !important;
  color: #f6c945 !important;
  font-size: 13px !important;
}

@keyframes idf-spin {
  to { --idf-angle: 360deg; }
}

@keyframes idf-sway {
  from { --idf-angle: 0deg; }
  to { --idf-angle: 120deg; }
}

/* ===================================================================
   5. Admin identity editor (live preview stage + preset grids)
   =================================================================== */
.idt-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
}

.idt-pane {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 16px;
}

.idt-pane.idt-light { background: #ffffff; }
.idt-pane.idt-dark { background: #0c1129; border-color: rgba(255, 255, 255, .08); }

.idt-pane-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #64748b;
}

.idt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.idt-row .idt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.idt-row .idt-meta .js-user-identity-name-preview { font-size: 15px; font-weight: 700; color: var(--identity-plain); }
.idt-row-lg .idt-meta .js-user-identity-name-preview { font-size: 20px; }
.idt-row-xs .idt-meta .js-user-identity-name-preview { font-size: 12.5px; }
.idt-row .idt-sub { display: block; width: 100%; font-size: 11px; color: #94a3b8; }

.idt-av { display: inline-flex; flex: 0 0 auto; }

html body .idt-av > .user-identity-avatar-preview:not(#i),
.user-identity-avatar-preview.idt-avatar {
  display: inline-block;
  width: var(--idt-size, 40px);
  height: var(--idt-size, 40px);
  min-width: var(--idt-size, 40px);
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.idt-av-lg { --idt-size: 64px; }
.idt-av-md { --idt-size: 40px; }
.idt-av-sm { --idt-size: 28px; }

html body .idt-av-md > .user-identity-avatar-preview:not(#i) { --idf-w: 2px; --idf-g: 1.5px; --idf-blur: 7px; }
html body .idt-av-sm > .user-identity-avatar-preview:not(#i) { --idf-w: 1.5px; --idf-g: 1px; --idf-blur: 5px; }

html body .idt-row-lg .user-badge-chip:not(#i) {
  --ub-h: 26px;
  --ub-fs: 12.5px;
  --ub-ic: 11.5px;
  --ub-px: 11px;
  --ub-gap: 6px;
}

html body .idt-row-xs .user-badge-chip:not(#i) {
  --ub-h: 16px;
  --ub-fs: 9.5px;
  --ub-ic: 8.5px;
  --ub-px: 6px;
  --ub-gap: 3px;
}

.idt-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  max-width: 720px;
  margin-top: 10px;
}

.idt-preset {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 74px;
  padding: 10px 6px 8px;
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 12px;
  background: #0c1129;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.idt-preset:hover { border-color: #60a5fa; }

.idt-preset.active {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .35);
}

.idt-preset .identity-name { font-size: 15px; }
.idt-preset .idt-avatar { width: 40px; height: 40px; }
.idt-preset small { font-size: 10.5px; opacity: .85; }

.idt-badge-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 720px;
  margin-top: 10px;
}

.idt-badge-presets button {
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.idt-badge-presets button:hover,
.idt-badge-presets button:focus-visible {
  border-color: rgba(56, 189, 248, .6);
}

.idt-badge-presets .user-badge-chip { pointer-events: none; }

@media (max-width: 575.98px) {
  .idt-stage { grid-template-columns: 1fr; }
}

/* ===================================================================
   6. Reduced motion: keep the look, drop the movement
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    --idn-anim: none !important;
    --idf-anim: none !important;
    --ub-anim: none !important;
  }
}

/* Ehna performance: an endless background-position animation re-styles the whole page every frame
   (measured: ~75% of the main thread on a phone). The sheen now plays twice, and again while hovered. */
html body .identity-name:is(.identity-name-custom, .identity-name-owner, .identity-name-featured, .identity-name-badged):not(#i) { animation-iteration-count: 2 !important; }
html body .identity-name:is(.identity-name-custom, .identity-name-owner, .identity-name-featured, .identity-name-badged):not(#i):hover { animation-iteration-count: infinite !important; }

/* /content/themes/default/css/gifts.css */
/* Ehna - live gifts catalog & full-screen gift effects */

/* ---------- shared coin ---------- */
.ehna-coin {
  display: inline-block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8d6 0 16%, #ffd84d 42%, #e69500 76%, #a85f00);
  box-shadow: inset 0 0 0 1px rgba(122, 74, 0, .55), 0 0 6px rgba(255, 200, 70, .35);
}

/* ---------- catalog dialog (bootbox) as a dark bottom sheet ---------- */
.ehna-gifts-sheet .modal-dialog {
  max-width: 640px;
}
.ehna-gifts-sheet .modal-content {
  background: linear-gradient(180deg, #1f1d2e 0%, #14131d 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.ehna-gifts-sheet .modal-header {
  border: 0;
  padding: 14px 16px 6px;
}
.ehna-gifts-sheet .modal-title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.ehna-gifts-sheet .bootbox-close-button,
.ehna-gifts-sheet .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .7;
}
.ehna-gifts-sheet .modal-body {
  padding: 0 12px 12px;
}
@media (max-width: 575.98px) {
  .ehna-gifts-sheet .modal-dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .ehna-gifts-sheet.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  }
  .ehna-gifts-sheet.show .modal-dialog {
    transform: none;
  }
  .ehna-gifts-sheet .modal-content {
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .ehna-gifts-sheet .modal-content::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .25);
  }
  .ehna-gifts-sheet .modal-header {
    padding-top: 6px;
  }
}

/* own sheet (used when bootbox is not available) */
.ehna-gifts-modal {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ehna-gifts-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity .3s;
}
.ehna-gifts-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  background: linear-gradient(180deg, #1f1d2e 0%, #14131d 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  color: #fff;
  opacity: 0;
  transform: translateY(24px) scale(.98);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .25s;
}
.ehna-gifts-modal.show .ehna-gifts-backdrop {
  opacity: 1;
}
.ehna-gifts-modal.show .ehna-gifts-panel {
  opacity: 1;
  transform: none;
}
.ehna-gifts-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px 16px;
}
.ehna-gifts-panel-head strong {
  font-size: 16px;
}
.ehna-gifts-x {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 22px;
  line-height: 1;
}
.ehna-gifts-panel-body {
  padding: 0 12px 12px;
}
@media (max-width: 575.98px) {
  .ehna-gifts-modal {
    align-items: flex-end;
    padding: 0;
  }
  .ehna-gifts-panel {
    max-height: 86vh;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(100%);
  }
  .ehna-gifts-panel::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .25);
  }
  .ehna-gifts-panel-head {
    padding-top: 6px;
  }
}

.ehna-gifts {
  color: #fff;
  font-size: 13px;
}
.ehna-gifts-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 10px;
}
.ehna-gifts-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  white-space: nowrap;
}
.ehna-gifts-balance strong {
  color: #ffcf4a;
  font-weight: 800;
}
.ehna-gifts-balance small {
  opacity: .65;
}
.ehna-gifts-balance.wallet {
  margin-inline-start: auto;
}
.ehna-gifts-balance.wallet i {
  color: #7fd0ff;
}
.ehna-gifts-balance.wallet strong {
  color: #fff;
}

.ehna-gifts-tabs {
  display: flex;
  gap: 6px;
  margin: 0 -2px 8px;
  padding: 0 2px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ehna-gifts-tabs::-webkit-scrollbar {
  display: none;
}
.ehna-gifts-tabs button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  font-weight: 600;
  transition: background .2s, color .2s;
}
.ehna-gifts-tabs button:hover {
  color: #fff;
}
.ehna-gifts-tabs button.active {
  background: #fff;
  color: #15141f;
}

.ehna-gifts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  max-height: min(48vh, 430px);
  padding: 2px 2px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
@media (min-width: 576px) {
  .ehna-gifts-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .ehna-gifts-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.ehna-gift {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 4px 6px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  color: #fff;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.ehna-gift:hover {
  background: rgba(255, 255, 255, .07);
}
.ehna-gift:active {
  transform: scale(.96);
}
.ehna-gift.is-hidden {
  display: none;
}
.ehna-gift.selected {
  border-color: #ff3d7f;
  background: linear-gradient(180deg, rgba(255, 61, 127, .2), rgba(255, 61, 127, .04));
  box-shadow: 0 0 0 3px rgba(255, 61, 127, .14), 0 8px 20px rgba(255, 61, 127, .22);
}
.ehna-gift-img {
  display: block;
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1 / 1;
}
.ehna-gift-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.ehna-gift.selected .ehna-gift-img img {
  transform: translateY(-2px) scale(1.14);
}
.ehna-gift-name {
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, .88);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ehna-gift-price {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #ffcf4a;
  font-size: 11px;
  font-weight: 700;
}
.ehna-gift-price .ehna-coin {
  width: 11px;
  height: 11px;
}
.ehna-gifts-empty {
  grid-column: 1 / -1;
  padding: 30px 10px;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

.ehna-gifts-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.ehna-gifts-selected {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ehna-gifts-selected img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.ehna-gifts-selected > span {
  min-width: 0;
}
.ehna-gifts-selected strong {
  display: block;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ehna-gifts-selected small {
  color: #ffcf4a;
  font-weight: 700;
}
.ehna-gifts-send {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 10px 28px;
  background: linear-gradient(90deg, #ff2d6f, #ff7a45);
  box-shadow: 0 6px 18px rgba(255, 45, 111, .4);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  transition: transform .15s, opacity .2s, box-shadow .2s;
}
.ehna-gifts-send:active {
  transform: scale(.95);
}
.ehna-gifts-send:disabled {
  opacity: .4;
  box-shadow: none;
}

/* ---------- banner pills (small gifts) ---------- */
.ehna-gift-lanes {
  position: fixed;
  z-index: 2147482000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}
.ehna-gift-lanes.is-rtl {
  align-items: flex-end;
}
.ehna-gift-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: 44px;
  padding: 3px 52px 3px 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 45, 111, .94), rgba(255, 122, 69, .78) 72%, rgba(255, 122, 69, .05));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  color: #fff;
  animation: ehna-pill-in .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
.ehna-gift-pill .av {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
}
.ehna-gift-pill .tx {
  min-width: 0;
  line-height: 1.2;
}
.ehna-gift-pill .tx b,
.ehna-gift-pill .tx small {
  display: block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ehna-gift-pill .tx b {
  font-size: 13px;
}
.ehna-gift-pill .tx small {
  font-size: 11px;
  opacity: .92;
}
.ehna-gift-pill .gf {
  position: absolute;
  top: 50%;
  right: -6px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  transform: translateY(-50%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
  animation: ehna-gift-in .55s cubic-bezier(.2, 1.5, .4, 1) .15s both;
}
.ehna-gift-pill .cb {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 10px;
  color: #ffe066;
  font-size: 15px;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 0 #c2410c, 0 0 12px rgba(255, 170, 0, .7);
  transform: translateY(-50%);
}
.ehna-gift-pill .cb em {
  font-size: 28px;
  font-style: italic;
}
.ehna-gift-pill.pop .cb {
  animation: ehna-combo .4s cubic-bezier(.2, 1.6, .4, 1);
}
.ehna-gift-pill.out {
  animation: ehna-pill-out .4s ease-in forwards;
}
.is-rtl .ehna-gift-pill {
  flex-direction: row-reverse;
  padding: 3px 3px 3px 52px;
  background: linear-gradient(270deg, rgba(255, 45, 111, .94), rgba(255, 122, 69, .78) 72%, rgba(255, 122, 69, .05));
  animation-name: ehna-pill-in-rtl;
}
.is-rtl .ehna-gift-pill .gf {
  right: auto;
  left: -6px;
}
.is-rtl .ehna-gift-pill .cb {
  left: auto;
  right: 100%;
  margin: 0 10px 0 0;
}
.is-rtl .ehna-gift-pill.out {
  animation-name: ehna-pill-out-rtl;
}
@keyframes ehna-pill-in {
  from { opacity: 0; transform: translateX(-110%); }
  to { opacity: 1; transform: none; }
}
@keyframes ehna-pill-in-rtl {
  from { opacity: 0; transform: translateX(110%); }
  to { opacity: 1; transform: none; }
}
@keyframes ehna-pill-out {
  to { opacity: 0; transform: translate(-40px, -14px); }
}
@keyframes ehna-pill-out-rtl {
  to { opacity: 0; transform: translate(40px, -14px); }
}
@keyframes ehna-gift-in {
  from { opacity: 0; transform: translateY(-50%) scale(.2) rotate(-25deg); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes ehna-combo {
  0% { transform: translateY(-50%) scale(1); }
  45% { transform: translateY(-50%) scale(1.6); }
  100% { transform: translateY(-50%) scale(1); }
}

/* ---------- full-screen effect ---------- */
.ehna-gfx {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.ehna-gfx .vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 44%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, .5) 72%, rgba(0, 0, 0, .78));
  opacity: 0;
  transition: opacity .45s;
}
.ehna-gfx .rays {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 180vmax;
  height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 222, 130, 0) 0deg 6deg, rgba(255, 222, 130, .3) 8deg 11deg, rgba(255, 222, 130, 0) 13deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .65) 14%, transparent 42%);
  mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .65) 14%, transparent 42%);
  opacity: 0;
  animation: ehna-spin 20s linear infinite;
  transition: opacity .6s;
}
.ehna-gfx .rays.r2 {
  background: repeating-conic-gradient(from 10deg, rgba(255, 120, 190, 0) 0deg 12deg, rgba(255, 120, 190, .22) 14deg 17deg, rgba(255, 120, 190, 0) 19deg 30deg);
  animation-direction: reverse;
  animation-duration: 28s;
}
.ehna-gfx .glow {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 84vmin;
  height: 84vmin;
  margin: -42vmin 0 0 -42vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 102, .55), rgba(255, 120, 180, .2) 45%, transparent 70%);
  opacity: 0;
  transform: scale(.3);
  transition: transform .9s cubic-bezier(.2, 1.2, .3, 1), opacity .5s;
}
.ehna-gfx .flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 44%, #fff, rgba(255, 240, 200, .6) 38%, transparent 75%);
  opacity: 0;
}
.ehna-gfx .stage {
  position: absolute;
  top: 44%;
  left: 50%;
  width: min(66vmin, 520px);
  height: min(66vmin, 520px);
  transform: translate(-50%, -50%);
}
.ehna-gfx .stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .45));
}
.ehna-gfx .parts {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 0;
  height: 0;
}
.ehna-gfx .p {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background: center / contain no-repeat;
  opacity: 0;
  animation: ehna-burst var(--t, 1.6s) cubic-bezier(.12, .75, .3, 1) var(--d, 0s) forwards;
}
.ehna-gfx .p.star {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-52 -52 104 104'%3E%3Cpath d='M0 -50L12 -16L48 -15L19 7L30 41L0 21L-30 41L-19 7L-48 -15L-12 -16Z' fill='%23ffd84d' stroke='%23fff3b0' stroke-width='5'/%3E%3C/svg%3E");
}
.ehna-gfx .p.spark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0 -10C1.2 -2.6 2.6 -1.2 10 0C2.6 1.2 1.2 2.6 0 10C-1.2 2.6 -2.6 1.2 -10 0C-2.6 -1.2 -1.2 -2.6 0 -10Z' fill='%23ffffff'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9));
}
.ehna-gfx .p.heart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-52 -48 104 84'%3E%3Cpath d='M0 34C-30 14 -50 -2 -50 -20C-50 -36 -38 -46 -25 -46C-13 -46 -4 -39 0 -30C4 -39 13 -46 25 -46C38 -46 50 -36 50 -20C50 -2 30 14 0 34Z' fill='%23ff4f8b'/%3E%3C/svg%3E");
}
.ehna-gfx .p.conf {
  height: calc(var(--s) * .45);
  border-radius: 2px;
  background: var(--c);
}
.ehna-gfx .rain {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  opacity: 0;
  animation: ehna-rain var(--t) linear var(--d) forwards;
}
.ehna-gfx .rain.coin {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8d6 0 15%, #ffd84d 42%, #e69500 76%, #a85f00);
  box-shadow: inset 0 0 0 2px rgba(122, 74, 0, .5), 0 0 10px rgba(255, 200, 70, .5);
}
.ehna-gfx .rain.conf {
  height: calc(var(--s) * .45);
  border-radius: 2px;
  background: var(--c);
}
.ehna-gfx .cap {
  position: absolute;
  bottom: max(12vh, 90px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 92vw;
  padding: 6px 18px 6px 6px;
  border: 1px solid rgba(255, 215, 120, .6);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(30, 20, 52, .9), rgba(70, 24, 78, .9));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 200, 90, .35);
  color: #fff;
  opacity: 0;
  transform: translate(-50%, 30px);
  transition: transform .5s cubic-bezier(.2, 1.3, .4, 1) .35s, opacity .4s .35s;
}
.ehna-gfx .cap .av {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 2px solid #ffd84d;
  border-radius: 50%;
  object-fit: cover;
}
.ehna-gfx .cap .tx {
  min-width: 0;
  line-height: 1.25;
}
.ehna-gfx .cap b,
.ehna-gfx .cap small {
  display: block;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ehna-gfx .cap b {
  font-size: 15px;
}
.ehna-gfx .cap small {
  font-size: 12px;
  opacity: .85;
}
.ehna-gfx .cap .pts {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffd84d;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}
.ehna-gfx .cap .pts em {
  font-style: normal;
}
.ehna-gfx .cap .ehna-coin {
  width: 16px;
  height: 16px;
}

/* timeline */
.ehna-gfx.in .vig,
.ehna-gfx.in .rays {
  opacity: 1;
}
.ehna-gfx.in .glow {
  opacity: 1;
  transform: scale(1);
}
.ehna-gfx.in .stage img {
  animation: ehna-pop .9s cubic-bezier(.2, 1.4, .4, 1) forwards, ehna-floaty 2.6s ease-in-out .9s infinite alternate;
}
.ehna-gfx.in .cap {
  opacity: 1;
  transform: translate(-50%, 0);
}
.ehna-gfx.out .vig,
.ehna-gfx.out .rays,
.ehna-gfx.out .glow {
  opacity: 0;
  transition-duration: .6s;
}
.ehna-gfx.out .stage {
  animation: ehna-leave .7s ease-in forwards;
}
.ehna-gfx.out .cap {
  opacity: 0;
  transform: translate(-50%, 20px);
  transition-delay: 0s;
}
.ehna-gfx.tier-1 .rays.r2 {
  display: none;
}
.ehna-gfx.tier-3 .glow {
  background: radial-gradient(circle, rgba(255, 236, 160, .7), rgba(255, 110, 200, .3) 45%, rgba(120, 80, 255, .12) 62%, transparent 72%);
}
.ehna-gfx.mega.in {
  animation: ehna-shake .8s cubic-bezier(.36, .07, .19, .97) .3s;
}
.ehna-gfx.mega.in .flash {
  animation: ehna-flash 1s ease-out .25s, ehna-flash 1s ease-out 1.7s;
}
.ehna-shake {
  animation: ehna-shake .8s cubic-bezier(.36, .07, .19, .97) .3s;
}

@keyframes ehna-spin {
  to { transform: rotate(360deg); }
}
@keyframes ehna-pop {
  0% { opacity: 0; transform: scale(.15) rotate(-10deg); }
  55% { opacity: 1; transform: scale(1.1) rotate(3deg); }
  75% { transform: scale(.95) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes ehna-floaty {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-14px) scale(1.03); }
}
@keyframes ehna-leave {
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}
@keyframes ehna-burst {
  0% { opacity: 1; transform: translate(0, 0) scale(.3) rotate(0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); }
}
@keyframes ehna-rain {
  0% { opacity: 0; transform: translateY(0) rotate(0) rotateY(0); }
  8% { opacity: 1; }
  100% { opacity: 1; transform: translateY(calc(100vh + 80px)) rotate(var(--r)) rotateY(720deg); }
}
@keyframes ehna-flash {
  0% { opacity: 0; }
  15% { opacity: .85; }
  100% { opacity: 0; }
}
@keyframes ehna-shake {
  10%, 90% { transform: translate3d(-2px, 1px, 0); }
  20%, 80% { transform: translate3d(4px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 3px, 0); }
  40%, 60% { transform: translate3d(6px, -3px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ehna-gift-pill,
  .ehna-gift-pill .gf,
  .ehna-gift-pill.pop .cb,
  .ehna-gift-pill.out {
    animation-duration: .01ms;
  }
  .ehna-shake {
    animation: none;
  }
}

.js_ehna-sel-img[src^="data:"] { visibility: hidden; }

/* ---------- voice rooms: recipients row, quantity, seat charm, room total ---------- */
.ehna-gifts-to {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  margin-bottom: 8px;
}
.ehna-gifts-to.is-shake { animation: ehnaToShake .5s; }
@keyframes ehnaToShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.ehna-gifts-to-label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
}
.ehna-gifts-to-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ehna-gifts-to-list::-webkit-scrollbar { display: none; }
.ehna-gifts-to-item {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  opacity: .6;
  transition: opacity .15s, border-color .15s, transform .15s;
}
.ehna-gifts-to-item img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ehna-gifts-to-item small {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 16px;
  color: #fff;
  background: #7c6cff;
}
.ehna-gifts-to-item.active { opacity: 1; border-color: #ffd84d; transform: scale(1.06); }
.ehna-gifts-to-empty { font-size: 12px; color: rgba(255, 255, 255, .5); }
.ehna-gifts-qty {
  display: flex;
  gap: 4px;
  margin-inline-end: auto;
}
.ehna-gifts-qty button {
  height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .06);
}
.ehna-gifts-qty button.active {
  color: #2b1a00;
  border-color: transparent;
  background: linear-gradient(135deg, #ffe58a, #f0a500);
}
.ehna-gifts.is-room .ehna-gifts-selected { display: none; }
.ehna-gifts.is-room .ehna-gifts-foot { gap: 8px; }

.voice-seat-charm {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 1px 7px 1px 4px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  color: #ffe58a;
  background: rgba(0, 0, 0, .32);
}
.voice-seat-charm .ehna-coin { width: 10px; height: 10px; }
.vr-room-gifts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  margin-inline-start: 6px;
  padding: 0 9px 0 6px;
  border-radius: 13px;
  font-size: 12px;
  color: #ffe58a;
  background: rgba(0, 0, 0, .3);
  white-space: nowrap;
}
.vr-room-gifts b { font-weight: 700; }
.voice-room-gift-line {
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice-room-gift-line img { width: 26px; height: 26px; object-fit: contain; }
.voice-room-gift-line b { color: #ffd84d; }

/* /content/themes/default/css/city.css */
/* Ehna city hubs */
.ehna-city-page { min-height: 65vh; padding-bottom: 48px; color: #202c33; }
.ehna-city-intro { padding: 48px 0 34px; color: #fff; background: linear-gradient(118deg, #073b4c, #087e8b 58%, #e76f51); }
.ehna-city-eyebrow { margin: 0 0 10px; color: #f7c873; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.ehna-city-intro h1, .ehna-city-hero h1 { margin: 0; font-size: 36px; line-height: 1.15; font-weight: 800; }
.ehna-city-lead { max-width: 720px; margin: 14px 0 0; font-size: 16px; line-height: 1.6; opacity: .9; }
.ehna-city-index { padding-top: 24px; }
.ehna-city-region { margin-bottom: 30px; }
.ehna-city-region-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; border-bottom: 1px solid #dfe7ea; }
.ehna-city-region-head h2 { margin: 0 0 10px; font-size: 21px; font-weight: 750; }
.ehna-city-region-head span { color: #718087; font-size: 12px; }
.ehna-city-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ehna-city-link { display: flex; align-items: center; gap: 11px; min-height: 68px; padding: 10px 12px; border: 1px solid #e0e8eb; border-radius: 10px; color: inherit; background: #fff; text-decoration: none; transition: border-color .16s, transform .16s, box-shadow .16s; }
.ehna-city-link:hover { border-color: #0c8b91; color: inherit; transform: translateY(-2px); box-shadow: 0 7px 22px rgba(7, 59, 76, .11); }
.ehna-city-mark { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #087e8b, #073b4c); font-size: 10px; font-weight: 800; }
.ehna-city-link strong, .ehna-city-link small { display: block; }
.ehna-city-link strong { font-size: 14px; }
.ehna-city-link small { margin-top: 3px; color: #718087; font-size: 11px; }
.ehna-city-link > i { margin-inline-start: auto; color: #819198; font-size: 12px; }
.ehna-city-hero { position: relative; overflow: hidden; padding: 34px 0 40px; color: #fff; background: linear-gradient(122deg, #073b4c, #087e8b 56%, #37a6a4); }
.ehna-city-hero::after { position: absolute; right: 7%; bottom: -96px; width: 310px; height: 230px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; content: ""; box-shadow: 0 0 0 26px rgba(255,255,255,.04), 0 0 0 56px rgba(255,255,255,.035); pointer-events: none; }
.ehna-city-hero.is-sinai { background: linear-gradient(122deg, #173b42, #16766f 56%, #c66d4e); }
.ehna-city-back { position: relative; z-index: 1; display: inline-flex; gap: 7px; align-items: center; margin-bottom: 22px; color: rgba(255,255,255,.8); font-size: 12px; text-decoration: none; }
.ehna-city-back:hover { color: #fff; }
.ehna-city-hero h1, .ehna-city-hero .ehna-city-lead, .ehna-city-hero .ehna-city-eyebrow { position: relative; z-index: 1; }
.ehna-city-quicklinks { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ehna-city-quicklinks a { padding: 8px 13px; border: 1px solid rgba(255,255,255,.33); border-radius: 18px; color: #fff; background: rgba(0,0,0,.12); font-size: 12px; font-weight: 650; text-decoration: none; backdrop-filter: blur(6px); }
.ehna-city-quicklinks a:hover { background: rgba(255,255,255,.17); }
.ehna-city-content { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; padding-top: 24px; }
.ehna-city-section { margin-bottom: 26px; }
.ehna-city-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid #dfe7ea; }
.ehna-city-section-head h2, .ehna-city-aside h2 { margin: 0; font-size: 18px; font-weight: 750; }
.ehna-city-section-head a { color: #087e8b; font-size: 12px; font-weight: 650; text-decoration: none; }
.ehna-city-posts { display: grid; gap: 12px; }
.ehna-city-post { padding: 15px; border: 1px solid #e3eaed; border-radius: 10px; background: #fff; }
.ehna-city-post-author { display: flex; align-items: center; gap: 9px; }
.ehna-city-post-author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ehna-city-post-author strong, .ehna-city-post-author small { display: block; }
.ehna-city-post-author strong { font-size: 13px; }
.ehna-city-post-author small { margin-top: 2px; color: #809097; font-size: 10px; }
.ehna-city-post > p { margin: 12px 0 0; white-space: pre-line; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.ehna-city-post-photo { display: block; width: auto; max-width: 100%; max-height: 360px; margin: 12px auto 0; border-radius: 8px; object-fit: contain; }
.ehna-city-empty { margin: 0; padding: 24px 14px; border: 1px dashed #cbd6da; border-radius: 8px; color: #6a7c83; font-size: 13px; text-align: center; }
.ehna-city-pages, .ehna-city-events { display: grid; gap: 8px; }
.ehna-city-page-link, .ehna-city-event { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e2e9ec; border-radius: 8px; color: inherit; background: #fff; text-decoration: none; }
.ehna-city-page-link:hover, .ehna-city-event:hover { border-color: #0c8b91; color: inherit; }
.ehna-city-page-link img { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ehna-city-event > i { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 9px; color: #087e8b; background: #e8f4f3; }
.ehna-city-page-link strong, .ehna-city-page-link small, .ehna-city-event strong, .ehna-city-event small { display: block; }
.ehna-city-page-link strong, .ehna-city-event strong { font-size: 13px; }
.ehna-city-page-link small, .ehna-city-event small { margin-top: 3px; color: #718087; font-size: 11px; }
.ehna-city-aside { align-self: start; padding: 15px; border: 1px solid #e1e8eb; border-radius: 10px; background: #f7fafb; }
.ehna-city-aside h2 { margin-bottom: 14px; }
.ehna-city-nearby-group { display: grid; gap: 7px; margin-bottom: 16px; }
.ehna-city-nearby-group > strong { color: #687a81; font-size: 11px; text-transform: uppercase; }
.ehna-city-nearby-group a { color: #26363c; font-size: 13px; text-decoration: none; }
.ehna-city-nearby-group a[aria-current="page"] { color: #087e8b; font-weight: 750; }
body.night-mode .ehna-city-page { color: #edf5f5; }
body.night-mode .ehna-city-region-head, body.night-mode .ehna-city-section-head { border-color: rgba(255,255,255,.13); }
body.night-mode .ehna-city-link, body.night-mode .ehna-city-post, body.night-mode .ehna-city-page-link, body.night-mode .ehna-city-event, body.night-mode .ehna-city-aside { border-color: rgba(255,255,255,.12); color: #edf5f5; background: #1c252a; }
body.night-mode .ehna-city-link small, body.night-mode .ehna-city-post-author small, body.night-mode .ehna-city-page-link small, body.night-mode .ehna-city-event small { color: #9eafb4; }
body.night-mode .ehna-city-nearby-group a { color: #edf5f5; }
@media (max-width: 767px) {
  .ehna-city-intro { padding: 32px 0 26px; }
  .ehna-city-intro h1, .ehna-city-hero h1 { font-size: 30px; }
  .ehna-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ehna-city-link { min-height: 62px; gap: 8px; padding: 8px; }
  .ehna-city-mark { flex-basis: 32px; width: 32px; height: 32px; font-size: 9px; }
  .ehna-city-link strong { font-size: 12px; }
  .ehna-city-link > i { display: none; }
  .ehna-city-content { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 18px; }
  .ehna-city-aside { order: -1; }
  .ehna-city-nearby-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
}
@media (max-width: 359px) { .ehna-city-grid { grid-template-columns: minmax(0, 1fr); } }

/* Match the site's existing page header, directory cards and card surfaces. */
.ehna-city-page { color: var(--body-color); font-family: var(--body-font-family); }
.ehna-city-index-header.page-header,
.ehna-city-hero.page-header {
  background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
  text-align: center;
}
.ehna-city-index-header.page-header { padding: 35px 15px; }
.ehna-city-index-header h1,
.ehna-city-hero h1 { margin: 0 0 8px; color: #fff; font-size: 26px; font-weight: 700; }
.ehna-city-index-header .text-xlg,
.ehna-city-hero .text-xlg { margin: 0; color: #fff; font-size: 15px; line-height: 1.55; }
.ehna-city-eyebrow { margin-bottom: 5px; color: rgba(255,255,255,.82); font-size: 11px; }
.ehna-city-region { overflow: hidden; border-radius: 16px; }
.ehna-city-region-head { justify-content: space-between; align-items: center; margin: 0; padding: 16px 20px; border-bottom: 1px solid #f0f2f5; }
.ehna-city-region-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.ehna-city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ehna-city-link.directory-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 108px;
  padding: 15px 10px;
  border-radius: 16px;
  text-align: center;
  color: var(--body-color);
  background: #f6f7f9;
}
.ehna-city-link.directory-card:hover { color: var(--link-color); background: #eee; transform: none; box-shadow: none; }
.ehna-city-mark { display: grid; width: 30px; height: 30px; flex-basis: 30px; place-items: center; border-radius: 50%; color: var(--link-color); background: transparent; font-size: 15px; }
.ehna-city-link strong { font-size: 14px; font-weight: 600; }
.ehna-city-link small { color: inherit; opacity: .7; font-size: 11px; }
.ehna-city-hero.page-header { padding: 35px 15px; }
.ehna-city-hero.page-header::after { display: none; }
.ehna-city-back { color: rgba(255,255,255,.86); font-size: 13px; }
.ehna-city-quicklinks { justify-content: center; margin-top: 16px; }
.ehna-city-quicklinks .btn { border-radius: 5px; color: var(--body-color); font-weight: 500; backdrop-filter: none; }
.ehna-city-content { gap: 20px; }
.ehna-city-section-head { border-color: #e5e7eb; }
.ehna-city-section-head h2, .ehna-city-aside h2 { font-size: 17px; font-weight: 600; }
.ehna-city-section-head a { color: var(--link-color); }
.ehna-city-post { overflow: hidden; border: 0; border-radius: 16px; background: #fff; }
.ehna-city-post-author small, .ehna-city-page-link small, .ehna-city-event small { color: #8a8d91; }
.ehna-city-empty { border-color: #d7dbe0; color: #777; }
.ehna-city-page-link, .ehna-city-event { border-color: #e5e7eb; border-radius: 10px; background: #fff; }
.ehna-city-page-link:hover, .ehna-city-event:hover { border-color: var(--link-color); }
.ehna-city-event > i { color: var(--link-color); background: rgba(94,114,228,.1); }
.ehna-city-aside { align-self: start; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #fff; }
.ehna-city-aside > .card-body { padding: 18px; }
.ehna-city-nearby-group > strong { color: #8a8d91; }
.ehna-city-nearby-group a { color: var(--body-color); }
.ehna-city-nearby-group a[aria-current="page"] { color: var(--link-color); }
body.night-mode .ehna-city-page { color: var(--body-color-dark); }
body.night-mode .ehna-city-region-head { border-color: var(--card-dark-divider); }
body.night-mode .ehna-city-link.directory-card { color: var(--body-color-dark); background: var(--card-dark-input); }
body.night-mode .ehna-city-link.directory-card:hover { background: var(--card-dark-hover); }
body.night-mode .ehna-city-post,
body.night-mode .ehna-city-page-link,
body.night-mode .ehna-city-event,
body.night-mode .ehna-city-aside { border-color: var(--card-dark-divider); color: var(--body-color-dark); background: var(--card-dark-color); }
body.night-mode .ehna-city-section-head { border-color: var(--card-dark-divider); }
body.night-mode .ehna-city-post-author small,
body.night-mode .ehna-city-page-link small,
body.night-mode .ehna-city-event small { color: #9aa8b2; }
body.night-mode .ehna-city-nearby-group a { color: var(--body-color-dark); }
@media (min-width: 768px) {
  .ehna-city-index-header.page-header { padding: 45px 15px; }
  .ehna-city-hero.page-header { padding: 45px 15px; }
}
@media (max-width: 767px) {
  .ehna-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ehna-city-link.directory-card { min-height: 88px; padding: 12px 8px; }
  .ehna-city-link strong { font-size: 12px; }
  .ehna-city-content { grid-template-columns: minmax(0, 1fr); }
  .ehna-city-aside { order: -1; }
}

.ehna-admin-city-list { display: grid; gap: 10px; }
.ehna-admin-city {
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}
.ehna-admin-city > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.ehna-admin-city > summary::-webkit-details-marker { display: none; }
.ehna-admin-city > summary::after { content: "\f078"; font: 900 12px "Font Awesome 6 Free"; color: var(--link-color); }
.ehna-admin-city[open] > summary { border-bottom: 1px solid #e5e7eb; }
.ehna-admin-city-name strong, .ehna-admin-city-name small { display: block; }
.ehna-admin-city-name strong { font-size: 14px; }
.ehna-admin-city-name small { margin-top: 3px; color: #777; font-size: 11px; }
.ehna-admin-city-body { padding: 16px; }
body.night-mode .ehna-admin-city { border-color: var(--card-dark-divider); background: var(--card-dark-color); }
body.night-mode .ehna-admin-city[open] > summary { border-color: var(--card-dark-divider); }
body.night-mode .ehna-admin-city-name small { color: #b0b3b8; }
@media (max-width: 767px) { .ehna-admin-city-body { padding: 12px; } }
.ehna-city-region-head h2 a { color: inherit; text-decoration: none; }
.ehna-city-region-head h2 a:hover { color: var(--link-color); }
.post-city-tag { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; color: var(--link-color); font-size: 12px; text-decoration: none; }
.post-city-tag:hover { color: var(--link-color); text-decoration: underline; }
body.night-mode .post-city-tag { color: var(--link-color); }

/* Ehna: City Hub admin (shared template) */
body.night-mode { --ehna-fg: #e4e6eb; --ehna-bg: #242526; }

.ehna-city-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .25rem; }
.ehna-city-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.3rem; margin-inline-start: .35rem; padding: 0 .4rem; border-radius: 999px; font-size: .72rem; background: color-mix(in oklab, var(--ehna-fg, #1c1e21) 8%, transparent); }
.ehna-city-search { display: inline-flex; align-items: center; gap: .45rem; min-width: 14rem; padding: .45rem .75rem; border-radius: .8rem; border: 1px solid color-mix(in oklab, var(--ehna-fg, #1c1e21) 12%, transparent); background: var(--ehna-bg, #fff); color: color-mix(in oklab, var(--ehna-fg, #1c1e21) 55%, transparent); }
.ehna-city-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ehna-fg, #1c1e21); font-size: .875rem; }
.ehna-city { border-radius: 1rem; border: 1px solid color-mix(in oklab, var(--ehna-fg, #1c1e21) 9%, transparent); background: color-mix(in oklab, var(--ehna-fg, #1c1e21) 3%, var(--ehna-bg, #fff)); transition: border-color .15s ease; }
.ehna-city[open] { border-color: color-mix(in oklab, var(--ehna-primary, #f97316) 35%, transparent); background: var(--ehna-bg, #fff); }
.ehna-city-summary { display: flex; align-items: center; gap: .85rem; padding: .75rem .9rem; cursor: pointer; list-style: none; }
.ehna-city-summary::-webkit-details-marker { display: none; }
.ehna-city-summary::marker { content: ""; }
.ehna-city-icon { flex-shrink: 0; }
.ehna-city-name { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .1rem; }
.ehna-city-name strong { font-size: .925rem; font-weight: 600; }
.ehna-city-ar { margin-inline-start: .35rem; font-weight: 500; color: color-mix(in oklab, var(--ehna-fg, #1c1e21) 55%, transparent); }
.ehna-city-name small { font-size: .78rem; color: color-mix(in oklab, var(--ehna-fg, #1c1e21) 55%, transparent); }
.ehna-city-status { flex-shrink: 0; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: color-mix(in oklab, var(--ehna-fg, #1c1e21) 8%, transparent); color: color-mix(in oklab, var(--ehna-fg, #1c1e21) 60%, transparent); }
.ehna-city-status.is-on { background: color-mix(in oklab, #16a34a 14%, transparent); color: #16a34a; }
.ehna-city-chevron { flex-shrink: 0; color: color-mix(in oklab, var(--ehna-fg, #1c1e21) 45%, transparent); transition: transform .2s ease; }
.ehna-city[open] .ehna-city-chevron { transform: rotate(180deg); }
.ehna-city-body { display: flex; flex-direction: column; gap: 1rem; padding: .25rem .9rem 1rem; border-top: 1px solid color-mix(in oklab, var(--ehna-fg, #1c1e21) 7%, transparent); padding-top: 1rem; }
.ehna-city-grid { display: grid; grid-template-columns: 1fr; gap: .9rem 1rem; }
@media (min-width: 768px) { .ehna-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ehna-city-open { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; font-size: .82rem; font-weight: 600; color: var(--ehna-primary, #f97316) !important; }
@media (max-width: 639.98px) { .ehna-city-search { min-width: 0; width: 100%; } .ehna-city-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.ehna-city-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .85rem; background: color-mix(in oklab, var(--ehna-primary, #f97316) 12%, transparent); color: var(--ehna-primary, #f97316); font-size: 1rem; }
.ehna-city-icon-sm { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .85rem; background: color-mix(in oklab, var(--ehna-fg, #1c1e21) 7%, transparent); color: color-mix(in oklab, var(--ehna-fg, #1c1e21) 70%, transparent); }
.ehna-city-chevron { display: inline-flex; font-size: .85rem; }
.ehna-city-list { display: grid; gap: .6rem; }
.ehna-city-field { display: flex; min-width: 0; flex-direction: column; gap: .35rem; }
.ehna-city-field .form-label { margin: 0; font-size: .8rem; font-weight: 600; }
.ehna-city-toolbar { margin-bottom: .9rem; }

/* /content/themes/giftun/css/ehna-giftun.css */
/* Ehna features inside the Giftun theme */

/* header balances (wallet & points) use Giftun's tertiary buttons */
.ehna-balance { white-space: nowrap; }

/* identity badge & package emblem next to names */
.ehna-identity-badge { margin-inline-start: .35rem; vertical-align: middle; }
.ehna-identity-package {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-inline-start: .3rem;
  vertical-align: middle;
  color: #d4af37;
}
.ehna-identity-package img { width: 100%; height: 100%; object-fit: contain; }

/* avatar frames sit on Giftun's rounded avatars */
a.avatar-frame-custom,
a.owner-avatar-ring,
a.featured-avatar-ring,
.profile-avatar-wrapper.avatar-frame-custom {
  position: relative;
  isolation: isolate;
}

/* /content/themes/giftun/css/ehna-design.css */
/* =====================================================================
   Ehna design layer for Giftun
   - brand palette: orange + Red Sea (turquoise) + sky
   - Merits-style menus (gradient card, glow blobs, icon tiles)
   - Facebook-like proportions & mobile tab bar
   ===================================================================== */
:root {
  --ehna-orange: #f97316;
  --ehna-orange-600: color-mix(in oklab, var(--ehna-orange) 84%, black);
  --ehna-on-accent: #ffffff;
  --ehna-sand: #f59e0b;
  --ehna-sea: #0891b2;
  --ehna-sea-deep: #0e7490;
  --ehna-sky: #38bdf8;
}
html[data-theme^="giftun"],
html[data-theme^="admin"] {
  --color-primary: var(--ehna-orange);
  --color-primary-content: var(--ehna-on-accent);
  --color-secondary: #0891b2;
  --color-secondary-content: #ffffff;
  --color-accent: #38bdf8;
  --color-accent-content: #062a3c;
  --color-info: #38bdf8;
  --accent: var(--ehna-orange);
  --accent-hover: var(--ehna-orange-600);
  --accent-foreground: var(--ehna-on-accent);
  --focus: var(--ehna-orange);
}

/* ---------- Merits-style menus ---------- */
.ehna-menu-item { --ehna-tone: var(--ehna-orange); }
.ehna-menu-item:nth-child(4n+2) { --ehna-tone: var(--ehna-sea); }
.ehna-menu-item:nth-child(4n+3) { --ehna-tone: var(--ehna-sky); }
.ehna-menu-item:nth-child(4n+4) { --ehna-tone: var(--ehna-sand); }
.ehna-tile {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .85rem;
  background: color-mix(in oklab, var(--ehna-tone, var(--ehna-orange)) 11%, transparent);
  color: var(--ehna-tone, var(--ehna-orange));
  transition: transform .15s ease, background .15s ease;
}
.ehna-tile > span { width: 1.25rem; height: 1.25rem; }
.ehna-tile-sm { width: 2rem; height: 2rem; border-radius: .75rem; }
.ehna-tile-sm > span { width: 1.1rem; height: 1.1rem; }
.ehna-menu-item > a:hover .ehna-tile { transform: scale(1.06); }
.ehna-menu-item > a[aria-current="page"] .ehna-tile,
.ehna-menu-item > a.menu-active .ehna-tile {
  background: linear-gradient(135deg, var(--ehna-orange), var(--ehna-orange-600));
  color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--ehna-orange) 70%, transparent);
}
.ehna-menu-item > a { border-radius: 1rem; }
.ehna-menu-item > a:hover { background: color-mix(in oklab, var(--color-base-100) 55%, transparent) !important; }
.ehna-menu-item > a[aria-current="page"],
.ehna-menu-item > a.menu-active {
  background: color-mix(in oklab, var(--ehna-orange) 8%, var(--color-base-100)) !important;
  color: var(--color-base-content) !important;
}

/* menu panels get the Merits card look */
#site-sidebar > nav,
#settings-drawer .drawer-body > ul,
#settings-drawer .drawer-body > nav {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent);
  border-radius: 1.75rem;
  padding: .75rem .5rem;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--ehna-orange) 7%, var(--color-base-100)) 0%,
    var(--color-base-100) 48%,
    color-mix(in oklab, var(--ehna-sky) 6%, var(--color-base-100)) 100%);
}
#site-sidebar > nav::before,
#site-sidebar > nav::after,
#settings-drawer .drawer-body > ul::before,
#settings-drawer .drawer-body > ul::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 11rem;
  height: 11rem;
  border-radius: 999px;
  filter: blur(48px);
  pointer-events: none;
}
#site-sidebar > nav::before,
#settings-drawer .drawer-body > ul::before { inset-inline-end: -3.5rem; top: -3.5rem; background: color-mix(in oklab, var(--ehna-orange) 14%, transparent); }
#site-sidebar > nav::after,
#settings-drawer .drawer-body > ul::after { inset-inline-start: -3rem; bottom: -4rem; background: color-mix(in oklab, var(--ehna-sea) 12%, transparent); }
.dropdown-menu {
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--ehna-orange) 7%, var(--color-base-100)) 0%,
    var(--color-base-100) 55%,
    color-mix(in oklab, var(--ehna-sky) 7%, var(--color-base-100)) 100%);
}

/* ---------- Facebook-like mobile tab bar ---------- */
.ehna-tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 35;
  height: calc(3.5rem + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-base-100);
  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  box-shadow: 0 -6px 18px -12px rgba(0, 0, 0, .35);
  transition: transform .3s ease;
}
.ehna-tabbar[data-hidden="true"] { transform: translateY(110%); }
.ehna-tabbar-row { display: flex; height: 3.5rem; align-items: stretch; }
.ehna-tab { position: relative; display: flex; flex: 1 1 0; min-width: 0; }
.ehna-tab-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: color-mix(in oklab, var(--color-base-content) 62%, transparent) !important;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.ehna-tab-icon { position: relative; display: inline-flex; }
.ehna-tab-icon > span:first-child { width: 1.65rem; height: 1.65rem; }
.ehna-tab-label { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ehna-tab.is-active .ehna-tab-link { color: var(--ehna-orange) !important; }
.ehna-tab.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 22%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--ehna-orange), var(--ehna-sky));
}
.ehna-tab-badge {
  position: absolute;
  top: -5px;
  inset-inline-end: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--color-base-100);
  border-radius: 999px;
  background: #e41e3f;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.ehna-tab-badge.hidden { display: none; }
.ehna-tab-menu { flex-direction: column; }
.ehna-tab-menu > .dropdown { height: 100%; }
.ehna-tab-menu .dropdown-toggle { padding-bottom: 14px; }
.ehna-tab-menu .dropdown-toggle img { width: 1.65rem !important; height: 1.65rem !important; }
.ehna-tab-menu .ehna-tab-label {
  position: absolute;
  inset-inline: 0;
  bottom: 9px;
  color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .ehna-desktop-only { display: none !important; }
  main.site-content { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)) !important; }
}
@media (min-width: 768px) {
  .ehna-desktop-only { display: contents; }
}

/* ---------- Facebook proportions ---------- */
.site-topbar > div { height: 56px; }
@media (min-width: 1024px) {
  main.site-content:has(#site-sidebar) { max-width: none !important; padding-inline: 1rem !important; }
  main.site-content:has(#site-sidebar) #site-sidebar { top: 72px; height: calc(100dvh - 88px); }
  main.site-content:has(#site-sidebar) #site-sidebar:not(.minified) { width: 280px; }
  main.site-content:has(#site-sidebar) #site-sidebar ~ div { width: 100%; max-width: 680px; margin-inline: auto; }
  main.site-content:has(#site-sidebar) #site-sidebar ~ aside { width: 280px; }
}
@media (min-width: 1260px) {
  main.site-content:has(#site-sidebar) #site-sidebar:not(.minified) { width: 360px; }
  main.site-content:has(#site-sidebar) #site-sidebar ~ aside { width: 360px; }
}
article.post { border-radius: 8px; }
@media (max-width: 767.98px) {
  /* edge-to-edge feed like the Facebook app */
  main.site-content:has(#site-sidebar) { padding-inline: 0 !important; }
  main.site-content:has(#site-sidebar) article.post { border-radius: 0; border-inline: 0; }
}

/* centre "+" create button (bigger, raised, brand gradient) */
.ehna-tab-add { justify-content: center; overflow: visible; }
.ehna-tab-add > .dropdown { justify-content: center; }
.ehna-add-button { display: flex; align-items: flex-start; justify-content: center; width: 100%; height: 100%; -webkit-tap-highlight-color: transparent; }
.ehna-add-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-top: -1.35rem;
  border: 4px solid var(--color-base-100);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ehna-orange) 0%, var(--ehna-sand) 45%, var(--ehna-sea) 100%);
  color: #fff;
  box-shadow: 0 10px 22px -8px color-mix(in oklab, var(--ehna-orange) 75%, transparent);
  transition: transform .15s ease;
}
.ehna-add-circle > span { width: 1.9rem; height: 1.9rem; }
.ehna-add-button:active .ehna-add-circle,
.ehna-add-button[aria-expanded="true"] .ehna-add-circle { transform: scale(.94) rotate(45deg); }
.ehna-tab-add .dropdown-menu { position: fixed !important; inset-inline: .75rem !important; bottom: calc(4.25rem + env(safe-area-inset-bottom)) !important; top: auto !important; max-height: 70vh; }
.ehna-tab-add .dropdown-menu { overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; max-height: calc(100dvh - 6.5rem - env(safe-area-inset-bottom)) !important; }

/* ---------- Profile About: grouped blocks ---------- */
.ehna-about { display: grid; gap: .75rem; }
.ehna-about-group {
  border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
  border-radius: 1rem;
  padding: .75rem .85rem;
  background: color-mix(in oklab, var(--ehna-orange) 3%, var(--color-base-100));
}
.ehna-about-group:not(:has(li)) { display: none; }
.ehna-about-title { margin-bottom: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-about-list { display: grid; gap: .55rem; font-size: .875rem; }
.ehna-about-row { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.ehna-about-row a { color: var(--ehna-sea); }
.ehna-about-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .5rem; }
.ehna-about-stat {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  border-radius: .9rem; padding: .6rem .25rem;
  background: color-mix(in oklab, var(--ehna-sea) 6%, var(--color-base-100));
  border: 1px solid color-mix(in oklab, var(--ehna-sea) 12%, transparent);
}
.ehna-about-stat strong { font-size: 1.05rem; color: var(--color-base-content); }
.ehna-about-stat span { font-size: .72rem; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); }
/* create menu: pinned above the tab bar, never off-screen, scrolls inside, compact 3-column grid */
.ehna-tab-add .dropdown-menu.dropdown-open,
.ehna-tab-add .dropdown-menu:not(.hidden) {
  position: fixed !important;
  transform: none !important;
  inset: auto .75rem calc(4.5rem + env(safe-area-inset-bottom)) .75rem !important;
  width: auto !important;
  max-height: calc(100dvh - 8.5rem - env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  z-index: 1000;
}
.ehna-tab-add .dropdown-menu > div { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem !important; padding: .75rem !important; }
.ehna-tab-add .dropdown-menu > div > * { min-width: 0 !important; padding: .6rem .25rem !important; }
.ehna-tab-add .dropdown-menu > div > .basis-full { grid-column: 1 / -1; }

/* ---------- flat, professional tab bar ---------- */
.ehna-tabbar:has(.dropdown-menu:not(.hidden)) { z-index: 60; }
.ehna-tabbar { box-shadow: none; border-top-color: color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.ehna-tab-icon > span:first-child { width: 1.5rem; height: 1.5rem; }
.ehna-tab-link { color: color-mix(in oklab, var(--color-base-content) 55%, transparent) !important; font-weight: 500; }
.ehna-tab.is-active .ehna-tab-link { font-weight: 700; }
.ehna-tab.is-active::before { inset-inline: 30%; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--ehna-orange); }
.ehna-add-circle {
  width: 3.25rem; height: 3.25rem; margin-top: -1.1rem;
  border-width: 3px;
  background: var(--ehna-orange);
  box-shadow: 0 4px 10px -4px color-mix(in oklab, var(--ehna-orange) 60%, transparent);
}
.ehna-add-circle > span { width: 1.65rem; height: 1.65rem; }
.ehna-add-button[aria-expanded="true"] .ehna-add-circle { background: var(--ehna-sea); }
/* create menu tiles: neutral cards, tinted icon squares in brand tones */
.ehna-tab-add .dropdown-menu > div > * {
  background: color-mix(in oklab, var(--color-base-content) 4%, var(--color-base-100)) !important;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 7%, transparent);
  border-radius: 1rem !important;
  font-weight: 600;
  --ehna-tone: var(--ehna-orange);
}
.ehna-tab-add .dropdown-menu > div > *:nth-child(3n+2) { --ehna-tone: var(--ehna-sea); }
.ehna-tab-add .dropdown-menu > div > *:nth-child(3n+3) { --ehna-tone: var(--ehna-sky); }
.ehna-tab-add .dropdown-menu > div > * > span[class*="icon-"] { color: var(--ehna-tone) !important; width: 1.6rem; height: 1.6rem; }

/* HeroUI buttons follow the brand (HeroUI sets its own violet accent on .heroui) */
html[data-theme] .heroui { --accent: var(--ehna-orange); --accent-hover: var(--ehna-orange-600); --accent-foreground: var(--ehna-on-accent); --focus: var(--ehna-orange); }
/* Follow: calm sea tone instead of bright cyan */
html[data-theme] .heroui.js_follow { --button-bg: color-mix(in oklab, var(--ehna-sea) 16%, transparent) !important; --button-bg-hover: color-mix(in oklab, var(--ehna-sea) 24%, transparent) !important; --button-bg-pressed: color-mix(in oklab, var(--ehna-sea) 24%, transparent) !important; --button-fg: color-mix(in oklab, var(--ehna-sea) 70%, var(--color-base-content)) !important; }
/* soft tip / gift buttons */
.ehna-soft-btn { --tone: var(--ehna-orange); --button-bg: color-mix(in oklab, var(--tone) 13%, transparent) !important; --button-bg-hover: color-mix(in oklab, var(--tone) 20%, transparent) !important; --button-fg: color-mix(in oklab, var(--tone) 75%, var(--color-base-content)) !important; border: 1px solid color-mix(in oklab, var(--tone) 28%, transparent) !important; font-weight: 600; }
.ehna-soft-sea { --tone: var(--ehna-sea); }

/* ---------- left sidebar: collapsed = narrow icon rail (the card shrinks with it) ---------- */
@media (min-width: 1024px) {
  main.site-content:has(#site-sidebar) #site-sidebar.minified { width: 76px !important; }
}
#site-sidebar.minified > nav { padding: .5rem .3rem; border-radius: 1.25rem; }
#site-sidebar.minified > nav::before, #site-sidebar.minified > nav::after { display: none; }
#site-sidebar.minified .ehna-menu-item > a { justify-content: center; padding-inline: 0; }
#site-sidebar.minified .ehna-menu-item > a > :not(.ehna-tile):not(img):not(svg) { display: none; }
#site-sidebar.minified { scrollbar-gutter: auto !important; }

/* ---------- mobile: icon rail sliding in from the left (toggle next to the news ticker) ---------- */
.ehna-rail-toggle { display: none; }
.ehna-rail-backdrop { display: none; }
@media (max-width: 1023.98px) {
  .ehna-rail-toggle {
    display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 1rem;
    background: color-mix(in oklab, var(--ehna-orange) 12%, var(--color-base-100));
    color: var(--ehna-orange);
    border: 1px solid color-mix(in oklab, var(--ehna-orange) 22%, transparent);
  }
  .ehna-rail-toggle > span { width: 1.4rem; height: 1.4rem; }
  .ehna-ticker-row { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
  .ehna-ticker-row > .ehna-ticker { margin-bottom: 0 !important; flex: 1 1 auto; min-width: 0; }
  #site-sidebar.ehna-rail {
    display: block !important;
    position: fixed !important;
    top: 56px; bottom: calc(3.5rem + env(safe-area-inset-bottom));
    left: 0; right: auto;
    width: 76px !important;
    z-index: 45;
    overflow-y: auto;
    padding: .5rem .35rem;
    background: var(--color-base-100);
    border-inline-end: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent);
    border-radius: 0 1.25rem 1.25rem 0;
    box-shadow: 8px 0 24px -16px rgba(0,0,0,.45);
    transform: translateX(-105%);
    transition: transform .25s ease;
    visibility: hidden;
  }
  #site-sidebar.ehna-rail.is-open { transform: none; visibility: visible; }
  #site-sidebar.ehna-rail > nav { border: 0; padding: 0; background: none; }
  #site-sidebar.ehna-rail [data-overlay-minifier] { display: none; }
  .ehna-rail-backdrop.is-open { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.35); }

  /* full menu with names next to the icons; .minified shrinks it back to the icon rail */
  #site-sidebar.ehna-rail:not(.minified) { width: min(16rem, 82vw) !important; padding: .6rem .5rem; transition: transform .25s ease, width .2s ease; }
  #site-sidebar.ehna-rail:not(.minified) .ehna-menu-item > a { justify-content: flex-start; padding-inline: .75rem; }
  html[dir="rtl"] #site-sidebar.ehna-rail { left: auto; right: 0; border-radius: 1.25rem 0 0 1.25rem; transform: translateX(105%); box-shadow: -8px 0 24px -16px rgba(0,0,0,.45); }
  html[dir="rtl"] #site-sidebar.ehna-rail.is-open { transform: none; }

  /* button: a real "menu" control with its label, not a lone icon */
  .ehna-rail-toggle { width: auto; padding-inline: .8rem 1rem; gap: .4rem; font-weight: 700; font-size: .875rem; }
  .ehna-rail-toggle-label { white-space: nowrap; }

  /* header inside the menu: invite friends + shrink */
  .ehna-rail-head { display: flex; align-items: center; gap: .4rem; padding: 0 .1rem .6rem; margin-bottom: .4rem; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); }
  .ehna-rail-invite { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .45rem; height: 2.6rem; padding-inline: .75rem; border-radius: .9rem; font-size: .85rem; font-weight: 700; color: #fff !important; background: linear-gradient(135deg, var(--ehna-orange), color-mix(in oklab, var(--ehna-orange) 55%, #e11d48)); box-shadow: 0 6px 16px -8px var(--ehna-orange); }
  .ehna-rail-invite > .icon-\[tabler--user-plus\] { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
  .ehna-rail-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ehna-rail-mini { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }
  .ehna-rail-mini > span { width: 1.25rem; height: 1.25rem; }
  html[dir="rtl"] .ehna-rail-mini > span { transform: scaleX(-1); }
  .ehna-rail-mini-open, #site-sidebar.minified .ehna-rail-mini-close { display: none; }
  #site-sidebar.minified .ehna-rail-mini-open { display: inline-block; }
  #site-sidebar.minified .ehna-rail-head { flex-direction: column; padding-inline: 0; }
  #site-sidebar.minified .ehna-rail-invite { width: 2.6rem; flex: 0 0 auto; padding: 0; }
  #site-sidebar.minified .ehna-rail-text { display: none; }
}
@media (min-width: 1024px) { .ehna-rail-head { display: none; } }

/* ---------- live viewer: gift button ---------- */
.ehna-live-gift-btn {
  position: absolute; z-index: 12; inset-inline-start: .85rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .95rem; border-radius: 999px;
  background: var(--ehna-orange); color: #fff; font-size: .85rem; font-weight: 700;
  box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--ehna-orange) 70%, transparent);
  transition: transform .15s ease;
}
.ehna-live-gift-btn > span:first-child { width: 1.2rem; height: 1.2rem; }
.ehna-live-gift-btn:active { transform: scale(.95); }
.ehna-live-gift-btn:disabled { opacity: .6; }

/* ---------- theme colour picker ---------- */
.ehna-accent-dot { display: inline-block; flex-shrink: 0; width: 1rem; height: 1rem; border-radius: 999px; background: conic-gradient(var(--ehna-orange) 0 25%, #2563eb 0 50%, #16a34a 0 75%, #db2777 0); box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 3px color-mix(in oklab, var(--color-base-content) 15%, transparent); }
.ehna-accent-picker { display: flex; flex-direction: column; gap: 1rem; }
.ehna-accent-hint { font-size: .85rem; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); }
.ehna-accent-preview {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .85rem; border-radius: 1.1rem;
  background: color-mix(in oklab, var(--ehna-orange) 7%, var(--color-base-100));
  border: 1px solid color-mix(in oklab, var(--ehna-orange) 18%, transparent);
}
.ehna-accent-preview-btn { padding: .45rem .95rem; border-radius: .8rem; background: var(--ehna-orange); color: var(--ehna-on-accent); font-weight: 700; font-size: .85rem; }
.ehna-accent-preview-chip { padding: .3rem .7rem; border-radius: 999px; background: color-mix(in oklab, var(--ehna-orange) 15%, transparent); color: color-mix(in oklab, var(--ehna-orange) 80%, var(--color-base-content)); font-weight: 600; font-size: .8rem; }
.ehna-accent-preview-link { color: var(--ehna-orange); font-weight: 600; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.ehna-accent-preview-tile { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: .8rem; background: color-mix(in oklab, var(--ehna-orange) 12%, transparent); color: var(--ehna-orange); margin-inline-start: auto; }
.ehna-accent-preview-tile > span { width: 1.15rem; height: 1.15rem; }
.ehna-accent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 640px) { .ehna-accent-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; } }
.ehna-accent-swatch {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .6rem .25rem .5rem; border-radius: 1rem; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
  background: var(--color-base-100);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.ehna-accent-swatch:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--swatch) 45%, transparent); }
.ehna-accent-swatch-dot { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--swatch); color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ehna-accent-swatch-dot > span { width: 1.1rem; height: 1.1rem; opacity: 0; transform: scale(.6); transition: .15s ease; }
.ehna-accent-swatch-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; font-weight: 600; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); }
.ehna-accent-swatch.is-active { border-color: var(--swatch); background: color-mix(in oklab, var(--swatch) 9%, var(--color-base-100)); }
.ehna-accent-swatch.is-active .ehna-accent-swatch-dot { box-shadow: 0 0 0 3px var(--color-base-100), 0 0 0 5px var(--swatch); }
.ehna-accent-swatch.is-active .ehna-accent-swatch-dot > span { opacity: 1; transform: none; }
.ehna-accent-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .25rem; border-top: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.ehna-accent-custom { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .85rem; font-weight: 600; padding-top: .6rem; }
.ehna-accent-custom input { width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: .7rem; background: none; cursor: pointer; }
.ehna-accent-custom input::-webkit-color-swatch-wrapper { padding: 0; }
.ehna-accent-custom input::-webkit-color-swatch { border: 1px solid color-mix(in oklab, var(--color-base-content) 15%, transparent); border-radius: .7rem; }
.ehna-accent-reset { margin-top: .6rem; padding: .45rem .85rem; border-radius: .8rem; font-size: .8rem; font-weight: 600; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }
.ehna-accent-reset:hover { background: color-mix(in oklab, var(--color-base-content) 10%, transparent); }

/* ---------- news ticker: icon-only label on mobile ---------- */
@media (max-width: 767.98px) {
  .ehna-ticker { padding-inline: .5rem !important; gap: .5rem !important; }
  .ehna-ticker-label { width: 2rem; height: 2rem; padding: 0 !important; justify-content: center; }
  .ehna-ticker-label-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- admin: City Hub settings ---------- */
.ehna-city-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .25rem; }
.ehna-city-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.3rem; margin-inline-start: .35rem; padding: 0 .4rem; border-radius: 999px; font-size: .72rem; background: color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.ehna-city-search { display: inline-flex; align-items: center; gap: .45rem; min-width: 14rem; padding: .45rem .75rem; border-radius: .8rem; border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent); background: var(--color-base-100); color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-city-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--color-base-content); font-size: .875rem; }
.ehna-city { border-radius: 1rem; border: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent); background: color-mix(in oklab, var(--color-base-content) 3%, var(--color-base-100)); transition: border-color .15s ease; }
.ehna-city[open] { border-color: color-mix(in oklab, var(--color-primary) 35%, transparent); background: var(--color-base-100); }
.ehna-city-summary { display: flex; align-items: center; gap: .85rem; padding: .75rem .9rem; cursor: pointer; list-style: none; }
.ehna-city-summary::-webkit-details-marker { display: none; }
.ehna-city-summary::marker { content: ""; }
.ehna-city-icon { flex-shrink: 0; }
.ehna-city-name { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .1rem; }
.ehna-city-name strong { font-size: .925rem; font-weight: 600; }
.ehna-city-ar { margin-inline-start: .35rem; font-weight: 500; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-city-name small { font-size: .78rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-city-status { flex-shrink: 0; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: color-mix(in oklab, var(--color-base-content) 8%, transparent); color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-city-status.is-on { background: color-mix(in oklab, var(--color-success) 14%, transparent); color: var(--color-success); }
.ehna-city-chevron { flex-shrink: 0; color: color-mix(in oklab, var(--color-base-content) 45%, transparent); transition: transform .2s ease; }
.ehna-city[open] .ehna-city-chevron { transform: rotate(180deg); }
.ehna-city-body { display: flex; flex-direction: column; gap: 1rem; padding: .25rem .9rem 1rem; border-top: 1px solid color-mix(in oklab, var(--color-base-content) 7%, transparent); padding-top: 1rem; }
.ehna-city-grid { display: grid; grid-template-columns: 1fr; gap: .9rem 1rem; }
@media (min-width: 768px) { .ehna-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ehna-city-open { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; font-size: .82rem; font-weight: 600; color: var(--color-primary) !important; }
@media (max-width: 639.98px) { .ehna-city-search { min-width: 0; width: 100%; } .ehna-city-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.ehna-city-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .85rem; background: color-mix(in oklab, var(--color-primary) 12%, transparent); color: var(--color-primary); font-size: 1rem; }
.ehna-city-icon-sm { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .85rem; background: color-mix(in oklab, var(--color-base-content) 7%, transparent); color: color-mix(in oklab, var(--color-base-content) 70%, transparent); }
.ehna-city-chevron { display: inline-flex; font-size: .85rem; }
.ehna-city-list { display: grid; gap: .6rem; }
.ehna-city-field { display: flex; min-width: 0; flex-direction: column; gap: .35rem; }
.ehna-city-field .form-label { margin: 0; font-size: .8rem; font-weight: 600; }
.ehna-city-toolbar { margin-bottom: .9rem; }

/* ---------- floating back button ---------- */
.ehna-back {
  position: fixed; z-index: 34;
  inset-inline-start: .85rem; bottom: calc(4.6rem + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px; cursor: pointer;
  color: var(--ehna-fg, var(--color-base-content, #1c1e21));
  background: color-mix(in oklab, var(--ehna-bg, var(--color-base-100, #fff)) 82%, transparent);
  border: 1px solid color-mix(in oklab, var(--ehna-fg, var(--color-base-content, #1c1e21)) 12%, transparent);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.ehna-back > span, .ehna-back > i { width: 1.3rem; height: 1.3rem; font-size: 1.05rem; line-height: 1.3rem; text-align: center; }
[dir="rtl"] .ehna-back > span, [dir="rtl"] .ehna-back > i { transform: scaleX(-1); }
.ehna-back:hover { color: var(--ehna-orange, #f97316); transform: translateY(-1px); }
.ehna-back:active { transform: scale(.94); }
@media (min-width: 768px) {
  .ehna-back { bottom: 1.5rem; inset-inline-start: 1.5rem; width: 3rem; height: 3rem; }
  html.eh-pwa-on .ehna-back { bottom: 7.5rem; }
}
body:has(.lightbox) .ehna-back, body.lightbox-open .ehna-back { display: none; }

/* ---------- Live directory: on mobile the side menus become scrollable chip rows ---------- */
@media (max-width: 1023.98px) {
  .ehna-live-aside { gap: .5rem !important; min-width: 0; max-width: 100%; }
  div:has(> .ehna-live-aside) { grid-template-columns: minmax(0, 1fr); }
  .ehna-live-aside > nav { padding: 0 !important; border: 0 !important; background: none !important; overflow: hidden; }
  .ehna-live-aside > nav > div { display: none; }
  .ehna-live-aside > nav > ul { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: .4rem !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px !important; }
  .ehna-live-aside > nav > ul::-webkit-scrollbar { display: none; }
  .ehna-live-aside > nav > ul > li { flex: 0 0 auto; }
  .ehna-live-aside > nav > ul > li > a {
    white-space: nowrap; padding: .45rem .85rem !important; border-radius: 999px !important;
    border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
    background: var(--color-base-100); font-size: .82rem;
  }
  .ehna-live-aside > nav > ul > li > a.menu-active,
  .ehna-live-aside > nav > ul > li > a[aria-current="page"] { background: color-mix(in oklab, var(--ehna-orange) 14%, var(--color-base-100)) !important; border-color: color-mix(in oklab, var(--ehna-orange) 35%, transparent); color: var(--ehna-orange) !important; }
}
/* never let media/cards spill out of their frame on the live / watch / rooms pages */
main.site-content .card, main.site-content article.post { max-width: 100%; }
main.site-content :is(.card, article.post) :is(img, video, iframe) { max-width: 100%; }
/* single-column grids (lg:grid-cols-* only) must not grow wider than the screen on phones/tablets */
@media (max-width: 1023.98px) {
  main.site-content .grid:not([class*=" grid-cols-"]):not([class^="grid-cols-"]):not([class*="sm:grid-cols-"]):not([class*="md:grid-cols-"]) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- header: language button + mobile balances ---------- */
.ehna-lang-flag { width: 1.4rem; height: 1.4rem; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 3px color-mix(in oklab, var(--color-base-content) 14%, transparent); }
.ehna-lang-menu { width: min(24rem, calc(100vw - 1.5rem)); max-height: min(70vh, 30rem); overflow-y: auto; border-radius: 1.25rem; }
.ehna-lang-head { padding: .35rem .5rem .55rem; font-size: .8rem; font-weight: 700; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
.ehna-lang-item { display: flex; min-width: 0; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: .8rem; font-size: .82rem; color: var(--color-base-content) !important; }
.ehna-lang-item img { width: 1.2rem; height: 1.2rem; flex-shrink: 0; border-radius: 999px; object-fit: cover; }
.ehna-lang-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ehna-lang-item:hover { background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }
.ehna-lang-item.is-active { background: color-mix(in oklab, var(--ehna-orange) 12%, transparent); color: var(--ehna-orange) !important; font-weight: 600; }
.ehna-balance-m { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; height: 2.5rem; padding: 0 .55rem; border-radius: .9rem; background: color-mix(in oklab, var(--color-base-content) 6%, transparent); color: var(--color-base-content) !important; line-height: 1; }
.ehna-balance-m-row { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700; }
.ehna-balance-m-row > span { width: .85rem; height: .85rem; color: var(--ehna-orange); }
.ehna-balance-m-row.is-coins > span { color: var(--color-warning); }
@media (max-width: 639.98px) {
  .site-topbar > div { gap: .4rem !important; padding-inline: .6rem !important; }
  .site-topbar a[aria-label] > img { max-width: 5.25rem; }
  .site-topbar .js_site-topbar-chrome { gap: .15rem !important; }
  .site-topbar .site-topbar-icon { width: 2.35rem !important; height: 2.35rem !important; min-width: 0 !important; }
}
@media (min-width: 640px) { .ehna-balance-m { display: none !important; } }
/* 419.98: with search, explore, language, messages and alerts the bar overflowed 390px phones by ~7px */
@media (max-width: 419.98px) {
  .site-topbar a[aria-label] > img { max-width: 4.4rem; }
  .site-topbar .site-topbar-icon { width: 2.15rem !important; height: 2.15rem !important; }
  .ehna-balance-m { padding: 0 .4rem; }
}
@media (max-width: 339.98px) { .site-topbar .js_site-topbar-chrome > .dropdown:has(> .heroui > [aria-label="Explore"]) { display: none !important; } }

/* ---------- chat bubbles (mobile) ---------- */
.ehna-heads { position: fixed; z-index: 3000; inset-inline-end: .6rem; display: flex; flex-direction: column; gap: .6rem; touch-action: none; transition: top .25s ease; }
.ehna-heads.is-start { inset-inline-end: auto; inset-inline-start: .6rem; }
.ehna-heads[hidden] { display: none; }
.ehna-head {
  position: relative; width: 3.6rem; height: 3.6rem; padding: 0; border: 0; border-radius: 999px; cursor: pointer; touch-action: none;
  background: var(--color-base-100);
  box-shadow: 0 0 0 3px var(--color-base-100), 0 0 0 5px var(--ehna-orange), 0 10px 24px -8px rgba(0,0,0,.55);
  transition: transform .18s ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.ehna-head img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; pointer-events: none; }
.ehna-head:active { transform: scale(.94); }
.ehna-head.is-pop { animation: ehna-head-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes ehna-head-pop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ehna-heads.is-dragging .ehna-head { transition: none; }
.ehna-head-badge {
  position: absolute; top: -3px; inset-inline-end: -3px; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
  border: 2px solid var(--color-base-100); border-radius: 999px; background: #e41e3f; color: #fff;
  font-size: .7rem; font-weight: 800; line-height: 1rem; text-align: center;
}
.ehna-heads-target {
  position: fixed; z-index: 2999; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 999px;
  background: rgba(20, 20, 24, .72); color: #fff; font-size: 2rem; line-height: 1;
  border: 2px solid rgba(255, 255, 255, .55);
  transform: translate(-50%, 140%) scale(.8); opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease, background .15s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ehna-heads-target.is-visible { transform: translate(-50%, 0) scale(1); opacity: 1; }
.ehna-heads-target.is-hot { transform: translate(-50%, 0) scale(1.18); background: #e41e3f; border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .ehna-head.is-pop { animation: none; } }

/* ---------- app permissions center ---------- */
.ehna-perms { display: flex; flex-direction: column; gap: .6rem; }
.ehna-perms-hint, .ehna-perms-note { font-size: .84rem; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); }
.ehna-perms-note { font-size: .76rem; }
.ehna-perm { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: 1rem; border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); background: color-mix(in oklab, var(--color-base-content) 3%, var(--color-base-100)); }
.ehna-perm-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .85rem; background: color-mix(in oklab, var(--ehna-orange) 12%, transparent); color: var(--ehna-orange); }
.ehna-perm-icon > span { width: 1.25rem; height: 1.25rem; }
.ehna-perm-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .1rem; }
.ehna-perm-text strong { font-size: .9rem; }
.ehna-perm-text small { font-size: .75rem; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); }
.ehna-perm-state { flex-shrink: 0; font-size: .72rem; font-weight: 700; }
.ehna-perm[data-state="granted"] .ehna-perm-state::before { content: attr(data-on); padding: .2rem .55rem; border-radius: 999px; background: color-mix(in oklab, var(--color-success) 15%, transparent); color: var(--color-success); }
.ehna-perm[data-state="denied"] .ehna-perm-state::before { content: attr(data-off); padding: .2rem .55rem; border-radius: 999px; background: color-mix(in oklab, var(--color-error) 14%, transparent); color: var(--color-error); }
.ehna-perm[data-state="unsupported"] .ehna-perm-state::before { content: attr(data-na); color: color-mix(in oklab, var(--color-base-content) 50%, transparent); }
.ehna-perm-allow { flex-shrink: 0; padding: .45rem .9rem; border-radius: .8rem; background: var(--ehna-orange); color: var(--ehna-on-accent); font-size: .8rem; font-weight: 700; }
.ehna-perm-allow[hidden] { display: none; }
.ehna-perm-allow:disabled { opacity: .6; }
.ehna-perms-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-top: .3rem; }
.ehna-perms-test { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: .8rem; font-size: .8rem; font-weight: 600; background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }
.ehna-perms-test > span { width: 1rem; height: 1rem; }
.ehna-perms-test.is-ok { background: color-mix(in oklab, var(--color-success) 15%, transparent); color: var(--color-success); }
.ehna-perms-all { padding: .5rem 1rem; border-radius: .8rem; font-size: .85rem; font-weight: 700; background: var(--ehna-orange); color: var(--ehna-on-accent); }
@media (max-width: 420px) { .ehna-perm { flex-wrap: wrap; } .ehna-perm-text { flex-basis: calc(100% - 3.2rem); } .ehna-perm-state { margin-inline-start: 3.15rem; } .ehna-perm-allow { margin-inline-start: auto; } }

/* inline SVG icons that hardcode the old default-theme blue follow the theme colour */
svg [fill="#5e72e4" i], svg[fill="#5e72e4" i] { fill: var(--ehna-orange) !important; }
svg [stroke="#5e72e4" i], svg[stroke="#5e72e4" i] { stroke: var(--ehna-orange) !important; }
svg [fill="#825ee4" i] { fill: var(--ehna-orange-600) !important; }

/* ---------- header v2: bigger logo, one-column language list, roomy mobile balances ---------- */
.site-topbar a[aria-label] > img { max-height: 2.9rem !important; max-width: 11rem !important; }
@media (max-width: 639.98px) { .site-topbar a[aria-label] > img { max-height: 2.5rem !important; max-width: 7.6rem !important; } }
@media (max-width: 379.98px) { .site-topbar a[aria-label] > img { max-height: 2.2rem !important; max-width: 6.2rem !important; } }
.ehna-lang-menu { width: 16.5rem !important; max-height: min(65vh, 26rem) !important; padding: .4rem !important; }
.ehna-lang-grid { grid-template-columns: 1fr !important; gap: 2px !important; }
.ehna-lang-item { padding: .55rem .7rem !important; font-size: .875rem !important; border-radius: .75rem !important; }
.ehna-lang-item img { width: 1.45rem !important; height: 1.45rem !important; box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-base-content) 12%, transparent); }
.ehna-lang-item span:not(.ehna-lang-check) { flex: 1; }
.ehna-lang-check { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--ehna-orange); }
.ehna-lang-head { display: flex; align-items: center; gap: .4rem; padding: .45rem .7rem .6rem !important; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); margin-bottom: .3rem; }
.ehna-balance-strip { display: flex; gap: .6rem; padding: .6rem .75rem .1rem; }
.ehna-balance-card {
  display: flex; flex: 1 1 0; min-width: 0; align-items: center; gap: .6rem; padding: .55rem .7rem;
  border-radius: 1rem; background: var(--color-base-100); color: var(--color-base-content) !important;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent);
}
.ehna-balance-card-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: .8rem; background: color-mix(in oklab, var(--ehna-orange) 13%, transparent); color: var(--ehna-orange); }
.ehna-balance-card.is-coins .ehna-balance-card-icon { background: color-mix(in oklab, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.ehna-balance-card-icon > span { width: 1.2rem; height: 1.2rem; }
.ehna-balance-card-text { display: flex; min-width: 0; flex: 1; flex-direction: column; line-height: 1.15; }
.ehna-balance-card-text small { font-size: .7rem; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); }
.ehna-balance-card-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; font-weight: 800; }
.ehna-balance-card-add { width: 1rem; height: 1rem; flex-shrink: 0; color: color-mix(in oklab, var(--color-base-content) 45%, transparent); }
.ehna-lang-btn { position: relative; display: inline-flex; }
.ehna-lang-badge { position: absolute; inset-inline-end: -7px; bottom: -6px; width: 1rem; height: 1rem; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 2px var(--color-base-100); }
.ehna-pulse { position: relative; border-radius: .9rem; animation: ehna-pulse 1.2s ease-in-out 3; box-shadow: 0 0 0 2px var(--ehna-orange); }
@keyframes ehna-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--ehna-orange); } 50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--ehna-orange) 25%, transparent); } }
/* picker v2: quick colours + "Customize" grouped palette */
.ehna-accent-more { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; padding: .6rem; border-radius: .9rem; font-size: .85rem; font-weight: 700; border: 1px dashed color-mix(in oklab, var(--color-base-content) 20%, transparent); background: color-mix(in oklab, var(--color-base-content) 3%, transparent); }
.ehna-accent-more > span { width: 1.05rem; height: 1.05rem; }
.ehna-accent-more[aria-expanded="true"] .ehna-accent-more-chev { transform: rotate(180deg); }
.ehna-accent-full { display: flex; flex-direction: column; gap: .9rem; max-height: min(52vh, 26rem); overflow-y: auto; padding: .15rem .1rem .3rem; overscroll-behavior: contain; }
.ehna-accent-full[hidden] { display: none; }
.ehna-accent-group-title { margin: 0 0 .45rem; font-size: .75rem; font-weight: 800; letter-spacing: .02em; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-accent-grid.is-mini { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.ehna-accent-grid.is-mini .ehna-accent-swatch { padding: .45rem .15rem .4rem; border-radius: .85rem; }
.ehna-accent-grid.is-mini .ehna-accent-swatch-dot { width: 1.85rem; height: 1.85rem; }
.ehna-accent-grid.is-mini .ehna-accent-swatch-name { font-size: .64rem; }
@media (min-width: 640px) { .ehna-accent-grid:not(.is-mini) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ehna-accent-grid:not(.is-mini) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: .45rem !important; }
.ehna-accent-grid:not(.is-mini) .ehna-accent-swatch-dot { width: 2.05rem; height: 2.05rem; }
.ehna-accent-grid:not(.is-mini) .ehna-accent-swatch { padding: .5rem .15rem .45rem; }
.ehna-accent-grid:not(.is-mini) .ehna-accent-swatch-name { font-size: .66rem; }

/* ---------- tab bar always visible (no hide-on-scroll), also on Reels ---------- */
.ehna-tabbar[data-hidden="true"] { transform: none !important; }
.ehna-tabbar.is-reels { background: rgba(0, 0, 0, .55); border-top-color: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ehna-tabbar.is-reels .ehna-tab-link, .ehna-tabbar.is-reels .ehna-tab-label { color: rgba(255, 255, 255, .82) !important; }
.ehna-tabbar.is-reels .ehna-tab.is-active .ehna-tab-link { color: #fff !important; }
.ehna-tabbar.is-reels .ehna-add-circle { border-color: rgba(0, 0, 0, .6); }
@media (max-width: 767.98px) {
  /* the reels viewer ends above the tab bar, so captions / read more / menu are never under it */
  body:has(.ehna-tabbar.is-reels) #reels.js_reels { height: calc(100dvh - 3.5rem - env(safe-area-inset-bottom)); }
  .ehna-tabbar.is-reels { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* while a video plays in the lightbox the tab bar steps aside, so the player controls are fully visible */
  body.lightbox-open .ehna-tabbar { display: none !important; }
}

@media (min-width: 640px) { .ehna-balance-strip { display: none !important; } }

/* ---------- phone: menu button at the start of the top bar ---------- */
.ehna-top-menu { display: none; }
@media (max-width: 1023.98px) {
  .ehna-top-menu { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .9rem; color: var(--color-base-content); background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }
  .ehna-top-menu > span { width: 1.4rem; height: 1.4rem; }
  .ehna-top-menu:active { transform: scale(.94); }
  /* the top bar button replaces the extra one next to the news ticker */
  .ehna-ticker-row > .ehna-rail-toggle { display: none; }
  .site-topbar #site-sidebar.ehna-rail, #site-sidebar.ehna-rail { top: 64px; }
}
@media (max-width: 1023.98px) {
  /* keep the top bar (and its menu button) above the dimmed backdrop so one tap closes the menu */
  body:has(#site-sidebar.ehna-rail.is-open) .site-topbar { z-index: 46; }
}

/* =====================================================================
   Readable form fields everywhere (sign in / sign up / every form)
   - tell the browser which scheme the page uses, so phones that force a dark mode
     on websites do not repaint fields with light text on a light background
   - browser autofill paints its own background: keep our text and background
   ===================================================================== */
:root { color-scheme: light; }
html[data-theme$="-dark"], html:has(> body.night-mode), html.dark { color-scheme: dark; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active,
textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus,
select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-base-content, #11142d) !important;
  caret-color: var(--color-base-content, #11142d);
  -webkit-box-shadow: 0 0 0 1000px var(--color-base-100, #ffffff) inset !important;
  box-shadow: 0 0 0 1000px var(--color-base-100, #ffffff) inset !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}
input, textarea, select { caret-color: var(--color-base-content, currentColor); }
/* while chat bubbles are on screen, a sticky sponsored bar never sits under them: it moves up out of their way */
html.eh-heads-on .ehna-ad-sticky { bottom: calc(150px + env(safe-area-inset-bottom)); }
/* phones: the site's top banner ads stay off; the only ad is the sponsored card in the feed */
@media (max-width: 767.98px) { html:not(.ehna-ads-all) .ehna-ads-master { display: none !important; } }

/* /content/themes/default/css/ehna-flags.css */
/* Ehna: colour flag emoji everywhere (Windows has no flag emoji and shows "EG" letters instead of 🇪🇬).
   The font only covers flag code points (unicode-range), so every other character keeps the theme font.
   Font: Twemoji Country Flags (country-flag-emoji-polyfill), graphics by Twitter Twemoji, CC-BY 4.0. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/content/themes/default/fonts/TwemojiCountryFlags.woff2?v=1") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  font-display: swap;
}
/* Giftun (Tailwind font tokens) */
:root { --font-sans: "Twemoji Country Flags", "Inter", ui-sans-serif, system-ui, sans-serif; }
[dir=rtl], [dir=RTL] { --font-sans: "Twemoji Country Flags", "Vazirmatn", "Inter", ui-sans-serif, system-ui, sans-serif; }
/* classic theme */
html:not([data-theme]) { --body-font-family: "Twemoji Country Flags", Poppins, Helvetica, sans-serif; }
html:not([data-theme])[dir=RTL], html:not([data-theme])[dir=rtl] { --body-font-family: "Twemoji Country Flags", Tajawal, Helvetica, sans-serif; }

/* /content/themes/default/css/ehna-brand.css */
/* Ehna logo: mark + name rendered as text, so the name follows the visitor's language */
/* Latin name: Montserrat (strong geometric display) — SIL Open Font License, self-hosted */
@font-face { font-family: "Ehna Display"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("/content/themes/default/fonts/montserrat-latin.woff2?v=1") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
.ehna-brand.is-latin .ehna-brand-w1, .ehna-brand.is-latin .ehna-brand-w2 { font-family: "Ehna Display", "Montserrat", system-ui, sans-serif; }
.ehna-brand.is-latin .ehna-brand-w1 { font-weight: 900; letter-spacing: .06em; }
.ehna-brand.is-latin .ehna-brand-w2 { font-weight: 800; letter-spacing: .42em; }
.ehna-brand { display: inline-flex; align-items: center; gap: .5em; line-height: 1; white-space: nowrap; font-size: 16px; color: inherit; }
.ehna-brand--sm { font-size: 15.5px; }
.ehna-brand--lg { font-size: 22px; }
.ehna-brand-icon { width: 2.5em; height: 2.5em; flex: none; object-fit: contain; }
.ehna-brand-text { display: inline-flex; flex-direction: column; align-items: center; gap: .22em; }
.ehna-brand-w1 {
  font-weight: 900; font-size: 1.6em; letter-spacing: .02em; padding-block: .06em;
  background: linear-gradient(90deg, #f7931e 0%, #ffb02e 18%, #1da1e6 46%, #1585d8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Latin "EHNA": orange E, blue HNA, like the original artwork */
.ehna-brand.is-latin .ehna-brand-w1 { background: linear-gradient(90deg, #f7931e 0 24%, #1d9fe6 24% 100%); -webkit-background-clip: text; background-clip: text; }
[dir=rtl] .ehna-brand-w1, [dir=RTL] .ehna-brand-w1 { background-image: linear-gradient(270deg, #f7931e 0%, #ffb02e 18%, #1da1e6 46%, #1585d8 100%); }
.ehna-brand-w2 { font-weight: 800; font-size: .58em; letter-spacing: .34em; margin-inline-start: .34em; color: #22313f; }
.ehna-brand.is-joined .ehna-brand-w2 { letter-spacing: 0; margin-inline-start: 0; font-size: .7em; }
/* dark backgrounds */
html[data-theme$="-dark"] .ehna-brand-w2, body.night-mode .ehna-brand-w2, .ehna-brand--light .ehna-brand-w2 { color: #eef2f7; }
/* 420: the header logo column is 44% wide on phones; at 390px the text was clipped to "EH ON" (live/create, voice rooms) */
@media (max-width: 420px) { .ehna-brand-text[data-hide-xs] { display: none; } }
.ehna-brand .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ehna-brand--lg { margin-bottom: 1.25rem; }

/* ---------- Latin name: engraved (carved into the surface) ----------
   - the letters keep their orange/blue fill, darkened at the top edge = the inner wall of the cut
   - a copy behind them (::after, from data-text) draws a dark lip above and a light bevel below */
.ehna-brand.is-latin .ehna-brand-text { isolation: isolate; }
.ehna-brand.is-latin .ehna-brand-w1, .ehna-brand.is-latin .ehna-brand-w2 { position: relative; }
.ehna-brand.is-latin .ehna-brand-w1 {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .14) 32%, rgba(0, 0, 0, 0) 55%, rgba(255, 255, 255, .14) 100%),
    linear-gradient(90deg, #f7931e 0 24%, #1d9fe6 24% 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ehna-brand.is-latin .ehna-brand-w1::after, .ehna-brand.is-latin .ehna-brand-w2::after {
  content: attr(data-text); position: absolute; inset: 0; z-index: -1; pointer-events: none;
  padding: inherit; letter-spacing: inherit; font: inherit; color: transparent;
  -webkit-background-clip: border-box; background: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, 1), 0 2px 1px rgba(255, 255, 255, .55), 0 0 1px rgba(0, 0, 0, .25);
}
.ehna-brand.is-latin .ehna-brand-w2 {
  color: #2b3a48;
  background: linear-gradient(180deg, #16212b 0%, #33475a 60%, #4a6075 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* dark surfaces: the lip is a deep shadow, the bevel a faint light edge */
html[data-theme$="-dark"] .ehna-brand.is-latin .ehna-brand-w1::after, html[data-theme$="-dark"] .ehna-brand.is-latin .ehna-brand-w2::after,
body.night-mode .ehna-brand.is-latin .ehna-brand-w1::after, body.night-mode .ehna-brand.is-latin .ehna-brand-w2::after,
.ehna-brand--light.is-latin .ehna-brand-w1::after, .ehna-brand--light.is-latin .ehna-brand-w2::after {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .22), 0 2px 2px rgba(0, 0, 0, .35);
}
html[data-theme$="-dark"] .ehna-brand.is-latin .ehna-brand-w2, body.night-mode .ehna-brand.is-latin .ehna-brand-w2, .ehna-brand--light.is-latin .ehna-brand-w2 {
  background: linear-gradient(180deg, #9fb0c0 0%, #e6edf4 55%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* /content/themes/giftun/css/ehna-perf.css */
/* Ehna performance: let the browser skip style / layout / paint for blocks that are off screen
   (content-visibility: auto). Only on blocks whose popups are positioned outside them or that have none. */
@supports (content-visibility: auto) {
  /* right column cards (desktop) and the promoted strips under the feed on phones */
  aside.xl\:block > *, .xl\:hidden > [data-carousel] { content-visibility: auto; contain-intrinsic-size: auto 300px; }
}
/* phones: frosted-glass blur on large areas is expensive while scrolling, use a solid tint instead */
@media (max-width: 767px) {
  .ehna-ad-pop, .ehna-wl { backdrop-filter: none !important; }
}
/* honour reduced motion (also saves battery) */
@media (prefers-reduced-motion: reduce) {
  .identity-name, .ehna-identity-badge, .user-badge-chip { animation: none !important; }
}

/* news ticker: compositor-only marquee via the Web Animations API (index.newsfeed.tpl) */
.ehna-ticker-track { will-change: transform; }
/* skeleton pulses on hidden placeholders must not keep animating */
.hidden.animate-pulse, [hidden].animate-pulse, .hidden .animate-pulse { animation: none !important; }

/* /content/themes/giftun/css/ehna-ui.css */
/* =====================================================================
   Ehna UI — the shared design layer (City Guide / Tourism look) for the whole site
   - tokens:      --ui-radius, --ui-radius-card, --ui-line, --ui-soft, --ui-muted
   - components:  .ui-block .ui-section-head .ui-more .ui-count .ui-chips/.ui-chip .ui-quick .ui-card
                  .ui-hero .ui-list/.ui-item .ui-tabs/.ui-tab .ui-empty .ui-btn .ui-pill
   - restyles:    Giftun markup (posts, cards, widgets, page headers, profile covers) through selectors,
                  so the precompiled Tailwind classes stay untouched.
   Loaded on every Giftun page (not admin) and on the default-theme screens that wear the Giftun shell
   (live, voice room). Follows var(--color-primary) (the member's theme colour), light & dark, RTL.
   No infinite animations, no backdrop-filter on large areas.
   ===================================================================== */

/* ---------- tokens (re-declared on body so the default theme's body.night-mode values resolve) ---------- */
:root, body {
  --ui-radius: 1.5rem;
  --ui-radius-card: 1.25rem;
  --ui-radius-tile: 1.1rem;
  --ui-line: color-mix(in oklab, var(--color-base-content) 9%, transparent);
  --ui-line-strong: color-mix(in oklab, var(--color-base-content) 16%, transparent);
  --ui-soft: color-mix(in oklab, var(--color-base-content) 5%, var(--color-base-100));
  --ui-muted: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  --ui-lift: 0 14px 30px -18px rgba(0, 0, 0, .45);
}
/* the default theme (live / voice room screens) has no Giftun colour tokens: map them */
html:not([data-theme]) {
  --color-base-100: var(--ehna-bg, #fff);
  --color-base-200: #f0f2f5;
  --color-base-content: var(--ehna-fg, #1c1e21);
  --color-primary: var(--ehna-orange, #f97316);
  --color-primary-content: var(--ehna-on-accent, #fff);
}
html:not([data-theme]) body.night-mode { --color-base-100: #242526; --color-base-200: #18191a; --color-base-content: #e4e6eb; }
/* Giftun: rounder boxes everywhere (cards, dropdowns, modals use --radius-box) */
html[data-theme^="giftun"] { --radius-box: 1.25rem; }

/* ---------- components ---------- */
.ui-block { background: var(--color-base-100); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: 1rem; color: var(--color-base-content); min-width: 0; }
.ui-block.is-flush { padding: 0; overflow: hidden; }
.ui-section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; min-width: 0; }
.ui-section-head h2, .ui-section-head h3, .ui-section-title { font-family: inherit; color: inherit; font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; min-width: 0; margin: 0; line-height: 1.3; }
.ui-section-head h2 > i, .ui-section-head h3 > i, .ui-section-title > i { color: var(--color-primary); }
.ui-section-head a:not(.ui-more) { color: inherit !important; }
.ui-more { font-size: .82rem; font-weight: 700; color: var(--color-primary) !important; white-space: nowrap; }
.ui-count { font-size: .75rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; background: var(--ui-soft); }
.ui-muted { color: var(--ui-muted); }
.ui-empty { text-align: center; font-size: .875rem; padding: 1.5rem; border: 1px dashed var(--ui-line-strong); border-radius: 1rem; color: var(--ui-muted); }
.ui-empty > i { display: block; font-size: 1.8rem; margin-bottom: .5rem; color: var(--color-primary); }

.ui-chips { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
.ui-chips::-webkit-scrollbar { display: none; }
.ui-chips.is-wrap { flex-wrap: wrap; overflow: visible; }
.ui-chip { --tone: var(--color-primary); flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700; line-height: 1.2; background: var(--ui-soft); color: var(--color-base-content) !important; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; }
.ui-chip i { color: var(--tone); }
.ui-chip:hover { border-color: color-mix(in oklab, var(--tone) 40%, transparent); }
.ui-chip.is-active, .ui-chip[aria-pressed="true"], input:checked + .ui-chip { background: color-mix(in oklab, var(--tone) 16%, var(--color-base-100)); border-color: color-mix(in oklab, var(--tone) 45%, transparent); }
.ui-chip.is-solid { background: var(--color-primary); color: var(--color-primary-content) !important; }
.ui-chip.is-solid i { color: inherit; }
.ui-chip.is-danger { --tone: var(--color-error, #ef4444); background: color-mix(in oklab, var(--tone) 14%, var(--color-base-100)); color: var(--tone) !important; }

.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.6rem; padding: .5rem 1.1rem; border-radius: .9rem; font-weight: 700; font-size: .85rem; border: 0; cursor: pointer; background: var(--color-primary); color: var(--color-primary-content) !important; transition: filter .15s, transform .1s; }
.ui-btn:hover { filter: brightness(1.06); }
.ui-btn:active { transform: scale(.97); }
.ui-btn.is-ghost { background: var(--ui-soft); color: var(--color-base-content) !important; }
.ui-btn.is-block { width: 100%; }

.ui-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; background: var(--ui-soft); }
.ui-pill.is-live { background: #ef4444; color: #fff; }

/* quick tiles: a tinted icon square per link (set --tone on the tile) */
.ui-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ui-quick > a, .ui-quick > button, .ui-tile { --tone: var(--color-primary); display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .3rem; border-radius: var(--ui-radius-tile); background: var(--color-base-100); border: 1px solid var(--ui-line); font-size: .72rem; font-weight: 700; text-align: center; color: var(--color-base-content) !important; transition: transform .15s, border-color .15s; min-width: 0; }
.ui-quick > a:hover, .ui-quick > button:hover, .ui-tile:hover { border-color: color-mix(in oklab, var(--tone) 40%, transparent); }
.ui-quick > a:active, .ui-quick > button:active, .ui-tile:active { transform: scale(.96); }
.ui-tile-icon, .ui-quick > a > span:first-child, .ui-quick > button > span:first-child { --tone: inherit; width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--tone); background: color-mix(in oklab, var(--tone) 14%, var(--color-base-100)); }

/* cards */
.ui-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ui-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--ui-radius-card); background: var(--color-base-100); border: 1px solid var(--ui-line); color: var(--color-base-content) !important; transition: transform .2s, box-shadow .2s; min-width: 0; }
.ui-card:hover { transform: translateY(-3px); box-shadow: var(--ui-lift); }
.ui-card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--ui-soft) center / cover no-repeat; overflow: hidden; }
.ui-card-media > img { width: 100%; height: 100%; object-fit: cover; }
.ui-card-body { padding: .65rem .75rem .75rem; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ui-card-title { font-size: .95rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-card-meta { display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .72rem; color: var(--ui-muted); }
.ui-card-meta i { margin-inline-end: .25rem; color: var(--color-primary); }

/* hero: photo (style="background-image") + dark gradient, or the soft brand gradient (.is-soft) */
.ui-hero { position: relative; overflow: hidden; border-radius: var(--ui-radius); min-height: 12rem; display: flex; align-items: flex-end; color: #fff; background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 70%, #0e7490), #0891b2 55%, color-mix(in oklab, var(--color-primary) 55%, #f59e0b)) center / cover no-repeat; }
.ui-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .7) 100%); pointer-events: none; }
.ui-hero-inner { position: relative; width: 100%; padding: 2.5rem 1.1rem 1.3rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .9rem; }
.ui-hero-kicker { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.ui-hero-title { font-size: 1.7rem; font-weight: 900; line-height: 1.1; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); margin: .15rem 0 0; }
.ui-hero-text { margin-top: .35rem; font-size: .9rem; opacity: .9; max-width: 40rem; }
.ui-hero-facts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.ui-fact { display: flex; flex-direction: column; padding: .4rem .7rem; border-radius: .9rem; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); line-height: 1.15; }
.ui-fact b { font-size: .95rem; font-weight: 800; white-space: nowrap; }
.ui-fact small { font-size: .66rem; opacity: .85; white-space: nowrap; }
.ui-hero-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.ui-hero .ui-chip, .ui-hero-actions .ui-btn.is-ghost { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .24); color: #fff !important; }
.ui-hero .ui-chip i { color: inherit; }
.ui-hero-cta { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding-inline: 1rem; border-radius: 999px; font-weight: 800; font-size: .85rem; background: #fff; color: #0f172a !important; border: 0; cursor: pointer; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6); }
.ui-hero-cta i, .ui-hero-cta > span[class*="icon-"] { color: var(--color-primary); }
.ui-hero.is-soft { color: var(--color-base-content); min-height: 0; align-items: center; background: linear-gradient(135deg, color-mix(in oklab, #0891b2 22%, var(--color-base-100)), var(--color-base-100) 55%, color-mix(in oklab, var(--color-primary) 22%, var(--color-base-100))); }
.ui-hero.is-soft::before { display: none; }
.ui-hero.is-soft .ui-hero-inner { padding: 1.5rem 1.25rem; align-items: center; }
.ui-hero.is-soft .ui-hero-title { text-shadow: none; }
.ui-hero.is-soft .ui-hero-text { color: color-mix(in oklab, var(--color-base-content) 70%, transparent); opacity: 1; }
.ui-hero.is-soft .ui-hero-kicker { color: var(--color-primary); }

/* lists */
.ui-list { display: flex; flex-direction: column; gap: .35rem; }
.ui-item { display: flex; align-items: center; gap: .75rem; padding: .55rem; border-radius: 1rem; color: var(--color-base-content) !important; transition: background .15s; min-width: 0; }
.ui-item:hover { background: var(--ui-soft); }
.ui-item > img, .ui-item-icon { width: 3rem; height: 3rem; flex-shrink: 0; border-radius: .85rem; object-fit: cover; }
.ui-item-icon { --tone: var(--color-primary); display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--tone) 14%, var(--color-base-100)); color: var(--tone); }
.ui-item-text { min-width: 0; display: flex; flex-direction: column; }
.ui-item-text strong { font-size: .875rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-item-text small { font-size: .75rem; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* segmented tabs */
.ui-tabs { display: flex; gap: .35rem; padding: .25rem; border-radius: 999px; background: var(--ui-soft); overflow-x: auto; scrollbar-width: none; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 2.3rem; padding-inline: .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700; border: 0; background: none; color: color-mix(in oklab, var(--color-base-content) 70%, transparent) !important; cursor: pointer; white-space: nowrap; }
.ui-tab.is-active, .ui-tab[aria-current="page"] { background: var(--color-base-100); color: var(--color-base-content) !important; box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .35); }

@media (min-width: 640px) {
  .ui-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-quick { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ui-hero { min-height: 15rem; }
  .ui-hero-title { font-size: 2.3rem; }
  .ui-hero-inner { padding: 3rem 1.6rem 1.5rem; }
  .ui-hero.is-soft .ui-hero-inner { padding: 2rem 2.25rem; }
}
@media (min-width: 1024px) { .ui-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* =====================================================================
   Giftun restyles (selectors on the existing markup)
   ===================================================================== */
/* ----- post cards html[data-theme^="giftun"] feed ----- */
html[data-theme^="giftun"] article.post:not(.boosted) { border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: none; }
html[data-theme^="giftun"] article.post.boosted { border-radius: var(--ui-radius); }
html[data-theme^="giftun"] article.post .post-header { padding-top: 1rem; }
html[data-theme^="giftun"] article.post .post-avatar-picture { border-radius: 999px; }
html[data-theme^="giftun"] article.post .post-meta > :first-child a { font-weight: 800; }
html[data-theme^="giftun"] article.post .post-media { border-color: var(--ui-line); border-radius: var(--ui-radius-tile); }
html[data-theme^="giftun"] article.post .post-photos, html[data-theme^="giftun"] article.post .post-video { margin-inline: .75rem; border-radius: var(--ui-radius-tile); overflow: hidden; }
html[data-theme^="giftun"] article.post .post-photos { margin-top: .6rem; }
html[data-theme^="giftun"] article.post .post-stats { padding-inline: 1.1rem; }
/* action bar: a soft segmented strip like the city tabs */
html[data-theme^="giftun"] article.post .post-actions { margin: .1rem .75rem .75rem; padding: .25rem; border-top: 0; border-radius: 999px; background: var(--ui-soft); gap: .25rem; }
html[data-theme^="giftun"] article.post .post-actions .action-btn { height: 2.4rem; border-radius: 999px; font-weight: 700; }
html[data-theme^="giftun"] article.post .post-actions .action-btn:hover { background: var(--color-base-100); color: var(--color-base-content); }
html[data-theme^="giftun"] article.post .post-actions .action-btn > [class*="icon-"] { color: var(--color-primary); }
html[data-theme^="giftun"] article.post .post-actions .reaction-btn-icon > [class*="icon-"] { color: var(--color-primary); }
html[data-theme^="giftun"] article.post .post-comments, html[data-theme^="giftun"] article.post .post-footer { border-color: var(--ui-line); }
/* publisher, stories, filters and other feed blocks */
html[data-theme^="giftun"] .card.border.border-base-300.bg-base-100 { border-color: var(--ui-line); border-radius: var(--ui-radius); }

/* ----- listing cards (pages, groups, events, people, market, jobs, offers, courses ...) ----- */
html[data-theme^="giftun"] .group.flex.flex-col.overflow-hidden.rounded-box.border,
html[data-theme^="giftun"] .feeds-item.rounded-box.border { border-color: var(--ui-line); border-radius: var(--ui-radius-card); transition: transform .2s, box-shadow .2s; }
html[data-theme^="giftun"] .group.flex.flex-col.overflow-hidden.rounded-box.border:hover,
html[data-theme^="giftun"] .feeds-item.rounded-box.border:hover { transform: translateY(-3px); box-shadow: var(--ui-lift); }

/* ----- widgets / sidebars: one white block with a hairline (ec-block) ----- */
html[data-theme^="giftun"] .card.bg-\[\#F9F9F9\] { background: var(--color-base-100); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); corner-shape: round; }
html[data-theme^="giftun"] .card.bg-\[\#F9F9F9\] > .card-body,
html[data-theme^="giftun"] .card.bg-primary\/10 > .card-body { background: transparent; border-radius: 0; corner-shape: round; padding-top: 0; }
html[data-theme^="giftun"] .card.bg-primary\/10 { background: var(--color-base-100); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); corner-shape: round; }
html[data-theme^="giftun"] .card.bg-\[\#F9F9F9\] > div:first-child h2,
html[data-theme^="giftun"] .card.bg-primary\/10 > div:first-child h2 { font-size: 1rem; font-weight: 800; }
/* the gradient promo / merits widgets keep a hint of colour but sit on the same block */
html[data-theme^="giftun"] aside .rounded-3xl.bg-linear-to-br,
html[data-theme^="giftun"] .xl\:hidden .rounded-3xl.bg-linear-to-br { --tw-gradient-from: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100)); --tw-gradient-via: var(--color-base-100); --tw-gradient-to: var(--color-base-100); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); corner-shape: round; }
html[data-theme^="giftun"] aside .rounded-3xl.bg-linear-to-br h2,
html[data-theme^="giftun"] .xl\:hidden .rounded-3xl.bg-linear-to-br h2 { font-size: 1rem; font-weight: 800; }
html[data-theme^="giftun"] aside .rounded-3xl.bg-linear-to-br > div:first-child > [class*="icon-"],
html[data-theme^="giftun"] .xl\:hidden .rounded-3xl.bg-linear-to-br > div:first-child > [class*="icon-"] { color: var(--color-primary); }

/* ----- section heads inside pages/profiles ----- */
html[data-theme^="giftun"] .ui-sh h2, html[data-theme^="giftun"] .card-header h2, html[data-theme^="giftun"] .card-header .card-title { font-weight: 800; }
html[data-theme^="giftun"] .ui-sh h2 { font-size: 1rem; }
html[data-theme^="giftun"] .card-header { border-color: var(--ui-line); }

/* ----- page headers (directories) ----- */
html[data-theme^="giftun"] .ehna-page-hero { border: 1px solid var(--ui-line); background: linear-gradient(135deg, color-mix(in oklab, #0891b2 20%, var(--color-base-100)), var(--color-base-100) 55%, color-mix(in oklab, var(--color-primary) 22%, var(--color-base-100))); }
html[data-theme^="giftun"] .ehna-page-hero h1 { font-weight: 900; letter-spacing: -.01em; }
html[data-theme^="giftun"] .ehna-page-hero > span.bg-linear-to-t, html[data-theme^="giftun"] .ehna-page-hero > span.bg-linear-to-bl { display: none; }
html[data-theme^="giftun"] .ehna-page-hero > span.blur-2xl { opacity: .18; }

/* ----- profile / page / group / event headers: city hero on the cover ----- */
html[data-theme^="giftun"] section:has(> .profile-cover-wrapper) { border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
html[data-theme^="giftun"] .profile-cover-wrapper { border-radius: calc(var(--ui-radius) - 1px) calc(var(--ui-radius) - 1px) 0 0; }
html[data-theme^="giftun"] .profile-cover-wrapper::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .45) 100%); pointer-events: none; }
html[data-theme^="giftun"] .profile-cover-wrapper:not(:has(img))::after { background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 30%, transparent), transparent 60%, color-mix(in oklab, #0891b2 25%, transparent)); }

/* ----- segmented tab rows already in Giftun: match the city tabs ----- */
html[data-theme^="giftun"] ul.rounded-full.bg-base-content\/5 { background: var(--ui-soft); }
html[data-theme^="giftun"] ul.rounded-full.bg-base-content\/5 a[aria-current="page"] { font-weight: 700; }

/* ----- modals html[data-theme^="giftun"] dropdowns: hairline instead of grey border ----- */
html[data-theme^="giftun"] .dropdown-menu.border-base-300 { border-color: var(--ui-line); }

/* underline tab rows (pages, groups, events, market, people, search, wallet, watch, live, voice rooms ...) become city segmented tabs */
html[data-theme^="giftun"] nav.tabs.tabs-bordered { width: fit-content; max-width: 100%; gap: .25rem !important; padding: .25rem; border: 0 !important; border-radius: 1.35rem; background: var(--ui-soft); overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
html[data-theme^="giftun"] nav.tabs.tabs-bordered::-webkit-scrollbar { display: none; }
html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab { margin: 0 !important; height: 2.5rem; padding-inline: .9rem !important; border: 0 !important; border-radius: 1.1rem; font-weight: 700; white-space: nowrap; --tab-border-color: transparent; }
html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab::after, html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab::before { display: none; }
html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab.tab-active, html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab[aria-current="page"] { background: var(--color-base-100); color: var(--color-base-content) !important; box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .35); }
html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab.tab-active > [class*="icon-"] { color: var(--color-primary); }
@media (max-width: 639.98px) {
  html[data-theme^="giftun"] nav.tabs.tabs-bordered { width: 100%; }
  html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab { height: 3.4rem; padding-inline: .4rem !important; }
}

/* phones: the top bar must fit 390px (no horizontal scroll) */
@media (max-width: 420px) {
  .js_site-topbar-chrome { gap: .1rem !important; }
  .js_site-topbar-chrome .site-topbar-icon { width: 2.15rem !important; height: 2.15rem !important; min-width: 2.15rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-card, .ui-quick > a, .ui-tile { transition: none; }
  .ui-card:hover { transform: none; }
}

/* /content/themes/giftun/css/ehna-i18n.css */
/* Ehna content translation: "Translated · See original" toggle in posts / comments and the note above translated texts */
.ehna-i18n { display: contents; }
.ehna-i18n-bar {
  display: flex; align-items: center; gap: .35rem; width: max-content; max-width: 100%;
  margin: 0 0 .35rem; padding: .15rem .55rem; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .75rem; font-weight: 600; line-height: 1.5; text-align: start;
  color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  background: color-mix(in oklab, var(--color-primary) 8%, transparent);
  white-space: normal;
}
.ehna-i18n-bar:hover, .ehna-i18n-bar:focus-visible { color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 14%, transparent); }
.ehna-i18n-bar:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ehna-i18n-bar i { font-size: .8rem; color: var(--color-primary); }
.ehna-i18n-text { display: block; }
/* colored-background status posts: the text is centered in a box */
.post-colored .ehna-i18n-bar { margin-inline: auto; color: inherit; background: rgba(0, 0, 0, .18); }
.post-colored .ehna-i18n-bar i { color: inherit; }

.ehna-i18n-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin: 0 0 .5rem; font-size: .78rem; line-height: 1.5;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}
.ehna-i18n-note i { color: var(--color-primary); }
.ehna-i18n-note a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.ehna-i18n-note a:hover { text-decoration: underline; }

/* /content/themes/default/css/ehna-ads.css */
/* Ehna Ads Studio formats (both themes) */
.ehna-ad { --ad-bg: #0f172a; --ad-fg: #fff; --ad-accent: var(--ehna-orange, #f97316); color: var(--ad-fg); text-decoration: none !important; }
.ehna-ad-cta, .ehna-ad-btn { display: inline-flex; align-items: center; justify-content: center; padding: .55rem 1.1rem; border-radius: 999px; font-style: normal; font-weight: 800; font-size: .88rem; background: var(--ad-accent); color: var(--ehna-on-accent, #fff) !important; text-decoration: none !important; white-space: nowrap; }
.ehna-ad-tag { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(4px); }
.ehna-ad-tag.is-inline { position: static; align-self: flex-start; background: color-mix(in oklab, var(--ad-fg) 14%, transparent); color: var(--ad-fg); }

/* banner */
.ehna-ad-banner { position: relative; display: flex; align-items: flex-end; min-height: 170px; margin-bottom: 1.25rem; border-radius: 28px; overflow: hidden; background: var(--ad-bg); isolation: isolate; }
.ehna-ad-banner .ehna-ad-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.ehna-ad-banner:hover .ehna-ad-img { transform: scale(1.03); }
.ehna-ad-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in oklab, var(--ad-bg) 88%, transparent), color-mix(in oklab, var(--ad-bg) 25%, transparent) 70%); }
[dir=rtl] .ehna-ad-shade, [dir=RTL] .ehna-ad-shade { background: linear-gradient(270deg, color-mix(in oklab, var(--ad-bg) 88%, transparent), color-mix(in oklab, var(--ad-bg) 25%, transparent) 70%); }
.ehna-ad-text { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 46px 24px 22px; max-width: 34rem; }
.ehna-ad-text strong { font-size: 1.35rem; font-weight: 900; line-height: 1.25; }
.ehna-ad-text span { font-size: .95rem; opacity: .9; }
.ehna-ad-text .ehna-ad-cta { margin-top: .4rem; }

/* feed card */
.ehna-ad-feed { display: block; margin-bottom: 1rem; border-radius: 28px; overflow: hidden; background: var(--color-base-100, #fff); color: var(--color-base-content, #1f2937); border: 1px solid color-mix(in oklab, var(--color-base-content, #000) 8%, transparent); }
.ehna-ad-feed header { display: flex; align-items: center; gap: .45rem; padding: .75rem 1rem; font-size: .78rem; font-weight: 700; color: color-mix(in oklab, var(--color-base-content, #000) 60%, transparent); }
.ehna-ad-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ad-accent); }
.ehna-ad-feed a { display: block; color: inherit !important; text-decoration: none !important; }
.ehna-ad-feed .ehna-ad-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ehna-ad-feed-body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem 1rem; background: color-mix(in oklab, var(--ad-accent) 6%, transparent); }
.ehna-ad-feed-body strong { display: block; font-size: 1.02rem; font-weight: 800; }
.ehna-ad-feed-body p { margin: .2rem 0 0; font-size: .86rem; opacity: .75; }

/* ticker */
.ehna-ad-ticker-tag { border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; background: color-mix(in oklab, var(--ehna-orange, #f97316) 18%, transparent); color: var(--ehna-orange, #f97316); }

/* popup */
.ehna-ad-pop { position: fixed; inset: 0; z-index: 2900; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 12, 18, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; }
.ehna-ad-pop.is-open { opacity: 1; }
.ehna-ad-pop[hidden], .ehna-ad-sticky[hidden] { display: none; }
.ehna-ad-pop-card { --ad-bg: #fff; --ad-fg: #111827; --ad-accent: var(--ehna-orange, #f97316); position: relative; width: min(26rem, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 26px; background: var(--ad-bg); color: var(--ad-fg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); transform: scale(.96); transition: transform .25s; }
.ehna-ad-pop.is-open .ehna-ad-pop-card { transform: none; }
html[data-theme$="-dark"] .ehna-ad-pop-card:not([style*="--ad-bg"]), body.night-mode .ehna-ad-pop-card:not([style*="--ad-bg"]) { --ad-bg: #1c212b; --ad-fg: #e5e7eb; }
.ehna-ad-pop-card .ehna-ad-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ehna-ad-pop-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.25rem 1.3rem; }
.ehna-ad-pop-body strong { font-size: 1.25rem; font-weight: 900; line-height: 1.3; }
.ehna-ad-pop-body p { margin: 0; font-size: .92rem; opacity: .8; line-height: 1.6; }
.ehna-ad-pop-body .ehna-ad-btn { margin-top: .4rem; padding: .75rem 1rem; font-size: .95rem; }
.ehna-ad-x { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer; font-size: 13px; color: #fff; background: rgba(0, 0, 0, .45); }

/* sticky bar */
.ehna-ad-sticky { --ad-bg: #0f172a; --ad-fg: #fff; --ad-accent: var(--ehna-orange, #f97316); position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 2800; display: flex; align-items: center; gap: .75rem; max-width: 46rem; margin: 0 auto; padding: .6rem .7rem; border-radius: 20px; background: var(--ad-bg); color: var(--ad-fg); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .55); transform: translateY(140%); transition: transform .35s ease; }
.ehna-ad-sticky.is-open { transform: none; }
@media (max-width: 767px) { .ehna-ad-sticky { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.ehna-ad-sticky img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; }
.ehna-ad-sticky-text { display: flex; flex-direction: column; min-width: 0; flex: 1; color: inherit !important; text-decoration: none !important; }
.ehna-ad-sticky-text small { font-size: 10px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.ehna-ad-sticky-text strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ehna-ad-sticky-text span { font-size: .78rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ehna-ad-sticky .ehna-ad-x { position: static; flex: none; background: color-mix(in oklab, var(--ad-fg) 15%, transparent); }

/* ---------- Ehna Pro: premium sponsored card (__ehna_ads.tpl, ads linking to /packages) ---------- */
.ehp .ehp-card { position: relative; display: grid !important; gap: 1rem; margin: 0 .75rem .75rem; padding: 1.35rem 1.3rem 1.2rem; border-radius: 22px; overflow: hidden; isolation: isolate; color: #f6f1ff !important; background: #0f0a24; box-shadow: 0 18px 40px -18px rgba(76, 29, 149, .55), inset 0 0 0 1px rgba(245, 196, 81, .22); transition: transform .25s ease, box-shadow .25s ease; }
.ehp .ehp-card:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -18px rgba(76, 29, 149, .7), inset 0 0 0 1px rgba(245, 196, 81, .4); }
.ehp .ehp-bg { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(120% 90% at 100% 0%, rgba(124, 58, 237, .55) 0%, transparent 55%),
  radial-gradient(90% 80% at 0% 100%, rgba(245, 196, 81, .22) 0%, transparent 55%),
  radial-gradient(60% 50% at 50% 50%, rgba(236, 72, 153, .12) 0%, transparent 70%),
  linear-gradient(160deg, #1a1040 0%, #0f0a24 60%, #0b0719 100%); }
.ehp .ehp-bg::after { content: ""; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(rgba(255, 255, 255, .5) .6px, transparent .6px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%); mask-image: linear-gradient(180deg, #000 0%, transparent 75%); }
.ehp .ehp-spark { position: absolute; color: #f5c451; font-size: .9rem; opacity: .0; animation: ehp-twinkle 3.6s ease-in-out infinite; }
.ehp .ehp-s1 { top: 14%; inset-inline-end: 9%; animation-delay: .2s; }
.ehp .ehp-s2 { top: 44%; inset-inline-end: 24%; font-size: .65rem; animation-delay: 1.4s; }
.ehp .ehp-s3 { top: 20%; inset-inline-end: 38%; font-size: .75rem; color: #e9d5ff; animation-delay: 2.4s; }
@keyframes ehp-twinkle { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .95; transform: scale(1); } }
.ehp .ehp-top { display: flex; align-items: center; gap: .95rem; }
.ehp .ehp-crown { flex-shrink: 0; display: grid; place-items: center; width: 4.1rem; height: 4.1rem; border-radius: 1.2rem; background: linear-gradient(145deg, rgba(245, 196, 81, .2), rgba(124, 58, 237, .25)); box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .35), 0 8px 24px -8px rgba(245, 196, 81, .55); }
.ehp .ehp-crown svg { width: 2.7rem; height: 2.7rem; filter: drop-shadow(0 3px 8px rgba(245, 196, 81, .45)); animation: ehp-float 4s ease-in-out infinite; }
@keyframes ehp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.ehp .ehp-copy { display: grid; gap: .3rem; min-width: 0; }
.ehp .ehp-kicker { justify-self: start; font-size: .68rem; font-weight: 900; letter-spacing: .22em; background: linear-gradient(90deg, #fff3c4, #f5c451 55%, #e7a83a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ehp .ehp-title { font-size: 1.22rem; line-height: 1.35; font-weight: 800; color: #fff; }
.ehp .ehp-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.ehp .ehp-perks > span { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .6rem .7rem; border-radius: .9rem; font-size: .84rem; font-weight: 700; color: #ede9fe; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ehp .ehp-perks i { flex-shrink: 0; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .65rem; color: #f5c451; background: rgba(245, 196, 81, .13); font-style: normal; }
.ehp .ehp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .09); }
.ehp .ehp-plans { display: flex; flex-wrap: wrap; gap: .35rem; }
.ehp .ehp-plans > span { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 800; color: #fff; background: color-mix(in oklab, var(--c) 28%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 60%, transparent); }
.ehp .ehp-plans > span::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.ehp .ehp-buy { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-inline-start: auto; }
.ehp .ehp-from { font-size: .8rem; color: #c4b5fd; }
.ehp .ehp-from b { color: #fff; font-size: .95rem; }
.ehp .ehp-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.25rem; border-radius: 999px; font-style: normal; font-weight: 900; font-size: .92rem; color: #1b1033; background: linear-gradient(135deg, #fff3c4 0%, #f5c451 45%, #e7a83a 100%); box-shadow: 0 10px 24px -10px rgba(245, 196, 81, .85), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .2s ease, box-shadow .2s ease; }
.ehp .ehp-card:hover .ehp-btn { transform: translateX(2px); box-shadow: 0 14px 30px -10px rgba(245, 196, 81, 1), inset 0 1px 0 rgba(255, 255, 255, .6); }
[dir="rtl"] .ehp .ehp-btn svg, html[dir="rtl"] .ehp .ehp-btn svg { transform: scaleX(-1); }
[dir="rtl"] .ehp .ehp-card:hover .ehp-btn { transform: translateX(-2px); }
@media (max-width: 520px) {
  .ehp .ehp-card { margin: 0 .5rem .5rem; padding: 1.1rem 1rem 1rem; }
  .ehp .ehp-title { font-size: 1.05rem; }
  .ehp .ehp-perks > span { font-size: .78rem; padding: .5rem .55rem; }
  .ehp .ehp-buy { width: 100%; justify-content: space-between; margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) { .ehp .ehp-spark, .ehp .ehp-crown svg { animation: none; } .ehp .ehp-spark { opacity: .6; } }

/* /content/themes/giftun/css/ehna-rep.css */
/* Ehna Reputation (profile card, trait picker, leaderboard) — theme tokens only, light & dark */
.ehna-rep-card { position: relative; overflow: hidden; border-radius: 1.75rem; padding: 1.1rem 1.15rem 1rem; margin-bottom: 1.25rem; background: linear-gradient(140deg, color-mix(in oklab, var(--lv) 16%, var(--color-base-100)), var(--color-base-100) 60%); border: 1px solid color-mix(in oklab, var(--lv) 22%, transparent); }
.ehna-rep-card-top { display: flex; align-items: center; gap: .8rem; }
.ehna-rep-badge { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; flex: none; border-radius: 1.1rem; font-size: 1.8rem; background: color-mix(in oklab, var(--lv) 18%, var(--color-base-100)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lv) 35%, transparent); }
.ehna-rep-card-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ehna-rep-card-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-rep-card-level { font-size: 1.2rem; font-weight: 800; color: var(--lv); line-height: 1.2; }
.ehna-rep-card-rank { font-size: .8rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }
.ehna-rep-card-rank b { color: var(--color-base-content); }
.is-up { color: var(--color-success); font-weight: 700; }
.ehna-rep-ring { --p: 100; width: 3.1rem; height: 3.1rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--color-success) calc(var(--p) * 1%), color-mix(in oklab, var(--color-error) 70%, transparent) 0); }
.ehna-rep-ring span { width: 2.45rem; height: 2.45rem; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 800; background: var(--color-base-100); }
.ehna-rep-bar { height: .5rem; margin-top: .9rem; border-radius: 99px; background: color-mix(in oklab, var(--color-base-content) 9%, transparent); overflow: hidden; }
.ehna-rep-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lv), var(--color-primary)); transition: width .5s ease; }
.ehna-rep-next { margin-top: .4rem; font-size: .75rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-rep-known { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .75rem; font-size: .75rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-rep-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem; border-radius: 99px; font-size: .75rem; font-weight: 600; color: var(--color-base-content); background: color-mix(in oklab, var(--tc) 14%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--tc) 30%, transparent); }
.ehna-rep-chip b { color: var(--tc); }
.ehna-rep-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.ehna-rep-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .9rem; border-radius: .85rem; font-size: .82rem; font-weight: 700; background: color-mix(in oklab, var(--color-base-content) 6%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent); color: var(--color-base-content) !important; cursor: pointer; }
.ehna-rep-btn.is-primary { background: var(--color-primary); border-color: transparent; color: var(--color-primary-content) !important; }
.ehna-rep-btn b { padding: 0 .4rem; border-radius: 99px; background: var(--color-error); color: #fff; font-size: .7rem; }

/* picker */
.ehna-rep-who { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: 1.1rem; background: color-mix(in oklab, var(--color-base-content) 4%, var(--color-base-100)); }
.ehna-rep-who img { width: 2.8rem; height: 2.8rem; border-radius: 50%; object-fit: cover; }
.ehna-rep-who-main { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.ehna-rep-level { align-self: flex-start; padding: .1rem .5rem; border-radius: 99px; font-size: .72rem; font-weight: 700; color: var(--lv); background: color-mix(in oklab, var(--lv) 14%, transparent); }
.ehna-rep-who-score { display: flex; flex-direction: column; align-items: center; }
.ehna-rep-who-score b { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.ehna-rep-who-score small { font-size: .7rem; opacity: .6; }
.ehna-rep-quota { margin: .6rem 0 .2rem; font-size: .78rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }
.ehna-rep-sec { display: flex; align-items: center; gap: .4rem; margin: .9rem 0 .5rem; font-size: .85rem; font-weight: 800; }
.ehna-rep-sec small { font-weight: 500; font-size: .72rem; opacity: .6; }
.ehna-rep-sec.is-pos { color: var(--color-success); }
.ehna-rep-sec.is-neg { color: var(--color-error); }
.ehna-rep-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
@media (max-width: 520px) { .ehna-rep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ehna-rep-trait { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem .3rem .45rem; border-radius: 1rem; background: color-mix(in oklab, var(--tc) 9%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--tc) 25%, transparent); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.ehna-rep-trait:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px -8px var(--tc); }
.ehna-rep-trait:disabled { opacity: .38; cursor: not-allowed; }
.ehna-rep-trait.is-busy { opacity: .6; pointer-events: none; }
.ehna-rep-trait.is-done { outline: 2px solid var(--tc); }
.ehna-rep-emoji { font-size: 1.6rem; line-height: 1; }
.ehna-rep-label { font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.15; color: var(--color-base-content); }
.ehna-rep-pts { font-size: .65rem; font-weight: 800; color: var(--tc); }
.ehna-rep-fine { margin-top: .9rem; font-size: .72rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }

/* negatives / appeals */
.ehna-rep-negrow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.ehna-rep-negmain { display: flex; flex-direction: column; flex: 1; min-width: 6rem; }
.ehna-rep-negmain small { opacity: .6; font-size: .72rem; }
.ehna-rep-dispute { display: flex; gap: .4rem; flex: 1 1 14rem; }
.ehna-rep-dispute input { flex: 1; min-width: 0; padding: .45rem .7rem; border-radius: .7rem; font-size: .8rem; background: var(--color-base-100); border: 1px solid color-mix(in oklab, var(--color-base-content) 15%, transparent); color: inherit; }
.ehna-rep-tag { padding: .2rem .55rem; border-radius: 99px; font-size: .7rem; font-weight: 700; background: color-mix(in oklab, var(--color-warning) 20%, transparent); }

/* leaderboard */
.ehna-rep-board { border-radius: 1.75rem; padding: 1.1rem; margin-bottom: 1.5rem; background: var(--color-base-100); }
.ehna-rep-board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.ehna-rep-board-head h2 { font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; gap: .45rem; }
.ehna-rep-tabs { display: inline-flex; padding: .2rem; border-radius: .9rem; background: color-mix(in oklab, var(--color-base-content) 6%, var(--color-base-100)); }
.ehna-rep-tabs a { padding: .35rem .8rem; border-radius: .7rem; font-size: .8rem; font-weight: 700; color: color-mix(in oklab, var(--color-base-content) 65%, transparent) !important; }
.ehna-rep-tabs a.is-active { background: var(--color-base-100); color: var(--color-base-content) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.ehna-rep-filters { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.ehna-rep-filters a { flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 99px; font-size: .75rem; font-weight: 600; border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent); color: var(--color-base-content) !important; }
.ehna-rep-filters a.is-active { background: var(--color-primary); border-color: transparent; color: var(--color-primary-content) !important; }
.ehna-rep-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .4rem; border-radius: 1rem; }
.ehna-rep-row:hover { background: color-mix(in oklab, var(--color-base-content) 4%, transparent); }
.ehna-rep-pos { width: 1.8rem; text-align: center; font-weight: 800; font-size: .9rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-rep-row:nth-child(1) .ehna-rep-pos, .ehna-rep-row:nth-child(2) .ehna-rep-pos, .ehna-rep-row:nth-child(3) .ehna-rep-pos { font-size: 1.25rem; }
.ehna-rep-row img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.ehna-rep-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ehna-rep-row-main strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-base-content); }
.ehna-rep-row-main small { font-size: .72rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-rep-row-pts { font-weight: 800; font-size: .95rem; color: var(--color-primary); white-space: nowrap; }
.ehna-rep-levels { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.ehna-rep-levels span { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 700; color: var(--lv); background: color-mix(in oklab, var(--lv) 12%, transparent); }

/* podium (top 3) */
.ehna-rep-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: .6rem; margin: 1rem 0 .4rem; }
.ehna-rep-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; padding: 1rem .5rem .9rem; border-radius: 1.4rem; text-align: center; color: var(--color-base-content) !important; background: linear-gradient(180deg, color-mix(in oklab, var(--pod) 22%, var(--color-base-100)), var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--pod) 35%, transparent); transition: transform .15s ease; }
.ehna-rep-pod:hover { transform: translateY(-3px); }
.ehna-rep-pod.is-p1 { --pod: #f5b301; padding-top: 1.6rem; padding-bottom: 1.3rem; box-shadow: 0 18px 40px -22px #f5b301; }
.ehna-rep-pod.is-p2 { --pod: #94a3b8; }
.ehna-rep-pod.is-p3 { --pod: #c2733c; }
.ehna-rep-crown { position: absolute; top: -1.05rem; font-size: 1.6rem; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)); }
.ehna-rep-pod-av { position: relative; display: inline-flex; }
.ehna-rep-pod-av img { width: 4.2rem; height: 4.2rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--color-base-100), 0 0 0 6px var(--pod); }
.ehna-rep-pod.is-p1 .ehna-rep-pod-av img { width: 5.4rem; height: 5.4rem; }
.ehna-rep-pod-av b { position: absolute; bottom: -.35rem; left: 50%; transform: translateX(-50%); min-width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 999px; font-size: .8rem; color: #fff; background: var(--pod); box-shadow: 0 0 0 2px var(--color-base-100); }
.ehna-rep-pod strong { margin-top: .45rem; max-width: 100%; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ehna-rep-pod small { font-size: .72rem; font-weight: 700; }
.ehna-rep-pod-pts { margin-top: .15rem; font-size: 1.15rem; font-weight: 900; color: var(--color-base-content); }
.ehna-rep-pod-pts i { font-style: normal; font-size: .7rem; font-weight: 600; opacity: .55; }
@media (max-width: 480px) { .ehna-rep-pod-av img { width: 3.3rem; height: 3.3rem; } .ehna-rep-pod.is-p1 .ehna-rep-pod-av img { width: 4.2rem; height: 4.2rem; } .ehna-rep-pod-pts { font-size: .95rem; } }
/* the rest: compact rows with a bar against the leader */
.ehna-rep-list { display: flex; flex-direction: column; gap: .15rem; margin-top: .5rem; }
.ehna-rep-row { display: grid; grid-template-columns: 2rem 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; }
.ehna-rep-row .ehna-rep-pos { width: auto; font-size: .9rem !important; }
.ehna-rep-row small em { font-style: normal; opacity: .75; }
.ehna-rep-meter { display: block; height: 4px; margin-top: .3rem; border-radius: 99px; background: color-mix(in oklab, var(--color-base-content) 8%, transparent); overflow: hidden; }
.ehna-rep-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 55%, #fff)); }
.ehna-rep-row-pts { padding: .25rem .6rem; border-radius: 999px; font-size: .82rem; background: color-mix(in oklab, var(--color-primary) 12%, transparent); }
.ehna-rep-row.is-more { display: none; }
.ehna-rep-board.show-all .ehna-rep-row.is-more { display: grid; }
.ehna-rep-more { width: 100%; margin-top: .6rem; }

/* /content/themes/giftun/css/ehna-fx.css */
/* Ehna multi-currency: switchers (header language menu, footer, settings) and the dual price (class-ehna-fx.php) */
.ehna-fx-head { margin-top: 0; }
.ehna-lang-menu .ehna-fx-note { margin: .35rem .3rem .5rem; padding-bottom: .6rem; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.ehna-fx-head i { width: 1rem; text-align: center; }
.ehna-fx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.ehna-fx-item { display: flex; min-width: 0; align-items: center; gap: .45rem; padding: .5rem .6rem; border-radius: .75rem; font-size: .84rem; color: var(--color-base-content) !important; text-decoration: none; }
.ehna-fx-item:hover, .ehna-fx-item:focus-visible { background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }
.ehna-fx-item.is-active { background: color-mix(in oklab, var(--ehna-orange, var(--color-primary)) 12%, transparent); color: var(--ehna-orange, var(--color-primary)) !important; font-weight: 600; }
.ehna-fx-item.is-active .ehna-fx-name { color: inherit; }
.ehna-fx-flag { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.ehna-fx-code { font-weight: 700; font-size: .78rem; letter-spacing: .02em; flex-shrink: 0; unicode-bidi: isolate; direction: ltr; }
.ehna-fx-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in oklab, currentColor 70%, transparent); font-size: .76rem; }
.ehna-fx-note { white-space: normal; margin: .45rem .3rem .2rem; font-size: .72rem; line-height: 1.45; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-fx-warn { margin: .6rem 0 0; padding: .55rem .75rem; border-radius: .9rem; font-size: .8rem; background: color-mix(in oklab, var(--color-warning, #f59e0b) 14%, transparent); color: var(--color-base-content); }

/* footer */
.ehna-fx-footer-btn { display: inline-flex; min-height: 1.75rem; align-items: center; gap: .35rem; padding: 0 .55rem; border: 0; border-radius: var(--radius-field, .5rem); background: var(--color-base-200); color: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; line-height: 1.2; }
.ehna-fx-footer-btn:hover { background: var(--color-base-300); }
.ehna-fx-footer-btn.is-overlay { background: rgb(255 255 255 / .15); backdrop-filter: blur(4px); }
.ehna-fx-footer-btn.is-overlay:hover { background: rgb(255 255 255 / .25); }
.ehna-fx-footer-btn i { font-size: .8rem; opacity: .7; }
.ehna-fx-footer-menu { width: 15rem; max-height: 20rem; overflow-y: auto; padding: .3rem; border-radius: 1rem; border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent); background: var(--color-base-100); box-shadow: 0 8px 24px rgb(0 0 0 / .1); inset-inline-start: 0; top: 0; z-index: 60; }

/* settings card */
.ehna-fx-card { padding: 1.25rem; border-radius: 1.25rem; border: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent); background: var(--color-base-100); box-shadow: none; }
.ehna-fx-card-head { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1rem; }
.ehna-fx-icon { --tone: var(--color-primary); display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: .9rem; background: color-mix(in oklab, var(--tone) 14%, transparent); color: var(--tone); font-size: 1.05rem; }
.ehna-fx-title { margin: 0; font-size: 1rem; font-weight: 700; }
.ehna-fx-sub { margin: .15rem 0 0; font-size: .82rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-fx-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.ehna-fx-chip { display: flex; min-width: 0; align-items: center; gap: .45rem; padding: .6rem .75rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent); color: var(--color-base-content) !important; font-size: .84rem; text-decoration: none; }
.ehna-fx-chip:hover { border-color: color-mix(in oklab, var(--color-primary) 45%, transparent); }
.ehna-fx-chip.is-active { border-color: var(--ehna-orange, var(--color-primary)); background: color-mix(in oklab, var(--ehna-orange, var(--color-primary)) 10%, transparent); color: var(--ehna-orange, var(--color-primary)) !important; font-weight: 600; }
.ehna-fx-card .ehna-fx-note { margin: .9rem 0 0; font-size: .78rem; }

/* dual price at checkout: EGP first, the member's currency as "≈" under it */
.ehna-fx-dual { display: inline-flex; flex-direction: column; line-height: 1.2; }
.ehna-fx-alt { font-size: .78em; font-weight: 500; color: color-mix(in oklab, currentColor 62%, transparent); }

@media (max-width: 420px) {
  .ehna-fx-grid { grid-template-columns: 1fr 1fr; }
  .ehna-fx-chips { grid-template-columns: 1fr 1fr; }
}

/* /content/themes/giftun/css/ehna-growth.css */
/* =====================================================================
   Ehna Growth (Giftun): travel guides, share bar, invite page, admin screens.
   City Guide design language: mobile first, RTL (logical properties), light/dark,
   follows the member's theme colour (var(--color-primary))
   ===================================================================== */
.eg, .ega { --eg-radius: 1.5rem; --eg-line: color-mix(in oklab, var(--color-base-content) 9%, transparent); --eg-soft: color-mix(in oklab, var(--color-base-content) 5%, var(--color-base-100)); --eg-muted: color-mix(in oklab, var(--color-base-content) 62%, transparent); display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.eg [hidden], .ega [hidden] { display: none !important; }
.eg a, .ega a { color: inherit; }
.eg h1, .eg h2, .eg h3, .ega h1, .ega h2, .ega h3 { color: var(--color-base-content); }
.eg-muted { color: var(--eg-muted); font-size: .85rem; }
.eg-block { background: var(--color-base-100); border: 1px solid var(--eg-line); border-radius: var(--eg-radius); padding: 1rem; min-width: 0; }
.eg-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.eg-head h2 { font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.eg-head h2 > i { color: var(--color-primary); }
.eg-more { font-size: .82rem; font-weight: 700; color: var(--color-primary) !important; white-space: nowrap; }

/* hero */
.eg-hero { position: relative; overflow: hidden; border-radius: var(--eg-radius); padding: 1.6rem 1.1rem 1.25rem; color: #fff; background: radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--color-primary) 80%, #000), color-mix(in oklab, var(--color-primary) 40%, #0b0f1a)); background-size: cover; background-position: center; }
.eg-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .68)); pointer-events: none; }
.eg-hero > * { position: relative; }
.eg-hero > .eg-shade { position: absolute; }
.eg-kicker { align-self: flex-start; width: fit-content; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .26); }
.eg-hero h1 { color: #fff; font-size: 1.7rem; font-weight: 900; line-height: 1.18; margin-top: .6rem; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); overflow-wrap: anywhere; }
.eg-hero p { margin-top: .4rem; font-size: .9rem; opacity: .92; max-width: 38rem; }
.eg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .75rem; opacity: .9; margin-bottom: .55rem; }
.eg-crumbs a { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
.eg-crumbs i { font-size: .6rem; opacity: .7; }
html[dir="rtl"] .eg-crumbs i, [dir="rtl"] .eg-crumbs i { transform: scaleX(-1); }
.eg-stats { align-self: flex-start; display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.eg-stats span { display: flex; flex-direction: column; padding: .4rem .7rem; border-radius: .9rem; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); line-height: 1.25; min-width: 0; }
.eg-stats b { font-size: .95rem; font-weight: 800; }
.eg-stats small { font-size: .66rem; opacity: .85; }

.eg-banner { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .7rem .9rem; border-radius: 1rem; font-size: .85rem; font-weight: 600; border: 1px solid var(--eg-line); background: var(--eg-soft); }
.eg-banner.is-warn { background: color-mix(in oklab, #f59e0b 14%, var(--color-base-100)); border-color: color-mix(in oklab, #f59e0b 40%, transparent); }
.eg-banner.is-info { background: color-mix(in oklab, #0ea5e9 12%, var(--color-base-100)); border-color: color-mix(in oklab, #0ea5e9 35%, transparent); }
.eg-banner a { margin-inline-start: auto; font-weight: 800; color: var(--color-primary) !important; }

.eg-intro p { font-size: .98rem; line-height: 1.8; }

/* tiles (index) */
.eg-tiles { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.eg-tile { display: flex; align-items: center; gap: .75rem; padding: .7rem; border-radius: 1.1rem; background: var(--eg-soft); border: 1px solid transparent; transition: border-color .15s, transform .15s; min-width: 0; }
.eg-tile:hover { border-color: color-mix(in oklab, var(--color-primary) 40%, transparent); }
.eg-tile-ic { width: 2.6rem; height: 2.6rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: .85rem; color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 14%, var(--color-base-100)); font-size: 1.1rem; }
.eg-tile-tx { display: flex; flex-direction: column; min-width: 0; }
.eg-tile-tx b { font-size: .92rem; font-weight: 800; overflow-wrap: anywhere; }
.eg-tile-tx small { color: var(--eg-muted); font-size: .75rem; }

/* items grid */
.eg-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.eg-card { display: flex; flex-direction: column; border-radius: 1.25rem; overflow: hidden; background: var(--color-base-100); border: 1px solid var(--eg-line); transition: border-color .15s, transform .15s; min-width: 0; }
.eg-card:hover { border-color: color-mix(in oklab, var(--color-primary) 40%, transparent); transform: translateY(-2px); }
.eg-card-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--eg-soft); color: color-mix(in oklab, var(--color-primary) 60%, transparent); font-size: 2rem; overflow: hidden; }
.eg-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eg-card-body { display: flex; flex-direction: column; gap: .25rem; padding: .75rem .85rem .85rem; min-width: 0; }
.eg-card-body strong { font-size: .95rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eg-card-body small { color: var(--eg-muted); font-size: .76rem; overflow-wrap: anywhere; }
.eg-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .25rem; flex-wrap: wrap; }
.eg-price { font-weight: 800; font-size: .88rem; color: var(--color-primary); }
.eg-rate { font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; gap: .25rem; }
.eg-rate i { color: #f59e0b; }
.eg-rate small { color: var(--eg-muted); }

/* chips */
.eg-chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.eg-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--eg-soft); border: 1px solid transparent; color: var(--color-base-content) !important; }
a.eg-chip:hover { border-color: color-mix(in oklab, var(--color-primary) 40%, transparent); }
.eg-chip i { color: var(--color-primary); }
.eg-chip.is-static b { font-weight: 800; }

/* weather */
.eg-weather { display: flex; gap: .6rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
.eg-weather::-webkit-scrollbar { display: none; }
.eg-w-now, .eg-w-day { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .6rem .8rem; border-radius: 1rem; background: var(--eg-soft); flex-shrink: 0; min-width: 4.6rem; text-align: center; }
.eg-w-now { background: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100)); min-width: 6rem; }
.eg-w-ic { font-size: 1.6rem; }
.eg-w-now b { font-size: 1.3rem; }
.eg-w-now small, .eg-w-day small { font-size: .7rem; color: var(--eg-muted); }
.eg-w-day span { font-size: 1.2rem; }

/* faq / tips */
.eg-faq { display: flex; flex-direction: column; gap: .5rem; }
.eg-faq details { border: 1px solid var(--eg-line); border-radius: 1rem; background: var(--eg-soft); padding: 0 .9rem; }
.eg-faq summary { cursor: pointer; font-weight: 800; font-size: .92rem; padding: .8rem 0; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.eg-faq summary::-webkit-details-marker { display: none; }
.eg-faq summary::after { content: "+"; font-size: 1.2rem; color: var(--color-primary); flex-shrink: 0; }
.eg-faq details[open] summary::after { content: "−"; }
.eg-faq details p { padding-bottom: .85rem; font-size: .9rem; line-height: 1.75; color: var(--eg-muted); }
.eg-tips { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.eg-tips li { position: relative; padding-inline-start: 1.6rem; font-size: .92rem; line-height: 1.7; }
.eg-tips li::before { content: "\f00c"; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "FontAwesome"; font-weight: 900; position: absolute; inset-inline-start: 0; top: .15rem; color: var(--color-primary); font-size: .8rem; }

/* buttons / cta / empty */
.eg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.5rem; padding: .45rem 1rem; border-radius: .9rem; font-weight: 800; font-size: .85rem; background: var(--eg-soft); color: var(--color-base-content) !important; border: 1px solid var(--eg-line); cursor: pointer; }
.eg-btn.is-primary { background: var(--color-primary); color: var(--color-primary-content) !important; border-color: transparent; }
.eg-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.1rem; border-radius: var(--eg-radius); background: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--color-primary) 30%, transparent); }
.eg-cta p { font-size: .85rem; color: var(--eg-muted); }
.eg-empty { text-align: center; font-size: .9rem; padding: 2rem 1rem; border: 1px dashed var(--eg-line); border-radius: 1.25rem; color: var(--eg-muted); display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.eg-empty > i { font-size: 2rem; color: color-mix(in oklab, var(--color-primary) 60%, transparent); }

/* invite */
.eg-copy { display: flex; gap: .5rem; flex-wrap: wrap; }
.eg-copy input { flex: 1 1 14rem; min-width: 0; height: 2.6rem; padding-inline: .8rem; border-radius: .9rem; border: 1px solid var(--eg-line); background: var(--eg-soft); color: var(--color-base-content); font-size: .82rem; }
.eg-board { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.eg-board li { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: 1rem; background: var(--eg-soft); min-width: 0; }
.eg-board li.is-me { background: color-mix(in oklab, var(--color-primary) 14%, var(--color-base-100)); }
.eg-board img { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.eg-board a { flex: 1; min-width: 0; font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eg-board b small { font-weight: 600; opacity: .6; }
.eg-rank { width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .75rem; font-weight: 800; background: color-mix(in oklab, var(--color-primary) 18%, var(--color-base-100)); color: var(--color-primary); flex-shrink: 0; }

/* share bar */
.egs { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .6rem .75rem; border-radius: 1.1rem; background: var(--color-base-100); border: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent); margin-block: .75rem; }
.egs-label { font-size: .78rem; font-weight: 800; display: inline-flex; align-items: center; gap: .4rem; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); margin-inline-end: .2rem; }
.egs-btn { --tone: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 2.3rem; min-width: 2.3rem; padding-inline: .7rem; border-radius: 999px; font-size: .78rem; font-weight: 800; cursor: pointer; border: 1px solid transparent; background: color-mix(in oklab, var(--tone) 14%, var(--color-base-100)); color: var(--color-base-content) !important; transition: transform .12s, border-color .15s; }
.egs-btn i { color: var(--tone); font-size: 1rem; }
.egs-btn:hover { border-color: color-mix(in oklab, var(--tone) 50%, transparent); }
.egs-btn:active { transform: scale(.96); }
.egs-btn.is-whatsapp { --tone: #16a34a; }
.egs-btn.is-facebook { --tone: #2563eb; }
.egs-btn.is-x { --tone: var(--color-base-content); }
.egs-btn.is-telegram { --tone: #0284c7; }
.egs-btn.is-done { background: color-mix(in oklab, #16a34a 18%, var(--color-base-100)); }
@media (max-width: 480px) { .egs-btn span { display: none; } .egs-btn.is-copy span { display: inline; } .egs-btn { padding-inline: .6rem; } }

@media (min-width: 640px) {
  .eg-tiles { grid-template-columns: repeat(2, 1fr); }
  .eg-grid { grid-template-columns: repeat(2, 1fr); }
  .eg-hero { padding: 2.2rem 1.8rem 1.6rem; }
  .eg-hero h1 { font-size: 2.2rem; }
}
@media (min-width: 1024px) {
  .eg-tiles { grid-template-columns: repeat(3, 1fr); }
  .eg-grid { grid-template-columns: repeat(3, 1fr); }
  .eg-hero { min-height: 16rem; display: flex; flex-direction: column; justify-content: flex-end; }
}

/* ============================ admin ============================ */
.ega-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.ega-head h1 { font-size: 1.4rem; font-weight: 900; display: flex; align-items: center; gap: .5rem; }
.ega-head h1 > i { color: var(--color-primary); }
.ega-tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
.ega-tabs::-webkit-scrollbar { display: none; }
.ega-tabs a { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px; font-weight: 700; font-size: .82rem; background: var(--eg-soft); color: var(--color-base-content) !important; border: 1px solid transparent; text-decoration: none; }
.ega-tabs a.is-active { background: color-mix(in oklab, var(--color-primary) 16%, var(--color-base-100)); border-color: color-mix(in oklab, var(--color-primary) 45%, transparent); }
.ega-tabs em { font-style: normal; font-size: .7rem; background: var(--color-primary); color: var(--color-primary-content); border-radius: 999px; padding: 0 .4rem; }
.ega-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.ega-stat { --tone: var(--color-primary); display: flex; flex-direction: column; gap: .1rem; padding: .8rem .9rem; border-radius: 1.1rem; background: var(--color-base-100); border: 1px solid var(--eg-line); min-width: 0; }
.ega-stat i { color: var(--tone); font-size: 1.1rem; }
.ega-stat b { font-size: 1.35rem; font-weight: 900; line-height: 1.1; }
.ega-stat small { color: var(--eg-muted); font-size: .74rem; }
.ega-panel { background: var(--color-base-100); border: 1px solid var(--eg-line); border-radius: 1.25rem; padding: 1rem; min-width: 0; }
.ega-panel h2 { font-size: 1rem; font-weight: 800; margin-bottom: .7rem; display: flex; align-items: center; gap: .5rem; }
.ega-panel h2 i { color: var(--color-primary); }
.ega-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.ega-table th, .ega-table td { text-align: start; padding: .5rem .5rem; border-bottom: 1px solid var(--eg-line); vertical-align: middle; }
.ega-table th { font-size: .72rem; color: var(--eg-muted); font-weight: 700; }
.ega-scroll { overflow-x: auto; }
.ega-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.1rem; padding: .3rem .75rem; border-radius: .75rem; font-weight: 700; font-size: .78rem; cursor: pointer; background: var(--eg-soft); color: var(--color-base-content) !important; border: 1px solid var(--eg-line); text-decoration: none; }
.ega-btn.is-primary { background: var(--color-primary); color: var(--color-primary-content) !important; border-color: transparent; }
.ega-btn.is-success { background: #16a34a; color: #fff !important; border-color: transparent; }
.ega-btn.is-danger { background: color-mix(in oklab, #ef4444 12%, var(--color-base-100)); color: #dc2626 !important; border-color: color-mix(in oklab, #ef4444 30%, transparent); }
.ega-btn.is-busy, .ega-btn[disabled] { opacity: .55; pointer-events: none; }
.ega-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.ega-badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 800; background: var(--eg-soft); }
.ega-badge.is-pending { background: color-mix(in oklab, #f59e0b 18%, var(--color-base-100)); }
.ega-badge.is-approved { background: color-mix(in oklab, #0ea5e9 18%, var(--color-base-100)); }
.ega-badge.is-published, .ega-badge.is-ok { background: color-mix(in oklab, #16a34a 18%, var(--color-base-100)); }
.ega-badge.is-rejected, .ega-badge.is-bad { background: color-mix(in oklab, #ef4444 16%, var(--color-base-100)); }
.ega-badge.is-warn { background: color-mix(in oklab, #f59e0b 18%, var(--color-base-100)); }
.ega-form { display: flex; flex-direction: column; gap: .75rem; }
.ega-field { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 700; min-width: 0; }
.ega-field input[type=text], .ega-field input[type=number], .ega-field input[type=password], .ega-field input[type=datetime-local], .ega-field select, .ega-field textarea { width: 100%; padding: .55rem .7rem; border-radius: .8rem; border: 1px solid var(--eg-line); background: var(--eg-soft); color: var(--color-base-content); font-size: .85rem; font-weight: 500; }
.ega-field textarea { min-height: 6rem; line-height: 1.6; resize: vertical; }
.ega-field small { font-weight: 500; color: var(--eg-muted); }
.ega-fields { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.ega-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .85rem; font-weight: 600; }
.ega-check small { color: var(--eg-muted); font-weight: 500; display: block; }
.ega-msg { padding: .6rem .8rem; border-radius: .9rem; font-size: .85rem; font-weight: 600; background: color-mix(in oklab, #16a34a 14%, var(--color-base-100)); }
.ega-msg.is-error { background: color-mix(in oklab, #ef4444 14%, var(--color-base-100)); }
.ega-check-row { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid var(--eg-line); }
.ega-check-row:last-child { border-bottom: 0; }
.ega-check-row > i { margin-top: .15rem; width: 1.4rem; text-align: center; }
.ega-check-row .is-ok { color: #16a34a; }
.ega-check-row .is-bad { color: #dc2626; }
.ega-check-row .is-warn { color: #d97706; }
.ega-check-row p { font-size: .8rem; color: var(--eg-muted); margin-top: .1rem; overflow-wrap: anywhere; }
.ega-post { border: 1px solid var(--eg-line); border-radius: 1rem; padding: .85rem; background: var(--eg-soft); display: flex; flex-direction: column; gap: .5rem; }
.ega-post pre, .ega-post .ega-txt { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: .85rem; line-height: 1.6; background: var(--color-base-100); border: 1px solid var(--eg-line); border-radius: .8rem; padding: .6rem .75rem; margin: 0; }
.ega-post h3 { font-size: .85rem; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ega-two { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .ega-stats { grid-template-columns: repeat(4, 1fr); } .ega-fields { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ega-two { grid-template-columns: 1fr 1fr; } }

/* /content/themes/giftun/css/ehna-hub.css */
/* =====================================================================
   Ehna Hub (Giftun): the Ehna modules inside directory, search, profile, map and settings.
   Same language as the City Guide: rounded cards, soft borders, tinted icon squares.
   Mobile first, RTL safe (logical properties), light + dark follow the theme colour.
   ===================================================================== */
.eh-chips, .eh-block, .eh-card, .eh-map-wrap, .eh-nt { --eh-line: color-mix(in oklab, var(--color-base-content) 9%, transparent); --eh-soft: color-mix(in oklab, var(--color-base-content) 5%, var(--color-base-100)); --tone: var(--color-primary); }

/* ---------- chips ---------- */
.eh-chips { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
.eh-chips::-webkit-scrollbar { display: none; }
.eh-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--color-base-100); border: 1px solid var(--eh-line); color: var(--color-base-content) !important; transition: border-color .15s, background .15s; }
.eh-chip i { color: var(--color-primary); }
.eh-chip:hover { border-color: color-mix(in oklab, var(--color-primary) 40%, transparent); }
.eh-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-content) !important; }
.eh-chip.is-active i { color: inherit; }
.eh-chip b { font-weight: 800; opacity: .6; }

/* ---------- result card (search, directory) ---------- */
.eh-card-wrap { list-style: none; min-width: 0; }
.eh-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 1.25rem; background: var(--color-base-100); border: 1px solid var(--eh-line); color: var(--color-base-content) !important; transition: transform .15s, box-shadow .15s; }
.eh-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .45); }
.eh-card-media { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; background: linear-gradient(135deg, var(--tone), color-mix(in oklab, var(--tone) 55%, #38bdf8)); }
.eh-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eh-card-badge { position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); }
.eh-card-body { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .85rem .85rem; min-width: 0; }
.eh-card-title { font-size: .92rem; font-weight: 800; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eh-card-sub { font-size: .76rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eh-card-price { font-size: .86rem; font-weight: 800; color: var(--color-primary); }

/* ---------- profile block ---------- */
.eh-block { background: var(--color-base-100); border: 1px solid var(--eh-line); border-radius: 1.5rem; padding: 1rem; margin-bottom: 1rem; }
.eh-block-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.eh-block-head h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 800; min-width: 0; }
.eh-block-head h3 i { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: .7rem; color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 12%, transparent); font-size: .9rem; }
.eh-block-more { font-size: .8rem; font-weight: 700; color: var(--color-primary) !important; white-space: nowrap; }
.eh-block-note { font-size: .78rem; margin: -.35rem 0 .6rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.eh-list { display: flex; flex-direction: column; gap: .3rem; }
.eh-item { display: flex; align-items: center; gap: .7rem; padding: .45rem; border-radius: 1rem; color: var(--color-base-content) !important; transition: background .15s; }
.eh-item:hover { background: var(--eh-soft); }
.eh-item > img, .eh-item-ic { width: 3rem; height: 3rem; flex-shrink: 0; border-radius: .85rem; object-fit: cover; }
.eh-item-ic { display: flex; align-items: center; justify-content: center; color: var(--tone); background: color-mix(in oklab, var(--tone) 14%, transparent); }
.eh-item-text { min-width: 0; display: flex; flex-direction: column; }
.eh-item-text strong { font-size: .86rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eh-item-text small { font-size: .74rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.eh-stat { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .65rem .3rem; border-radius: 1rem; background: var(--eh-soft); text-align: center; }
.eh-stat i { color: var(--color-primary); }
.eh-stat b { font-size: 1.15rem; font-weight: 900; line-height: 1; }
.eh-stat small { font-size: .68rem; font-weight: 700; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }

/* ---------- places map (Tourism > Map) ---------- */
.eh-map-wrap { display: flex; flex-direction: column; gap: .85rem; }
.eh-map { position: relative; height: 62vh; min-height: 22rem; border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--eh-line); background: var(--eh-soft); z-index: 0; }
.eh-map-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.eh-map-near { display: inline-flex; align-items: center; gap: .45rem; height: 2.4rem; padding-inline: 1rem; border: 0; border-radius: 999px; font-size: .82rem; font-weight: 700; cursor: pointer; background: var(--color-primary); color: var(--color-primary-content); }
.eh-map-near[disabled] { opacity: .6; cursor: progress; }
.eh-map-msg { font-size: .8rem; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); }
.eh-map-list:empty { display: none; }
.eh-map-list { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.eh-map-pin { width: 1.7rem; height: 1.7rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.eh-map-me { width: 1rem; height: 1rem; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(37, 99, 235, .25); }
.eh-map-pop { min-width: 9rem; line-height: 1.4; }
.eh-map-pop a { font-weight: 800; }
.eh-map-pop small { display: block; opacity: .7; }

/* ---------- notification settings ---------- */
.eh-nt { display: grid; gap: .6rem; grid-template-columns: 1fr; }
.eh-nt-row { display: flex; align-items: center; gap: .85rem; padding: .8rem .9rem; border-radius: 1rem; border: 1px solid var(--eh-line); background: var(--color-base-100); cursor: pointer; }
.eh-nt-row:has(input:checked) { border-color: color-mix(in oklab, var(--color-primary) 45%, transparent); background: color-mix(in oklab, var(--color-primary) 6%, var(--color-base-100)); }
.eh-nt-ic { display: inline-flex; width: 2.5rem; height: 2.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: .8rem; background: var(--eh-soft); color: var(--color-primary); }
.eh-nt-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.eh-nt-text strong { font-size: .88rem; font-weight: 700; }
.eh-nt-text small { font-size: .76rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }

@media (min-width: 640px) {
  .eh-nt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eh-map-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html[data-theme$="-dark"] .eh-card:hover, body.night-mode .eh-card:hover { box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9); }

/* /content/themes/giftun/css/ehna-tourism.css */
/* Ehna Tourism (سياحة) */
/* classic (default) theme has no Giftun color tokens */
html:not([data-theme]) .ehna-t { --color-base-100: #fff; --color-base-content: #1f2937; --color-error: #dc2626; --color-success: #16a34a; --ehna-orange-600: color-mix(in oklab, var(--ehna-orange, #ff6a00) 85%, #000); --ehna-sea: #0ea5e9; --ehna-sky: #38bdf8; color: var(--color-base-content); }
html:not([data-theme]) body.night-mode .ehna-t { --color-base-100: #1e2330; --color-base-content: #e5e7eb; }
html:not([data-theme]) .ehna-t-search input, html:not([data-theme]) .ehna-t-search select { background-color: transparent !important; box-shadow: none !important; border: 0 !important; color: inherit !important; }
html:not([data-theme]) .ehna-t-search select { background-color: var(--t-soft) !important; }
html:not([data-theme]) .ehna-t-search button { border: 0; }
.ehna-t { --t-line: color-mix(in oklab, var(--color-base-content) 9%, transparent); --t-soft: color-mix(in oklab, var(--color-base-content) 4%, var(--color-base-100)); --t-muted: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-t h1, .ehna-t h2, .ehna-t h3 { font-weight: 800; letter-spacing: -.01em; }
.ehna-t-muted { color: var(--t-muted); font-size: .9rem; }
.ehna-t-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem 1rem; border-radius: .9rem; font-size: .875rem; font-weight: 700; background: var(--t-soft); border: 1px solid var(--t-line); color: var(--color-base-content) !important; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.ehna-t-btn:hover { background: color-mix(in oklab, var(--color-base-content) 7%, var(--color-base-100)); }
.ehna-t-btn:active { transform: scale(.97); }
.ehna-t-btn.is-primary { background: var(--ehna-orange); border-color: transparent; color: var(--ehna-on-accent, #fff) !important; }
.ehna-t-btn.is-primary:hover { background: var(--ehna-orange-600); }
.ehna-t-btn.is-danger { color: var(--color-error) !important; }
.ehna-t-btn.is-block { width: 100%; }
.ehna-t-btn.is-busy { opacity: .6; pointer-events: none; }

/* hero */
.ehna-t-hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.6rem 1.4rem; border-radius: 1.6rem; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--ehna-sky, #38bdf8) 35%, transparent), transparent 55%), linear-gradient(135deg, color-mix(in oklab, var(--ehna-sea, #0891b2) 85%, #022c3a) 0%, color-mix(in oklab, var(--ehna-orange) 70%, #7c2d12) 100%); }
.ehna-t-hero::after { content: ""; position: absolute; inset: auto -10% -40% auto; width: 22rem; height: 22rem; border-radius: 999px; background: color-mix(in oklab, #fff 10%, transparent); filter: blur(10px); pointer-events: none; }
.ehna-t-hero-text { position: relative; z-index: 1; max-width: 46rem; }
.ehna-t-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .78rem; font-weight: 800; }
.ehna-t-hero h1 { margin: .6rem 0 .3rem; font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1.15; }
.ehna-t-hero p { opacity: .88; font-size: .95rem; }
.ehna-t-search { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; padding: .4rem; border-radius: 1.1rem; background: var(--color-base-100); color: var(--color-base-content); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .5); }
.ehna-t-search > i { padding-inline-start: .55rem; color: var(--t-muted); }
.ehna-t-search input { flex: 1 1 12rem; min-width: 0; border: 0; outline: 0; background: none; padding: .55rem .3rem; font-size: .95rem; color: inherit; }
.ehna-t-search select { border: 0; background: var(--t-soft); border-radius: .75rem; padding: .55rem .6rem; font-size: .85rem; color: inherit; max-width: 11rem; }
.ehna-t-search button { padding: .6rem 1.1rem; border-radius: .8rem; background: var(--ehna-orange); color: var(--ehna-on-accent, #fff); font-weight: 800; }
.ehna-t-hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .45rem; }
.ehna-t-hero-actions .ehna-t-btn:not(.is-primary) { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); color: #fff !important; }

/* categories */
.ehna-t-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); gap: .55rem; margin: 1.1rem 0 .4rem; }
.ehna-t-cat { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .8rem .4rem .7rem; border-radius: 1.1rem; background: var(--color-base-100); border: 1px solid var(--t-line); color: var(--color-base-content) !important; text-align: center; transition: transform .12s ease, border-color .12s ease; }
.ehna-t-cat:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--tone) 45%, transparent); }
.ehna-t-cat > span { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; background: color-mix(in oklab, var(--tone) 14%, transparent); color: var(--tone); font-size: 1.15rem; }
.ehna-t-cat b { font-size: .78rem; line-height: 1.2; }
.ehna-t-cat small { font-size: .68rem; color: var(--t-muted); }
.ehna-t-cat.is-active { border-color: var(--tone); background: color-mix(in oklab, var(--tone) 8%, var(--color-base-100)); }
@media (max-width: 639.98px) {
  .ehna-t-cats { display: flex; overflow-x: auto; scrollbar-width: none; }
  .ehna-t-cats::-webkit-scrollbar { display: none; }
  .ehna-t-cat { flex: 0 0 6.6rem; }
}

/* cities */
.ehna-t-cities { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .4rem 0 .2rem; }
.ehna-t-cities::-webkit-scrollbar { display: none; }
.ehna-t-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: 999px; background: var(--color-base-100); border: 1px solid var(--t-line); font-size: .82rem; font-weight: 600; color: var(--color-base-content) !important; white-space: nowrap; }
.ehna-t-chip i { color: var(--ehna-orange); }
.ehna-t-chip small { color: var(--t-muted); }
.ehna-t-chip.is-active { background: color-mix(in oklab, var(--ehna-orange) 13%, var(--color-base-100)); border-color: color-mix(in oklab, var(--ehna-orange) 40%, transparent); }

/* sections & cards */
.ehna-t-section { margin-top: 1.5rem; }
.ehna-t-section h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; margin-bottom: .8rem; }
.ehna-t-section h2 i { color: var(--ehna-orange); }
.ehna-t-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.ehna-t-section-head h2 { margin: 0; }
.ehna-t-sort { display: flex; flex-wrap: wrap; gap: .3rem; }
.ehna-t-sort a { padding: .35rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--t-muted) !important; background: var(--t-soft); }
.ehna-t-sort a.is-active { background: var(--ehna-orange); color: var(--ehna-on-accent, #fff) !important; }
.ehna-t-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.ehna-t-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 17rem); gap: 1rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .3rem; }
.ehna-t-row::-webkit-scrollbar { display: none; }
@media (max-width: 639.98px) {
  .ehna-t-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .ehna-t-row { grid-auto-columns: 72%; }
}
.ehna-t-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.2rem; background: var(--color-base-100); border: 1px solid var(--t-line); color: var(--color-base-content) !important; transition: transform .15s ease, box-shadow .15s ease; }
.ehna-t-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .45); }
.ehna-t-card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--t-soft); overflow: hidden; }
.ehna-t-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ehna-t-card:hover .ehna-t-card-media img { transform: scale(1.05); }
.ehna-t-card-cat { position: absolute; top: .55rem; inset-inline-start: .55rem; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 800; background: rgba(255, 255, 255, .92); color: var(--tone); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3); }
.ehna-t-card-cat.is-inline { position: static; background: color-mix(in oklab, var(--tone) 13%, transparent); box-shadow: none; font-size: .78rem; }
.ehna-t-card-feat { position: absolute; top: .55rem; inset-inline-end: .55rem; display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .55rem; border-radius: 999px; background: #f59e0b; color: #fff; font-size: .68rem; font-weight: 800; }
.ehna-t-card-body { display: flex; flex: 1; flex-direction: column; gap: .3rem; padding: .75rem .8rem .8rem; }
.ehna-t-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; line-height: 1.3; }
.ehna-t-card-meta { font-size: .76rem; color: var(--t-muted); }
.ehna-t-card-meta i { color: var(--ehna-orange); margin-inline-end: .2rem; }
.ehna-t-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: auto; padding-top: .3rem; }
.ehna-t-card-price b { font-size: .95rem; }
.ehna-t-card-price small, .ehna-t-card-rate small { font-size: .7rem; color: var(--t-muted); }
.ehna-t-card-rate { font-size: .8rem; font-weight: 700; }
.ehna-t-card-rate i { color: #f59e0b; }
.ehna-t-empty { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2.2rem 1rem; border-radius: 1.2rem; border: 1px dashed var(--t-line); color: var(--t-muted); text-align: center; }
.ehna-t-empty > i { font-size: 2rem; color: var(--ehna-orange); }

/* listing page */
.ehna-t-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .7rem; font-size: .82rem; color: var(--t-muted); }
.ehna-t-crumbs a { color: var(--t-muted) !important; }
.ehna-t-crumbs a:hover { color: var(--ehna-orange) !important; }
.ehna-t-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 13rem 13rem; gap: .45rem; overflow: hidden; border-radius: 1.4rem; }
.ehna-t-gallery a { overflow: hidden; background: var(--t-soft); }
.ehna-t-gallery img { width: 100%; height: 100%; object-fit: cover; }
.ehna-t-gallery .ehna-t-g0 { grid-row: span 2; }
.ehna-t-gallery.is-few { grid-template-columns: 1fr; grid-template-rows: 22rem; }
.ehna-t-gallery.is-few .ehna-t-g0 { grid-row: auto; }
.ehna-t-gallery.is-few a:not(.ehna-t-g0) { display: none; }
@media (max-width: 767.98px) {
  .ehna-t-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 15rem 7rem; border-radius: 1rem; }
  .ehna-t-gallery .ehna-t-g0 { grid-column: span 2; grid-row: auto; }
  .ehna-t-gallery .ehna-t-g3, .ehna-t-gallery .ehna-t-g4 { display: none; }
  .ehna-t-gallery.is-few { grid-template-rows: 15rem; }
}
.ehna-t-credit { margin: .35rem .2rem 0; font-size: .7rem; color: var(--t-muted); }
.ehna-t-detail { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; margin-top: 1.2rem; }
@media (max-width: 1023.98px) { .ehna-t-detail { grid-template-columns: minmax(0, 1fr); } }
.ehna-t-title { margin: .55rem 0 .45rem; font-size: clamp(1.35rem, 3.5vw, 2rem); line-height: 1.2; }
.ehna-t-facts { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .85rem; color: var(--t-muted); }
.ehna-t-facts i { color: var(--ehna-orange); margin-inline-end: .25rem; }
.ehna-t-host { display: inline-flex; align-items: center; gap: .6rem; margin: 1rem 0; padding: .5rem .9rem .5rem .5rem; border-radius: 999px; background: var(--t-soft); border: 1px solid var(--t-line); color: var(--color-base-content) !important; }
.ehna-t-host img { width: 2.4rem; height: 2.4rem; border-radius: 999px; object-fit: cover; }
.ehna-t-host span { display: flex; flex-direction: column; line-height: 1.1; }
.ehna-t-host small { font-size: .7rem; color: var(--t-muted); }
.ehna-t-main h3 { margin: 1.3rem 0 .55rem; font-size: 1.05rem; }
.ehna-t-main h3 small { font-weight: 600; color: var(--t-muted); }
.ehna-t-text { font-size: .93rem; line-height: 1.7; }
.ehna-t-list { display: grid; gap: .45rem; font-size: .9rem; }
.ehna-t-list li { display: flex; gap: .55rem; }
.ehna-t-list i { margin-top: .25rem; color: var(--color-success); }
.ehna-t-list.is-plain i { color: var(--ehna-orange); }
.ehna-t-side { position: relative; }
.ehna-t-book { position: sticky; top: 76px; display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem; border-radius: 1.3rem; background: var(--color-base-100); border: 1px solid var(--t-line); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .45); }
.ehna-t-book-price b { font-size: 1.5rem; }
.ehna-t-book-price small { color: var(--t-muted); }
.ehna-t-book form, .ehna-t-review-form { display: flex; flex-direction: column; gap: .6rem; }
.ehna-t-book label, .ehna-t-fields label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--t-muted); }
.ehna-t-book input, .ehna-t-book textarea, .ehna-t-fields input, .ehna-t-fields select, .ehna-t-fields textarea, .ehna-t-review-form textarea { width: 100%; padding: .6rem .7rem; border-radius: .8rem; border: 1px solid var(--t-line); background: var(--t-soft); color: var(--color-base-content); font-size: .9rem; font-weight: 500; }
.ehna-t-book input:focus, .ehna-t-book textarea:focus, .ehna-t-fields input:focus, .ehna-t-fields select:focus, .ehna-t-fields textarea:focus, .ehna-t-review-form textarea:focus { outline: 2px solid color-mix(in oklab, var(--ehna-orange) 45%, transparent); outline-offset: 1px; }
label.ehna-t-check { flex-direction: row; align-items: flex-start; gap: .5rem; font-weight: 600; color: var(--color-base-content); }
label.ehna-t-check input { width: auto; margin-top: .15rem; }
.ehna-t-contact, .ehna-t-owner { display: flex; flex-wrap: wrap; gap: .4rem; }
.ehna-t-contact .ehna-t-btn, .ehna-t-owner .ehna-t-btn { flex: 1 1 auto; padding: .5rem .7rem; font-size: .8rem; }
.ehna-t-owner { padding-top: .7rem; border-top: 1px solid var(--t-line); }
.ehna-t-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; font-size: 1.3rem; }
.ehna-t-stars input { display: none; }
.ehna-t-stars label { color: color-mix(in oklab, var(--color-base-content) 22%, transparent); cursor: pointer; }
.ehna-t-stars input:checked ~ label, .ehna-t-stars label:hover, .ehna-t-stars label:hover ~ label { color: #f59e0b; }
.ehna-t-reviews { display: grid; gap: .9rem; margin-top: .9rem; }
.ehna-t-reviews li { display: flex; gap: .7rem; }
.ehna-t-reviews img { width: 2.4rem; height: 2.4rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.ehna-t-reviews p { margin: .2rem 0; font-size: .9rem; }
.ehna-t-reviews small { color: var(--t-muted); font-size: .72rem; }
.ehna-t-r-stars { color: #f59e0b; font-size: .8rem; }

/* form */
.ehna-t-formwrap { max-width: 56rem; margin: 0 auto; }
.ehna-t-formwrap h1 { font-size: 1.6rem; margin-bottom: .3rem; }
.ehna-t-form { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1rem; padding: 1.2rem; border-radius: 1.3rem; background: var(--color-base-100); border: 1px solid var(--t-line); }
.ehna-t-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.ehna-t-fields .is-wide { grid-column: 1 / -1; }
@media (max-width: 639.98px) { .ehna-t-fields { grid-template-columns: 1fr; } }
.ehna-t-photos-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.ehna-t-photos-head small { color: var(--t-muted); }
.ehna-t-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; }
.ehna-t-ph, .ehna-t-ph-add { position: relative; aspect-ratio: 1; border-radius: .9rem; overflow: hidden; background: var(--t-soft); }
.ehna-t-ph img { width: 100%; height: 100%; object-fit: cover; }
.ehna-t-ph.is-loading img { opacity: .45; }
.ehna-t-ph button { position: absolute; top: .3rem; inset-inline-end: .3rem; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 1rem; line-height: 1; }
.ehna-t-ph:first-child::after { content: "\2605"; position: absolute; bottom: .3rem; inset-inline-start: .35rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.ehna-t-ph-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; border: 1.5px dashed color-mix(in oklab, var(--ehna-orange) 45%, transparent); color: var(--ehna-orange); font-size: .78rem; font-weight: 700; cursor: pointer; }
.ehna-t-ph-add i { font-size: 1.3rem; }
.ehna-t-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; }

/* bookings */
.ehna-t-bookings { display: grid; gap: .6rem; }
.ehna-t-bookings > li { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: .7rem; border-radius: 1.1rem; background: var(--color-base-100); border: 1px solid var(--t-line); }
.ehna-t-bookings > li > a img { width: 4.5rem; height: 4.5rem; border-radius: .8rem; object-fit: cover; }
.ehna-t-b-info { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .2rem; }
.ehna-t-b-info small { display: flex; align-items: center; gap: .3rem; color: var(--t-muted); font-size: .76rem; }
.ehna-t-b-info small img { width: 1.1rem; height: 1.1rem; border-radius: 999px; }
.ehna-t-status { padding: .25rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 800; background: var(--t-soft); }
.ehna-t-status.is-pending { color: #b45309; background: color-mix(in oklab, #f59e0b 16%, transparent); }
.ehna-t-status.is-confirmed { color: var(--color-success); background: color-mix(in oklab, var(--color-success) 14%, transparent); }
.ehna-t-status.is-declined, .ehna-t-status.is-canceled { color: var(--color-error); background: color-mix(in oklab, var(--color-error) 12%, transparent); }
.ehna-t-b-actions { display: flex; gap: .4rem; }

/* "things to do" on city pages */
.ehna-t-city-block { margin-top: 1.4rem; }

/* ---------- all kinds of tourism: top-level tabs (horizontal scroller) ---------- */
.ehna-t-tabs { display: flex; gap: .45rem; margin: 1rem 0 .2rem; padding: .15rem .1rem .45rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.ehna-t-tabs::-webkit-scrollbar { display: none; }
.ehna-t-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; border-radius: 999px; background: var(--color-base-100); border: 1px solid var(--t-line); color: var(--color-base-content) !important; font-size: .84rem; font-weight: 700; white-space: nowrap; scroll-snap-align: start; transition: background .12s ease, border-color .12s ease; }
.ehna-t-tab > i { color: var(--tone); }
.ehna-t-tab small { min-width: 1.4rem; padding: .05rem .4rem; border-radius: 999px; background: color-mix(in oklab, var(--tone) 12%, transparent); color: var(--tone); font-size: .7rem; font-weight: 800; text-align: center; }
.ehna-t-tab:hover { border-color: color-mix(in oklab, var(--tone) 45%, transparent); }
.ehna-t-tab.is-active { background: var(--tone); border-color: var(--tone); color: #fff !important; box-shadow: 0 8px 18px -12px var(--tone); }
.ehna-t-tab.is-active > i { color: #fff; }
.ehna-t-tab.is-active small { background: rgba(255, 255, 255, .22); color: #fff; }
.ehna-t-tab.is-tool { border-style: dashed; }
.ehna-t-cat.is-zero > span { opacity: .55; }
.ehna-t-cat.is-zero small { opacity: .7; }
@media (min-width: 640px) { .ehna-t-tabs { flex-wrap: wrap; overflow: visible; } }

/* group cards on the tourism home: every kind of tourism at a glance */
.ehna-t-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: .75rem; margin: .9rem 0 .4rem; }
.ehna-t-group { min-width: 0; padding: .8rem; border-radius: 1.3rem; background: var(--color-base-100); border: 1px solid var(--t-line); }
.ehna-t-group-head { display: flex; align-items: center; gap: .7rem; color: var(--color-base-content) !important; }
.ehna-t-group-head > i { margin-inline-start: auto; color: var(--t-muted); }
.ehna-t-group-ic { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; background: color-mix(in oklab, var(--tone) 14%, transparent); color: var(--tone); font-size: 1.15rem; }
.ehna-t-group-name { display: flex; min-width: 0; flex-direction: column; line-height: 1.2; }
.ehna-t-group-name b { font-size: .95rem; }
.ehna-t-group-name small { font-size: .74rem; color: var(--t-muted); }
.ehna-t-group-cats { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.ehna-t-mini { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .6rem; border-radius: 999px; background: var(--t-soft); border: 1px solid transparent; color: var(--color-base-content) !important; font-size: .76rem; font-weight: 600; line-height: 1.25; }
.ehna-t-mini > i { color: var(--tone); }
.ehna-t-mini small { color: var(--t-muted); font-weight: 700; }
.ehna-t-mini:hover { border-color: color-mix(in oklab, var(--tone) 40%, transparent); }
.ehna-t-mini.is-zero { opacity: .72; }
@media (max-width: 639.98px) {
  .ehna-t-group-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -.8rem; padding-inline: .8rem; }
  .ehna-t-group-cats::-webkit-scrollbar { display: none; }
  .ehna-t-mini { flex: 0 0 auto; white-space: nowrap; }
}

/* inviting empty state of a category / tab */
.ehna-t-empty.is-invite { gap: .5rem; padding: 2rem 1.2rem; border: 1.5px dashed color-mix(in oklab, var(--tone) 40%, transparent); background: color-mix(in oklab, var(--tone) 5%, var(--color-base-100)); color: var(--color-base-content); }
.ehna-t-empty.is-invite h3 { margin: .2rem 0 0; font-size: 1.15rem; }
.ehna-t-empty.is-invite p { max-width: 34rem; margin: 0; }
.ehna-t-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 1.3rem; background: color-mix(in oklab, var(--tone) 15%, transparent); color: var(--tone); font-size: 1.8rem; }
.ehna-t-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: .5rem; }

/* listing page: category-specific details + itinerary */
.ehna-t-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; margin: 1rem 0 0; }
.ehna-t-specs > div { padding: .6rem .75rem; border-radius: 1rem; background: color-mix(in oklab, var(--tone) 7%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--tone) 20%, transparent); }
.ehna-t-specs dt { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; color: var(--t-muted); }
.ehna-t-specs dt i { color: var(--tone); }
.ehna-t-specs dd { margin: .15rem 0 0; font-size: .92rem; font-weight: 800; overflow-wrap: anywhere; }
.ehna-t-h-ic { margin-inline-end: .4rem; color: var(--ehna-orange); }
.ehna-t-itin { counter-reset: itin; display: grid; gap: .1rem; font-size: .9rem; }
.ehna-t-itin li { counter-increment: itin; position: relative; padding: .35rem 0 .6rem; padding-inline-start: 1.5rem; border-inline-start: 2px solid var(--t-line); margin-inline-start: .85rem; }
.ehna-t-itin li::before { content: counter(itin); position: absolute; top: .25rem; inset-inline-start: -.9rem; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--ehna-orange); color: var(--ehna-on-accent, #fff); font-size: .72rem; font-weight: 800; }
.ehna-t-itin li:last-child { border-inline-start-color: transparent; }

/* listing form: details for this kind of listing */
.ehna-t-extra { margin: 0; padding: .9rem; border-radius: 1.1rem; border: 1px dashed color-mix(in oklab, var(--ehna-orange) 35%, transparent); background: color-mix(in oklab, var(--ehna-orange) 4%, var(--color-base-100)); }
.ehna-t-extra[hidden], .ehna-t-extra label[hidden] { display: none; }
.ehna-t-extra legend { display: flex; align-items: center; gap: .4rem; padding: 0 .4rem; font-size: .85rem; font-weight: 800; }
.ehna-t-extra legend i { color: var(--ehna-orange); }
.ehna-t-extra label > span i { color: var(--ehna-orange); }

/* tourist toolbox: teaser on the tourism home + its page */
.ehna-t-more { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 700; color: var(--ehna-orange) !important; }
.ehna-t-sos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin-bottom: .7rem; }
.ehna-t-sos a { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .55rem .3rem; border-radius: 1rem; background: color-mix(in oklab, var(--color-error, #dc2626) 9%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--color-error, #dc2626) 22%, transparent); color: var(--color-base-content) !important; text-align: center; }
.ehna-t-sos b { font-size: 1.2rem; font-weight: 900; color: var(--color-error, #dc2626); letter-spacing: .02em; }
.ehna-t-sos small { font-size: .7rem; font-weight: 600; line-height: 1.2; color: var(--t-muted); }
.ehna-t-sos.is-big b { font-size: 1.6rem; }
.ehna-t-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.ehna-t-tools a { display: flex; align-items: center; gap: .6rem; padding: .65rem .7rem; border-radius: 1.1rem; background: var(--color-base-100); border: 1px solid var(--t-line); color: var(--color-base-content) !important; transition: transform .12s ease, border-color .12s ease; }
.ehna-t-tools a:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--tone) 45%, transparent); }
.ehna-t-tools a > span { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: .8rem; background: color-mix(in oklab, var(--tone) 14%, transparent); color: var(--tone); }
.ehna-t-tools a > b { min-width: 0; font-size: .8rem; line-height: 1.25; }
.ehna-t-tools a > small { margin-inline-start: auto; font-size: .7rem; color: var(--t-muted); white-space: nowrap; }
@media (max-width: 639.98px) { .ehna-t-tools { grid-template-columns: 1fr 1fr; } .ehna-t-tools a > small { display: none; } }
.ehna-t-hero.is-toolbox { background: radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, #34d399 30%, transparent), transparent 55%), linear-gradient(135deg, #0f766e 0%, color-mix(in oklab, var(--ehna-orange) 60%, #134e4a) 100%); }
.ehna-t-tabs.is-jump { margin-top: .8rem; }
.ehna-t-toolbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: .9rem; margin-top: .6rem; }
.ehna-t-tool { min-width: 0; scroll-margin-top: 5rem; padding: 1.1rem; border-radius: 1.4rem; background: var(--color-base-100); border: 1px solid var(--t-line); }
.ehna-t-tool.is-sos { border-color: color-mix(in oklab, var(--color-error, #dc2626) 30%, transparent); }
.ehna-t-tool header { display: flex; align-items: center; gap: .65rem; margin-bottom: .55rem; }
.ehna-t-tool h2 { margin: 0; font-size: 1.1rem; }
.ehna-t-tool-ic { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; background: color-mix(in oklab, var(--tone) 14%, transparent); color: var(--tone); font-size: 1.15rem; }
.ehna-t-tool-lead { margin-bottom: .75rem; font-size: .92rem; line-height: 1.6; }
.ehna-t-tool .ehna-t-list { font-size: .87rem; line-height: 1.55; }
.ehna-t-tool .ehna-t-list i { color: var(--tone); }
.ehna-t-tool-links { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.ehna-t-tool-links .ehna-t-btn { flex-wrap: wrap; }
.ehna-t-tool-links small { opacity: .85; font-weight: 600; }
.ehna-t-note { display: flex; gap: .5rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: 1rem; background: var(--t-soft); font-size: .82rem; color: var(--t-muted); }
.ehna-t-note i { margin-top: .2rem; color: var(--ehna-orange); }
/* Admin > Tourism: listings waiting for approval / hidden, on the owner's cards */
.ehna-t-card-feat.is-pending { top: auto; bottom: .55rem; background: #475569; }

/* /content/themes/giftun/css/ehna-legal.css */
/* =====================================================================
   Ehna legal pages + pay notices (Giftun) — mobile first, RTL, light/dark, follows the theme colour
   ===================================================================== */
:root { --el-line: color-mix(in oklab, var(--color-base-content, #1c1917) 9%, transparent); --el-soft: color-mix(in oklab, var(--color-base-content, #1c1917) 5%, var(--color-base-100, #fff)); --el-muted: color-mix(in oklab, var(--color-base-content, #1c1917) 64%, transparent); }

/* ---------- legal document ---------- */
.ehna-legal-doc > :first-child { margin-top: 0 !important; }
.ehna-legal-doc > :last-child { margin-bottom: 0 !important; }
.ehna-legal-doc .ehna-legal-meta { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; padding: .3rem .8rem; border-radius: 999px; background: var(--el-soft); color: var(--el-muted); margin: 0 0 1rem; }
.ehna-legal-doc .ehna-legal-summary { background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--color-primary) 22%, transparent); border-radius: 1.25rem; padding: 1rem 1.15rem; margin: 1rem 0 1.5rem; }
.ehna-legal-doc .ehna-legal-summary > :first-child { margin-top: 0; }
.ehna-legal-doc .ehna-legal-summary > :last-child { margin-bottom: 0; }
.ehna-legal-doc .ehna-legal-summary strong:first-child { display: block; margin-bottom: .35rem; }
.ehna-legal-doc table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .92rem; }
.ehna-legal-doc table td, .ehna-legal-doc table th { vertical-align: top; min-width: 8rem; }
.ehna-legal-doc[dir="rtl"] { text-align: start; }
.ehna-legal-doc h2 { scroll-margin-top: 5rem; }
.ehna-legal-doc a[dir="ltr"] { unicode-bidi: isolate; }

/* business identity card */
.ehna-legal-card { display: grid; gap: .1rem; margin: 1rem 0; padding: .35rem 1rem; border: 1px solid var(--el-line); border-radius: 1.25rem; background: var(--color-base-100); }
.ehna-legal-card-row { display: grid; grid-template-columns: 1fr; gap: .1rem; padding: .6rem 0; border-bottom: 1px solid var(--el-line); }
.ehna-legal-card-row:last-child { border-bottom: 0; }
.ehna-legal-card dt { font-size: .75rem; font-weight: 700; color: var(--el-muted); text-transform: none; }
.ehna-legal-card dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 640px) { .ehna-legal-card-row { grid-template-columns: 13rem 1fr; gap: 1rem; align-items: baseline; } }

/* related policies */
.ehna-legal-nav { margin-top: 1.25rem; background: var(--color-base-100); border: 1px solid var(--el-line); border-radius: 1.5rem; padding: 1rem 1.15rem; }
.ehna-legal-nav-title { font-size: 1rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
.ehna-legal-nav-title i { color: var(--color-primary); }
.ehna-legal-nav ul { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.ehna-legal-nav a { display: inline-flex; align-items: center; padding: .45rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--el-soft); color: var(--color-base-content) !important; border: 1px solid transparent; text-decoration: none !important; }
.ehna-legal-nav a:hover { border-color: color-mix(in oklab, var(--color-primary) 40%, transparent); }
.ehna-legal-nav a.is-active { background: var(--color-primary); color: var(--color-primary-content) !important; }

/* admin warning */
.ehna-legal-warning { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; padding: .9rem 1.1rem; border-radius: 1.25rem; border: 1px solid color-mix(in oklab, #f59e0b 45%, transparent); background: color-mix(in oklab, #f59e0b 12%, var(--color-base-100)); color: var(--color-base-content); font-size: .875rem; }
.ehna-legal-warning > i { color: #d97706; margin-top: .2rem; }
.ehna-legal-warning p { margin: .2rem 0 .35rem; }
.ehna-legal-warning a { font-weight: 700; color: var(--color-primary) !important; }

/* ---------- pay / book notice ---------- */
.ehna-paynote { margin: .75rem 0 0; padding: .7rem .85rem; border-radius: 1rem; background: var(--el-soft); border: 1px solid var(--el-line); font-size: .78rem; line-height: 1.5; color: var(--el-muted); text-align: start; }
.ehna-paynote p { margin: 0; }
.ehna-paynote p + p { margin-top: .4rem; }
.ehna-paynote-main { display: flex; gap: .5rem; align-items: flex-start; color: var(--color-base-content); }
.ehna-paynote-main > i { color: var(--color-primary); margin-top: .2rem; flex-shrink: 0; }
.ehna-paynote a { color: var(--color-primary) !important; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ehna-paynote-secure i { color: #16a34a; margin-inline-end: .25rem; }
.ehna-paynote.is-compact { padding: .55rem .7rem; font-size: .74rem; }
.ehna-paynote.is-flat { background: transparent; border: 0; padding-inline: 0; }

/* sign-up consent links */
.ehna-consent a { white-space: nowrap; }