/* ============================================================
   Yekee Lottery Pro — Frontend CSS
   ============================================================ */

/* Root defaults (overridden by per-shortcode CSS vars) */
.yl-wrap {
    font-family: var(--yl-font, 'Kanit', sans-serif);
    font-size:   var(--yl-font-size, 15px);
    color:       var(--yl-color, #2c3e50);
    box-sizing:  border-box;
    margin:      0 0 24px;
}
.yl-wrap *, .yl-wrap *::before, .yl-wrap *::after {
    box-sizing: inherit;
}

/* ── Section Header ──────────────────────────────────────── */
.yl-section-header {
    display:         flex;
    align-items:     center;
    gap:             10px;
    margin-bottom:   14px;
    padding:         10px 14px;
    background:      var(--yl-header-bg, #b22222);
    border-radius:   10px;
    color:           var(--yl-header-color, #fff);
    flex-wrap:       wrap;
}
.yl-section-title {
    font-weight: 600;
    font-size:   1.1em;
    flex:        1;
}
.yl-section-date {
    font-size:   0.85em;
    opacity:     0.85;
}
.yl-refresh-btn {
    background:    rgba(255,255,255,0.2);
    border:        none;
    color:         var(--yl-header-color, #fff);
    border-radius: 50%;
    width:         30px;
    height:        30px;
    cursor:        pointer;
    font-size:     16px;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    transition:    transform 0.4s ease, background 0.2s;
    line-height:   1;
}
.yl-refresh-btn:hover {
    background:  rgba(255,255,255,0.35);
    transform:   rotate(180deg);
}
.yl-refresh-btn.spinning {
    animation: yl-spin 0.7s linear infinite;
}
@keyframes yl-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Main Title ──────────────────────────────────────────── */
.yl-main-title {
    font-size:   1.2em;
    font-weight: 700;
    margin:      0 0 14px;
    padding:     10px 14px;
    background:  var(--yl-header-bg, #b22222);
    color:       var(--yl-header-color, #fff);
    border-radius: 10px;
}

/* ── Grid ────────────────────────────────────────────────── */
.yl-row {
    display:   flex;
    flex-wrap: wrap;
    margin:    0 -6px;
}
.yl-grid-item {
    padding: 0 6px 12px;
}

/* Bootstrap-like col classes (scoped) */
.yl-wrap .col-12         { width: 100%; }
.yl-wrap .col-sm-6       { width: 100%; }
.yl-wrap .col-md-4       { width: 100%; }
.yl-wrap .col-lg-3       { width: 100%; }

@media (min-width: 576px) {
    .yl-wrap .col-sm-6   { width: 50%; }
}
@media (min-width: 768px) {
    .yl-wrap .col-md-4   { width: 33.333%; }
    .yl-wrap .col-md-6   { width: 50%; }
}
@media (min-width: 992px) {
    .yl-wrap .col-lg-3   { width: 25%; }
    .yl-wrap .col-lg-4   { width: 33.333%; }
    .yl-wrap .col-lg-6   { width: 50%; }
}

/* ── Card ────────────────────────────────────────────────── */
.yl-card {
    background:    var(--yl-bg, #fff);
    border:        1px solid var(--yl-border, #e0e0e0);
    border-radius: 12px;
    overflow:      hidden;
    box-shadow:    var(--yl-shadow, 0 2px 12px rgba(0,0,0,0.10));
    transition:    box-shadow 0.2s, transform 0.2s;
    height:        100%;
    display:       flex;
    flex-direction: column;
}
.yl-card:hover {
    box-shadow:  0 6px 24px rgba(0,0,0,0.15);
    transform:   translateY(-2px);
}

/* Card Header */
.yl-card-header {
    background:    var(--yl-header-bg, #b22222);
    color:         var(--yl-header-color, #fff);
    padding:       8px 12px;
    font-weight:   600;
    font-size:     0.9em;
    text-align:    center;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           6px;
    flex-wrap:     wrap;
}

/* Card Body */
.yl-card-body {
    padding:   10px 8px;
    flex:      1;
    display:   flex;
    flex-direction: column;
    gap:       8px;
}

/* Main prize (รางวัลที่ 1) */
.yl-prize-main {
    text-align: center;
    padding:    6px 0;
}
.yl-prize-main .yl-number {
    font-size:   2em;
    font-weight: 700;
}

/* Prize row (2 columns) */
.yl-prize-row {
    display: flex;
    gap:     6px;
}
.yl-prize-row-single .yl-prize-cell {
    max-width: 50%;
    margin:    0 auto;
}
.yl-prize-cell {
    flex:         1;
    text-align:   center;
    background:   rgba(0,0,0,0.025);
    border-radius: 8px;
    padding:      6px 4px;
    border:       1px solid var(--yl-border, #e0e0e0);
}

/* ── Numbers ─────────────────────────────────────────────── */
.yl-number {
    display:     block;
    color:       var(--yl-number-color, #c0392b);
    font-weight: 700;
    font-size:   1.4em;
    letter-spacing: 2px;
    animation:   yl-fadein 0.5s ease;
}
.yl-number.yl-pending {
    color:       #aaa;
    font-size:   1em;
    font-weight: 400;
    font-style:  italic;
}
.yl-prize-label {
    font-size:   0.75em;
    color:       #888;
    margin-bottom: 2px;
}

@keyframes yl-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Badges ──────────────────────────────────────────────── */
.yl-round-badge {
    display:       inline-block;
    background:    rgba(255,255,255,0.25);
    border-radius: 20px;
    padding:       1px 8px;
    font-size:     0.78em;
    font-weight:   500;
    white-space:   nowrap;
}
.yl-flag { font-size: 1.1em; }

/* ── Empty State ─────────────────────────────────────────── */
.yl-empty {
    padding:       24px;
    text-align:    center;
    color:         #999;
    background:    #fafafa;
    border:        1px dashed #ddd;
    border-radius: 10px;
    font-size:     0.95em;
}

/* ── API Warning ─────────────────────────────────────────── */
.yl-api-warning {
    padding:       20px 24px;
    text-align:    center;
    color:         #c0392b;
    background:    #fdedec;
    border:        1px solid #f5b7b1;
    border-radius: 10px;
    font-size:     0.95em;
    font-weight:   500;
    margin:        12px 0;
}

/* ── Lottery Checker ─────────────────────────────────────── */
.yl-checker {
    background:    var(--yl-bg, #fff);
    border:        1px solid var(--yl-border, #e0e0e0);
    border-radius: 16px;
    overflow:      hidden;
    box-shadow:    var(--yl-shadow, 0 2px 12px rgba(0,0,0,0.10));
    max-width:     560px;
    margin:        0 auto;
}
.yl-checker-header {
    background:    var(--yl-header-bg, #b22222);
    color:         var(--yl-header-color, #fff);
    text-align:    center;
    padding:       20px 16px 16px;
}
.yl-checker-icon { font-size: 2.5em; display: block; margin-bottom: 6px; }
.yl-checker-title {
    margin:      0 0 4px;
    font-size:   1.4em;
    font-weight: 700;
    color:       inherit;
}
.yl-checker-sub {
    margin:    0;
    font-size: 0.85em;
    opacity:   0.85;
}

.yl-checker-form {
    padding: 20px 16px 12px;
}
.yl-input-group {
    display:   flex;
    gap:       8px;
    margin-bottom: 10px;
}
.yl-checker-input {
    flex:          1;
    padding:       10px 14px;
    font-size:     1.1em;
    font-family:   var(--yl-font, 'Kanit', sans-serif);
    border:        2px solid var(--yl-border, #e0e0e0);
    border-radius: 8px;
    outline:       none;
    transition:    border-color 0.2s;
    letter-spacing: 3px;
    text-align:    center;
}
.yl-checker-input:focus {
    border-color: var(--yl-header-bg, #b22222);
}
.yl-checker-btn {
    padding:       10px 18px;
    background:    var(--yl-header-bg, #b22222);
    color:         var(--yl-header-color, #fff);
    border:        none;
    border-radius: 8px;
    font-size:     1em;
    font-family:   var(--yl-font, 'Kanit', sans-serif);
    font-weight:   600;
    cursor:        pointer;
    transition:    opacity 0.2s, transform 0.15s;
    white-space:   nowrap;
}
.yl-checker-btn:hover { opacity: 0.88; transform: scale(1.02); }
.yl-checker-btn:active { transform: scale(0.98); }
.yl-checker-btn.loading { opacity: 0.6; pointer-events: none; }

.yl-checker-hint {
    display:     flex;
    gap:         12px;
    flex-wrap:   wrap;
    font-size:   0.78em;
    color:       #999;
}
.yl-checker-hint span {
    background:    #f5f5f5;
    border-radius: 4px;
    padding:       2px 8px;
}

/* Checker Result */
.yl-checker-result {
    padding:       0 16px 20px;
    animation:     yl-fadein 0.4s ease;
}
.yl-result-box {
    border-radius: 12px;
    padding:       16px;
    text-align:    center;
    margin-top:    4px;
}
.yl-result-box.won {
    background:    #e8f5e9;
    border:        2px solid #4caf50;
}
.yl-result-box.lost {
    background:    #fafafa;
    border:        2px solid #e0e0e0;
}
.yl-result-icon { font-size: 2.5em; display: block; margin-bottom: 8px; }
.yl-result-msg {
    font-size:   1.2em;
    font-weight: 700;
    margin-bottom: 8px;
}
.yl-result-msg.won  { color: #2e7d32; }
.yl-result-msg.lost { color: #888; }
.yl-match-list {
    list-style: none;
    padding:    0;
    margin:     10px 0 0;
}
.yl-match-list li {
    background:    #fff;
    border:        1px solid #c8e6c9;
    border-radius: 8px;
    padding:       8px 14px;
    margin-bottom: 6px;
    display:       flex;
    justify-content: space-between;
    align-items:   center;
}
.yl-match-prize { font-weight: 600; color: #2e7d32; }
.yl-match-number {
    font-size:     1.3em;
    font-weight:   700;
    color:         var(--yl-number-color, #c0392b);
    letter-spacing: 2px;
}
.yl-result-ref {
    margin-top: 12px;
    font-size:  0.8em;
    color:      #aaa;
}

/* Error */
.yl-result-error {
    background:    #fff3e0;
    border:        2px solid #ff9800;
    color:         #e65100;
    border-radius: 10px;
    padding:       12px;
    text-align:    center;
    margin-top:    4px;
}