@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
    --primary-pink: #ff6f91;
    --dark-pink: #d45271;
    --soft-pink: #ff9a9e;
    --accent-pink: #fad0c4;
    --glass: rgba(255, 255, 255, 0.2);
    --glass-border: rgba(255, 255, 255, 0.4);
    --text-dark: #2d3436;
    --shadow: 0 8px 32px rgba(255,111,145,0.2);
}


*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:linear-gradient(-45deg,#ff9a9e,#fad0c4,#fbc2eb,#a18cd1);
    background-size:400% 400%;
    animation:gradientBG 15s ease infinite;
    min-height:100vh;
    color:var(--text-dark);
    overflow-x:hidden;
}

@keyframes gradientBG{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

template{display:none!important;}


.overlay{
    position:fixed!important;
    inset:0!important;
    width:100% !important;
    height:100% !important;

    background:rgba(0,0,0,.75);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

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

    padding:20px;
    z-index:10000!important;
}

.overlay.active{
    display:flex!important;
}

.overlay-content {
    background: #fff;
    width: 90%;
    max-width: 450px;
    max-height: 85vh;
    border-radius: 35px;
    padding: 35px;
    position: relative;
    text-align: center;
    border: 3px solid var(--primary-pink);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow-y: visible; 
    
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.overlay.active .overlay-content {
    transform: scale(1);
}

.overlay-content > *:not(#overlay-profile-img):not(#close-overlay) {
    overflow-y: auto;
}

.overlay-content::-webkit-scrollbar{
    width:6px;
}


#overlay-profile-img {
    width: 120px;
    height: 120px;
    border-radius: 40px;
    object-fit: cover;

    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -60%);

    border: 5px solid white;
    background: white;

    z-index: 99999;
    pointer-events: none;
}

.gallery{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:15px 0;
    justify-content:center;
    scrollbar-width:none;
}

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

.gallery-img{
    width:70px;
    height:70px;
    border-radius:15px;
    object-fit:cover;
    cursor:pointer;
    border:2px solid transparent;
}


.image-preview{
    position:fixed!important;
    inset:0!important;
    width:100% !important;
    height:100% !important;

    background:rgba(0,0,0,.9);
    backdrop-filter:blur(20px);

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

    z-index:200000!important;
}

.image-preview.active{
    display:flex!important;
}

.image-preview img{
    max-width:95%;
    max-height:80vh;
    border-radius:15px;
    box-shadow:0 0 50px rgba(0,0,0,.5);
}


#close-overlay,
#closePreview{
    position:absolute;
    top:10px;
    right:25px;
    font-size:2.5rem;
    font-weight:bold;
    cursor:pointer;
    z-index:20001;
}

#close-overlay{
    color:var(--dark-pink);
}

#closePreview{
    color:white;
    background:rgba(255,255,255,.2);
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}


.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 25px;
    background:var(--glass);
    backdrop-filter:blur(15px);
    border-radius:20px;
    margin:15px;
    border:1px solid var(--glass-border);
}


#cards-container{
    display:grid;
    padding:20px;
    gap:20px;
    grid-template-columns:repeat(2,1fr);
}

@media(min-width:768px){
    #cards-container{
        grid-template-columns:repeat(4,1fr);
    }
}

.card.glass{
    background:rgba(255,255,255,.3);
    backdrop-filter:blur(10px);
    border-radius:25px;
    padding:15px;
    text-align:center;
    border:1px solid var(--glass-border);
    transition:.3s;
}

.card.glass img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:20px;
}


input,select{
    width:100%;
    padding:14px;
    margin-bottom:12px;
    border-radius:15px;
    border:1px solid var(--glass-border);
    background:rgba(255,255,255,.5);
    font-family:inherit;
}

button{
    background:linear-gradient(
        90deg,
        var(--primary-pink),
        var(--dark-pink)
    );
    color:white;
    padding:15px 20px;
    border-radius:18px;
    border:none;
    font-weight:700;
    text-transform:uppercase;
    cursor:pointer;
    width:100%;
    margin-top:10px;
    box-shadow:0 10px 20px rgba(255,111,145,.3);
}

button:active{
    transform:scale(.98);
}

#reportUserBtn{
    background:transparent;
    box-shadow:none;
    color:#ff4757;
    font-size:.8rem;
    text-decoration:underline;
    margin-top:15px;
}


#profile-pic{
    width:60px;
    height:60px;
    border-radius:20px;
    object-fit:cover;
    border:3px solid white;
    cursor:pointer;
    transition:.3s cubic-bezier(.175,.885,.32,1.275);
}

#profile-pic:hover{
    transform:scale(1.1) rotate(3deg);
}

.profile-pic-nav{
    width:45px;
    height:45px;
    border-radius:12px;
    cursor:pointer;
    border:2px solid white;
    object-fit:cover;
}


.user-drawer{
    position:fixed;
    top:0;
    right:-100%;
    width:320px;
    height:100% !important;
    z-index:2000;
    transition:.5s cubic-bezier(.77,.2,.05,1);
    padding:40px 20px;
    background:rgba(255,255,255,.9)!important;
    box-shadow:-10px 0 30px rgba(0,0,0,.1);
}

.user-drawer.open{
    right:0;
}

.close-drawer{
    position:absolute;
    top:20px;
    left:20px;
    font-size:2rem;
    cursor:pointer;
}

.drawer-avatar{
    width:120px;
    height:120px;
    border-radius:30px;
    object-fit:cover;
    display:block;
    margin:0 auto 15px;
    border:4px solid var(--primary-pink);
}

.drawer-content{
    text-align:center;
}

.drawer-gallery .gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:15px;
}

.drawer-gallery img{
    width:100%;
    height:70px;
    border-radius:10px;
    object-fit:cover;
}


   #paywall-overlay .overlay{
    position:fixed!important;
    inset:0!important;
    width:100vw;
    height:100vh;

    background:rgba(0,0,0,.75);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

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

    padding:20px;
    z-index:10000!important;
}

.overlay.active{
    display:flex!important;
}

#paywall-overlay .overlay-content {
    background: rgba(255, 255, 255, 0.98);
    width: 90%;
    max-width: 400px;
    border-radius: 40px;
    padding: 30px;
    border: 1px solid white;
    text-align: center;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    max-height: 90vh;    
    overflow-y: auto;     
}
#paywall-overlay .overlay-content::-webkit-scrollbar {
    width: 6px;
}



.floating-footer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px; 
  z-index: 15000;
}

.footer-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  cursor: pointer;
  color: white;
  font-size: 1.5rem;
  position: relative;
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease, background 0.3s ease;
}

.footer-btn:hover {
  transform: translateY(0) scale(1.1);
  background: rgba(255,255,255,0.35);
}

.footer-btn:nth-child(1){ animation: floatIn 0.6s forwards 0.2s; }
.footer-btn:nth-child(2){ animation: floatIn 0.6s forwards 0.4s; }
.footer-btn:nth-child(3){ animation: floatIn 0.6s forwards 0.6s; }
.footer-btn:nth-child(4){ animation: floatIn 0.6s forwards 0.8s; }

@keyframes floatIn {
  0% { transform: translateY(100px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.tooltip {
  position: fixed;
  z-index: 16000;
  padding: 8px 12px;
  background: rgba(0,0,0,0.7);
  color: white;
  border-radius: 8px;
  font-size: 0.8rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.floating-overlay .overlay-content {
  max-width: 400px;
  border-radius: 30px;
  padding: 30px;
  text-align: center;
}

.footer-btn-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;     
  object-fit: cover;      
  display: block;
  pointer-events: none;   
}

.slide {
  display: none;
  animation: fadeIn 0.3s ease;
}

.slide.active {
  display: block;
}

.overlay-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.overlay-nav button {
  position: relative;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ff6f91;

  padding: 8px 18px;
  border-radius: 12px;

  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.4px;

  cursor: pointer;
  transition: all 0.25s ease;

  box-shadow:
    0 4px 15px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.4);

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

  overflow: hidden;
}
.overlay-nav button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}


#to-login,
#to-register {
    color: var(--dark-pink);
    cursor: pointer;              
    transition: all 0.2s ease;      
}

.advanced-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1); 
  border-top: 4px solid #ff4d91; 
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
  box-shadow: 0 0 15px rgba(255, 77, 145, 0.5); 
}

.advanced-spinner::after {
  content: '';
  position: absolute;
  top: 5px; left: 5px; right: 5px; bottom: 5px;
  border: 2px solid transparent;
  border-bottom: 2px solid #ff85b3; 
  border-radius: 50%;
  opacity: 0.6;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.card-tier-tag {
  position: relative;
  display: inline-block;
  padding: 5px 14px 6px 18px;   
  font-size: 0.78rem;
  font-weight: 700;
  font-family: 'Georgia', 'Times New Roman', serif; 
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: white;
  border-radius: 4px 12px 12px 4px;  
  box-shadow: 
    0 2px 5px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transform: rotate(-4deg);          
  transform-origin: top right;   
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
}

.card-tier-tag::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #444;
  border-radius: 50%;
  box-shadow: 
    inset 0 1px 2px #222,
    0 1px 3px rgba(0,0,0,0.4);
  z-index: -1;
}

.card-tier-tag::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: -10px;
  width: 20px;
  height: 12px;
  background: inherit;
  transform: skewX(-20deg) rotate(-6deg);
  opacity: 0.7;
  filter: blur(1px);
  z-index: -2;
}

.card-tier-tag.premium {
  background: linear-gradient(135deg, #d0d0d0, #b0b0b0);
  color: #444;
  border: 1px solid #999;
}

.card-tier-tag.legend {
  background: linear-gradient(135deg, #f1c40f, #d4af37);
  color: #1a1a1a;
  border: 1px solid #b8860b;
  box-shadow: 0 2px 8px rgba(212,175,55,0.4);
}

.card-tier-tag.elite {
  background: linear-gradient(135deg, #a569bd, #8e44ad);
  color: white;
  border: 1px solid #6c3483;
  box-shadow: 0 3px 12px rgba(142,68,173,0.5);
}

.card-tier-tag:hover {
  transform: rotate(-2deg) scale(1.08);
  transition: all 0.18s ease;
}

@media (max-width: 767px) {

  .content-body {
    padding: 0 12px 24px;   
    margin: 0 auto;
    max-width: 100%;
  }

  #search-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 0;
    margin: 0 auto;
    max-width: 420px;
    width: 100%;
  }

  #search-section select,
  #search-section button {
    width: 100%;
    max-width: 380px;
  }

  #cards-container {
    display: grid !important;              
    grid-template-columns: repeat(2, 1fr); 
    gap: 16px;                            
    justify-content: center;              
    padding: 16px 0;
    margin: 0 auto;
    max-width: 420px;                   
    width: 100%;
  }

  .navbar {
    padding: 12px 16px;
  }

  .profile-pic-nav {
    width: 42px;
    height: 42px;
  }

  .banner-sleek,
  .glass-warning {
    margin: 16px auto;
    max-width: 420px;
    width: 100%;
    text-align: center;
  }
}


#pwa-install-banner {
  position: fixed !important;
  bottom: -100px;                    
  left: 0;
  right: 0;
  z-index: 15000 !important;       
  background: rgba(255, 111, 145, 0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(255, 111, 145, 0.35) !important;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25) !important;
  transition: bottom 0.4s ease-out !important;
  padding: 12px 16px !important;
  color: white !important;
  font-family: 'Poppins', sans-serif !important;
  pointer-events: auto !important;  
}

#pwa-install-banner.visible {
  bottom: 0 !important;
}


#pwa-install-banner {
  z-index: 15000 !important;      
}

.install-banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 640px;
  margin: 0 auto;
  gap: 16px;
}

.banner-text {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.4;
}

.banner-text strong {
  color: #ff6f91;
  font-weight: 700;
}

.banner-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.install-btn {
  background: linear-gradient(90deg, #ff6f91, #d45271);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.install-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 111, 145, 0.4);
}

.close-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  font-size: 1.6rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}