@import url("/style.css");

:root {
  --bg: #09070f;
  --bg-elevated: #120d1f;
  --bg-soft: #181127;
  --surface: #1d1430;
  --surface-2: #25193c;
  --surface-3: #2f204d;
  --border: rgba(177, 145, 255, 0.18);
  --border-strong: rgba(177, 145, 255, 0.3);
  --text: #f5f3ff;
  --text-soft: #c7bddf;
  --text-muted: #9e92bc;
  --accent: #9b5cff;
  --accent-2: #7c3aed;
  --accent-3: #c084fc;
  --accent-4: #5b21b6;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.32);
}

html,
body {
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(155, 92, 255, 0.2), transparent 32%),
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.18), transparent 26%),
    linear-gradient(180deg, #050308 0%, #0b0712 36%, #09070f 100%);
}

body {
  min-height: 100vh;
}

a {
  color: #b892ff;
}

a:hover {
  color: #d4b7ff;
}

header {
  background: rgba(10, 7, 17, 0.9);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px);
}

.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.logo img {
  filter: none;
}

.note img {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.menu a,
.user-actions a,
.a_lk a,
.user-welcome,
.dashboard-header p,
.profile-info p,
.field-label,
.cards-remaining,
.payment-instructions,
.image-caption,
.form-footer,
.note,
.forwhat p,
.topup-header p,
.card-details p,
.card-warning p,
.topup-notice p {
  color: var(--text-soft);
}

.menu a.active,
.user-welcome span,
.dashboard-link,
.card-details-toggle,
.form-footer a,
.toc a,
.ul_faq .text a {
  color: #d4b7ff !important;
}

.menu a:hover,
.form-footer a:hover,
.toc a:hover,
.ul_faq .text a:hover {
  color: #eddcff !important;
}

.btn_menu div {
  background-color: #f1eafe;
}

.mastercard_page.bg {
  background:
    linear-gradient(135deg, rgba(7, 4, 13, 0.82), rgba(20, 10, 40, 0.74)),
    url(https://bingkaart.com/w-access-images_/cards_visa.webp) center 35px no-repeat,
    linear-gradient(135deg, #0b0814 0%, #1b1230 38%, #341657 100%);
  background-size: auto, 1640px 550px, auto;
  color: var(--text);
  box-shadow: inset 0 -30px 60px rgba(0, 0, 0, 0.32);
}

.block_top h1,
.capability h2,
.esim_faq .h2,
.card-details-left h2,
.dashboard-header h1,
.dashboard-info h2,
.dashboard-profile h3,
.user-cards-section h2,
.topup-header h1,
.card-details-section h2,
.topup-form-section h2,
.edit-profile-wrap h2,
.login-form-wrap h2,
.signup-form-wrap h2,
.forwhat h3,
.article-container h1,
.article-container h2,
.article-container h3 {
  color: var(--text) !important;
  text-shadow: none !important;
}

.card_price span {
  color: #f7c948;
  text-shadow: 0 0 16px rgba(247, 201, 72, 0.24);
}

.btn,
.cta-button,
.generate-card-btn,
.check-topup-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important;
  border: 1px solid rgba(220, 198, 255, 0.12);
  box-shadow: 0 10px 26px rgba(124, 58, 237, 0.26);
}

.btn:hover,
.cta-button:hover,
.generate-card-btn:hover,
.check-topup-btn:hover {
  background: linear-gradient(135deg, #ae76ff, #8b5cf6) !important;
  color: #fff !important;
}

.btn.v2,
.profile-actions .btn.v2,
.form-actions .btn.v2,
.card-topup-btn.btn.v2 {
  background: rgba(155, 92, 255, 0.08) !important;
  border: 1px solid rgba(190, 152, 255, 0.38) !important;
  color: #dec8ff !important;
}

.btn.v2:hover,
.profile-actions .btn.v2:hover,
.form-actions .btn.v2:hover,
.card-topup-btn.btn.v2:hover {
  background: rgba(155, 92, 255, 0.2) !important;
  color: #fff !important;
}

.technology li,
.assignments_items .item,
.whywe,
.capability li,
.mc_canpay,
.mastercard_page_frmPay,
.gift_cards .block_img,
.ul_faq li,
.login-form-wrap,
.signup-form-wrap,
.dashboard-profile,
.dashboard-info,
.user-cards-section,
.card-item,
.edit-profile-wrap,
.card-details-section,
.topup-form-section,
.payment-address-container,
.card-info-list,
.topup-confirmation,
.card-active-message {
  background: linear-gradient(180deg, rgba(31, 22, 49, 0.96), rgba(20, 14, 33, 0.98)) !important;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.technology li,
.assignments_items .item,
.capability li,
.gift_cards .block_img,
.card-item,
.ul_faq li {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.technology li:hover,
.assignments_items .item:hover,
.capability li:hover,
.gift_cards .block_img:hover,
.card-item:hover,
.ul_faq li:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.technology li,
.assignments_items .item,
.capability li,
.dashboard-profile,
.dashboard-info,
.user-cards-section,
.edit-profile-wrap,
.card-details-section,
.topup-form-section,
.article-container,
.toc,
.highlight-box,
.profile-summary,
.account-features,
.payment-address-container,
.topup-confirmation,
.card-active-message,
.simple-topup-details {
  color: var(--text);
}

.technology li,
.assignments_items .item,
.capability li,
.gift_cards .block_img {
  background-color: var(--bg-elevated) !important;
}

.technology .name,
.assignments_items .name,
.capability .name,
.card-features-list .name,
.info-label,
.topup-label,
.field-value,
.dashboard-header h1,
.dashboard-info h2,
.dashboard-profile h3,
.user-cards-section h2,
.profile-info strong {
  color: #f4eefe !important;
}

.card-details-left h2:after,
.esim_faq .h2:after {
  background: linear-gradient(90deg, var(--accent-3), var(--accent)) !important;
}

.card-features-list li,
.password-change-section,
.info-item,
.topup-info-item,
.card-details-hidden,
.logout-link {
  border-color: rgba(177, 145, 255, 0.16) !important;
}

.virtual-card,
.dashboard-card,
.topup-card,
.card-mini {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 25%),
    linear-gradient(135deg, #4c1d95 0%, #6d28d9 45%, #a855f7 100%) !important;
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.38), 0 0 28px rgba(124, 58, 237, 0.18);
}

.card-background {
  opacity: 0.12;
}

.card-chip {
  background: linear-gradient(135deg, #ffdf7e, #ffb300);
}

.card-mini-status.active,
.card-status-badge.active,
.status-active {
  background-color: rgba(52, 211, 153, 0.18) !important;
  color: #8ff0c3 !important;
}

.dashboard-info.paid {
  background: linear-gradient(180deg, rgba(18, 54, 45, 0.92), rgba(10, 32, 28, 0.96)) !important;
  border-left: 4px solid #34d399;
}

.dashboard-info.not-paid {
  background: linear-gradient(180deg, rgba(57, 38, 14, 0.92), rgba(32, 21, 8, 0.96)) !important;
  border-left: 4px solid #f7b84b;
}

.card-usage-info {
  background: linear-gradient(180deg, rgba(22, 17, 35, 0.98), rgba(14, 10, 24, 0.98)) !important;
  border: 1px solid rgba(177, 145, 255, 0.24) !important;
  color: var(--text) !important;
}

.card-usage-info p {
  color: var(--text-soft) !important;
}

.account-features,
.profile-summary,
.kurs2,
.choose2 label,
.payment-address-container,
.card-info-list,
.simple-topup-details {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border);
}

.choose2 label:hover,
.crypto-button:hover {
  background: rgba(155, 92, 255, 0.12) !important;
  border-color: rgba(190, 152, 255, 0.34) !important;
}

.esim_faq {
  background: linear-gradient(180deg, rgba(19, 12, 31, 0.98), rgba(14, 9, 23, 0.98)) !important;
  box-shadow: var(--shadow-lg);
}

.ul_faq .name {
  color: var(--text) !important;
}

.ul_faq .name:after {
  color: #d8b4fe !important;
}

.ul_faq li.active .name {
  background: rgba(155, 92, 255, 0.12) !important;
}

.ul_faq .text p,
.article-container p,
.article-container li,
.article-container ol,
.article-container ul,
.dashboard-profile p,
.dashboard-info p,
.card-details p,
.topup-confirmation p,
.card-active-message p,
.payment-instructions p,
.form-group label,
.topup-notice p,
.profile-summary,
.account-features p {
  color: var(--text-soft) !important;
}

.article-container {
  background: transparent;
  color: var(--text);
}

.article-container p,
.article-container li {
  font-size: 1.08em;
}

.feature-image {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
}

.image-caption {
  color: var(--text-muted) !important;
}

.toc {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}

.toc ul {
  list-style: none;
}

.highlight-box {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.14), rgba(124, 58, 237, 0.06)) !important;
  border-left: 4px solid #a855f7 !important;
  border-radius: 0 14px 14px 0 !important;
}

blockquote {
  border-left: 4px solid rgba(192, 132, 252, 0.42) !important;
  color: var(--text-soft) !important;
}

.pros {
  background: rgba(16, 72, 56, 0.44) !important;
  border-left-color: #34d399 !important;
}

.cons {
  background: rgba(95, 24, 44, 0.42) !important;
  border-left-color: #fb7185 !important;
}

.login-container,
.signup-container,
.edit-profile-container,
.dashboard-container,
.topup-container {
  background: transparent !important;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.input {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text) !important;
  border: 1px solid rgba(177, 145, 255, 0.22) !important;
}

.form-group input[type="text"]::placeholder,
.form-group input[type="password"]::placeholder,
.form-group input[type="email"]::placeholder,
.input::placeholder {
  color: #9f92c0;
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="email"]:focus,
.input:focus {
  border-color: #b892ff !important;
  box-shadow: 0 0 0 3px rgba(155, 92, 255, 0.18) !important;
}

.alert-danger {
  background: rgba(128, 31, 52, 0.32) !important;
  border: 1px solid rgba(251, 113, 133, 0.34) !important;
  color: #ffd5dd !important;
}

.alert-success {
  background: rgba(17, 85, 61, 0.32) !important;
  border: 1px solid rgba(52, 211, 153, 0.34) !important;
  color: #cffce8 !important;
}

.user-welcome {
  background: rgba(155, 92, 255, 0.12) !important;
  border: 1px solid rgba(190, 152, 255, 0.18);
}

.user-welcome:hover {
  background: rgba(155, 92, 255, 0.22) !important;
}

.user-actions {
  background: rgba(18, 13, 31, 0.98) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.user-actions a {
  color: var(--text-soft) !important;
}

.user-actions a:hover {
  background: rgba(155, 92, 255, 0.08) !important;
}

.profile-link {
  color: #8ff0c3 !important;
}

.logout-link {
  color: #ff9aae !important;
}

.no-cards-message {
  color: var(--text-soft) !important;
  border: 1px dashed rgba(177, 145, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.02);
}

.card-details-hidden {
  border-top: 1px dashed rgba(177, 145, 255, 0.18) !important;
}

.captcha-display {
  border-color: rgba(184, 146, 255, 0.36) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

.captcha-refresh,
.copy-btn {
  color: #d4b7ff !important;
}

.copy-btn:hover {
  color: #f4eefe !important;
}

.topup-header h1,
.topup-header p {
  color: var(--text) !important;
}

.topup-notice {
  background: rgba(251, 191, 36, 0.12) !important;
  border-left: 4px solid #fbbf24 !important;
}

.topup-notice p,
.topup-notice i,
.topup-value,
.info-value,
.address-text {
  color: var(--text) !important;
}

.crypto-options h3,
.payment-address-container h3 {
  color: var(--text) !important;
}

.crypto-button {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(177, 145, 255, 0.2) !important;
  color: var(--text) !important;
}

.crypto-button.selected {
  background: rgba(155, 92, 255, 0.18) !important;
  border-color: rgba(200, 168, 255, 0.48) !important;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.2);
}

.payment-loading-container,
.topup-loading {
  color: var(--text-soft) !important;
}

.loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.1) !important;
  border-top: 4px solid #b892ff !important;
}

.address-box {
  background: rgba(6, 4, 10, 0.5) !important;
  border: 1px solid rgba(177, 145, 255, 0.22) !important;
}

.address-confirmation {
  color: #9cf2cc !important;
}

.check-topup-btn {
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.28) !important;
}

.topup-confirmation {
  background: rgba(52, 211, 153, 0.12) !important;
  border: 1px solid rgba(52, 211, 153, 0.22) !important;
}

.topup-confirmation h3,
.card-active-message h2 {
  color: #9cf2cc !important;
}

.success-icon,
.confirmation-icon {
  background-color: #34d399 !important;
}

.delete-card-btn {
  background: linear-gradient(135deg, #e11d48, #be123c) !important;
}

.delete-card-btn:hover {
  background: linear-gradient(135deg, #fb7185, #e11d48) !important;
}

.withdraw-btn {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
}

.withdraw-btn:hover {
  background: linear-gradient(135deg, #9b5cff, #6d28d9) !important;
}

footer {
  background:
    linear-gradient(180deg, rgba(6, 4, 10, 0.98), rgba(9, 7, 15, 1)) !important;
  border-top: 1px solid rgba(177, 145, 255, 0.14);
}

footer a {
  color: #cbb5ff !important;
}

footer a:hover {
  color: #f3e8ff !important;
}

footer .copyright {
  color: var(--text-muted) !important;
  border-top-color: rgba(177, 145, 255, 0.14) !important;
}

@media (max-width: 768px) {
  .menu {
    background: rgba(9, 7, 15, 0.98) !important;
  }

  .menu a {
    color: var(--text) !important;
  }
}