/* skin/css/index.css */

/* Banner */
.banner-box { margin-bottom: 30px; }
.main-swiper { border: 3px solid #000; box-shadow: 4px 4px 0 #000; }
.swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 0; background: #fff; border: 1px solid #000; opacity: 1; }
.swiper-pagination-bullet-active { background: var(--brut-pink); }

/* Row Card */
.row-item {
    display: flex; align-items: center; padding: 15px; margin-bottom: 20px;
}
.row-item img {
    width: 60px; height: 60px; border: 3px solid #000; margin-right: 15px;
}
.ri-info { flex: 1; }
.ri-info h3 { font-size: 16px; font-weight: 900; margin-bottom: 5px; text-transform: uppercase; }
.ri-info p { font-size: 12px; font-weight: bold; background: #000; color: #fff; display: inline-block; padding: 2px 6px; }

/* Grid Raw */
.grid-raw-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
}
.grid-raw-item {
    background: #fff; border: 3px solid #000; padding: 10px;
    display: flex; align-items: center; box-shadow: 4px 4px 0 #000;
}
.grid-raw-item img { width: 30px; height: 30px; margin-right: 10px; border: 2px solid #000; }
.grid-raw-item span { font-size: 13px; font-weight: 900; }

/* List Simple */
.list-simple { padding: 5px 15px; }
.ls-row {
    display: flex; align-items: center; padding: 10px 0;
    border-bottom: 2px solid #000;
}
.ls-row:last-child { border-bottom: none; }
.ls-row img { width: 32px; height: 32px; border: 2px solid #000; margin-right: 12px; }
.ls-row span { flex: 1; font-weight: 900; font-size: 14px; }
.ls-btn { font-weight: 900; font-size: 16px; transform: scaleX(1.5); }

/* Rank Blocks */
.rank-blocks { display: flex; flex-direction: column; gap: 10px; }
.rb-item {
    background: #fff; border: 3px solid #000; padding: 10px;
    display: flex; align-items: center; font-weight: 900;
}
.rb-item .num {
    background: #000; color: #fff; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    margin-right: 10px; font-size: 14px;
}
.rb-item.n1 { background: var(--brut-pink); }
.rb-item.n2 { background: var(--brut-green); }
.rb-item.n3 { background: var(--brut-yellow); }