/* ===================================================================================

* Theme Name: Markite Child
* Theme URI: https://themeforest.net/user/basictheme/portfolio
* Author: BasicTheme
* Author URI: https://themepure.net/wp/markite/
* Description: Markite - Digital Marketplace WooCommerce Theme
* Version: 1.0.0
* Template: markite
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of future updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */



.woocommerce .m-btn-disabled:disabled {
    color: inherit;
    cursor: not-allowed;
    opacity: 0.5;
    padding: 0px 33px;
    border: 2px solid #5f3afc;
    background: none;
    color: #5f3afc;
    line-height: 1;
    margin-left: 10px;
}

.markite-page-content ol li, .markite-page-content ul li {
    margin-left: 25px !important;
}

.woocommerce table.my_account_orders .button {
    margin-left: 5px;
}



/* ===== WooCommerce My Account – make nav modern & remove bullets ===== */

/* 1) Remove any bullets/dots from the menu completely */
.page-area .woocommerce .woocommerce-MyAccount-navigation ul{ 
  list-style: none !important; 
  margin: 0 !important; 
  padding: 0 !important;
}
.page-area .woocommerce .woocommerce-MyAccount-navigation li{ 
  list-style: none !important; 
  position: relative !important;
  margin: 6px 0 !important;
}
/* Some themes inject custom markers; hide them too */
.page-area .woocommerce .woocommerce-MyAccount-navigation li::marker,
.page-area .woocommerce .woocommerce-MyAccount-navigation li::before,
.page-area .woocommerce .woocommerce-MyAccount-navigation a::before{
  content: none !important; 
  display: none !important;
}

/* 2) Card look for the nav + content */
.page-area .woocommerce .woocommerce-MyAccount-navigation{
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.06) !important;
  padding: 8px !important;
}
.page-area .woocommerce .woocommerce-MyAccount-content{
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.06) !important;
  padding: 22px !important;
}

/* 3) Make each nav item look like a pill with a subtle chevron */
.page-area .woocommerce .woocommerce-MyAccount-navigation li a{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  color: #1f2937 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: background .2s ease, color .2s ease, transform .05s ease !important;
}

/* Right chevron */
.page-area .woocommerce .woocommerce-MyAccount-navigation li a::after{
  content: "›" !important;  /* simple chevron */
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: .45 !important;
  transform: translateX(0) !important;
  transition: transform .2s ease, opacity .2s ease !important;
}

/* Hover / focus state */
.page-area .woocommerce .woocommerce-MyAccount-navigation li a:hover{
  background: rgba(79,70,229,.10) !important; /* soft primary */
  color: #4f46e5 !important;
}
.page-area .woocommerce .woocommerce-MyAccount-navigation li a:hover::after{
  transform: translateX(2px) !important;
  opacity: .75 !important;
}

/* Active/current tab */
.page-area .woocommerce .woocommerce-MyAccount-navigation .is-active > a{
  background: rgba(79,70,229,.12) !important;
  color: #4f46e5 !important;
  border: 1px solid rgba(79,70,229,.12) !important;
}

/* Optional: make "Logout" look destructive */
.page-area .woocommerce .woocommerce-MyAccount-navigation
.woocommerce-MyAccount-navigation-link--customer-logout > a{
  color: #ef4444 !important;
}
.page-area .woocommerce .woocommerce-MyAccount-navigation
.woocommerce-MyAccount-navigation-link--customer-logout > a:hover{
  background: rgba(239,68,68,.10) !important;
}

/* 4) Nice table look inside content (orders, addresses) */
.page-area .woocommerce table{
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.page-area .woocommerce table th,
.page-area .woocommerce table td{
  padding: 12px 14px !important;
  border-bottom: 1px solid #e5e7eb !important;
  text-align: start !important;
}
.page-area .woocommerce table thead th{
  background: #f6f7fb !important;
  color: #6b7280 !important;
  font-weight: 600 !important;
}

/* 5) Responsive tweak */
@media (max-width: 900px){
  .page-area .woocommerce .woocommerce-MyAccount-navigation{
    position: static !important;
  }
}

/* =========================
   My Account › ADDRESSES — FORCE two columns + button under title
   ========================= */

/* 1) Parent: use CSS Grid with 2 equal columns */
.page-area .woocommerce .u-columns.col2-set.addresses,
.page-area .woocommerce .u-columns.addresses,
.page-area .woocommerce .woocommerce-Addresses,
.page-area .woocommerce .addresses{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 24px !important;
  row-gap: 24px !important;
  align-items: start !important;
  text-align: start !important;
}

/* 2) Kill any floats/widths/clears from theme on direct children */
.page-area .woocommerce .u-columns.col2-set.addresses > *,
.page-area .woocommerce .u-columns.addresses > *,
.page-area .woocommerce .woocommerce-Addresses > *,
.page-area .woocommerce .addresses > *{
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 3) Card look for each box */
.page-area .woocommerce .u-columns.col2-set.addresses > *,
.page-area .woocommerce .addresses > *,
.page-area .woocommerce .woocommerce-Addresses > *{
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(2,6,23,.06) !important;
  padding: 20px 22px !important;
  position: relative !important;
}

/* 4) Title block as vertical stack so the button is UNDER the heading */
.page-area .woocommerce .woocommerce-Address .title,
.page-area .woocommerce .address .title{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
}
.page-area .woocommerce .woocommerce-Address .title h3,
.page-area .woocommerce .address .title h3{
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
}

/* 5) Button: always inline, under the title (no absolute) — both cases */
.page-area .woocommerce .woocommerce-Address .title a.edit,
.page-area .woocommerce .address .title a.edit,
.page-area .woocommerce .woocommerce-Address > a.edit,
.page-area .woocommerce .address > a.edit{
  position: static !important;      /* cancel any absolute from theme */
  display: inline-block !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  color: #4f46e5 !important;
  background: rgba(79,70,229,.10) !important;
  border: 1px solid rgba(79,70,229,.16) !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
}

/* 6) Body text */
.page-area .woocommerce .woocommerce-Address address,
.page-area .woocommerce .woocommerce-Address p,
.page-area .woocommerce .address address,
.page-area .woocommerce .address p{
  margin: 0 !important;
  color: #64748b !important;
  font-size: 15px !important;
}

/* 7) Mobile: stack to one column */
@media (max-width: 768px){
  .page-area .woocommerce .u-columns.col2-set.addresses,
  .page-area .woocommerce .u-columns.addresses,
  .page-area .woocommerce .woocommerce-Addresses,
  .page-area .woocommerce .addresses{
    grid-template-columns: 1fr !important;
  }
}