/* =========================================================
   NEXA DIGITALS — INVOICE GENERATOR
   ========================================================= */

:root {

  --nexa-black: #000000;
  --nexa-dark: #080808;
  --nexa-card: #0d0d0d;
  --nexa-card-2: #111111;

  --nexa-cyan: #00e5ff;
  --nexa-pink: #ff00c8;

  --nexa-white: #ffffff;
  --nexa-gray: #a6a6a6;
  --nexa-muted: #707070;

  --nexa-border: rgba(255,255,255,0.09);

  --nexa-gradient:
    linear-gradient(
      90deg,
      #00e5ff 0%,
      #ff00c8 100%
    );

  --radius: 18px;

}


/* ================= RESET ================= */

* {

  margin: 0;
  padding: 0;

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  font-family:
    "Space Grotesk",
    sans-serif;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(0,229,255,0.07),
      transparent 35%
    ),
    #000;

  color: var(--nexa-white);

  min-height: 100vh;

}


/* ================= HEADER ================= */

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background:
    rgba(0,0,0,0.85);

  backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid var(--nexa-border);

}


.nav-container {

  width: min(
    1200px,
    calc(100% - 40px)
  );

  min-height: 72px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}


.back-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--nexa-gray);

  text-decoration: none;

  font-size: 14px;

  font-weight: 500;

  transition: 0.25s ease;

}


.back-link:hover {

  color:
    var(--nexa-cyan);

  transform:
    translateX(-3px);

}


.nav-brand {

  font-size: 15px;

  font-weight: 700;

  letter-spacing: 2px;

}


.brand-gradient,
.gradient-text {

  background:
    var(--nexa-gradient);

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

}


/* ================= MAIN ================= */

.main-container {

  width: min(
    950px,
    calc(100% - 40px)
  );

  margin: auto;

  padding:
    70px 0 100px;

}


/* ================= HERO ================= */

.hero {

  text-align: center;

  max-width: 750px;

  margin:
    0 auto 55px;

}


.hero-badge {

  display: inline-flex;

  padding:
    7px 13px;

  border:
    1px solid
    rgba(0,229,255,0.25);

  border-radius:
    999px;

  background:
    rgba(0,229,255,0.05);

  color:
    var(--nexa-cyan);

  font-size: 10px;

  letter-spacing: 2px;

  font-weight: 700;

  margin-bottom: 20px;

}


.hero h1 {

  font-size:
    clamp(38px, 6vw, 64px);

  line-height: 1.05;

  letter-spacing: -2px;

  margin-bottom: 20px;

}


.hero h1 span {

  display: block;

}


.hero p {

  color:
    var(--nexa-gray);

  font-size: 16px;

  line-height: 1.7;

  max-width: 650px;

  margin: auto;

}


/* ================= BUILDER ================= */

.builder-card,
.paywall-card,
.result-section {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.015)
    );

  border:
    1px solid var(--nexa-border);

  border-radius:
    var(--radius);

  box-shadow:
    0 25px 80px
    rgba(0,0,0,0.4);

}


.builder-card {

  padding: 34px;

}


/* ================= SECTION HEADING ================= */

.section-heading,
.result-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}


.section-heading {

  margin-bottom: 35px;

}


.section-heading > div,
.result-header > div:first-child {

  display: flex;

  align-items: center;

  gap: 15px;

}


.section-number {

  font-size: 11px;

  color:
    var(--nexa-cyan);

  letter-spacing: 2px;

  font-weight: 700;

}


.section-heading h2,
.result-header h2 {

  font-size: 22px;

}


.status-pill {

  display: flex;

  align-items: center;

  gap: 7px;

  color:
    #aaa;

  font-size: 11px;

  border:
    1px solid var(--nexa-border);

  padding:
    7px 11px;

  border-radius:
    999px;

}


.status-dot {

  width: 6px;

  height: 6px;

  border-radius:
    50%;

  background:
    var(--nexa-cyan);

  box-shadow:
    0 0 10px
    var(--nexa-cyan);

}


/* ================= FORM SECTIONS ================= */

.form-section {

  padding:
    28px 0;

  border-top:
    1px solid var(--nexa-border);

}


.form-section:first-of-type {

  border-top: none;

}


.section-title {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 18px;

}


.section-title > span {

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color:
    var(--nexa-gray);

}


.item-heading {

  margin-bottom: 15px;

}


.form-grid {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 18px;

}


.form-group {

  display: flex;

  flex-direction: column;

  gap: 8px;

}


.full-width {

  grid-column:
    1 / -1;

}


.form-group label {

  color:
    #888;

  font-size: 11px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1px;

}


input,
textarea,
select {

  width: 100%;

  background:
    #050505;

  border:
    1px solid var(--nexa-border);

  border-radius:
    10px;

  color:
    var(--nexa-white);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 14px;

  padding:
    13px 14px;

  outline: none;

  transition:
    0.25s ease;

}


input::placeholder,
textarea::placeholder {

  color:
    #444;

}


textarea {

  resize:
    vertical;

  min-height:
    75px;

}


select {

  appearance:
    none;

  cursor:
    pointer;

}


input:focus,
textarea:focus,
select:focus {

  border-color:
    rgba(0,229,255,0.55);

  box-shadow:
    0 0 0 3px
    rgba(0,229,255,0.06);

}


/* ================= ACTION ================= */

.small-action {

  background:
    rgba(0,229,255,0.06);

  border:
    1px solid
    rgba(0,229,255,0.2);

  color:
    var(--nexa-cyan);

  padding:
    8px 12px;

  border-radius:
    8px;

  font-family:
    inherit;

  font-weight: 700;

  font-size: 11px;

  cursor:
    pointer;

  transition:
    0.25s ease;

}


.small-action:hover {

  background:
    rgba(0,229,255,0.12);

}


/* ================= ITEMS ================= */

.items-header {

  display: grid;

  grid-template-columns:
    1fr 80px 140px 130px 38px;

  gap: 10px;

  color:
    #555;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 1px;

  padding:
    0 0 10px 38px;

}


.invoice-item {

  display: grid;

  grid-template-columns:
    28px 1fr 80px 140px 130px 38px;

  gap: 10px;

  align-items: center;

  margin-bottom: 10px;

}


.item-number {

  color:
    var(--nexa-cyan);

  font-size: 10px;

  font-weight: 700;

}


.item-total {

  min-height: 45px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  padding:
    0 10px;

  color:
    var(--nexa-white);

  font-size: 13px;

  font-weight: 700;

  background:
    rgba(255,255,255,0.025);

  border:
    1px solid var(--nexa-border);

  border-radius:
    10px;

}


.remove-item {

  width: 38px;

  height: 45px;

  border:
    1px solid
    rgba(255,0,200,0.15);

  border-radius:
    10px;

  background:
    rgba(255,0,200,0.04);

  color:
    #888;

  cursor:
    pointer;

  font-size: 20px;

  transition:
    0.2s ease;

}


.remove-item:hover {

  color:
    var(--nexa-pink);

  border-color:
    var(--nexa-pink);

}


/* ================= BUILDER BUTTONS ================= */

.builder-actions {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 12px;

  padding-top: 10px;

}


.btn {

  min-height: 50px;

  border-radius:
    11px;

  padding:
    0 18px;

  border: none;

  font-family:
    inherit;

  font-size: 13px;

  font-weight: 700;

  cursor:
    pointer;

  transition:
    0.25s ease;

}


.btn span {

  margin-left: 8px;

}


.btn-primary {

  background:
    var(--nexa-gradient);

  color:
    #000;

  box-shadow:
    0 10px 35px
    rgba(0,229,255,0.08);

}


.btn-primary:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 15px 45px
    rgba(0,229,255,0.16);

}


.btn-secondary {

  background:
    rgba(255,255,255,0.03);

  border:
    1px solid var(--nexa-border);

  color:
    var(--nexa-white);

}


.btn-secondary:hover {

  border-color:
    rgba(0,229,255,0.35);

  color:
    var(--nexa-cyan);

}


/* ================= PAYWALL ================= */

.paywall-card {

  display: none;

  margin-top: 24px;

  padding: 30px;

  border:
    1px solid transparent;

  background:
    linear-gradient(
      var(--nexa-card),
      var(--nexa-card)
    ) padding-box,
    var(--nexa-gradient) border-box;

  position: relative;

  overflow: hidden;

}


.paywall-card.visible {

  display: grid;

  grid-template-columns:
    auto 1fr;

  gap: 22px;

  align-items: center;

  animation:
    reveal 0.4s ease;

}


.pro-icon {

  width: 55px;

  height: 55px;

  display: grid;

  place-items: center;

  border-radius:
    15px;

  background:
    var(--nexa-gradient);

  color:
    #000;

  font-size: 25px;

}


.pro-label {

  color:
    var(--nexa-cyan);

  font-size: 10px;

  letter-spacing: 2px;

  font-weight: 700;

}


.paywall-card h2 {

  font-size: 22px;

  margin:
    5px 0 8px;

}


.paywall-card p {

  color:
    var(--nexa-gray);

  font-size: 13px;

  line-height: 1.6;

}


.paywall-card strong {

  color:
    var(--nexa-white);

}


.pro-features {

  grid-column:
    1 / -1;

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 10px;

  padding:
    18px 0;

  border-top:
    1px solid var(--nexa-border);

  border-bottom:
    1px solid var(--nexa-border);

}


.pro-features span {

  color:
    #999;

  font-size: 11px;

}


.pro-features span::first-letter {

  color:
    var(--nexa-cyan);

}


.paywall-card > .btn {

  grid-column:
    1 / -1;

}


.secure-payment {

  grid-column:
    1 / -1;

  text-align: center;

  font-size: 10px !important;

  color:
    #555 !important;

}


/* ================= RESULT ================= */

.result-section {

  display: none;

  margin-top: 50px;

  padding: 30px;

  animation:
    reveal 0.5s ease;

}


.result-section.visible {

  display: block;

}


.result-section.previewing {

  display: block;

}


.result-header {

  margin-bottom: 25px;

}


.result-header > div:first-child {

  align-items:
    flex-start;

}


.result-header p {

  color:
    var(--nexa-muted);

  font-size: 12px;

  margin-top: 5px;

}


.result-actions {

  display: flex;

  gap: 8px;

}


.result-actions .btn {

  min-height:
    42px;

  padding:
    0 13px;

  font-size:
    11px;

}


/* ================= INVOICE PAPER ================= */

.invoice-paper {

  overflow-x:
    auto;

  border-radius:
    12px;

}


.invoice-document {

  width:
    100%;

  min-width:
    700px;

  background:
    #fff;

  color:
    #111;

  padding:
    50px;

  border-radius:
    4px;

  box-shadow:
    0 30px 70px
    rgba(0,0,0,0.35);

}


/* TOP */

.invoice-top {

  display: flex;

  justify-content:
    space-between;

  gap: 40px;

  padding-bottom:
    32px;

  border-bottom:
    3px solid #111;

}


.invoice-logo {

  font-size:
    24px;

  font-weight:
    800;

  text-transform:
    uppercase;

  margin-bottom:
    12px;

}


.invoice-title-block {

  text-align:
    right;

}


.invoice-label {

  display:
    block;

  color:
    #777;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    3px;

}


.invoice-title-block h1 {

  margin-top:
    5px;

  font-size:
    28px;

}


/* META */

.invoice-meta {

  display:
    flex;

  justify-content:
    space-between;

  gap: 30px;

  padding:
    32px 0;

}


.meta-label {

  display:
    block;

  color:
    #888;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    2px;

  margin-bottom:
    8px;

}


.invoice-meta strong {

  display:
    block;

  font-size:
    14px;

}


.muted {

  color:
    #777;

  font-size:
    11px;

  line-height:
    1.6;

  white-space:
    normal;

  margin-top:
    5px;

}


.invoice-dates {

  display:
    flex;

  gap: 40px;

}


.invoice-dates span {

  display:
    block;

  color:
    #888;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    1px;

  margin-bottom:
    7px;

}


.invoice-dates strong {

  font-size:
    12px;

}


/* TABLE */

.invoice-table {

  width:
    100%;

  border-collapse:
    collapse;

}


.invoice-table th {

  padding:
    13px 10px;

  background:
    #111;

  color:
    #fff;

  font-size:
    9px;

  letter-spacing:
    1px;

  text-align:
    left;

}


.invoice-table td {

  padding:
    15px 10px;

  border-bottom:
    1px solid #e5e5e5;

  font-size:
    11px;

}


.invoice-table td strong {

  font-size:
    12px;

}


.center {

  text-align:
    center !important;

}


.right {

  text-align:
    right !important;

}


.strong {

  font-weight:
    700;

}


/* BOTTOM */

.invoice-bottom {

  display:
    flex;

  justify-content:
    space-between;

  gap: 50px;

  margin-top:
    38px;

}


.payment-block {

  flex:
    1;

}


.payment-details,
.notes-block {

  margin-bottom:
    25px;

}


.payment-details p,
.notes-block p {

  margin:
    4px 0;

  font-size:
    11px;

  line-height:
    1.6;

}


.invoice-summary {

  width:
    280px;

}


.invoice-summary-row {

  display:
    flex;

  justify-content:
    space-between;

  gap: 20px;

  padding:
    8px 0;

  font-size:
    11px;

}


.discount-value {

  color:
    #d00000;

}


.invoice-total {

  display:
    flex;

  justify-content:
    space-between;

  gap: 20px;

  margin-top:
    12px;

  padding:
    16px 0;

  border-top:
    3px solid #111;

  font-size:
    16px;

  font-weight:
    800;

}


/* FOOTER */

.invoice-footer {

  display:
    flex;

  justify-content:
    space-between;

  gap: 20px;

  margin-top:
    45px;

  padding-top:
    18px;

  border-top:
    1px solid #ddd;

  color:
    #888;

  font-size:
    9px;

}


/* ================= FOOTER ================= */

footer {

  border-top:
    1px solid var(--nexa-border);

  text-align:
    center;

  padding:
    45px 20px;

  color:
    #555;

}


.footer-brand {

  color:
    var(--nexa-white);

  font-size:
    14px;

  font-weight:
    700;

  letter-spacing:
    2px;

  margin-bottom:
    8px;

}


footer p {

  font-size:
    11px;

  margin-bottom:
    12px;

}


footer span {

  font-size:
    10px;

}


/* ================= TOAST ================= */

.nexa-toast {

  position:
    fixed;

  z-index:
    9999;

  right:
    25px;

  bottom:
    25px;

  max-width:
    360px;

  padding:
    14px 18px;

  border:
    1px solid var(--nexa-border);

  border-radius:
    12px;

  background:
    #111;

  color:
    #fff;

  font-size:
    12px;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,0.5);

  transform:
    translateY(20px);

  opacity:
    0;

  pointer-events:
    none;

  transition:
    0.3s ease;

}


.nexa-toast.show {

  opacity:
    1;

  transform:
    translateY(0);

}


.nexa-toast.success {

  border-color:
    rgba(0,229,255,0.5);

}


.nexa-toast.error {

  border-color:
    rgba(255,0,200,0.5);

}


/* ================= ANIMATION ================= */

@keyframes reveal {

  from {

    opacity: 0;

    transform:
      translateY(15px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


/* ================= RESPONSIVE ================= */

@media (max-width: 850px) {

  .invoice-item {

    grid-template-columns:
      24px
      1fr
      70px
      110px
      110px
      38px;

  }

  .items-header {

    grid-template-columns:
      1fr 70px 110px 110px 38px;

  }

  .pro-features {

    grid-template-columns:
      repeat(2,1fr);

  }

}


@media (max-width: 700px) {

  .main-container {

    width:
      min(
        100% - 24px,
        600px
      );

    padding-top:
      45px;

  }


  .nav-container {

    width:
      calc(100% - 24px);

  }


  .nav-brand {

    display:
      none;

  }


  .builder-card,
  .paywall-card,
  .result-section {

    padding:
      20px;

  }


  .form-grid {

    grid-template-columns:
      1fr;

  }


  .full-width {

    grid-column:
      auto;

  }


  .builder-actions {

    grid-template-columns:
      1fr;

  }


  .paywall-card.visible {

    grid-template-columns:
      1fr;

    text-align:
      center;

  }


  .pro-icon {

    margin:
      auto;

  }


  .pro-features {

    grid-template-columns:
      1fr;

    text-align:
      left;

  }


  .result-header {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .result-actions {

    width:
      100%;

    flex-wrap:
      wrap;

  }


  .result-actions .btn {

    flex:
      1;

  }


  .invoice-document {

    padding:
      30px;

  }

}


@media (max-width: 560px) {

  .hero h1 {

    letter-spacing:
      -1px;

  }


  .section-heading {

    align-items:
      flex-start;

  }


  .status-pill {

    display:
      none;

  }


  .items-header {

    display:
      none;

  }


  .invoice-item {

    grid-template-columns:
      24px
      1fr 1fr;

    gap:
      8px;

    padding:
      10px 0;

    border-bottom:
      1px solid var(--nexa-border);

  }


  .invoice-item .item-description {

    grid-column:
      2 / -1;

  }


  .invoice-item .item-quantity {

    grid-column:
      2 / 3;

  }


  .invoice-item .item-price {

    grid-column:
      3 / 4;

  }


  .invoice-item .item-total {

    grid-column:
      2 / 3;

    justify-content:
      flex-start;

  }


  .invoice-item .remove-item {

    grid-column:
      3 / 4;

  }


  .invoice-bottom {

    flex-direction:
      column;

  }


  .invoice-summary {

    width:
      100%;

  }


  .invoice-dates {

    flex-direction:
      column;

    gap:
      15px;

  }

}