/* ============================================================
   FOKONA CREATORS MONETISATION
   PREMIUM RESPONSIVE STYLES
   ============================================================ */

:root {
    --creator-red: #ed0a16;
    --creator-red-dark: #d90712;
    --creator-red-light: #fff1f3;
    --creator-pink: #fff6f7;
    --creator-pink-2: #ffe8eb;
    --creator-dark: #071329;
    --creator-text: #172033;
    --creator-muted: #667085;
    --creator-border: #e9e9ee;
    --creator-white: #ffffff;
    --creator-gold: #f5b800;
    --creator-green: #22c55e;
}


/* ============================================================
   PAGE RESET
   ============================================================ */

.page-template-page-creators,
.page-template-page-creators body {
    background: #ffffff;
}

.page-template-page-creators #primary {
    width: 100%;
    max-width: none;
}

.page-template-page-creators main {
    margin: 0;
}

.page-template-page-creators .fokona-creators-page img {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   HIDE DEFAULT DISCY SIDEBAR
   ============================================================ */

.page-template-page-creators .sidebar,
.page-template-page-creators #sidebar,
.page-template-page-creators .main-sidebar,
.page-template-page-creators .wpqa-sidebar,
.page-template-page-creators .wpqa-sidebar-content,
.page-template-page-creators .sidebar-wrap,
.page-template-page-creators .sidebar-inner,
.page-template-page-creators .widget-area,
.page-template-page-creators .question-sidebar,
.page-template-page-creators .page-sidebar,
.page-template-page-creators .ask-sidebar,
.page-template-page-creators .site-sidebar {
    display: none !important;
}


/* ============================================================
   FORCE MAIN CONTENT FULL WIDTH
   ============================================================ */

.page-template-page-creators .main-content,
.page-template-page-creators .content-area,
.page-template-page-creators .site-content,
.page-template-page-creators .page-content {
    width: 100% !important;
    max-width: none !important;
}


/* ============================================================
   MAIN PAGE
   ============================================================ */

.fokona-creators-page {
    width: 100%;
    max-width: 1440px;

    margin: 0 auto;

    padding: 22px 28px 60px;

    box-sizing: border-box;
}

.creators-layout {
    width: 100%;

    display: grid;

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

    gap: 22px;

    align-items: start;
}


/* ============================================================
   CUSTOM CREATOR SIDEBAR
   ============================================================ */

.creators-sidebar {
    width: 150px;

    position: sticky;
    top: 90px;

    align-self: start;
}

.creator-navigation {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.creator-nav {
    width: 100%;
    min-height: 38px;

    padding: 0 10px;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    gap: 9px;

    border-radius: 10px;

    color: #667085;

    text-decoration: none;

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

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.creator-nav i {
    width: 17px;

    text-align: center;

    font-size: 12px;

    flex-shrink: 0;
}

.creator-nav:hover {
    color: var(--creator-red);

    background: #fff5f6;
}

.creator-nav.active {
    color: #ffffff;

    background: var(--creator-red);

    box-shadow:
        0 7px 16px rgba(237, 10, 22, .18);
}

.creator-nav.active:hover {
    color: #ffffff;

    background: var(--creator-red-dark);
}


/* ============================================================
   SIDEBAR PROMOTIONAL CARD
   ============================================================ */

.creator-sidebar-card {
    position: relative;

    margin-top: 28px;

    padding: 17px 12px 14px;

    min-height: 155px;

    background:
        linear-gradient(
            145deg,
            #fff7f8 0%,
            #fff0f2 100%
        );

    border-radius: 12px;

    overflow: hidden;
}

.creator-sidebar-card h3 {
    margin: 0;

    color: var(--creator-dark);

    font-size: 16px;
    line-height: 1.03;

    font-weight: 900;

    letter-spacing: -.4px;
}

.creator-sidebar-card p {
    margin: 15px 0 13px;

    color: #657080;

    font-size: 9px;
    line-height: 1.45;
}

.sidebar-heart {
    position: absolute;

    top: 58px;
    right: 13px;

    color: var(--creator-red);

    font-size: 15px;
}

.sidebar-button {
    width: 100%;
    min-height: 31px;

    border: 0;

    border-radius: 20px;

    color: #ffffff;

    background: var(--creator-red);

    font-size: 8px;

    font-weight: 800;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}

.sidebar-button:hover {
    color: #ffffff;

    background: var(--creator-red-dark);

    transform: translateY(-1px);
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

.creators-main {
    min-width: 0;

    width: 100%;
}


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

.hero {
    width: 100%;

    min-height: 335px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: stretch;

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 57% 48%,
            rgba(255,255,255,.95) 0%,
            rgba(255,245,247,.72) 31%,
            transparent 58%
        ),
        linear-gradient(
            100deg,
            #fff8f9 0%,
            #fff2f4 100%
        );

    isolation: isolate;
}

.hero-content {
    width: 56%;

    max-width: 620px;

    padding:
        34px
        0
        30px
        28px;

    position: relative;

    z-index: 10;

    box-sizing: border-box;
}

.hero-label {
    display: inline-flex;

    align-items: center;

    padding: 7px 13px;

    border:
        1px solid #f4aeb6;

    border-radius: 30px;

    color: var(--creator-red);

    background:
        rgba(255,255,255,.7);

    font-size: 11px;

    font-weight: 700;

    margin-bottom: 14px;
}

.hero h1 {
    margin: 0;

    font-size:
        clamp(42px, 4.3vw, 64px);

    line-height: .91;

    letter-spacing: -3.2px;

    font-weight: 900;

    color: var(--creator-dark);
}

.hero h1 span,
.hero h1 strong {
    color: var(--creator-red);
}

.hero h1 strong {
    font-weight: 900;
}

.hero h2 {
    margin: 17px 0 0;

    color: var(--creator-dark);

    font-size: 17px;

    line-height: 1.25;

    font-weight: 800;
}

.hero-description {
    max-width: 470px;

    margin: 11px 0 0;

    color: #647083;

    font-size: 13px;

    line-height: 1.55;
}

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 19px;
}

.primary-button,
.secondary-button {
    min-height: 42px;

    padding: 0 19px;

    border-radius: 10px;

    border: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    font-family: inherit;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.primary-button {
    color: #ffffff;

    background: var(--creator-red);

    box-shadow:
        0 9px 20px
        rgba(237,10,22,.18);
}

.primary-button:hover {
    color: #ffffff;

    background: var(--creator-red-dark);

    transform: translateY(-2px);

    box-shadow:
        0 13px 26px
        rgba(237,10,22,.24);
}

.primary-button i {
    font-size: 11px;
}

.secondary-button {
    color: var(--creator-red);

    background: #ffffff;

    box-shadow:
        0 4px 15px
        rgba(0,0,0,.04);
}

.secondary-button:hover {
    color: var(--creator-red);

    background: #fffafb;

    transform: translateY(-1px);
}

.play-icon {
    width: 19px;
    height: 19px;

    border-radius: 50%;

    background: var(--creator-pink-2);

    display: inline-flex;

    align-items: center;

    justify-content: center;
}

.play-icon i {
    color: var(--creator-red);

    font-size: 7px;

    margin-left: 1px;
}


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

.hero-art {
    position: absolute;

    right: 0;
    top: 0;

    width: 49%;
    height: 100%;

    overflow: hidden;

    z-index: 2;
}

.hero-red-shape {
    position: absolute;

    right: -80px;
    bottom: -150px;

    width: 570px;
    height: 390px;

    background: var(--creator-red);

    border-radius: 58% 0 0 0;

    transform: rotate(-3deg);
}

.hero-light-shape {
    position: absolute;

    right: 120px;
    top: -160px;

    width: 440px;
    height: 360px;

    background:
        rgba(255,255,255,.72);

    border-radius: 50%;

    transform: rotate(-16deg);
}

.creator-image {
    position: absolute;

    right: 8px;
    bottom: -8px;

    z-index: 5;

    height: 345px;

    width: auto;

    max-width: none;

    object-fit: contain;

    filter:
        drop-shadow(
            0 18px 25px
            rgba(0,0,0,.13)
        );
}


/* ============================================================
   SUMMARY CARDS
   ============================================================ */

.creator-summary {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.35fr)
        220px;

    gap: 13px;

    margin-top: 14px;
}

.summary-card {
    min-height: 112px;

    padding: 17px;

    box-sizing: border-box;

    display: flex;

    align-items: flex-start;

    gap: 13px;

    background: #ffffff;

    border:
        1px solid var(--creator-border);

    border-radius: 14px;

    box-shadow:
        0 7px 20px
        rgba(16,24,40,.035);
}

.points-card {
    background:
        linear-gradient(
            135deg,
            #fff7f8,
            #fffafa
        );
}

.summary-icon {
    width: 43px;
    height: 43px;

    min-width: 43px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;
}

.red-icon {
    color: #ffffff;

    background: var(--creator-red);
}

.pink-icon {
    color: var(--creator-red);

    background: #fff0f2;
}

.gold-icon {
    color: var(--creator-gold);

    background: #fff8dc;
}

.summary-content {
    min-width: 0;
}

.summary-label {
    display: block;

    color: #344054;

    font-size: 10px;

    line-height: 1.2;

    font-weight: 700;

    margin-bottom: 3px;
}

.summary-number {
    display: block;

    color: var(--creator-dark);

    font-size: 28px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -.8px;
}

.summary-value {
    display: block;

    color: var(--creator-red);

    font-size: 18px;

    line-height: 1.1;

    margin-top: 2px;
}

.summary-content small {
    display: block;

    margin-top: 7px;

    color: var(--creator-red);

    font-size: 9px;
}

.rank-number {
    display: block;

    color: var(--creator-dark);

    font-size: 19px;

    line-height: 1.1;

    font-weight: 900;
}

.rank-card small {
    display: block;

    margin-top: 9px;

    color: #697386;

    font-size: 9px;

    line-height: 1.35;
}


/* ============================================================
   PROGRESS
   ============================================================ */

.progress-bar {
    width: 100%;

    max-width: 280px;

    height: 8px;

    margin-top: 9px;

    overflow: hidden;

    border-radius: 20px;

    background: #eaedf1;
}

.progress-bar span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--creator-red);
}

.progress-info {
    display: flex;

    flex-wrap: wrap;

    gap: 8px 15px;

    margin-top: 6px;

    color: #697386;

    font-size: 8px;
}


/* ============================================================
   ACTION CARDS
   ============================================================ */

.creator-actions {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 13px;

    margin-top: 13px;
}

.action-card {
    min-height: 62px;

    border: 0;

    border-radius: 11px;

    padding: 13px 17px;

    display: flex;

    align-items: center;

    text-align: left;

    cursor: pointer;

    font-family: inherit;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.action-card:hover {
    transform: translateY(-2px);
}

.withdraw-action {
    color: #ffffff;

    background: var(--creator-red);

    box-shadow:
        0 8px 18px
        rgba(237,10,22,.14);
}

.withdraw-action:hover {
    color: #ffffff;

    box-shadow:
        0 12px 25px
        rgba(237,10,22,.21);
}

.bank-action {
    color: var(--creator-red);

    background: #fff1f3;
}

.bank-action:hover {
    color: var(--creator-red);

    background: #ffecef;
}

.action-icon {
    width: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;
}

.action-text {
    flex: 1;

    display: flex;

    flex-direction: column;

    min-width: 0;
}

.action-text strong {
    font-size: 12px;

    line-height: 1.2;
}

.action-text small {
    margin-top: 2px;

    font-size: 9px;

    line-height: 1.3;
}

.action-arrow {
    font-size: 10px;
}


/* ============================================================
   IMPORTANT INFORMATION
   ============================================================ */

.important-information {
    width: 100%;

    margin-top: 13px;

    padding: 13px 17px;

    box-sizing: border-box;

    border-radius: 12px;

    background: #fff0f2;

    display: grid;

    grid-template-columns:
        1.2fr
        1fr
        1fr
        1.35fr;

    align-items: center;

    gap: 20px;
}

.important-heading {
    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--creator-red);

    font-size: 11px;
}

.important-icon {
    width: 28px;
    height: 28px;

    border-radius: 50%;

    color: #ffffff;

    background: var(--creator-red);

    display: flex;

    align-items: center;

    justify-content: center;
}

.important-item {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.important-item span {
    color: #667085;

    font-size: 8px;
}

.important-item strong {
    color: var(--creator-dark);

    font-size: 10px;
}


/* ============================================================
   SECTION HEADINGS
   ============================================================ */

.how-it-works,
.more-value {
    margin-top: 28px;
}

.section-heading {
    width: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 15px;
}

.section-eyebrow {
    display: block;

    margin-bottom: 3px;

    color: var(--creator-red);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .2px;
}

.section-heading h2 {
    margin: 0;

    color: var(--creator-dark);

    font-size: 24px;

    line-height: 1.05;

    letter-spacing: -.8px;

    font-weight: 900;
}

.section-heading p {
    margin: 5px 0 0;

    color: #667085;

    font-size: 10px;

    line-height: 1.4;
}

.section-note {
    color: var(--creator-red);

    font-size: 10px;

    line-height: 1.05;

    font-style: italic;

    font-weight: 900;

    text-align: right;

    transform: rotate(-5deg);
}


/* ============================================================
   HOW IT WORKS
   ============================================================ */

.steps-grid {
    display: grid;

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

    gap: 13px;
}

.step-card {
    position: relative;

    min-height: 156px;

    padding:
        22px
        14px
        17px;

    box-sizing: border-box;

    border:
        1px solid #ececef;

    border-radius: 12px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 5px 18px
        rgba(16,24,40,.025);
}

.step-number {
    position: absolute;

    top: 10px;
    left: 11px;

    width: 23px;
    height: 23px;

    border-radius: 50%;

    color: #ffffff;

    background: var(--creator-red);

    font-size: 10px;

    font-weight: 800;

    display: flex;

    align-items: center;

    justify-content: center;
}

.step-icon {
    width: 51px;
    height: 51px;

    margin: 0 auto 10px;

    border-radius: 50%;

    color: var(--creator-red);

    background: #fff0f2;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;
}

.step-card h3 {
    margin: 0;

    color: var(--creator-dark);

    font-size: 12px;

    line-height: 1.2;

    font-weight: 900;
}

.step-card p {
    margin: 7px auto 0;

    max-width: 180px;

    color: #667085;

    font-size: 9px;

    line-height: 1.45;
}


/* ============================================================
   MORE VALUE
   ============================================================ */

.value-grid {
    display: grid;

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

    gap: 12px;
}

.value-card {
    min-height: 105px;

    padding: 15px 12px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    box-sizing: border-box;

    border:
        1px solid #eeeeef;

    border-radius: 11px;

    background: #ffffff;

    box-shadow:
        0 5px 16px
        rgba(16,24,40,.02);
}

.value-icon {
    width: 38px;
    height: 38px;

    min-width: 38px;

    border-radius: 50%;

    color: var(--creator-red);

    background: #fff0f2;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 17px;
}

.value-card h3 {
    margin: 2px 0 0;

    color: var(--creator-dark);

    font-size: 10px;

    line-height: 1.2;

    font-weight: 900;
}

.value-card p {
    margin: 5px 0 0;

    color: #667085;

    font-size: 8px;

    line-height: 1.4;
}


/* ============================================================
   FINAL CTA
   ============================================================ */

.creator-final-cta {
    position: relative;

    min-height: 83px;

    margin-top: 20px;

    padding: 15px 22px;

    box-sizing: border-box;

    overflow: hidden;

    border-radius: 13px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(255,255,255,.15),
            transparent 28%
        ),
        linear-gradient(
            105deg,
            #d90814,
            #ef0715 55%,
            #d90814
        );

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}

.creator-final-cta::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    left: -100px;
    bottom: -190px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);
}

.cta-message {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 22px;
}

.cta-message > span {
    color:
        rgba(255,255,255,.95);

    font-size: 9px;

    line-height: 1.1;

    font-style: italic;

    font-weight: 700;
}

.cta-message h2 {
    margin: 0;

    color: #ffffff;

    font-size: 17px;

    line-height: 1.05;

    font-weight: 900;
}

.cta-button {
    position: relative;

    z-index: 2;

    min-height: 39px;

    padding: 0 18px;

    border: 0;

    border-radius: 9px;

    color: var(--creator-red);

    background: #ffffff;

    font-family: inherit;

    font-size: 10px;

    font-weight: 900;

    display: flex;

    align-items: center;

    gap: 9px;

    white-space: nowrap;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.cta-button:hover {
    color: var(--creator-red);

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.15);
}


/* ============================================================
   EMPTY ANCHORS
   ============================================================ */

.creator-anchor {
    height: 1px;

    width: 100%;
}


/* ============================================================
   DISCY OVERRIDES
   ============================================================ */

.page-template-page-creators .container,
.page-template-page-creators .wrap,
.page-template-page-creators .site-container {
    max-width: none;
}

.page-template-page-creators .page-inner,
.page-template-page-creators .content-inner {
    padding-left: 0;
    padding-right: 0;
}

.page-template-page-creators .main-wrap {
    width: 100%;
}

.page-template-page-creators .page-content {
    margin-bottom: 0;
}

.page-template-page-creators .entry-content {
    margin: 0;
}


/* ============================================================
   DISCY LAYOUT OVERRIDE
   ============================================================ */

body:has(.fokona-creators-page) {
    overflow-x: hidden;
}


/* ------------------------------------------------------------
   REMOVE DISCY DEFAULT SIDEBARS
   ------------------------------------------------------------ */

body:has(.fokona-creators-page) #sidebar,
body:has(.fokona-creators-page) .sidebar,
body:has(.fokona-creators-page) .widget-area,
body:has(.fokona-creators-page) .main-sidebar,
body:has(.fokona-creators-page) .wpqa-sidebar,
body:has(.fokona-creators-page) .page-sidebar,
body:has(.fokona-creators-page) .site-sidebar,
body:has(.fokona-creators-page) .sidebar-wrap,
body:has(.fokona-creators-page) .sidebar-inner,
body:has(.fokona-creators-page) .right-sidebar,
body:has(.fokona-creators-page) .left-sidebar {
    display: none !important;
}


/* ------------------------------------------------------------
   FORCE DISCY MAIN AREA FULL WIDTH
   ------------------------------------------------------------ */

body:has(.fokona-creators-page) #main-content,
body:has(.fokona-creators-page) .main-content,
body:has(.fokona-creators-page) .content-area,
body:has(.fokona-creators-page) .page-content,
body:has(.fokona-creators-page) .site-content,
body:has(.fokona-creators-page) .content,
body:has(.fokona-creators-page) .main-wrap {
    width: 100% !important;

    max-width: 100% !important;

    flex: 0 0 100% !important;
}


/* ------------------------------------------------------------
   REMOVE BOOTSTRAP COLUMN RESTRICTIONS
   ------------------------------------------------------------ */

body:has(.fokona-creators-page) .row {
    margin-left: 0 !important;

    margin-right: 0 !important;
}

body:has(.fokona-creators-page)
.row > [class*="col-"] {

    width: 100% !important;

    max-width: 100% !important;

    flex: 0 0 100% !important;

    padding-left: 0 !important;

    padding-right: 0 !important;
}


/* ------------------------------------------------------------
   DISCY CONTAINER
   ------------------------------------------------------------ */

body:has(.fokona-creators-page) .container,
body:has(.fokona-creators-page) .container-fluid {

    width: 100% !important;

    max-width: 1440px !important;
}


/* ------------------------------------------------------------
   REMOVE UNWANTED PAGE PADDING
   ------------------------------------------------------------ */

body:has(.fokona-creators-page) .main-content,
body:has(.fokona-creators-page) .content-area {

    padding-left: 0 !important;

    padding-right: 0 !important;
}


/* ------------------------------------------------------------
   OUR CREATORS PAGE
   ------------------------------------------------------------ */

body:has(.fokona-creators-page)
.fokona-creators-page {

    display: block !important;

    width: 100% !important;

    max-width: 1440px !important;

    margin: 0 auto !important;

    padding:
        22px
        28px
        60px !important;

    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   OUR CREATOR LAYOUT
   ------------------------------------------------------------ */

body:has(.fokona-creators-page)
.creators-layout {

    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        150px
        minmax(0, 1fr) !important;

    gap: 22px !important;

    align-items: start !important;
}


/* ------------------------------------------------------------
   OUR SIDEBAR
   ------------------------------------------------------------ */

body:has(.fokona-creators-page)
.creators-sidebar {

    display: block !important;

    width: 150px !important;

    min-width: 150px !important;
}


/* ------------------------------------------------------------
   OUR MAIN CONTENT
   ------------------------------------------------------------ */

body:has(.fokona-creators-page)
.creators-main {

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;
}


/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

body:has(.fokona-creators-page)
.hero {

    width: 100% !important;

    max-width: none !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .fokona-creators-page {
        padding-left: 20px;

        padding-right: 20px;
    }

    .creators-layout {
        grid-template-columns:
            135px
            minmax(0, 1fr);

        gap: 17px;
    }

    .creators-sidebar {
        width: 135px;
    }

    .hero-content {
        width: 59%;

        padding-left: 23px;
    }

    .hero h1 {
        font-size:
            clamp(
                38px,
                4.6vw,
                54px
            );
    }

    .hero-art {
        width: 48%;
    }

    .creator-image {
        height: 315px;

        right: -5px;
    }

    .creator-summary {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1.2fr)
            180px;
    }

    .summary-card {
        padding: 14px;
    }

    .summary-number {
        font-size: 25px;
    }

    .steps-grid,
    .value-grid {
        gap: 9px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    /* --------------------------------------------------------
       DISCY STRUCTURE
       -------------------------------------------------------- */

    body:has(.fokona-creators-page) .container,
    body:has(.fokona-creators-page) .container-fluid {

        width: 100% !important;

        max-width: 100% !important;

        padding-left: 0 !important;

        padding-right: 0 !important;
    }

    body:has(.fokona-creators-page) .row {
        width: 100% !important;
    }

    body:has(.fokona-creators-page)
    .fokona-creators-page {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding:
            10px
            10px
            100px !important;
    }

    body:has(.fokona-creators-page)
    .creators-layout {

        display: block !important;

        width: 100% !important;
    }

    body:has(.fokona-creators-page)
    .creators-sidebar {

        display: none !important;
    }

    body:has(.fokona-creators-page)
    .creators-main {

        width: 100% !important;

        max-width: 100% !important;
    }


    /* --------------------------------------------------------
       HERO
       -------------------------------------------------------- */

    .hero {

        width: 100%;

        min-height: 450px;

        display: block;

        border-radius: 16px;
    }

    .hero-content {

        width: 100%;

        max-width: none;

        padding:
            20px
            18px
            0;

        position: relative;

        z-index: 20;
        margin-bottom: 1rem;
    }

    .hero-label {

        padding:
            7px
            11px;

        margin-bottom: 12px;

        font-size: 11px;

        line-height: 1.2;
    }

    .hero h1 {

        font-size:
            clamp(
                38px,
                10vw,
                46px
            );

        line-height: .94;

        letter-spacing: -2px;
    }

    .hero h2 {

        max-width: 350px;

        margin-top: 14px;

        font-size: 19px;

        line-height: 1.3;
    }

    .hero-description {

        max-width: 350px;

        margin-top: 9px;

        color: #647083;

        font-size: 15px;

        line-height: 1.55;
    }

    .hero-buttons {

        margin-top: 15px;

        gap: 9px;

        flex-wrap: wrap;
    }

    .primary-button,
    .secondary-button {

        min-height: 42px;

        padding:
            0 15px;

        border-radius: 9px;

        font-size: 12px;
    }

    .primary-button i {
        font-size: 11px;
    }

    .play-icon {

        width: 19px;

        height: 19px;
    }


    /* --------------------------------------------------------
       HERO ARTWORK
       -------------------------------------------------------- */

    .hero-art {

        width: 100%;

        height: 205px;

        top: auto;

        bottom: 0;

        overflow: hidden;

        z-index: 5;
    }

    .hero-red-shape {

        right: -105px;

        bottom: -135px;

        width: 430px;

        height: 280px;

        border-radius:
            58% 0 0 0;
    }

    .hero-light-shape {

        right: -50px;

        top: -130px;

        width: 330px;

        height: 270px;
    }

    .creator-image {

        height: 225px;

        right: -1px;

        bottom: -8px;
    }


    /* --------------------------------------------------------
       SUMMARY CARDS
       -------------------------------------------------------- */

    .creator-summary {

        grid-template-columns:
            1fr
            1fr;

        gap: 9px;

        margin-top: 10px;
    }

    .summary-card {

        min-height: 115px;

        padding: 13px;

        border-radius: 12px;

        gap: 10px;
    }

    .summary-card.withdrawal-card {

        grid-column: span 1;
    }

    .summary-card.rank-card {

        display: none;
    }

    .summary-icon {

        width: 38px;

        height: 38px;

        min-width: 38px;

        font-size: 16px;
    }

    .summary-label {

        font-size: 12px;

        line-height: 1.3;

        margin-bottom: 4px;
    }

    .summary-number {

        font-size: 23px;

        line-height: 1.05;
    }

    .summary-value {

        font-size: 17px;

        line-height: 1.2;
    }

    .summary-content small {

        font-size: 11px;

        line-height: 1.3;
    }

    .progress-bar {

        height: 7px;

        margin-top: 8px;
    }

    .progress-info {

        display: none;
    }


    /* --------------------------------------------------------
       ACTION CARDS
       -------------------------------------------------------- */

    .creator-actions {

        grid-template-columns:
            1fr
            1fr;

        gap: 9px;

        margin-top: 9px;
    }

    .action-card {

        min-height: 88px;

        padding: 12px;

        border-radius: 11px;

        display: grid;

        grid-template-columns:
            30px
            minmax(0, 1fr)
            12px;

        gap: 7px;
    }

    .action-icon {

        width: 30px;

        font-size: 20px;
    }

    .action-text strong {

        font-size: 12px;

        line-height: 1.25;
    }

    .action-text small {

        margin-top: 3px;

        font-size: 10px;

        line-height: 1.35;
    }

    .action-arrow {

        font-size: 10px;
    }


    /* --------------------------------------------------------
       IMPORTANT INFORMATION
       -------------------------------------------------------- */

    .important-information {

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

        gap: 8px;

        padding:
            14px
            11px;

        margin-top: 9px;

        border-radius: 11px;
    }

    .important-heading {

        grid-column:
            1 / -1;

        font-size: 13px;

        gap: 8px;
    }

    .important-icon {

        width: 26px;

        height: 26px;

        font-size: 15px;
    }

    .important-item {

        gap: 4px;
    }

    .important-item span {

        font-size: 10px;

        line-height: 1.3;
    }

    .important-item strong {

        font-size: 11px;

        line-height: 1.3;
    }

    .important-item:last-child {

        grid-column:
            1 / -1;
    }


    /* --------------------------------------------------------
       SECTION HEADINGS
       -------------------------------------------------------- */

    .how-it-works,
    .more-value {

        margin-top: 25px;
    }

    .section-heading {

        margin-bottom: 14px;

        align-items: flex-start;
    }

    .section-eyebrow {

        font-size: 10px;

        margin-bottom: 4px;
    }

    .section-heading h2 {

        font-size: 23px;

        line-height: 1.1;

        letter-spacing: -.6px;
    }

    .section-heading p {

        font-size: 12px;

        line-height: 1.45;
    }

    .section-note {

        display: none;
    }


    /* --------------------------------------------------------
       HOW IT WORKS
       -------------------------------------------------------- */

    .steps-grid {

        grid-template-columns:
            1fr
            1fr;

        gap: 9px;
    }

    .step-card {

        min-height: 170px;

        padding:
            24px
            11px
            14px;

        border-radius: 11px;
    }

    .step-number {

        top: 9px;

        left: 9px;

        width: 23px;

        height: 23px;

        font-size: 10px;
    }

    .step-icon {

        width: 48px;

        height: 48px;

        margin-bottom: 9px;

        font-size: 20px;
    }

    .step-card h3 {

        font-size: 12px;

        line-height: 1.25;
    }

    .step-card p {

        margin-top: 6px;

        font-size: 10px;

        line-height: 1.45;
    }


    /* --------------------------------------------------------
       MORE VALUE
       -------------------------------------------------------- */

    .value-grid {

        grid-template-columns:
            1fr
            1fr;

        gap: 9px;
    }

    .value-card {

        min-height: 110px;

        padding:
            12px
            10px;

        gap: 8px;

        border-radius: 10px;
    }

    .value-icon {

        width: 34px;

        height: 34px;

        min-width: 34px;

        font-size: 15px;
    }

    .value-card h3 {

        margin-top: 2px;

        font-size: 11px;

        line-height: 1.25;
    }

    .value-card p {

        margin-top: 5px;

        font-size: 9px;

        line-height: 1.45;
    }


    /* --------------------------------------------------------
       FINAL CTA
       -------------------------------------------------------- */

    .creator-final-cta {

        min-height: 110px;

        margin-top: 16px;

        padding: 14px;

        border-radius: 11px;

        gap: 10px;
    }

    .cta-message {

        gap: 10px;
    }

    .cta-message > span {

        font-size: 9px;

        line-height: 1.25;
    }

    .cta-message h2 {

        font-size: 15px;

        line-height: 1.1;
    }

    .cta-button {

        min-height: 39px;

        padding:
            0 12px;

        font-size: 10px;

        gap: 6px;
    }


    /* ========================================================
       MOBILE BOTTOM NAVIGATION
       ======================================================== */

    body:has(.fokona-creators-page) {

        padding-bottom: 85px !important;
    }

    .fokona-creators-page
    + .mobile-bottom-nav {

        position: fixed !important;

        left: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        width: 100% !important;

        height: 74px !important;

        display: flex !important;

        align-items: center !important;

        justify-content:
            space-around !important;

        background:
            #ffffff !important;

        border-top:
            1px solid #EAECF0 !important;

        z-index:
            2147483647 !important;

        box-shadow:
            0 -5px 20px
            rgba(16,24,40,.08);

        box-sizing:
            border-box !important;
    }

    .fokona-creators-page
    + .mobile-bottom-nav
    .bottom-nav-item {

        width: 20% !important;

        height: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 5px;

        color:
            #98A2B3 !important;

        text-decoration:
            none !important;

        font-size:
            11px !important;

        font-weight:
            600 !important;

        line-height: 1.1;
    }

    .fokona-creators-page
    + .mobile-bottom-nav
    .bottom-nav-item i {

        font-size:
            20px !important;

        line-height: 1 !important;
    }

    .fokona-creators-page
    + .mobile-bottom-nav
    .bottom-nav-item.active {

        color:
            var(--creator-red) !important;
    }

    .fokona-creators-page
    + .mobile-bottom-nav
    .bottom-nav-ask {

        width: 20% !important;

        height: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        color:
            #98A2B3 !important;

        text-decoration:
            none !important;

        font-size:
            11px !important;

        font-weight:
            600 !important;

        line-height: 1.1;
    }

    .fokona-creators-page
    + .mobile-bottom-nav
    .bottom-nav-ask span {

        width: 48px !important;

        height: 48px !important;

        margin-top: -27px;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border:
            4px solid #ffffff;

        border-radius: 50%;

        background:
            var(--creator-red);

        color:
            #ffffff;

        font-size: 22px;

        line-height: 1;

        box-shadow:
            0 5px 15px
            rgba(229,57,53,.30);
    }

    .fokona-creators-page
    + .mobile-bottom-nav
    .bottom-nav-ask small {

        margin-top: 3px;

        font-size: 11px;

        line-height: 1;
    }
}


/* ============================================================
   SMALL MOBILE
   320px – 400px
   ============================================================ */

@media (max-width: 400px) {

    .fokona-creators-page {

        padding-left: 8px !important;

        padding-right: 8px !important;

        padding-bottom: 100px !important;
    }


    /* --------------------------------------------------------
       HERO
       -------------------------------------------------------- */

    .hero {

        min-height: 435px;
    }

    .hero-content {

        padding:
            18px
            16px
            0;
    }

    .hero-label {

        font-size: 10px;
    }

    .hero h1 {

        font-size: 36px;

        letter-spacing: -1.7px;
    }

    .hero h2 {

        font-size: 17px;
    }

    .hero-description {

        /*
         * DO NOT make this tiny.
         */

        font-size: 14px;

        line-height: 1.5;

        max-width: 300px;
    }

    .hero-buttons {

        gap: 7px;
    }

    .primary-button,
    .secondary-button {

        min-height: 40px;

        padding:
            0 12px;

        font-size: 11px;
    }

    .hero-art {

        height: 195px;
    }

    .creator-image {

        height: 215px;

        right: -3px;
    }


    /* --------------------------------------------------------
       SUMMARY
       -------------------------------------------------------- */

    .summary-card {

        min-height: 110px;

        padding: 11px;

        gap: 8px;
    }

    .summary-icon {

        width: 35px;

        height: 35px;

        min-width: 35px;

        font-size: 15px;
    }

    .summary-label {

        font-size: 11px;
    }

    .summary-number {

        font-size: 21px;
    }

    .summary-value {

        font-size: 15px;
    }

    .summary-content small {

        font-size: 10px;
    }


    /* --------------------------------------------------------
       ACTIONS
       -------------------------------------------------------- */

    .action-card {

        min-height: 84px;

        padding: 10px;

        grid-template-columns:
            27px
            minmax(0, 1fr)
            10px;

        gap: 6px;
    }

    .action-icon {

        width: 27px;

        font-size: 18px;
    }

    .action-text strong {

        font-size: 11px;
    }

    .action-text small {

        font-size: 9px;

        line-height: 1.35;
    }


    /* --------------------------------------------------------
       IMPORTANT INFORMATION
       -------------------------------------------------------- */

    .important-information {

        padding:
            12px
            9px;

        gap: 7px;
    }

    .important-heading {

        font-size: 12px;
    }

    .important-item span {

        font-size: 9px;
    }

    .important-item strong {

        font-size: 10px;
    }


    /* --------------------------------------------------------
       SECTION HEADINGS
       -------------------------------------------------------- */

    .section-eyebrow {

        font-size: 9px;
    }

    .section-heading h2 {

        font-size: 21px;
    }

    .section-heading p {

        font-size: 11px;
    }


    /* --------------------------------------------------------
       STEPS
       -------------------------------------------------------- */

    .step-card {

        min-height: 165px;

        padding:
            23px
            9px
            12px;
    }

    .step-icon {

        width: 44px;

        height: 44px;

        font-size: 18px;
    }

    .step-card h3 {

        font-size: 11px;
    }

    .step-card p {

        font-size: 9px;

        line-height: 1.4;
    }


    /* --------------------------------------------------------
       VALUE
       -------------------------------------------------------- */

    .value-card {

        min-height: 103px;

        padding:
            10px
            8px;

        gap: 7px;
    }

    .value-icon {

        width: 31px;

        height: 31px;

        min-width: 31px;

        font-size: 14px;
    }

    .value-card h3 {

        font-size: 10px;
    }

    .value-card p {

        font-size: 8.5px;

        line-height: 1.4;
    }


    /* --------------------------------------------------------
       CTA
       -------------------------------------------------------- */

    .creator-final-cta {

        min-height: 105px;

        padding: 11px;
    }

    .cta-message {

        gap: 7px;
    }

    .cta-message > span {

        display: none;
    }

    .cta-message h2 {

        font-size: 13px;
    }

    .cta-button {

        min-height: 37px;

        padding:
            0 10px;

        font-size: 9px;
    }


    /* --------------------------------------------------------
       BOTTOM NAV
       -------------------------------------------------------- */

    .fokona-creators-page
    + .mobile-bottom-nav {

        height: 70px !important;
    }

    .fokona-creators-page
    + .mobile-bottom-nav
    .bottom-nav-item {

        font-size:
            10px !important;

        gap: 4px;
    }

    .fokona-creators-page
    + .mobile-bottom-nav
    .bottom-nav-item i {

        font-size:
            18px !important;
    }

    .fokona-creators-page
    + .mobile-bottom-nav
    .bottom-nav-ask {

        font-size:
            10px !important;
    }
}


/* ============================================================
   VERY SMALL PHONES
   320px AND BELOW
   ============================================================ */

@media (max-width: 340px) {

    .fokona-creators-page {

        padding-left: 6px !important;

        padding-right: 6px !important;
    }

    .hero {

        min-height: 425px;
    }

    .hero-content {
        
        padding-left: 14px;

        padding-right: 14px;
    }

    .hero h1 {

        font-size: 34px;
    }

    .hero h2 {

        font-size: 16px;
    }

    .hero-description {

        font-size: 13px;
    }

    .primary-button,
    .secondary-button {

        font-size: 10px;

        padding-left: 10px;

        padding-right: 10px;
    }

    .summary-card {

        padding: 9px;

        gap: 7px;
    }

    .summary-icon {

        width: 32px;

        height: 32px;

        min-width: 32px;
    }

    .summary-label {

        font-size: 10px;
    }

    .summary-number {

        font-size: 19px;
    }

    .summary-value {

        font-size: 14px;
    }

    .action-card {

        padding: 8px;

        grid-template-columns:
            24px
            minmax(0, 1fr)
            8px;
    }

    .action-icon {

        width: 24px;

        font-size: 17px;
    }

    .action-text strong {

        font-size: 10px;
    }

    .action-text small {

        font-size: 8px;
    }

    .important-item span {

        font-size: 8px;
    }

    .important-item strong {

        font-size: 9px;
    }

    .section-heading h2 {

        font-size: 20px;
    }

    .step-card h3 {

        font-size: 10px;
    }

    .step-card p {

        font-size: 8.5px;
    }

    .value-card h3 {

        font-size: 9px;
    }

    .value-card p {

        font-size: 8px;
    }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.creator-nav:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.action-card:focus-visible,
.sidebar-button:focus-visible,
.cta-button:focus-visible {

    outline:
        3px solid
        rgba(237,10,22,.25);

    outline-offset: 2px;
}


/* ============================================================
   TOUCH / MOBILE USABILITY
   ============================================================ */

@media (max-width: 767px) {

    .creator-nav,
    .primary-button,
    .secondary-button,
    .action-card,
    .sidebar-button,
    .cta-button,
    .bottom-nav-item,
    .bottom-nav-ask {

        -webkit-tap-highlight-color:
            transparent;
    }

    button,
    a {

        touch-action: manipulation;
    }

    .primary-button,
    .secondary-button,
    .action-card,
    .cta-button {

        cursor: pointer;
    }
}


/* ============================================================
   REDUCE MOTION
   ============================================================ */

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

    .creator-nav,
    .primary-button,
    .secondary-button,
    .action-card,
    .sidebar-button,
    .cta-button {

        transition: none;
    }
}

/* ============================================================
   FOKONA CREATORS — FINAL MOBILE HERO FIX
   Prevent hero artwork from overlapping text/buttons
   ============================================================ */

@media (max-width: 767px) {

    body:has(.fokona-creators-page) .hero {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* TEXT AREA */
    body:has(.fokona-creators-page) .hero-content {
        position: relative !important;
        z-index: 20 !important;

        width: 100% !important;
        max-width: none !important;

        padding: 20px 18px 18px !important;

        box-sizing: border-box !important;
    }

    /* HEADING */
    body:has(.fokona-creators-page) .hero h1 {
        font-size: clamp(36px, 10vw, 44px) !important;
        line-height: .94 !important;
        letter-spacing: -2px !important;
    }

    /* SUBHEADING */
    body:has(.fokona-creators-page) .hero h2 {
        max-width: 340px !important;
        margin-top: 13px !important;

        font-size: 17px !important;
        line-height: 1.25 !important;
    }

    /* DESCRIPTION */
    body:has(.fokona-creators-page) .hero-description {
        max-width: 340px !important;
        margin-top: 9px !important;

        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    /* BUTTONS */
    body:has(.fokona-creators-page) .hero-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;

        margin-top: 15px !important;
    }

    body:has(.fokona-creators-page) .primary-button,
    body:has(.fokona-creators-page) .secondary-button {
        min-height: 38px !important;
        padding: 0 13px !important;

        font-size: 10px !important;
        white-space: nowrap !important;
    }

    /* ========================================================
       CREATOR IMAGE
       IMPORTANT: NO MORE ABSOLUTE POSITIONING ON MOBILE
       ======================================================== */

    body:has(.fokona-creators-page) .hero-art {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        height: 205px !important;

        flex: 0 0 205px !important;

        overflow: hidden !important;

        z-index: 5 !important;
    }

    body:has(.fokona-creators-page) .creator-image {
        position: absolute !important;

        right: -1px !important;
        bottom: -8px !important;

        height: 225px !important;
        width: auto !important;

        max-width: none !important;

        z-index: 5 !important;
    }

    body:has(.fokona-creators-page) .hero-red-shape {
        position: absolute !important;

        right: -105px !important;
        bottom: -135px !important;

        width: 430px !important;
        height: 280px !important;
    }

    body:has(.fokona-creators-page) .hero-light-shape {
        position: absolute !important;

        right: -50px !important;
        top: -130px !important;

        width: 330px !important;
        height: 270px !important;
    }
}


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

@media (max-width: 400px) {

    body:has(.fokona-creators-page) .hero-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    body:has(.fokona-creators-page) .hero h1 {
        font-size: 35px !important;
    }

    body:has(.fokona-creators-page) .hero h2 {
        font-size: 16px !important;
    }

    body:has(.fokona-creators-page) .hero-description {
        font-size: 14px !important;
    }

    body:has(.fokona-creators-page) .hero-art {
        height: 190px !important;
        flex-basis: 190px !important;
    }

    body:has(.fokona-creators-page) .creator-image {
        height: 210px !important;
    }
}
/* ============================================================
   FOKONA CREATORS — FUNCTIONAL ACCOUNT SECTIONS
   ============================================================ */

.creator-notice {
    margin-top: 16px;
    padding: 13px 16px;
    border-radius: 11px;
    background: #f0fff4;
    border: 1px solid #b7ebc6;
    color: #176b35;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.creator-login-card,
.creator-tool-card,
.creator-history-card,
.creator-faq {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid var(--creator-border);
    border-radius: 14px;
    box-shadow: 0 7px 20px rgba(16,24,40,.035);
}

.creator-login-card {
    margin-top: 18px;
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.creator-login-card h2,
.creator-tool-card h2,
.creator-history-card h2,
.creator-faq h2 {
    margin: 0;
    color: var(--creator-dark);
    font-size: 22px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.6px;
}

.creator-login-card p,
.creator-tool-card > p,
.creator-history-card .section-heading p,
.creator-faq .section-heading p {
    margin: 7px 0 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.5;
}

.creator-login-button {
    text-decoration: none;
    flex-shrink: 0;
}

.creator-tools-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-top: 18px;
}

.creator-tool-card {
    padding: 19px;
}

.creator-tool-heading {
    display: flex;
    align-items: center;
    gap: 11px;
}

.tool-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.creator-form {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.creator-form label {
    color: #344054;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
}

.creator-form input,
.creator-form select,
.creator-form textarea {
    width: 100%;
    min-height: 40px;
    padding: 0 11px;
    box-sizing: border-box;
    border: 1px solid #dfe2e7;
    border-radius: 9px;
    background: #ffffff;
    color: var(--creator-dark);
    font-family: inherit;
    font-size: 12px;
    outline: none;
}

.creator-form input:focus,
.creator-form select:focus,
.creator-form textarea:focus {
    border-color: var(--creator-red);
    box-shadow: 0 0 0 3px rgba(237,10,22,.08);
}

.creator-form small {
    color: #667085;
    font-size: 9px;
    line-height: 1.45;
    margin-bottom: 5px;
}

.creator-form .primary-button,
.creator-form .secondary-button {
    min-height: 40px;
    width: fit-content;
    padding: 0 15px;
    text-decoration: none;
}

.creator-history-card,
.creator-faq {
    margin-top: 18px;
    padding: 20px;
}

.creator-history-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 12px;
}

.creator-history-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
}

.creator-history-table th,
.creator-history-table td {
    padding: 11px 9px;
    border-bottom: 1px solid #eef0f3;
    text-align: left;
    color: #475467;
    font-size: 10px;
    vertical-align: middle;
}

.creator-history-table th {
    color: #667085;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.creator-history-table td strong {
    color: var(--creator-dark);
}

.creator-empty {
    text-align: center !important;
    padding: 24px !important;
    color: #98a2b3 !important;
}

.creator-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 800;
}

.creator-status-pending { background: #fff7df; color: #946200; }
.creator-status-approved { background: #eef5ff; color: #175cd3; }
.creator-status-paid { background: #ecfdf3; color: #087443; }
.creator-status-rejected { background: #fff0f2; color: #b42318; }

.creator-faq-list {
    display: grid;
    gap: 8px;
    margin-top: 13px;
}

.creator-faq-list details {
    border: 1px solid #eceef2;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.creator-faq-list summary {
    position: relative;
    padding: 14px 38px 14px 14px;
    cursor: pointer;
    color: var(--creator-dark);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 800;
    list-style: none;
}

.creator-faq-list summary::-webkit-details-marker { display: none; }
.creator-faq-list summary::after {
    content: '+';
    position: absolute;
    right: 14px;
    top: 11px;
    color: var(--creator-red);
    font-size: 17px;
    font-weight: 500;
}
.creator-faq-list details[open] summary::after { content: '−'; }

.creator-faq-list details p {
    margin: 0;
    padding: 0 14px 14px;
    color: #667085;
    font-size: 10px;
    line-height: 1.55;
}

@media (max-width: 767px) {
    .creator-notice { font-size: 11px; }

    .creator-login-card,
    .creator-tools-grid {
        display: flex;
        flex-direction: column;
    }

    .creator-login-card {
        align-items: stretch;
        padding: 17px;
        gap: 14px;
    }

    .creator-login-card h2,
    .creator-tool-card h2,
    .creator-history-card h2,
    .creator-faq h2 {
        font-size: 19px;
    }

    .creator-login-card p,
    .creator-tool-card > p,
    .creator-history-card .section-heading p,
    .creator-faq .section-heading p {
        font-size: 11px;
    }

    .creator-tools-grid {
        gap: 11px;
        margin-top: 14px;
    }

    .creator-tool-card,
    .creator-history-card,
    .creator-faq {
        padding: 15px;
    }

    .creator-form input,
    .creator-form select,
    .creator-form textarea {
        min-height: 43px;
        font-size: 13px;
    }

    .creator-form label { font-size: 10px; }
    .creator-form small { font-size: 10px; }

    .creator-form .primary-button,
    .creator-form .secondary-button {
        width: 100%;
        min-height: 43px;
        font-size: 11px;
    }

    .creator-history-card,
    .creator-faq { margin-top: 14px; }

    .creator-history-table th,
    .creator-history-table td {
        padding: 10px 8px;
        font-size: 10px;
    }

    .creator-faq-list summary { font-size: 11px; }
    .creator-faq-list details p { font-size: 10px; }
}


/* ============================================================
   FOKONA CREATORS — CONSOLIDATED ACCESS / RESPONSIVE OVERRIDES
   This block intentionally comes last so it wins over older rules.
   ============================================================ */

.fokona-creators-page .creator-summary-logged-out {
    display: block !important;
    width: 100% !important;
    margin-top: 14px !important;
}

.fokona-creators-page .creator-access-card {
    width: 100% !important;
    min-height: 190px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    padding: 28px 32px !important;
    background: linear-gradient(135deg, #ffffff 0%, #fff8f9 100%) !important;
    border: 1px solid #ececf1 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(16,24,40,.06) !important;
    overflow: hidden !important;
}

.fokona-creators-page .creator-access-icon {
    flex: 0 0 62px !important;
    width: 62px !important;
    height: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #fff0f2 !important;
    color: #ed0a16 !important;
    font-size: 24px !important;
    box-shadow: inset 0 0 0 7px #ffffff, 0 5px 18px rgba(237,10,22,.10) !important;
}

.fokona-creators-page .creator-access-content {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.fokona-creators-page .creator-access-eyebrow {
    display: block !important;
    margin: 0 0 7px !important;
    color: #ed0a16 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    line-height: 1.2 !important;
}

.fokona-creators-page .creator-access-content h2 {
    margin: 0 !important;
    max-width: 720px !important;
    color: #071329 !important;
    font-size: 29px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -.6px !important;
}

.fokona-creators-page .creator-access-content p {
    margin: 10px 0 16px !important;
    max-width: 680px !important;
    color: #667085 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.fokona-creators-page .creator-access-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.fokona-creators-page .creator-access-primary,
.fokona-creators-page .creator-access-secondary {
    box-sizing: border-box !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 10px !important;
    padding: 0 18px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}

.fokona-creators-page .creator-access-primary {
    color: #ffffff !important;
    background: #ed0a16 !important;
    box-shadow: 0 7px 16px rgba(237,10,22,.18) !important;
}

.fokona-creators-page .creator-access-secondary {
    color: #ed0a16 !important;
    background: #ffffff !important;
    border: 1px solid #f2cdd1 !important;
}

.fokona-creators-page .creator-access-primary:hover,
.fokona-creators-page .creator-access-secondary:hover {
    transform: translateY(-1px) !important;
}

.fokona-creators-page .creator-access-primary:hover {
    box-shadow: 0 10px 20px rgba(237,10,22,.23) !important;
}

.fokona-creators-page .important-information {
    box-sizing: border-box !important;
}

/* ============================================================
   DESKTOP / TABLET CLEANUP
   ============================================================ */

@media (min-width: 768px) {
    .fokona-creators-page .creators-main {
        min-width: 0 !important;
    }

    .fokona-creators-page .important-information {
        grid-template-columns: minmax(210px, 1.2fr) repeat(3, minmax(140px, 1fr)) !important;
        align-items: center !important;
    }
}

/* ============================================================
   MOBILE — FULL REBUILD OF THE FLOW
   ============================================================ */

@media (max-width: 767px) {
    html, body {
        overflow-x: hidden !important;
    }

    body:has(.fokona-creators-page) {
        overflow-x: hidden !important;
    }

    body:has(.fokona-creators-page) .fokona-creators-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 12px 92px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body:has(.fokona-creators-page) .creators-layout,
    body:has(.fokona-creators-page) .creators-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
    }

    body:has(.fokona-creators-page) .creators-sidebar {
        display: none !important;
    }

    /* Header/hero spacing */
    body:has(.fokona-creators-page) .hero {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 0 0 16px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    body:has(.fokona-creators-page) .hero-content {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        padding: 22px 18px 18px !important;
    }

    body:has(.fokona-creators-page) .hero-label {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    body:has(.fokona-creators-page) .hero h1 {
        margin: 7px 0 0 !important;
        font-size: clamp(31px, 9.8vw, 42px) !important;
        line-height: .98 !important;
        letter-spacing: -1.7px !important;
    }

    body:has(.fokona-creators-page) .hero h2 {
        margin: 11px 0 0 !important;
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    body:has(.fokona-creators-page) .hero-description {
        margin: 8px 0 0 !important;
        max-width: 100% !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    body:has(.fokona-creators-page) .hero-buttons {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }

    body:has(.fokona-creators-page) .hero-buttons > * {
        min-width: 0 !important;
    }

    body:has(.fokona-creators-page) .primary-button,
    body:has(.fokona-creators-page) .secondary-button {
        min-height: 40px !important;
        padding: 0 12px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    body:has(.fokona-creators-page) .hero-art {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 178px !important;
        flex: 0 0 178px !important;
        overflow: hidden !important;
    }

    body:has(.fokona-creators-page) .creator-image {
        position: absolute !important;
        right: -4px !important;
        bottom: -7px !important;
        width: auto !important;
        max-width: none !important;
        height: 195px !important;
    }

    /* Logged-out dashboard: ONE card, never two summary cards */
    body:has(.fokona-creators-page) .creator-summary-logged-out {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
    }

    body:has(.fokona-creators-page) .creator-access-card {
        min-height: 0 !important;
        display: block !important;
        width: 100% !important;
        padding: 22px 17px 19px !important;
        box-sizing: border-box !important;
        border-radius: 16px !important;
        text-align: center !important;
    }

    body:has(.fokona-creators-page) .creator-access-icon {
        width: 52px !important;
        height: 52px !important;
        margin: 0 auto 13px !important;
        font-size: 20px !important;
    }

    body:has(.fokona-creators-page) .creator-access-eyebrow {
        margin-bottom: 6px !important;
        font-size: 9px !important;
        letter-spacing: .09em !important;
    }

    body:has(.fokona-creators-page) .creator-access-content h2 {
        max-width: 330px !important;
        margin: 0 auto !important;
        font-size: 23px !important;
        line-height: 1.12 !important;
        letter-spacing: -.6px !important;
    }

    body:has(.fokona-creators-page) .creator-access-content h2::after {
        content: "" !important;
        display: block !important;
        width: 42px !important;
        height: 3px !important;
        margin: 12px auto 0 !important;
        background: #ed0a16 !important;
        border-radius: 99px !important;
    }

    body:has(.fokona-creators-page) .creator-access-content p {
        max-width: 310px !important;
        margin: 12px auto 16px !important;
        font-size: 13px !important;
        line-height: 1.48 !important;
    }

    body:has(.fokona-creators-page) .creator-access-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
    }

    body:has(.fokona-creators-page) .creator-access-primary,
    body:has(.fokona-creators-page) .creator-access-secondary {
        width: 100% !important;
        min-height: 44px !important;
        padding: 0 14px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }

    /* Logged-out: don't show account actions that cannot work */
    body:has(.fokona-creators-page) .creator-actions {
        display: none !important;
    }

    /* Important information becomes a clean 2-column mobile card */
    body:has(.fokona-creators-page) .important-information {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
        margin-top: 10px !important;
        padding: 16px !important;
        border-radius: 15px !important;
        box-sizing: border-box !important;
    }

    body:has(.fokona-creators-page) .important-heading {
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 0 13px !important;
        font-size: 13px !important;
    }

    body:has(.fokona-creators-page) .important-icon {
        width: 27px !important;
        height: 27px !important;
        min-width: 27px !important;
        font-size: 14px !important;
    }

    body:has(.fokona-creators-page) .important-item {
        min-width: 0 !important;
        padding: 8px 8px 8px 0 !important;
        gap: 4px !important;
        box-sizing: border-box !important;
    }

    body:has(.fokona-creators-page) .important-item:nth-of-type(3),
    body:has(.fokona-creators-page) .important-item:nth-of-type(4) {
        border-top: 1px solid rgba(0,0,0,.06) !important;
    }

    body:has(.fokona-creators-page) .important-item span {
        display: block !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    body:has(.fokona-creators-page) .important-item strong {
        display: block !important;
        margin-top: 4px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        word-break: normal !important;
    }

    /* Keep payout method across the full width */
    body:has(.fokona-creators-page) .important-item:last-child {
        grid-column: 1 / -1 !important;
        border-top: 1px solid rgba(0,0,0,.06) !important;
        padding-top: 10px !important;
        padding-right: 0 !important;
    }

    /* Logged-in summary is still responsive */
    body:has(.fokona-creators-page) .creator-summary:not(.creator-summary-logged-out) {
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
        margin-top: 10px !important;
    }

    body:has(.fokona-creators-page) .creator-summary:not(.creator-summary-logged-out) .rank-card {
        grid-column: 1 / -1 !important;
        display: flex !important;
    }

    body:has(.fokona-creators-page) .summary-card {
        min-width: 0 !important;
        min-height: 118px !important;
        padding: 13px !important;
        gap: 9px !important;
        border-radius: 13px !important;
    }

    body:has(.fokona-creators-page) .summary-icon {
        width: 37px !important;
        height: 37px !important;
        min-width: 37px !important;
        font-size: 15px !important;
    }

    body:has(.fokona-creators-page) .summary-label {
        font-size: 11px !important;
    }

    body:has(.fokona-creators-page) .summary-number {
        font-size: 22px !important;
    }

    body:has(.fokona-creators-page) .summary-value {
        font-size: 15px !important;
    }

    body:has(.fokona-creators-page) .summary-content small {
        font-size: 10px !important;
    }

    body:has(.fokona-creators-page) .progress-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        font-size: 9px !important;
        line-height: 1.3 !important;
    }

    /* Section spacing and readable text */
    body:has(.fokona-creators-page) .how-it-works,
    body:has(.fokona-creators-page) .more-value,
    body:has(.fokona-creators-page) .creator-final-cta {
        width: 100% !important;
        max-width: 100% !important;
    }

    body:has(.fokona-creators-page) .section-heading {
        gap: 10px !important;
    }

    body:has(.fokona-creators-page) .section-heading h2 {
        font-size: 22px !important;
        line-height: 1.15 !important;
    }

    body:has(.fokona-creators-page) .section-heading p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    body:has(.fokona-creators-page) .steps-grid,
    body:has(.fokona-creators-page) .value-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
    }

    body:has(.fokona-creators-page) .step-card,
    body:has(.fokona-creators-page) .value-card {
        min-width: 0 !important;
    }

    body:has(.fokona-creators-page) .creator-final-cta {
        box-sizing: border-box !important;
    }
}

/* ============================================================
   SMALL PHONES — 320–400px
   ============================================================ */

@media (max-width: 400px) {
    body:has(.fokona-creators-page) .fokona-creators-page {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    body:has(.fokona-creators-page) .hero-content {
        padding: 19px 15px 16px !important;
    }

    body:has(.fokona-creators-page) .hero h1 {
        font-size: 32px !important;
        letter-spacing: -1.5px !important;
    }

    body:has(.fokona-creators-page) .hero h2 {
        font-size: 14px !important;
    }

    body:has(.fokona-creators-page) .hero-description {
        font-size: 12.5px !important;
    }

    body:has(.fokona-creators-page) .primary-button,
    body:has(.fokona-creators-page) .secondary-button {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 10px !important;
    }

    body:has(.fokona-creators-page) .hero-art {
        height: 160px !important;
        flex-basis: 160px !important;
    }

    body:has(.fokona-creators-page) .creator-image {
        height: 177px !important;
    }

    body:has(.fokona-creators-page) .creator-access-card {
        padding: 19px 14px 16px !important;
    }

    body:has(.fokona-creators-page) .creator-access-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 18px !important;
    }

    body:has(.fokona-creators-page) .creator-access-content h2 {
        font-size: 21px !important;
    }

    body:has(.fokona-creators-page) .creator-access-content p {
        font-size: 12px !important;
    }

    body:has(.fokona-creators-page) .creator-access-primary,
    body:has(.fokona-creators-page) .creator-access-secondary {
        min-height: 42px !important;
        font-size: 11px !important;
    }

    body:has(.fokona-creators-page) .important-information {
        padding: 14px !important;
    }

    body:has(.fokona-creators-page) .important-heading {
        font-size: 12px !important;
    }

    body:has(.fokona-creators-page) .important-item span {
        font-size: 9px !important;
    }

    body:has(.fokona-creators-page) .important-item strong {
        font-size: 11px !important;
    }

    body:has(.fokona-creators-page) .steps-grid,
    body:has(.fokona-creators-page) .value-grid {
        gap: 7px !important;
    }
}

@media (max-width: 340px) {
    body:has(.fokona-creators-page) .fokona-creators-page {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    body:has(.fokona-creators-page) .creator-access-content h2 {
        font-size: 19px !important;
    }

    body:has(.fokona-creators-page) .creator-access-content p {
        font-size: 11px !important;
    }

    body:has(.fokona-creators-page) .important-information {
        padding: 12px !important;
    }
}

/* =========================================================
   FOKONA CREATORS — STEP 3 BANK DETAILS
   ========================================================= */
.fokona-creators-page .creator-bank-section{margin:28px 0;padding:28px;background:#fff;border:1px solid #eee;border-radius:18px;box-shadow:0 8px 28px rgba(0,0,0,.04)}
.fokona-creators-page .creator-section-heading{margin-bottom:20px}.fokona-creators-page .creator-section-heading h2{margin:4px 0 6px;font-size:24px}.fokona-creators-page .creator-section-heading p{margin:0;color:#777}.fokona-creators-page .section-eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;color:#e53935}.fokona-creators-page .creator-bank-form{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end}.fokona-creators-page .creator-bank-form label{display:flex;flex-direction:column;gap:7px}.fokona-creators-page .creator-bank-form label span{font-size:13px;font-weight:700}.fokona-creators-page .creator-bank-form input,.fokona-creators-page .creator-bank-form select{width:100%;height:48px;padding:0 14px;border:1px solid #ddd;border-radius:10px;background:#fff;font:inherit;box-sizing:border-box}.fokona-creators-page .creator-bank-save{height:48px;border:0;cursor:pointer}.fokona-creators-page .creator-bank-notice{padding:13px 15px;border-radius:10px;margin-bottom:16px;font-size:14px}.fokona-creators-page .creator-bank-notice.success{background:#eefaf2;color:#18733a}.fokona-creators-page .creator-bank-notice.error{background:#fff2f2;color:#b42318}.fokona-creators-page .creator-bank-saved{margin-top:18px;padding:16px;border-radius:12px;background:#fafafa;border:1px solid #eee;display:flex;flex-direction:column;gap:5px}.fokona-creators-page .creator-bank-saved span{font-size:12px;color:#18733a;font-weight:700}.fokona-creators-page .creator-bank-saved strong{font-size:15px}.fokona-creators-page .creator-bank-saved small{color:#777}.fokona-creators-page .creator-bank-login{padding:16px;border-radius:10px;background:#fafafa;color:#666}@media(max-width:767px){.fokona-creators-page .creator-bank-section{padding:20px;margin:20px 0;border-radius:15px}.fokona-creators-page .creator-section-heading h2{font-size:20px}.fokona-creators-page .creator-bank-form{grid-template-columns:1fr;gap:13px}.fokona-creators-page .creator-bank-form input,.fokona-creators-page .creator-bank-form select,.fokona-creators-page .creator-bank-save{height:46px}.fokona-creators-page .creator-bank-save{width:100%}}


/* ============================================================
   CREATOR BANK DETAILS MODAL — STEP 3
   Additive only: existing Creator layout and navigation preserved.
   ============================================================ */

.creator-bank-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.creator-bank-modal.is-open {
    display: flex;
}

.creator-bank-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 19, 41, .62);
    backdrop-filter: blur(5px);
}

.creator-bank-modal-dialog {
    position: relative;
    width: min(100%, 500px);
    max-height: min(90vh, 760px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 26px;
    border: 1px solid rgba(233, 233, 238, .95);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(7, 19, 41, .25);
    animation: fokonaBankModalIn .22s ease-out;
}

@keyframes fokonaBankModalIn {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.creator-bank-modal-close {
    position: absolute;
    top: 17px;
    right: 17px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    background: #f5f6f8;
    cursor: pointer;
    font-size: 14px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.creator-bank-modal-close:hover {
    color: var(--creator-red);
    background: #fff0f2;
    transform: rotate(4deg);
}

.creator-bank-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 42px;
}

.creator-bank-modal-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--creator-red);
    background: #fff0f2;
    font-size: 20px;
}

.creator-bank-modal-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--creator-red);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
}

.creator-bank-modal-header h2 {
    margin: 0;
    color: var(--creator-dark);
    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;
}

.creator-bank-modal-header p {
    margin: 5px 0 0;
    color: var(--creator-muted);
    font-size: 11px;
    line-height: 1.45;
}

.creator-bank-notice {
    margin-top: 18px;
    padding: 11px 13px;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 11px;
    line-height: 1.45;
}

.creator-bank-notice-success {
    color: #176b3a;
    background: #ecfdf3;
    border: 1px solid #b7ebc9;
}

.creator-bank-notice-error {
    color: #a61b29;
    background: #fff1f3;
    border: 1px solid #f5bcc3;
}

.creator-bank-saved-card {
    margin-top: 18px;
    padding: 15px;
    border: 1px solid #e8eaee;
    border-radius: 13px;
    background: #fafbfc;
}

.creator-bank-saved-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: #667085;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.creator-bank-verified {
    color: #16834a;
    text-transform: none;
    letter-spacing: 0;
}

.creator-bank-saved-card > strong,
.creator-bank-saved-card > span,
.creator-bank-saved-card > code {
    display: block;
}

.creator-bank-saved-card > strong {
    color: var(--creator-dark);
    font-size: 14px;
    font-weight: 850;
}

.creator-bank-saved-card > span {
    margin-top: 3px;
    color: #667085;
    font-size: 11px;
}

.creator-bank-saved-card > code {
    margin-top: 7px;
    color: var(--creator-red);
    font-size: 11px;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 1px;
}

.creator-bank-form {
    margin-top: 19px;
}

.creator-bank-field {
    margin-bottom: 14px;
}

.creator-bank-field label {
    display: block;
    margin-bottom: 6px;
    color: #344054;
    font-size: 10px;
    font-weight: 800;
}

.creator-bank-field input,
.creator-bank-field select {
    width: 100%;
    min-height: 45px;
    padding: 0 13px;
    box-sizing: border-box;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    outline: none;
    color: #172033;
    background: #ffffff;
    font-family: inherit;
    font-size: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.creator-bank-field input:focus,
.creator-bank-field select:focus {
    border-color: var(--creator-red);
    box-shadow: 0 0 0 3px rgba(237, 10, 22, .08);
}

.creator-bank-field small {
    display: block;
    margin-top: 5px;
    color: #8a94a6;
    font-size: 9px;
    line-height: 1.4;
}

.creator-bank-submit {
    width: 100%;
    min-height: 46px;
    margin-top: 3px;
    border: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    background: var(--creator-red);
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(237, 10, 22, .16);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.creator-bank-submit:hover {
    color: #ffffff;
    background: var(--creator-red-dark);
    transform: translateY(-1px);
    box-shadow: 0 11px 24px rgba(237, 10, 22, .22);
}

.creator-bank-security {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #edf0f3;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #7b8494;
    font-size: 9px;
    line-height: 1.45;
}

.creator-bank-security i {
    flex-shrink: 0;
    color: #16834a;
    margin-top: 1px;
}

body.creator-bank-modal-lock {
    overflow: hidden;
}

@media (max-width: 767px) {
    .creator-bank-modal {
        padding: 12px;
        align-items: flex-end;
    }

    .creator-bank-modal-dialog {
        width: 100%;
        max-height: 92vh;
        padding: 21px 17px 18px;
        border-radius: 18px 18px 14px 14px;
    }

    .creator-bank-modal-header {
        gap: 11px;
        padding-right: 38px;
    }

    .creator-bank-modal-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 12px;
        font-size: 17px;
    }

    .creator-bank-modal-header h2 {
        font-size: 20px;
    }

    .creator-bank-modal-header p {
        font-size: 10px;
    }

    .creator-bank-modal-close {
        top: 13px;
        right: 13px;
        width: 33px;
        height: 33px;
    }

    .creator-bank-field input,
    .creator-bank-field select {
        min-height: 44px;
    }
}

/* =========================================================
   FOKONA CREATORS — CONTRIBUTION STATISTICS
   ========================================================= */
.creator-contribution-section {
    margin-top: 24px;
    padding: 24px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 18px;
}
.creator-contribution-heading { margin-bottom: 18px; }
.creator-contribution-heading h2 { margin-bottom: 6px; }
.creator-contribution-heading p { margin: 0; }
.creator-contribution-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.creator-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 88px;
    padding: 16px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
}
.creator-stat-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff0f1;
    color: #ed111b;
}
.creator-stat-card strong {
    display: block;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
    color: #111827;
}
.creator-stat-card div span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #777;
}
@media (max-width: 900px) {
    .creator-contribution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .creator-contribution-section { padding: 18px; border-radius: 15px; }
    .creator-contribution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .creator-stat-card { min-height: 78px; padding: 12px; gap: 9px; }
    .creator-stat-icon { width: 36px; height: 36px; flex-basis: 36px; }
    .creator-stat-card strong { font-size: 20px; }
    .creator-stat-card div span { font-size: 11px; }
}

/* ============================================================
   FOKONA CREATORS — PROTECTED DESKTOP MOBILE-NAV HIDE
   DO NOT REMOVE.
   The Creator mobile bottom navigation must be hidden on desktop
   and shown only on mobile.
   ============================================================ */

@media (min-width: 768px) {
    .fokona-creators-page + .mobile-bottom-nav {
        display: none !important;
    }
}


/* ============================================================
   FOKONA CREATORS — WITHDRAWAL MODAL
   Additive styles only. Existing Creator layout/navigation preserved.
   ============================================================ */

.creator-withdraw-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.creator-withdraw-modal.is-open {
    display: flex;
}

.creator-withdraw-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 19, 41, .62);
    backdrop-filter: blur(5px);
}

.creator-withdraw-modal-dialog {
    position: relative;
    z-index: 2;
    width: min(100%, 520px);
    max-height: min(90vh, 760px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 26px;
    border: 1px solid rgba(233, 233, 238, .95);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(7, 19, 41, .25);
    animation: fokonaWithdrawModalIn .22s ease-out;
}

@keyframes fokonaWithdrawModalIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.creator-withdraw-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    background: #f5f6f8;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.creator-withdraw-modal-close:hover {
    color: #ffffff;
    background: var(--creator-red);
    transform: rotate(4deg);
}

.creator-withdraw-modal-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-right: 42px;
}

.creator-withdraw-modal-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--creator-red);
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(237, 10, 22, .18);
}

.creator-withdraw-modal-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--creator-red);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
}

.creator-withdraw-modal-header h2 {
    margin: 0;
    color: var(--creator-dark);
    font-size: 25px;
    line-height: 1.1;
    font-weight: 850;
}

.creator-withdraw-modal-header p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.45;
}

.creator-withdraw-balance {
    margin-top: 20px;
    padding: 16px 17px;
    border: 1px solid #eceff3;
    border-radius: 13px;
    background: #fafbfc;
}

.creator-withdraw-balance-label {
    display: block;
    color: #667085;
    font-size: 10px;
    font-weight: 700;
}

.creator-withdraw-balance strong {
    display: block;
    margin-top: 4px;
    color: var(--creator-dark);
    font-size: 25px;
    line-height: 1.15;
    font-weight: 850;
}

.creator-withdraw-balance small {
    display: block;
    margin-top: 5px;
    color: #8a94a6;
    font-size: 9px;
}

.creator-withdraw-notice {
    margin-top: 15px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 10px;
    line-height: 1.45;
}

.creator-withdraw-notice-error {
    color: #b42318;
    background: #fff2f2;
    border: 1px solid #ffd5d2;
}

.creator-withdraw-notice-success {
    color: #18733a;
    background: #eefaf2;
    border: 1px solid #cdebd8;
}

.creator-withdraw-bank-warning,
.creator-withdraw-bank-card {
    margin-top: 15px;
    padding: 14px;
    border-radius: 12px;
}

.creator-withdraw-bank-warning {
    color: #7a4a00;
    background: #fff8e8;
    border: 1px solid #f4dfaa;
    font-size: 10px;
    line-height: 1.45;
}

.creator-withdraw-bank-card {
    border: 1px solid #e8eaee;
    background: #ffffff;
}

.creator-withdraw-bank-label {
    display: block;
    color: #8a94a6;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
}

.creator-withdraw-bank-card strong {
    display: block;
    margin-top: 4px;
    color: var(--creator-dark);
    font-size: 13px;
    font-weight: 850;
}

.creator-withdraw-bank-card small {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 9px;
}

.creator-withdraw-bank-link {
    margin-top: 7px;
    padding: 0;
    border: 0;
    color: var(--creator-red);
    background: transparent;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.creator-withdraw-form {
    margin-top: 17px;
}

.creator-withdraw-field label {
    display: block;
    margin-bottom: 7px;
    color: #344054;
    font-size: 10px;
    font-weight: 800;
}

.creator-withdraw-input-wrap {
    display: flex;
    align-items: center;
    min-height: 50px;
    border: 1px solid #dfe3e8;
    border-radius: 11px;
    background: #ffffff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.creator-withdraw-input-wrap:focus-within {
    border-color: var(--creator-red);
    box-shadow: 0 0 0 3px rgba(237, 10, 22, .08);
}

.creator-withdraw-currency {
    padding-left: 14px;
    color: #667085;
    font-size: 13px;
    font-weight: 800;
}

.creator-withdraw-input-wrap input {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 13px 0 8px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--creator-dark);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    box-sizing: border-box;
}

.creator-withdraw-field small {
    display: block;
    margin-top: 6px;
    color: #8a94a6;
    font-size: 9px;
    line-height: 1.4;
}

.creator-withdraw-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    border: 0;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    background: var(--creator-red);
    font-family: inherit;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(237, 10, 22, .16);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.creator-withdraw-submit:hover:not(:disabled) {
    color: #ffffff;
    background: var(--creator-red-dark);
    transform: translateY(-1px);
    box-shadow: 0 11px 24px rgba(237, 10, 22, .22);
}

.creator-withdraw-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

.creator-withdraw-security {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #edf0f3;
    color: #7b8494;
    font-size: 9px;
    line-height: 1.45;
}

body.creator-withdraw-modal-lock {
    overflow: hidden;
}

@media (max-width: 767px) {
    .creator-withdraw-modal {
        padding: 12px;
        align-items: flex-end;
    }

    .creator-withdraw-modal-dialog {
        width: 100%;
        max-height: 92vh;
        padding: 21px 17px 18px;
        border-radius: 18px 18px 14px 14px;
    }

    .creator-withdraw-modal-header {
        gap: 11px;
        padding-right: 38px;
    }

    .creator-withdraw-modal-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 12px;
        font-size: 17px;
    }

    .creator-withdraw-modal-header h2 {
        font-size: 21px;
    }

    .creator-withdraw-balance {
        margin-top: 16px;
        padding: 14px;
    }
}

/* =========================================================
   TOTAL POINTS — POINT + NAIRA VALUE SAME LINE
   ========================================================= */

.points-value-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: nowrap;
    margin-top: 4px;
}

.points-value-line .summary-number,
.points-value-line .summary-value {
    margin: 0;
    line-height: 1.15;
}

.points-value-line .points-equals {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.65;
    margin: 0 2px;
}

.points-card .summary-content > small {
    display: block;
    margin-top: 7px;
}


/* Mobile */
@media (max-width: 767px) {

    .points-value-line {
        gap: 6px;
    }

    .points-value-line .points-equals {
        font-size: 17px;
    }

}

/* =========================================================
   TOTAL POINTS + VALUE — SAME LINE
   ========================================================= */

.points-value-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: nowrap;
    line-height: 1.15;
}

.points-value-line .summary-number,
.points-value-line .summary-value {
    display: inline;
    margin: 0;
    padding: 0;
}

.points-value-line .summary-number {
    white-space: nowrap;
}

.points-value-line .summary-value {
    white-space: nowrap;
}

/* Mobile */
@media (max-width: 767px) {

    .points-value-line {
        gap: 5px;
    }

}

/* =========================================================
   FOKONA CREATORS
   TOTAL POINTS — KEEP POINTS AND VALUE ON SAME LINE
   ========================================================= */

.fokona-creators-page .points-card .summary-content {
    display: block !important;
}

.fokona-creators-page .points-card .summary-number,
.fokona-creators-page .points-card .summary-value {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: baseline !important;
}

.fokona-creators-page .points-card .summary-value {
    margin-left: 4px !important;
}

.fokona-creators-page .points-card .summary-content small {
    display: block !important;
    margin-top: 4px !important;
}

/* =========================================================
   FOKONA CREATORS — POINT VALUE DIVIDER
   ========================================================= */

.points-card .summary-content {
    display: flex;
    flex-direction: column;
}

.points-card .summary-number,
.points-card .summary-value {
    display: inline;
}

.points-card .summary-number {
    margin-right: 4px;
}

.points-card .summary-value {
    margin-left: 0;
}

/* Divider underneath points + naira value */
.points-card .summary-content::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #e5e7eb;
    margin-top: 12px;
    margin-bottom: 10px;
}

/* Conversion text below the divider */
.points-card .summary-content small {
    display: block;
    margin-top: 0;
}