.before-after-page{position:relative}
.before-after__filter{margin-bottom:42px}
.before-after__filter-form{display:flex;flex-wrap:wrap;gap:14px}
.before-after__filter-controls{display:flex;gap:15px;align-items:end;width:100%}
@media (max-width:767px){.before-after__filter-controls{flex-direction:column;justify-content:center;gap:10px}}
.before-after__filter-field{display:flex;flex-direction:column}
@media (max-width:767px){.before-after__filter-field{width:100%}}
.before-after__filter-field select{border:2px solid #d9e4ef;border-radius:10px;padding:12px 30px 12px 20px;min-height:52px;font-size:1.125rem;font-weight:500;color:#223645;background-image:url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);background-repeat:no-repeat;background-position:100% 50%;-webkit-appearance:none;-moz-appearance:none;min-width:360px;max-width:450px;cursor:pointer;transition:border 0.2s}
.before-after__filter-field select:hover{border-color:#b1bac5}
@media (max-width:991px){.before-after__filter-field select{min-width:280px}}
@media (max-width:767px){.before-after__filter-field select{width:100%;max-width:100%;font-size:16px;min-height:48px;padding:10px 25px 10px 15px}}
.before-after__reset{color:#436ea2;font-weight:600;text-decoration:none;padding:10px 12px;border-radius:10px;transition:background 0.2s ease,color 0.2s ease}
@media (max-width:475px){.before-after__reset{background:rgba(67,110,162,0.08);width:100%;padding:10px;text-align:center}}
.before-after__reset:hover{background:rgba(67,110,162,0.08);color:#2e4e77}
.before-after__reset:active{background:rgba(67,110,162,0.18);color:#2e4e77}
.before-after__grid{display:grid;grid-template-columns:1fr;gap:22px}
.before-after-card{background:#fff;border:1px solid #e6edf5;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,0.05);overflow:hidden;transition:transform 0.3s ease,box-shadow 0.3s ease;display:flex;flex-direction:column;height:100%}
.before-after-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,0.08)}
.before-after-card__image{position:relative;display:block;padding-top:62.5%;background:#f5f7fb;overflow:hidden}
.before-after-card__image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 0.35s ease;z-index:1}
.before-after-card:hover .before-after-card__image img{transform:scale(1.04)}
.before-after-card__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(17,33,54,0.12),rgba(17,33,54,0.55));opacity:0;transition:opacity 0.3s ease;pointer-events:none;z-index:2}
.before-after-card__icon{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,0.92);color:#223645;font-weight:700;font-size:22px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(0,0,0,0.12)}
.before-after-card__image:hover .before-after-card__overlay{opacity:1}
.before-after-card__icon path{stroke:#436ea2}
.before-after-card__icon svg{width:38px;height:38px}
.before-after-card__hidden{display:none}
.before-after-card__body{padding:18px 20px 20px;display:flex;flex-direction:column;height:100%}
.before-after-card__doctor{display:inline-flex;align-items:center;gap:10px;width:100%;padding-top:10px;margin-top:14px;border-top:1px solid #EEE}
.before-after-card__doctor-info{display:flex;flex-direction:column;gap:2px;line-height:1}
.before-after-card__doctor-label{font-size:12px;letter-spacing:0.04em;color:#595959;font-weight:300}
.before-after-card__doctor-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,0.05);flex-shrink:0}
.before-after-card__doctor-avatar img{width:100%;height:100%;object-fit:cover}
.before-after-card__doctor-name{font-weight:500;font-size:14px;color:#223645}
.before-after-card__title{margin:0 0 5px 0;font-size:20px;color:#223645;line-height:1.3}
.before-after-card__excerpt{margin:0;color:#4a5b6b;line-height:1.5;flex-grow:1}
.before-after-card__actions{display:flex;align-items:center}
.before-after-card__cta{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:#436ea2;color:#fff;text-decoration:none;border-radius:10px;font-weight:600;transition:background 0.25s ease,transform 0.25s ease;border:none;cursor:pointer;font:inherit}
.before-after-card__cta:hover{background:#365985;transform:translateY(-1px)}
.before-after__empty{grid-column:1 / -1;text-align:center;padding:34px 12px;color:#4a5b6b;font-size:18px}
.before-after__pagination{margin-top:34px;display:flex;justify-content:center}
@media (min-width:768px){.before-after__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.before-after__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.before-after-card__body{padding:16px}.before-after-card__title{font-size:18px}}