@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  /* Base */
  --white: #FFFFFF;
  --black: #000000;
  --transparent: #00000000;
  --orange-500: #FF9800;
  --green-500: #4CAF50;

  /* Custom Brand */
  --primary: #FF5722;
  --secondary: #8BC34A;
  --child: #E2C69A;
  --price-inductor: #FFAA22;
  --skeleton-placeholder: #E0E0E0;
  --gradient-start: #E91E63;
  --gradient-center: #9C27B0;
  --gradient-end: #2196F3;

  /* Background */
  --bg-canvas: #FFFFFF;
  --bg-surface: #F6F6F6;
  --bg-emphasis: #EFF1F3;
  --bg-muted: #F6F8FA;

  /* Border */
  --border-default: #D0D7DE;
  --border-muted: #E1E4E8;
  --border-emphasis: #C6CED6;

  /* Text */
  --text-primary: #24292F;
  --text-secondary: #57606A;
  --text-muted: #6E7781;
  --text-subtle: #8E99A1;

  /* Accent / Semantic */
  --accent-emphasis: #0969DA;
  --accent-muted: #1C7ED6;
  --success-emphasis: #2EA043;
  --success-muted: #E6F4EA;
  --warning-emphasis: #D29922;
  --warning-muted: #FFF5B1;
  --danger-emphasis: #B31D28;
  --danger-muted: #FFD1D9;
  --done-emphasis: #8250DF;
  --done-muted: #F0E6FF;
  --sponsor-emphasis: #9932CC;
  --sponsor-muted: #FFE4FF;

  /* Selected Icon Color */
  --selected-icon: #C98250DF;
  --unselected-icon: #D521262D;
  --selected-text: #E99852E7;

  /* Interaction States */
  --hover: #F3F4F6;
  --focus-border: #1F6FEB;
}


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
}

/* Primary button style */
.primary-button{
    cursor: pointer;
    background-color: var(--success-emphasis);
    color: #fff;
    padding: 8px 15px;
    border: none;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    user-select: none;
}

/* Download button style */
.download-button{
    cursor: pointer;
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--black);
    padding: 8px 15px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.3s linear;
    user-select: none;
}
.download-button svg {
    width: 18px;
    height: 18px;
    fill: currentColor; /* icon color will match text */    
    transition: all 0.3s linear;
}
.download-button:hover {
    background-color: var(--black);
    color: var(--white);
    border-color: var(--black);
}
.download-button:hover svg {
    fill: currentColor; /* will turn white on hover */
}


/* Play store button design */
.play-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #212121; /* Dark background */
    color: #ffffff;
    padding: 8px 12px;
    padding-right: 20PX;
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.3s ease;
    user-select: none;
}
/* .play-button:hover {
    background-color: #000000;
} */
.play-button svg {
    width: 48px;
    height: 48px;
}
.play-button-text-container {
    display: flex;
    flex-direction: column;
}
.play-button-text-container span:nth-child(1){
    font-size: 10px;
}