/* Branch Card */
.branch-card {
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    padding: 1.5rem;branch-card
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.branch-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Card Title */
.branch-card-title {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: #000000;
}

/* Card Detail Row */
.branch-card-detail {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #374151;
}

/* Card Icon */
.branch-card-icon {
    margin-top: 0.125rem;
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
    color: #ec1c24;
}

/* Tabs */
.branch-tab {
    cursor: pointer;
    border-left: 4px solid transparent;
    padding: 0.75rem 1.5rem;
    text-align: left;
    color: #374151;
    transition: all 0.2s ease;
}

.branch-tab:hover {
    background-color: #f9fafb;
}

.branch-tab.active {
    border-left-color: #ec1c24;
    background-color: #ec1c24;
    font-weight: 500;
    color: #ffffff;
}

/* Search Input */
.branch-search {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.branch-search:focus {
    outline: none;
    border-color: #ec1c24;
    box-shadow: 0 0 0 3px rgba(236, 28, 36, 0.1);
}

/* Map Link */
.branch-map-link {
    align-items: center;
    color: #ec1c24;
    display: inline-flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease;
    text-decoration: none;
}

.branch-map-link:hover {
    color: #B30000;
}

/* ============================================
   Container Styles
   ============================================ */

#branchLocator {
    /* Visibility */
}

#branchLocator .visible {
    visibility: visible;
}

#branchLocator .absolute {
    position: absolute;
}

#branchLocator .relative {
    position: relative;
}

#branchLocator .left-4 {
    left: 1rem;
}

#branchLocator .top-1\/2 {
    top: 50%;
}

#branchLocator .mx-auto {
    margin-left: auto;
    margin-right: auto;
}

#branchLocator .mb-10 {
    margin-bottom: 2.5rem;
}

#branchLocator .mb-3 {
    margin-bottom: 0.75rem;
}

#branchLocator .mb-4 {
    margin-bottom: 1rem;
}

#branchLocator .mb-6 {
    margin-bottom: 1.5rem;
}

#branchLocator .mb-8 {
    margin-bottom: 2rem;
}

#branchLocator .ml-2 {
    margin-left: 0.5rem;
}

#branchLocator .mt-4 {
    margin-top: 1rem;
}

/* Display */
#branchLocator .grid {
    display: grid;
}

#branchLocator .hidden {
    display: none;
}

/* Sizing */
#branchLocator .h-16 {
    height: 4rem;
}

#branchLocator .h-5 {
    height: 1.25rem;
}

#branchLocator .min-h-\[600px\] {
    min-height: 600px;
}

#branchLocator .w-16 {
    width: 4rem;
}

#branchLocator .w-5 {
    width: 1.25rem;
}

/* Layout */
#branchLocator .max-w-2xl {
    max-width: 42rem;
}

#branchLocator .max-w-7xl {
    max-width: 80rem;
}

/* Transform */
#branchLocator .-translate-y-1\/2 {
    /*transform: translateY(-50%);*/
}

/* Grid */
#branchLocator .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

#branchLocator .gap-6 {
    gap: 1.5rem;
}

/* Spacing */
#branchLocator .space-y-1 > * + * {
    margin-top: 0.25rem;
}

/* Borders & Background */

#branchLocator .rounded-xl {
    border-radius: 0.75rem;
}

/*#branchLocator .border-r {
    border-right-width: 1px;
}*/

#branchLocator .border-t {
    border-top-width: 1px;
}

/*#branchLocator .border-gray-200 {
    border-color: #e5e7eb;
}*/

#branchLocator .bg-gray-50 {
    background-color: #f9fafb;
}

#branchLocator .bg-white {
    background-color: #ffffff;
}

/* Padding */
#branchLocator .p-4 {
    padding: 1rem;
}

#branchLocator .p-6 {
    padding: 1.5rem;
}

#branchLocator .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#branchLocator .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

#branchLocator .py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#branchLocator .pl-12 {
    padding-left: 3rem;
}

#branchLocator .pt-4 {
    padding-top: 1rem;
}

/* Typography */
#branchLocator .text-center {
    text-align: center;
}

#branchLocator .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

#branchLocator .text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

#branchLocator .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

#branchLocator .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

#branchLocator .font-bold {
    font-weight: 700;
}

#branchLocator .font-medium {
    font-weight: 500;
}

#branchLocator .font-semibold {
    font-weight: 600;
}

/* Text Colors */
#branchLocator .text-gray-300 {
    color: #d1d5db;
}

#branchLocator .text-gray-400 {
    color: #9ca3af;
}

#branchLocator .text-gray-500 {
    color: #6b7280;
}

#branchLocator .text-gray-600 {
    color: #4b5563;
}

#branchLocator .text-vianet-black {
    color: #000000;
}

/* Shadow */
#branchLocator .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Animations
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.branch-card {
    animation: fadeInUp 0.5s ease-out both;
}

/* ============================================
   Scrollbar Styling
   ============================================ */

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ============================================
   SVG Icons
   ============================================ */

.vianet-branch-locator svg {
    width: 18px;
    height: auto;
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablet (min-width: 768px) */
@media (min-width: 768px) {
    #branchLocator .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop (min-width: 1024px) */
@media (min-width: 1024px) {
    #branchLocator .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    #branchLocator .lg\:col-span-9 {
        grid-column: span 9 / span 9;
    }

    #branchLocator .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    #branchLocator .lg\:p-8 {
        padding: 2rem;
    }
}

/* ============================================
   Additional Utility Classes
   ============================================ */

/* Center content */
.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Full width */
/*.w-full {
    width: 100%;
}*/

/* Flex utilities */
/*.flex {
    display: flex;
}*/

/*.items-center {
    align-items: center;
}*/

/*.justify-between {
    justify-content: space-between;
}*/

/*.flex-col {
    flex-direction: column;
}
*/
/* Gap utilities */
/*.gap-2 {
    gap: 0.5rem;
}
*/
/*.gap-4 {
    gap: 1rem;
}*/
/* Easing */
/*.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}*/



/* Sticky Sidebar*/
/*For Desktop*/
.sidebar-tab{
  position: sticky; 
  top: 0; 
  /*align-self: start;*/
}
/*For Mobile*/
/*#branchLocator > div > div > div:first-child > div:first-child {
    position: sticky !important;
    top: 0 !important;
    z-index: 10;
}*/
#branchLocator .branch-locator-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 10;
}

/* Branch content is controlled by filters on the updated frontend layout. */
#branchLocator .branch-content {
    display: block;
}
/* Original animation - remove delays */
.branch-card {
    animation: fadeInUp 0.5s ease-out both;
    animation-delay: 0s !important; /* Remove staggered delays */
}

/* Or remove the delay completely */
.branch-card {
    opacity: 0;
    transition: all 0.3s ease;
}

#branchLocator .branch-content.active .branch-card {
    opacity: 1;
    animation: fadeInUp 0.5s ease-out;
}

/* ============================================
   Updated Branch Locator Layout + Leaflet Map
   ============================================ */

#branchLocator {
    overflow: hidden;
}

#branchLocator .branch-filter-bar {
    align-items: end;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin: 0 auto 1.5rem;
    padding: 0 1rem;
}

#branchLocator .branch-filter-field {
    min-width: 0;
}

#branchLocator .branch-filter-label {
    color: #111827;
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

#branchLocator .branch-filter-select {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    color: #111827;
    min-height: 48px;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
    width: 100%;
}

#branchLocator .branch-filter-select:focus {
    border-color: #ec1c24;
    box-shadow: 0 0 0 3px rgba(236, 28, 36, 0.1);
    outline: none;
}

#branchLocator .branch-reset-button {
    background-color: #ffc400;
    border: 0;
    border-radius: 0.5rem;
    color: #111827;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
    width: 100%;
}

#branchLocator .branch-reset-button:hover,
#branchLocator .branch-reset-button:focus {
    background-color: #f2b800;
    outline: none;
}

#branchLocator .branch-current-location-button {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    color: #111827;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
    width: 100%;
}

#branchLocator .branch-current-location-button:hover,
#branchLocator .branch-current-location-button:focus {
    border-color: #ec1c24;
    outline: none;
}

#branchLocator .branch-locator-panel {
    overflow: hidden;
}

#branchLocator .branch-layout {
    display: grid;
    grid-template-columns: 1fr;
}

#branchLocator .branch-list-panel {
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem;
}

#branchLocator .branch-scroll-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

#branchLocator .branch-province-title {
    color: #000000;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    margin: 0 0 1rem;
}

#branchLocator .branch-subcategory-title {
    color: #111827;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.75rem;
    margin: 0 0 1rem;
}

#branchLocator .branch-card-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

#branchLocator .branch-card {
    cursor: pointer;
}

#branchLocator .branch-card-selected {
    border-color: #ec1c24;
    box-shadow: 0 0 0 3px rgba(236, 28, 36, 0.12), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

#branchLocator .branch-map-panel {
    min-height: 360px;
    padding: 1rem;
}

#branchLocator .branch-location-message {
    color: #B30000;
    display: none;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0;
}

#branchLocator .branch-location-message {
    display: block;
    overflow: hidden;
    background: #f6f6f6;
    padding: 0 15px;
    border-radius: 5px;
    margin-bottom: 0;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: 
        max-height 0.4s ease,
        opacity 0.3s ease,
        transform 0.3s ease,
        margin-bottom 0.4s ease,
        padding 0.4s ease;
}
#branchLocator .branch-location-message.has-message {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 0.75rem;
    padding: 5px 15px;
}


/*My Current Location Icon over Map*/
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
  border: 0px solid rgba(0,0,0,0.2) !important;
  background-clip: padding-box;
}
#branchLocator .branch-current-location-map-button {
    /*background: #ffffff;*/
    background: transparent;
    border: 0;
    cursor: pointer;
    display: block;
    height: 50px;
    padding: 0;
    width: 50px;
}

/*Current Location Pin Animated Icon*/
.icon_my-current-location-pin{
  margin-left: -20px;
  margin-top: -20px;
  width: 50px !important;
  height: 67px !important;
  transform: translate3d(400px, 325px, 0px);
  z-index: 325;
  outline-style: none;
}


#branchLocator .branch-current-location-map-button img {
    display: block;
    height: 50px;
    width: 50px;
}

#branchLocator .branch-leaflet-map {
    background-color: #f3f4f6;
    border-radius: 0.75rem;
    height: 360px;
    min-height: 360px;
    overflow: hidden;
    width: 100%;
}

#branchLocator .branch-map-popup {
    color: #111827;
    font-size: 0.875rem;
    line-height: 1.35;
}

#branchLocator .branch-map-popup a {
    color: #ec1c24;
    display: inline-block;
    font-weight: 600;
    margin-top: 0.35rem;
    text-decoration: none;
}

.leaflet-marker-icon {
  /*width: 26px !important;*/
  /*height: 33px !important;*/
}

@media (min-width: 768px) {
    #branchLocator .branch-filter-bar {
        grid-template-columns: 1.4fr 1fr 1fr auto;
        padding: 0 1.5rem;
    }

    #branchLocator .branch-reset-button {
        min-width: 120px;
    }

    #branchLocator .branch-current-location-button {
        min-width: 180px;
    }
}

@media (min-width: 1024px) {
    #branchLocator .branch-layout {
        grid-template-columns: minmax(320px, 34%) minmax(0, 1fr);
        min-height: 650px;
    }

    #branchLocator .branch-list-panel {
        border-bottom: 0;
        border-right: 1px solid #e5e7eb;
        padding: 1.5rem;
    }

    #branchLocator .branch-scroll-list {
        max-height: 650px;
        overflow-y: auto;
        padding-right: 0.75rem;
    }

    #branchLocator .branch-map-panel {
        min-height: 650px;
        padding: 1.5rem;
        position: sticky;
        top: 0;
    }

    #branchLocator .branch-leaflet-map {
        height: 650px;
        min-height: 650px;
    }

}


@media (max-width: 768px) {
.branch-map-panel {
        order: -1; /* Map goes above */
    }
}

/*Hide Leaflet Watermark*/
.leaflet-control-attribution.leaflet-control{
    display: none;
}