/*==================================================
=            Atis Floating Contact
==================================================*/

:root{

    --atis:#00A9B7;
    --atis-hover:#0093A0;
    --atis-shadow:0 10px 35px rgba(0,0,0,.18);

}


/*==================================================
=            Mobile Button
==================================================*/

#atis-mobile-contact{

display:none;

}

#atis-mobile-contact a{

position:fixed;

left:0;
right:0;
bottom:0;

height:62px;

display:flex;
align-items:center;
justify-content:center;

background:linear-gradient(90deg,var(--atis),#00C8D7);

color:#fff;

text-decoration:none;

font-size:17px;
font-weight:700;

z-index:999999;

box-shadow:0 -2px 12px rgba(0,0,0,.18);

}


/*==================================================
=            Floating Button
==================================================*/

#atis-contact-button{

position:fixed;

right:25px;
bottom:25px;

width:68px;
height:68px;

border-radius:50%;

background:linear-gradient(135deg,var(--atis),#00C8D7);

display:flex;
justify-content:center;
align-items:center;

cursor:pointer;

box-shadow:var(--atis-shadow);

z-index:999999;

transition:.25s;

animation:
atisPulse 2.8s infinite,
atisShake 8s infinite;

}


#atis-contact-button:hover{

transform:translateY(-3px);

}


#atis-contact-button svg{

width:30px;
height:30px;

fill:#fff;

}


/*==================================================
=            Popup
==================================================*/

#atis-contact-popup{

position:fixed;

right:25px;
bottom:105px;

width:290px;

background:#fff;

border-radius:16px;

overflow:hidden;

box-shadow:var(--atis-shadow);

opacity:0;
visibility:hidden;

transform:translateY(15px);

transition:.25s;

z-index:999999;

}


#atis-contact-popup.active{

opacity:1;

visibility:visible;

transform:none;

}


.atis-title{

background:var(--atis);

color:#fff;

padding:16px;

font-size:16px;
font-weight:bold;

text-align:center;

}


#atis-contact-popup a{

display:flex;

align-items:center;

gap:12px;

padding:16px 18px;

text-decoration:none;

color:#444;

transition:.2s;

border-bottom:1px solid #f0f0f0;

}


#atis-contact-popup a:hover{

background:#f8f8f8;

}


#atis-contact-popup a span:first-child{

width:28px;

font-size:22px;

text-align:center;

}


.whatsapp{

color:#16A34A !important;

font-weight:bold;

}


/*==================================================
=            Animations
==================================================*/

@keyframes atisPulse{

0%{

box-shadow:0 0 0 0 rgba(0,169,183,.45);

}

70%{

box-shadow:0 0 0 18px rgba(0,169,183,0);

}

100%{

box-shadow:0 0 0 0 rgba(0,169,183,0);

}

}



@keyframes atisShake{

0%,
92%,
100%{

transform:translateX(0);

}

93%{

transform:translateX(-5px);

}

95%{

transform:translateX(5px);

}

97%{

transform:translateX(-5px);

}

99%{

transform:translateX(5px);

}

}


/*==================================================
=            Responsive
==================================================*/

@media(max-width:768px){

#atis-contact-button,
#atis-contact-popup{

display:none;

}

#atis-mobile-contact{

display:block;

}

body{

padding-bottom:62px;

}

}



@media(min-width:769px){

#atis-mobile-contact{

display:none;

}

}






/* ===== Brand Colors ===== */
:root {
  --brand-primary: #2ec4c7;   /* رنگ اصلی برند */
  --brand-dark: #367c8c;      /* پس‌زمینه تیره */
  --brand-light: #e6f7f8;     /* رنگ ملایم */
  --text-light: #ffffff;
}

/* Audio Container */
.site-audio {
  max-width: 760px;
  margin: 28px auto;
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    var(--brand-dark),
    #333333
  );
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  position: relative;
}

/* Title */
.site-audio::before {
  content: "🎧 فایل صوتی";
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-primary);
  letter-spacing: 0.4px;
}

/* Audio Player */
.site-audio audio {
  width: 100%;
  height: 42px;
  border-radius: 8px;
}

/* Chrome / Edge Controls */
.site-audio audio::-webkit-media-controls-panel {
  background-color: var(--brand-light);
  border-radius: 8px;
}

/* Timeline */
.site-audio audio::-webkit-media-controls-timeline {
  border-radius: 4px;
}

/* Play Button */
.site-audio audio::-webkit-media-controls-play-button {
  filter: saturate(130%);
}

/* Hover Effect */
.site-audio:hover {
  box-shadow: 0 14px 34px rgba(46, 196, 199, 0.35);
  transform: translateY(-2px);
  transition: 0.25s ease;
}

/* Mobile */
@media (max-width: 600px) {
  .site-audio {
    padding: 14px 16px;
  }

  .site-audio::before {
    font-size: 13px;
  }
}