/*
 * TSRDigital × Elementor
 * Maps Elementor's container/widget markup onto the theme's design classes.
 * Every section in the TSRDigital templates has the class "tsr-el".
 * Loaded only on Elementor pages, after Elementor's own CSS.
 */

/* ---------- Containers: no default padding or gaps; the design classes set spacing ---------- */
.tsr-el {
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
	--container-default-padding-block-start: 0px;
	--container-default-padding-block-end: 0px;
	--container-default-padding-inline-start: 0px;
	--container-default-padding-inline-end: 0px;
	--widgets-spacing: 0px;
	--widgets-spacing-row: 0px;
	--widgets-spacing-column: 0px;
	--kit-widget-spacing: 0px;
}
.tsr-el.e-con, .tsr-el .e-con { --gap: 0px; --row-gap: 0px; --column-gap: 0px; }
.tsr-el .elementor-widget:not(:last-child) { margin-block-end: 0; }
.tsr-el .e-con > .elementor-widget { max-width: 100%; }

/* Elementor sets these on every element; give the design's flex sizes back. */
.tsr-el .split__intro { flex: 1 1 360px; }
.tsr-el .split__grid { flex: 1.4 1 480px; }
.tsr-el .split__media { flex: 1.2 1 440px; }
.tsr-el .contact__intro { flex: 1 1 380px; }
.tsr-el .contact__form { flex: 1 1 420px; }
.tsr-el .panel__text { flex: 1 1 320px; }
.tsr-el .panel > .checklist { flex: 1 1 280px; }
.tsr-el .hscroll > *, .tsr-el .marquee__list > * { flex: none; }
.tsr-el :is(.split, .contact, .metrics, .section-head--split, .panel, .hscroll, .marquee__list, .marquee__track, .pills, .tsr-buttons, .section-head__actions, .price-row, .review__top, .area-card, .cluster, .slider-nav) { flex-direction: row; }
.tsr-el .split--reverse { flex-direction: row-reverse; }
.tsr-el :is(.stack, .card, .plan, .person, .callout) { flex-direction: column; }
.tsr-el :is(.hscroll, .marquee__list) { flex-wrap: nowrap; }
.elementor-editor-active .tsr-el .marquee__list, body:not(:has(.marquee.is-ready)) .tsr-el .marquee__list { flex-wrap: wrap; }
.tsr-el .section-head--split { align-items: flex-end; }

/* ---------- Text widgets take their look from the design class on the widget ----------
 * Generic rules, so any future class works without editing the theme:
 * 1. Text Editor paragraphs/list items always inherit from the widget, so a class on the widget
 *    (e.g. "lead", "text-s", "result__value") styles the text.
 * 2. Headings inherit size/weight when the widget has a typography class: any BEM class
 *    (contains "__"), an "h-…" class or a "text-…" class. Otherwise contextual rules apply
 *    (e.g. ".card h3").
 * 3. Contextual defaults (".card p" etc.) are re-created with :where() = zero specificity,
 *    so any class you add always wins.
 */
.tsr-el .elementor-widget-heading .elementor-heading-title { margin: 0; padding: 0; line-height: 1.25; color: inherit; }
.tsr-el .elementor-widget-heading:is([class*="__"], [class*=" h-"], [class*=" text-"], .lead, .eyebrow) .elementor-heading-title {
	font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit;
}
.tsr-el .elementor-widget-text-editor :is(p, li) { font-size: inherit; color: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.tsr-el .elementor-widget-text-editor p { margin: 0; }
.tsr-el .elementor-widget-text-editor p + p, .tsr-el .elementor-widget-text-editor p + ul, .tsr-el .elementor-widget-text-editor ul + p { margin-top: .75em; }
:where(.tsr-el :is(.card, .is-style-tsr-card, .is-style-tsr-card-alt) > .elementor-widget-text-editor) { font-size: 15px; color: var(--muted); }
:where(.tsr-el :is(.card--dark, .is-style-tsr-card-dark) > .elementor-widget-text-editor) { color: var(--dark-muted); }
:where(.tsr-el .panel__text > .elementor-widget-text-editor) { color: var(--muted); }
:where(.tsr-el .area-card > .elementor-widget-text-editor) { font-size: 14px; }
:where(.tsr-el .faq__answer .elementor-widget-text-editor) { color: var(--muted); }
:where(.tsr-el .section--dark .elementor-widget-text-editor) { color: inherit; }
.tsr-el .muted { color: var(--muted); }
.tsr-el .section--dark .muted { color: var(--dark-muted); }

.tsr-el .hero__kicker { font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--accent); }
.tsr-el .hero__headline { font-size: clamp(44px, 7vw, 80px); line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); }
.tsr-el.tsr-service-hero .hero__headline { font-size: clamp(42px, 6.4vw, 76px); }
.tsr-el.tsr-service-hero .hero__headline.hero__headline--md { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.08; }
.tsr-el .price-row { justify-content: space-between; }
.tsr-el .price-row > .elementor-widget, .tsr-el .review__top > .elementor-widget { width: auto; }
.tsr-el .area-card > .elementor-widget-heading { flex: 1; width: auto; }
.tsr-el .area-card > .elementor-widget-text-editor { flex-basis: 100%; }
.tsr-el .price-card .tsr-buttons > .elementor-widget, .tsr-el .price-card .elementor-button { width: 100%; }
.tsr-el .hero__inner--left { align-items: flex-start; }
.tsr-el .tsr-buttons.hero__actions--left { justify-content: flex-start; }
.tsr-el .service h3 a { color: var(--ink); }
.tsr-el .hero__text { max-width: 680px; }
.tsr-el .hero .eyebrow, .tsr-el.hero .eyebrow { color: var(--accent); }

/* ---------- Buttons ---------- */
.tsr-el .tsr-buttons { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.tsr-el .hero__actions, .tsr-el .cta-dark__actions, .tsr-el .center-buttons { justify-content: center; }
.tsr-el .center-buttons { margin-top: 40px; }
.tsr-el .tsr-btn .elementor-button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 12px 26px; border: 0; border-radius: 980px;
	background: var(--accent); color: #fff;
	font-family: inherit; font-size: 17px; font-weight: 500; line-height: 1.2; text-decoration: none;
	transition: background-color .2s, transform .2s var(--ease);
}
.tsr-el .tsr-btn .elementor-button:hover { background: var(--accent-hover); color: #fff; }
.tsr-el .tsr-btn .elementor-button:active { transform: scale(.98); }
.tsr-el .btn--lg .elementor-button { padding: 14px 30px; }
.tsr-el .tsr-link .elementor-button { background: none; color: var(--accent); padding: 0; border-radius: 0; }
.tsr-el .tsr-link .elementor-button:hover { background: none; color: var(--accent-hover); text-decoration: underline; }
.tsr-el .tsr-link .elementor-button-text::after { content: "\00a0›"; }
.tsr-el .section--dark .tsr-link .elementor-button { color: var(--dark-link); }
.tsr-el .btn--whatsapp .elementor-button { background: #E3F6E8; color: #0F6B2F; }
.tsr-el .btn--whatsapp .elementor-button:hover { background: #CDEFD6; color: #0B5424; }
.tsr-el.section--dark .btn--whatsapp .elementor-button, .tsr-el .section--dark .btn--whatsapp .elementor-button { background: #1F3A27; color: #7EE2A0; }
.tsr-el .btn--secondary .elementor-button { background: var(--seg); color: var(--ink); }
.tsr-el .btn--secondary .elementor-button:hover { background: var(--line); color: var(--ink); }
.tsr-el .btn--outline .elementor-button { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px currentColor; }
.tsr-el .btn--outline .elementor-button:hover { background: rgba(0, 102, 204, .06); color: var(--accent-hover); }
.tsr-el .section--dark .btn--outline .elementor-button { color: #fff; }
.tsr-el .btn--white .elementor-button { background: #fff; color: var(--ink); }
.tsr-el .btn--white .elementor-button:hover { background: var(--seg); color: var(--ink); }
.tsr-el .plan .tsr-buttons > .elementor-widget, .tsr-el .plan .tsr-btn .elementor-button { width: 100%; }

/* Numbered steps: Elementor uses ::before for background overlays, so reset it here. */
.tsr-el .steps--numbered > .e-con::before {
	position: static; inset: auto; opacity: 1; mix-blend-mode: normal; transition: none;
	width: 44px; height: 44px; border-radius: 50%; margin-bottom: 4px;
}
.tsr-el .tsr-table .price-table__note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Widgets in row layouts size to their content (Elementor makes them 100% wide). */
.tsr-el :is(.section-head--split, .tsr-buttons, .metrics, .cluster, .slider-nav, .price-row, .review__top) > .elementor-widget { width: auto; }
.tsr-el :is(.card--center, .person, .text-center) > .elementor-widget { text-align: inherit; }
.tsr-el .badge { width: fit-content; }
.tsr-el .person__photo img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.tsr-el :is(.hscroll) > .e-con { flex: none; }
.tsr-el :is(.section-head--split, .metrics) > .e-con { --width: auto; width: auto; }

/* ---------- Lists (Text Editor widget with a bullet list) ---------- */
.tsr-el .checklist > ul, .tsr-el .pills > ul, .tsr-el .numbered-list > ul { display: contents; }
.tsr-el .checklist { display: flex; flex-direction: column; gap: 14px; }
.tsr-el .checklist li { display: flex; gap: 12px; align-items: flex-start; }
.tsr-el .pills { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.tsr-el .pills li, .tsr-el .checklist li, .tsr-el .numbered-list li { list-style: none; }
.tsr-el .checklist--dark li { color: var(--dark-text); }

/* ---------- Images ---------- */
.tsr-el .elementor-widget-image img { display: block; }
.tsr-el .logo-item { display: flex; align-items: center; justify-content: center; }
.tsr-el .logo-item img { max-height: 48px; width: auto; }
.tsr-el .case__media img { width: 100%; height: 100%; object-fit: cover; }

/* Instagram reels (Image widget with link + caption) */
.tsr-el .elementor-widget-image.reel { display: block; }
.tsr-el .reel figure { margin: 0; height: 100%; }
.tsr-el .reel a { position: absolute; inset: 0; display: block; }
.tsr-el .reel img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.tsr-el .elementor-widget-image.reel::before {
	content: ""; position: absolute; left: 50%; top: 42%; z-index: 2;
	width: 56px; height: 56px; margin: -28px 0 0 -28px; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='28' fill='%23fff' fill-opacity='.2'/%3E%3Cpath d='M23 18.5v19l15-9.5z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .3s var(--ease);
}
.tsr-el .elementor-widget-image.reel:hover::before { transform: scale(1.12); }
.tsr-el .reel figcaption {
	position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; margin: 0;
	text-align: left; color: var(--dark-text); font-size: 15px; font-weight: 600; line-height: 1.3; pointer-events: none;
}
.tsr-el .reel figcaption::after { content: "Instagram reel"; display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--dark-muted); }

/* Videos (YouTube facade from the theme) */
.tsr-el .vid-slot .vid-frame { width: 100%; }
.tsr-el .vid-slot .elementor-wrapper { border-radius: var(--radius); overflow: hidden; }

/* Testimonial quote cards */
.tsr-el .quote__text { font-size: 19px; line-height: 1.45; flex: 1; }
.tsr-el .quote__by { font-size: 15px; line-height: 1.5; color: var(--muted); }
.tsr-el .quote__by strong { color: var(--ink); }

/* ---------- Tabs (process) ---------- */
.tsr-el .tabs__panels { width: 100%; }

/* ---------- FAQ (Elementor Accordion, native <details>) ---------- */
.tsr-faq {
	--n-accordion-title-font-size: 19px;
	--n-accordion-title-justify-content: space-between;
	--n-accordion-title-flex-grow: 1;
	--n-accordion-title-normal-color: var(--ink);
	--n-accordion-title-hover-color: var(--accent);
	--n-accordion-title-active-color: var(--ink);
	--n-accordion-item-title-space-between: 0px;
	--n-accordion-item-title-distance-from-content: 0px;
	--n-accordion-border-width: 0px;
	--n-accordion-padding: 0px;
	--n-accordion-border-radius: 0px;
}
.tsr-faq .e-n-accordion { border-top: 1px solid var(--line); }
.tsr-faq .e-n-accordion-item { border-bottom: 1px solid var(--line); }
.tsr-faq .e-n-accordion-item-title {
	padding: 22px 0 !important; border: 0 !important; background: none !important;
	display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: pointer;
	font-weight: 600; letter-spacing: -0.01em; list-style: none;
}
.tsr-faq .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.tsr-faq .e-n-accordion-item-title-header { flex: 1 1 auto; }
.tsr-el .tsr-faq .e-n-accordion-item-title .e-n-accordion-item-title-text { font-size: 19px; font-weight: 600; line-height: 1.35; }
.tsr-faq .e-n-accordion-item-title::after {
	content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
	background: var(--bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
	transition: transform .3s var(--ease);
}
.tsr-faq .e-n-accordion-item[open] > .e-n-accordion-item-title::after { transform: rotate(45deg); }
.tsr-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { color: var(--accent); }
.tsr-faq .faq__answer { padding: 0 52px 22px 0 !important; border: 0 !important; color: var(--muted); font-size: 17px; line-height: 1.6; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.tsr-el .split, .tsr-el .split--reverse, .tsr-el .contact, .tsr-el .panel { flex-direction: column; align-items: stretch; }
	.tsr-el .section-head--split { flex-direction: column; align-items: flex-start; }
	.tsr-el .split__intro, .tsr-el .split__grid, .tsr-el .split__media, .tsr-el .contact__intro, .tsr-el .contact__form, .tsr-el .panel__text, .tsr-el .checklist { flex: 1 1 auto; }
}

/* ---------- Sliders ---------- */
.tsr-el .hscroll > .slide, .tsr-el .slide { flex: none; width: min(340px, 82vw); --width: min(340px, 82vw); }
.tsr-el .hscroll > .slide--wide, .tsr-el .slide--wide { width: min(400px, 86vw); --width: min(400px, 86vw); }
.tsr-el .slider-nav { flex-direction: row; justify-content: flex-end; }
.tsr-el .slider-nav:has(.slider-nav__link) { justify-content: space-between; }
.tsr-el .slider-nav > .elementor-widget { width: auto; }
.tsr-el .price-table table { margin: 0; }

.tsr-el .result-card--summary .elementor-heading-title { color: #fff; }
.tsr-el .result-card .result-card__text { color: var(--muted); }
.tsr-el .result-card--summary .result-card__text { color: var(--dark-muted); }
.tsr-el .price-table :is(table, th, td) { border-left: 0; border-right: 0; border-top: 0; }

/* ---------- Placeholders: visible to logged-in editors, hidden from visitors ---------- */
body:not(.logged-in) .tsr-el .elementor-widget-image:has(img[src*="placeholder"]) { display: none; }
body:not(.logged-in) :is(.tsr-el.tsr-needs-media, .tsr-el .tsr-needs-media):not(:has(img:not([src*="placeholder"]), .vid-frame, iframe)) { display: none; }

/* ---------- Editor: show everything, no motion ---------- */
.elementor-editor-active .tsr-el *, .elementor-editor-active .tsr-el *::before { animation: none !important; }
.elementor-editor-active .panel__tab {
	display: block !important; width: fit-content; font-size: 12px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .06em; color: #6E6E73; padding: 4px 10px; border: 1px dashed #A1A1A6; border-radius: 6px;
}
.elementor-editor-active .tsr-el .marquee__list { flex-wrap: wrap; }
.elementor-editor-active .tsr-el .vid-slot { min-height: 60px; }

/* Elementor's "lazy load background images" hides every background until a container scrolls
 * into view, which would make gradient text invisible. Gradient text is not an image, so keep it.
 * (:not(#tsr) only raises specificity above Elementor's rule.) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.tsr-el .grad:not(#tsr) { background-image: linear-gradient(90deg, #0066CC 0%, #5856D6 25%, #AF52DE 50%, #D6336C 75%, #0066CC 100%) !important; }
}