/* =========================================================
   MELOPOD MARKETPLACE
   Complete marketplace stylesheet
   ========================================================= */

@import url("tokens.css");

/* Light-mode values below are aliased to the shared tokens (numerically
   identical, verified against .theme-dark's own overrides further down --
   this file's dark-mode block still redefines these directly, since
   tokens.css has no dark variant yet). */
:root {
    --market-bg: var(--soft);
    --market-white: var(--paper);
    --market-text: var(--ink);
    --market-muted: var(--muted);
    --market-light: var(--soft);
    --market-border: var(--line);
    --market-dark: var(--ink);
    --market-radius: 20px;
    --market-small-radius: 12px;
    --market-shadow: 0 8px 30px rgba(0, 0, 0, 0.055);
    --market-shadow-hover: 0 18px 45px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   BASE
   ========================================================= */

.market-wrap {
    width: min(1250px, calc(100% - 40px));
    margin: 0 auto;
    padding: 42px 0 90px;
    color: var(--market-text);
}

.market-wrap *,
.market-wrap *::before,
.market-wrap *::after {
    box-sizing: border-box;
}

.market-wrap a {
    color: inherit;
}


/* =========================================================
   HERO
   ========================================================= */

.market-hero {
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;
    padding: 46px;

    min-height: 260px;

    overflow: hidden;

    border-radius: 28px;

    color: #fff;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255, 255, 255, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(255, 255, 255, 0.06),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #111111 0%,
            #242424 100%
        );

    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
}

.market-hero::after {
    content: "♪";

    position: absolute;
    right: 45px;
    top: 5px;

    font-family: Georgia, serif;
    font-size: 190px;
    line-height: 1;

    color: #fff;
    opacity: 0.035;

    pointer-events: none;
}

.market-hero > div:first-child {
    position: relative;
    z-index: 1;

    max-width: 700px;
}

.eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;

    color: rgba(255, 255, 255, 0.55);
}

.market-hero h1 {
    margin: 5px 0 12px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(44px, 7vw, 78px);
    font-weight: 500;
    line-height: 0.95;

    letter-spacing: -0.055em;
}

.market-hero .lead {
    max-width: 610px;

    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: rgba(255, 255, 255, 0.68);
}

.market-actions {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 9px;
    flex-wrap: wrap;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.market-wrap .primary,
.market-wrap .secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 43px;

    padding: 0 17px;

    border-radius: 12px;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.market-wrap .primary {
    border: 1px solid var(--market-dark);

    background: var(--market-dark);
    color: #fff;
}

.market-wrap .secondary {
    border: 1px solid var(--market-border);

    background: #fff;
    color: var(--market-text);
}

.market-wrap .market-hero .secondary {
    border-color: rgba(255, 255, 255, 0.18);

    background: rgba(255, 255, 255, 0.08);
    color: #fff;

    backdrop-filter: blur(8px);
}

.market-wrap .primary:hover,
.market-wrap .secondary:hover {
    transform: translateY(-2px);

    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.10);
}

.market-wrap .primary:active,
.market-wrap .secondary:active {
    transform: translateY(0);
}


/* =========================================================
   SEARCH / FILTER BAR
   ========================================================= */

.market-filters {
    display: grid;

    grid-template-columns:
        minmax(240px, 2fr)
        minmax(130px, 1fr)
        minmax(130px, 1fr)
        minmax(130px, 1fr)
        auto;

    gap: 10px;

    margin-bottom: 30px;
    padding: 11px;

    border: 1px solid var(--market-border);
    border-radius: 17px;

    background: var(--market-white);

    box-shadow: var(--market-shadow);
}

.market-filters input,
.market-filters select,
.market-form input,
.market-form textarea,
.market-form select {
    width: 100%;

    border: 1px solid #ddddda;
    border-radius: 11px;

    background: #fafaf9;
    color: var(--market-text);

    font: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.market-filters input,
.market-filters select {
    height: 45px;
    padding: 0 13px;
}

.market-filters input::placeholder {
    color: #999;
}

.market-filters input:focus,
.market-filters select:focus,
.market-form input:focus,
.market-form textarea:focus,
.market-form select:focus {
    border-color: #aaa;

    background: #fff;

    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.035);
}

.market-filters button {
    height: 45px;

    border: 0;

    cursor: pointer;
}


/* =========================================================
   BEAT GRID
   ========================================================= */

.beat-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================================
   BEAT CARD
   ========================================================= */

.beat-card {
    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--market-border);
    border-radius: var(--market-radius);

    background: var(--market-white);

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.025);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.beat-card:hover {
    transform: translateY(-5px);

    border-color: #d8d8d5;

    box-shadow: var(--market-shadow-hover);
}


/* =========================================================
   BEAT COVER
   ========================================================= */

.beat-cover {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255, 255, 255, 0.15),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #242424,
            #555
        );
}

.beat-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;
}

.beat-card:hover .beat-cover img {
    transform: scale(1.045);
}

.beat-cover-placeholder {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 55px;
    font-weight: 700;

    color: #888;
}


/* Play button on hover */

.beat-cover::after {
    content: "▶";

    position: absolute;

    left: 50%;
    top: 50%;

    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;

    transform:
        translate(-50%, -50%)
        scale(0.8);

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);
    color: #111;

    font-size: 13px;

    opacity: 0;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.beat-card:hover .beat-cover::after {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* =========================================================
   BEAT CARD CONTENT
   ========================================================= */

.beat-card-body {
    padding: 18px;
}

.beat-title {
    margin: 0 0 5px;

    font-size: 19px;
    line-height: 1.25;
    font-weight: 850;

    letter-spacing: -0.025em;
}

.beat-title a {
    color: inherit;

    text-decoration: none;
}

.beat-title a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.beat-producer {
    color: var(--market-muted);

    font-size: 13px;
    line-height: 1.5;
}

.beat-producer a {
    color: #444;

    font-weight: 700;

    text-decoration: none;
}

.beat-producer a:hover {
    text-decoration: underline;
}


/* =========================================================
   META PILLS
   ========================================================= */

.beat-meta {
    display: flex;

    gap: 6px;
    flex-wrap: wrap;

    margin: 13px 0;
}

.pill {
    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding: 0 9px;

    border-radius: 999px;

    background: #f1f1ef;

    color: #666;

    font-size: 11px;
    font-weight: 750;

    white-space: nowrap;
}


/* =========================================================
   CARD FOOTER
   ========================================================= */

.beat-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding-top: 14px;

    border-top: 1px solid #eeeeeb;
}

.beat-price {
    font-size: 14px;
    font-weight: 900;

    white-space: nowrap;
}

.beat-bottom .secondary {
    min-height: 36px;

    padding: 0 13px;

    font-size: 12px;
}


/* =========================================================
   AUDIO PLAYER
   ========================================================= */

.audio-player {
    display: block;

    width: 100%;

    margin: 15px 0;
}


/* =========================================================
   GENERAL MARKET CARD
   ========================================================= */

.market-card {
    padding: 24px;

    border: 1px solid var(--market-border);
    border-radius: var(--market-radius);

    background: var(--market-white);

    box-shadow: var(--market-shadow);
}


/* =========================================================
   BEAT DETAIL PAGE
   ========================================================= */

.beat-detail {
    display: grid;

    grid-template-columns:
        minmax(280px, 430px)
        minmax(0, 1fr);

    gap: 35px;

    align-items: start;
}

.beat-detail-cover {
    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 20px;

    background: #eee;

    box-shadow: var(--market-shadow);
}

.beat-detail-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   LICENSE GRID
   ========================================================= */

.license-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 16px;
}

.license-option {
    position: relative;

    padding: 16px;

    border: 1px solid #ddd;

    border-radius: 15px;

    background: #fff;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.license-option:hover {
    border-color: #aaa;

    background: #fafafa;

    transform: translateY(-2px);
}

.license-option input {
    margin-right: 8px;
}

.license-option strong {
    font-size: 18px;
}


/* =========================================================
   MARKET FORMS
   ========================================================= */

.market-form {
    display: grid;

    gap: 17px;
}

.market-form label {
    display: grid;

    gap: 7px;

    font-size: 13px;
    font-weight: 800;
}

.market-form input,
.market-form select {
    min-height: 45px;

    padding: 12px 14px;
}

.market-form textarea {
    min-height: 130px;

    padding: 13px 14px;

    resize: vertical;
    line-height: 1.55;
}


/* =========================================================
   UPLOAD GRID
   ========================================================= */

.upload-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


/* =========================================================
   LICENSE BUILDER
   ========================================================= */

.license-builder {
    display: grid;

    gap: 10px;

    padding: 17px;

    border: 1px solid #ddd;
    border-radius: 16px;

    background: #fafaf9;
}

.license-row {
    display: grid;

    grid-template-columns:
        1.2fr
        0.7fr
        2fr
        auto;

    gap: 8px;

    align-items: center;
}


/* =========================================================
   TABLE
   ========================================================= */

.market-table {
    width: 100%;

    border-collapse: collapse;

    background: #fff;
}

.market-table th,
.market-table td {
    padding: 14px;

    border-bottom: 1px solid #eee;

    text-align: left;
    vertical-align: top;

    font-size: 14px;
}

.market-table th {
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;

    color: #666;

    background: #fafaf9;
}

.market-table tbody tr:hover {
    background: #fafafa;
}


/* =========================================================
   NOTICES
   ========================================================= */

.notice {
    margin-bottom: 18px;

    padding: 14px 16px;

    border-radius: 13px;

    background: #f5f2ff;

    font-size: 14px;
    line-height: 1.55;
}

.notice.error {
    background: #fff0f0;

    color: #8c1515;
}

.notice.success {
    background: #effbf1;

    color: #17652a;
}


/* =========================================================
   CART
   ========================================================= */

.cart-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto;

    gap: 15px;

    align-items: center;

    padding: 18px 0;

    border-bottom: 1px solid #eee;
}

.cart-total {
    display: flex;

    justify-content: flex-end;

    margin-top: 20px;

    font-size: 22px;
    font-weight: 900;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty-market {
    padding: 75px 25px;

    border: 1px dashed #ccc;
    border-radius: 20px;

    background: #fff;

    text-align: center;
}

.empty-market h2 {
    margin: 0 0 8px;

    font-size: 25px;
    letter-spacing: -0.03em;
}

.empty-market p {
    max-width: 460px;

    margin: 0 auto 22px;

    color: var(--market-muted);

    line-height: 1.6;
}


/* =========================================================
   UTILITY CLASSES
   ========================================================= */

.small-muted {
    color: #777;

    font-size: 13px;
}

.check-list {
    display: grid;

    gap: 7px;

    color: #555;
}

.danger-link {
    color: #b00020 !important;
}

.status {
    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding: 0 9px;

    border-radius: 999px;

    background: #eee;

    font-size: 11px;
    font-weight: 900;

    white-space: nowrap;
}

.status.paid {
    background: #e8f7eb;

    color: #17652a;
}

.status.pending {
    background: #fff5d9;

    color: #785900;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .market-wrap {
        width: min(100% - 32px, 1000px);
    }

    .beat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .market-filters {
        grid-template-columns:
            2fr
            1fr
            1fr;
    }

    .market-filters input {
        grid-column: 1 / -1;
    }

    .market-filters button {
        min-width: 100px;
    }
}


/* =========================================================
   RESPONSIVE — SMALL TABLET
   ========================================================= */

@media (max-width: 900px) {

    .market-wrap {
        padding-top: 30px;
    }

    .market-hero {
        align-items: flex-start;

        flex-direction: column;

        padding: 36px;
    }

    .market-actions {
        width: 100%;
    }

    .beat-detail {
        grid-template-columns: 1fr;
    }

    .beat-detail-cover {
        max-width: 550px;
    }

    .upload-grid,
    .license-grid {
        grid-template-columns: 1fr;
    }

    .license-row {
        grid-template-columns:
            1fr
            1fr;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .market-wrap {
        width: calc(100% - 20px);

        padding:
            20px
            0
            70px;
    }

    .market-hero {
        min-height: auto;

        margin-bottom: 20px;

        padding: 28px 22px;

        border-radius: 20px;
    }

    .market-hero::after {
        right: 10px;
        top: 20px;

        font-size: 130px;
    }

    .market-hero h1 {
        font-size: 43px;
    }

    .market-hero .lead {
        font-size: 14px;
    }

    .market-actions {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        width: 100%;
    }

    .market-actions .primary {
        grid-column: 1 / -1;
    }

    .market-actions .primary,
    .market-actions .secondary {
        width: 100%;
    }


    /* Filters */

    .market-filters {
        grid-template-columns: 1fr;

        gap: 8px;

        padding: 9px;

        margin-bottom: 22px;

        border-radius: 15px;
    }

    .market-filters input {
        grid-column: auto;
    }

    .market-filters button {
        width: 100%;
    }


    /* Beat cards */

    .beat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 11px;
    }

    .beat-card {
        border-radius: 15px;
    }

    .beat-card-body {
        padding: 12px;
    }

    .beat-title {
        font-size: 14px;
    }

    .beat-producer {
        font-size: 11px;
    }

    .beat-meta {
        gap: 4px;

        margin: 9px 0;
    }

    .pill {
        min-height: 23px;

        padding: 0 7px;

        font-size: 9px;
    }

    .beat-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 9px;
    }

    .beat-price {
        font-size: 12px;
    }

    .beat-bottom .secondary {
        width: 100%;

        min-height: 34px;

        font-size: 11px;
    }


    /* General cards */

    .market-card {
        padding: 18px;

        border-radius: 16px;
    }


    /* Tables */

    .market-table {
        display: block;

        width: 100%;

        overflow-x: auto;

        white-space: nowrap;

        font-size: 13px;
    }

    .market-table th,
    .market-table td {
        padding: 11px;
    }


    /* Cart */

    .cart-row {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .cart-total {
        justify-content: flex-start;

        font-size: 20px;
    }


    /* Forms */

    .license-row {
        grid-template-columns: 1fr;
    }

    .upload-grid {
        grid-template-columns: 1fr;
    }


    /* Empty state */

    .empty-market {
        padding: 55px 18px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .beat-grid {
        grid-template-columns: 1fr;
    }

    .market-actions {
        grid-template-columns: 1fr;
    }

    .market-actions .primary {
        grid-column: auto;
    }

    .market-hero h1 {
        font-size: 38px;
    }

    .beat-cover {
        aspect-ratio: 1 / 1;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .beat-card,
    .beat-cover img,
    .beat-cover::after,
    .market-wrap .primary,
    .market-wrap .secondary,
    .license-option {
        transition: none;
    }
}
.payment-method-picker {
    margin: 16px 0;
    display: grid;
    gap: 8px;
}

.payment-method-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e2e1db;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
}

.payment-method-option:has(input:checked) {
    border-color: #7358ff;
    background: rgba(115, 88, 255, 0.06);
}

.payment-method-option input {
    width: auto;
    margin: 0;
}


/* =========================================================
   DARK MODE (activated by the .theme-dark class on <body>,
   same convention used by the rest of Melopod)
   ========================================================= */

.theme-dark {
    --market-bg: #111111;
    --market-white: #191919;
    --market-text: #f7f7f7;
    --market-muted: #a7a7a7;
    --market-light: #242424;
    --market-border: #333333;
    --market-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    --market-shadow-hover: 0 18px 45px rgba(0, 0, 0, 0.45);
}

.theme-dark .market-wrap .secondary {
    background: #242424;
    border-color: #3a3a3a;
    color: #f7f7f7;
}

.theme-dark .market-wrap .primary {
    background: #f7f7f7;
    border-color: #f7f7f7;
    color: #111;
}

.theme-dark .market-filters input,
.theme-dark .market-filters select,
.theme-dark .market-form input,
.theme-dark .market-form textarea,
.theme-dark .market-form select {
    background: #242424;
    border-color: #3a3a3a;
    color: #f7f7f7;
}

.theme-dark .market-filters input::placeholder {
    color: #888;
}

.theme-dark .market-filters input:focus,
.theme-dark .market-filters select:focus,
.theme-dark .market-form input:focus,
.theme-dark .market-form textarea:focus,
.theme-dark .market-form select:focus {
    border-color: #666;
    background: #292929;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.theme-dark .beat-card:hover {
    border-color: #444;
}

.theme-dark .beat-producer a {
    color: #d5d5d5;
}

.theme-dark .pill {
    background: #242424;
    color: #c7c7c7;
}

.theme-dark .beat-bottom {
    border-top-color: #333;
}

.theme-dark .beat-detail-cover {
    background: #242424;
}

.theme-dark .license-option {
    background: #191919;
    border-color: #3a3a3a;
    color: #f7f7f7;
}

.theme-dark .license-option:hover {
    background: #222;
    border-color: #666;
}

.theme-dark .license-builder {
    background: #191919;
    border-color: #3a3a3a;
}

.theme-dark .market-table {
    background: #191919;
}

.theme-dark .market-table th,
.theme-dark .market-table td {
    border-bottom-color: #333;
}

.theme-dark .market-table th {
    background: #222;
    color: #a7a7a7;
}

.theme-dark .market-table tbody tr:hover {
    background: #222;
}

.theme-dark .notice {
    background: #241f38;
    color: #e2ddff;
}

.theme-dark .notice.error {
    background: #3a1a1c;
    color: #ff9aa2;
}

.theme-dark .notice.success {
    background: #173a24;
    color: #7be3a0;
}

.theme-dark .cart-row {
    border-bottom-color: #333;
}

.theme-dark .empty-market {
    background: #181818;
    border-color: #3a3a3a;
}

.theme-dark .small-muted {
    color: #a7a7a7;
}

.theme-dark .check-list {
    color: #c7c7c7;
}

.theme-dark .status {
    background: #292929;
    color: #f7f7f7;
}

.theme-dark .status.paid {
    background: #173a24;
    color: #7be3a0;
}

.theme-dark .status.pending {
    background: #3a2b12;
    color: #f0b45c;
}

.theme-dark .payment-method-option {
    border-color: #3a3a3a;
}

.theme-dark .payment-method-option:has(input:checked) {
    border-color: #8f78ff;
    background: rgba(143, 120, 255, 0.14);
}