/**
 * row-pricing.css – ThemeSanBong
 * Style cho ACF Flexible layout `layout_pricing` (Bảng giá thuê sân).
 * Trước đây inline <style> trong template-part → in 2 lần khi admin add 2
 * layout pricing. Tách ra file để: (1) browser cache giữa các pageview,
 * (2) admin add nhiều layout không duplicate, (3) PHP nhỏ gọn hơn.
 */

.pg-section { padding: 4.5rem 0; background: #fff; }
.pg-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* Heading */
.pg-heading-wrap { text-align: center; margin-bottom: 2.5rem; }
.pg-heading { font-size: 2rem; font-weight: 900; color: #111827; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .6rem; }
.pg-subhead { color: #6b7280; font-size: .95rem; margin: 0; }

/* Grid */
.pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }

/* Card base */
.pg-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: box-shadow .2s, transform .2s;
}
.pg-card:hover { box-shadow: 0 8px 28px rgba(42,147,13,.13); transform: translateY(-4px); }

/* Card header */
.pg-card-header {
    background: linear-gradient(135deg, #1a6b05 0%, #2a930d 60%, #38a81a 100%);
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pg-card-header-combo {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
}
.pg-card-icon {
    width: 52px; height: 52px;
    border-radius: 10px;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pg-card-icon-combo { background: rgba(245,158,11,.2); }
.pg-card-title { font-size: 1.05rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .03em; }
.pg-card-size { font-size: .8rem; color: rgba(255,255,255,.75); margin-top: .15rem; }

/* Slots */
.pg-slots { padding: 1rem 1.25rem; flex: 1; }
.pg-slots-header {
    display: flex; justify-content: space-between;
    font-size: .7rem; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .08em;
    padding-bottom: .6rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: .5rem;
}
.pg-slot-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .55rem 0;
    border-bottom: 1px dashed #f3f4f6;
}
.pg-slot-row:last-child { border-bottom: none; }
.pg-slot-time { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: #374151; }
.pg-slot-icon { color: #9ca3af; flex-shrink: 0; }
.pg-slot-price { font-size: .88rem; font-weight: 700; color: #2a930d; }

/* Amenities */
.pg-amenities {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    padding: .75rem 1.25rem;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
}
.pg-amenity { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.pg-amenity-icon { color: #6b7280; }
.pg-amenity-text { display: flex; flex-direction: column; align-items: center; }
.pg-amenity-label { font-size: .68rem; font-weight: 600; color: #374151; text-align: center; }
.pg-amenity-sub { font-size: .65rem; color: #6b7280; text-align: center; }

/* Combo note */
.pg-combo-note {
    display: flex; align-items: center; gap: .5rem;
    margin: 1rem 1.25rem .25rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: .6rem .85rem;
    font-size: .8rem; font-weight: 600; color: #92400e;
}

/* Combo features */
.pg-combo-features { padding: .5rem 1.25rem 1rem; flex: 1; }
.pg-combo-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .55rem 0;
    border-bottom: 1px dashed #f3f4f6;
    font-size: .85rem;
}
.pg-combo-row:last-child { border-bottom: none; }
.pg-combo-feat { display: flex; align-items: center; gap: .5rem; color: #374151; }
.pg-combo-val { font-weight: 600; color: #374151; }
.pg-combo-val-green { color: #2a930d; }

/* CTA Buttons */
.pg-btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin: 0 1.25rem 1.25rem;
    padding: .85rem 1rem;
    border-radius: 10px;
    font-size: .9rem; font-weight: 700;
    text-decoration: none;
    transition: background .2s, transform .1s;
    cursor: pointer;
}
.pg-btn:hover { transform: translateY(-1px); }
.pg-btn-primary { background: #2a930d; color: #fff; }
.pg-btn-primary:hover { background: #228a0a; }
.pg-btn-outline { background: transparent; color: #2a930d; border: 2px solid #2a930d; }
.pg-btn-outline:hover { background: #2a930d; color: #fff; }

/* Responsive */
@media (max-width: 900px) {
    .pg-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}