.optical-centers-page{
    padding-block: 20px;
}

.oc-location-navigator-container{}
.oc-location-navigator-container .oc-navigator-conatiner{}
.oc-location-navigator-container .oc-navigator-conatiner + .oc-navigator-conatiner{
    margin-top: 10px;
    /* padding-top: 10px; */
}
.oc-location-navigator-container .oc-navigator-conatiner h2{
    font-weight: normal;
    margin: 0;
    margin-block-end: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.oc-location-navigator-container .oc-navigator-conatiner h2 span{
    font-size: 1.5rem;
}
.oc-location-navigator-container .oc-navigator-conatiner h2 .oc-location-select-text{
    font-size: 1.5rem;
    font-weight: bold;
}
.oc-location-navigator-container .oc-navigator-conatiner h2 .oc-location-title{
    font-size: 1.1rem;
    font-weight: bold;
}
.oc-location-navigator-container .oc-navigator-conatiner h2 .oc-location-name{
    font-size: 1.1rem;
    font-weight: bold;
    color: #fb9e2f;
}
.oc-location-navigator-container .oc-navigator-conatiner h2 .oc-location-edit{
    --fs: 1rem;
    font-size: var(--fs);
    display: flex;
    align-items: center;
    color: #a1a1a1;
    gap: 5px;
    flex-wrap: nowrap;
}
.oc-location-navigator-container .oc-navigator-conatiner h2 .oc-location-edit span{
    font-size: var(--fs);
}
.oc-location-navigator-container .oc-navigator-conatiner h2 .oc-location-edit a,
.oc-location-navigator-container .oc-navigator-conatiner h2 .oc-location-edit a:visited{
    color: #777;
}
.oc-location-navigator-container .oc-navigator-conatiner h2 .oc-location-edit a:hover,
.oc-location-navigator-container .oc-navigator-conatiner h2 .oc-location-edit a:active{
    color: #d82e37;
}

.oc-location-navigator-container .oc-navigator-conatiner .oc-location-links{
    margin: 0;
    /* margin-top: 11px; */
    padding: 0;
    padding-block: 15px;
    list-style: none;
    width: 100%;
    flex-grow: 1;
    /* border-top: 1px #0000001c solid; */
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 15px;
}
.oc-location-navigator-container .oc-navigator-conatiner .oc-location-links .oc-link-item{}
.oc-location-navigator-container .oc-navigator-conatiner .oc-location-links .oc-link-item .oc-link,
.oc-location-navigator-container .oc-navigator-conatiner .oc-location-links .oc-link-item .oc-link:visited{
    display: flex;
    gap: 10px;
    padding: 12px 15px;
    /* background: #000; */
}
.oc-location-navigator-container .oc-navigator-conatiner .oc-location-links .oc-link-item .oc-link:hover,
.oc-location-navigator-container .oc-navigator-conatiner .oc-location-links .oc-link-item .oc-link:active{}

.oc-location-navigator-container .oc-navigator-conatiner .oc-location-links .oc-link-item .oc-link .oc-link-text{}
.oc-location-navigator-container .oc-navigator-conatiner .oc-location-links .oc-link-item .oc-link .oc-link-counter{}





.optical-centers-container{
    --c-gap: 20px;
    border-top: 1px #00000024 solid;
    padding-block: 20px;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--c-gap);
}
.optical-centers-container .oc-empty{}

.optical-centers-container .oc-item{
    --oc-ipr: 3;
    --oc-gap-count: calc(var(--oc-ipr) - 1);
    --b-color: #0000002b;
    width: calc(calc(100% - calc(var(--c-gap) * var(--oc-gap-count)) ) / var(--oc-ipr));
    background: #fff;
    box-shadow: 0px 0px 8px -1px #00000024;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}
.optical-centers-container .oc-item .oc-item-name{
    font-size: 1.1rem;
    padding: 0;
    padding-top: 6px;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px var(--b-color) solid;
}
.optical-centers-container .oc-item .oc-item-address{
    margin: 0;
    padding: 8px 0;
    flex-grow: 1;
    font-size: 0.9rem;
}
.optical-centers-container .oc-item .oc-item-map-url{
    display: flex;
    flex-direction: row-reverse;
    padding-bottom: 10px;
}
.optical-centers-container .oc-item .oc-item-map-url .oc-map-link{ 
    gap: 10px;  
    padding: 10px 15px;   
    background: #333;  
    font-size: 0.8rem;
}
.optical-centers-container .oc-item .oc-item-phones{
    border-top: 1px var(--b-color) solid;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 0px;
    padding-top: 3px;
}
.optical-centers-container .oc-item .oc-item-phones li{}
.optical-centers-container .oc-item .oc-item-phones li a{}
.optical-centers-container .oc-item .oc-item-phones li a:hover{}

.optical-centers-page .oc-pagination-row{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.optical-centers-page .oc-pagination-row .page-numbers{}
.optical-centers-page .oc-pagination-row .current{
    color: #ff9f1c;
}

/* Tablet Styles (Medium Screens) */
@media (min-width: 768px) and (max-width: 1023px) {
    .optical-centers-container{}
    .optical-centers-container .oc-item{}
}
/* Mobile Styles (Smaller Screens) */
@media (max-width: 767px) {
    .oc-location-navigator-container .oc-navigator-conatiner .oc-location-links{}
    .optical-centers-container{}
    .optical-centers-container .oc-item{
    width: 100%;
}
}

/******************
** single
******************/
.oc-single-container{
    display: flex;
    gap: 30px;
}
.oc-single-container .oc-map-embed{
    width: 500px;
}
.oc-single-container .oc-map-embed iframe{}

.oc-single-container .oc-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 19px;
}
.oc-single-container .oc-details .oc-content-row{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.oc-single-container .oc-details .oc-content-row .oc-title{
    margin: 0;
    font-size: 1.5rem;
}
.oc-single-container .oc-details .oc-content-row .oc-row-title{
    color: #000000;
}
.oc-single-container .oc-details .oc-content-row .oc-row-data{}
.oc-single-container .oc-details .oc-content-row .oc-row-address{}
.oc-single-container .oc-details .oc-content-row .oc-row-phones{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.oc-single-container .oc-details .oc-content-row .oc-row-phones a{
    display: flex;
    align-items: center;
    gap: 6px;
}
.oc-single-container .oc-details .oc-content-row .oc-row-phones a i{
    font-size: 0.9rem;
    color: #ff9f1c;
}
.oc-single-container .oc-details .oc-content-row .oc-row-phones a span{}
.oc-single-container .oc-details .oc-content-row .oc-row-location{}
.oc-single-container .oc-details .oc-content-row .oc-row-location .oc-map-link{ 
    gap: 10px;  
    padding: 10px 15px;   
    background: #333;  
    font-size: 0.8rem;
}
/* Tablet Styles (Medium Screens) */
@media (min-width: 768px) and (max-width: 1023px) {
    .oc-single-container{}
    .oc-single-container .oc-map-embed{
        width:400px;
    }
    .oc-single-container .oc-details .oc-content-row .oc-title{}
}
/* Mobile Styles (Smaller Screens) */
@media (max-width: 767px) {
    .oc-single-container{
        flex-direction: column-reverse;
    }
    .oc-single-container .oc-map-embed{
        width:100%;
    }
    .oc-single-container .oc-details .oc-content-row .oc-title{}
}