/**
 * TDF Editor — Element Pack inspired widget looks (10 unique per family)
 */

/* COUNTDOWN */
.tdf-countdown.tdf-look--look-02 .tdf-countdown__unit { border-radius: 50%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tdf-countdown.tdf-look--look-03 { background: var(--tdf-brand-dark); padding: 24px; border-radius: 12px; }
.tdf-countdown.tdf-look--look-03 .tdf-countdown__digit { color: var(--tdf-brand-accent); }
.tdf-countdown.tdf-look--look-04 .tdf-countdown__unit { background: linear-gradient(135deg, #fef9e7, #fff); border: 1px solid rgba(236,178,56,.4); }
.tdf-countdown.tdf-look--look-05 .tdf-countdown__unit { background: transparent; border-bottom: 3px solid var(--tdf-brand-primary); border-radius: 0; }
.tdf-countdown.tdf-look--look-06 .tdf-countdown__grid { gap: 8px; }
.tdf-countdown.tdf-look--look-06 .tdf-countdown__unit { background: var(--tdf-brand-primary); color: #fff; }
.tdf-countdown.tdf-look--look-06 .tdf-countdown__digit { color: #fff; }
.tdf-countdown.tdf-look--look-07 .tdf-countdown__unit { background: linear-gradient(135deg, var(--tdf-brand-dark), var(--tdf-brand-primary)); }
.tdf-countdown.tdf-look--look-07 .tdf-countdown__digit, .tdf-countdown.tdf-look--look-07 .tdf-countdown__label { color: #fff; }
.tdf-countdown.tdf-look--look-08 .tdf-countdown__unit { background: transparent; border: 2px solid var(--tdf-brand-primary); }
.tdf-countdown.tdf-look--look-09 { background: var(--tdf-brand-dark); padding: 20px; border-radius: 8px; }
.tdf-countdown.tdf-look--look-09 .tdf-countdown__digit { color: #fff; }
.tdf-countdown.tdf-look--look-10 .tdf-countdown__digit { font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }

/* CALL OUT */
.tdf-call-out.tdf-look--look-01 { background: #fef3c7; border-left: 4px solid var(--tdf-brand-accent); padding: 20px 24px; border-radius: 0 8px 8px 0; }
.tdf-call-out.tdf-look--look-02 .tdf-call-out__layout { flex-direction: row; }
.tdf-call-out.tdf-look--look-03 { text-align: center; padding: 32px; background: var(--tdf-brand-dark); color: #fff; border-radius: 16px; }
.tdf-call-out.tdf-look--look-03 .tdf-call-out__layout { flex-direction: column; align-items: center; }
.tdf-call-out.tdf-look--look-04 { background: var(--tdf-brand-dark); color: #fff; padding: 24px; border-radius: 8px; }
.tdf-call-out.tdf-look--look-05 { border: 2px solid var(--tdf-brand-accent); padding: 24px; border-radius: 12px; }
.tdf-call-out.tdf-look--look-06 { border: 2px dashed var(--tdf-brand-primary); padding: 20px; border-radius: 8px; }
.tdf-call-out.tdf-look--look-07 { background: linear-gradient(135deg, var(--tdf-brand-dark), var(--tdf-brand-primary)); color: #fff; padding: 28px; border-radius: 16px; }
.tdf-call-out.tdf-look--look-08 .tdf-call-out__layout { justify-content: space-between; flex-wrap: wrap; }
.tdf-call-out.tdf-look--look-09 { padding: 16px 24px; border-radius: 999px; background: rgba(26,116,128,.08); }
.tdf-call-out.tdf-look--look-10 { padding: 40px 32px; background: linear-gradient(135deg, rgba(236,178,56,.15), rgba(26,116,128,.08)); border-radius: 20px; }

/* FEATURED BOX */
.tdf-featured-box.tdf-look--look-02 { border-left: 5px solid var(--tdf-brand-accent); border-radius: 0 12px 12px 0; }
.tdf-featured-box.tdf-look--look-03 { background: linear-gradient(145deg, var(--tdf-brand-dark), var(--tdf-brand-primary)); color: #fff; }
.tdf-featured-box.tdf-look--look-03 .tdf-featured-box__text { color: rgba(255,255,255,.8); }
.tdf-featured-box.tdf-look--look-03 .tdf-featured-box__link { color: var(--tdf-brand-accent); }
.tdf-featured-box.tdf-look--look-04 { background: var(--tdf-brand-dark); color: #fff; }
.tdf-featured-box.tdf-look--look-04 .tdf-featured-box__text { color: rgba(255,255,255,.75); }
.tdf-featured-box.tdf-look--look-05 { backdrop-filter: blur(10px); background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.5); }
.tdf-featured-box.tdf-look--look-06:hover { transform: translateY(-8px); box-shadow: 0 20px 48px rgba(14,59,72,.15); }
.tdf-featured-box.tdf-look--look-08 { box-shadow: none; border: 1px solid #e2e8f0; }
.tdf-featured-box.tdf-look--look-09 { border: 2px solid var(--tdf-brand-accent); }
.tdf-featured-box.tdf-look--look-10 { box-shadow: 0 24px 60px rgba(14,59,72,.18); transform: perspective(800px) rotateX(2deg); }

/* CREATIVE BUTTON */
.tdf-creative-button.tdf-look--look-01 .tdf-creative-button__link { border-radius: 999px; }
.tdf-creative-button.tdf-look--look-02 .tdf-creative-button__link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-120%); transition: transform .6s; }
.tdf-creative-button.tdf-look--look-02 .tdf-creative-button__link:hover::after { transform: translateX(120%); }
.tdf-creative-button.tdf-look--look-03 .tdf-creative-button__link { background: transparent !important; border: 2px solid var(--tdf-brand-dark); color: var(--tdf-brand-dark) !important; }
.tdf-creative-button.tdf-look--look-04 .tdf-creative-button__link { box-shadow: 0 6px 0 var(--tdf-brand-dark); transform: translateY(0); }
.tdf-creative-button.tdf-look--look-04 .tdf-creative-button__link:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--tdf-brand-dark); }
.tdf-creative-button.tdf-look--look-05 .tdf-creative-button__link { background: linear-gradient(135deg, var(--tdf-brand-primary), var(--tdf-brand-accent)) !important; color: #fff !important; }
.tdf-creative-button.tdf-look--look-06 .tdf-creative-button__link:hover .tdf-creative-button__icon { transform: translateX(6px); }
.tdf-creative-button.tdf-look--look-07 .tdf-creative-button__link { background: transparent !important; border-bottom: 3px solid var(--tdf-brand-accent); border-radius: 0; padding-left: 0; padding-right: 0; }
.tdf-creative-button.tdf-look--look-08 .tdf-creative-button__link { transform: skewX(-6deg); }
.tdf-creative-button.tdf-look--look-08 .tdf-creative-button__text { transform: skewX(6deg); display: inline-block; }
.tdf-creative-button.tdf-look--look-09 .tdf-creative-button__link { background: transparent !important; box-shadow: 0 0 0 2px var(--tdf-brand-accent); color: var(--tdf-brand-dark) !important; }
.tdf-creative-button.tdf-look--look-10 .tdf-creative-button__link { box-shadow: 0 0 20px rgba(236,178,56,.5); }

/* PROCESS STEPS */
.tdf-process-steps.tdf-look--look-02 .tdf-process-steps__grid { position: relative; }
.tdf-process-steps.tdf-look--look-02 .tdf-process-steps__item::before { content: ''; position: absolute; top: 20px; left: 0; right: 0; height: 2px; background: var(--tdf-brand-primary); opacity: .2; z-index: 0; }
.tdf-process-steps.tdf-look--look-03 .tdf-process-steps__item { padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.tdf-process-steps.tdf-look--look-04 .tdf-process-steps__grid { grid-template-columns: 1fr; max-width: 480px; }
.tdf-process-steps.tdf-look--look-05 .tdf-process-steps__num { width: 48px; height: 48px; border-radius: 50%; background: var(--tdf-brand-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.tdf-process-steps.tdf-look--look-07 .tdf-process-steps__item { background: var(--tdf-brand-dark); color: #fff; padding: 20px; border-radius: 10px; }
.tdf-process-steps.tdf-look--look-07 .tdf-process-steps__text { color: rgba(255,255,255,.75); }
.tdf-process-steps.tdf-look--look-08 .tdf-process-steps__num { color: var(--tdf-brand-accent); }
.tdf-process-steps.tdf-look--look-10 .tdf-process-steps__item:nth-child(even) { margin-top: 24px; }

/* PRICE LIST */
.tdf-price-list.tdf-look--look-01 .tdf-price-list__item { border-bottom-style: dotted; }
.tdf-price-list.tdf-look--look-02 .tdf-price-list__item { border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; margin-bottom: 8px; border-bottom: none; }
.tdf-price-list.tdf-look--look-03 .tdf-price-list__item:nth-child(even) { background: #f8fafc; padding-left: 12px; padding-right: 12px; border-bottom: none; border-radius: 6px; }
.tdf-price-list.tdf-look--look-04 { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.06); }
.tdf-price-list.tdf-look--look-05 { background: var(--tdf-brand-dark); padding: 24px; border-radius: 12px; color: #fff; }
.tdf-price-list.tdf-look--look-05 .tdf-price-list__item { border-color: rgba(255,255,255,.15); }
.tdf-price-list.tdf-look--look-05 .tdf-price-list__desc { color: rgba(255,255,255,.65); }
.tdf-price-list.tdf-look--look-05 .tdf-price-list__price { color: var(--tdf-brand-accent); }
.tdf-price-list.tdf-look--look-06 .tdf-price-list__item { padding: 10px 0; }
.tdf-price-list.tdf-look--look-09 .tdf-price-list__item:hover { background: rgba(26,116,128,.06); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 6px; }

/* HOVER BOX — look variants */
.tdf-hover-box.tdf-look--look-02 .tdf-hover-box__overlay { transform: translateY(100%); opacity: 1; transition: transform .4s ease; }
.tdf-hover-box.tdf-look--look-02 .tdf-hover-box__wrap:hover .tdf-hover-box__overlay { transform: translateY(0); }
.tdf-hover-box.tdf-look--look-04 .tdf-hover-box__default { opacity: 1; transition: opacity .3s; }
.tdf-hover-box.tdf-look--look-04 .tdf-hover-box__wrap:hover .tdf-hover-box__default { opacity: 0; }
.tdf-hover-box.tdf-look--look-05 .tdf-hover-box__overlay { background: linear-gradient(135deg, rgba(14,59,72,.92), rgba(26,116,128,.85)); }
.tdf-hover-box.tdf-look--look-07 .tdf-hover-box__wrap { border: 3px solid var(--tdf-brand-accent); }
.tdf-hover-box.tdf-look--look-09 .tdf-hover-box__overlay { background: rgba(236,178,56,.92); color: var(--tdf-brand-dark); }

/* MARQUEE */
.tdf-marquee.tdf-look--look-02 { background: var(--tdf-brand-dark); padding: 16px 0; }
.tdf-marquee.tdf-look--look-02 .tdf-marquee__item { color: #fff; }
.tdf-marquee.tdf-look--look-03 .tdf-marquee__item { color: var(--tdf-brand-accent); }
.tdf-marquee.tdf-look--look-04 .tdf-marquee__item { border: 2px solid var(--tdf-brand-primary); padding: 8px 20px; border-radius: 999px; font-size: 1rem; }
.tdf-marquee.tdf-look--look-05 .tdf-marquee__item { font-size: 2.5rem; }
.tdf-marquee.tdf-look--look-06 .tdf-marquee__item::after { content: '•'; margin-left: 48px; opacity: .35; }
.tdf-marquee.tdf-look--look-07 { background: linear-gradient(90deg, var(--tdf-brand-dark), var(--tdf-brand-primary)); padding: 14px 0; }
.tdf-marquee.tdf-look--look-07 .tdf-marquee__item { color: #fff; }
.tdf-marquee.tdf-look--look-08 .tdf-marquee__item { text-transform: uppercase; letter-spacing: .12em; font-size: 1.125rem; }

/* LOGO GRID — reuse logo-slider looks pattern */
.tdf-logo-grid.tdf-look--look-01 .tdf-logo-grid__item img { filter: grayscale(100%); opacity: .65; }
.tdf-logo-grid.tdf-look--look-01 .tdf-logo-grid__item:hover img { filter: none; opacity: 1; }
.tdf-logo-grid.tdf-look--look-02 .tdf-logo-grid__item { border: 1px solid #e2e8f0; border-radius: 8px; }
.tdf-logo-grid.tdf-look--look-03 .tdf-logo-grid__item { box-shadow: 0 4px 16px rgba(0,0,0,.06); border-radius: 10px; background: #fff; }
.tdf-logo-grid.tdf-look--look-04 { background: var(--tdf-brand-dark); padding: 32px 20px; border-radius: 12px; }
.tdf-logo-grid.tdf-look--look-04 .tdf-logo-grid__item img { filter: brightness(0) invert(1); opacity: .85; }
.tdf-logo-grid.tdf-look--look-05 .tdf-logo-grid__item { background: #f1f5f9; border-radius: 999px; }
.tdf-logo-grid.tdf-look--look-06 .tdf-logo-grid__item:hover { transform: scale(1.1); }

/* ANIMATED HEADING */
.tdf-animated-heading.tdf-look--look-02 .tdf-animated-heading__rotate { background: linear-gradient(135deg, var(--tdf-brand-primary), var(--tdf-brand-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.tdf-animated-heading.tdf-look--look-03 .tdf-animated-heading__rotate { border-bottom: 4px solid var(--tdf-brand-accent); padding-bottom: 4px; }
.tdf-animated-heading.tdf-look--look-06 .tdf-animated-heading__word { transform-origin: center bottom; }
.tdf-animated-heading.tdf-look--look-08 .tdf-animated-heading__rotate { color: var(--tdf-brand-accent); text-shadow: 0 2px 12px rgba(236,178,56,.35); }

/* DIVIDER */
.tdf-divider.tdf-look--look-05 .tdf-divider__line { background: linear-gradient(90deg, transparent, var(--tdf-brand-primary), transparent); opacity: 1; }
.tdf-divider.tdf-look--look-06 .tdf-divider__line { background: var(--tdf-brand-accent); opacity: 1; height: 3px; }
.tdf-divider.tdf-look--look-07 .tdf-divider__line { background: transparent; border-top: 2px dashed var(--tdf-brand-primary); height: 0; }