/*
 * ============================================================
 * BRILL VAULT DESKTOP OS V8
 * TRANSFER WORKSPACE
 * ============================================================
 */

#bvTransferWorkspace {
  --tw-panel:
    rgba(11, 18, 29, .93);

  --tw-panel-2:
    rgba(14, 23, 37, .96);

  --tw-line:
    rgba(128, 151, 188, .105);

  --tw-line-blue:
    rgba(73, 132, 225, .27);

  --tw-text:
    #eef3f8;

  --tw-muted:
    #718097;

  --tw-blue:
    #4b87e8;

  --tw-green:
    #54d5a5;

  --tw-gold:
    #d5ad60;

  --tw-red:
    #dd747e;

  display: grid;

  gap: 16px;

  color:
    var(--tw-text);
}


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

.bvt-header {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  min-height: 80px;

  gap: 24px;
}

.bvt-heading {
  display: grid;

  gap: 4px;
}

.bvt-kicker {
  margin: 0;

  color: #6d91c5;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .19em;

  text-transform: uppercase;
}

.bvt-heading h1 {
  margin: 0;

  color: #f3f6fa;

  font-size: 31px;

  font-weight: 780;

  letter-spacing: -.035em;
}

.bvt-heading p:last-child {
  margin: 2px 0 0;

  color: var(--tw-muted);

  font-size: 11px;
}

.bvt-head-actions {
  display: flex;

  align-items: center;

  gap: 8px;
}

.bvt-chip {
  display: inline-flex;

  align-items: center;

  min-height: 34px;

  gap: 7px;

  padding: 0 11px;

  border:
    1px solid
    var(--tw-line);

  border-radius: 9px;

  background:
    rgba(14, 22, 35, .70);

  color: #79879c;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .07em;
}

.bvt-chip.secure {
  border-color:
    rgba(82, 198, 153, .15);

  background:
    rgba(46, 128, 96, .055);

  color: #8fc8af;
}

.bvt-chip.secure::before {
  content: "";

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background:
    var(--tw-green);

  box-shadow:
    0 0 11px
    rgba(84, 213, 165, .5);
}

.bvt-refresh {
  min-height: 34px !important;

  padding: 0 13px !important;

  border-radius: 9px !important;

  font-size: 9px !important;
}


/* ============================================================
   ACCOUNT STRIP
   ============================================================ */

.bvt-summary {
  display: grid;

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

  overflow: hidden;

  border:
    1px solid
    var(--tw-line);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(13, 21, 34, .91),
      rgba(8, 14, 23, .93)
    );
}

.bvt-stat {
  display: grid;

  min-height: 84px;

  align-content: center;

  gap: 5px;

  padding: 15px 18px;

  border-right:
    1px solid
    var(--tw-line);
}

.bvt-stat:last-child {
  border-right: 0;
}

.bvt-stat span {
  color: #606f86;

  font-size: 8px;

  font-weight: 750;

  letter-spacing: .08em;

  text-transform: uppercase;
}

.bvt-stat strong {
  overflow: hidden;

  color: #edf1f7;

  font-size: 18px;

  font-weight: 760;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.bvt-stat.balance strong {
  color: #f0f4fa;
}

.bvt-stat.tier strong {
  color: #d7b36a;
}


/* ============================================================
   TRANSFER GRID
   ============================================================ */

.bvt-grid {
  display: grid;

  grid-template-columns:
    minmax(540px, 1fr)
    390px;

  align-items: start;

  gap: 14px;
}


/* ============================================================
   COMPOSER
   ============================================================ */

.bvt-composer {
  min-height: 590px;

  overflow: hidden;

  border:
    1px solid
    var(--tw-line);

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(12, 19, 31, .92),
      rgba(8, 14, 23, .94)
    );
}

.bvt-composer-head {
  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 58px;

  gap: 18px;

  padding: 0 18px;

  border-bottom:
    1px solid
    var(--tw-line);
}

.bvt-composer-title {
  display: grid;

  gap: 2px;
}

.bvt-composer-title strong {
  color: #e4eaf2;

  font-size: 10px;

  font-weight: 780;
}

.bvt-composer-title span {
  color: #59687f;

  font-size: 8px;
}

.bvt-route {
  color: #7198cf;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .08em;
}


/* Original production panel is moved here, not cloned. */

#bvtComposerHost {
  padding: 18px;
}

#bvtComposerHost > .panel {
  padding: 0 !important;

  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

#bvtComposerHost > .panel > .eyebrow,
#bvtComposerHost > .panel > h2 {
  display: none !important;
}


/* Existing form */

#bvtComposerHost #transferForm {
  display: grid;

  gap: 15px;
}

#bvtComposerHost #transferForm label {
  display: grid;

  gap: 7px;

  color: #78879c;

  font-size: 9px;

  font-weight: 650;
}

#bvtComposerHost #transferForm input {
  min-height: 46px !important;

  padding: 0 13px !important;

  border:
    1px solid
    rgba(126, 151, 190, .13) !important;

  border-radius: 11px !important;

  background:
    rgba(7, 13, 22, .69) !important;

  color: #eef3f9 !important;

  font-size: 11px !important;

  outline: none;

  transition: .15s ease;
}

#bvtComposerHost #transferForm input:focus {
  border-color:
    rgba(74, 133, 226, .40) !important;

  box-shadow:
    0 0 0 3px
    rgba(74, 133, 226, .065);
}

#bvtComposerHost #transferForm button[type="submit"] {
  min-height: 46px !important;

  margin-top: 4px;

  border-radius: 11px !important;

  font-size: 10px !important;

  font-weight: 780 !important;
}


/* Recipient */

#bvtComposerHost #recipientPreview {
  min-height: 52px;

  display: flex;

  align-items: center;

  padding: 10px 13px;

  border:
    1px solid
    rgba(124, 149, 188, .11);

  border-radius: 11px;

  background:
    rgba(16, 25, 40, .52);

  color: #65758c;

  font-size: 9px;
}

#bvtComposerHost #recipientPreview.valid {
  border-color:
    rgba(76, 190, 148, .19);

  background:
    rgba(46, 125, 95, .055);

  color: #93cbb4;
}


/* Existing banking account summary */

#bvtComposerHost #bvTransferAccount {
  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  gap: 7px !important;

  margin:
    0
    0
    16px !important;
}

#bvtComposerHost .bv-transfer-account-item {
  display: grid;

  min-height: 70px;

  align-content: center;

  gap: 4px;

  padding: 10px 12px;

  border:
    1px solid
    rgba(127, 151, 188, .09);

  border-radius: 10px;

  background:
    rgba(20, 31, 48, .30);
}

#bvtComposerHost .bv-transfer-account-item span {
  color: #607086;

  font-size: 7px;

  text-transform: uppercase;
}

#bvtComposerHost .bv-transfer-account-item strong {
  overflow: hidden;

  color: #dce5ef;

  font-size: 9px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* Existing calculation widgets */

#bvtComposerHost [id*="TransferCalc"],
#bvtComposerHost [class*="transfer-calc"] {
  border-color:
    rgba(125, 150, 188, .10) !important;

  background:
    rgba(12, 20, 32, .52) !important;
}


/* Result */

#bvtComposerHost #transferMessage {
  min-height: 24px;

  color: #718197;

  font-size: 9px;

  line-height: 1.55;
}


/* ============================================================
   REVIEW
   ============================================================ */

.bvt-review {
  position: sticky;

  top: 83px;

  min-height: 590px;

  overflow: hidden;

  border:
    1px solid
    var(--tw-line);

  border-radius: 17px;

  background:
    linear-gradient(
      150deg,
      rgba(15, 24, 39, .97),
      rgba(8, 14, 23, .98)
    );

  box-shadow:
    0 22px 55px
    rgba(0, 0, 0, .15);
}

.bvt-review-head {
  display: grid;

  gap: 6px;

  padding: 19px;

  border-bottom:
    1px solid
    var(--tw-line);
}

.bvt-review-head small {
  color: #6788b9;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .15em;

  text-transform: uppercase;
}

.bvt-review-head h2 {
  margin: 0;

  color: #f1f4f9;

  font-size: 21px;

  font-weight: 770;

  letter-spacing: -.025em;
}

.bvt-review-status {
  display: inline-flex;

  width: fit-content;

  min-height: 25px;

  align-items: center;

  margin-top: 4px;

  padding: 0 8px;

  border:
    1px solid
    rgba(76, 132, 222, .17);

  border-radius: 999px;

  color: #83a9df;

  font-size: 7px;

  font-weight: 820;
}

.bvt-review-status.ready {
  border-color:
    rgba(79, 191, 148, .17);

  color: #8bc6ad;
}

.bvt-review-status.warning {
  border-color:
    rgba(207, 163, 82, .18);

  color: #d0aa64;
}


/* Transfer path */

.bvt-path {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    34px
    minmax(0, 1fr);

  align-items: center;

  gap: 8px;

  padding: 18px 19px;

  border-bottom:
    1px solid
    var(--tw-line);
}

.bvt-party {
  display: grid;

  min-width: 0;

  gap: 4px;
}

.bvt-party span {
  color: #586a83;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: .10em;

  text-transform: uppercase;
}

.bvt-party strong {
  overflow: hidden;

  color: #dce4ef;

  font-size: 10px;

  font-weight: 720;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.bvt-party small {
  overflow: hidden;

  color: #617087;

  font-size: 7px;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.bvt-arrow {
  display: grid;

  width: 30px;

  height: 30px;

  place-items: center;

  border:
    1px solid
    rgba(74, 132, 223, .17);

  border-radius: 9px;

  color: #729ad4;

  font-size: 11px;
}


/* Amount */

.bvt-review-amount {
  display: grid;

  gap: 5px;

  padding: 18px 19px;

  border-bottom:
    1px solid
    var(--tw-line);
}

.bvt-review-amount span {
  color: #596a83;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .11em;

  text-transform: uppercase;
}

.bvt-review-amount strong {
  color: #f0f3f8;

  font-size: 28px;

  font-weight: 640;

  letter-spacing: -.035em;
}


/* Rows */

.bvt-review-section {
  display: grid;

  gap: 10px;

  padding: 15px 19px;

  border-bottom:
    1px solid
    var(--tw-line);
}

.bvt-section-title {
  color: #53647d;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .15em;

  text-transform: uppercase;
}

.bvt-review-row {
  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 26px;

  gap: 18px;
}

.bvt-review-row span {
  color: #68768c;

  font-size: 8px;
}

.bvt-review-row strong {
  max-width: 225px;

  overflow: hidden;

  color: #dce3ed;

  font-size: 8px;

  font-weight: 720;

  text-align: right;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* Security pipeline */

.bvt-security-flow {
  display: grid;

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

  gap: 8px;
}

.bvt-security-step {
  display: grid;

  min-height: 83px;

  align-content: center;

  gap: 5px;

  padding: 12px;

  border:
    1px solid
    var(--tw-line);

  border-radius: 12px;

  background:
    rgba(12, 19, 31, .73);
}

.bvt-security-step b {
  color: #6389c1;

  font-size: 7px;

  letter-spacing: .10em;
}

.bvt-security-step strong {
  color: #d8e1ec;

  font-size: 9px;

  font-weight: 720;
}

.bvt-security-step span {
  color: #5d6d83;

  font-size: 7px;

  line-height: 1.45;
}


/* ============================================================
   EXISTING DETAILS
   ============================================================ */

.bvt-advanced {
  overflow: hidden;

  border:
    1px solid
    var(--tw-line);

  border-radius: 15px;

  background:
    rgba(10, 16, 26, .80);
}

.bvt-advanced > summary {
  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 54px;

  padding: 0 16px;

  color: #cbd5e2;

  cursor: pointer;

  font-size: 9px;

  font-weight: 740;

  list-style: none;
}

.bvt-advanced > summary::-webkit-details-marker {
  display: none;
}

.bvt-advanced > summary::after {
  content: "+";

  color: #7095ca;

  font-size: 16px;
}

.bvt-advanced[open]
> summary::after {
  content: "−";
}

.bvt-advanced[open]
> summary {
  border-bottom:
    1px solid
    var(--tw-line);
}

#bvtLegacy {
  display: grid;

  gap: 12px;

  padding: 13px;
}

#bvtLegacy .two-col {
  grid-template-columns:
    1fr !important;
}

#bvtLegacy .panel {
  box-shadow: none !important;
}


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

.bvt-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 35px;

  padding: 0 3px;

  color: #4f5e73;

  font-size: 8px;
}

.bvt-footer-left,
.bvt-footer-right {
  display: flex;

  align-items: center;

  gap: 11px;
}

.bvt-footer-dot {
  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--tw-green);
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (max-width: 1450px) {

  .bvt-grid {
    grid-template-columns:
      minmax(500px, 1fr)
      350px;
  }

}

@media (max-width: 1250px) {

  .bvt-grid {
    grid-template-columns:
      minmax(450px, 1fr)
      320px;
  }

  .bvt-security-flow {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}