/* =========================
SIDRI GLOBAL CSS (.COM + .IN)
========================= */

/* ---------- Breadcrumbs (as per your spec) ---------- */
.sidri-breadcrumbs,
.sidri-breadcrumbs *{
font-size:14px !important;
}
.sidri-breadcrumbs a{
color:#64748B !important;
text-decoration:none;
}
.sidri-breadcrumbs a:hover,
.sidri-breadcrumbs a:focus{
text-decoration:underline;
}

/* ---------- Top cards row (optional) ---------- */
.sidri-byline{
display:flex;
align-items:center;
gap:16px;
padding:18px;
}

/* ---------- Bio row (optional) ---------- */
.sidri-bio{
display:flex;
align-items:flex-start;
gap:18px;
}

/* =====================================================
PERFECT CIRCLE AVATARS (DESKTOP FIX)
Works even if the source image is not 1:1.
IMPORTANT: class must be on the IMAGE WIDGET itself.
===================================================== */

/* ---- Top: Medically Written/Reviewed avatar (80x80) ---- */
.elementor-widget-image.sidri-byline__avatar,
.sidri-byline__avatar{
width:80px !important;
height:80px !important;
min-width:80px !important;
min-height:80px !important;
flex:0 0 80px !important;
border-radius:50% !important;
overflow:hidden !important;
display:block !important;
}

/* ---- Bottom: About Author/Reviewer avatar (150x150) ---- */
.elementor-widget-image.sidri-bio__avatar,
.sidri-bio__avatar{
width:150px !important;
height:150px !important;
min-width:150px !important;
min-height:150px !important;
flex:0 0 150px !important;
border-radius:50% !important;
overflow:hidden !important;
display:block !important;
}

/* Force Elementor wrappers to be a true square (prevents “cut capsule”) */
.sidri-byline__avatar .elementor-widget-container,
.sidri-byline__avatar figure,
.sidri-bio__avatar .elementor-widget-container,
.sidri-bio__avatar figure{
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
border-radius:50% !important;
overflow:hidden !important;
line-height:0 !important;
}

/* Force the img to fill the square and crop correctly */
.sidri-byline__avatar img,
.sidri-bio__avatar img{
width:100% !important;
height:100% !important;
max-width:none !important;
display:block !important;
object-fit:cover !important;
object-position:center !important;
border-radius:50% !important;
}

/* Mobile sizes */
@media (max-width:767px){
.sidri-byline{
align-items:flex-start;
gap:12px;
}
.elementor-widget-image.sidri-byline__avatar,
.sidri-byline__avatar{
width:64px !important;
height:64px !important;
min-width:64px !important;
min-height:64px !important;
flex:0 0 64px !important;
}
.sidri-bio{
gap:14px;
}
.elementor-widget-image.sidri-bio__avatar,
.sidri-bio__avatar{
width:96px !important;
height:96px !important;
min-width:96px !important;
min-height:96px !important;
flex:0 0 96px !important;
}
}

/* ---------- Final CTA (layout only; no colors) ---------- */
.sidri-final-cta{
padding:40px;
border-radius:12px;
text-align:center;
margin:60px 0;
}
@media (max-width:767px){
.sidri-final-cta{
padding:24px;
margin:40px 0;
}
}
.sidri-final-cta__btn .elementor-button{
padding:14px 22px;
border-radius:10px;
font-weight:700;
min-height:48px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
}
.sidri-final-cta__btn .elementor-button:focus-visible{
outline:2px solid currentColor;
outline-offset:3px;
}
.sidri-two-col-table table{
width:100% !important;
max-width:100% !important;
table-layout:fixed !important;
border-collapse:collapse;
}

.sidri-two-col-table table,
.sidri-two-col-table thead,
.sidri-two-col-table tbody,
.sidri-two-col-table tr,
.sidri-two-col-table th,
.sidri-two-col-table td{
box-sizing:border-box;
}

/* Kill Word-paste fixed widths */
.sidri-two-col-table table[style],
.sidri-two-col-table th[style],
.sidri-two-col-table td[style],
.sidri-two-col-table col[style]{
width:auto !important;
max-width:100% !important;
}

/* Make long text wrap instead of pushing width */
.sidri-two-col-table th,
.sidri-two-col-table td{
white-space:normal !important;
overflow-wrap:anywhere;
word-break:break-word;
hyphens:auto;
}

/* Mobile: stack rows (best for Aspect/Details tables) /
@media (max-width:767px){
.sidri-two-col-table thead{
display:none;
}
.sidri-two-col-table tr{
display:block;
width:100%;
}
.sidri-two-col-table td,
.sidri-two-col-table th{
display:block;
width:100% !important;
}
/ first column becomes a label */
.sidri-two-col-table td:first-child,
.sidri-two-col-table th:first-child{
font-weight:700;
}
}