/*
  takedown_cam4.css

  This stylesheet defines the appearance of the Cam4 takedown page. It is
  adapted from the original takedown.css used for Chaturbate performers.
  The main differences are that it supports Cam4's gender classes (female,
  male, shemale) and references the cam4 theme colours where applicable.
  The layout, spacing, and interactive elements remain consistent with the
  original design to provide a seamless user experience.
*/

/* Root colour palette and general variables */
:root {
    --radius: 20px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .12);
    --bg: #0b0d10;
    --card: #131c26;
    --muted: #99a3b5;
    --text: #f2f6fc;
    --accent: #6ea8fe;
    --accent-2: #94b5ff;
    --chip: #1a2632;
    --chip-border: #243240;
}

/* Gender themes override accent colours for Cam4: f (female), m (male), s (shemale/trans) */
body.gender-f {
    --accent: #ff6ec7;
    --accent-2: #ff9ade;
}
body.gender-m {
    --accent: #6ea8fe;
    --accent-2: #94c0ff;
}
body.gender-s {
    --accent: #34d399;
    --accent-2: #6ee7b7;
}

* {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}
body {
    margin: 0;
    background: linear-gradient(180deg, #0c0f14, #10141b 20%, #0b0d10);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
}

/* Layout wrappers */
.container {
    max-width: 1100px;
    margin: clamp(0px, 4vw, 0px) auto;
    padding: clamp(12px, 2vw, 24px);
}
.grid {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
    grid-template-columns: 1fr;
}
@media(min-width:900px) {
    .grid {
        grid-template-columns: 360px 1fr;
        align-items: stretch;
    }
}

/* Card base styling */
.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .00)), var(--card);
    border: 1px solid #131a22;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Media wrapper for performer image */
.media {
    position: relative;
    aspect-ratio: 1/1;
    background: #0b0d10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.media:hover img {
    transform: scale(1.03);
}

/* Profile section inside card */
.profile {
    padding: clamp(16px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Title styling */
.title {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.display {
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-all;
}

/* Key/value pairs for small meta */
.meta {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.meta .row {
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .00)), var(--chip);
    border: 1px solid var(--chip-border);
    padding: 12px 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.meta .row .viewprofile {
    width: 100%;
    text-align: center;
    display: inline-block;
}
.k {
    color: var(--muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.v {
    font-weight: 600;
    font-size: 15px;
}

/* Currency switch tabs */
.tabs {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}
.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--chip-border);
    background: var(--chip);
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all .2s ease;
}
.tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.tab.active {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: #0b0d10;
    border-color: transparent;
}

/* Wallet box */
.wallet-box {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    border: 1px dashed var(--chip-border);
    background: transparent;
    border-radius: 12px;
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    word-break: break-all;
}
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--chip-border);
    background: var(--chip);
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    color: white;
}
.copy-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}
.copy-btn.copied {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: #0b0d10;
    border-color: transparent;
}

/* Buttons */
.btn {
    appearance: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    transition: transform .1s ease, box-shadow .2s ease, background .3s ease, color .3s ease;
}
.btn.primary {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: #0b0d10;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.btn.primary:active {
    transform: translateY(1px);
}
.btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 255, 255, .05), 0 0 15px var(--accent);
}
#cryptoConfirmBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
    pointer-events: none;
}

/* Accent ring around cards */
.ring {
    position: absolute;
    inset: -1px;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: 0 0 0 2px rgba(110, 168, 254, .08), 0 0 40px rgba(110, 168, 254, .10);
}
body.gender-f .ring {
    box-shadow: 0 0 0 2px rgba(255, 110, 199, .10), 0 0 40px rgba(255, 110, 199, .12);
}
body.gender-m .ring {
    box-shadow: 0 0 0 2px rgba(110, 168, 254, .10), 0 0 40px rgba(110, 168, 254, .12);
}
body.gender-s .ring {
    box-shadow: 0 0 0 2px rgba(52, 211, 153, .12), 0 0 40px rgba(52, 211, 153, .16);
}

/* Input fields styling for the form */
form .input,
form textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--chip-border);
    background: var(--chip);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
}
form .input::placeholder,
form textarea::placeholder {
    color: var(--muted);
}
form textarea {
    resize: vertical;
    min-height: 100px;
}

/* Smaller muted helper text */
.helper {
    font-size: 14px;
    color: var(--muted);
    text-align: center;
    line-height: 1.4;
}

img.qrcode {
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .00)), var(--chip);
    border: 1px solid var(--chip-border);
    padding: 12px 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 320px;
}

/* Centered top navigation bar */
.top-nav {
    width: 100%;
    padding: 12px 0;
    background: var(--card);
    text-align: center;
}
.top-nav-inner {
    display: flex;
    justify-content: center;
    align-items: center;
}
.top-nav-inner .nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
}
.top-nav-inner .nav-menu a {
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    transition: color .2s ease;
}
.top-nav-inner .nav-menu a:hover {
    color: var(--accent);
}
.top-nav-inner .nav-menu a[aria-current="page"] {
    color: var(--accent);
    cursor: default;
}

.g-recaptcha {
    display: inline-block;
    margin: 0 auto;
}
a.helper {
    color: var(--accent);
}