/*
 * hunbei-elements.css
 * ─────────────────────────────────────────────────────────────────
 * Scoped Hunbei H5 element styles for StoryLove's H5 Canvas Builder.
 * ALL rules are scoped under .h5-canvas-root to avoid conflicts with
 * the rest of StoryLove's UI (Sidebar, Navbar, Dialogs, Tables, etc.)
 * ─────────────────────────────────────────────────────────────────
 */

/* ================================================================
   0. CANVAS ROOT SCOPE
   ================================================================ */
.h5-canvas-root {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  /* Canvas is always 375px width — mobile viewport */
  width: 375px;
  /* Scoped mobile system font stack matching preview 1:1 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* user-select off only inside the canvas (not globally!) */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ================================================================
   1. ELEMENT WRAPPER — .ele-wrap
   Each draggable block. Position is driven by inline style:
   left: Xpx; top: Ypx; width: Wpx; height: auto | Hpx;
   transform: rotate(Ndeg);
   ================================================================ */
.h5-canvas-root .ele-wrap {
  position: absolute;
  cursor: move;
  z-index: 1;
}

.h5-canvas-root .ele-wrap.active {
  z-index: 100;
}

/* ================================================================
   2. ELES — base class for all element types
   ================================================================ */
.h5-canvas-root .eles {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ================================================================
   3. ANIMATION WRAP — .ani-wrap
   Holds the actual content + border/background styles.
   All Hunbei animation styles are applied as inline:
     animation: 1.5s ease-in 0s 1 normal backwards running fadeInRight;
     transform-origin: center top !important;
   ================================================================ */
.h5-canvas-root .ani-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  /* allow overflow for decorative effects */
  overflow: visible;
}

/* ================================================================
   4. TEXT ELEMENT — .ele-text
   ================================================================ */
.h5-canvas-root .ele-text {
  width: 100%;
  height: auto;
  min-height: 1em;
}

.h5-canvas-root .ele-text .ani-wrap {
  width: 100%;
  height: auto;
}

/* Text stroke layer (background stroke effect via text-shadow or -webkit-text-stroke) */
.h5-canvas-root .text-stroke-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* pointer-events off so it doesn't block the editor layer */
  pointer-events: none;
}

/* The actual text editor layer (contenteditable) */
.h5-canvas-root .text-editor {
  position: relative;
  width: 100%;
  outline: none;
  white-space: pre-wrap;
  word-break: break-all;
  /* Cursor visible when editing */
}

.h5-canvas-root .text-editor[contenteditable="true"] {
  cursor: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* Shared text class */
.h5-canvas-root .text-common {
  width: 100%;
  word-break: break-all;
  white-space: pre-wrap;
}

/* Curved text: .text-editor is strictly an in-memory data store; never display it on canvas */
.h5-canvas-root .ele-curve-text .text-editor,
.ele-curve-text .text-editor {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ================================================================
   5. IMAGE ELEMENT — .ele-img
   ================================================================ */
.h5-canvas-root .ele-img {
  width: 100%;
  height: 100%;
}

/* Horizontal flip */
.h5-canvas-root .ele-img[overturntypenew="1"] .ele-img-bg {
  transform: scaleX(-1);
}
/* Vertical flip */
.h5-canvas-root .ele-img[overturntypenew="2"] .ele-img-bg {
  transform: scaleY(-1);
}
/* Both flip */
.h5-canvas-root .ele-img[overturntypenew="3"] .ele-img-bg {
  transform: scale(-1, -1);
}

/* Rotate wrapper — handles the inner border-radius, border, shadow */
.h5-canvas-root .rotate-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Image background container — border, shadow, border-radius sit here */
.h5-canvas-root .ele-img-bg {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Actual background image */
.h5-canvas-root .ele-bg-wrap,
.ele-bg-wrap {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.h5-canvas-root .ele-bg-wrap .ele-bg-img,
.ele-bg-wrap .ele-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* ================================================================
   5.5. SHAPE ELEMENT — .ele-shape
   ================================================================ */
.h5-canvas-root .ele-shape {
  width: 100%;
  height: 100%;
}

.h5-canvas-root .ele-shape-bg {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.h5-canvas-root .shape-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Horizontal flip */
.h5-canvas-root .ele-shape[overturntypenew="1"] .ele-shape-bg {
  transform: scaleX(-1);
}
/* Vertical flip */
.h5-canvas-root .ele-shape[overturntypenew="2"] .ele-shape-bg {
  transform: scaleY(-1);
}
/* Both flip */
.h5-canvas-root .ele-shape[overturntypenew="3"] .ele-shape-bg {
  transform: scale(-1, -1);
}

/* ================================================================
   6. DRAG HANDLES — .drag-point & .rotate-icon
   Shown only on the active element.
   8 handles: TL, TC, TR, ML, MR, BL, BC, BR + 1 rotate icon.
   ================================================================ */
.h5-canvas-root .drag-point {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #3a9bff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 200;
  cursor: nwse-resize;
}

/* Top-Left */
.h5-canvas-root .drag-point[data-dir="tl"] {
  top: -5px;
  left: -5px;
  cursor: nwse-resize;
}
/* Top-Center */
.h5-canvas-root .drag-point[data-dir="tc"] {
  top: -5px;
  left: calc(50% - 5px);
  cursor: ns-resize;
}
/* Top-Right */
.h5-canvas-root .drag-point[data-dir="tr"] {
  top: -5px;
  right: -5px;
  cursor: nesw-resize;
}
/* Middle-Left */
.h5-canvas-root .drag-point[data-dir="ml"] {
  top: calc(50% - 5px);
  left: -5px;
  cursor: ew-resize;
}
/* Middle-Right */
.h5-canvas-root .drag-point[data-dir="mr"] {
  top: calc(50% - 5px);
  right: -5px;
  cursor: ew-resize;
}
/* Bottom-Left */
.h5-canvas-root .drag-point[data-dir="bl"] {
  bottom: -5px;
  left: -5px;
  cursor: nesw-resize;
}
/* Bottom-Center */
.h5-canvas-root .drag-point[data-dir="bc"] {
  bottom: -5px;
  left: calc(50% - 5px);
  cursor: ns-resize;
}
/* Bottom-Right */
.h5-canvas-root .drag-point[data-dir="br"] {
  bottom: -5px;
  right: -5px;
  cursor: nwse-resize;
}

/* Rotate handle above the element */
.h5-canvas-root .rotate-icon {
  position: absolute;
  top: -28px;
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  cursor: crosshair;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3a9bff;
  font-size: 16px;
}

/* Selection border around active element is handled dynamically by ElementView overlay */
.h5-canvas-root .ele-wrap.active > .eles {
  outline: none;
}

/* ================================================================
   7. AUDIO WIDGET — #audio
   Fixed top-right corner of the canvas. Rotates infinitely.
   Structure: #audio > .audio > img.music-icon
   ================================================================ */
.h5-canvas-root #audio {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
}

#audio .audio,
.h5-canvas-root #audio .audio {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* background-color is set inline from the HTML, e.g. rgba(118,8,8,0.51) */
}

#audio .audio .music-icon,
.h5-canvas-root #audio .audio .music-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -webkit-animation: h5-rotating 3s linear infinite;
  animation: h5-rotating 3s linear infinite;
  display: block;
}

#audio.off .audio .music-icon,
.h5-canvas-root #audio.off .audio .music-icon {
  -webkit-animation: none !important;
  animation: none !important;
}

#audio .audio .audio-slash,
.h5-canvas-root #audio .audio .audio-slash {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

#audio.off .audio .audio-slash,
.h5-canvas-root #audio.off .audio .audio-slash {
  display: block !important;
}

/* ================================================================
   8. HUNBEI-SPECIFIC KEYFRAMES (scoped names to avoid collision)
   ================================================================ */

/* Audio icon rotation */
@keyframes h5-rotating {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Equalizer soundwave bar keyframes */
@keyframes eq-bar-1 {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}
@keyframes eq-bar-2 {
  0%, 100% { height: 14px; }
  50% { height: 6px; }
}
@keyframes eq-bar-3 {
  0%, 100% { height: 7px; }
  50% { height: 13px; }
}
@keyframes eq-bar-4 {
  0%, 100% { height: 12px; }
  50% { height: 4px; }
}

/* fadeInRight — most common Hunbei text animation */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* fadeInLeft */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* fadeInUp */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* fadeInDown */
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* fadeIn */
@keyframes fadeIn {
  0%  { opacity: 0; }
  to  { opacity: 1; }
}

/* zoomIn */
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% { opacity: 1; }
}

/* bounceIn */
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0%  { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(0.97, 0.97, 0.97); }
  to  { opacity: 1; transform: scaleX(1); }
}

/* rollInLeft — Hunbei classic image animation */
@keyframes rollInLeft {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate(120deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* windIn — Hunbei spiral animation */
@keyframes windIn {
  0% {
    opacity: 0;
    transform: translateZ(-3000px) rotate(-360deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* float — gentle up/down floating */
@keyframes float {
  0%  { transform: translateZ(0); }
  25% { transform: translate3d(0, -10%, 0); }
  75% { transform: translate3d(0, 10%, 0); }
  to  { transform: translateZ(0); }
}

/* float2 — gentle left/right floating */
@keyframes float2 {
  0%  { transform: translateZ(0); }
  25% { transform: translate3d(-10%, 0, 0); }
  75% { transform: translate3d(10%, 0, 0); }
  to  { transform: translateZ(0); }
}

/* rotating — continuous spin (generic elements) */
@keyframes rotating {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* twisterInDown */
@keyframes twisterInDown {
  0% {
    opacity: 0;
    transform: scale(0) rotate(360deg) translateY(-100%);
    transform-origin: 0 100%;
  }
  30% {
    transform: scale(0) rotate(360deg) translateY(-100%);
    transform-origin: 0 100%;
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg) translateY(0);
    transform-origin: 100% 100%;
  }
}

/* pullUp */
@keyframes pullUp {
  0% {
    opacity: 0;
    transform: scaleY(0.1);
    transform-origin: 50% 100%;
  }
  40% { opacity: 1; transform: scaleY(1.02); transform-origin: 50% 100%; }
  60% { transform: scaleY(0.98); transform-origin: 50% 100%; }
  80% { transform: scaleY(1.01); transform-origin: 50% 100%; }
  to  { transform: none; }
}

/* shake */
@keyframes shake {
  0%  { transform: translateZ(0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80%      { transform: translate3d(10px, 0, 0); }
  to  { transform: translateZ(0); }
}

/* pulse */
@keyframes pulse2 {
  0%  { transform: scaleX(1); }
  50% { transform: scale3d(1.3, 1.3, 1.3); }
  to  { transform: scaleX(1); }
}

/* ================================================================
   9. EDITOR OVERLAY (builder-mode only)
   Shown when hovering an element (not active) to show it's clickable
   ================================================================ */
/* Hover overlay is handled dynamically by ElementView overlay */
.h5-canvas-root .ele-wrap:hover:not(.active) > .eles {
  outline: none;
}

/* ================================================================
   10. LAYER PANEL THUMBNAIL
   Used in the left layers panel to display element miniature.
   ================================================================ */
.h5-layer-thumb {
  width: 40px;
  height: 40px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

/* ================================================================
   11. CALENDAR & WIDGET ELEMENTS (.ele-calendar, etc.)
   ================================================================ */
@keyframes weddingHeartPulse {
  0% { transform: scale(1); }
  14% { transform: scale(1.35); }
  28% { transform: scale(1); }
  42% { transform: scale(1.35); }
  70% { transform: scale(1); }
  100% { transform: scale(1); }
}

.ele-calendar {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.ele-calendar .ani-wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.ele-calendar .can-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-sizing: border-box;
}

.ele-calendar .can-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  font-weight: 700;
}

.ele-calendar .can-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ele-calendar .can-week {
  display: flex;
  justify-content: space-around;
  border-radius: 4px;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.ele-calendar .can-week span {
  flex: 1;
  text-align: center;
}

.ele-calendar .can-date {
  flex: 1;
  margin-top: 6px;
}

.ele-calendar .can-date ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.ele-calendar .can-date li {
  width: 14.285%;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  font-size: 11px;
}

.ele-calendar .can-date li.heart-ani svg.heart-pulse-icon {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  transform-origin: center center;
}

.ele-calendar .can-date li.heart-ani.pulsing svg.heart-pulse-icon {
  animation: weddingHeartPulse 1.4s ease infinite;
  transform-origin: center center;
}

.ele-calendar .can-date li.heart-ani span {
  position: relative;
  z-index: 2;
  font-weight: 700;
}

/* ===== COUNTDOWN ELEMENT STYLES ===== */

.count-down {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.count-down .ani-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Flip style container — centered vertically and horizontally inside .ani-wrap */
.count-flip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
}

/* Each time unit block — fixed card width & height so it is smaller than active box and centered */
.count-flip .c-com {
  flex: 0 0 auto;
  width: 58px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 4px 2px;
  /* Default black background (matches Hunbei native CSS) — overridden by inline background-color when set */
  background-color: rgb(34, 34, 34);
  overflow: hidden;
}

/* Inner wrapper: row layout so c-num slots sit side by side in center,
   c-text (flex: 0 0 100%) drops to a new row below the digits */
.count-flip .c-com .c-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  width: 100%;
  gap: 0px;
  box-sizing: border-box;
}

/* Each digit slot (tens / units / hidden-hundreds) — compact width so '00' digits sit directly adjacent */
.count-flip .c-com .c-wrap .c-num {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 13px;
  min-width: 13px;
  max-width: 13px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.count-flip .c-com .c-wrap .c-num.c-left {
  justify-content: flex-end;
}

.count-flip .c-com .c-wrap .c-num.c-right {
  justify-content: flex-start;
}

.count-flip .c-com .c-wrap .c-num.c-day-left {
  justify-content: flex-end;
}

.count-flip .c-com .c-wrap .c-num.c-day-left[style*="display: none"],
.count-flip .c-com .c-wrap .c-num[style*="display: none"] {
  display: none !important;
}

/* Label sits on its own line below the digits */
.count-flip .c-com .c-wrap .c-text {
  flex: 0 0 100%;
  width: 100%;
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
  text-align: center;
  line-height: 1;
  box-sizing: border-box;
}

/* Each digit slot */
.count-flip .flex-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 24px;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Digit number values */
.count-flip .next-num,
.count-flip .curr-num {
  font-size: 19px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.count-flip .c-left .flex-wrap .curr-num,
.count-flip .c-left .flex-wrap .next-num,
.count-flip .c-day-left .flex-wrap .curr-num,
.count-flip .c-day-left .flex-wrap .next-num {
  text-align: right;
}

.count-flip .c-right .flex-wrap .curr-num,
.count-flip .c-right .flex-wrap .next-num {
  text-align: left;
}

/* Size-dependent variants for flip countdown */
.count-down[data-countdown-size="large"] .count-flip .c-com {
  width: 68px;
  height: 60px;
}
.count-down[data-countdown-size="large"] .count-flip .c-num {
  width: 15px;
  min-width: 15px;
  max-width: 15px;
}
.count-down[data-countdown-size="large"] .count-flip .flex-wrap {
  height: 28px;
}
.count-down[data-countdown-size="large"] .count-flip .next-num,
.count-down[data-countdown-size="large"] .count-flip .curr-num {
  font-size: 22px;
  line-height: 28px;
}
.count-down[data-countdown-size="large"] .count-flip .c-text {
  font-size: 11px;
  margin-top: 2px;
}

.count-down[data-countdown-size="medium"] .count-flip .c-com,
.count-flip .c-com {
  width: 58px;
  height: 52px;
}
.count-down[data-countdown-size="medium"] .count-flip .c-num,
.count-flip .c-num {
  width: 13px;
  min-width: 13px;
  max-width: 13px;
}
.count-down[data-countdown-size="medium"] .count-flip .flex-wrap,
.count-flip .flex-wrap {
  height: 24px;
}
.count-down[data-countdown-size="medium"] .count-flip .next-num,
.count-down[data-countdown-size="medium"] .count-flip .curr-num,
.count-flip .next-num,
.count-flip .curr-num {
  font-size: 19px;
  line-height: 24px;
}
.count-down[data-countdown-size="medium"] .count-flip .c-text,
.count-flip .c-text {
  font-size: 10px;
  margin-top: 2px;
}

.count-down[data-countdown-size="small"] .count-flip .c-com {
  width: 48px;
  height: 44px;
}
.count-down[data-countdown-size="small"] .count-flip .c-num {
  width: 11px;
  min-width: 11px;
  max-width: 11px;
}
.count-down[data-countdown-size="small"] .count-flip .flex-wrap {
  height: 20px;
}
.count-down[data-countdown-size="small"] .count-flip .next-num,
.count-down[data-countdown-size="small"] .count-flip .curr-num {
  font-size: 16px;
  line-height: 20px;
}
.count-down[data-countdown-size="small"] .count-flip .c-text {
  font-size: 9px;
  margin-top: 1px;
}

/* Text style countdown */
.count-text {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.count-text .c-text-item {
  display: flex;
  align-items: baseline;
  box-sizing: border-box;
}

.count-flip .curr-num {
  position: absolute;
  top: 0;
  left: 0;
}

.count-flip .next-num {
  position: absolute;
  top: -100%;
  left: 0;
}

/* Scrolling animation for the seconds units digit */
.count-flip .flex-wrap.numscroll .curr-num {
  animation: numScrollDown 1s linear infinite;
}

.count-flip .flex-wrap.numscroll .next-num {
  animation: numScrollDownNext 1s linear infinite;
}

@keyframes numScrollDown {
  0%   { top: 0; opacity: 1; }
  45%  { top: 0; opacity: 1; }
  55%  { top: 100%; opacity: 0; }
  100% { top: 100%; opacity: 0; }
}

@keyframes numScrollDownNext {
  0%   { top: -100%; opacity: 0; }
  45%  { top: -100%; opacity: 0; }
  55%  { top: 0; opacity: 1; }
  100% { top: 0; opacity: 1; }
}

/* ================================================================
   10. ONE-TOUCH DIAL / CALL BUTTON — .bohao
   ================================================================ */
.bohao {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.bohao .ani-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
}

.bohao .bh-txt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  user-select: none;
  width: 100%;
  height: 100%;
}

.bohao .bh-txt .iconfont {
  font-size: inherit;
  line-height: 1;
}

.bohao .bh-txt .btn-text {
  font-size: inherit;
  line-height: 1;
}

/* ================================================================
   11. CAROUSEL / SLIDESHOW — .ele-carousel
   ================================================================ */
.ele-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ele-carousel .pic-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.ele-carousel .pic-list-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.ele-carousel .pic-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
}

.ele-carousel .pic-list.cur {
  display: block;
  z-index: 2;
}

.ele-carousel .pic-list.prev {
  display: block;
  z-index: 1;
}

.ele-carousel .pic-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Carousel Animations */
.ani-zoom-in {
  animation: carouselZoomIn linear forwards;
}

.ani-zoom-out {
  animation: carouselZoomOut linear forwards;
}

.ani-slide-in {
  animation: carouselSlideIn linear forwards;
}

.ani-slide-out {
  animation: carouselSlideOut linear forwards;
}

.ani-overlap-in {
  animation: carouselOverlapIn linear forwards;
}

.ani-overlap-out {
  animation: carouselOverlapOut linear forwards;
}

.ani-fade-in {
  animation: carouselFadeIn linear forwards;
}

.ani-fade-out {
  animation: carouselFadeOut linear forwards;
}

@keyframes carouselZoomIn {
  0% {
    transform: scale(1.15);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes carouselZoomOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.92);
    opacity: 0;
  }
}

@keyframes carouselSlideIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes carouselSlideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes carouselOverlapIn {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes carouselOverlapOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.3;
  }
}

@keyframes carouselFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes carouselFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ================================================================
   12. FORM SINGLE CHOICE (RADIO) — .ele-form.f-single / .f-single
   Exact match with hunbei.css native styles
   ================================================================ */
.f-single .bottom-center,
.f-single .left-bottom,
.f-single .left-top,
.f-single .right-bottom,
.f-single .right-top,
.f-single .top-center,
.ele-form.f-single .bottom-center,
.ele-form.f-single .left-bottom,
.ele-form.f-single .left-top,
.ele-form.f-single .right-bottom,
.ele-form.f-single .right-top,
.ele-form.f-single .top-center {
  display: none !important;
}

.f-single,
.ele-form.f-single {
  position: relative;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.f-single .ani-wrap,
.ele-form.f-single .ani-wrap {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  overflow: hidden;
}

.f-single .fs-tit,
.ele-form.f-single .fs-tit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 10px;
  height: 40px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  font-size: inherit;
  color: inherit;
}

.f-single .require,
.ele-form.f-single .fs-tit .require {
  padding: 0 5px 0 0;
  color: red;
  vertical-align: middle;
  font-weight: bold;
}

.f-single ul,
.ele-form.f-single ul {
  padding: 15px;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

.f-single ul li,
.ele-form.f-single ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 12px;
  font-size: 0;
  cursor: pointer;
  user-select: none;
}

.f-single ul li:first-child,
.ele-form.f-single ul li:first-child {
  margin-top: 0;
}

.f-single ul .fs-circle,
.ele-form.f-single .fs-circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: top;
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  background-color: transparent;
  transition: border-color 0.15s, background-color 0.15s;
}

.f-single ul li.active .fs-circle,
.ele-form.f-single li.active .fs-circle,
.ele-form.f-single li:hover .fs-circle {
  border-color: #2563eb;
}

.f-single ul li.active .fs-circle::after,
.ele-form.f-single li.active .fs-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2563eb;
}

.f-single ul .fs-txt,
.ele-form.f-single .fs-txt {
  display: inline-block;
  width: calc(100% - 16px);
  padding-left: 8px;
  vertical-align: top;
  word-break: break-all;
  font-size: inherit;
  line-height: 1.4;
  color: inherit;
}

/* Quick Form — Horizontal Radio (.f-single inside .ele-quick-form) */
.ele-quick-form .f-single ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
}

.ele-quick-form .f-single ul li {
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.ele-quick-form .f-single ul li.active .fs-circle,
.ele-quick-form .f-single li.active .fs-circle,
.ele-quick-form .f-single li:hover .fs-circle {
  border-color: #e11d48 !important;
}

.ele-quick-form .f-single ul li.active .fs-circle::after,
.ele-quick-form .f-single li.active .fs-circle::after {
  background-color: #e11d48 !important;
}

.ele-quick-form .f-single ul .fs-txt,
.ele-quick-form .f-single .fs-txt {
  width: auto !important;
  padding-left: 6px !important;
}

/* ================================================================
   13. FORM MULTIPLE CHOICE (CHECKBOX) — .ele-form.f-multiple / .f-multiple
   Exact match with hunbei.css native styles
   ================================================================ */
.f-multiple .bottom-center,
.f-multiple .left-bottom,
.f-multiple .left-top,
.f-multiple .right-bottom,
.f-multiple .right-top,
.f-multiple .top-center,
.ele-form.f-multiple .bottom-center,
.ele-form.f-multiple .left-bottom,
.ele-form.f-multiple .left-top,
.ele-form.f-multiple .right-bottom,
.ele-form.f-multiple .right-top,
.ele-form.f-multiple .top-center {
  display: none !important;
}

.f-multiple,
.ele-form.f-multiple {
  position: relative;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.f-multiple .ani-wrap,
.ele-form.f-multiple .ani-wrap {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  overflow: hidden;
}

.f-multiple .fs-tit,
.ele-form.f-multiple .fs-tit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 10px;
  height: 40px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  font-size: inherit;
  color: inherit;
}

.f-multiple .require,
.ele-form.f-multiple .fs-tit .require {
  padding: 0 5px 0 0;
  color: red;
  vertical-align: middle;
  font-weight: bold;
}

.f-multiple ul,
.ele-form.f-multiple ul {
  padding: 15px;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

.f-multiple ul li,
.ele-form.f-multiple ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 12px;
  font-size: 0;
  cursor: pointer;
  user-select: none;
}

.f-multiple ul li:first-child,
.ele-form.f-multiple ul li:first-child {
  margin-top: 0;
}

.f-multiple ul .fs-circle,
.ele-form.f-multiple .fs-circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: top;
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  background-color: transparent;
  transition: border-color 0.15s, background-color 0.15s;
}

.f-multiple ul li.active .fs-circle,
.ele-form.f-multiple li.active .fs-circle,
.ele-form.f-multiple li:hover .fs-circle {
  border-color: #2563eb;
}

.f-multiple ul li.active .fs-circle,
.ele-form.f-multiple li.active .fs-circle {
  background-color: #2563eb;
}

.f-multiple ul li.active .fs-circle::after,
.ele-form.f-multiple li.active .fs-circle::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.f-multiple ul .fs-txt,
.ele-form.f-multiple .fs-txt {
  display: inline-block;
  width: calc(100% - 16px);
  padding-left: 8px;
  vertical-align: top;
  word-break: break-all;
  font-size: inherit;
  line-height: 1.4;
  color: inherit;
}

/* ================================================================
   14. FORM SELECT (DROPDOWN) — .ele-form.f-select / .f-select
   Exact match with hunbei.css native styles
   ================================================================ */
.f-select .bottom-center,
.f-select .left-bottom,
.f-select .left-top,
.f-select .right-bottom,
.f-select .right-top,
.f-select .top-center,
.ele-form.f-select .bottom-center,
.ele-form.f-select .left-bottom,
.ele-form.f-select .left-top,
.ele-form.f-select .right-bottom,
.ele-form.f-select .right-top,
.ele-form.f-select .top-center {
  display: none !important;
}

.f-select,
.ele-form.f-select {
  position: relative;
  width: 100%;
  height: 35px;
  box-sizing: border-box;
}

.f-select .ani-wrap,
.ele-form.f-select .ani-wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.f-select .fs-tit,
.ele-form.f-select .fs-tit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  user-select: none;
}

.f-select .require,
.ele-form.f-select .fs-tit .require {
  padding: 0 5px 0 0;
  color: red;
  vertical-align: middle;
  font-weight: bold;
}

.f-select .fs-cont,
.ele-form.f-select .fs-tit .fs-cont {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: inherit;
  color: inherit;
  line-height: 1.2;
}

.f-select .hb-bofang1,
.ele-form.f-select .fs-tit .hb-bofang1 {
  display: inline-block;
  font-size: 10px;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
  margin-left: 6px;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.6;
}

/* ================================================================
   15. FORM INPUT (TEXT INPUT) — .ele-form.f-input / .f-input
   Exact match with hunbei.css native styles
   ================================================================ */
.f-input .bottom-center,
.f-input .left-bottom,
.f-input .left-top,
.f-input .right-bottom,
.f-input .right-top,
.f-input .top-center,
.ele-form.f-input .bottom-center,
.ele-form.f-input .left-bottom,
.ele-form.f-input .left-top,
.ele-form.f-input .right-bottom,
.ele-form.f-input .right-top,
.ele-form.f-input .top-center {
  display: none !important;
}

.f-input,
.ele-form.f-input {
  position: relative;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
}

.f-input .ani-wrap,
.ele-form.f-input .ani-wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 10px;
  overflow: hidden;
  position: relative;
}

.f-input .require,
.ele-form.f-input .require {
  padding: 0 5px 0 0;
  color: red;
  vertical-align: middle;
  font-weight: bold;
  flex-shrink: 0;
}

.f-input input,
.ele-form.f-input input,
.f-input textarea,
.ele-form.f-input textarea {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 0;
  box-sizing: border-box;
  resize: none;
}

.f-input input::placeholder,
.ele-form.f-input input::placeholder,
.f-input textarea::placeholder,
.ele-form.f-input textarea::placeholder {
  color: inherit;
  opacity: 0.6;
}

/* ================================================================
   16. FORM SUBMIT BUTTON — .ele-form.f-submit / .f-submit
   Exact match with hunbei.css native styles
   ================================================================ */
.f-submit .bottom-center,
.f-submit .left-bottom,
.f-submit .left-top,
.f-submit .right-bottom,
.f-submit .right-top,
.f-submit .top-center,
.ele-form.f-submit .bottom-center,
.ele-form.f-submit .left-bottom,
.ele-form.f-submit .left-top,
.ele-form.f-submit .right-bottom,
.ele-form.f-submit .right-top,
.ele-form.f-submit .top-center {
  display: none !important;
}

.f-submit,
.ele-form.f-submit {
  position: relative;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  cursor: pointer;
}

.f-submit .ani-wrap,
.ele-form.f-submit .ani-wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.f-submit .f-ovh,
.ele-form.f-submit .f-ovh {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: inherit;
  font-size: inherit;
  color: inherit;
  text-align: inherit;
}