/*
 * Goldencodes Challenge — Frontend Styles
 * Used by shortcodes, Elementor widgets, and the login-info widget.
 * RTL-first, theme-agnostic.
 */

/* ══════════════════════════════════════════════════════
   CSS Custom Properties
   ══════════════════════════════════════════════════════ */
:root {
    --gc-f-primary:       #0d6efd;
    --gc-f-primary-dark:  #0a58ca;
    --gc-f-success:       #198754;
    --gc-f-warning:       #f0ad4e;
    --gc-f-danger:        #dc3545;
    --gc-f-surface:       #ffffff;
    --gc-f-surface-alt:   #f8f9fa;
    --gc-f-border:        #e2e8f0;
    --gc-f-text:          #1a202c;
    --gc-f-text-muted:    #718096;
    --gc-f-radius:        12px;
    --gc-f-radius-sm:     8px;
    --gc-f-shadow:        0 4px 20px rgba(0,0,0,.08);
    --gc-f-shadow-sm:     0 2px 8px rgba(0,0,0,.06);
    --gc-f-font:          inherit, 'Tahoma', 'Arial', sans-serif;
}

/* ══════════════════════════════════════════════════════
   Scoped reset
   ══════════════════════════════════════════════════════ */
.gc-shortcode,
.gc-widget {
    font-family: var(--gc-f-font);
    color:       var(--gc-f-text);
    direction:   rtl;
    text-align:  right;
    box-sizing:  border-box;
    line-height: 1.6;
}

.gc-shortcode *,
.gc-widget * {
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════
   Notices
   ══════════════════════════════════════════════════════ */
.gc-empty-notice,
.gc-login-notice,
.gc-widget-notice,
.gc-widget-empty {
    padding:       24px;
    background:    var(--gc-f-surface-alt);
    border:        1px dashed var(--gc-f-border);
    border-radius: var(--gc-f-radius);
    text-align:    center;
    color:         var(--gc-f-text-muted);
    font-size:     14px;
}

.gc-login-notice a,
.gc-widget-notice a {
    color:           var(--gc-f-primary);
    text-decoration: none;
    font-weight:     600;
}

/* ══════════════════════════════════════════════════════
   Challenge Card (My Challenges / Active)
   ══════════════════════════════════════════════════════ */
.gc-my-challenges,
.gc-widget--active-challenges {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   20px;
}

.gc-challenge-card {
    background:    var(--gc-f-surface);
    border:        1px solid var(--gc-f-border);
    border-radius: var(--gc-f-radius);
    box-shadow:    var(--gc-f-shadow-sm);
    overflow:      hidden;
    transition:    transform .2s, box-shadow .2s;
}

.gc-challenge-card:hover {
    transform:  translateY(-2px);
    box-shadow: var(--gc-f-shadow);
}

.gc-challenge-card__header {
    padding:         16px 18px 12px;
    border-bottom:   1px solid var(--gc-f-border);
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             8px;
}

.gc-challenge-card__title {
    font-size:   16px;
    font-weight: 700;
    margin:      0;
    color:       var(--gc-f-text);
}

.gc-challenge-card__badges {
    display:    flex;
    gap:        6px;
    flex-wrap:  wrap;
    flex-shrink: 0;
}

.gc-challenge-card__footer {
    padding:    12px 18px;
    color:      var(--gc-f-text-muted);
    font-size:  12px;
    border-top: 1px solid var(--gc-f-border);
    background: var(--gc-f-surface-alt);
}

/* ── Stages list inside card ─────────────────────────── */
.gc-stages-list {
    padding: 12px 18px;
}

.gc-stage-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 12px;
    border-radius:   var(--gc-f-radius-sm);
    margin-bottom:   6px;
    font-size:       13.5px;
    border:          1px solid var(--gc-f-border);
    transition:      background .15s;
}

.gc-stage-item:last-child { margin-bottom: 0; }

.gc-stage-item--passed    { background: rgba(25,135,84,.06);  border-color: rgba(25,135,84,.2); }
.gc-stage-item--failed    { background: rgba(220,53,69,.06);  border-color: rgba(220,53,69,.2); }
.gc-stage-item--active    { background: rgba(13,110,253,.06); border-color: rgba(13,110,253,.2); }
.gc-stage-item--waiting_for_admin { background: rgba(240,173,78,.06); }

.gc-stage-item__title {
    font-weight: 600;
    color:       var(--gc-f-text);
}

/* ── Stage Progress Bar ──────────────────────────────── */
.gc-stage-progress {
    padding:     12px 18px 8px;
    display:     flex;
    align-items: center;
    gap:         10px;
}

.gc-stage-progress__bar {
    flex:          1;
    height:        6px;
    background:    var(--gc-f-border);
    border-radius: 100px;
    overflow:      hidden;
}

.gc-stage-progress__fill {
    height:        100%;
    background:    linear-gradient(90deg, var(--gc-f-primary), var(--gc-f-success));
    border-radius: 100px;
    transition:    width .5s ease;
}

.gc-stage-progress__label {
    font-size:  12px;
    color:      var(--gc-f-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   Badges
   ══════════════════════════════════════════════════════ */
.gc-badge {
    display:       inline-block;
    padding:       3px 9px;
    border-radius: 100px;
    font-size:     11.5px;
    font-weight:   700;
    white-space:   nowrap;
}

.gc-badge--balance {
    background: var(--gc-f-surface-alt);
    border:     1px solid var(--gc-f-border);
    color:      var(--gc-f-text);
}

.badge.bg-primary        { background: var(--gc-f-primary) !important; padding: 1px 10px;border-radius: 30px;}
.badge.bg-success        { background: #bdffe0 !important; padding: 1px 10px;border-radius: 30px;color: #087337;}
.badge.bg-danger         { background: var(--gc-f-danger)  !important; padding: 1px 10px;border-radius: 30px;}
.badge.bg-warning        { background: var(--gc-f-warning) !important; padding: 1px 10px;border-radius: 30px;}
.badge.bg-warning.text-dark { color: #212529 !important; }


/* ══════════════════════════════════════════════════════
   Challenge Detail
   ══════════════════════════════════════════════════════ */
.gc-challenge-detail,
.gc-widget--challenge-detail {
    max-width: 900px;
}

.gc-challenge-detail__thumbnail img,
.gc-widget--challenge-detail .gc-challenge-detail__thumbnail img {
    width:         100%;
    max-height:    320px;
    object-fit:    cover;
    border-radius: var(--gc-f-radius);
    margin-bottom: 20px;
}

.gc-challenge-detail__title {
    font-size:     26px;
    font-weight:   800;
    margin-bottom: 12px;
    color:         var(--gc-f-text);
}

.gc-challenge-detail__desc {
    font-size:     15px;
    color:         var(--gc-f-text-muted);
    margin-bottom: 28px;
    line-height:   1.8;
}

.gc-challenge-detail__stages h4,
.gc-challenge-detail__balances h4 {
    font-size:     17px;
    font-weight:   700;
    margin-bottom: 16px;
    color:         var(--gc-f-text);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gc-f-border);
}

/* ── Stage Box ───────────────────────────────────────── */
.gc-stage-box {
    display:       flex;
    gap:           16px;
    padding:       18px;
    background:    var(--gc-f-surface);
    border:        1px solid var(--gc-f-border);
    border-radius: var(--gc-f-radius);
    margin-bottom: 12px;
    box-shadow:    var(--gc-f-shadow-sm);
}

.gc-stage-box__num {
    min-width:       36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--gc-f-primary);
    color:           #fff;
    font-size:       16px;
    font-weight:     800;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.gc-stage-box__title {
    font-size:     15px;
    font-weight:   700;
    color:         var(--gc-f-text);
    margin-bottom: 10px;
}

.gc-stage-box__fields {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   8px;
}

.gc-stage-box__field {
    background:    var(--gc-f-surface-alt);
    border:        1px solid var(--gc-f-border);
    border-radius: var(--gc-f-radius-sm);
    padding:       8px 12px;
    display:       flex;
    flex-direction: column;
    gap:           3px;
}

.gc-stage-box__field-key {
    font-size:  11px;
    color:      var(--gc-f-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.gc-stage-box__field-val {
    font-size:  14px;
    font-weight: 700;
    color:      var(--gc-f-text);
}

/* ── Balance Cards ───────────────────────────────────── */
.gc-balance-cards {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   16px;
}

.gc-balance-card {
    background:    var(--gc-f-surface);
    border:        2px solid var(--gc-f-border);
    border-radius: var(--gc-f-radius);
    padding:       20px;
    text-align:    center;
    transition:    border-color .2s, transform .2s, box-shadow .2s;
}

.gc-balance-card:hover {
    border-color: var(--gc-f-primary);
    transform:    translateY(-2px);
    box-shadow:   var(--gc-f-shadow);
}

.gc-balance-card__amount {
    font-size:     24px;
    font-weight:   800;
    color:         var(--gc-f-primary);
    margin-bottom: 6px;
}

.gc-balance-card__price {
    font-size:     18px;
    font-weight:   700;
    color:         var(--gc-f-text);
    margin-bottom: 12px;
}

.gc-balance-card__risks {
    list-style:    none;
    padding:       0;
    margin:        0 0 16px;
    font-size:     12.5px;
    color:         var(--gc-f-text-muted);
}

.gc-balance-card__risks li {
    padding: 3px 0;
}

/* ══════════════════════════════════════════════════════
   Challenge List (shortcode)
   ══════════════════════════════════════════════════════ */
.gc-challenge-list {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   20px;
}

.gc-challenge-list__item {
    background:    var(--gc-f-surface);
    border:        1px solid var(--gc-f-border);
    border-radius: var(--gc-f-radius);
    overflow:      hidden;
    box-shadow:    var(--gc-f-shadow-sm);
    display:       flex;
    flex-direction: column;
    transition:    transform .2s, box-shadow .2s;
}

.gc-challenge-list__item:hover {
    transform:  translateY(-2px);
    box-shadow: var(--gc-f-shadow);
}

.gc-challenge-list__thumb img {
    width:      100%;
    height:     160px;
    object-fit: cover;
}

.gc-challenge-list__body {
    padding: 16px 18px;
    flex:    1;
}

.gc-challenge-list__body h3 {
    font-size:     16px;
    font-weight:   700;
    margin-bottom: 8px;
    color:         var(--gc-f-text);
}

.gc-challenge-list__meta {
    display:     flex;
    gap:         12px;
    font-size:   12.5px;
    color:       var(--gc-f-text-muted);
    margin-bottom: 8px;
}

.gc-challenge-list__price {
    font-size:  16px;
    font-weight: 700;
    color:      var(--gc-f-primary);
}

.gc-challenge-list__btn {
    margin: 0 18px 18px;
    text-align: center;
}

/* ══════════════════════════════════════════════════════
   Challenge Info Widget
   ══════════════════════════════════════════════════════ */
.gc-widget--challenge-info {
    max-width: 500px;
}

.gc-info-card {
    background:    var(--gc-f-surface);
    border:        1px solid var(--gc-f-border);
    border-radius: var(--gc-f-radius);
    overflow:      hidden;
    box-shadow:    var(--gc-f-shadow-sm);
}

.gc-info-card__row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         12px 18px;
    border-bottom:   1px solid var(--gc-f-border);
    gap:             12px;
}

.gc-info-card__row:last-child { border-bottom: none; }

.gc-info-card__label {
    font-size:  13px;
    color:      var(--gc-f-text-muted);
    font-weight: 600;
    flex-shrink: 0;
}

.gc-info-card__value {
    font-size:  14px;
    font-weight: 600;
    color:      var(--gc-f-text);
    text-align: left;
}

.gc-info-card__value--highlight {
    font-size:  16px;
    color:      var(--gc-f-primary);
}

/* ══════════════════════════════════════════════════════
   Login Credentials Widget
   ══════════════════════════════════════════════════════ */
.gc-widget--login-info {
    max-width: 560px;
}

.gc-login-card__badge {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-bottom: 14px;
}

.gc-login-card__stage {
    font-size:  13px;
    color:      var(--gc-f-text-muted);
    font-weight: 600;
}

.gc-login-card {
    background:    var(--gc-f-surface);
    border:        1px solid var(--gc-f-border);
    border-radius: var(--gc-f-radius);
    overflow:      hidden;
    box-shadow:    var(--gc-f-shadow-sm);
}

.gc-login-row {
    display:         flex;
    align-items:     center;
    padding:         13px 18px;
    border-bottom:   1px solid var(--gc-f-border);
    gap:             12px;
}

.gc-login-row:last-child { border-bottom: none; }

.gc-login-row__label {
    font-size:   12.5px;
    color:       var(--gc-f-text-muted);
    font-weight: 700;
    min-width:   100px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.gc-login-row__value {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex:        1;
}

.gc-login-row__text {
    font-size:   14px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    color:       var(--gc-f-text);
    flex:        1;
    direction:   ltr;
    text-align:  left;
}

.gc-login-row__link {
    font-size:       13px;
    color:           var(--gc-f-primary);
    text-decoration: none;
    word-break:      break-all;
    direction:       ltr;
    text-align:      left;
}

.gc-login-row__link:hover { text-decoration: underline; }

.gc-copy-btn,
.gc-reveal-btn {
    background:    none;
    border:        1px solid var(--gc-f-border);
    border-radius: 6px;
    padding:       5px 8px;
    cursor:        pointer;
    color:         var(--gc-f-text-muted);
    transition:    background .15s, color .15s;
    flex-shrink:   0;
}

.gc-copy-btn:hover,
.gc-reveal-btn:hover {
    background: var(--gc-f-primary);
    color:      #fff;
    border-color: var(--gc-f-primary);
}

.gc-copy-btn.gc-copied {
    background:   var(--gc-f-success);
    color:        #fff;
    border-color: var(--gc-f-success);
}

.gc-login-note {
    margin-top:    16px;
    padding:       14px 18px;
    background:    rgba(13,110,253,.05);
    border:        1px solid rgba(13,110,253,.15);
    border-radius: var(--gc-f-radius-sm);
    font-size:     13.5px;
    color:         var(--gc-f-text);
    line-height:   1.7;
}

/* ══════════════════════════════════════════════════════
   Button
   ══════════════════════════════════════════════════════ */
.gc-btn {
    display:         inline-block;
    padding:         10px 22px;
    border-radius:   8px;
    font-size:       14px;
    font-weight:     600;
    text-decoration: none;
    cursor:          pointer;
    border:          none;
    transition:      background .15s, transform .1s;
    text-align:      center;
}

.gc-btn--primary {
    background: var(--gc-f-primary);
    color:      #fff;
}

.gc-btn--primary:hover {
    background: var(--gc-f-primary-dark);
    color:      #fff;
    transform:  translateY(-1px);
}

/* ══════════════════════════════════════════════════════
   Elementor editor placeholder
   ══════════════════════════════════════════════════════ */
.gc-elementor-placeholder {
    background:    linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
    border:        2px dashed #aec6ef;
    border-radius: var(--gc-f-radius);
    padding:       36px 24px;
    text-align:    center;
    color:         #4a6fa5;
    direction:     rtl;
}

.gc-elementor-placeholder [class*="eicon-"] {
    font-size:     36px;
    margin-bottom: 10px;
    display:       block;
    opacity:       0.6;
}

.gc-elementor-placeholder p {
    font-size:   15px;
    margin:      6px 0 4px;
}

.gc-elementor-placeholder small {
    font-size: 12.5px;
    color:     #7a9ac9;
}

/* ══════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .gc-my-challenges,
    .gc-widget--active-challenges,
    .gc-challenge-list {
        grid-template-columns: 1fr;
    }

    .gc-balance-cards {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .gc-stage-box {
        flex-direction: column;
    }
}