/**
 * Lottery Sambad Pro — style.css  (v3)
 * GeneratePress-compatible | Mobile-first | Grid + Card system
 */

/* ============================================================
   CSS CUSTOM PROPERTIES  (button colour injected from PHP)
   ============================================================ */
:root {
    --lsp-primary:       #1E4C7D;
    --lsp-primary-dark:  #16396A;
    --lsp-white:         #ffffff;
    --lsp-bg:            #f7f9fc;
    --lsp-border:        #d8e2ef;
    --lsp-radius:        8px;
    --lsp-shadow:        0 2px 10px rgba(0,0,0,0.07);
    --lsp-success-text:  #166534;
    --lsp-success-bg:    #f0fdf4;
    --lsp-success-bdr:   #bbf7d0;
    --lsp-error-text:    #b91c1c;
    --lsp-error-bg:      #fef2f2;
    --lsp-error-bdr:     #fecaca;
    --lsp-label:         #4b6080;
    --lsp-text:          #1a2533;

    /* Draw-time badge colours */
    --lsp-1pm-bg:  #dbeafe;
    --lsp-1pm-txt: #1e40af;
    --lsp-6pm-bg:  #dcfce7;
    --lsp-6pm-txt: #166534;
    --lsp-8pm-bg:  #fef3c7;
    --lsp-8pm-txt: #92400e;
}

/* ============================================================
   SHARED BOX WRAPPERS  (today-buttons + old-form)
   ============================================================ */
.lsp-results-box,
.lsp-old-results-box {
    width:         100%         !important;
    max-width:     860px        !important;
    margin:        18px auto    !important;
    padding:       18px 20px    !important;
    background:    var(--lsp-white)   !important;
    border:        2px solid var(--lsp-border) !important;
    border-radius: var(--lsp-radius)  !important;
    box-shadow:    var(--lsp-shadow)  !important;
    box-sizing:    border-box   !important;
    font-family:   inherit      !important;
    color:         var(--lsp-text)    !important;
}

.lsp-box-title {
    font-size:      1rem        !important;
    font-weight:    700         !important;
    color:          var(--lsp-primary) !important;
    text-align:     center      !important;
    margin-bottom:  14px        !important;
    padding-bottom: 10px        !important;
    border-bottom:  1px solid var(--lsp-border) !important;
    letter-spacing: 0.2px       !important;
}

/* ============================================================
   BUTTONS  (shared base)
   ============================================================ */
.lsp-btn {
    display:         inline-flex          !important;
    align-items:     center               !important;
    justify-content: center              !important;
    gap:             5px                  !important;
    background:      var(--lsp-primary)   !important;
    color:           var(--lsp-white)     !important;
    border:          none                 !important;
    padding:         10px 22px            !important;
    border-radius:   var(--lsp-radius)    !important;
    font-size:       14.5px               !important;
    font-weight:     600                  !important;
    cursor:          pointer              !important;
    text-decoration: none                 !important;
    transition:      background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    white-space:     nowrap               !important;
    flex-shrink:     0                    !important;
    line-height:     1.4                  !important;
    box-shadow:      0 1px 4px rgba(0,0,0,0.12) !important;
}

.lsp-btn:hover:not(:disabled) {
    background:  var(--lsp-primary-dark) !important;
    transform:   translateY(-2px)        !important;
    color:       var(--lsp-white)        !important;
    box-shadow:  0 4px 12px rgba(0,0,0,0.18) !important;
}

.lsp-btn:disabled {
    opacity:   0.55 !important;
    cursor:    not-allowed !important;
    transform: none        !important;
}

.lsp-btn:focus-visible {
    outline:        2px solid var(--lsp-primary) !important;
    outline-offset: 3px                          !important;
}

.lsp-btn-full { width: 100% !important; }

.lsp-btn,
.lsp-btn:visited,
.lsp-btn:active,
.lsp-btn:focus {
    color:           var(--lsp-white)  !important;
    background:      var(--lsp-primary) !important;
    text-decoration: none              !important;
}

/* ============================================================
   TODAY'S 3-BUTTON ROW
   ============================================================ */
.lsp-buttons-row {
    display:         flex     !important;
    justify-content: center   !important;
    align-items:     center   !important;
    gap:             10px     !important;
    flex-wrap:       wrap     !important;
    margin-top:      4px      !important;
}

.lsp-btn-icon { font-size: 16px !important; line-height: 1 !important; }

/* ============================================================
   SINGLE BUTTON WRAPPER
   ============================================================ */
.lsp-single-wrap {
    display:        inline-flex  !important;
    flex-direction: column       !important;
    align-items:    center       !important;
    gap:            6px          !important;
}

/* ============================================================
   OLD RESULTS FORM GRID
   ============================================================ */
.lsp-old-form-grid {
    display:               grid                              !important;
    grid-template-columns: repeat(auto-fit, minmax(110px,1fr)) !important;
    gap:                   12px 14px                         !important;
    align-items:           end                               !important;
}

.lsp-field-group {
    display:        flex        !important;
    flex-direction: column      !important;
    gap:            5px         !important;
}

.lsp-field-group label {
    font-size:      12px             !important;
    font-weight:    700              !important;
    color:          var(--lsp-label) !important;
    text-transform: uppercase        !important;
    letter-spacing: 0.6px            !important;
}

.lsp-field-group select {
    width:       100%                 !important;
    padding:     8px 10px             !important;
    font-size:   14px                 !important;
    font-weight: 500                  !important;
    color:       var(--lsp-text)      !important;
    background:  var(--lsp-bg)        !important;
    border:      1.5px solid var(--lsp-border) !important;
    border-radius: var(--lsp-radius)  !important;
    cursor:      pointer              !important;
    transition:  border-color 0.2s, box-shadow 0.2s !important;
    box-sizing:  border-box           !important;
    appearance:  auto                 !important;
    -webkit-appearance: menulist      !important;
}

.lsp-field-group select:focus {
    outline:     none                                 !important;
    border-color: var(--lsp-primary)                 !important;
    box-shadow:  0 0 0 3px rgba(30,76,125,0.13)      !important;
}

@media (max-width: 480px) {
    .lsp-old-form-grid { grid-template-columns: 1fr 1fr !important; }
    .lsp-btn-group     { grid-column: 1 / -1            !important; }
}

/* ============================================================
   STATUS MESSAGES
   ============================================================ */
.lsp-global-msg,
.lsp-single-msg,
.lsp-old-message {
    display:       none       !important;
    text-align:    center     !important;
    font-size:     13px       !important;
    font-weight:   600        !important;
    padding:       8px 14px   !important;
    border-radius: var(--lsp-radius) !important;
    margin-bottom: 10px       !important;
    line-height:   1.5        !important;
}

.lsp-global-msg[style*="block"],
.lsp-global-msg[style*="inline"],
.lsp-single-msg[style*="block"],
.lsp-single-msg[style*="inline"],
.lsp-old-message[style*="block"],
.lsp-old-message[style*="inline"] { display: block !important; }

.lsp-msg-success {
    color:      var(--lsp-success-text) !important;
    background: var(--lsp-success-bg)   !important;
    border:     1px solid var(--lsp-success-bdr) !important;
}

.lsp-msg-error {
    color:      var(--lsp-error-text) !important;
    background: var(--lsp-error-bg)   !important;
    border:     1px solid var(--lsp-error-bdr) !important;
}

@keyframes lsp-blink { 0%,100%{opacity:1} 45%{opacity:0.3} }
.lsp-msg-blink { animation: lsp-blink 0.75s ease-in-out 5 !important; }

/* ============================================================
   GRID CONTAINER
   ============================================================ */
.lsp-grid-container {
    width:      100%     !important;
    max-width:  1100px   !important;
    margin:     24px auto !important;
    padding:    0 4px    !important;
    box-sizing: border-box !important;
}

.lsp-grid-title {
    font-size:     1.25rem      !important;
    font-weight:   700          !important;
    color:         var(--lsp-primary) !important;
    text-align:    center       !important;
    margin-bottom: 20px         !important;
    padding-bottom: 12px        !important;
    border-bottom: 2px solid var(--lsp-border) !important;
}

/* ============================================================
   RESULTS GRID  (CSS Grid, mobile-first)
   ============================================================ */
.lsp-results-grid {
    display: grid          !important;
    gap:     18px          !important;
    /* default: 1 column on mobile */
    grid-template-columns: 1fr !important;
}

/* Tablet: always 2 columns */
@media (min-width: 540px) {
    .lsp-results-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Desktop overrides driven by [cols] attr */
@media (min-width: 900px) {
    .lsp-results-grid.lsp-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .lsp-results-grid.lsp-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .lsp-results-grid.lsp-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ============================================================
   RESULT CARD
   ============================================================ */
.lsp-result-card {
    display:        flex            !important;
    flex-direction: column          !important;
    background:     var(--lsp-white) !important;
    border:         1.5px solid var(--lsp-border) !important;
    border-radius:  10px            !important;
    overflow:       hidden          !important;
    box-shadow:     var(--lsp-shadow) !important;
    transition:     transform 0.2s ease, box-shadow 0.2s ease !important;
}

.lsp-result-card:hover {
    transform:  translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.11) !important;
}

/* ── Card Header ── */
.lsp-card-header {
    display:         flex             !important;
    justify-content: space-between    !important;
    align-items:     center           !important;
    padding:         10px 12px        !important;
    background:      var(--lsp-bg)    !important;
    border-bottom:   1px solid var(--lsp-border) !important;
    gap:             8px              !important;
}

.lsp-card-date {
    font-size:   12.5px              !important;
    font-weight: 600                 !important;
    color:       var(--lsp-label)    !important;
    white-space: nowrap              !important;
}

/* Draw-time badges */
.lsp-card-badge {
    font-size:     11.5px         !important;
    font-weight:   700            !important;
    padding:       3px 8px        !important;
    border-radius: 20px           !important;
    white-space:   nowrap         !important;
    flex-shrink:   0              !important;
}

.lsp-badge-1pm  { background: var(--lsp-1pm-bg)  !important; color: var(--lsp-1pm-txt) !important; }
.lsp-badge-6pm  { background: var(--lsp-6pm-bg)  !important; color: var(--lsp-6pm-txt) !important; }
.lsp-badge-8pm  { background: var(--lsp-8pm-bg)  !important; color: var(--lsp-8pm-txt) !important; }

/* ── Card Image Area ── */
.lsp-card-image {
    position:   relative   !important;
    flex:       1          !important;
    overflow:   hidden     !important;
    background: #eef1f6    !important;
    min-height: 180px      !important;
}

.lsp-card-img {
    width:            100%         !important;
    height:           100%         !important;
    display:          block        !important;
    object-fit:       cover        !important;
    object-position:  top center   !important;
    transition:       transform 0.3s ease !important;
    min-height:       180px        !important;
}

.lsp-result-card:hover .lsp-card-img {
    transform: scale(1.02) !important;
}

/* ── Placeholder (no image yet) ── */
.lsp-card-placeholder {
    display:         flex            !important;
    flex-direction:  column          !important;
    align-items:     center          !important;
    justify-content: center          !important;
    min-height:      180px           !important;
    padding:         20px            !important;
    background:      linear-gradient(135deg, #f0f4f8 0%, #dce3ec 100%) !important;
    text-align:      center          !important;
}

.lsp-ph-icon { font-size: 36px !important; margin-bottom: 8px !important; opacity: 0.6 !important; }
.lsp-ph-date { font-size: 13px !important; font-weight: 700 !important; color: var(--lsp-text) !important; }
.lsp-ph-time { font-size: 12px !important; color: var(--lsp-label) !important; margin-top: 4px !important; }

/* ── Card Footer (buttons) ── */
.lsp-card-footer {
    display:         flex            !important;
    gap:             6px             !important;
    padding:         10px 12px       !important;
    background:      var(--lsp-bg)   !important;
    border-top:      1px solid var(--lsp-border) !important;
    flex-wrap:       wrap            !important;
}

/* Smaller buttons for cards */
.lsp-card-btn {
    padding:   7px 12px !important;
    font-size: 12.5px   !important;
    flex:      1        !important;
    min-width: 56px     !important;
}

.lsp-btn-pdf-dl  { background: #374151 !important; }
.lsp-btn-pdf-dl:hover:not(:disabled) { background: #1f2937 !important; }

.lsp-btn-view    { background: #0369a1 !important; }
.lsp-btn-view:hover:not(:disabled) { background: #075985 !important; }

/* ── Grid footer "See All" link ── */
.lsp-grid-footer {
    text-align: center   !important;
    margin-top: 20px     !important;
}

.lsp-btn-all-results {
    background:  transparent               !important;
    color:       var(--lsp-primary)        !important;
    border:      2px solid var(--lsp-primary) !important;
    box-shadow:  none                      !important;
}

.lsp-btn-all-results:hover {
    background:  var(--lsp-primary)   !important;
    color:       var(--lsp-white)     !important;
    transform:   translateY(-1px)     !important;
}

/* ── Grid empty notice ── */
.lsp-grid-notice {
    text-align:    center           !important;
    padding:       24px             !important;
    background:    var(--lsp-bg)    !important;
    border:        2px dashed var(--lsp-border) !important;
    border-radius: var(--lsp-radius) !important;
    color:         var(--lsp-label) !important;
    font-size:     15px             !important;
}

/* ============================================================
   SINGLE POST — result image inside post content
   ============================================================ */
.lsp-post-body { max-width: 700px; margin: 0 auto; }

.lsp-post-image {
    width:         100%            !important;
    height:        auto            !important;
    display:       block           !important;
    border-radius: var(--lsp-radius) !important;
    box-shadow:    var(--lsp-shadow) !important;
    margin-bottom: 16px            !important;
}

.lsp-pdf-cta {
    text-align: center !important;
    margin:     14px 0 !important;
}

/* ============================================================
   MOBILE POLISH  (≤ 400px)
   ============================================================ */
@media (max-width: 400px) {
    .lsp-btn { font-size: 13px !important; padding: 9px 14px !important; }
    .lsp-box-title { font-size: 0.9rem !important; }
    .lsp-results-box, .lsp-old-results-box { padding: 14px !important; }
    .lsp-card-btn { font-size: 11.5px !important; padding: 6px 8px !important; }
    .lsp-grid-title { font-size: 1.05rem !important; }
}