/* Kraken Offroad – My Account Styling
   v1.4 – Form selects + notice bars + section titles + orders action button spacing
*/

/* ---------- Base layout reset (avoid theme floats) ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  float: none !important;
  width: auto !important;
  max-width: none !important;
}

/* Parent wrapper (Woo default is .woocommerce) */
@media (min-width: 721px){
  .woocommerce-account .woocommerce{
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation{
    flex: 0 0 250px;
    width: 250px !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content{
    flex: 1 1 auto;
    min-width: 470px;
  }
}

@media (max-width: 720px){
  .woocommerce-account .woocommerce{
    display: block;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation{
    width: 100% !important;
    margin-bottom: 18px;
  }

  .woocommerce-account .woocommerce-MyAccount-content{
    width: 100% !important;
    min-width: 0;
  }
}

/* ---------- Left navigation look & feel ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation{
  background: #2b2b2b;
  border: 1px solid #ff8c00;
  border-radius: 10px;
  overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation > ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation > ul > li{
  margin: 0;
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation > ul > li > a{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  text-decoration: none;
  color: #ffffff;
  background: #2b2b2b;
  border-bottom: 1px solid rgba(255,140,0,.35);
  line-height: 1.2;
}

.woocommerce-account .woocommerce-MyAccount-navigation > ul > li:last-child > a{
  border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation > ul > li > a::before{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  opacity: .95;
}

.woocommerce-account .woocommerce-MyAccount-navigation > ul > li > a::after{
  content: "›";
  font-size: 22px;
  line-height: 1;
  opacity: .85;
  margin-left: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation > ul > li.is-active > a{
  background: #ff8c00;
  color: #000;
}

.woocommerce-account .woocommerce-MyAccount-navigation > ul > li.is-active > a::after{
  opacity: 1;
}

@media (hover:hover){
  .woocommerce-account .woocommerce-MyAccount-navigation > ul > li > a:hover{
    background: rgba(255,140,0,.10);
  }
}

.woocommerce-MyAccount-navigation-link--dashboard > a::before{ content:"▦"; }
.woocommerce-MyAccount-navigation-link--orders > a::before{ content:"🧾"; }
.woocommerce-MyAccount-navigation-link--downloads > a::before{ content:"⬇"; }
.woocommerce-MyAccount-navigation-link--edit-address > a::before{ content:"⌂"; }
.woocommerce-MyAccount-navigation-link--payment-methods > a::before{ content:"💳"; }
.woocommerce-MyAccount-navigation-link--edit-account > a::before{ content:"👤"; }
.woocommerce-MyAccount-navigation-link--customer-logout > a::before{ content:"⎋"; }

/* ---------- Section titles (Downloads, Orders, etc.) ---------- */
/* .woocommerce-account .entry-title, */
.woocommerce-account .page-title,
.woocommerce-account .woocommerce-products-header__title,
.woocommerce-account .woocommerce-MyAccount-content h1,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title{
  color: #ff8c00 !important;
}

/* ---------- Form field styling (account area only) ---------- */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="number"],
.woocommerce-account .woocommerce-MyAccount-content input[type="search"],
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-account .woocommerce-MyAccount-content select{
  background: #5c5c5c !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,140,0,.35) !important;
  border-radius: 6px;
}

/* ===== Select2 (Country/State) – Kraken styling (drop-in replacement) ===== */


/* Closed field (the visible dropdown) */
.woocommerce-account .select2-container--default .select2-selection--single{
  background: #5c5c5c !important;
  border: 1px solid rgba(255,140,0,.35) !important;
  border-radius: 6px !important;

  /* match your other inputs */
  min-height: 44px !important;
  height: 44px !important;
}

/* Text inside the closed field */
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: #ffffff !important;
  line-height: 44px !important;
  padding-left: 12px !important;
  padding-right: 40px !important; /* leave room for arrow */
}

/* Arrow area */
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 44px !important;
  right: 10px !important;
}

/* Arrow triangle */
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color: #ffffff transparent transparent transparent !important;
}

/* Open dropdown panel (this is NOT always inside MyAccount-content) */
.woocommerce-account .select2-container--open .select2-dropdown{
  background: #5c5c5c !important;
  border: 1px solid rgba(255,140,0,.35) !important;
  border-radius: 6px !important;
  overflow: hidden;
}

/* Search box at top (sometimes present) */
.woocommerce-account .select2-container--open .select2-search__field{
  background: #5c5c5c !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,140,0,.35) !important;
  border-radius: 6px !important;
}

/* Result rows */
.woocommerce-account .select2-container--open .select2-results__option{
  background: #5c5c5c !important;
  color: #ffffff !important;
}

/* Hovered row */
.woocommerce-account .select2-container--open .select2-results__option--highlighted{
  background: rgba(255,140,0,.35) !important;
  color: #ffffff !important;
}

/* Selected row */
.woocommerce-account .select2-container--open .select2-results__option[aria-selected="true"]{
  background: rgba(255,140,0,.55) !important;
  color: #000 !important;
}

/* ===== Fix vertical centering for Select2 placeholder text ===== */
.woocommerce-account
.select2-container--default
.select2-selection--single
.select2-selection__rendered{
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  line-height: normal !important;
}

/*------------------------------------------------------------------*/

.woocommerce-account .woocommerce-MyAccount-content{
  color: #ffffff;
}


.woocommerce-account .woocommerce-MyAccount-content ::placeholder{
  color: rgba(255,255,255,.75);
}

.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus{
  outline: none;
  border-color: #ff8c00 !important;
  box-shadow: 0 0 0 2px rgba(255,140,0,.20);
}


/* ---------- Downloads / Payment Methods “white bar” notices ---------- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-noreviews,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notice{
  background: #5c5c5c !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,140,0,.35) !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notice a{
  color: #ffffff;
}

/* ---------- Orders: add spacing between Pay / View / Cancel buttons ---------- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button{
  margin-right: 10px;
  margin-bottom: 8px; /* keeps it nice if it wraps */
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button:last-child{
  margin-right: 0;
}