/*!
 * TeachDemy — "My Account" dashboard UI/UX fix (v3, precise)
 * ---------------------------------------------------------
 * This version is built directly from the real page source
 * (view-source of /my-account/), not guesswork. Two separate,
 * confirmed issues are fixed:
 *
 * 1) The big card grid is WoodMart's own native feature:
 *      <ul class="wd-my-account-links wd-nav-my-acc ...">
 *        <li class="wd-my-acc-{slug}">
 *          <a href="..."><span class="wd-nav-icon"></span>
 *                         <span class="nav-link-text">Label</span></a>
 *        </li>
 *      </ul>
 *    Icons are set via the site's own Additional CSS using:
 *      .wd-my-acc-{slug} .wd-nav-icon::before { content:url(...) !important; }
 *    The previous version of this file added a SEPARATE ::before
 *    on the <a> itself, which rendered alongside the original
 *    icon instead of replacing it — that's the duplicate-icon bug.
 *    This version targets the EXACT same selector pattern the site
 *    already uses, so it cleanly overrides instead of duplicating.
 *
 * 2) The default WooCommerce dashboard intro paragraph ("From your
 *    account dashboard you can view your recent orders, manage
 *    your ..., and ...") is reset back to plain inline links —
 *    the previous version's generic a[href*=...] card-styling
 *    accidentally matched these too.
 *
 * Scope: is_account_page() only (see functions.php) — Home and
 * every other page are unaffected either way.
 * ---------------------------------------------------------
 */

:root{
  --tdm-blue:        #2F6FE4;
  --tdm-blue-tint:   #EAF1FE;
  --tdm-green:       #1FAE6B;
  --tdm-green-tint:  #E9F9F1;
  --tdm-red:         #E1543A;
  --tdm-red-tint:    #FCEAE7;
  --tdm-amber:       #E0A22B;
  --tdm-amber-tint:  #FBF2E1;
  --tdm-purple:      #7C5CE0;
  --tdm-purple-tint: #F1EDFC;
  --tdm-ink:         #10202E;
  --tdm-ink-dim:     #5B6A78;
  --tdm-border:      #E9ECEF;
  --tdm-bg-soft:     #F7F8FA;
  --tdm-radius-lg:   16px;
  --tdm-radius-md:   12px;
  --tdm-shadow:      0 10px 26px -14px rgba(16,32,46,.16);
  --tdm-shadow-hover:0 18px 36px -16px rgba(16,32,46,.22);
}

/* =========================================================
   1. Reset the default WooCommerce intro paragraph — always a
   direct <p> child of .woocommerce-MyAccount-content, so this
   is a safe, exact match (confirmed from real source).
   ========================================================= */
.woocommerce-MyAccount-content > p a{
  all:revert !important;
  color:var(--tdm-blue) !important;
  text-decoration:underline !important;
  font-weight:600 !important;
}

/* =========================================================
   2. Sidebar navigation (.woocommerce-MyAccount-navigation) —
   confirmed plain-text markup, no icons here. Safe to restyle.
   ========================================================= */
.woocommerce-MyAccount-navigation ul{
  border:1px solid var(--tdm-border);
  border-radius:var(--tdm-radius-md);
  overflow:hidden;
  padding:6px !important;
  background:#fff;
}
.woocommerce-MyAccount-navigation li{
  list-style:none;
}
.woocommerce-MyAccount-navigation li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px !important;
  border-radius:9px;
  color:var(--tdm-ink-dim) !important;
  font-size:13.5px;
  font-weight:600;
  transition:background .2s, color .2s;
}
.woocommerce-MyAccount-navigation li a:hover{
  background:var(--tdm-bg-soft);
  color:var(--tdm-ink) !important;
}
.woocommerce-MyAccount-navigation li.is-active a{
  background:var(--tdm-blue-tint);
  color:var(--tdm-blue) !important;
}

/* unread badge — injected safely via JS (class-tdp-chat.php),
   works for both the sidebar link and the big card link below */
.tdp-unread-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:100px;
  background:var(--tdm-red);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  margin-inline-start:6px;
}

/* =========================================================
   3. The big card grid — confirmed exact markup:
   ul.wd-my-account-links.wd-nav-my-acc > li.wd-my-acc-{slug} > a
   ========================================================= */
.wd-my-account-links.wd-nav-my-acc{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) !important;
  gap:18px;
}
@media (max-width:480px){
  .wd-my-account-links.wd-nav-my-acc{
    grid-template-columns:1fr !important;
  }
}
/* Neutralize the site's own default hover (green wash + scale on
   the <li>) — it was fighting with our lift/shadow hover below,
   causing a messy double-transform. We take full ownership of the
   hover state here instead. */
.wd-my-account-links.wd-nav-my-acc li:hover{
  transform:none !important;
}
.wd-my-account-links.wd-nav-my-acc li a{
  position:relative;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--tdm-border);
  border-radius:var(--tdm-radius-lg);
  box-shadow:var(--tdm-shadow);
  padding:30px 16px;
  text-align:center;
  text-decoration:none !important;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.wd-my-account-links.wd-nav-my-acc li:hover a{
  background:#fff !important;
  transform:translateY(-5px);
  box-shadow:var(--tdm-shadow-hover);
  border-color:var(--tdm-blue);
}
.wd-my-account-links.wd-nav-my-acc li .nav-link-text{
  font-size:13.5px;
  font-weight:700;
  color:var(--tdm-ink);
  transition:color .2s;
}
.wd-my-account-links.wd-nav-my-acc li .wd-nav-icon{
  width:56px;
  height:56px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.wd-my-account-links.wd-nav-my-acc li:hover .wd-nav-icon{
  transform:scale(1.08) rotate(-2deg);
}
/* Messages card's unread badge, top-right corner */
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-messages a .tdp-unread-badge{
  position:absolute;
  top:12px;
  right:12px;
  margin:0;
}

/* =========================================================
   4. Per-item unified icon (exact selector match — this
   OVERRIDES the site's existing rule, it does not duplicate it).
   Uses background-image + background-position:center instead of
   content:url() for pixel-perfect centering across all browsers.
   ========================================================= */

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-dashboard .wd-nav-icon{
  background-color:#EAF1FE;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-dashboard .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232F6FE4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<rect x='3' y='3' width='7' height='7' rx='1.5'/><rect x='14' y='3' width='7' height='7' rx='1.5'/><rect x='3' y='14' width='7' height='7' rx='1.5'/><rect x='14' y='14' width='7' height='7' rx='1.5'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-orders .wd-nav-icon{
  background-color:#EAF1FE;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-orders .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232F6FE4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M6 2h9l3 3v17H6z'/><path d='M9 8h6M9 12h6M9 16h4'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-account-funds .wd-nav-icon{
  background-color:#E9F9F1;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-account-funds .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231FAE6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M20 7H4a2 2 0 00-2 2v9a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2z'/><path d='M2 10h20M16 15h2'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-withdrawal_requests .wd-nav-icon{
  background-color:#FBF2E1;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-withdrawal_requests .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23E0A22B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M12 3v12m0 0l-4-4m4 4l4-4'/><path d='M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-wallet_addresses .wd-nav-icon{
  background-color:#E9F9F1;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-wallet_addresses .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231FAE6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M12 21s-7-4.4-9.5-9A5.5 5.5 0 0112 6.5 5.5 5.5 0 0121.5 12c-2.5 4.6-9.5 9-9.5 9z'/><circle cx='12' cy='11' r='2.2'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-tickets .wd-nav-icon{
  background-color:#F1EDFC;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-tickets .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237C5CE0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M3 8a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 000 4v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2a2 2 0 000-4V8z'/><path d='M12 6v12' stroke-dasharray='2 2'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-edit-address .wd-nav-icon{
  background-color:#FCEAE7;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-edit-address .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23E1543A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M12 21s-7-4.4-9.5-9A5.5 5.5 0 0112 6.5 5.5 5.5 0 0121.5 12c-2.5 4.6-9.5 9-9.5 9z'/><circle cx='12' cy='11' r='2.2'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-edit-account .wd-nav-icon{
  background-color:#EAF1FE;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-edit-account .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232F6FE4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<circle cx='12' cy='8' r='4'/><path d='M4 21v-1a6 6 0 016-6h1M18 21v-2m0 0l-2 2m2-2l2 2'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-wishlist .wd-nav-icon{
  background-color:#FCEAE7;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-wishlist .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23E1543A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M12 20s-7-4.35-9.5-9A5.5 5.5 0 0112 5.5 5.5 5.5 0 0121.5 11c-2.5 4.65-9.5 9-9.5 9z'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-my_exams .wd-nav-icon{
  background-color:#F1EDFC;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-my_exams .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237C5CE0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<rect x='5' y='3' width='14' height='18' rx='2'/><path d='M9 3v2h6V3M9 12l2 2 4-4'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-my_certificates .wd-nav-icon{
  background-color:#FBF2E1;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-my_certificates .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23E0A22B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<circle cx='12' cy='8' r='5'/><path d='M8.5 13l-2 8 5.5-3 5.5 3-2-8'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-become_affiliate .wd-nav-icon{
  background-color:#EAF1FE;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-become_affiliate .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232F6FE4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M17 21v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2M10 11a4 4 0 100-8 4 4 0 000 8zM21 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

/* Shown instead of "Become an Affiliate" once approved — same
   color family, distinct "dashboard/stats" icon. This was the
   missing icon the client reported (was falling back to the
   theme's default grey gear icon since only "become_affiliate"
   had a rule, not this separate "affiliate_dashboard" endpoint). */
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-affiliate_dashboard .wd-nav-icon{
  background-color:#EAF1FE;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-affiliate_dashboard .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232F6FE4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<rect x='3' y='11' width='4' height='9' rx='1'/><rect x='10' y='6' width='4' height='14' rx='1'/><rect x='17' y='3' width='4' height='17' rx='1'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-messages .wd-nav-icon{
  background-color:#F1EDFC;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-messages .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237C5CE0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.wd-my-account-links.wd-nav-my-acc .wd-my-acc-customer-logout .wd-nav-icon{
  background-color:#FCEAE7;
}
.wd-my-account-links.wd-nav-my-acc .wd-my-acc-customer-logout .wd-nav-icon::before{
  content:"" !important;
  display:block;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23E1543A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9'/>%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

/* =========================================================
   Round 17 — MOBILE PASS (phones/tablets)
   Global td-mobile-fix.css already turns the account nav into a
   horizontal pill bar; this tunes the dashboard card grid and
   the icon tiles for real phone widths.
   ========================================================= */
@media (max-width:768px){
  .wd-my-account-links.wd-nav-my-acc{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .wd-my-account-links.wd-nav-my-acc li a{
    padding:22px 12px !important;
    gap:8px !important;
  }
  .wd-my-account-links.wd-nav-my-acc li a i,
  .wd-my-account-links.wd-nav-my-acc li a .wd-nav-icon{
    font-size:26px;
    width:26px;height:26px;
  }
  .wd-my-account-links.wd-nav-my-acc li a span{
    font-size:11.5px !important;
  }
}
@media (max-width:480px){
  .wd-my-account-links.wd-nav-my-acc{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .wd-my-account-links.wd-nav-my-acc li a{
    padding:18px 8px !important;
    gap:6px !important;
  }
  .wd-my-account-links.wd-nav-my-acc li a i,
  .wd-my-account-links.wd-nav-my-acc li a .wd-nav-icon{
    font-size:22px;
    width:22px;height:22px;
  }
  .wd-my-account-links.wd-nav-my-acc li a span{
    font-size:10.5px !important;
  }
}