/* ============================================================================
   CSS VARIABLES - Core Theme Colors
   ============================================================================ */
:root {
  --color-primary: #00DCFF;
  --color-primary-rgba: rgba(0, 220, 255, 1);
  --color-secondary: #AC8EFF;
  --color-secondary-rgba: rgba(172, 142, 255, 1);
  --color-accent: #D46BFF;
  --color-background-dark: #000202;
  --color-background-dark-secondary: #181818;
  --color-text-placeholder: #B2B2B2;
  --color-border-light: #d8d8d8;
  --color-text-gray: #777;
  --border-radius-default: 12px;
  --gradient-primary: linear-gradient(90deg, #00DCFF 0%, #AC8EFF 100%);
  --gradient-primary-rgba: linear-gradient(90deg, rgba(0, 220, 255, 1) 0%, rgba(172, 142, 255, 1) 100%);
  --gradient-header-footer: linear-gradient(90deg, rgba(93, 36, 255, 0.2) 0.4%, rgba(0, 177, 255, 0.102) 100%);
}

/* ============================================================================
   COMMON SHARED STYLES
   ============================================================================ */

/* Button Custom - Used across multiple pages */
.btn-custom {
  color: #fff !important;
  font-weight: 400;
  outline: 0 !important;
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--border-radius-default);
}

.btn-custom:hover,
.btn-custom:focus {
  background: var(--gradient-primary);
  border: none;
}

/* Button Block */
.btn-block {
  display: block;
  width: 100%;
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--border-radius-default);
}

.btn-block+.btn-block {
  margin-top: 0.5rem;
}

input[type="button"].btn-block,
input[type="reset"].btn-block,
input[type="submit"].btn-block {
  width: 100%;
}

/* Button MD */
.btn-md {
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--border-radius-default);
  color: #fff !important;
}

/* Custom Checkbox */
.custom-checkbox .custom-control-input:checked~.custom-control-label:before {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Custom Control Validation States */
.custom-control-input.is-valid~.custom-control-label,
.was-validated .custom-control-input:valid~.custom-control-label {
  color: var(--color-primary);
}

.custom-control-input.is-valid~.custom-control-label:before,
.was-validated .custom-control-input:valid~.custom-control-label:before {
  border-color: var(--color-primary);
}

.custom-control-input.is-valid:checked~.custom-control-label:before,
.was-validated .custom-control-input:valid:checked~.custom-control-label:before {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.custom-control-input.is-valid:focus~.custom-control-label:before,
.was-validated .custom-control-input:valid:focus~.custom-control-label:before {
  box-shadow: 0 0 0 0.2rem rgba(48, 235, 248, 0.25);
}

.custom-control-input.is-valid:focus:not(:checked)~.custom-control-label:before,
.was-validated .custom-control-input:valid:focus:not(:checked)~.custom-control-label:before {
  border-color: var(--color-primary);
}

/* Form Control Focus */
.form-control:focus {
  border-color: var(--color-primary);
}

/* Form Control Border Radius */
.auth-form-input,
.form-control {
  border-radius: var(--border-radius-default);
}

/* Links */
.link {
  color: var(--color-primary) !important;
}

.link-forgot-password:hover {
  color: var(--color-primary) !important;
}

/* Button Light */
.btn-light {
  color: #fff !important;
  background: var(--color-primary) !important;
  border: none !important;
}

/* Button Outline Gray */
.btn-outline-gray {
  border-radius: var(--border-radius-default) !important;
  text-align: center;
  color: #ffffff !important;
  margin-top: 10px;
  border: none;
}

/* Select2 Styles */
.select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single {
  border-radius: var(--border-radius-default) !important;
}

.select2-dropdown {
  top: -8px;
  border: 1px solid #dfe0e6;
  border-bottom-left-radius: var(--border-radius-default);
  border-bottom-right-radius: var(--border-radius-default);
}

/* General Button Border Radius */
.btn {
  border-radius: var(--border-radius-default);
}

/* ============================================================================
   HEADER & FOOTER STYLES
   ============================================================================ */

/* Header */
#header {
  background: var(--color-background-dark);
}

#header .top-bar {
  background: var(--gradient-header-footer);
  color: #fff;
  border: 0;
}

#header .top-bar .navbar-nav .nav-item .nav-link {
  color: #fff;
}

#header .top-bar .navbar-nav .nav-item .nav-link i,
#header .top-bar .navbar-nav .nav-item .nav-link svg {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

#header .nav-top {
  background: var(--color-background-dark);
}

#header .nav-top .nav-top-right .nav li .btn-sell-now {
  border-radius: var(--border-radius-default);
  background: var(--gradient-primary);
  border: 0;
}

#header .nav-top .nav-top-right .nav>li>a {
  color: #fff;
}

#header .li-main-nav-right a i {
  /* background: var(--gradient-primary); */
  background: #00DCFF;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

#header .nav-main {
  background: var(--color-background-dark);
}

#header .nav-main .navbar {
  background: var(--color-background-dark);
}

#header .nav-main .navbar ul .nav-item .nav-link {
  color: #fff;
}

#header .top-search-bar {
  background: var(--color-background-dark-secondary);
  border: 0 !important;
}

#header .top-search-bar .input-search {
  background-color: var(--color-background-dark-secondary);
  border-radius: var(--border-radius-default);
  border: 0 !important;
}

#header .top-search-bar .input-search::-webkit-input-placeholder {
  color: var(--color-text-placeholder);
}

#header .top-search-bar .input-search::-moz-placeholder {
  color: var(--color-text-placeholder);
}

#header .top-search-bar .input-search:-ms-input-placeholder {
  color: var(--color-text-placeholder);
}

#header .top-search-bar .input-search:-moz-placeholder {
  color: var(--color-text-placeholder);
}

#header .top-search-bar .btn-search i {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.nav-main .navbar>.navbar-nav>.nav-item:hover .nav-link:before {
  background: var(--gradient-primary);
}

/* Mobile Header */
.nav-mobile-header {
  background: var(--color-background-dark);
}

.nav-mobile-header-container .item-menu-icon button i,
.nav-mobile-header-container .a-search-icon i,
.nav-mobile-header-container .a-mobile-cart .icon-cart {
  /* background: var(--gradient-primary); */
  background: #00DCFF;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.mobile-nav-buttons .btn-custom {
  background: var(--gradient-primary);
  border-radius: var(--border-radius-default);
  border: 0;
}

.nav-mobile .navbar-nav .nav-item .nav-link .icon-map-marker,
.nav-mobile .navbar-nav .nav-item .nav-link i {
  /* background: var(--gradient-primary); */
  background: #00DCFF;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

/* Footer */
#footer {
  background: var(--color-background-dark) !important;
  color: #fff !important;
}

#footer .footer-social-links ul li a {
  background: var(--gradient-primary);
  border: 0 !important;
  color: var(--color-background-dark) !important;
}

#footer .footer-title {
  color: var(--color-primary) !important;
}

#footer .nav-footer ul li a {
  color: #fff !important;
}

#footer .footer-bottom {
  background: var(--gradient-header-footer);
  border: 0;
  color: #fff;
  background-color: var(--color-background-dark);
}

#footer .footer-bottom .copyright {
  color: #fff !important;
}

#footer .nav-footer-bottom li a {
  color: #fff !important;
}

/* ============================================================================
   PAGE: CART
   ============================================================================ */

.shopping-cart .btn-block {
  border-radius: var(--border-radius-default);
  background: var(--gradient-primary);
  border: 0;
}

.shopping-cart .btn-custom {
  border-radius: var(--border-radius-default);
  background: var(--gradient-primary);
  border: 0;
}

/* Cart Empty */
.shopping-cart-empty .btn-custom {
  border-radius: var(--border-radius-default);
  background: var(--gradient-primary);
  border: 0;
}

/* Shipping */
.shopping-cart-shipping .link {
  color: var(--color-primary) !important;
}

.shopping-cart-shipping .custom-checkbox .custom-control-input:checked~.custom-control-label:before {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ============================================================================
   PAGE: PRODUCT DETAIL
   ============================================================================ */

.product-add-to-cart-container .button-container .btn-product-cart {
  border-radius: var(--border-radius-default);
  background: var(--gradient-primary);
  border: 0;
}

.product-price-container .text-product-discounted {
  color: var(--color-primary) !important;
}

.product-options-container .option-radio-label.selected {
  border-color: var(--color-primary);
}

.product-card .price-green {
  color: var(--color-accent);
}

/* ============================================================================
   PAGE: WALLET
   ============================================================================ */

.card-wallet-balance svg {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.nav-tabs-wallet .nav-item .nav-link,
.nav-payout-accounts .btn-md {
  border: 0 !important;
  border-radius: var(--border-radius-default);
}

.nav-tabs-wallet .nav-item .active,
.nav-payout-accounts .active {
  background: var(--gradient-primary);
  border: 0 !important;
  color: #fff !important;
}

.wallet-container .btn-custom,
.modal .btn-custom {
  background: var(--gradient-primary);
  border: 0 !important;
  border-radius: var(--border-radius-default);
}

/* ============================================================================
   PAGE: ORDERS
   ============================================================================ */

.sidebar-tabs .nav .active .nav-link {
  background: var(--gradient-primary);
  color: #fff !important;
}

.sidebar-tabs .nav .nav-link:hover {
  background: var(--gradient-primary);
  color: #fff !important;
}

.sidebar-tabs-content .btn-md {
  background: var(--gradient-primary);
  border: 0 !important;
  border-radius: var(--border-radius-default);
}

.order-details-container .btn-custom {
  background: var(--gradient-primary);
  border: 0 !important;
  border-radius: var(--border-radius-default);
}

/* ============================================================================
   PAGE: SHIPPING ADDRESS
   ============================================================================ */

.link-add-new-shipping-option {
  color: var(--color-primary) !important;
}

/* ============================================================================
   PAGE: CHANGE PASSWORD
   ============================================================================ */

/* Styles inherited from common styles above */

/* ============================================================================
   PAGE: CONTACT
   ============================================================================ */

.contact-social {
  margin-top: 45px;
}

.contact-social ul {
  margin: 0;
  padding: 0;
}

.contact-social ul li {
  display: inline-block;
  margin-bottom: 5px;
  margin-right: 5px;
}

.contact-social ul li a {
  align-items: center;
  border: 1px solid var(--color-border-light);
  border-radius: 100%;
  color: var(--color-text-gray);
  display: flex;
  font-size: 16px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.contact-social ul li a:hover {
  color: #fff;
  background: var(--color-primary);
  border: none;
}

/* ============================================================================
   PAGE: LOCATION
   ============================================================================ */

/* Styles inherited from common styles above */

/* ============================================================================
   PAGE: MY COUPONS
   ============================================================================ */

.coupon-item {
  border: 1px dashed var(--color-accent);
  border-radius: 0;
  margin-bottom: 30px;
  padding: 15px;
  position: relative;
  width: 100%;
}

.copy-code-container .code {
  border: 1px dashed var(--color-accent);
  display: block;
  flex-grow: 1;
  padding: 10px 20px;
  word-break: break-all;
}

/* ============================================================================
   PAGE: REGISTER
   ============================================================================ */

/* Styles inherited from common styles above */

/* ============================================================================
   PAGE: UPDATE PROFILE
   ============================================================================ */

.btn-file-upload {
  display: block;
  width: 100%;
  background: var(--gradient-primary);
  border: none;
}

.product-sort-by-fill {
  border-radius: var(--border-radius-default) !important;
  text-align: center;
  color: #ffffff !important;
}

.btn-filter-productt {
  border-radius: var(--border-radius-default) !important;
  text-align: center;
  color: #ffffff !important;
  width: 100%;
  margin-top: 10px;
}

/* Product Sort By */
.product-sort-by .dropdown .btn-md.dropdown-toggle {
  color: #fff !important;
  border-radius: var(--border-radius-default) !important;
  border: 0 !important;
}

.product-sort-by .dropdown .btn-md.dropdown-toggle svg path {
  fill: #fff !important;
}

.container-products-page .filter-item .btn-filter-product {
  color: #fff !important;
  border-radius: var(--border-radius-default) !important;
  border: 0 !important;
}

.profile-details .btn.btn-md,
.product-description .btn.btn-md {
  background: var(--gradient-primary);
  border: 0 !important;
  border-radius: var(--border-radius-default) !important;
  color: #fff !important;
}

.profile-details .btn.btn-md i {
  color: #fff !important;
}

/* ============================================================================
   PAGE: WISHLIST
   ============================================================================ */

.price-green {
  color: var(--color-accent);
}

/* ============================================================================
   PAGE: SOCIAL
   ============================================================================ */

/* Styles inherited from common styles above */

/* ============================================================================
   MODAL STYLES
   ============================================================================ */

.modal .btn-custom {
  background: var(--gradient-primary);
  border: 0 !important;
  border-radius: var(--border-radius-default);
}

.custom-control-input:checked~.custom-control-label:before {
  background-color: #AC8EFF !important;
  border-color: #AC8EFF !important;
}