/*
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;
}

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;

}
.font-weight-200{
    font-weight: 200;
}

.site-logo{
  max-width:250px;
  margin:auto;
}

.site-logo img{
  width:100%;
  height:auto;
  display:block;
}

#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%;
    height: 200px;
}
.single-coupon-left{
    border: 2px dashed #fff;
    background-color: #7af6cf;
    padding: 10px 5px;
    border-radius: 5px;
    text-align: center;
    color: #000;
    font-weight: 400;
    text-shadow: 0 3px 2px rgba(0,0,0,.5);
}
.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;
    }
    .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); }
}

/* 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;
}


/* ===============================
   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;
}