/*
 Theme Name:   Hello Elementor Child - Base
 Theme URI:    https://yourwebsite.com/
 Description:  Reusable base child theme for Hello Elementor. Rename "Theme Name" and
               update details below before shipping to a client site.
 Author:       Shakaib
 Author URI:   https://yourwebsite.com/
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child-base
*/

@import url("../hello-elementor/style.css");

/* ==========================================================================
   Add your custom / client-specific CSS below this line.
   Nothing above this point should need to change per-project.
   ========================================================================== */

/* ================================================================
   WHZ STATS COUNTER — barbershop "flip clock" style stat bar
   All classes prefixed whz- to avoid clashing with your theme CSS.
   ================================================================ */

/* ── LUXURY BOX — Full Border Fix (All Sides + Responsive) ── */
.whz-stats-box{
  position:relative !important;
  z-index:0 !important;
  width:100%;
  border:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  box-shadow:0 25px 60px rgba(0,0,0,0.6);
  padding:36px 48px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-evenly;
  align-items:center;
  gap:34px 24px;
}

/* Gold gradient border layer */
.whz-stats-box::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(150deg, #9a5a1f 0%, #ae7742 20%, #875020 40%, #7a5c10 60%, #fac772 80%, #7a5c10 100%);
  clip-path:polygon(16px 0%, calc(100% - 16px) 0%, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0% calc(100% - 16px), 0% 16px);
}

/* Dark inner fill layer */
.whz-stats-box::after{
  content:'';
  position:absolute;
  inset:4px;
  z-index:-1;
  background:#141414;
  clip-path:polygon(16px 0%, calc(100% - 16px) 0%, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0% calc(100% - 16px), 0% 16px);
}

/* Keep all child elements above the pseudo-element border layers */
.whz-stats-box > *{
  position:relative;
  z-index:1;
}

/* Responsive corner-clip sizing */
@media (max-width:1024px){
  .whz-stats-box::before,
  .whz-stats-box::after{
    clip-path:polygon(16px 0%, calc(100% - 16px) 0%, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0% calc(100% - 16px), 0% 16px);
  }
  .whz-stats-box::after{
    clip-path:polygon(14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px);
  }
}
@media (max-width:767px){
  .whz-stats-box::before,
  .whz-stats-box::after{
    clip-path:polygon(14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px);
  }
  .whz-stats-box::after{
    clip-path:polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
  }
}

.whz-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  flex:0 1 auto;
}

.whz-stat-label{
  color:#d8b787;
  font-family:'Oswald', sans-serif;
  font-size:clamp(14px, 1.35vw, 17px);
  letter-spacing:3px;
  font-weight:600;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.whz-stat-label .whz-star{
  color:var(--whz-gold-2);
  font-size:0.7em;
}

.whz-digits{
  display:flex;
  align-items:flex-end;
  gap:4px;
}

.whz-tile{
  background: #3a3734 !important;
  position: relative;
  width: clamp(20px, 2.6vw, 38px);
  padding: 10px 0px;
  border-radius: 5px;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.whz-tile::after{
  /* center hinge line of the flip card */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
  top: 53%;
  height: 2px;
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-1px);
}

.whz-tile-num{
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 30px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.whz-tile.whz-flip .whz-tile-num{
  animation:whzDigitChange 0.28s ease;
}
@keyframes whzDigitChange{
  0%{ opacity:1; transform:translateY(0); }
  35%{ opacity:0; transform:translateY(-6px); }
  36%{ transform:translateY(6px); }
  100%{ opacity:1; transform:translateY(0); }
}

.whz-comma{
  color:#fff;
  font-family:'Oswald', sans-serif;
  font-weight:700;
  font-size:clamp(24px, 3.4vw, 40px);
  align-self:flex-end;
  margin:0 2px 2px;
}

@media (max-width:700px){
  .whz-stats-box{ padding:28px 22px; gap:30px; }
  .whz-stat-label{ letter-spacing:1.5px; }
}