/* Benefit page - branches accordion ("סניפים") */

/* Supplier + branches share the left grid column of .info-cards-container,
   wrapped together in .supplier-branches-col and stacked. As a single grid item
   that column sizes to its own content, independent of the taller info card
   beside it — so branches tucks directly under the supplier card (20px apart)
   instead of being pushed down by, or stretched to match, the info card's
   height. On mobile the container collapses to one column and everything stacks
   info → supplier → branches as before. */
.supplier-branches-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0; /* prevent long content from blowing out the grid column */
}

.branches-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}

/* Match the info/supplier siblings: pin natural height so egged's global
   .shadow { height: 100% } doesn't stretch the card to fill its grid row. */
.info-cards-container .branches-card {
    height: auto;
}

@media (max-width: 768px) {
    .branches-card {
        padding: 16px;
    }
}

.branches-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
}

.branches-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 500;
    line-height: 50px;
    color: #0B0427;
    margin: 0;
}

/* Brand color applied via _benefit_dynamic_styles.php */
.branches-card-title i {
    font-size: 18px;
    color: #2020B3;
}

@media (max-width: 768px) {
    .branches-card-title {
        font-size: 18px;
        line-height: 1.4;
    }
}

.branches-card-toggle {
    background: #2020B3;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.branches-card.open .branches-card-toggle {
    transform: rotate(180deg);
}

.branches-card-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
}

.branches-card.open .branches-card-content {
    max-height: 4000px;
    opacity: 1;
    margin-top: 20px;
}

/* Branch tiles — responsive grid: 2-4 across on desktop, single column on mobile */
.branches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    /* Long lists scroll inside the card. Short lists stay at natural height —
       the cap only engages once the tiles exceed it. Tune the height here.
       overflow-x stays hidden so we never get a stray horizontal scrollbar. */
    max-height: 480px;
    overflow: hidden auto;
    padding-inline-end: 6px; /* gutter so tiles don't sit flush against the scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #D0D0DA transparent;
}

.branches-grid::-webkit-scrollbar {
    width: 6px;
}

.branches-grid::-webkit-scrollbar-thumb {
    background: #D0D0DA;
    border-radius: 3px;
}

.branches-grid::-webkit-scrollbar-track {
    background: transparent;
}

.branch-tile {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #ECECF1;
    border-radius: 14px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Hover stays inside the tile (border tint + faint fill). An outer shadow or a
   translateY lift would poke past the accordion content's overflow:hidden
   (needed for the collapse animation) and get clipped — the visible "cut".
   Brand-tinted hover border comes from _benefit_dynamic_styles.php. */
.branch-tile:hover {
    background: #FAFAFB;
}

/* City header with a hairline divider separating it from the contact rows */
.branch-city {
    font-size: 16px;
    font-weight: 700;
    color: #0B0427;
    text-align: right;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #F1F1F5;
}

.branch-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.branch-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #46494F;
    text-decoration: none;
    text-align: right;
}

/* Circular tinted icon chip — chip background + icon color come from
   _benefit_dynamic_styles.php so they follow the club's brand color. */
.branch-line i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #F4F4F8;
    color: #2020B3;
    font-size: 13px;
    flex-shrink: 0;
}

.branch-line span {
    line-height: 1.4;
}

.branch-line:hover {
    color: #0B0427;
}

.branch-address:hover span {
    text-decoration: underline;
}

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