.elementor-4372 .elementor-element.elementor-element-348084f{--display:flex;--flex-direction:column-reverse;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:stretch;--overflow:hidden;}.elementor-4372 .elementor-element.elementor-element-348084f:not(.elementor-motion-effects-element-type-background), .elementor-4372 .elementor-element.elementor-element-348084f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FDB166;}.elementor-4372 .elementor-element.elementor-element-51ce4ce{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-4372 .elementor-element.elementor-element-51ce4ce:not(.elementor-motion-effects-element-type-background), .elementor-4372 .elementor-element.elementor-element-51ce4ce > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#262626;}.elementor-4372 .elementor-element.elementor-element-4031a5e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4372 .elementor-element.elementor-element-7b5052f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4372 .elementor-element.elementor-element-d0f423f{background-color:#262626;}.elementor-4372 .elementor-element.elementor-element-4abf022{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-4372 .elementor-element.elementor-element-348084f{--content-width:1184px;}.elementor-4372 .elementor-element.elementor-element-4031a5e{--width:0%;}.elementor-4372 .elementor-element.elementor-element-7b5052f{--width:100%;}.elementor-4372 .elementor-element.elementor-element-4abf022{--width:0%;}}/* Start custom CSS for html, class: .elementor-element-a785317 *//* === HEADER LAYOUT === */

.dinkydoo-header {
  background: #fdb166;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(95%, 1400px);
  gap: 40px;
}

/* === LOGO === */
.logo-area img {
  max-width: 140px;
  height: auto;
  display: block;
}

/* === STATUS AREA (NOW PLAYING / ON AIR) === */
.status-area {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.status-box {
  background: #262626;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  overflow: hidden;
  width: 360px;
  transition: transform .3s ease;
}

.status-box:hover {
  transform: translateY(-3px);
}

.status-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(90deg, #fc6769, #fdb166);
  padding: 10px 18px;
  gap: 10px;
}

.status-top .pill {
  background: #e4dccf;
  color: #262626;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  box-shadow: inset 0 0 8px rgba(255,255,255,.5);
}

.status-top .pill.live {
  background: #fc6769;
  color: #fff;
  animation: pulseLight 2s ease-in-out infinite;
}

@keyframes pulseLight {
  0%, 100% { box-shadow: 0 0 8px 2px #fc6769; }
  50% { box-shadow: 0 0 14px 5px #fc6769; }
}

.status-top .title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* === BODY AREA === */
.status-body {
  display: flex;
  align-items: center;
  padding: 18px;
  gap: 18px;
}

/* Circular glowing artwork */
.artist-art {
  width: 100px !important;
  height: 100px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 4px solid #918e95 !important;
  box-shadow:
    0 0 10px 2px rgba(253,177,102,0.7),
    0 0 20px 6px rgba(252,103,105,0.45);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
  animation: artistGlow 8s ease-in-out infinite;
}

.status-box:hover .artist-art {
  transform: scale(1.05);
  box-shadow:
    0 0 6px 4px rgba(253,177,102,0.9),
    0 0 4px 2px rgba(252,103,105,0.6);
}

@keyframes artistGlow {
  0%,100% {
    box-shadow:
      0 0 0px 2px rgba(253,177,102,0.6),
      0 0 22px 8px rgba(252,103,105,0.4);
  }
  50% {
    box-shadow:
      0 0 6px 4px rgba(253,177,102,0.9),
      0 0 36px 14px rgba(252,103,105,0.6);
  }
}

/* === TEXT STYLING === */
.track-info h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #fc6769;
  font-size: 0.8rem;
  margin: 0;
  letter-spacing: 0.px;
}

.track-info p {
  color: #e4dccf;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  margin: 3px 0;
}

.track-info small {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.5rem;
  color: #fdb166;
}

/* === Responsive layout for NOW PLAYING + ON AIR === */
@media (min-width: 1024px) {
  .status-area {
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .status-box {
    flex: 1;
    max-width: 420px;
  }
}

@media (max-width: 1023px) {
  .status-area {
    flex-direction: column;
    align-items: center;
  }
  .status-box {
    width: 100%;
    max-width: 380px;
  }
}

/* === GLOWING PILLS === */
.status-top .pill {
  display: inline-block;
  font-family: 'YouBLockhead', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 5px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #262626;
  background: #fdb166;
  box-shadow: 0 0 10px 2px rgba(253,177,102,0.7), inset 0 0 4px rgba(255,255,255,0.3);
  text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}

/* === MOBILE FIXES === */
@media (max-width: 1024px) {
  .dinkydoo-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    overflow: hidden;
  }

  .header-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
  }

  .logo-area img {
    max-width: 260px;
    height: auto;
    display: block;
  }

  .status-area {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 25px;
  }

  .status-box {
    width: 90%;
    max-width: 380px;
    margin: 0 auto;
  }
}

/* prevent horizontal scrolling */
body, html {
  overflow-x: hidden;
}
.status-top .title {
  font-family: 'YouBLockhead', sans-serif !important;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
}
/* "ON AIR" LIVE PILL — glossy reflection style */
.status-top .pill.live {
  position: relative;
  background: radial-gradient(circle at center, #ff3c3c 0%, #d62929 70%, #911c1c 100%);
  color: #fff;
  animation: livePulseGloss 1.8s ease-in-out infinite;
  transform-origin: center;
  box-shadow: none;
  text-shadow: 0 0 2px rgba(255,255,255,0.6);
  overflow: hidden;
}

/* inner glossy reflection strip */
.status-top .pill.live::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0.1) 60%,
    transparent 100%
  );
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
  pointer-events: none;
}

/* gentle "heartbeat" pulse */
@keyframes livePulseGloss {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.12);
    filter: brightness(1.25);
  }
}
@keyframes livePulseGloss {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.12);
    filter: brightness(1.25);
  }
}

.status-top .pill.live::after {
  animation: reflectionShift 1.8s ease-in-out infinite;
}

@keyframes reflectionShift {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  50% {
    transform: translateY(2px);
    opacity: 0.6;
  }
}
/* === LISTEN LIVE BUTTON (sexy edition) === */
.listen-live-btn {
  background: linear-gradient(90deg, #fc6769, #e6007e);
  color: #fff;
  border: none;
  padding: 10px 24px 10px 20px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.listen-live-btn:hover {
  background: linear-gradient(90deg, #ff7f81, #f02a89);
  box-shadow: 0 6px 14px rgba(252,103,105,0.5);
  transform: translateY(-2px);
}

/* glowing circular play icon */
.play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #e6007e;
  font-weight: 900;
  font-size: 14px;
  box-shadow:
    0 0 8px rgba(255,255,255,0.6),
    0 0 20px rgba(253,177,102,0.5),
    inset 0 0 6px rgba(255,255,255,0.3);
  transition: all 0.3s ease;
}

.listen-live-btn:hover .play-icon {
  transform: scale(1.1);
  box-shadow:
    0 0 10px rgba(255,255,255,0.9),
    0 0 25px rgba(252,103,105,0.6);
}

/* === MOBILE CENTERING === */
@media (max-width: 1024px) {
  .logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .listen-live-btn {
    margin-top: 14px;
    font-size: 18px;
    padding: 12px 30px;
    text-align: center;
  }

  .play-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}/* End custom CSS */