/*
Theme Name: MacroPad Minimal
Theme URI: https://example.com
Author: Jungle Studio
Author URI: https://junglestudio.au
Description: Super-simple dark gradient theme with a modern font. Only header, footer and background are styled. No padding under the nav, no extra containers, built to let Elementor control all section styles.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: macropad-minimal
*/

:root{
  --bg:#020617;
  --bg-top:#02091f;
  --ink:#e5e7eb;
  --muted:#9ca3af;
  --border-soft:rgba(148,163,184,.25);
  --accent:#6366f1;
}

/* Reset & base */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  height:100%;
}

body{
  margin:0;
  background:
    radial-gradient(circle at top, #0b1120 0, #020617 55%);
  color:var(--ink);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Main – no padding under nav so Elementor controls spacing */
.site-main{
  padding:0;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:linear-gradient(180deg,#020819,#020617);
  border-bottom:1px solid var(--border-soft);
}

.site-header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.brand-mark{
  width:22px;
  height:22px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 0, #ffffff55, transparent 55%),
             linear-gradient(135deg,#4f46e5,#6366f1);
}

.nav-links{
  display:flex;
  gap:18px;
  align-items:center;
  font-size:0.9rem;
  color:var(--muted);
}

.nav-links a{
  padding:4px 0;
  transition:color .15s ease;
}

.nav-links a:hover,
.nav-links .current-menu-item > a{
  color:var(--ink);
}

.nav-cta{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Buttons – minimal pills */
.btn,
button,
input[type="submit"],
input[type="button"]{
  border-radius:999px;
  border:1px solid var(--border-soft);
  padding:7px 14px;
  font-family:inherit;
  font-size:0.85rem;
  font-weight:500;
  color:var(--ink);
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  background:rgba(148,163,184,.12);
}

.btn.primary{
  border-color:var(--accent);
  background:var(--accent);
}

.btn.primary:hover{
  background:#4f46e5;
}

/* Footer */
.site-footer{
  border-top:1px solid var(--border-soft);
  background:radial-gradient(circle at bottom, #020617 0, #020617 55%);
  color:var(--muted);
  font-size:0.8rem;
}

.site-footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:18px 20px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

/* Basic content styles (blog, etc.) */
.entry-content{
  font-size:0.95rem;
}

.entry-content p{
  margin:0 0 1rem;
}

.entry-content a{
  color:var(--accent);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4{
  margin:1.4rem 0 .6rem;
}

/* Mobile */
@media (max-width:768px){
  .site-header-inner{
    padding-inline:16px;
  }
  .nav-links{
    display:none; /* keep header clean – use mobile menu plugin if needed */
  }
  .site-footer-inner{
    padding-inline:16px;
  }
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Center nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links .nav-link {
  color: #e5edff;
  font-size: 0.9rem;
  text-decoration: none;
}

.nav-links .nav-link:hover {
  color: #49b1ff;
}

/* Right side: cart + Buy Now */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Cart button: same pill height as Buy Now */
.cart-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;            /* similar padding as .btn */
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(5, 8, 22, 0.95);
  color: #ffffff;               /* makes icon + text white via currentColor */
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1;               /* keeps vertical centering clean */
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 1),
    0 0 16px rgba(15, 23, 42, 0.9);
}

/* Hover state to match your theme */
.cart-icon-btn:hover {
  background: rgba(37, 46, 84, 0.95);
  border-color: rgba(129, 140, 248, 0.9);
}

/* Cart icon itself */
.cart-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;           /* stays white */
}

/* Small count badge sits in the top-right of the pill */
.cart-count-badge {
  position: absolute;
  top: 3px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f97373;
  color: #0b1120;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Make the Discord button a proper flex row and center everything */
.site-header .nav-cta .discord-btn {
  display: inline-flex !important;
  align-items: center !important;   /* vertical centering */
  justify-content: center !important; /* horizontal centering of icon+text */
  gap: 8px;
  line-height: 1 !important;
}

/* Icon + label both treated as flex items */
.site-header .nav-cta .discord-btn .discord-icon,
.site-header .nav-cta .discord-btn .discord-label {
  display: inline-flex;
  align-items: center;
}

/* Kill any previous offsets on the icon */
.site-header .nav-cta .discord-btn .discord-icon,
.site-header .nav-cta .discord-btn .discord-icon svg {
  margin: 0 !important;
  top: 0 !important;
  transform: none !important;
  display: block;
}
/* ===========================
   Global header layout
   =========================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  background: rgba(2, 6, 23, 0.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.9);
}

.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-sizing: border-box;
}

/* Brand */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #e5edff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.brand-mark {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0%, #22d3ee, #4f46e5);
  box-shadow:
    0 0 0 4px rgba(59, 130, 246, 0.4),
    0 0 24px rgba(56, 189, 248, 0.9);
}

/* Desktop nav */

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-link {
  font-size: 0.9rem;
  text-decoration: none;
  color: #9ca3af;
  transition: color 0.16s ease-out;
}

.nav-link:hover {
  color: #e5edff;
}

/* Desktop CTAs */

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn.primary {
  background:
    radial-gradient(circle at 0 0, #ffffff, transparent 55%),
    linear-gradient(135deg, #6366f1, #22d3ee);
  color: #020617;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.9);
  transition: transform 0.16s ease-out, box-shadow 0.16s ease-out;
}

.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 1);
}

.discord-btn {
  background: rgba(15, 23, 42, 0.9);
  color: #e5edff;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.7);
}

.discord-btn:hover {
  background: rgba(15, 23, 42, 1);
  box-shadow: 0 0 0 1px rgba(191, 219, 254, 0.95);
}

.discord-icon {
  display: inline-flex;
}

/* Mobile toggle */

.nav-toggle {
  display: none; /* show only on mobile */
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.9);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
}

.nav-toggle-line {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #e5edff;
}

/* Mobile nav */

.mobile-nav {
  display: none;
  background: rgba(2, 6, 23, 0.98);
  border-bottom: 1px solid rgba(15, 23, 42, 0.95);
  padding: 10px 18px 14px;
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav-link {
  display: block;
  padding: 10px 0;
  font-size: 0.94rem;
  text-decoration: none;
  color: #e5edff;
  border-bottom: 1px solid rgba(31, 41, 55, 0.8);
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

.mobile-nav-link-primary {
  margin-top: 4px;
  font-weight: 600;
  color: #0f172a;
  background:
    radial-gradient(circle at 0 0, #ffffff, transparent 55%),
    linear-gradient(135deg, #6366f1, #22d3ee);
  border-radius: 999px;
  text-align: center;
}

/* ===========================
   Responsive behaviour
   =========================== */

@media (max-width: 768px) {
  .site-header-inner {
    padding-inline: 14px;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }
}




/* =========================================
   NexMacro – ORDER RECEIVED / THANK YOU PAGE
   ========================================= */

/* Main wrapper */
.woocommerce .woocommerce-order {
  max-width: 900px;
  margin: 60px auto 100px;
  padding: 0 20px;
  color: var(--mp-ink, #e5edff);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

/* ---------- SUCCESS PILL ---------- */
.woocommerce .woocommerce-notice--success.woocommerce-thankyou-order-received {
  max-width: 900px;
  margin: 0 auto 18px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.7); /* green accent */
  background:
    radial-gradient(circle at top left, rgba(124, 92, 255, 0.25), rgba(7, 12, 24, 0.96)),
    linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(15, 23, 42, 0.9));
  font-size: 0.95rem;
  text-align: center;
  color: var(--mp-ink, #e5edff);
}

/* ---------- ORDER OVERVIEW BAR (TOP CARD) ---------- */

.woocommerce .woocommerce-thankyou-order-details.woocommerce-order-overview {
  max-width: 900px;
  margin: 0 auto 26px;
  padding: 18px 22px;
  list-style: none;

  /* NEW: grid layout for desktop + mobile */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  column-gap: 24px;
  row-gap: 12px;

  border-radius: 18px;
  border: 1px solid rgba(34, 197, 94, 0.45); /* subtle green border */
  background: radial-gradient(circle at top left,
    rgba(76, 81, 191, 0.4),
    rgba(5, 8, 23, 0.98)
  );
}

/* Each item */
.woocommerce .woocommerce-thankyou-order-details li {
  min-width: 0;
  margin: 0;
  padding: 2px 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--mp-muted, #9ca9cc);
  text-align: left;

  /* kill any theme dividers */
  border: none !important;
}

/* remove any pseudo divider lines added by theme */
.woocommerce .woocommerce-thankyou-order-details li::before,
.woocommerce .woocommerce-thankyou-order-details li::after {
  content: none !important;
}

/* Value text */
.woocommerce .woocommerce-thankyou-order-details li strong {
  display: block;
  margin-top: 4px;
  font-size: 0.98rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--mp-ink, #e5edff);
}

/* slight emphasis on total */
.woocommerce .woocommerce-order-overview__total strong {
  font-size: 1.05rem;
}

/* Email wrapping tidy */
.woocommerce .woocommerce-order-overview__email strong {
  max-width: 100%;
  font-size: 0.9rem;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---------- ORDER DETAILS CARD ---------- */

.woocommerce .woocommerce-order-details {
  max-width: 900px;
  margin: 0 auto 24px;
  padding: 22px 24px 26px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(7, 12, 24, 0.96);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.75);
}

.woocommerce .woocommerce-order-details__title {
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--mp-ink, #e5edff);
}

/* Table */
.woocommerce .woocommerce-table--order-details.shop_table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.95rem;
}

.woocommerce .woocommerce-table--order-details thead th {
  padding: 10px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  font-weight: 500;
  color: var(--mp-muted, #9ca9cc);
}

.woocommerce .woocommerce-table--order-details tbody td {
  padding: 12px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.woocommerce .woocommerce-table--order-details tbody tr:last-child td {
  border-bottom: none;
}

.woocommerce .woocommerce-table--order-details tfoot th,
.woocommerce .woocommerce-table--order-details tfoot td {
  padding: 8px 0;
  border: 0;
  font-size: 0.95rem;
}

.woocommerce .woocommerce-table--order-details tfoot th {
  text-align: left;
  color: var(--mp-muted, #9ca9cc);
  font-weight: 500;
}

.woocommerce .woocommerce-table--order-details tfoot td {
  text-align: right;
  font-weight: 600;
}

/* emphasise final total row */
.woocommerce .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce .woocommerce-table--order-details tfoot tr:last-child td {
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 1.05rem;
  color: var(--mp-ink, #e5edff);
}

/* ---------- CUSTOMER DETAILS CARD ---------- */

.woocommerce .woocommerce-customer-details {
  max-width: 900px;
  margin: 0 auto;
  padding: 22px 24px 26px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(7, 12, 24, 0.96);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.75);
}

.woocommerce .woocommerce-customer-details .col2-set.addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

/* Force billing left, shipping right */
.woocommerce .woocommerce-column--billing-address {
  order: 1;
}
.woocommerce .woocommerce-column--shipping-address {
  order: 2;
}

.woocommerce .woocommerce-customer-details .woocommerce-column__title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--mp-ink, #e5edff);
}

.woocommerce .woocommerce-customer-details address {
  margin: 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.3);
  font-style: normal;
  line-height: 1.6;
  color: var(--mp-ink, #e5edff);
  opacity: 0.95;
}

/* Billing / shipping email line */
.woocommerce address .woocommerce-customer-details--email {
  display: block;
  margin-top: 4px;
  max-width: 100%;
  font-size: 0.9rem;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.woocommerce .woocommerce-customer-details--phone {
  margin: 6px 0 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* ---------- MOBILE ---------- */

@media (max-width: 768px) {
  .woocommerce .woocommerce-order {
    margin: 40px auto 80px;
    padding: 0 14px;
  }

  .woocommerce .woocommerce-notice--success.woocommerce-thankyou-order-received {
    padding: 10px 18px;
  }

  .woocommerce .woocommerce-thankyou-order-details.woocommerce-order-overview {
    padding: 14px 16px;
    column-gap: 18px;
    row-gap: 10px;
  }

  .woocommerce .woocommerce-customer-details .col2-set.addresses {
    grid-template-columns: 1fr;
  }

  .woocommerce .woocommerce-customer-details address {
    padding: 12px 14px;
  }
}

/* Fix layout of top overview pill on desktop */
@media (min-width: 900px) {
  .woocommerce .woocommerce-thankyou-order-details.woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "order date email total"
      "payment payment payment payment";
    column-gap: 24px;
    row-gap: 8px;
  }

  .woocommerce .woocommerce-order-overview__order {
    grid-area: order;
  }

  .woocommerce .woocommerce-order-overview__date {
    grid-area: date;
  }

  .woocommerce .woocommerce-order-overview__email {
    grid-area: email;
  }

  .woocommerce .woocommerce-order-overview__total {
    grid-area: total;
  }

  .woocommerce .woocommerce-order-overview__payment-method {
    grid-area: payment;
  }
}
/* Hide payment method in the TOP overview pill */
.woocommerce .woocommerce-order-overview__payment-method {
  display: none !important;
}

/* Desktop: reflow overview pill without payment row */
@media (min-width: 900px) {
  .woocommerce .woocommerce-thankyou-order-details.woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "order date email total";
    column-gap: 24px;
    row-gap: 8px;
  }

  .woocommerce .woocommerce-order-overview__order {
    grid-area: order;
  }

  .woocommerce .woocommerce-order-overview__date {
    grid-area: date;
  }

  .woocommerce .woocommerce-order-overview__email {
    grid-area: email;
  }

  .woocommerce .woocommerce-order-overview__total {
    grid-area: total;
  }
}