/* 
 * ROBUST CSS IMPLEMENTATION (DESKTOP-FIRST)
 * ------------------------------------------
 * This CSS is written "desktop-first". The default styles create the wide,
 * multi-column layout. A specific media query is then used to override
 * these styles only on screens smaller than 768px. This is a more
 * reliable pattern that prevents mobile styles from incorrectly
 * appearing on desktop views.
 */

/* --- Base & Desktop Styles --- */
:root { 
    --nctb-header-bg: #F9FAFB; 
    --nctb-header-text: #6B7280;
    --nctb-button-bg-start: #22C55E;
    --nctb-button-bg-end: #16A34A;
    --nctb-button-bg-hover-start: #16A34A;
    --nctb-button-bg-hover-end: #15803D;
    --nctb-top-pick-bg: #3B82F6;
}

.nctb-container { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    border: 1px solid #e5e7eb; 
    border-radius: 0.5rem; 
    overflow: hidden; 
    background-color: #ffffff;
}
.nctb-container *, .nctb-container *::before, .nctb-container *::after { box-sizing: border-box; }

.nctb-header { 
    display: grid; 
    grid-template-columns: minmax(200px, 2fr) minmax(120px, 1fr) minmax(120px, 1fr); 
    gap: 1rem; 
    padding: 0.75rem 1rem; 
    font-size: 0.875rem; 
    font-weight: 600; 
    color: var(--nctb-header-text); 
    background-color: var(--nctb-header-bg); 
    border-bottom: 1px solid #e5e7eb; 
}
.nctb-header .nctb-col-visit { text-align: right; }

.nctb-body { display: block; }

.nctb-row { 
    display: grid; 
    grid-template-columns: minmax(200px, 2fr) minmax(120px, 1fr) minmax(120px, 1fr); 
    align-items: center; 
    gap: 1rem; 
    padding: 1rem; 
    border-top: 1px solid #e5e7eb; 
}
.nctb-body > .nctb-row:first-child { border-top: none; }

.nctb-col-logo-bank { display: flex; flex-direction: row; align-items: center; gap: 1rem; text-align: left; }
.nctb-col-note { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.nctb-col-visit { text-align: right; }

.nctb-logo-wrapper { width: 4rem; height: 4rem; padding: 0.25rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; flex-shrink: 0; }
.nctb-logo { width: 100%; height: 100%; object-fit: contain; border-radius: 0.25rem; }
.nctb-bank-name { font-weight: 600; font-size: 1.125rem; color: #111827; word-break: break-word; }

.nctb-stars-wrapper { display: flex; align-items: center; justify-content: flex-start; }
.nctb-stars { display: flex; gap: 0.1rem; }
.nctb-star-full { width: 1.25rem; height: 1.25rem; color: #facc15; }
.nctb-star-empty { width: 1.25rem; height: 1.25rem; color: #d1d5db; }
.nctb-rating-value { color: #4b5563; margin-left: 0.5rem; font-size: 0.875rem; }

.nctb-top-pick { padding: 0.25rem 0.75rem; background-color: var(--nctb-top-pick-bg); color: #ffffff; font-size: 0.75rem; font-weight: 700; border-radius: 9999px; display: inline-flex; align-items: center; gap: 0.25rem; }
.nctb-top-pick svg { width: 0.75rem; height: 0.75rem; }

.nctb-apply-btn { display: inline-block; text-align: center; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; color: #ffffff; background-image: linear-gradient(to right, var(--nctb-button-bg-start), var(--nctb-button-bg-end)); border-radius: 0.5rem; text-decoration: none; transition: all 0.2s ease-in-out; }
.nctb-apply-btn:hover { background-image: linear-gradient(to right, var(--nctb-button-bg-hover-end), var(--nctb-button-bg-hover-start)); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

/* --- Mobile Overrides --- */
@media (max-width: 768px) {
    .nctb-container { border: none; background: transparent; }
    .nctb-header { display: none; }
    .nctb-body { display: flex; flex-direction: column; gap: 1rem; padding: 0; }
    .nctb-row { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        gap: 0.75rem; 
        padding: 1.5rem 1rem; 
        border: 1px solid #e5e7eb; 
        border-radius: 0.75rem; 
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 
        text-align: center; 
        background-color: #ffffff;
    }
    .nctb-col-logo-bank, .nctb-col-note { 
        flex-direction: column; 
        align-items: center; 
        gap: 0.5rem; 
    }
    .nctb-col-visit { width: 100%; text-align: center; }
    .nctb-logo-wrapper { width: 80px; height: 80px; padding: 8px; background-color: #f9fafb; border-radius: 1rem; }
    .nctb-bank-name { font-size: 1.25rem; font-weight: 700; }
    .nctb-stars-wrapper { justify-content: center; }
    .nctb-apply-btn { display: block; width: 100%; max-width: 240px; margin: 0.5rem auto 0; font-size: 0.875rem; padding: 0.6rem 1rem; }
}