Tinder/*
Theme Name: ArrowX Coupons
Author: ArrowX Team
Description: ArrowX is a clean, modern WordPress theme built for a coupon and deals website that offers latest promo codes, discounts, and special offers for popular brands and online stores. The design focuses on user-friendly browsing of coupons, with easy navigation, clear deal listings, and sections for featured & trending offers. The theme is responsive, ensuring it looks great on both desktop and mobile devices, and optimized for fast performance and SEO so users can quickly find the best savings. The homepage layout highlights top deals, categories, and search functionality, making it ideal for coupon blogs, deal directories, and affiliate marketing sites.
Version: 1.0
*/

body {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 16px;
	color: #000;
	background-color: #FFFFFF;Tinder
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
}

a {
	-webkit-transition: all 0.2s ease-in-out 0s;
	-moz-transition: all 0.2s ease-in-out 0s;
	-ms-transition: all 0.2s ease-in-out 0s;
	-o-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;
	color: #000;
	text-decoration: none !important;
}
a:hover, a:visited, a:focus, a:active, button:hover, button:visited, button:active, button:focus {
	text-decoration: none !important;
	outline: none !important;
	color: #000;
}
::selection {
	background: #000;
	color: #fff;
	text-shadow: none;
}
::-moz-selection {
	background: #000;
	color: #fff;
	text-shadow: none;
}
.bg-image{
    background-size: cover;
    background-position: center;
}
#errorModal .modal-content,
.code,
.form-control{
    background-image: linear-gradient(45deg, #eaeffd, #dff1ec, #fffaec);
    height: auto;
    padding: 20px 25px;
    border-radius: 6px;
    border: 0;
}
.code{
    font-size: 24px;
}
.rating-note{
    font-size: 11px;
}
.btn{
    border-radius: 50px;
    font-weight: 600;
    padding: 10px 25px;
}
.btn-warning {
    color: #000;
    background-color: #E9D175;
    border-color: #E9D175;
}

.bg-purple{
    background-color: #7e00fd;
}
.btn-purple {
    color: #fff;
    background-color: #161c2d;
    border: 0;
    font-weight: 300;
}
.btn-purple:hover{
    color: #fff;
    background-color: transparent;
}

header {
    position: relative;
    box-shadow: 0 0 50px rgb(0 0 0 / 30%);
    background-color: #183d4b;
    min-height: 250px; 

}


#pagebg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

header .container {
    position: relative;
    z-index: 1;
}
.font-weight-200{
    font-weight: 200;
}

.site-logo {
    width: 250px;
    height: 53px;
    margin: 0 auto;
    overflow: hidden;
}

.site-logo img {
    width: 250px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.custom-logo-link img {
    max-width: 250px !important;
    height: auto !important;
}

#pagebg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.btn-search{
    position: absolute;
    background-color: #183d4b;
    border-radius: 6px;
    height: calc(100% - 10px);
    margin-right: 5px;
    color: #fff;
    font-size: 16px;
}
.btn-search:hover{
    background-color: #fff;
    color: #473bf0;
}
.card{
    box-shadow: 0 20px 40px rgb(0 0 0 / 20%);
    border: 0;
    border-radius: 15px;
}
.single-coupon{
    background-color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    margin: 0 5px;
    border-bottom: 3px solid #d6d6d6;
}
.single-coupon h5{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.single-coupon-image{
    height: 120px;
    width: 150px;
}
.single-coupon-page-image{
    width: 100%;
    height: 350px;
}

.single-coupon-image-top {
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
}

.single-coupon-image-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}

.single-coupon-left{
    border: 2px dashed #fff;
    background-color: #7af6cf;
    padding: 10px 5px;
    border-radius: 5px;
    text-align: center;
    color: #000;
    font-weight: 400;

}
.single-category{
    background-color: rgb(180 8 187);
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 15px;
}
.progressbar-wrapp {
    height: 200px;
    width: 200px;
    position: relative;
}

.beat-title{
  animation: 1.5s ease 0s infinite beat;
}
.title-short{
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    color: #161c2d;
}
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 35px;
    height: 35px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: #161c2d;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.slick-prev {
    left: -35px;
}
.slick-next {
    right: -35px;
}
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-next:before {
    content: '→';
}
.slick-prev:before {
    content: '←';
}
    .one-line-small{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
.rating-wrapp{
    font-size: 12px;
}
.search-wrap{
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 999;
    text-align: left;
}

.btn-outline-light {
    color: #000;
    border-color: #000;
    background-color: #7af6cf;
}
/**/
@media screen and (max-width: 480px) {
    body{
        font-size: 14px;
    }
    .btn {
        padding: 5px 10px;
        font-size: 12px;
    }
    .single-coupon-image {
        height: 90px;
        border-radius: 10px;
    }
    .single-coupon-left:not(.single-page) {
        font-size: 10px;
        padding: 3px;
    }
    .content{
        font-size: 12px;
    }
    .content h6{
        font-size: 14px;
    }
    .single-coupon-top h5{
        font-size: 16px;
    }
    .single-coupon{
        margin: 0;
    }
    .single-coupon-top{
        margin: 0 10px;
        overflow: hidden;
        max-height: 250px !important;
    }
    .slick-prev, .slick-next{
        z-index: 999;
        box-shadow: 0 0 10px #000;
    }
    .slick-prev {
        left: -10px;
    }
    .slick-next {
        right: -10px;
    }
    .btn-search{
        padding: 5px 20px;
        font-size: 14px;
    }
    .rating-wrapp{
        font-size: 10px;
        margin-bottom: 5px;
    }
    .single-coupon-page-image{
        height: 200px;
    }
    .open-modal{
        padding: 5px 10px;
    }
    .title-short {
        font-size: 26px;
        line-height: 24px;
    }
}
@keyframes beat {
  0%, 50%, 100% { transform: scale(1, 1); }
  30%, 80% { transform: scale(0.92, 0.95); }
}

.body-top {
        margin-top: 20px;
    }


/* Instruction */
.cpa-steps-box {
  background: #ffffff;
  border: 1px solid #e6e9f0;
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
}

.cpa-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

.cpa-steps {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cpa-steps li {
  font-size: 13px;
  margin-bottom: 6px;
  line-height: 1.45;
}
ul {
  list-style-type: none; /* Removes default bullets */
}

.cpa-steps li::before {
  content: "▸ "; /* Adds a black triangle */
  color: #333;
  font-weight: bold;
  display: inline-block; /* Allows margins to be set correctly */
  margin-right: 8px; /* Adds space between the marker and the text */
}


.cpa-note {
  margin-top: 10px;
  font-size: 13px;
  background: #fff8e5;
  border-left: 4px solid #ffb400;
  padding: 8px 10px;
  border-radius: 6px;
}

/* details page responsive */
@media (max-width: 576px){
  .row{
    border-right: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
}

/* tablet + below */
@media (max-width: 992px){
  .row{
    border-right: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
}


.seo-links ul li { display:block; }


/* ===============================
   Post Category & Tag Style
================================*/

.post-meta{
  margin:15px 0;
  font-size:14px;
  line-height:1.6;
}

.post-cat,
.post-tag{
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

/* Label */
.post-meta strong{
  margin-right:6px;
  margin-bottom:0;
  display:inline;
  color:#183d4b;
  font-weight:500;
}


/* Badge */
.post-meta a{
  display:inline-block;
  padding:5px 14px;
  margin:3px 6px 3px 0;
  background:#183d4b;
  color:#fff !important;
  border-radius:50px;
  font-weight:500;
  font-size:13px;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  position:relative;
  overflow:hidden;
  transition:all .25s ease;
}

/* Hover */
.post-meta a:hover{
  background:#7e00fd;
  color:#fff !important;
}

/* Shine Effect */
.post-meta a::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,
    transparent,
    rgba(255,255,255,.25),
    transparent
  );
  opacity:0;
  transition:.3s;
}

.post-meta a:hover::after{
  opacity:1;
}


/* ===============================
   Author
================================*/

/* ArrowX Author Box Styles

/* কন্টেইনার */
.author-card-final {
    max-width: 450px !important;
    margin: 40px auto !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 25px !important;
    padding: 40px 25px !important;
    text-align: center !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ছবি ঠিক করা */
.author-avatar img {
    width: 130px !important;
    height: 130px !important;
    border-radius: 50% !important;
    margin: 0 auto 20px !important;
    display: block !important;
}

/* নাম ও টাইটেল */
.author-name {
    font-size: 38px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    color: #111 !important;
}

.author-title {
    font-size: 16px !important;
    color: #888 !important;
    margin: 5px 0 25px 0 !important;
}

/* সোশ্যাল রো */
.author-social {
    display: flex !important;
    align-items: center !important;
    justify-content: left !important;
    gap: 0px !important;
    margin-bottom: 25px !important;
}

.author-dash {
    color: #000000 !important;    /* একদম নিখুঁত কালো রঙ */
    font-size: 14px !important;    /* ছোট করার জন্য (আপনি চাইলে ১২ বা ১৬ করতে পারেন) */
    font-weight: 900 !important;   /* অতিরিক্ত বোল্ড করার জন্য */
    margin: 0 8px !important;      /* দুই পাশে সামঞ্জস্যপূর্ণ ফাঁকা জায়গা */
    display: inline-block !important; 
    vertical-align: middle !important; /* আইকনগুলোর সাথে সমান লাইনে রাখার জন্য */
}

.author-icons {
    display: flex !important;
    gap: 15px !important;
}

.author-icons a {
    color: #111 !important;
    font-size: 20px !important;
}

/* আইকন কন্টেইনার */
.author-v-badge {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
}

/* আইকন যাতে শার্প দেখায় */
.author-v-badge svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    shape-rendering: geometricPrecision !important; 
    filter: none !important;
    stroke: none !important;
}

/* বায়ো বক্স */
.author-bio-box {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #444 !important;
    margin-bottom: 30px !important;
    text-align: left !important;
}

/* বাটন স্টাইল */
.author-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.author-btn {
    display: block !important;
    padding: 14px !important;
    border: 1.5px solid #e5e5e5 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: #111 !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    transition: all 0.3s !important;
}

.author-btn:hover {
    background: #f9f9f9 !important;
    border-color: #ccc !important;
}


/* ===============================
   Tablet (<= 768px)
================================*/

@media (max-width:768px){

  .post-meta{
    font-size:13px;
  }

  .post-meta a{
    padding:5px 12px;
    font-size:12.5px;
  }

}


/* ===============================
   Mobile (<= 576px)
================================*/

@media (max-width:576px){

  .post-meta{
    font-size:13px;
  }

  .post-meta strong{
    display:block;
    margin-bottom:4px;
  }

  .post-meta a{
    padding:4px 10px;
    font-size:12px;
    margin:3px 4px 3px 0;
  }

  .post-cat,
  .post-tag{
    margin-bottom:10px;
  }

}


/* ===============================
   Archive Header
================================*/

.archive-header{
  text-align:center;
  padding:25px 15px 15px;
  border-bottom:1px solid rgba(0,0,0,.08);
  margin-bottom:25px;
}

.archive-breadcrumb{
  text-align:left;
  font-size:13px;
  color:#666;
  margin-bottom:6px;
}

.archive-breadcrumb a{
  color:#183d4b;
  font-weight:500;
}

.archive-title{
  font-size:30px;
  font-weight:600;
  color:#183d4b;
  margin:5px 0 8px;
}

.archive-desc{
  max-width:700px;
  margin:0 auto;
  font-size:14px;
  color:#444;
  line-height:1.6;
}

/* Mobile */
@media(max-width:576px){

  .archive-title{
    font-size:22px;
  }

  .archive-desc{
    font-size:13px;
  }

}




/* ================= Pagination ================= */

.pagination {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.pagination ul {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination li {
  display: inline-flex;
}

/* Buttons */
.pagination a,
.pagination span {
  min-width: 38px;
  height: 38px;
  line-height: 38px;
  padding: 0 14px;

  background: #fff;
  color: #444;

  border: 1px solid #ddd;
  border-radius: 6px;

  font-size: 14px;
  font-weight: 500;
  text-decoration: none;

  text-align: center;

  transition: all 0.2s ease;
}

/* Hover */
.pagination a:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}

/* Active */
.pagination .current {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}

/* Prev / Next */
.pagination .prev,
.pagination .next {
  font-weight: 600;
}

/* Disabled Prev/Next */
.pagination .disabled,
.pagination .prev.disabled,
.pagination .next.disabled {
  opacity: 0.4;
  pointer-events: none;
  background: #f5f5f5;
  border-color: #ddd;
}

/* Dots */
.pagination .dots {
  border: none;
  background: transparent;
  color: #999;
}

/* ===== Mobile Pagination Fix ===== */
@media (max-width: 576px) {

  .pagination ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 6px;
  }

  .pagination li {
    flex: 0 0 auto;
  }

  /* Hide scrollbar (optional) */
  .pagination ul::-webkit-scrollbar {
    display: none;
  }

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


.no-results-wrapper {
  background: #f9fafb;
  border: 1px solid #eee;
  border-radius: 10px;
  max-width: 600px;
  margin: auto;
}

.no-results-icon {
  font-size: 42px;
}

.no-results-search input {
  border-radius: 6px;
}


/* Footer Design */

.footer-logo img{
  max-width:180px;
  height:auto;
}

.site-footer {
  background-color: #183d4b;
  padding: 50px 0 30px;
  margin-top: 80px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-links {
  text-align: center;
  list-style: none;
  display: flex;
  gap: 25px;
  padding: 0;
  margin: 0;
}

.footer-links a {
  color: #cbd5f5;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #a855f7;
}

.footer-bottom {
  text-align: center;
  padding-top: 25px;
  font-size: 14px;
}

.footer-bottom p {
  margin-bottom: 8px;
}

.footer-note {
  text-align: center;
  font-size: 10px;
  opacity: 0.7;}

/* External Links */

.footer-external {
  list-style: none;
  display: flex;
  text-align: center;
  gap: 5px;
  padding: 0;
  margin: 0;
}

.footer-external a {
  color: #cbd5f5;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

.footer-external a:hover {
  color: #a855f7;
}

/* Mobile Responsive */

@media (max-width: 768px) {

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
    max-width: 100%;
  }

  .site-footer {
    overflow-x: hidden;
  }

  .footer-top {
    padding-left: 10px;
    padding-right: 10px;
    justify-content: center;
  }
  
  .footer-external {
    padding-left: 10px;
    padding-right: 10px;
    justify-content: center;
  }

}



/* Login / Signup Page */

.auth-wrap{
  max-width:900px;
  margin:40px auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.auth-box{
  padding:25px;
  border-radius:8px;
  background:linear-gradient(45deg,#eaeffd,#dff1ec,#fffaec);
}

.auth-box h2{
  text-align:center;
  margin-bottom:15px;
  color:#183d4b;
}

.auth-box input{
  width:100%;
  padding:10px;
  margin-bottom:12px;
  border:1px solid #ddd;
  border-radius:6px;
}

.auth-box button{
  width:100%;
  padding:10px;
  background:#183d4b;
  color:#fff;
  border:0;
  border-radius:30px;
  font-weight:600;
  cursor:pointer;
}

.auth-box button:hover{
  background:#7e00fd;
}


/* Mobile */

@media(max-width:768px){

  .auth-wrap{
    grid-template-columns:1fr;
  }

}

/* Toast Message */

.toast-box{
  position:fixed;
  top:25px;
  right:25px;
  background:#183d4b;
  color:#fff;
  padding:12px 22px;
  border-radius:8px;
  font-size:14px;
  font-weight:500;
  z-index:9999;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  animation:toastIn .3s ease, toastOut .3s ease 3s forwards;
}

@keyframes toastIn{
  from{opacity:0;transform:translateX(40px);}
  to{opacity:1;transform:translateX(0);}
}

@keyframes toastOut{
  to{opacity:0;transform:translateX(40px);}
}

/* Popup */

.popup-wrap{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.popup-box{
  background:#fff;
  padding:22px 30px;
  border-radius:10px;
  font-size:15px;
  font-weight:500;
  color:#183d4b;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  animation:popIn .25s ease;
}

@keyframes popIn{
  from{opacity:0;transform:scale(.9);}
  to{opacity:1;transform:scale(1);}
}

/* =========================
   USER PANEL
=========================*/

.user-panel{
  max-width:900px;
  margin:40px auto;
  padding:20px;
}

.user-panel h2{
  text-align:center;
  color:#183d4b;
  margin-bottom:25px;
}

.panel-msg{
  background:#d1fae5;
  color:#065f46;
  padding:10px;
  border-radius:6px;
  margin-bottom:15px;
  text-align:center;
}

.panel-box{
  background:linear-gradient(45deg,#eaeffd,#dff1ec,#fffaec);
  padding:20px;
  border-radius:10px;
  margin-bottom:20px;
}

.panel-box h3{
  margin-bottom:12px;
}

.panel-box input{
  width:100%;
  padding:10px;
  margin-bottom:10px;
  border:1px solid #ddd;
  border-radius:6px;
}

.panel-box button{
  background:#183d4b;
  color:#fff;
  border:0;
  padding:8px 18px;
  border-radius:30px;
  cursor:pointer;
}

.panel-box button:hover{
  background:#7e00fd;
}

.saved-list{
  list-style:none;
  padding:0;
}

.saved-list li{
  margin:6px 0;
}

.saved-list a{
  color:#183d4b;
  font-weight:500;
}

.panel-logout{
  display:block;
  text-align:center;
  background:#c00;
  color:#fff !important;
  padding:10px;
  border-radius:30px;
  font-weight:600;
}

.panel-logout:hover{
  background:#900;
}


/* Bottom SEO + FAQ Layout Fix */

.bottom-boxes{
  margin-top:30px;
}

/* Remove flex issue */
.bottom-boxes .col-6{
  display:block !important;
}

/* Cards */
.seo-content-box,
.faq-box{
  width:100%;
  background:#fff;
  padding:20px;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

/* Headings */
.seo-content-box h4,
.faq-box h4{
  font-size:19px;
  font-weight:600;
  margin-bottom:15px;
  line-height:1.3;
}

/* Paragraph */
.seo-content-box p{
  font-size:14px;
  line-height:1.7;
  color:#333;
}

/* List */
.seo-content-box ul{
  padding-left:18px;
}

.seo-content-box li{
  margin-bottom:6px;
  font-size:14px;
}

/* FAQ Box */
.faq-box{
  background:#f9fbff;
  padding:15px;
  border-radius:10px;
  border:1px solid #e3ecff;
}

/* Each Card */
.faq-item{
  background:#fff;
  border-left:4px solid #2563eb;
  padding:12px 14px;
  border-radius:8px;
  margin-bottom:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}

/* Question */
.faq-q{
  font-size:15px;
  font-weight:600;
  color:#2563eb;
  margin-bottom:6px;
}

/* Answer */
.faq-a{
  font-size:14px;
  color:#444;
  line-height:1.6;
}



/* Desktop Balance */
@media(min-width:992px){
  .bottom-boxes .col-md-6{
    max-width:50%;
    flex:0 0 50%;
  }
}

/* Mobile Stack */
@media(max-width:768px){

  .bottom-boxes .col-6{
    width:100%;
    max-width:100%;
  }

  .seo-content-box,
  .faq-box{
    padding:16px;
  }

}

.seo-content-steps li {
  font-size: 13px;
  margin-bottom: 6px;
  line-height: 1.45;
}
ul {
  list-style-type: none; /* Removes default bullets */
}

.seo-content-steps li::before {
  content: "▸ "; /* Adds a black triangle */
  color: #333;
  font-weight: bold;
  display: inline-block; /* Allows margins to be set correctly */
  margin-right: 8px; /* Adds space between the marker and the text */
}


/* Right Sidebar Info Cards */

.col-lg-4 h5{
  font-size:16px;
  font-weight:600;
  margin-bottom:12px;
  color:#111;
}


/* Card Wrapper */
.col-lg-4 ul{
  list-style:none;
  padding:15px 18px;
  margin-bottom:20px;
  background:#ffffff;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

/* List Item */
.col-lg-4 ul li{
  position:relative;
  padding-left:22px;
  margin-bottom:8px;
  font-size:14px;
  color:#444;
}

/* Check Icon */
.col-lg-4 ul li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:0;
  color:#28a745;
  font-size:13px;
  font-weight:bold;
}

/* List Item */
.col-6 ul li{
  position:relative;
  padding-left:22px;
  margin-bottom:8px;
  font-size:14px;
  color:#444;
}

/* Check Icon */
.col-6 ul li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:0;
  color:#28a745;
  font-size:13px;
  font-weight:bold;
}


/* Sidebar Paragraph */
.col-lg-4 p{
  background:#fff;
  padding:3px 18px;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  font-size:14px;
  line-height:1.6;
  color:#333;
}


/* Category Page */

.category-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:22px;
}

.category-card{
display:block;
border-radius:12px;
overflow:hidden;
background:#fff;
border:1px solid #eee;
text-decoration:none;
color:#333;
transition:.25s;
}

.category-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.category-thumb{
height:150px;
background-size:cover;
background-position:center;
position:relative;
}

.cat-count{
position:absolute;
top:10px;
right:10px;
background:#7c3aed;
color:#fff;
font-size:12px;
padding:4px 8px;
border-radius:20px;
}

.category-info{
padding:15px;
}

.category-name{
font-size:17px;
margin-bottom:6px;
}

.category-desc{
font-size:13px;
color:#666;
}






/*
Login / Signup
*/

/* Background */
.auth-page-container {
    background: #f4f7fc;
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Auth Card */
.auth-card {
    background: #fff;
    width: 100%;
    max-width: 420px;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

/* Tabs */
.auth-tabs {
    display: flex;
    margin-bottom: 30px;
    background: #f0f2f5;
    border-radius: 12px;
    padding: 5px;
}
.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: none;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
    transition: 0.3s;
    color: #555;
}
.tab-btn.active {
    background: #fff;
    color: #764ba2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Forms */
.auth-form { display: none; }
.auth-form.active { display: block; animation: slideUp 0.4s ease; }

.form-header h3 { margin: 0; font-size: 24px; color: #333; }
.form-header p { font-size: 14px; color: #777; margin-bottom: 25px; }

/* Input Styling */
.input-box { margin-bottom: 18px; }
.input-box label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 6px; }
.input-field { position: relative; }
.input-field i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #aaa; }
.input-field input {
    width: 100%;
    padding: 12px 15px 12px 45px;
    border: 1.5px solid #eee;
    border-radius: 10px;
    outline: none;
    transition: 0.3s;
    background: #fafafa;
}
.input-field input:focus { border-color: #764ba2; background: #fff; }

/* Buttons */
.btn-auth {
    width: 100%;
    padding: 14px;
    background: #764ba2;
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.3s;
}
.btn-auth:hover { background: #5a3782; transform: translateY(-2px); }

/* Popup Animation */
.popup-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
.popup-content {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    max-width: 300px;
    animation: zoomIn 0.3s ease;
}
.popup-icon { font-size: 40px; color: #764ba2; margin-bottom: 15px; }
.popup-content p { font-weight: 600; color: #333; margin: 0; }

.fade-out { opacity: 0; transition: opacity 0.5s ease; }

@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.form-options { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 15px; }
.form-options a { color: #764ba2; text-decoration: none; font-weight: 600; }


.cut-line {
    width: 100%;
    position: relative;
    border-bottom: 2px dashed #7a53ad;
    margin: 20px 0;
    text-align: center;
}

.cut-line span {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 10px;
    font-size: 18px;
    color: #7a53ad;
}