/* ═══════════════════════════════════════════════════════════════
   prices.css — Page-specific styles only
   Shared base: bto.css
════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   PAYMENT METHODS BENTO (6-col grid, 7 cards)
════════════════════════════════════════════════════════════════ */
.bto-pay-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.1rem;
}

/* Row 1: wide (4) + narrow (2) */
.bto-pay-bento .bto-fc:nth-child(1) { grid-column: span 4; }
.bto-pay-bento .bto-fc:nth-child(2) { grid-column: span 2; }
/* Row 2: three equal (2+2+2) */
.bto-pay-bento .bto-fc:nth-child(3) { grid-column: span 2; }
.bto-pay-bento .bto-fc:nth-child(4) { grid-column: span 2; }
.bto-pay-bento .bto-fc:nth-child(5) { grid-column: span 2; }
/* Row 3: two halves (3+3) */
.bto-pay-bento .bto-fc:nth-child(6) { grid-column: span 3; }
.bto-pay-bento .bto-fc:nth-child(7) { grid-column: span 3; }


/* ════════════════════════════════════════════════════════════════
   PRICE TABLE SECTION
════════════════════════════════════════════════════════════════ */
.bto-page .bto-table-section { background: var(--bto-gray) !important; }

/* Tier legend */
.bto-tier-legend {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2.5rem;
}
.bto-tier {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.9rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.bto-tier--eco { background: rgba(45,122,45,0.1);  color: #237023; border: 1px solid rgba(45,122,45,0.2); }
.bto-tier--std { background: rgba(26,86,160,0.1);  color: #1a56a0; border: 1px solid rgba(26,86,160,0.2); }
.bto-tier--bus { background: rgba(29,29,31,0.07);  color: #1d1d1f; border: 1px solid rgba(29,29,31,0.15); }
.bto-tier--van { background: var(--bto-red-pale);  color: var(--bto-red); border: 1px solid rgba(214,0,0,0.15); }

/* Table wrapper */
.bto-table-wrap {
    overflow-x: auto;
    border-radius: var(--bto-radius);
    background: var(--bto-white) !important;
    box-shadow: var(--bto-shadow);
    border: 1px solid var(--bto-border);
    scrollbar-width: thin;
    scrollbar-color: var(--bto-gray2) transparent;
}
.bto-table-wrap::-webkit-scrollbar { height: 4px; }
.bto-table-wrap::-webkit-scrollbar-thumb { background: var(--bto-gray2); border-radius: 10px; }

.bto-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}
.bto-table thead tr { background: var(--bto-dark); }
.bto-table thead th {
    padding: 14px 18px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
}
.bto-table thead th:first-child { border-radius: var(--bto-radius) 0 0 0; }
.bto-table thead th:last-child  { border-radius: 0 var(--bto-radius) 0 0; }

.bto-table tbody tr {
    border-bottom: 1px solid var(--bto-border);
    transition: background 0.18s ease;
}
.bto-table tbody tr:hover { background: var(--bto-gray); }
.bto-table tbody tr:last-child { border-bottom: none; }

/* Nearby highlight rows */
.bto-tr--nearby { background: rgba(214,0,0,0.025); }
.bto-tr--nearby:hover { background: rgba(214,0,0,0.05) !important; }
.bto-tr--nearby .bto-td-district::after {
    content: ' ★';
    color: var(--bto-red);
    font-size: 0.72em;
}

.bto-td-district {
    padding: 13px 18px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--bto-dark) !important;
    white-space: nowrap;
}
.bto-td-postal {
    padding: 13px 18px;
    font-size: 0.85rem;
    color: var(--bto-subtle);
    font-variant-numeric: tabular-nums;
}
.bto-td-map { padding: 10px 18px; }
.bto-map-thumb {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
    opacity: 0.75;
    cursor: pointer;
}
.bto-map-thumb:hover { transform: scale(1.25); opacity: 1; }

.bto-td-price {
    padding: 13px 18px;
    font-size: 0.92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bto-price--eco { color: #237023; }
.bto-price--std { color: #1a56a0; }
.bto-price--bus { color: var(--bto-dark); }
.bto-price--van { color: var(--bto-red); }


/* ════════════════════════════════════════════════════════════════
   WHY CHOOSE BENTO
════════════════════════════════════════════════════════════════ */
.bto-why-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}

.bto-wc {
    border-radius: var(--bto-radius-lg);
    padding: 2.5rem 2.25rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.28s ease;
}
.bto-wc:hover {
    transform: translateY(-4px) scale(1.008);
    box-shadow: var(--bto-shadow-h);
}
.bto-wc--white { background: var(--bto-white) !important; border: 1px solid var(--bto-border); box-shadow: var(--bto-shadow); }
.bto-wc--gray  { background: var(--bto-gray2) !important; border: 1px solid transparent; }
.bto-wc--dark  { background: var(--bto-dark)  !important; border: none; }
.bto-wc--red   { background: var(--bto-red)   !important; border: none; }

.bto-wc-num {
    font-size: 5.5rem;
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 1;
    margin-bottom: 1rem;
    opacity: 0.08;
    color: var(--bto-red);
}
.bto-wc--dark .bto-wc-num { color: #fff; opacity: 0.1; }
.bto-wc--red  .bto-wc-num { color: #fff; opacity: 0.2; }

.bto-wc-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
}
.bto-wc--white .bto-wc-icon,
.bto-wc--gray  .bto-wc-icon { background: var(--bto-red-pale); color: var(--bto-red); border: 1px solid rgba(214,0,0,0.12); }
.bto-wc--dark  .bto-wc-icon,
.bto-wc--red   .bto-wc-icon { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.2); }

.bto-wc-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 0.5rem;
}
.bto-wc--white .bto-wc-title,
.bto-wc--gray  .bto-wc-title { color: var(--bto-dark) !important; }
.bto-wc--dark  .bto-wc-title,
.bto-wc--red   .bto-wc-title { color: #fff !important; }

.bto-wc-desc {
    font-size: 0.875rem;
    line-height: 1.65;
    margin: 0;
}
.bto-wc--white .bto-wc-desc,
.bto-wc--gray  .bto-wc-desc { color: var(--bto-mid) !important; }
.bto-wc--dark  .bto-wc-desc,
.bto-wc--red   .bto-wc-desc { color: rgba(255,255,255,0.68) !important; }


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .bto-pay-bento { grid-template-columns: repeat(4, 1fr); }
    .bto-pay-bento .bto-fc:nth-child(1) { grid-column: span 4; }
    .bto-pay-bento .bto-fc:nth-child(2) { grid-column: span 2; }
    .bto-pay-bento .bto-fc:nth-child(3) { grid-column: span 2; }
    .bto-pay-bento .bto-fc:nth-child(4) { grid-column: span 2; }
    .bto-pay-bento .bto-fc:nth-child(5) { grid-column: span 2; }
    .bto-pay-bento .bto-fc:nth-child(6) { grid-column: span 2; }
    .bto-pay-bento .bto-fc:nth-child(7) { grid-column: span 2; }

    .bto-why-bento { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .bto-why-bento { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .bto-pay-bento { grid-template-columns: 1fr; }
    .bto-pay-bento .bto-fc:nth-child(1),
    .bto-pay-bento .bto-fc:nth-child(2),
    .bto-pay-bento .bto-fc:nth-child(3),
    .bto-pay-bento .bto-fc:nth-child(4),
    .bto-pay-bento .bto-fc:nth-child(5),
    .bto-pay-bento .bto-fc:nth-child(6),
    .bto-pay-bento .bto-fc:nth-child(7) { grid-column: span 1; }

    .bto-table { font-size: 0.84rem; }
    .bto-td-district,
    .bto-td-postal,
    .bto-td-price,
    .bto-td-map { padding: 11px 10px; }
}