@import url("./fonts.css");

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==========================================================================
   1. BASE STYLES (Global)
   ========================================================================== */
@layer base {
  body {
    @apply antialiased flex justify-center items-start h-screen font-sans overflow-x-hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  body::-webkit-scrollbar {
    display: none;
  }
}

@layer components {
  /* ==========================================================================
     2. LAYOUTS & CONTAINERS
     ========================================================================== */
  #onboard-content {
    transition: opacity 0.4s ease-in-out;
  }

  .app-container {
    @apply w-full max-w-[425px] min-h-screen relative flex flex-col p-5 shadow-2xl bg-cover bg-center bg-no-repeat;
    background-image: url("../assets/images/BG.png");
    background-color: #050505;
  }

  .app-container-home {
    @apply w-full max-w-[425px] min-h-screen relative flex flex-col p-5 shadow-2xl bg-cover bg-center bg-no-repeat;
    background-image: url("../assets/images/homeBg.png");
    background-color: #050505;
  }

  .section-gap {
    @apply py-2 w-full;
  }

  .divider-container {
    @apply flex items-center gap-[12px] self-stretch my-6;
  }

  .divider-line {
    @apply flex-grow h-[1px] bg-muted-dark;
  }

  .drag-handle {
    @apply my-4 text-center;
    width: 64px;
    height: 3px;
    border-radius: 100px;
    background: #cdcdcd;
  }

  /* ==========================================================================
     3. TYPOGRAPHY (Synchronized Hierarchy)
     ========================================================================== */

  /* --- Large Headings (H1) --- */
  .Splash-h1 {
    @apply text-text-main text-center font-['Roboto'] text-[40px] font-semibold leading-[1.26];
  }

  /* --- Section Headings (H2) --- */
  .h-title {
    @apply text-white text-center text-[24px] font-bold mb-1;
  }

  .h-title-reset {
    @apply text-white font-sans text-[20px] font-medium leading-[1.3];
  }

  .h2-section {
    @apply text-[#CDD5DF] font-sans text-[20px] font-medium leading-[130%];
    font-family: "Roboto", sans-serif;
  }

  .h2-title {
    @apply text-text-desc font-sans text-[20px] font-medium leading-[1.5];
  }

  /* --- Smaller Titles (H6) --- */
  .h6-title {
    @apply text-text-desc font-sans text-[14px] font-medium leading-[1.55];
  }

  /* --- Descriptions & Paragraphs (P) --- */
  .Splash-p {
    @apply text-[#D4D4D4] text-center font-sans text-[16px] font-medium leading-[1.26];
  }

  .p-desc {
    @apply text-[#D9D9D9] text-center text-[16px] font-medium leading-[1.46] tracking-[0.16px];
  }

  .p-hading {
    @apply text-text-desc font-sans text-[14px] font-medium leading-[1.5] text-center;
  }

  .p-tost {
    @apply text-center  mb-[18px] font-sans text-[16px] font-medium leading-[1.24] text-text-desc;
  }

  .p-desc-reset {
    @apply text-[#9AA4B2] font-sans text-[14px] font-normal leading-[1.4];
  }

  .p-footer {
    @apply text-[#CDD5DF] text-[14px] font-medium;
  }

  .p-desc-home {
    @apply text-[#523C8C] text-[12px] font-normal leading-[114%] mb-4;
    font-family: "Roboto", sans-serif;
  }

  .p-resend-text {
    @apply text-[#9AA4B2] text-center font-sans text-[16px] font-normal leading-[1.55];
  }

  /* --- Captions & Helper Texts --- */
  .p-caption {
    @apply text-[#9AA4B2] font-sans text-[12px] font-normal leading-[1.55];
  }

  .label-reset {
    @apply text-text-desc font-sans text-[14px] font-normal leading-[1.55] block mb-1;
  }

  .heading-text {
    @apply text-text-desc font-sans text-[12px] font-normal leading-[155%];
  }

  .caption-text {
    @apply text-muted font-sans text-[10px] font-normal leading-[155%];
  }

  .text-selected-bold {
    @apply text-[#743FFE] font-bold text-[14px] leading-[118%];
    font-family: "Roboto", sans-serif;
  }

  /* --- Links --- */
  .link-highlight {
    @apply text-accent cursor-pointer hover:underline font-bold;
  }

  .resend-link {
    @apply text-accent font-sans text-[16px] font-normal leading-[1.55] cursor-pointer hover:underline;
  }

  .span-link {
    @apply text-[#E9B402] text-right text-[14px] font-normal leading-[155%] cursor-pointer hover:underline;
    font-family: "Roboto", sans-serif;
  }

  /* ==========================================================================
     4. BUTTONS
     ========================================================================== */
  .btn-primary {
    @apply flex w-[162px] py-[12px] px-0 justify-center items-center rounded-[8px] bg-primary text-white transition-all;
  }

  .btn-skip {
    @apply flex w-[161px] py-[12px] px-0 justify-center items-center rounded-[8px] bg-surface-purple text-[#9F79FF] transition-all hover:bg-[#3d2c6b];
  }

  .btn-full {
    @apply flex w-full max-w-[425px] py-3 justify-center items-center gap-2 rounded-[8px] bg-primary text-white font-medium transition-all shadow-lg  hover:bg-[#E9B402];
  }

  .btn-outline {
    @apply flex-1 py-4 text-white font-semibold hover:bg-white/10 rounded-xl transition-all text-center border border-white/10;
  }

  .social-btn {
    @apply flex w-full max-w-[425px] h-[48px] px-[24px] py-0 justify-center items-center gap-[8px] rounded-[8px] border border-muted-dark bg-transparent text-white font-medium transition-all hover:bg-gray-800 mb-4;
  }

  .btn-reset-full {
    @apply flex w-full h-[48px] justify-center items-center gap-2 rounded-lg bg-primary text-white font-medium transition-all;
  }

  .btn-auth-dynamic {
    @apply flex w-full h-[48px] justify-center items-center gap-2 rounded-[8px] bg-dark-card text-[#666666] font-medium transition-all duration-300 hover:bg-primary hover:text-white shadow-lg;
  }

  .join-btn {
    @apply flex items-center justify-center gap-[10px] rounded-[8px] transition-all py-[4px] px-[12px] bg-[#743FFE] text-[#EEF2F6] font-['Roboto'] text-[12px] font-normal leading-[152%];
  }

  .view-icon-btn {
    @apply p-1.5 rounded-md transition-all duration-200 flex items-center justify-center bg-transparent;
  }

  .view-icon-btn.active {
    @apply bg-[rgba(255,255,255,0.12)];
  }

  .view-icon-btn:hover {
    @apply bg-white/5;
  }

  /* ==========================================================================
     5. INPUTS & FORMS
     ========================================================================== */
  .edavro-input {
    @apply w-full border border-muted-dark rounded-xl bg-transparent text-white outline-none transition-all duration-300;
    @apply focus:border-primary focus:ring-1 focus:ring-primary/30;
    padding: 15px 12px;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
  }

  .input-reset {
    @apply flex w-full h-[48px] items-center gap-2 rounded-lg border border-muted-dark bg-transparent text-white outline-none transition-all focus:border-primary;
    padding: 8px 12px;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 130%;
  }

  .edavro-input::placeholder,
  .input-reset::placeholder {
    @apply text-[#666666];
    font-family: "Roboto", sans-serif;
    font-size: 14px;
  }

  .input-w {
    @apply w-full;
  }

  .edavro-checkbox {
    @apply appearance-none w-4 h-4 rounded-[4px] border border-primary 
         bg-transparent cursor-pointer transition-all relative flex 
         items-center justify-center outline-none;

    @apply checked:bg-primary checked:border-transparent;

    @apply checked:after:content-[''] checked:after:block 
         checked:after:w-[5px] checked:after:h-[9px] 
         checked:after:border-black checked:after:border-b-2 
         checked:after:border-r-2 checked:after:rotate-45 
         checked:after:mb-[2px];
  }

  /* OTP Boxes */
  .edavro-otp-box {
    @apply w-14 h-14 bg-dark-card border border-gray-700 rounded-xl text-center text-xl text-white outline-none transition-all duration-300;
  }

  .edavro-otp-box:focus,
  .edavro-otp-box.active {
    @apply border-primary ring-1 ring-primary/50 bg-primary/10;
  }

  .otp-input-box {
    @apply flex w-[54.2px] h-[48px] p-[8px_12px] items-center justify-center gap-2 rounded-lg border border-muted-dark bg-transparent text-white text-center text-lg outline-none focus:border-primary transition-all;
  }

  .otp-container {
    @apply flex items-start gap-4 self-stretch justify-center;
  }

  .border-error {
    @apply border-red-500 !important;
  }

  /* ==========================================================================
     6. COMPONENTS (Cards, Modals, Elements)
     ========================================================================== */
  .option-card {
    @apply w-full text-left p-5 rounded-2xl border border-gray-700 bg-white/5 transition-all duration-300 hover:border-primary hover:bg-primary/10;
  }

  .option-btn.selected {
    @apply border-primary bg-primary/10 ring-1 ring-primary/40 !important;
  }

  .option-card.active {
    @apply border-primary bg-primary/20 ring-1 ring-primary;
  }

  .course-card {
    @apply relative flex-shrink-0 w-[210px] h-[170px] rounded-[24px] overflow-hidden bg-cover bg-center border border-[#334155] m-1 p-3 flex items-end;
  }

  .card-square {
    @apply relative flex-shrink-0 w-[162px] h-[162px] rounded-[12px] overflow-hidden border border-muted-dark bg-dark-card flex flex-col justify-end;
  }

  .price-badge {
    @apply absolute bottom-5 left-3 flex justify-center items-center text-black text-[11px] font-bold w-[62px] h-[28px] p-[6px_8px] rounded-[59px] opacity-80;
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(4px);
  }

  .Ins-link {
    @apply flex justify-between items-center self-stretch rounded-[6px] opacity-[0.81] bg-primary mx-[9px] mb-2 p-[4px_8px] relative z-10;
  }

  .toast-modal-card {
    @apply relative flex flex-col items-center w-[288px] p-[24px_18px] gap-[18px] rounded-[12px] border border-[#E9B402] bg-surface-purple text-center shadow-2xl;
  }


  .nav-button {
    @apply flex p-2 px-4 justify-center items-center gap-[6px] rounded-xl text-sm font-medium transition-all duration-200 whitespace-nowrap min-w-max text-slate-400;
  }

  .nav-button img {
    @apply w-4 h-4 object-contain;
  }

  .nav-button.active {
    @apply bg-primary text-white;
  }

  .nav-button:hover:not(.active) {
    @apply bg-primary text-white;
  }

  .nav-button:active {
    /* removed scale for nav-button:active */
  }

  /* --- base card --- */
  .session-item {
    @apply border border-gray-800 rounded-lg !p-2 transition-all duration-300 bg-dark-card overflow-hidden;
  }

  /* ---list view mode --- */
  .sessions-list {
    @apply flex flex-col gap-2;
  }

  /* --- list view mode (for lists) --- */
  .sessions-list {
    @apply flex flex-col gap-4;
  }

  .sessions-list .session-item {
    @apply flex flex-row items-center w-full p-2 border border-gray-800 rounded-lg bg-dark-card;
  }

  .sessions-list .session-item {
    @apply flex flex-row items-center p-0 gap-4 w-full;
  }

  .sessions-list .session-item img {
    @apply w-[142px] h-[110px] object-cover rounded-l-xl;
  }

  .sessions-list .flex-1 {
    @apply w-[119px];
  }

  .sessions-list .list {
    @apply !p-0;
  }

  /* --- grid view --- */
  .sessions-grid {
    @apply grid grid-cols-2 gap-[8px] w-full h-full justify-items-center;
  }

  .sessions-grid .grid-card {
    @apply !p-0;
  }

  /* --- grid card styles --- */
  .sessions-grid .session-item {
    @apply w-full flex flex-col items-start bg-dark-card rounded-[12px] border border-muted-dark overflow-hidden;
  }

  /* grid image size */
  .sessions-grid .session-item img {
    @apply w-full  h-[106px] object-cover rounded-t-[12px];
  }
  .sessions-grid .session-item .upcomming img {
    @apply !w-[200px] h-[106px] object-cover rounded-t-[12px];
  }

  /* grid text container */
  .sessions-grid .flex-1 {
    @apply w-full px-[8px] pb-[8px] mt-[8px] flex flex-col;
  }

  /* ==========================================================================
     7. UTILITIES & MENU
     ========================================================================== */
  .time-badge {
    @apply absolute bottom-0 right-0 flex items-center justify-center px-[8px] py-[6px] rounded-tl-[8px];
    background: rgba(115, 115, 115, 0.7);
    opacity: 0.88;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .searchMenu {
    @apply fixed bottom-0  z-[1001] bg-surface-purple rounded-t-[32px] p-6 shadow-2xl transition-transform duration-300 translate-y-full;
  }

  .search-menu-container {
    width: 100%;
    max-width: 425px;
    height: 193px;
    padding: 16px 24px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(180deg, #E9B402 0%, #E9B402 100%);
  }

  .menu-title-text {
    @apply uppercase tracking-wider mb-[6px] text-start text-[#a4acb9] font-sans text-[14px] font-normal leading-[155%];
  }

  .accent-divider {
    @apply w-full mb-2 h-[2px] bg-[#523c8c] rounded-[100px] mt-4;
  }

  .menu-action-btn {
    @apply flex items-start gap-4 text-left w-full active:opacity-60 transition;
  }

  .cert-card-container {
    display: flex;
    width: 100%;
    height: 178px;
    padding: 24px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    border-radius: 12px;
    background: linear-gradient(180deg, #4a2f78 15.38%, #251b36 100%);
    @apply shadow-2xl;
  }

  /* logo title style (Line 3 in your request) */
  .text-logo-title {
    @apply font-['Roboto'] text-[10px] font-normal leading-[126%] text-[#D4D4D4];
  }

  /* course title style (Line 4 in your request) */
  .text-course-title {
    @apply font-['Roboto'] text-[16px] font-medium leading-[130%] text-text-desc;
  }

  /* date and mentor text (Line 5 & 7 in your request) */
  .text-meta-small {
    @apply font-['Roboto'] text-[12px] font-normal leading-normal text-muted;
  }

  /* user name style (Line 6 in your request) */
  .text-user-name {
    @apply font-['Roboto'] text-[14px] font-semibold leading-normal text-text-desc;
  }

  /* card main container */
  .download-card-wrapper {
    @apply flex w-full flex-col items-start gap-[12px];
  }

  /* individual card style */
  .course-download-card {
    @apply flex p-2 justify-center items-center self-stretch rounded-[12px];
    background: #1c1c1c; /* --Card-Color-BG */
  }

  /* card image */
  .course-card-thumb {
    @apply w-[160px] h-[99px] rounded-[4px] object-cover flex-shrink-0;
  }

  /* card title */
  .course-card-title {
    @apply font-['Roboto'] text-[16px] font-medium leading-[121%] text-white;
  }

  /* small meta text (20 Videos & Ratings) */
  .text-meta-v2 {
    @apply font-['Roboto'] text-[10px] font-normal leading-[127%] text-[#A4ACB9];
  }

  /* download status section */
  .download-status-row {
    @apply flex items-center gap-[46px] mt-2;
  }

  /* wishlist main container */
  .wishlist-grid {
    @apply grid grid-cols-2 gap-[11px] w-full;
  }

  /* your given individual card style */
  .wishlist-card {
    display: flex;
    width: 100%;
    padding-bottom: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #1c1c1c;
    @apply relative overflow-hidden;
  }

  /* card image style */
  .wishlist-img {
    height: 106px;
    @apply w-full rounded-t-[12px] object-cover;
  }

  /* image bookmark icon */
  .wishlist-bookmark {
    @apply absolute right-[10px] top-[8px] w-5 h-5 z-10;
  }

  /* date and time text */
  .text-date-meta {
    @apply font-['Roboto'] text-[12px] font-normal leading-[145%] text-[#9AA4B2];
  }

  /* price text */
  .text-price-v2 {
    @apply font-['Roboto'] text-[16px] font-medium leading-[110%] text-text-desc;
  }

  /* section header (Today/Yesterday) */
  .notif-section-header {
    @apply flex justify-between items-start self-stretch;
  }

  /* notification item row */
  .notif-item {
    @apply flex items-start gap-[12px] self-stretch rounded-xl;
  }

  /* notification circle icon */
  .notif-icon-circle {
    @apply w-[36px] h-[36px] bg-primary rounded-full flex items-center justify-center shrink-0;
  }

  /* notification title (Line 14px) */
  .notif-title {
    @apply font-['Roboto'] text-[14px] font-medium leading-[140%] text-[#D4D4D4];
  }

  /* notification description (Line 12px) */
  .notif-desc {
    @apply font-['Roboto'] text-[12px] font-normal leading-[118%] text-[#999999];
  }
  /* review section header */
  .review-rating-box {
    @apply flex h-[75px] justify-between items-start self-stretch;
  }

  /* progress bar style */
  .progress-bar-bg {
    @apply w-[117px] h-[4px] rounded-[5px] bg-[#999999];
  }
  .progress-bar-fill {
    @apply h-full bg-accent rounded-[5px];
  }

  /* review card main container */
  .review-card-list {
    @apply flex w-full flex-col items-start gap-[12px];
  }

  /* single review card */
  .review-card {
    @apply flex p-[8px_16px] flex-col items-start gap-[10px] self-stretch rounded-[8px] bg-surface-purple;
  }

  .review-user-img {
    @apply flex w-[46px] h-[46px] flex-col items-start gap-[10px] shrink-0 
           aspect-square rounded-[100px] bg-no-repeat 
           bg-[0px_-2.254px] bg-[length:100%_150%];

    background-color: lightgray;
  }
  /* Active Section Wrapper */
  .reminder-active-row {
    @apply flex w-full py-2 justify-between items-center;
  }

  /* Toggle Switch Background */
  .toggle-bg {
    @apply flex w-[44px] h-[24px] p-[2px] items-center shrink-0 rounded-[12px] transition-colors duration-300 cursor-pointer;
  }

  /* Day Buttons Container */
  .days-wrapper {
    @apply flex items-center content-center gap-[12px] self-stretch flex-wrap w-full;
  }

  /* Day Button - Base */
  .day-btn {
    @apply flex h-[40px] px-[18px] py-[4px] justify-center items-center gap-[10px] rounded-[8px] border border-white/10 transition-all;
  }

  /* Day Button - Deactive */
  .day-btn-deactive {
    @apply day-btn bg-transparent;
    color: #898989; /* --Disable-Button */
    font-family: "Roboto";
    font-size: 14px;
  }

  /* Day Button - Active */
  .day-btn-active {
    @apply day-btn bg-surface-purple; /* Using your card/button theme */
    color: #cdcdcd; /* --Gray */
    font-family: "Roboto";
    font-size: 16px;
  }
  /* --- Subscription Page Specific Utils --- */
  .sub-card {
    @apply flex p-[12px_16px] items-center gap-[8px] self-stretch rounded-[8px] bg-surface-purple;
  }

  .sub-visit-btn {
    @apply flex px-[18px] py-[6px] justify-center items-center gap-[10px] rounded-[6px] border-[1.4px] border-[#743FFE] transition-all active:scale-95;
  }

  /* --- Typography Utils --- */
  .text-card-title {
    @apply text-[#D4D4D4] font-['Roboto'] text-[16px] font-medium leading-[120%];
  }

  .text-card-sub {
    @apply text-[#898989] font-['Roboto'] text-[14px] font-normal leading-[120%];
  }

  .text-btn-small {
    @apply text-[#CDD5DF] font-['Roboto'] text-[14px] font-medium leading-normal;
  }

  /* --- Avatar Utils --- */
  .avatar-md {
    @apply w-[42px] h-[42px] shrink-0 rounded-full bg-cover bg-center bg-no-repeat bg-[#D9D9D9];
  }
  /* --- FAQ Typography Utils --- */
  .text-faq-title {
    @apply text-white font-['Roboto'] text-[16px] font-medium leading-[130%] tracking-[0.16px];
  }

  .text-faq-subtitle {
    @apply text-[#D4D4D4] font-['Roboto'] text-[14px] font-normal leading-[130%] tracking-[0.14px];
  }

  .text-faq-desc {
    @apply text-muted font-['Roboto'] text-[12px] font-normal leading-[128%];
  }

  /* --- Accordion Utils --- */
  .faq-accordion-item {
    @apply flex flex-col items-start gap-[12px] w-full transition-all duration-300;
  }

  .faq-header {
    @apply flex justify-between items-center self-stretch cursor-pointer py-2;
  }

  .faq-header-text {
    @apply text-text-desc font-['Roboto'] text-[12px] font-medium leading-[130%];
  }

  .faq-answer-text {
    @apply text-[#898989] font-['Roboto'] text-[12px] font-normal leading-[130%] tracking-[0.12px] pb-3 overflow-hidden;
  }

  .faq-active-card {
    @apply bg-surface-purple rounded-[8px] p-[12px_16px] !important;
  }

  /* --- Message Page Specific Utils --- */
  .search-bar-wrap {
    @apply flex w-full h-[44px] px-[12px] items-center gap-[14px] rounded-[12px] border border-[#523C8C];
  }

  .search-input {
    @apply bg-transparent outline-none flex-1 text-muted font-['Roboto'] text-[14px] font-normal leading-[155%] tracking-[-0.28px];
  }

  .tab-btn {
    @apply flex h-[38px] px-[18px] py-[8px] justify-center items-center gap-[6px] rounded-[8px] transition-all duration-200 text-sm font-medium font-['Roboto'];
  }

  .tab-btn-active {
    @apply bg-primary text-white;
  }

  .tab-btn-inactive {
    @apply border border-muted-dark text-text-desc;
  }

  /* --- Message Card Utils --- */
  .msg-card {
    @apply flex w-full justify-between items-center  cursor-pointer active:opacity-70;
  }

  .msg-badge {
    @apply w-[20px] h-[20px] rounded-full bg-primary flex items-center justify-center text-white text-[12px] font-semibold leading-[130%];
  }

  .text-msg-name {
    @apply text-[#D4D4D4] font-['Roboto'] text-[14px] font-medium leading-[130%];
  }

  .text-msg-body {
    @apply text-[#9AA4B2] font-['Roboto'] text-[12px] font-normal leading-[130%];
  }

  .text-msg-time {
    @apply text-[#697586] text-right font-['Roboto'] text-[12px] font-normal leading-[130%];
  }
  .hidden-state {
    display: none !important;
  }

  /* global utility to hide scrollbar */
  .no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* --- Chat Bubble Utils --- */
  .chat-msg-sent {
    @apply flex p-[10px_14px] justify-center items-center gap-[10px] self-stretch rounded-[15px_0px_15px_15px] bg-surface-purple;
  }

  .chat-msg-received {
    @apply flex w-[263px] p-[10px_14px] justify-center items-center gap-[10px] rounded-[0px_15px_15px_15px] bg-[#A4ACB9];
  }

  /* --- Typography Utils --- */
  .text-chat-sent {
    @apply text-text-desc font-['Roboto'] text-[14px] font-normal leading-[120%];
  }

  .text-chat-received {
    @apply text-muted-dark font-['Roboto'] text-[14px] font-normal leading-[120%];
  }

  .text-chat-time {
    @apply text-[#9AA4B2] font-['Roboto'] text-[12px] font-normal leading-[120%];
  }

  /* --- Input Area Utils --- */
  .chat-input-wrap {
    @apply flex w-full p-[4px_4px_4px_16px] justify-between items-center rounded-full border-[1.5px] border-surface-purple  bg-transparent;
  }
  /* --- Profile Specific Utils --- */

  /* profile header card */
  .profile-header-card {
    @apply flex w-full p-[12px_0_12px_12px] items-center gap-[10px] rounded-[8px] bg-surface-purple;
  }

  /* list item container */
  .profile-list-wrap {
    @apply inline-flex flex-col items-start rounded-[8px] bg-surface-purple w-full  overflow-hidden;
  }

  /* single list item (Card) */
  .profile-item-card {
    @apply flex p-[14px_16px] justify-between items-center self-stretch  active:bg-[#3a2b61] border-b border-muted-dark last:border-0;
  }

  /* --- Typography Utils --- */
  .text-profile-name {
    @apply text-[#CDCDCD] font-['Roboto'] text-[16px] font-medium leading-[120%];
  }

  .text-profile-mail {
    @apply text-text-desc font-['Roboto'] text-[12px] font-normal leading-[120%] tracking-[0.12px];
  }

  .text-profile-item {
    @apply text-text-desc font-['Roboto'] text-[14px] font-normal leading-normal;
  }
  /* --- Personal Info Utils --- */
  .input-label {
    @apply text-text-desc font-['Roboto'] text-[14px] font-normal mb-2 block;
  }

  .info-input-field {
    @apply w-full bg-surface-purple border-none rounded-[8px] p-[14px_16px] text-text-desc font-['Roboto'] text-[14px] outline-none placeholder:text-[#697586];
  }

  .btn-primary-lg {
    @apply w-full py-4 bg-primary text-white rounded-[12px] font-['Roboto'] text-[16px] font-medium transition-all block;
  }
  /* payment card container */
  .payment-card-wrap {
    @apply flex w-full flex-col justify-center items-center gap-4;
  }

  /* single payment card */
  .payment-item-card {
    @apply flex h-[52px] px-4 justify-between items-center self-stretch rounded-[8px] bg-surface-purple;
  }

  /* typography */
  .text-payment-method {
    @apply text-text-desc font-['Roboto'] text-[16px] font-normal leading-[130%];
  }

  .text-connected {
    @apply text-accent text-right font-['Roboto'] text-[12px] font-normal leading-[155%];
  }

  .text-option-label {
    @apply text-text-desc text-center font-['Roboto'] text-[16px] font-medium leading-[124%];
  }
  /* common card image style */
  .card-preview-img {
    @apply w-full h-[190px] rounded-[15px] object-cover  block;
  }

  /* text style */
  .text-default-method {
    @apply text-text-desc font-['Roboto'] text-[14px] font-normal leading-[160%];
  }

  .text-inactive-method {
    @apply text-[#999] font-['Roboto'] text-[14px] font-light leading-[160%];
  }
  /* custom radio container */
  .custom-radio {
    @apply w-5 h-5 rounded-full border-2 border-primary flex items-center justify-center transition-all duration-200 cursor-pointer overflow-hidden;
  }

  /* when input checked change background and icon */
  input[type="radio"]:checked + .custom-radio {
    @apply bg-primary border-primary;
  }

  /* tick mark icon hidden by default */
  .radio-tick {
    @apply hidden w-3 h-3 invert; /* invert is used to make icon white */
  }

  input[type="radio"]:checked + .custom-radio .radio-tick {
    @apply block;
  }
  .btn-manual-outline {
    @apply flex w-full h-[48px] justify-center items-center gap-2 rounded-[8px] border-[1.5px] border-[#523C8C] bg-[#140F20] transition-all active:scale-95;
    @apply text-text-desc text-center font-['Roboto'] text-[16px] font-medium leading-[155%];
  }

  /* for language card */
  .lang-card {
    @apply flex h-[48px] px-3 py-[15px] justify-between items-center self-stretch rounded-[8px] bg-surface-purple transition-all active:scale-[0.98];
  }

  /* title (Suggested/Others) */
  .text-lang-title {
    @apply text-[#FFF] font-['Roboto'] text-[16px] font-medium leading-[130%];
  }

  /* card inner text */
  .text-lang-name {
    @apply text-text-desc font-['Roboto'] text-[16px] font-normal leading-[130%];
  }

  /* custom radio button (with tick mark) */
  .lang-radio {
    @apply w-5 h-5 rounded-full border-2 border-[#999] flex items-center justify-center transition-all cursor-pointer;
  }

  /* toggle slot (background) */
  .toggle-slot {
    @apply w-[44px] h-[24px] bg-[#999] rounded-full p-[2px] transition-all duration-300;
  }

  /* toggle dot (white round part) */
  .toggle-dot {
    @apply w-[20px] h-[20px] bg-white rounded-full transition-all duration-300;
  }

  /* slot turns purple when input checked */
  .toggle-checkbox:checked + .toggle-slot {
    @apply bg-primary;
  }

  /* dot moves right when input checked */
  .toggle-checkbox:checked + .toggle-slot .toggle-dot {
    @apply translate-x-[20px];
  }

  /* custom logic for toggle on-off */
  .toggle-checkbox:checked + .toggle-slot {
    background-color: #E9B402 !important;
  }
  .toggle-checkbox:checked + .toggle-slot .toggle-dot {
    transform: translateX(20px);
  }
  @layer components {
    /* main heading (Effective Date) */
    .h-policy-title {
      @apply text-[#FFF] font-['Roboto'] text-[16px] font-medium leading-[130%];
    }

    /* card heading (1, 2, 3...) */
    .h-policy-card-head {
      @apply text-text-desc font-['Roboto'] text-[16px] font-medium leading-[130%];
    }

    /* card paragraph text */
    .text-policy-desc {
      @apply text-[#999] font-['Roboto'] text-[14px] font-normal leading-[130%];
    }

    /* custom purple scrollbar */
    .custom-scrollbar::-webkit-scrollbar {
      width: 2px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #ffffff1a;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #E9B402;
      border-radius: 10px;
    }
  }
}

/* ==========================================================================
   8. BACKGROUND IMAGES
   ========================================================================== */
.bg-onboarding-1 {
  background-image: url("../assets/images/02_Onboarding.png");
}
.bg-onboarding-2 {
  background-image: url("../assets/images/03_Onboarding.png");
}
.bg-onboarding-3 {
  background-image: url("../assets/images/04\ Onboarding.png");
}
.bg-login {
  background-image: url("../assets/images/Login-bg.png");
}