/*
  RMS BuyLink — modern theme layer.
  Loaded AFTER style.css/bootstrap.css so these rules win on specificity/order.
  Restyles the existing markup only — no HTML structure, class names, form field
  names/ids, or JS hooks were changed to make this work, so all functionality
  (sign in, sign up, OTP step, forgot password, state->district AJAX, sponsor
  auto-fill, password show/hide, cart, mega-menu) keeps working exactly as before.
*/

:root {
  --brand-purple: #6a3d8f;
  --brand-purple-dark: #4a2566;
  --brand-purple-darker: #2e1740;
  --brand-purple-light: #a875d1;
  --brand-accent: #ffb648;
  --ink: #1c1224;
  --ink-soft: #5b5468;
  --paper: #ffffff;
  --paper-soft: #f7f4fb;
  --line: #e7e1f0;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-md: 0 10px 30px rgba(46, 23, 64, 0.14);
  --shadow-lg: 0 24px 60px rgba(46, 23, 64, 0.24);
}

/* ================= Top utility bar ================= */
.header {
  background: var(--brand-purple-darker) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header ul li,
.header ul li a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.header ul li a:hover {
  color: var(--brand-accent) !important;
}
.header ul li i {
  color: var(--brand-accent) !important;
}

/* ================= Search / logo / social bar ================= */
.header-bot {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.header-middle form {
  display: flex !important;
  align-items: center;
}
.header-bot input[type="search"] {
  border: 2px solid var(--line) !important;
  border-right: none !important;
  border-radius: 999px 0 0 999px !important;
  padding: 12px 20px !important;
  font-size: 14px;
  transition: border-color 0.2s ease;
}
.header-bot input[type="search"]:focus {
  border-color: var(--brand-purple) !important;
  outline: none;
}
.header-bot input[type="submit"] {
  border-radius: 0 999px 999px 0 !important;
  /* a crisp inline SVG glass, perfectly centered — replaces the old low-res
     sprite, which also could not center itself in a variable-width button */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  background-color: var(--brand-purple) !important;
  border: 2px solid var(--brand-purple) !important;
  width: 56px !important;
  height: 44px !important;
}
.logo_agile img.header_log {
  max-height: 56px;
}
.agileits-social ul.social-nav li a .front,
.agileits-social ul.social-nav li a .back {
  background: var(--brand-purple) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(46, 23, 64, 0.35);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.agileits-social ul.social-nav li a:hover .front {
  background: var(--brand-accent) !important;
  color: var(--brand-purple-darker) !important;
  transform: translateY(-2px);
}

/* ================= Main nav ================= */
.ban-top {
  background: var(--paper) !important;
  box-shadow: 0 2px 12px rgba(46, 23, 64, 0.06);
}
.menu__list .menu__link {
  color: var(--ink) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 22px 16px !important;
  position: relative;
}
.menu__list .menu__item--current .menu__link,
.menu__list .menu__item--current_block > .menu__link,
.menu__list .menu__link:hover {
  color: var(--brand-purple) !important;
}
.menu__list .menu__item--current .menu__link::after,
.menu__list .menu__link:hover::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand-accent);
}
.dropdown-menu {
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 10px !important;
}
.dropdown-menu .menu__link:hover {
  background: var(--paper-soft) !important;
  border-radius: var(--radius-sm);
}
.topnav {
  background: var(--brand-purple) !important;
}
.topnav a,
.topnav .dropbtn,
.topnav .services_menu_1191 a {
  color: rgba(255, 255, 255, 0.92) !important;
}
.topnav a:hover,
.topnav .dropbtn:hover {
  background: var(--brand-purple-dark) !important;
  color: #fff !important;
}
.dropdownx-content {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}
/* .topnav a's white text (above) would otherwise leak into this dropdown's
   own links too, since they're nested inside .topnav — the dropdown has a
   light background, so force dark text back here, specifically. */
.dropdownx-content a {
  color: var(--ink) !important;
}
.dropdownx-content a:hover {
  background: var(--paper-soft) !important;
  color: var(--brand-purple) !important;
}
.wthreecartaits .w3view-cart {
  background: var(--brand-purple) !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-md);
  color: #fff !important;
}
.wthreecartaits .w3view-cart .header_cartitems_cls {
  color: #fff !important;
}

/* ================= Hero carousel ================= */
#myCarousel .carousel-caption {
  background: linear-gradient(135deg, rgba(46, 23, 64, 0.72), rgba(106, 61, 143, 0.55));
  border-radius: var(--radius-lg);
  padding: 3em 3em;
  backdrop-filter: blur(2px);
}
#myCarousel .carousel-caption h3 {
  font-weight: 700;
  letter-spacing: 0.01em;
}
#myCarousel .carousel-caption h3 span {
  color: var(--brand-accent);
}
.hvr-outline-out.button2 {
  background: var(--brand-purple) !important;
  border: 2px solid var(--brand-purple) !important;
  border-radius: 999px !important;
  padding: 0.8em 2.2em !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: var(--shadow-md);
}
.hvr-outline-out.button2:hover {
  background: var(--brand-purple-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.carousel-indicators li {
  border-color: var(--brand-purple) !important;
}
.carousel-indicators .active {
  background: var(--brand-purple) !important;
}
.carousel-control.left,
.carousel-control.right {
  background: none !important;
}
.carousel-control .glyphicon {
  background: rgba(46, 23, 64, 0.55);
  border-radius: 50%;
  padding: 14px;
  font-size: 16px;
}

/* ================= Section headings ================= */
.wthree_text_info {
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 0.5em;
}
.wthree_text_info span {
  color: var(--brand-purple);
}
.wthree_text_info::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--brand-accent);
  margin: 0.4em auto 0;
}

/* ================= Product / service cards ================= */
.men-pro-item {
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(46, 23, 64, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid var(--line) !important;
}
.men-pro-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.item-info-product h4 a {
  color: var(--ink) !important;
  font-weight: 700;
}
.item_price {
  color: var(--brand-purple) !important;
  font-weight: 700;
}
.men-cart-pro .inner-men-cart-pro .link-product-add-cart {
  background: var(--brand-purple) !important;
}
.snipcart-details .button {
  background: var(--brand-purple) !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: background 0.2s ease, transform 0.2s ease;
}
.snipcart-details .button:hover {
  background: var(--brand-purple-dark) !important;
  transform: translateY(-2px);
}
.product-new-top {
  background: var(--brand-accent) !important;
  color: var(--ink) !important;
  border-radius: 999px;
  font-weight: 700;
}
.product-new-top_left {
  background: var(--brand-purple) !important;
  border-radius: 999px;
  font-weight: 700;
}

/* ================= Bottom banner grids / offers ================= */
.schedule-bottom,
.sale-w3ls,
.coupons {
  background: var(--paper-soft) !important;
}
.w3ls_schedule_bottom_right_grid h3 span,
.sale-w3ls h6 span {
  color: var(--brand-purple);
}
.w3layouts_mail_grid_left1 {
  background: var(--brand-purple) !important;
  border-radius: 50% !important;
  color: #fff !important;
}
figure.effect-roxy figcaption {
  background: linear-gradient(180deg, transparent, rgba(46, 23, 64, 0.75)) !important;
}
figure.effect-roxy h3 span {
  color: var(--brand-accent) !important;
}

/* =========================================================
   Sign In / Sign Up / Forgot Password modal system
   ========================================================= */
.modal-content {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}
.modal-header {
  border-bottom: none !important;
  padding: 0 !important;
  position: relative;
  z-index: 2;
}
.modal-header .close {
  margin: 14px 14px 0 0 !important;
  width: 34px;
  height: 34px;
  line-height: 30px;
  border-radius: 50%;
  background: rgba(28, 18, 36, 0.06);
  opacity: 1 !important;
  font-weight: 400;
  color: var(--ink) !important;
  transition: background 0.2s ease;
}
.modal-header .close:hover {
  background: rgba(28, 18, 36, 0.12);
}

.modal-body.modal-body-sub_agile {
  padding: 0 !important;
  margin-top: 0 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.modal_body_left.modal_body_left1 {
  padding: 2.6em 2.8em 2.2em !important;
  float: none !important;
}
.modal_body_right.modal_body_right1 {
  float: none !important;
  padding: 0 !important;
  background: linear-gradient(160deg, var(--brand-purple) 0%, var(--brand-purple-darker) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.modal_body_right.modal_body_right1 img {
  width: 82%;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25));
}

/* Sign Up has too many fields for the split image-panel layout — drop the
   image, give the form the full width, and pair the short fields
   (Sponsor Id/Name, Name/Address, Mobile, State/District, Pincode — these
   are exactly the fields carrying .agile-styled-input-top) into two columns
   so the form reads as a compact grid instead of one long single column. */
#myModal2 .modal-dialog {
  max-width: 760px;
}
#myModal2 .modal_body_right.modal_body_right1 {
  display: none !important;
}
#myModal2 .modal_body_left.modal_body_left1 {
  width: 100% !important;
  padding: 2.8em 3.2em 2.4em !important;
}
#myModal2 .signup_cls form {
  display: flex;
  flex-wrap: wrap;
  column-gap: 6%;
}
#myModal2 .signup_cls form .styled-input.agile-styled-input-top {
  width: 47%;
}
/* Mobile Number and Pincode each sit alone between pairs in the field order
   (Email/Password/Confirm Password break the run right after them), so
   pairing them at 47% left them stranded next to a large empty gap — give
   these two the full width instead of trying to force a pairing that
   isn't there. */
#myModal2 .signup_cls form .styled-input.signup-field-solo,
#myModal2 .signup_cls form .styled-input:not(.agile-styled-input-top),
#myModal2 .signup_cls form input[type="submit"],
#myModal2 .signup_cls form img.signup_img_cls {
  width: 100%;
  flex-basis: 100%;
}
@media (max-width: 767px) {
  #myModal2 .signup_cls form .styled-input.agile-styled-input-top {
    width: 100%;
  }
}

h3.agileinfo_sign {
  font-size: 1.5em !important;
  font-weight: 800 !important;
  color: var(--ink);
  margin-bottom: 0.9em !important;
}
h3.agileinfo_sign span {
  color: var(--brand-purple) !important;
  font-weight: 400 !important;
}

.styled-input {
  margin: 1.6em 0 0.4em !important;
}
.styled-input label {
  color: var(--ink-soft) !important;
  font-size: 14px !important;
}
.styled-input input:focus ~ label,
.styled-input input:valid ~ label,
.styled-input select:focus ~ label,
.styled-input select:valid ~ label {
  color: var(--brand-purple) !important;
}
.modal-body.modal-body-sub_agile input[type="text"],
.modal-body.modal-body-sub_agile input[type="email"],
.modal-body.modal-body-sub_agile input[type="password"] {
  border-bottom: 2px solid var(--line) !important;
  padding: 0.55em 0.2em !important;
  color: var(--ink) !important;
  font-size: 15px !important;
}
.styled-input input ~ span,
.styled-input textarea ~ span {
  height: 2px !important;
  background: var(--brand-purple) !important;
}
.styled-input .select2-container .select2-selection--single,
.styled-input select.form-control {
  border: none !important;
  border-bottom: 2px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
}

/* password show/hide eye icon */
.password-toggle {
  color: var(--ink-soft);
}
.password-toggle i {
  font-size: 15px;
}

.modal-body.modal-body-sub_agile input[type="submit"] {
  background: var(--brand-purple) !important;
  border-radius: 999px !important;
  padding: 0.75em 2.4em !important;
  font-size: 14px !important;
  margin: 1.4em 0 0 0 !important;
  box-shadow: var(--shadow-md);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.modal-body.modal-body-sub_agile input[type="submit"]:hover {
  background: var(--brand-purple-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.modal-body.modal-body-sub_agile ul.social-nav {
  margin: 1.8em 0 0.6em 0 !important;
}
.modal-body.modal-body-sub_agile ul.social-nav .front,
.modal-body.modal-body-sub_agile ul.social-nav .back {
  background: var(--brand-purple) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(46, 23, 64, 0.25);
}
.modal-body.modal-body-sub_agile ul.social-nav a:hover .front {
  background: var(--brand-accent) !important;
  color: var(--brand-purple-darker) !important;
}

.modal-body.modal-body-sub_agile p {
  color: var(--ink-soft) !important;
  font-weight: 500 !important;
}
.modal-body.modal-body-sub_agile p a {
  color: var(--brand-purple) !important;
  font-weight: 700 !important;
}
.modal-body.modal-body-sub_agile p a:hover {
  text-decoration: underline;
}

/* field-level validation messages already rendered inline by existing JS/PHP */
.modal-body.modal-body-sub_agile span[class$="_valid"] {
  display: block;
  font-size: 12px !important;
  margin-bottom: 0.2em;
}

/* Sponsor Id / Sponsor Name readonly display uses a <p> label ahead of the input
   in the existing markup (not the floating <label>) — style it to match. */
.styled-input p {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 0.3em 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  .modal_body_right.modal_body_right1 {
    display: none;
  }
  .modal_body_left.modal_body_left1 {
    padding: 2.2em 1.4em !important;
  }
}

/* ================= Footer ================= */
.footer {
  background: linear-gradient(180deg, var(--brand-purple-darker) 0%, #1a0e28 100%) !important;
  padding: 4.5em 0 2.5em !important;
  position: relative;
}
.footer::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-purple-light), var(--brand-accent));
}
.footer-left p {
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.8em !important;
}
.footer ul.social-nav.two .front,
.footer ul.social-nav.two .back {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-radius: 50% !important;
  transition: transform 0.2s ease, background 0.2s ease;
}
.footer ul.social-nav.two a:hover .front {
  background: var(--brand-accent) !important;
  color: var(--brand-purple-darker) !important;
  transform: translateY(-3px);
}

.sign-gd h4,
.sign-gd-two h4 {
  color: #fff !important;
  position: relative;
  padding-bottom: 0.5em;
  margin-bottom: 1.4em !important;
}
.sign-gd h4::after,
.sign-gd-two h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand-accent);
}
.sign-gd h4 span,
.sign-gd-two h4 span {
  color: var(--brand-purple-light) !important;
}
.sign-gd ul li a,
.sign-gd-two ul li a {
  color: rgba(255, 255, 255, 0.62) !important;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.sign-gd ul li a:hover,
.sign-gd-two ul li a:hover {
  color: var(--brand-accent) !important;
  padding-left: 4px;
}
.sign-gd a[download] h4 span {
  color: var(--brand-accent) !important;
}

.w3-address-grid {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.8em !important;
  transition: background 0.2s ease, transform 0.2s ease;
}
.w3-address-grid:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  transform: translateX(3px);
}
.w3-address-left i {
  background: var(--brand-purple);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.w3-address-right p {
  color: rgba(255, 255, 255, 0.62) !important;
}
.w3-address-right p a {
  color: var(--brand-accent) !important;
}

.flickr-post ul li {
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.flickr-post ul li:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.agile_newsletter_footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 1.8em 0 !important;
  margin: 2.5em 0 1.5em !important;
}
.newsleft h3 {
  letter-spacing: 0.04em !important;
}
.newsright input[type="email"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px 0 0 999px !important;
  color: #fff !important;
}
.newsright input[type="submit"] {
  background: var(--brand-purple) !important;
  border-radius: 0 999px 999px 0 !important;
}
.newsright input[type="submit"]:hover {
  background: var(--brand-accent) !important;
  color: var(--brand-purple-darker) !important;
}

p.copy-right {
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.02em;
}
p.copy-right a:hover {
  color: var(--brand-accent) !important;
}