/* ==========================================================================================
   THEME – contemporary re-skin of the template.
   Colours, fonts and radius are NOT written here: they are generated from config/site.php
   (see app/Core/Theme.php) as CSS variables:
       --brand-primary  --brand-accent  --brand-ink  --brand-gradient  --brand-radius
       --brand-surface  --brand-surface-soft  --brand-border  --brand-muted  --brand-heading
   plus the template's own --vz-* variables. Edit the config, not this file, to recolour.
   ========================================================================================== */

:root { --vz-border-radius: 10px; --vz-border-radius-lg: var(--brand-radius); --vz-border-radius-xl: calc(var(--brand-radius) + 6px); }

body { font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -.015em; color: var(--brand-heading); }
a { text-underline-offset: 3px; }
.nft-hero .text-gradient, .page-hero .text-gradient, .auth-page-wrapper .text-gradient { background-image: linear-gradient(90deg, #6fd3f5 0%, var(--brand-accent) 100%); }
.nft-hero .lead, .page-hero .lead { color: rgba(255, 255, 255, .74) !important; }
.text-gradient { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ---- brand logo ------------------------------------------------------------------------ */
.brand-logo { display: inline-flex; align-items: center; gap: .55rem; line-height: 1; }
.brand-logo img { display: block; flex: none; }
.brand-name { font-family: var(--vz-font-family-secondary); font-weight: 700; font-size: 1.3rem; letter-spacing: -.03em; }
.brand-logo--dark .brand-name { color: var(--brand-heading); }
.brand-logo--light .brand-name { color: #fff; }
.navbar-brand-box .logo-lg { line-height: 1; }

/* ---- buttons --------------------------------------------------------------------------- */
.btn { font-weight: 500; letter-spacing: -.005em; transition: transform .15s ease, box-shadow .2s ease, background-color .2s, border-color .2s; }
.btn-primary { background: var(--brand-gradient); border-color: transparent; color: #fff; --vz-btn-hover-bg: var(--vz-primary); --vz-btn-hover-border-color: transparent; --vz-btn-active-bg: var(--vz-primary); --vz-btn-active-border-color: transparent; --vz-btn-hover-color: #fff; --vz-btn-active-color: #fff; background-size: 140% 100%; background-position: left; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--brand-gradient); background-size: 140% 100%; background-position: right; color: #fff; box-shadow: 0 8px 20px -8px rgba(var(--brand-primary-rgb), .65); transform: translateY(-1px); }
.btn-success, .btn-danger, .btn-info { color: #fff; }
.btn-warning { color: #1a1205; }
.btn-lg { padding: .7rem 1.5rem; border-radius: 12px; font-size: 1rem; }
.btn-outline-light { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.btn-ghost-light { color: rgba(255, 255, 255, .85); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.bg-primary, .badge.bg-primary { background: var(--brand-gradient) !important; }
:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* ---- cards & forms --------------------------------------------------------------------- */
.card { border: 1px solid var(--brand-border); border-radius: var(--brand-radius); box-shadow: 0 1px 2px rgba(10, 25, 47, .04), 0 12px 28px -18px rgba(10, 25, 47, .18); }
.card-header { background: transparent; border-bottom-color: var(--brand-border); }
.card-footer { background: transparent; }
.card-animate { transition: transform .25s ease, box-shadow .25s ease; }
.card-animate:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -18px rgba(var(--brand-primary-rgb), .45); }
.form-control, .form-select { border-radius: 10px; border-color: var(--brand-border); background-color: var(--vz-input-bg-custom, var(--brand-surface)); }
.form-control:focus, .form-select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .18); }
.explore-box .explore-img { border-radius: var(--brand-radius) var(--brand-radius) 0 0; aspect-ratio: 1 / 1; object-fit: cover; }
.explore-box .bg-overlay { background: linear-gradient(180deg, transparent 40%, rgba(7, 17, 31, .65)); }
.breadcrumb-item a { color: var(--brand-muted); }
.page-title-box h4 { font-weight: 700; }

/* ---- dashboard shell: sidebar ---------------------------------------------------------- */
.app-menu { background: linear-gradient(180deg, var(--brand-ink) 0%, color-mix(in srgb, var(--brand-ink) 86%, var(--brand-primary)) 100%) !important; border-right: 0; }
.app-menu .navbar-brand-box { background: transparent; }
.app-menu .menu-title span { color: rgba(255, 255, 255, .42); letter-spacing: .09em; font-weight: 600; }
.app-menu .navbar-nav .nav-link { color: rgba(255, 255, 255, .72); border-radius: 10px; margin: 2px 12px; padding: .62rem .9rem; transition: background-color .2s, color .2s; }
.app-menu .navbar-nav .nav-link i { color: inherit; opacity: .85; }
.app-menu .navbar-nav .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.app-menu .navbar-nav .nav-link.active { color: #fff; background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .85), rgba(var(--brand-accent-rgb), .55)); box-shadow: 0 8px 18px -10px rgba(var(--brand-accent-rgb), .8); }
.app-menu .navbar-nav .nav-link.active::after { display: none; }
.app-menu .sidebar-background { display: none; }

/* ---- dashboard shell: top bar ---------------------------------------------------------- */
#page-topbar { background: color-mix(in srgb, var(--brand-surface) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--brand-border); box-shadow: none; }
.app-search .form-control { background: var(--brand-surface-soft); border: 1px solid transparent; border-radius: 999px; padding-left: 2.6rem; }
.app-search .form-control:focus { background: var(--brand-surface); border-color: var(--brand-primary); }
.topbar-badge { top: 6px !important; }
@media (max-width: 991.98px) {   /* the vertical layout hides the top-bar logo; show the mark on phones/tablets */
    #page-topbar .horizontal-logo { display: inline-block !important; padding-left: 1rem; }
    #page-topbar .horizontal-logo .logo-dark { display: inline-block !important; }
    #page-topbar .horizontal-logo .logo-light { display: none !important; }
    #page-topbar .horizontal-logo .logo-lg { display: none !important; }
    #page-topbar .horizontal-logo .logo-sm { display: inline-block !important; }
    [data-bs-theme=dark] #page-topbar .horizontal-logo .logo-dark { display: none !important; }
    [data-bs-theme=dark] #page-topbar .horizontal-logo .logo-light { display: inline-block !important; }
}
.footer { background: var(--brand-surface); border-top: 1px solid var(--brand-border); }

/* ---- public site: navigation ----------------------------------------------------------- */
.navbar-landing { padding: 14px 0; }
.navbar-landing .navbar-nav .nav-item .nav-link { color: rgba(255, 255, 255, .78); font-size: .95rem; }
.navbar-landing .navbar-nav .nav-item .nav-link:hover,
.navbar-landing .navbar-nav .nav-item .nav-link.active { color: #fff !important; }
.navbar-landing .navbar-toggler { color: #fff !important; }
.navbar-landing.is-sticky { background: color-mix(in srgb, var(--brand-surface) 90%, transparent); backdrop-filter: saturate(160%) blur(12px); box-shadow: 0 1px 0 var(--brand-border); padding: 8px 0; }
.navbar-landing.is-sticky .navbar-nav .nav-item .nav-link { color: var(--vz-body-color); }
.navbar-landing.is-sticky .navbar-nav .nav-item .nav-link:hover,
.navbar-landing.is-sticky .navbar-nav .nav-item .nav-link.active { color: var(--brand-primary) !important; }
.navbar-landing.is-sticky .navbar-toggler { color: var(--vz-body-color) !important; }
.navbar-landing.is-sticky .btn-ghost-light { color: var(--vz-body-color); }
.navbar-landing .card-logo-light { display: inline-block; }
.navbar-landing .card-logo-dark { display: none; }
.navbar-landing.is-sticky .card-logo-light { display: none; }
.navbar-landing.is-sticky .card-logo-dark { display: inline-block; }
[data-bs-theme=dark] .navbar-landing.is-sticky .card-logo-light { display: inline-block; }
[data-bs-theme=dark] .navbar-landing.is-sticky .card-logo-dark { display: none; }
@media (max-width: 991.98px) {
    .navbar-landing .navbar-collapse { background: var(--brand-ink); border-radius: var(--brand-radius); padding: 1rem; margin-top: .75rem; }
    .navbar-landing.is-sticky .navbar-collapse { background: var(--brand-surface); border: 1px solid var(--brand-border); }
    .navbar-landing.is-sticky .navbar-collapse .nav-link { color: var(--vz-body-color); }
}

/* ---- public site: hero & banners ------------------------------------------------------- */
.nft-hero, .page-hero {
    position: relative; isolation: isolate; overflow: hidden; color: #fff;
    background:
        radial-gradient(60% 80% at 12% 8%, rgba(var(--brand-primary-rgb), .75) 0%, transparent 62%),
        radial-gradient(55% 70% at 92% 18%, rgba(var(--brand-accent-rgb), .5) 0%, transparent 64%),
        radial-gradient(50% 60% at 55% 105%, rgba(99, 102, 241, .35) 0%, transparent 60%),
        var(--brand-ink);
}
section.nft-hero { padding: 210px 0 150px; }
section.page-hero { padding: 150px 0 80px; }
.nft-hero::before, .page-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 75%);
}
.nft-hero .bg-overlay, .bg-overlay-pattern { display: none; }
.nft-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.12 !important; font-weight: 700; }
section.section:not(.nft-hero):not(.page-hero) { padding-top: 80px; padding-bottom: 80px; }

/* ---- public site: footer --------------------------------------------------------------- */
.custom-footer { background: var(--brand-ink); color: rgba(255, 255, 255, .62); }
.custom-footer .footer-list a { color: rgba(255, 255, 255, .62); transition: color .2s; }
.custom-footer .footer-list a:hover { color: var(--brand-accent); }
.custom-footer .copy-rights, .custom-footer .copy-rights a { color: rgba(255, 255, 255, .5); }
.custom-footer .footer-social-link .avatar-title { background: rgba(255, 255, 255, .08); color: #fff; transition: background .2s, transform .2s; }
.custom-footer .footer-social-link a:hover .avatar-title { background: var(--brand-gradient); transform: translateY(-2px); }
.landing-back-top { position: fixed; right: 24px; bottom: 24px; z-index: 1030; display: none; border-radius: 50%; box-shadow: 0 10px 24px -10px rgba(var(--brand-primary-rgb), .8); }

/* ---- auth pages ------------------------------------------------------------------------ */
.auth-one-bg {
    background:
        radial-gradient(60% 90% at 15% 0%, rgba(var(--brand-primary-rgb), .6) 0%, transparent 60%),
        radial-gradient(50% 80% at 90% 10%, rgba(var(--brand-accent-rgb), .4) 0%, transparent 60%),
        var(--brand-ink);
}
.auth-one-bg .bg-overlay { background: transparent; opacity: 1; }
.auth-one-bg .shape > svg { fill: var(--vz-body-bg); }
.auth-page-wrapper .card { border-radius: calc(var(--brand-radius) + 4px); }
#password-contain p.valid { color: var(--vz-success); }
#password-contain p.invalid { color: var(--vz-danger); }
#password-contain p.valid::before { content: "\2713\00a0"; }
#password-contain p.invalid::before { content: "\2715\00a0"; }

/* ---- small components added by this project -------------------------------------------- */
.profile-cover { height: 150px; background: radial-gradient(70% 160% at 10% 0%, rgba(var(--brand-primary-rgb), .9), transparent 65%), radial-gradient(60% 150% at 95% 20%, rgba(var(--brand-accent-rgb), .7), transparent 65%), var(--brand-ink); }
.profile-head { margin-top: -48px; }
.profile-avatar { background: var(--brand-surface); }
.upload-drop { border: 2px dashed var(--brand-border); border-radius: var(--brand-radius); padding: 1.25rem; background: var(--brand-surface-soft); transition: border-color .2s; }
.upload-drop:hover { border-color: var(--brand-primary); }
.upload-drop.is-invalid { border-color: var(--vz-danger); }
.upload-drop__preview { margin-top: 1rem; text-align: center; }
.upload-drop__preview img { max-height: 280px; max-width: 100%; border-radius: 12px; }
.legal-text h4 { margin-top: 2rem; font-size: 1.15rem; }
.legal-text p { color: var(--brand-muted); line-height: 1.75; }
.site-toast { position: fixed; right: 20px; bottom: 20px; z-index: 2000; max-width: 340px; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; }
.site-toast.show { opacity: 1; transform: none; }
.accordion-button:not(.collapsed) { color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .08); }

/* ---- explore grid: equal-height cards, primary-coloured price slider ------------------- */
.list-element > .card, #explorecard-list > .col > .card { height: calc(100% - 1.5rem); display: flex; flex-direction: column; }
.list-element > .card .card-body { flex: 1 1 auto; }
.noUi-connect { background: var(--brand-primary) !important; }
.noUi-handle { border-color: var(--brand-primary) !important; }
.noUi-tooltip { color: var(--brand-primary); border-color: var(--brand-border); }

/* ---- dark-mode contrast ---------------------------------------------------------------- */
[data-bs-theme=dark] .text-primary, [data-bs-theme=dark] .card .text-primary { color: var(--vz-primary-text-emphasis) !important; }
[data-bs-theme=dark] .btn-ghost-secondary, [data-bs-theme=dark] .btn-soft-primary { color: var(--vz-body-color); }
[data-bs-theme=dark] .btn-soft-primary { background: rgba(var(--brand-primary-rgb), .22); }
[data-bs-theme=dark] .breadcrumb-item a, [data-bs-theme=dark] .text-muted { color: var(--brand-muted) !important; }
[data-bs-theme=dark] .form-control, [data-bs-theme=dark] .form-select { color: var(--vz-body-color); }

/* ---- collections & multi-upload -------------------------------------------------------- */
.upload-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; }
.upload-thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--brand-border); }
.collection-card__cover { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--brand-radius) var(--brand-radius) 0 0; background: var(--brand-ink); }
.collection-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.collection-card:hover .collection-card__cover img { transform: scale(1.05); }
.collection-hero { height: 190px; background-size: cover; background-position: center; position: relative; }
.collection-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 17, 31, .15), rgba(7, 17, 31, .7)); }
.app-menu .navbar-nav button.nav-link { display: flex; align-items: center; cursor: pointer; }

/* ---- trading & wallet ------------------------------------------------------------------ */
.trade-panel { border-color: rgba(var(--brand-primary-rgb), .25); }
.wallet-card { position: relative; overflow: hidden; }
.wallet-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--brand-gradient); opacity: .08; }
.wallet-pill { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wallet-table td, .wallet-table th { padding-top: .8rem; padding-bottom: .8rem; }
.btn-check:checked + .btn-outline-primary { background: var(--brand-gradient); border-color: transparent; color: #fff; }

/* ---- creators & rankings --------------------------------------------------------------- */
.creator-card .avatar-lg { width: 5.5rem; height: 5.5rem; }
.rank-badge { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .8rem; }
.rank-1 { background: linear-gradient(135deg, #f7c948, #e0a100); }
.rank-2 { background: linear-gradient(135deg, #c9d3dd, #8fa0b3); }
.rank-3 { background: linear-gradient(135deg, #e0a070, #b0693a); }
.listing-timer { font-variant-numeric: tabular-nums; z-index: 2; }

/* ---- deposit flow ---------------------------------------------------------------------- */
.deposit-steps { list-style: none; display: flex; justify-content: center; gap: 1.25rem; margin: 0; padding: .9rem 1rem; border-bottom: 1px solid var(--brand-border); font-size: .8rem; color: var(--brand-muted); }
.deposit-steps li { display: flex; align-items: center; gap: .4rem; }
.deposit-steps li span { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-surface-soft); font-weight: 600; font-size: .72rem; }
.deposit-steps li.is-active { color: var(--brand-heading); font-weight: 600; }
.deposit-steps li.is-active span { background: var(--brand-gradient); color: #fff; }
.deposit-steps li.is-done span { background: var(--vz-success); color: #fff; }
.currency-card { display: flex !important; flex-direction: column; align-items: center; gap: .15rem; padding: .9rem .5rem; }
.currency-card small { opacity: .75; font-size: .72rem; }
.address-box { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border: 1px solid var(--brand-border); border-radius: 10px; background: var(--brand-surface-soft); }
.address-box code { font-size: .8rem; word-break: break-all; color: var(--brand-heading); line-height: 1.5; }