/* Ionic Variables and Theming. For more info, please see:
http://ionicframework.com/docs/theming/ */

@font-face {
 font-family: "OpenSans-Regular";
 src: url("/assets/fonts/OpenSans-Regular.ttf");
}
@font-face {
 font-family: "OpenSans-Bold";
 src: url("/assets/fonts/OpenSans-Bold.ttf");
}

.sell-card {
  border-radius: 16px;
}

.sell-header h3 {
  margin: 0;
  font-weight: 600;
}

.sell-header {
  margin-bottom: 16px;
}

.sell-input {
  --border-radius: 12px;
  margin-top: 8px;
}

.token-card,
.summary-card {
  border-radius: 14px;
  background: var(--ion-color-step-50);
}

.token-balance {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin-bottom: 8px;
}

.deposit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.max-btn-col {
  display: flex;
  align-items: flex-end;
}

.summary-title {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ion-color-primary);
  margin-bottom: 12px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}

.summary-row.highlight {
  font-weight: 600;
  font-size: 16px;
}



.complete-out {
  color: #007bff;
}
.balance-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.balance-toggle-btn {
  --padding-start: 6px;
  --padding-end: 6px;
  height: 28px;
}

.balance-toggle-btn ion-icon {
  font-size: 20px;
  color: #aaa;
}


.ref-summary-card {
  border-radius: 16px;
  max-width: 420px;
  margin: 16px auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.ref-summary-text {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ion-text-color);
  text-align: center;
}

.ref-summary-text strong {
  color: var(--ion-color-primary);
  font-weight: 600;
}

.ref-view-btn {
  display: block;
  margin: 8px auto 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--ion-color-primary);
}

/* 🌙 Dark mode polish */
@media (prefers-color-scheme: dark) {
  .ref-summary-card {
    box-shadow: 0 6px 18px rgba(38, 113, 212, 0.5);
  }
}

/*DASHBOARD GRID*/

.dashboard-grid {
  margin-top: 1rem;
}

/* Card container */
.dash-card {
  text-align: center;
  padding:  3px !important;
  border-radius: 16px;
  transition: 0.25s ease;
  background: #b7d1ff !important;
  box-shadow: 0 4px 12px rgba(74, 122, 219, 0.5);
  height: 100px;
}

html.ion-palette-dark .dash-card {
  background: #001f3f !important;
}

/* Hover effect (web + PWA) */
.dash-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(61, 112, 173, 0.8);
}

/* Icon wrapper */
.dash-icon-wrapper {
  width: 50px !important;
  height: 50px !important;
  margin: auto;
  margin-bottom: 5px !important;
  background: transparent !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Icon image */
.dash-icon {
  width: 45px !important;
  height: 45px !important;
  object-fit: contain;
}

/* Label text */
.dash-label {
  font-size: 13px !important;
  font-weight: 600;
  display: block;
  margin-top: 6px;
  color: var(--ion-color-dark);
}


:root {
  --kyc-bg: #ffffff;
  --kyc-card-bg: #ffffff;
  --kyc-border: #dddddd;
  --kyc-border-soft: #cccccc;
  --kyc-text: #1a1a1a;
  --kyc-text-muted: #666666;
  --kyc-input-bg: #ffffff;
  --kyc-upload-bg: #fafafa;
  --kyc-primary: #2196f3;
}

/* 🌙 Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --kyc-bg: #0f1115;
    --kyc-card-bg: #161a22;
    --kyc-border-soft: #2a2f3a;
    --kyc-text: #e8eaf0;
    --kyc-text-muted: #9aa0b3;
    --kyc-input-bg: #1c2030;
    --kyc-upload-bg: #1a1e2b;
    --kyc-primary: #4dabf7;
  }
}


.kyc-card {
  max-width: 420px;
  margin: auto;
  border-radius: 14px;
  background: var(--kyc-card-bg);
  color: var(--kyc-text);
}

.kyc-title {
  text-align: center;
  margin: 16px 0;
  font-weight: 600;
  color: var(--kyc-text);
}

.kyc-input,
.input-with-icon input,
select {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--kyc-border);
  margin-bottom: 12px;
  font-size: 15px;
  background: var(--kyc-input-bg);
  color: var(--kyc-text);
  outline: none;
}

.kyc-input::placeholder,
.input-with-icon input::placeholder {
  color: var(--kyc-text-muted);
}

.input-with-icon {
  position: relative;
}

.send-btn {
  position: absolute;
  right: 6px;
  top: 6px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: none;
  background: var(--kyc-primary);
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.upload-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.upload-box {
  flex: 1;
  height: 150px;
  border: 1px dashed var(--kyc-border-soft);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: var(--kyc-upload-bg);
  color: var(--kyc-text-muted);
  text-align: center;
}

.upload-box:hover {
  border-color: var(--kyc-primary);
}

.upload-box img {
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.terms-text {
  font-size: 13px;
  text-align: center;
  margin: 16px 0;
  color: var(--kyc-text-muted);
}

.terms-text a {
  color: var(--kyc-primary);
  text-decoration: none;
}

.submit-btn {
  margin-top: 10px;
  border-radius: 12px;
  height: 52px;
  font-weight: 600;
}


.tx-row {
 --inner-padding-end: 0;
 --inner-padding-start: 0;
 --padding-start: 0;
 --min-height: 20px;
}

.tx-label {
 font-weight: 500;
 font-size: 15px;
}

.tx-value {
 font-weight: 600;
 font-size: 15px;
}

.transaction-header {
 background-color: #051b42; /* dark blue */
 text-align: center;
 padding-bottom: 10px;
}

.header-toolbar {
 --background: transparent;
 color: #fff;
}

.header-content {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-top: 0px;
}

.success-icon {
 color: #00c851;
 font-size: 60px;
 margin-top: 10px;
 margin-bottom: 10px;
}

.header-title {
 color: #fff;
 font-size: 18px;
 font-weight: 600;
 margin-bottom: 10px;
}

.header-buttons {
 display: flex;
 justify-content: center;
 gap: 15px;
}

.receipt-btn {
 --background: #f6f6f6;
 --color: #222;
 --border-radius: 12px;
 --box-shadow: none;
 font-size: 14px;
 text-transform: none;
 padding: 0 16px;
}

.share-btn {
 --background: #fff8e1; /* light yellow like in your screenshot */
}

.password-field {
 position: relative;
}

.password-field .toggle-icon {
 position: absolute;
 right: -4px;
 top: 20%;
 transform: translateY(-50%);
 font-size: 1.3rem;
 color: var(--ion-color-medium);
 cursor: pointer;
}

.toggle-icon {
 cursor: pointer !important;
 transform: translateY(-50%);
 font-size: 1.3rem;
}

.oranger-border {
 border: 1px solid darkorange;
}
.blue-border {
 border: 1px solid rgb(5, 118, 205);
}

.gray-border {
 border: 1px solid gray;
}

.overview-card {
 text-align: center;
 border-radius: 12px;
 box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 height: 100%;
   background: rgba(183, 209, 255, 0.3);

}
html.ion-palette-dark .overview-card   {
    background: rgba(183, 209, 255, 0.2);

}
.bottom-margin {
 margin-bottom: 20px !important;
}

.overview-card:hover {
 transform: scale(1.05);
 box-shadow: 0 6px 18px rgba(0, 123, 255, 0.35);
}

.overview-icon {
 font-size: 28px;
 color: #007bff;
 margin-bottom: 8px;
 text-align: center;
}

.overview-title {
 font-size: 14px;
 font-weight: 600;
}

.overview-value {
 font-size: 16px;
 font-weight: bold;
}

.enable-crypto-card {
 border-radius: 16px;
 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
 background: #1168a6;
}

.enable-crypto-card ion-card-title {
 font-weight: 600;
 font-size: 18px;
}

.enable-crypto-card p {
 margin: 0;
}

.amount-btn {
 width: 100%;
 padding: 10px 0;
 background-color: #b3b3b3; /* Similar to the button color in the image */
 color: #000;
 font-size: 16px;
 border: none;
 border-radius: 8px;
 font-weight: bold;
}

.amount-btn:hover {
 background-color: #808080; /* Darker shade on hover */
}

.full-screen-modal {
 --height: 100%;
 --width: 100%;
 --max-height: 100%;
 --max-width: 100%;
 height: 100% !important;
 width: 100% !important;
 border-radius: 0 !important;
}

ion-content {
 --ion-font-family: "OpenSans-Regular";
}

ion-radio::part(container) {
 width: 30px;
 height: 30px;

 border-radius: 8px;
 border: 2px solid #ddd;
}

ion-radio::part(mark) {
 background: none;
 transition: none;
 transform: none;
 border-radius: 0;
}

ion-radio.radio-checked::part(container) {
 background: #6815ec;
 border-color: transparent;
}

ion-radio.radio-checked::part(mark) {
 width: 6px;
 height: 10px;

 border-width: 0px 2px 2px 0px;
 border-style: solid;
 border-color: #fff;

 transform: rotate(45deg);
}

h1,
h2,
strong,
b {
 font-family: "OpenSans-Bold";
}
.ion-content-bg {
 --background: url("/assets/onboard/onboard-bg.png");
 --background-repeat: no-repeat;
 --background-size: cover;
 --background-position: top right;
 --min-height: 100%;
}
.nobg {
 --background: transparent !important;
}

ion-loading.custom-loading {
 --background: #e3edff;
 --spinner-color: #1c6dff;

 color: #1c6dff;
}

ion-alert.pin-alert {
 --backdrop-opacity: 0.7;
}

.pin-alert .alert-button-group {
 padding: 8px;
}

button.alert-button.alert-button-confirm {
 background-color: var(--ion-color-success);
 color: var(--ion-color-success-contrast);
}

.md button.alert-button.alert-button-confirm {
 border-radius: 4px;
}

.ios .pin-alert button.alert-button {
 border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
}

.ios button.alert-button.alert-button-cancel {
 border-right: 0;
 border-bottom-left-radius: 13px;
 border-top-left-radius: 13px;
}

.ios button.alert-button.alert-button-confirm {
 border-bottom-right-radius: 13px;
 border-top-right-radius: 13px;
}

html.ion-palette-dark .ion-content-bg {
 --background: #111;
 --background-repeat: no-repeat;
 --background-size: cover;
 --background-position: top right;
 --min-height: 100%;
}

html.ion-palette-dark body {
 --ion-item-color: #fff;
 --ion-text-color: #fff;
 --ion-color-primary: #1584d4;
 --ion-color-primary-rgb: 175, 204, 255;
 --ion-color-primary-contrast: #fff;
 --ion-color-primary-contrast-rgb: 0, 0, 0;
 --ion-color-primary-shade: #9ab4e0;
 --ion-color-primary-tint: #b7d1ff;

 --ion-color-secondary: #50c8ff;
 --ion-color-secondary-rgb: 80, 200, 255;
 --ion-color-secondary-contrast: #ffffff;
 --ion-color-secondary-contrast-rgb: 255, 255, 255;
 --ion-color-secondary-shade: #46b0e0;
 --ion-color-secondary-tint: #62ceff;

 --ion-color-tertiary: #6a64ff;
 --ion-color-tertiary-rgb: 106, 100, 255;
 --ion-color-tertiary-contrast: #ffffff;
 --ion-color-tertiary-contrast-rgb: 255, 255, 255;
 --ion-color-tertiary-shade: #5d58e0;
 --ion-color-tertiary-tint: #7974ff;

 --ion-color-success: #08843a;
 --ion-color-success-rgb: 47, 223, 117;
 --ion-color-success-contrast: #ffffff;
 --ion-color-success-contrast-rgb: 0, 0, 0;
 --ion-color-success-shade: #29c467;
 --ion-color-success-tint: #44e283;

 --ion-color-warning: #ffd534;
 --ion-color-warning-rgb: 255, 213, 52;
 --ion-color-warning-contrast: #000000;
 --ion-color-warning-contrast-rgb: 0, 0, 0;
 --ion-color-warning-shade: #e0bb2e;
 --ion-color-warning-tint: #ffd948;

 --ion-color-danger: #ed233e;
 --ion-color-danger-rgb: 255, 73, 97;
 --ion-color-danger-contrast: #ffffff;
 --ion-color-danger-contrast-rgb: 255, 255, 255;
 --ion-color-danger-shade: #e04055;
 --ion-color-danger-tint: #ff5b71;

 --ion-color-dark: #f4f5f8;
 --ion-color-dark-rgb: 244, 245, 248;
 --ion-color-dark-contrast: #000000;
 --ion-color-dark-contrast-rgb: 0, 0, 0;
 --ion-color-dark-shade: #d7d8da;
 --ion-color-dark-tint: #f5f6f9;

 --ion-color-medium: #989aa2;
 --ion-color-medium-rgb: 152, 154, 162;
 --ion-color-medium-contrast: #000000;
 --ion-color-medium-contrast-rgb: 0, 0, 0;
 --ion-color-medium-shade: #86888f;
 --ion-color-medium-tint: #a2a4ab;

 --ion-color-light: #222428;
 --ion-color-light-rgb: 34, 36, 40;
 --ion-color-light-contrast: #ffffff;
 --ion-color-light-contrast-rgb: 255, 255, 255;
 --ion-color-light-shade: #1e2023;
 --ion-color-light-tint: #383a3e;
}

@media (prefers-color-schemeaa: dark) {
 /*
   * Dark Colors
   * -------------------------------------------
   */

 .ion-content-bg {
  --background: #111;
  --background-repeat: no-repeat;
  --background-size: cover;
  --background-position: top right;
  --min-height: 100%;
 }

 body {
  --ion-item-color: #fff;
  --ion-text-color: #fff;
  --ion-color-primary: #1584d4;
  --ion-color-primary-rgb: 175, 204, 255;
  --ion-color-primary-contrast: #fff;
  --ion-color-primary-contrast-rgb: 0, 0, 0;
  --ion-color-primary-shade: #9ab4e0;
  --ion-color-primary-tint: #b7d1ff;

  --ion-color-secondary: #50c8ff;
  --ion-color-secondary-rgb: 80, 200, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #46b0e0;
  --ion-color-secondary-tint: #62ceff;

  --ion-color-tertiary: #6a64ff;
  --ion-color-tertiary-rgb: 106, 100, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #5d58e0;
  --ion-color-tertiary-tint: #7974ff;

  --ion-color-success: #08843a;
  --ion-color-success-rgb: 47, 223, 117;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 0, 0, 0;
  --ion-color-success-shade: #29c467;
  --ion-color-success-tint: #44e283;

  --ion-color-warning: #ffd534;
  --ion-color-warning-rgb: 255, 213, 52;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0bb2e;
  --ion-color-warning-tint: #ffd948;

  --ion-color-danger: #ed233e;
  --ion-color-danger-rgb: 255, 73, 97;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #e04055;
  --ion-color-danger-tint: #ff5b71;

  --ion-color-dark: #f4f5f8;
  --ion-color-dark-rgb: 244, 245, 248;
  --ion-color-dark-contrast: #000000;
  --ion-color-dark-contrast-rgb: 0, 0, 0;
  --ion-color-dark-shade: #d7d8da;
  --ion-color-dark-tint: #f5f6f9;

  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: #000000;
  --ion-color-medium-contrast-rgb: 0, 0, 0;
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;

  --ion-color-light: #222428;
  --ion-color-light-rgb: 34, 36, 40;
  --ion-color-light-contrast: #ffffff;
  --ion-color-light-contrast-rgb: 255, 255, 255;
  --ion-color-light-shade: #1e2023;
  --ion-color-light-tint: #383a3e;
 }

 /*
   * iOS Dark Theme
   * -------------------------------------------
   */

 .ios body {
  --ion-background-color: #000000;
  --ion-background-color-rgb: 0, 0, 0;

  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255, 255, 255;

  --ion-color-step-50: #0d0d0d;
  --ion-color-step-100: #1a1a1a;
  --ion-color-step-150: #262626;
  --ion-color-step-200: #333333;
  --ion-color-step-250: #404040;
  --ion-color-step-300: #4d4d4d;
  --ion-color-step-350: #595959;
  --ion-color-step-400: #666666;
  --ion-color-step-450: #737373;
  --ion-color-step-500: #808080;
  --ion-color-step-550: #8c8c8c;
  --ion-color-step-600: #999999;
  --ion-color-step-650: #a6a6a6;
  --ion-color-step-700: #b3b3b3;
  --ion-color-step-750: #bfbfbf;
  --ion-color-step-800: #cccccc;
  --ion-color-step-850: #d9d9d9;
  --ion-color-step-900: #e6e6e6;
  --ion-color-step-950: #f2f2f2;

  --ion-item-background: #000000;

  --ion-card-background: #1c1c1d;
 }

 .ios ion-modal {
  --ion-background-color: var(--ion-color-step-100);
  --ion-toolbar-background: var(--ion-color-step-150);
  --ion-toolbar-border-color: var(--ion-color-step-250);
 }

 /*
   * Material Design Dark Theme
   * -------------------------------------------
   */

 .md body {
  --ion-background-color: #121212;
  --ion-background-color-rgb: 18, 18, 18;

  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255, 255, 255;

  --ion-border-color: #222222;

  --ion-color-step-50: #1e1e1e;
  --ion-color-step-100: #2a2a2a;
  --ion-color-step-150: #363636;
  --ion-color-step-200: #414141;
  --ion-color-step-250: #4d4d4d;
  --ion-color-step-300: #595959;
  --ion-color-step-350: #656565;
  --ion-color-step-400: #717171;
  --ion-color-step-450: #7d7d7d;
  --ion-color-step-500: #898989;
  --ion-color-step-550: #949494;
  --ion-color-step-600: #a0a0a0;
  --ion-color-step-650: #acacac;
  --ion-color-step-700: #b8b8b8;
  --ion-color-step-750: #c4c4c4;
  --ion-color-step-800: #d0d0d0;
  --ion-color-step-850: #dbdbdb;
  --ion-color-step-900: #e7e7e7;
  --ion-color-step-950: #f3f3f3;

  --ion-item-background: #1e1e1e;

  --ion-toolbar-background: #1f1f1f;

  --ion-tab-bar-background: #1f1f1f;

  --ion-card-background: #1e1e1e;
 }
}

html {
 /* For more information on dynamic font scaling, visit the documentation: 
  https://ionicframework.com/docs/layout/dynamic-font-scaling */
 /*--ion-dynamic-font: var(--ion-default-dynamic-font);*/
 --ion-font-family: "OpenSans-Regular";
}