*,
*::before,
*::after {
    box-sizing: border-box;
}

@font-face {
  font-family: bpg;
  src: url('/assets/fonts/bpg_le_studio.ttf'); 
}


.fafu-shell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fafu-phone {
    background: #F8F2EE;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* TOP WHITE HEADER */

.phone-header {
    background: #ffffff;
    border-radius: 0px 0px 25px 25px;
    padding: 15px 30px;
}

.phone-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.phone-logo-mini img {
    height: 40px;
}

.phone-menu-toggle {
    border: none;
    background: #F8F2EE;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    height: 36px;
    width: 92px;
    justify-content: center;
    border-radius: 7px;
    font-family: 'bpg';
}

.phone-burger {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.phone-burger span {
    width: 12px;
    height: 2px;
    background: #333;
    border-radius: 4px;
}

/* DROP-DOWN MENU */

.phone-menu-panel {
    background: #ffffff;
    padding: 10px 20px 12px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    display: none;
}

.phone-menu-panel.open {
    display: block;
    margin-top:-15px;
}

.phone-menu-nav ul {
    list-style: none;
    margin: 0;
    padding: 0 0 10px 0;
}

.phone-menu-nav li {
    padding: 6px 0;
    font-size: 14px;
    text-align: right;
    margin-right: 15px;
}

.phone-menu-nav a {
    text-decoration: none;
    color: #333;
    font-size: 17px;
    font-family: 'bpg';
    -webkit-text-stroke: .2px;
}

.phone-menu-social {
    display: flex;
    justify-content: center;
    gap: 14px;
    font-size: 12px;
}

.menu-social-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #e85b9f;
}

.menu-social-item svg {
    width: 16px;
    height: 16px;
}

/* PHONE BODY */

.phone-body {
    padding: 14px 16px 18px;
}

/* TEXT BLOCK */

.hero-text-block {
    position: relative;
    margin-bottom: 25px;
    padding-left:22px;
}

.hero-line {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
}

.hero-line-1 {
    font-weight: 500;
    margin-top: 24px;
    margin-bottom: 25px;
    font-size: 17px;
    font-family:bpg;
}

.hero-line-2,
.hero-line-3 {
    font-weight: 400;
    font-size: 22px;
    font-family: 'bpg';
    margin: 15px 0px;
    position: relative;
}

.hero-line-3{
    margin-bottom:50px;
}

.hero-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 600;
}

.hero-chip-qr {
    background: #3bc1f1a1;
    font-size: 42px;
    height: 50px;
    margin-left: 10px;
    transform: rotate(4deg);
}

.hero-chip-code {
    background: #ed3175b3;
    font-family: 'bpg';
    font-size: 37px;
    height: 50px;
    margin-left: 10px;
    transform: rotate(354deg);
}

.hero-doodle {
    position: absolute;
    right: 0;
    top: -6px;
    height: 22px;
}

.hero-line.hero-line-2 svg{
    margin-left: 20px;
    margin-top:-20px;
}

.scan-main-text{
    position:relative;
    top:2px;
}

/* PINK SCAN ROW – INPUT BAR */

.scan-row {
    background: #ffffff;
    border-radius: 999px;
    padding: 4px 5px 4px 4px;
    margin-bottom: 30px;
    position:relative;
}

.scan-row .custom-icon svg{
    position:absolute;
    top:-30px;
}

.scan-row form{
    display: flex;
    align-items: center;
    gap: 20px;
    width:100%;
}

.scan-main-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 999px;
    background: #f37099;
    color: #ffffff;
    font-size: 13px;
    padding: 6px 12px;
    padding-right:18px;
    cursor: pointer;
    font-family: 'bpg';
    font-weight: 600;
    -webkit-text-stroke: .4px;
    letter-spacing: .2px;
    margin-left: 5px;
    color:black;
}

.phone-menu-text{
    position:relative;
    top:2px;
    color:black;
}

.scan-input-wrapper {
    flex: 1;
}

.scan-input {
    width: 100%;
    border: none;
    font-size: 11px;
    position: relative;
    left: -10px;
}

.scan-input:focus {
    outline: none;
}

.scan-arrow-btn {
    background: transparent;
    cursor: pointer;
    border:none;
}

/* IMAGE CARDS */

.cards-block {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-img {
    border-radius: 33px;
    overflow: hidden;
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PARTNERS SECTION */

.partners-block {
    margin-top: 18px;
}

.partners-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.partners-title {
    font-size: 17px;
    font-weight: 600;
    font-family: 'bpg';
    margin: 10px 0px;
    border-bottom: 1px solid #00000030;
    padding-bottom: 5px;
    -webkit-text-stroke: .4px;
    letter-spacing: .2px;
}

.partners-slider {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;   
    padding-bottom:6px;
}

.partners-slider::-webkit-scrollbar {
    display: none;
}

.partner-item {
    min-width: 125px;
    height: 50px;
    background: transparent;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    border: 1px solid #00000030;
}

/* BOTTOM SOCIAL ROW INSIDE PHONE */

.phone-social-row {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 12px;
}

.phone-social-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #e85b9f;
}

.menu-social-item span, .phone-menu-social span{
    color: black;
    opacity: .8;
    font-size: 11px;
    font-style: italic;
    text-decoration: underline;
}

.phone-social-link svg {
    width: 16px;
    height: 16px;
}


/* WRAPPER */
.fafu-blocks {
    padding: 20px 0px 20px;
}

/* GRID */
.fafu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* CARD */
.fafu-card {
    background: #fff;
    border-radius: 24px;
    text-decoration: none;
    color: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform .15s 
ease;
    border: .2px solid #00000038;
}

.fafu-card:active {
    transform: scale(0.97);
}

.fafu-card img {
    width: 100%;
    border-radius: 24px;
    display: block;
    height:160px;
    object-fit:cover
}

/* TITLE */
.fafu-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 15px;
    font-family: 'bpg';
    letter-spacing: .8px;
    -webkit-text-stroke: .4px;
}

/* HIDDEN */
.fafu-hidden {
    display: none;
}

/* BUTTON */
.fafu-more-btn {
    margin: 20px auto 0;
    display: block;
    background: none;
    border: none;
    color: #3BC1F1;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'bpg';
    margin-top: 30px;
    letter-spacing: .8px;
}

.home .hero-line-1{
    line-height: 30px;
    margin-bottom:0px;
}



.custom-audio-table{
  background:#FBF4EE;
  padding:16px;
  font-family:"New Hero", sans-serif;
}

/* back */
.audio-back-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 5px;
    padding-right: 20px;
    border-radius: 999px;
    background: white;
    color: black;
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 30px;
    font-family: 'bpg';
    margin-top: 15px;
}

.audio-back-btn span{
    position:relative;
    top:2px;
}

/* top switchers */
.audio-switchers{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* switch button */
.audio-switch{
  width:100%;
  border-radius:14px;
  background:#fff;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid transparent;
  cursor:pointer;
  text-align:left;
}

.audio-switch-text{ display:flex; flex-direction:column; gap:4px; }
.audio-switch-title{ font-size:15px; font-weight:600; color:#000; }
.audio-switch-count{ font-size:12px; color:#808080;font-family: 'bpg'; }

.audio-switch-arrow{
  transition: transform .2s ease;
  color:#111;
}

/* active state + colors */
.audio-switch--pink.is-active{ border-color:#F17DA5; }
.audio-switch--blue.is-active{ border-color:#3BC1F1; }

.audio-switch.is-active .audio-switch-arrow{
  transform: rotate(180deg);
}

/* content area */
.audio-content{
  margin-top:14px;
}

/* panels */
.audio-panel{
  display:none;
    background: #fff;
    border-radius: 0px;
    padding: 40px 28px;
    padding-bottom: 70px;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    margin-top: 30px;
}
.audio-panel.is-active{ display:block; }

.audio-panel-head{ margin-bottom:10px; }
.audio-panel-title{ font-size:15px; font-weight:700;     font-family: 'bpg';
    -webkit-text-stroke: .5px;
    letter-spacing: .8px; }
.audio-panel-sub{ font-size:12px; color:#808080; margin-top:4px;     font-family: 'bpg';
    -webkit-text-stroke: .2px;
    letter-spacing: .8px; margin-bottom:20px; }

/* list rows */
.audio-list{ display:flex; flex-direction:column; gap:15px; }

.audio-row{
  display:flex;
  align-items:center;
  gap:20px;
  background:#fff;
  border-radius:14px;
  padding:10px 10px;
box-shadow: none;
position: relative;
border: .2px solid #00000025;
}

/* play btn */
.audio-play-btn{
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 46px;
  color:#fff;
}

.audio-row[data-theme="pink"] .audio-play-btn{ background:#F17DA5; }
.audio-row[data-theme="blue"] .audio-play-btn{ background:#3BC1F1; }

.audio-row.is-playing[data-theme="pink"] .audio-play-btn{ background:white; }
.audio-row.is-playing[data-theme="blue"] .audio-play-btn{ background:white; }


.audio-play-icon{ font-size:16px; line-height:0; }
.audio-play-icon svg{
    width:22px;
}

/* info */
.audio-row-info{ flex:1; min-width:0; }
.audio-row-title{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.audio-row-meta{ font-size:12px; color:#808080; margin-top:3px; font-family: 'bpg'; }

/* thumb */
.audio-row-thumb{
  width:70px;
  height:70px;
  border-radius:17px;
  object-fit:cover;
  flex:0 0 50px;
}

/* inline player inside row */
.audio-inline-player{
  width:100%;
  margin-top:10px;
  display:none;
}
.audio-inline-player.is-open{ display:flex; }

.audio-inline-player audio{
  width:100%;
}

/* make row highlight when playing */
.audio-row.is-playing{
  outline:1px solid rgba(0,0,0,0.06);
  border-radius:53px;
}
.audio-row.is-playing .audio-play-icon svg{
    filter: brightness(0) saturate(100%) invert(55%) sepia(39%) saturate(693%) hue-rotate(293deg) brightness(107%) contrast(89%);
}

.audio-volume-btn svg{
    position: relative;
    top: 10px;
}

.audio-row.is-playing[data-theme="pink"]{
  background:#F17DA5;
}

.audio-row.is-playing[data-theme="blue"]{
  background:#3BC1F1;
}


.custom-audio-table .audio-row {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.custom-audio-table .audio-row.is-playing .audio-row-thumb,
.custom-audio-table .audio-row.is-playing .audio-row-meta {
    display: none;
}



.custom-audio-table .audio-row.is-playing .audio-inline-player {
    display: block;
}

/* THEME COLORS */
.custom-audio-table .audio-row[data-theme="pink"].is-playing{
    background: #F17DA5;
}
.custom-audio-table .audio-row[data-theme="blue"].is-playing{
    background: #3BC1F1;
}

/* PLAYER UI */
.custom-audio-table .player-ui {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #000;
    font-weight: 600;
}

.custom-audio-table .player-bar {
    flex: 1;
    height: 4px;
    background: rgba(0,0,0,.2);
    border-radius: 4px;
    position: relative;
}

.custom-audio-table .player-progress {
    position: absolute;
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 4px;
}

.custom-audio-table .audio-row.is-playing .audio-row-thumb,
.custom-audio-table .audio-row.is-playing .audio-row-meta {
    display: none;
}

/* INLINE PLAYER */
.custom-audio-table .audio-inline-player {
    display: none;
    width: 100%;
    align-items: center;
    gap: 14px;
}

.custom-audio-table .audio-row.is-playing .audio-inline-player {
    display: flex;
}


/* PLAYER STRUCTURE */
.audio-player-left button {
    background: transparent;
    border: none;
}

.audio-player-center {
    flex: 1;
    color: #000;
}

.audio-player-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

/* PROGRESS BAR */
.audio-progress {
    height: 2px;
    background: rgba(0,0,0,.2);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    width:95%;
}

#panel-foreign .audio-play-icon svg{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7493%) hue-rotate(1deg) brightness(101%) contrast(102%);
}

#panel-foreign.is-active .audio-row.is-playing .audio-play-icon svg{
    filter: brightness(0) saturate(100%) invert(74%) sepia(33%) saturate(5302%) hue-rotate(167deg) brightness(104%) contrast(89%);
}

.audio-progress-bar {
    height: 100%;
    width: 0%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
}

.audio-time {
    font-size: 12px;
    margin-top: 6px;
}

.audio-row.is-playing .audio-row-thumb{
    display:none;
}

.audio-row.is-playing .audio-row-info{
    display:none;
}

.game-hidden {
    display: none;
}

.audio-action {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.audio-action-btn {
    background: #3bc1f1;
    color: black;
    padding: 14px 24px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 40px;
    font-family: 'bpg';
    letter-spacing: .8px;
    -webkit-text-stroke: .4px;
}

.audio-action-btn:hover{
    color:black;
}

.audio-list.book .hover03{
    height: 65px;
}

.audio-list.book .audio-row{
    justify-content: space-between;
}

.book.home .audio-panel{
    margin-top:80px;
}

.helvetica p{
    text-align:left !important;
    font-size:12px;
}

.helvetica p img{
    width: 200px !important;
    height: 200px !important;
    object-fit:cover;
    border-radius:25px;
    margin-left:10px;
    margin-right:10px;
    margin-top:20px;
}


/* responsive */
@media (min-width:768px){
  .custom-audio-table{ max-width:520px; margin:0 auto; }
}


/* TABLET */
@media (min-width: 768px) {
    .fafu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* DESKTOP */
@media (min-width: 1024px) {
    .fafu-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}




/* RESPONSIVE */

@media screen and (max-width: 1024px){
    .fafu-shell.audio{
        display:block;
    }
}

@media (min-width: 768px) {
    .fafu-shell {
        padding: 40px 0;
    }

    .fafu-phone {
        transform: scale(1.05);
    }
}

@media (min-width: 1024px) {
    .fafu-phone {
        transform: scale(1.1);
    }
}