/*
 * HOSTCAY checkout theme for Bitcart (crypto.offsh.nl)
 * Dark, low-noise, red accents. Tuned to bitcart-admin's actual checkout DOM
 * (Vuetify 2 v-dialog -> v-card.elevation-24 -> TabbedCheckout).
 *
 * Update flow:
 *   1) Edit this file.
 *   2) Re-upload via POST /api/files (multipart), grab the new file id.
 *   3) PATCH /api/stores/<id> theme_settings.{store,checkout}_theme_url
 *      (the URL is /api/files/handle/<id>).
 */

:root {
  --hostcay-bg: #0d0d10;
  --hostcay-bg-elevated: #18181d;
  --hostcay-bg-card: #1c1c22;
  --hostcay-bg-hover: #24242c;
  --hostcay-border: #2a2a32;
  --hostcay-divider: #232329;
  --hostcay-text: #f4f4f6;
  --hostcay-text-muted: #a0a0ac;
  --hostcay-text-dim: #6e6e78;
  --hostcay-red: #d93644;
  --hostcay-red-hover: #b62a37;
  --hostcay-red-active: #971f2c;
  --hostcay-accent: #ff4d5e;
}

/* -----------------------------------------------------------------
   1. Hide the empty store-logo block (we have no logo configured;
      the v-img element still reserves vertical space)
   ----------------------------------------------------------------- */
.v-dialog .v-card .v-image,
.v-dialog .v-card .v-img.mb-2 {
  display: none !important;
}

/* -----------------------------------------------------------------
   2. Outer page background (when checkout is opened on its own URL,
      not in an iframe modal)
   ----------------------------------------------------------------- */
html, body, #__nuxt, #__layout,
.v-application,
.v-application--wrap,
.v-main, .v-main__wrap {
  background: var(--hostcay-bg) !important;
}

.v-application.theme--light,
.v-application.theme--dark {
  background: var(--hostcay-bg) !important;
  color: var(--hostcay-text) !important;
}

/* The dialog overlay backdrop */
.v-overlay__scrim {
  background: var(--hostcay-bg) !important;
  opacity: 0.96 !important;
}

/* -----------------------------------------------------------------
   3. The dialog/card that holds the whole checkout
   ----------------------------------------------------------------- */
.v-dialog .v-card.elevation-24,
.v-dialog .v-card,
.v-dialog > .v-card {
  background: var(--hostcay-bg-card) !important;
  color: var(--hostcay-text) !important;
  border: 1px solid var(--hostcay-border) !important;
  border-radius: 12px !important;
  box-shadow:
    0 12px 36px rgba(0,0,0,0.55),
    0 0 0 1px rgba(217, 54, 68, 0.06) !important;
}

.v-card__title,
.v-card__subtitle,
.v-card__text,
.v-card-text,
.v-card-title,
.v-card-subtitle {
  color: var(--hostcay-text) !important;
}

.v-card__subtitle,
.text--secondary,
.text--disabled,
.v-list-item__subtitle {
  color: var(--hostcay-text-muted) !important;
}

/* -----------------------------------------------------------------
   4. List items (the rows of the checkout: "Pay with", store row,
      Order amount / Already paid / Due, etc.)
   ----------------------------------------------------------------- */
.v-dialog .v-list,
.v-dialog .v-list--dense,
.v-dialog .v-list-item,
.v-dialog .v-list-item__content,
.v-dialog .v-list-item__action {
  background: transparent !important;
  color: var(--hostcay-text) !important;
}

.v-dialog .v-list-item__title {
  color: var(--hostcay-text) !important;
}

.v-dialog .v-list-item:hover {
  background: var(--hostcay-bg-hover) !important;
}

/* -----------------------------------------------------------------
   5. The "Pay with <currency> v" dropdown trigger title — make the
      currency name pop in red so it reads as the primary action
   ----------------------------------------------------------------- */
.v-dialog .v-list-item__action .v-list-item__title.text-subtitle-1 {
  color: var(--hostcay-accent) !important;
  font-weight: 600 !important;
}

/* The dropdown menu of currencies */
.v-menu__content .v-list,
.v-menu__content .v-list-item {
  background: var(--hostcay-bg-elevated) !important;
  color: var(--hostcay-text) !important;
}

.v-menu__content .v-list-item:hover,
.v-menu__content .v-list-item--active {
  background: rgba(217, 54, 68, 0.12) !important;
  color: var(--hostcay-accent) !important;
}

/* -----------------------------------------------------------------
   6. Dividers between rows
   ----------------------------------------------------------------- */
.v-divider,
.v-dialog hr.v-divider {
  border-color: var(--hostcay-divider) !important;
  background-color: var(--hostcay-divider) !important;
}

/* -----------------------------------------------------------------
   7. Buttons (all red, no shouty uppercase)
   ----------------------------------------------------------------- */
.v-btn:not(.v-btn--icon):not(.v-btn--text):not(.v-btn--outlined),
.v-btn.v-btn--contained,
.v-btn.primary,
.v-btn.theme--light.primary,
.v-btn.theme--dark.primary {
  background-color: var(--hostcay-red) !important;
  color: #fff !important;
  border-color: var(--hostcay-red) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(217, 54, 68, 0.32) !important;
}

.v-btn:not(.v-btn--icon):not(.v-btn--text):not(.v-btn--outlined):hover,
.v-btn.v-btn--contained:hover,
.v-btn.primary:hover {
  background-color: var(--hostcay-red-hover) !important;
  border-color: var(--hostcay-red-hover) !important;
  box-shadow: 0 6px 18px rgba(217, 54, 68, 0.45) !important;
}

.v-btn:not(.v-btn--icon):active,
.v-btn.v-btn--contained:active {
  background-color: var(--hostcay-red-active) !important;
  border-color: var(--hostcay-red-active) !important;
}

/* Outlined / text variants */
.v-btn--outlined {
  background: transparent !important;
  color: var(--hostcay-accent) !important;
  border: 1px solid var(--hostcay-red) !important;
  border-radius: 8px !important;
  text-transform: none !important;
}

.v-btn--outlined:hover {
  background: rgba(217, 54, 68, 0.10) !important;
  color: #fff !important;
}

.v-btn--text {
  background: transparent !important;
  color: var(--hostcay-accent) !important;
  text-transform: none !important;
}

.v-btn--text:hover {
  color: #fff !important;
  background: rgba(217, 54, 68, 0.08) !important;
}

/* Icon-only buttons (the up/down toggle) keep their shape but adopt
   accent color */
.v-btn--icon {
  color: var(--hostcay-text-muted) !important;
}
.v-btn--icon:hover {
  color: var(--hostcay-accent) !important;
  background: transparent !important;
}

/* Close button in top-right */
.v-btn--fab,
button[aria-label="close"] {
  background-color: var(--hostcay-bg-hover) !important;
  color: var(--hostcay-text) !important;
}

/* Disabled */
.v-btn--disabled,
.v-btn.v-btn--disabled {
  background-color: #2e2e36 !important;
  color: #6a6a72 !important;
  box-shadow: none !important;
  border-color: #2e2e36 !important;
}

/* -----------------------------------------------------------------
   8. Progress bars (the timer at the top: "Awaiting payment...")
   ----------------------------------------------------------------- */
.v-progress-linear {
  background-color: var(--hostcay-bg-hover) !important;
  border-radius: 4px !important;
}

.v-progress-linear__background {
  background-color: var(--hostcay-bg-hover) !important;
}

.v-progress-linear__determinate {
  background-color: var(--hostcay-red) !important;
}

.v-progress-linear__indeterminate {
  background-color: var(--hostcay-red) !important;
}

.v-progress-circular__overlay {
  stroke: var(--hostcay-red) !important;
}

/* -----------------------------------------------------------------
   9. Input fields (only shown when ETH/TRX/BNB/MATIC selected, asks
      for the user's source wallet address)
   ----------------------------------------------------------------- */
.v-input input,
.v-text-field input,
.v-text-field textarea,
.v-select__selection,
.v-input__slot input {
  color: var(--hostcay-text) !important;
}

.v-text-field--outlined fieldset {
  border-color: var(--hostcay-border) !important;
}

.v-text-field--outlined.v-input--is-focused fieldset {
  border-color: var(--hostcay-red) !important;
  box-shadow: 0 0 0 1px rgba(217, 54, 68, 0.3);
}

.v-input__slot {
  background: var(--hostcay-bg-elevated) !important;
}

.v-input__slot::before,
.v-input__slot::after {
  border-color: var(--hostcay-border) !important;
}

.v-input--is-focused .v-input__slot::after {
  border-color: var(--hostcay-red) !important;
}

.v-label,
.v-input label,
.v-text-field label {
  color: var(--hostcay-text-muted) !important;
}

.v-input--is-focused .v-label {
  color: var(--hostcay-accent) !important;
}

/* -----------------------------------------------------------------
   10. Links
   ----------------------------------------------------------------- */
.v-dialog a,
.v-dialog a:visited {
  color: var(--hostcay-accent) !important;
  text-decoration: none !important;
}

.v-dialog a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* The tooltip "Why are we asking for your wallet address?" line uses
   blue--text in the source; override it */
.blue--text,
.text-blue,
.v-dialog .blue--text {
  color: var(--hostcay-accent) !important;
}

/* -----------------------------------------------------------------
   11. Code / monospaced (crypto addresses, copy-to-clipboard targets)
   ----------------------------------------------------------------- */
code, pre, kbd, samp,
.v-dialog .copy-text,
.v-dialog [class*="address"] {
  background: #000 !important;
  color: var(--hostcay-accent) !important;
  border: 1px solid var(--hostcay-border) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

/* -----------------------------------------------------------------
   12. Snackbars / alerts
   ----------------------------------------------------------------- */
.v-snack__wrapper,
.v-snack__content,
.v-alert {
  background: var(--hostcay-bg-elevated) !important;
  color: var(--hostcay-text) !important;
  border: 1px solid var(--hostcay-border) !important;
  border-radius: 8px !important;
}

/* Success snackbars get a red border (we don't want green here) */
.v-snack--top .success,
.v-snack__wrapper.success,
.v-alert--success,
.v-alert.success {
  background: var(--hostcay-bg-elevated) !important;
  color: var(--hostcay-accent) !important;
  border-color: var(--hostcay-red) !important;
}

/* Info snackbars too */
.v-snack__wrapper.info,
.v-alert--info,
.v-alert.info {
  background: var(--hostcay-bg-elevated) !important;
  color: var(--hostcay-text) !important;
  border-color: var(--hostcay-border) !important;
}

/* -----------------------------------------------------------------
   13. Tabs (payment tabs inside TabbedCheckout)
   ----------------------------------------------------------------- */
.v-tabs-bar,
.v-tabs-bar__content,
.v-tabs__items,
.v-tabs-items {
  background: transparent !important;
}

.v-tab {
  color: var(--hostcay-text-muted) !important;
  text-transform: none !important;
  font-weight: 500 !important;
}

.v-tab--active,
.v-tab.v-tab--active {
  color: var(--hostcay-accent) !important;
}

.v-tabs-slider,
.v-tabs-slider-wrapper {
  background-color: var(--hostcay-red) !important;
  color: var(--hostcay-red) !important;
}

/* -----------------------------------------------------------------
   14. Chips
   ----------------------------------------------------------------- */
.v-chip {
  background: var(--hostcay-bg-elevated) !important;
  color: var(--hostcay-text) !important;
  border: 1px solid var(--hostcay-border) !important;
}

.v-chip.primary,
.v-chip.v-chip--active {
  background: var(--hostcay-red) !important;
  color: #fff !important;
  border-color: var(--hostcay-red) !important;
}

/* -----------------------------------------------------------------
   15. The "powered by Bitcart" footer (de-emphasize)
   ----------------------------------------------------------------- */
.poweredby,
[class*="powered-by"],
.v-footer {
  color: var(--hostcay-text-dim) !important;
  background: transparent !important;
}

.poweredby a,
[class*="powered-by"] a,
.v-footer a {
  color: var(--hostcay-text-dim) !important;
}

/* -----------------------------------------------------------------
   16. Scrollbars (where applicable, webkit)
   ----------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--hostcay-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--hostcay-bg-hover);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--hostcay-red);
}