/* RAJAGACOR — modern casino, elegant cyberpunk.
   Visual layer only. Layout, links, and behavior stay intact. */

:root {
  --cp-void: #070512;
  --cp-ink: #100b1e;
  --cp-panel: rgba(16, 12, 32, 0.82);
  --cp-panel-2: rgba(22, 16, 44, 0.92);
  --cp-text: #f6f3ff;
  --cp-muted: #c4bddf;
  --cp-dim: #9b93b8;
  --cp-cyan: #3df0ff;
  --cp-cyan-deep: #0891b2;
  --cp-magenta: #ff2f9a;
  --cp-magenta-deep: #be185d;
  --cp-violet: #8b5cf6;
  --cp-gold: #f5c56b;
  --cp-line: rgba(61, 240, 255, 0.38);
  --cp-line-hot: rgba(255, 47, 154, 0.45);
}

html,
body#teepublic {
  background-color: var(--cp-void) !important;
  background-image:
    linear-gradient(rgba(61, 240, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 240, 255, 0.045) 1px, transparent 1px),
    radial-gradient(ellipse 70% 42% at 8% -8%, rgba(255, 47, 154, 0.22), transparent 52%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(61, 240, 255, 0.16), transparent 48%),
    radial-gradient(ellipse 50% 36% at 50% 110%, rgba(139, 92, 246, 0.2), transparent 55%),
    linear-gradient(180deg, #090616 0%, #070512 42%, #05030e 100%) !important;
  background-size: 56px 56px, 56px 56px, auto, auto, auto, auto !important;
  background-attachment: fixed !important;
  color: var(--cp-text);
}

body#teepublic {
  padding-bottom: 118px !important;
}

/* ── Header & search ── */
#teepublic .vc-header {
  background: rgba(8, 6, 18, 0.9) !important;
  border-bottom: 1px solid var(--cp-line) !important;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 47, 154, 0.35) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#teepublic .m-header__search-field,
#teepublic .m-header__search-field-container,
#teepublic .m-header__search {
  background: transparent !important;
}

#teepublic .m-header__search,
#teepublic .m-header__search-field-container,
#teepublic .input-group {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

#teepublic .m-header__search-field {
  background: rgba(9, 7, 20, 0.92) !important;
  color: var(--cp-text) !important;
  border: 1px solid rgba(61, 240, 255, 0.45) !important;
  border-right: 0 !important;
  border-radius: 12px 0 0 12px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

#teepublic .m-header__search-field-placeholder,
#teepublic .m-header__search-field-placeholder p {
  color: #8f87ad !important;
}

#teepublic .m-header__search-submit {
  background: linear-gradient(180deg, #67f6ff, var(--cp-cyan-deep)) !important;
  border: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: 0 0 16px rgba(61, 240, 255, 0.35) !important;
}

#teepublic .m-header__search-close-button,
#teepublic .vc-header .teepublicon {
  color: var(--cp-cyan) !important;
}

/* ── Category strip ── */
#teepublic .m-explore-nav,
#teepublic .m-tab-nav,
#teepublic .m-explore-nav__container,
#teepublic .m-explore-nav__tab-content,
#teepublic .m-tab-nav__content,
#teepublic .m-tab-nav__tab-content {
  background: rgba(8, 6, 18, 0.72) !important;
  color: var(--cp-text) !important;
  border-color: rgba(61, 240, 255, 0.16) !important;
}

#teepublic .m-tab-nav__list {
  border-bottom: 1px solid rgba(61, 240, 255, 0.2) !important;
}

#teepublic .m-explore-nav a,
#teepublic .m-tab-nav a,
#teepublic .m-tab-nav__item a {
  color: #d7f9ff !important;
}

#teepublic .m-tab-nav__item a {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

#teepublic .m-explore-nav a:hover,
#teepublic .m-tab-nav a:hover {
  color: var(--cp-magenta) !important;
}

/* ── Product stage ── */
#teepublic .m-design,
#teepublic .m-design__content,
#teepublic .m-design__product,
#teepublic .m-design__options,
#teepublic .m-design__ratings,
#teepublic .m-design-product-info,
#teepublic .m-design-product-info-and-faqs,
#teepublic .m-design-product-info--product-quality,
#teepublic .m-design__additional-info,
#teepublic .m-design__additional-info-container,
#teepublic .m-product-options__social,
#teepublic .cqd-banner,
#teepublic .cqd-banner__container,
#teepublic .section-container,
#teepublic .section-container-gray-bg {
  background: transparent !important;
  color: var(--cp-text) !important;
}

#teepublic .m-design-details__title h1,
#teepublic .m-design-product-info h4,
#teepublic .m-design__ratings-heading,
#teepublic .m-product-options__social-title {
  color: var(--cp-text) !important;
  letter-spacing: 0.03em;
  text-shadow: 0 0 22px rgba(255, 47, 154, 0.28);
}

#teepublic .m-design__price,
#teepublic .m-design__price--sale {
  color: var(--cp-cyan) !important;
  text-shadow: 0 0 14px rgba(61, 240, 255, 0.45);
}

#teepublic .m-design__price--regular {
  color: var(--cp-gold) !important;
  text-shadow: 0 0 12px rgba(245, 197, 107, 0.35);
}

#teepublic .m-design__preview {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 47, 154, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(18, 12, 36, 0.9), rgba(8, 6, 18, 0.75)) !important;
  border: 1px solid rgba(61, 240, 255, 0.32) !important;
  border-radius: 22px !important;
  box-shadow:
    0 0 0 1px rgba(255, 47, 154, 0.18),
    0 20px 50px rgba(0, 0, 0, 0.35),
    0 0 32px rgba(61, 240, 255, 0.12) !important;
}

#teepublic .m-cart-config__color-name,
#teepublic .m-cart-config__color-label,
#teepublic .m-design__ratings-service-name,
#teepublic .m-design__ratings-details,
#teepublic .m-design-product-info p,
#teepublic .tp-text-note,
#teepublic .tp-text-note__text {
  color: var(--cp-muted) !important;
}

#teepublic .m-design__ratings-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

#teepublic .m-design__ratings-service {
  background: var(--cp-panel) !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  padding: 16px 18px !important;
}

#teepublic .m-design__ratings-heading {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 14px;
}

#teepublic .tp-text-note--on-light,
#teepublic .tp-text-note--information {
  background: linear-gradient(135deg, rgba(255, 47, 154, 0.16), rgba(61, 240, 255, 0.08)) !important;
  border: 1px solid var(--cp-line-hot) !important;
  border-radius: 14px !important;
  color: var(--cp-text) !important;
}

#teepublic .tp-text-note .strong,
#teepublic .tp-text-note__text .strong {
  color: var(--cp-gold) !important;
}

#teepublic .glide__arrow,
#teepublic .tp-favorite-button {
  background: rgba(10, 8, 22, 0.82) !important;
  color: var(--cp-cyan) !important;
  border: 1px solid rgba(61, 240, 255, 0.4) !important;
  box-shadow: 0 0 14px rgba(61, 240, 255, 0.2) !important;
}

/* ── Login / Daftar ── */
#teepublic .ruby-access-btn {
  border-radius: 16px !important;
  letter-spacing: 0.16em !important;
  font-weight: 800;
}

#teepublic .ruby-access-btn.ruby-access-login {
  color: #041318 !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.45), transparent 42%),
    linear-gradient(180deg, #d8fbff 0%, #3df0ff 42%, #0891b2 100%) !important;
  border-color: #e7fdff !important;
  border-bottom-color: #066070 !important;
  box-shadow:
    0 5px 0 #05586a,
    0 12px 24px rgba(8, 145, 178, 0.35),
    0 0 22px rgba(61, 240, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  text-shadow: none !important;
}

#teepublic .ruby-access-btn.ruby-access-login:hover {
  border-color: #ffffff !important;
  box-shadow:
    0 7px 0 #05586a,
    0 16px 28px rgba(8, 145, 178, 0.45),
    0 0 28px rgba(61, 240, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

#teepublic .ruby-access-btn.ruby-access-register {
  color: #fff !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.35), transparent 40%),
    linear-gradient(180deg, #ff8ec4 0%, #ff2f9a 46%, #9d174d 100%) !important;
  border-color: #ffd0e6 !important;
  border-bottom-color: #6b1038 !important;
  box-shadow:
    0 5px 0 #6b1038,
    0 12px 24px rgba(190, 24, 93, 0.38),
    0 0 22px rgba(255, 47, 154, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  text-shadow: 0 2px 6px rgba(60, 0, 30, 0.35) !important;
}

#teepublic .ruby-access-btn.ruby-access-register:hover {
  border-color: #fff !important;
  box-shadow:
    0 7px 0 #6b1038,
    0 16px 28px rgba(190, 24, 93, 0.5),
    0 0 30px rgba(255, 47, 154, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

#teepublic .btn-x {
  color: #1a0a12 !important;
  background: linear-gradient(180deg, #ffe7a3 0%, #f5c56b 48%, #c4892a 100%) !important;
  border-color: #f8e2a8 !important;
  box-shadow:
    0 0 18px rgba(245, 197, 107, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

#teepublic .btn-x:hover {
  color: #1a0a12 !important;
  background: linear-gradient(180deg, #fff4cf 0%, #ffd98a 100%) !important;
  box-shadow: 0 8px 24px rgba(245, 197, 107, 0.45) !important;
}

/* ── Spec card ── */
#teepublic .ruby-spec-card {
  background: linear-gradient(160deg, rgba(18, 12, 36, 0.96), rgba(10, 8, 22, 0.94)) !important;
  border: 1px solid rgba(61, 240, 255, 0.32) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.4),
    0 0 28px rgba(139, 92, 246, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#teepublic .ruby-spec-card::before {
  background:
    radial-gradient(circle at var(--rs-x, 50%) 0, rgba(255, 47, 154, 0.16), transparent 36%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(61, 240, 255, 0.03) 18px 19px) !important;
}

#teepublic .ruby-spec-title,
#teepublic .mx-section-heading,
#teepublic .app-header {
  color: #fff !important;
  background:
    radial-gradient(circle at 50% 0, rgba(61, 240, 255, 0.22), transparent 46%),
    linear-gradient(120deg, #3b0764 0%, #12081f 48%, #083344 100%) !important;
  border-color: rgba(61, 240, 255, 0.4) !important;
  border-bottom-color: rgba(255, 47, 154, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

#teepublic .ruby-spec-title::before,
#teepublic .mx-section-heading::before {
  background: linear-gradient(90deg, transparent, var(--cp-cyan), #fff, var(--cp-magenta), transparent) !important;
  filter: drop-shadow(0 0 6px var(--cp-cyan));
}

#teepublic .ruby-spec-title::after,
#teepublic .mx-section-heading::after {
  color: var(--cp-cyan) !important;
  text-shadow: 0 0 12px rgba(61, 240, 255, 0.8) !important;
}

#teepublic .ruby-spec-row {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom-color: rgba(61, 240, 255, 0.1) !important;
}

#teepublic .ruby-spec-row:hover {
  background: linear-gradient(90deg, rgba(255, 47, 154, 0.12), rgba(61, 240, 255, 0.06)) !important;
  box-shadow: none !important;
}

#teepublic .ruby-spec-row::before {
  background: linear-gradient(var(--cp-cyan), var(--cp-magenta)) !important;
  box-shadow: 0 0 10px rgba(61, 240, 255, 0.55) !important;
}

#teepublic .ruby-spec-key {
  color: var(--cp-cyan) !important;
}

#teepublic .ruby-spec-key::before {
  background: linear-gradient(145deg, var(--cp-cyan), var(--cp-violet)) !important;
  border-color: rgba(61, 240, 255, 0.5) !important;
  box-shadow: 0 0 8px rgba(61, 240, 255, 0.45) !important;
}

#teepublic .ruby-spec-data {
  color: var(--cp-muted) !important;
}

#teepublic .ruby-spec-data strong,
#teepublic .ruby-spec-score {
  color: #1a0a12 !important;
  background: linear-gradient(145deg, #ffd0e8, var(--cp-magenta) 55%, #7c1d4e) !important;
  border-color: rgba(255, 208, 232, 0.7) !important;
  box-shadow: 0 0 12px rgba(255, 47, 154, 0.35) !important;
}

#teepublic .ruby-spec-rating,
#teepublic .ruby-spec-rating::before {
  color: var(--cp-gold) !important;
  text-shadow: 0 0 8px rgba(245, 197, 107, 0.45);
}

/* ── Article, reviews, FAQ ── */
#teepublic .mx-article-panel,
#teepublic .mx-review-card,
#teepublic .mx-faq-item {
  background: linear-gradient(160deg, rgba(20, 14, 40, 0.94), rgba(10, 8, 22, 0.92)) !important;
  border: 1px solid rgba(139, 92, 246, 0.32) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#teepublic .mx-article-panel::before {
  background:
    radial-gradient(circle at 0 0, rgba(61, 240, 255, 0.08), transparent 32%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 47, 154, 0.03) 18px 19px) !important;
}

#teepublic .mx-article-content,
#teepublic .mx-article-content p,
#teepublic .mx-review-text,
#teepublic .mx-faq-answer p {
  color: var(--cp-muted) !important;
}

#teepublic .mx-article-content h1,
#teepublic .mx-review-name,
#teepublic .mx-faq-question {
  color: var(--cp-text) !important;
}

#teepublic .mx-article-content h2,
#teepublic .mx-article-content h3,
#teepublic .mx-article-content h4,
#teepublic .mx-article-content a {
  color: var(--cp-cyan) !important;
  border-bottom-color: rgba(61, 240, 255, 0.35) !important;
}

#teepublic .mx-article-content a:hover {
  color: var(--cp-magenta) !important;
  border-bottom-color: var(--cp-magenta) !important;
}

#teepublic .mx-review-card::before,
#teepublic .mx-faq-item::before {
  background: linear-gradient(var(--cp-magenta), var(--cp-cyan)) !important;
  box-shadow: 0 0 12px rgba(255, 47, 154, 0.45) !important;
}

#teepublic .mx-review-card::after {
  color: var(--cp-gold) !important;
  text-shadow: 0 0 8px rgba(245, 197, 107, 0.55);
}

#teepublic .mx-review-card:hover,
#teepublic .mx-faq-item:hover {
  border-color: rgba(61, 240, 255, 0.55) !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(61, 240, 255, 0.12) !important;
}

#teepublic .mx-review-name::before {
  background: linear-gradient(145deg, var(--cp-cyan), var(--cp-magenta)) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 8px rgba(61, 240, 255, 0.4) !important;
}

#teepublic .mx-faq-question::before {
  color: #041318 !important;
  background: linear-gradient(145deg, #d8fbff, var(--cp-cyan)) !important;
  box-shadow: 0 0 12px rgba(61, 240, 255, 0.4) !important;
}

#teepublic .mx-faq-answer::before {
  color: var(--cp-magenta) !important;
  background: rgba(255, 47, 154, 0.1) !important;
  border-color: rgba(255, 47, 154, 0.4) !important;
}

/* ── Info table & legacy reviews ── */
#teepublic .app-card {
  background: rgba(12, 9, 24, 0.94) !important;
  border: 1px solid rgba(61, 240, 255, 0.32) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 24px rgba(139, 92, 246, 0.12) !important;
}

#teepublic .app-card:hover {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4), 0 0 26px rgba(61, 240, 255, 0.16) !important;
}

#teepublic .app-table th {
  background: rgba(61, 240, 255, 0.08) !important;
  color: var(--cp-cyan) !important;
  border-bottom-color: rgba(61, 240, 255, 0.25) !important;
}

#teepublic .app-table td {
  color: var(--cp-muted) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
}

#teepublic .review-card {
  background: rgba(14, 10, 28, 0.92) !important;
  border-left-color: var(--cp-magenta) !important;
  border-top-color: rgba(139, 92, 246, 0.28) !important;
  border-right-color: rgba(139, 92, 246, 0.28) !important;
  border-bottom-color: rgba(139, 92, 246, 0.28) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
}

#teepublic .review-card:hover {
  background: rgba(22, 14, 42, 0.96) !important;
  box-shadow: 0 14px 30px rgba(255, 47, 154, 0.16) !important;
}

#teepublic .review-author,
#teepublic .review-card p {
  color: var(--cp-text) !important;
}

#teepublic .review-card p {
  color: var(--cp-muted) !important;
}

#teepublic .review-author::before {
  filter: none !important;
}

#teepublic .review-rating {
  color: var(--cp-gold) !important;
}

#teepublic .stars {
  --star-empty: rgba(255, 255, 255, 0.18);
  --star-fill: var(--cp-gold);
}

#teepublic .badge small {
  color: var(--cp-dim) !important;
}

/* ── Fixed vault nav ── */
#teepublic .ruby-vault-nav {
  background:
    radial-gradient(circle at var(--rv-x, 50%) 0, rgba(61, 240, 255, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(18, 10, 36, 0.96), rgba(6, 4, 16, 0.98) 50%, rgba(8, 24, 36, 0.96)) !important;
  border-color: rgba(61, 240, 255, 0.38) !important;
  border-bottom-color: rgba(255, 47, 154, 0.55) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.65),
    0 0 28px rgba(255, 47, 154, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#teepublic .ruby-vault-nav::after {
  background: linear-gradient(90deg, transparent, var(--cp-cyan), #fff, var(--cp-magenta), transparent) !important;
  filter: drop-shadow(0 0 8px var(--cp-cyan));
}

#teepublic .ruby-vault-item {
  color: #b7afd4 !important;
}

#teepublic .ruby-vault-item:hover {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(61, 240, 255, 0.14), rgba(255, 47, 154, 0.08)) !important;
  border-color: rgba(61, 240, 255, 0.28) !important;
}

#teepublic .ruby-vault-icon {
  color: var(--cp-cyan) !important;
  background: linear-gradient(145deg, rgba(61, 240, 255, 0.16), rgba(18, 10, 32, 0.7)) !important;
  border-color: rgba(61, 240, 255, 0.35) !important;
}

#teepublic .ruby-vault-item:hover .ruby-vault-icon {
  color: #041318 !important;
  background: linear-gradient(145deg, #d8fbff, var(--cp-cyan)) !important;
  box-shadow: 0 0 16px rgba(61, 240, 255, 0.55) !important;
}

#teepublic .ruby-vault-core {
  color: #fff !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.28), transparent 32%),
    linear-gradient(145deg, #ff8ec4 0%, #ff2f9a 48%, #7a1248 100%) !important;
  border-color: #ffd0e6 !important;
  border-bottom-color: #6b1038 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 22px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(255, 47, 154, 0.45) !important;
}

#teepublic .ruby-vault-core:hover {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.38), transparent 34%),
    linear-gradient(145deg, #ffb3d6, #ff2f9a 50%, #9d174d) !important;
  border-color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 14px 26px rgba(0, 0, 0, 0.45),
    0 0 32px rgba(255, 47, 154, 0.6) !important;
}

#teepublic .ruby-vault-core .ruby-vault-icon {
  color: #fff !important;
  background: rgba(40, 0, 24, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

#teepublic .ruby-vault-core:hover .ruby-vault-icon {
  color: #fff !important;
  background: rgba(40, 0, 24, 0.28) !important;
}

@media (max-width: 640px) {
  #teepublic .app-table th {
    background: rgba(61, 240, 255, 0.1) !important;
  }
}