.lubricants-page-shell { 
    background: linear-gradient(160deg, #0b4aa1 0%, #6c2c9c 100%);
    padding: 100px 0; 
    width: 100%;
}

.lubricants-search-wrap {
    max-width: 1620px;
    margin: 0 auto;
    padding: 0 125px; 
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.lubricants-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 30px;
}

.lubricants-section-title {
    font-size: 64px;
    font-weight: 900;
    line-height: 1.1;
    color: white;
    margin: 0;
    max-width: 880px;
}

.lubricants-filter-wrapper { 
    flex: 1;
    width: 100%;
}

.view-listing-used-cooking-oil .lubricants-filter-wrapper { 
    flex: 0 0 300px; 
    min-width: 280px; 
}

.lubricants-search-wrap .form-select {
    width: 100%;
    padding: 15px 25px;
    min-height: 60px;   
    border-radius: 12px;
    border: 0;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background-color: #fff;
    color: #333;
    line-height: 2;
    appearance: none; 
    -webkit-appearance: none;
}

.lubricants-search-wrap .views-exposed-form .form-type-textfield {
    border-radius: 12px;
    height: 62px;
    overflow: hidden;
    padding: 0;
    position: relative;
}

.lubricants-search-wrap .views-exposed-form .form-type-textfield input {
    font-size: 16px;
    height: 62px;
    padding-left: 20px;
    padding-right: 20px;
}

.lubricants-search-wrap .views-exposed-form .form-type-textfield button {
    box-shadow: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.view-listing-petrol-station .lubricants-search-wrap .form-select {
    min-width: 200px;
}

.lubricants-search-wrap .form-select:focus { 
    box-shadow: none; 
    outline: 2px solid #00A19C; 
}
.lubricants-search-wrap .form-select.is-placeholder { 
    color: #9aa0a6; 
}
.lubricants-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px;
    width: 100% !important;
    padding: 0;
    margin: 0;
}

.lubricants-cards-grid .views-row.odd .lubricants-card-bg {
    background-image: url(../../images/petronasroof.png);
}
.lubricants-cards-grid .views-row.even .lubricants-card-bg {
    background-image: url(../../images/petronaslogo.png);
}

.lubricants-card {
    position: relative;
    min-height: 320px;
    border-radius: 20px;
    overflow: hidden;
    border: 0;
    background: #ffffff;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); 
    display: flex;
    flex-direction: column;
    top: auto !important; left: auto !important;
    
    /* --- NEW: Animation Styles --- */
    opacity: 0; 
    animation: lubFadeIn 0.6s ease-out forwards;
}

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

.lubricants-card-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 70%;       
    opacity: 0.45; 
    pointer-events: none;
}

.lubricants-card-body { 
    position: relative; 
    z-index: 2; 
    height: 100%;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1; 
}

.lubricants-location-icon {
    width: 21px !important;
    height: 28px !important;
    display: block;
    flex: 0 0 auto;      
    object-fit: contain; 
}

.lubricants-info-stack { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

.lubricants-card-title {
    margin: 0;
    font-size: 24px;
    font-weight: 500; 
    line-height: 1.3;
    color: #111;
    text-transform: uppercase;
}

.lubricants-card-address {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: #555; 
    margin: 0;
}

.lubricants-card-address br,
.lubricants-card-address .country {
    display: none;
}

.lubricants-card-address .locality::after {
    content: " ,";
    display: inline-block;
}

.lubricants-distance-pill {
    background-color: #00A19C;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 100%;
    display: inline-block;
}

.lubricants-cta-wrapper { 
    margin-top: 24px; 
    align-self: flex-start; 
    display: none; 
}

/* --- NEW: Loader Styles --- */
.lubricants-loader-container {
    grid-column: 1 / -1; 
    display: flex;
    justify-content: center;
    padding: 40px 0;
    width: 100%;
}

.lubricants-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: lub-spin 1s ease-in-out infinite;
}

@keyframes lub-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 1024px){
    .lubricants-cards-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
    .lubricants-header-row { 
        flex-direction: column; 
        align-items: stretch; 
    }
    .lubricants-filter-wrapper { 
        flex: auto; width: 100%;
    }
}

@media (max-width: 768px){
    .lubricants-cards-grid { 
        grid-template-columns: 1fr !important; 
    }
    .lubricants-search-wrap { 
        padding: 100px 25px; 
    }
}