/*
Theme Name: Hoffer Electric Digital Card
Theme URI: https://hofferelectric.com/
Author: SEO Expert Rankers
Author URI: https://seoexpertrankers.com/
Description: Animated mobile-first digital business card for Hoffer Electric (Winnetka, CA – family owned since 1967). One-tap Call, Text, Directions, Website, Save Contact (vCard) and Share, Google rating and reviews, GMB photo gallery with lightbox, business hours, map, QR code, enquiry form (saved to Card Leads + emailed) and social links. Every block is an Elementor widget ("Digital Card" category); the card page and Google Business photos are set up automatically on activation.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hoffer-card
Tags: one-column, custom-colors, custom-logo, business, elementor
*/

:root {
	--dc-navy: #0a1a33;
	--dc-navy-2: #13284d;
	--dc-accent: #ffc21a;
	--dc-blue: #2f8cff;
	--dc-ink: #13213a;
	--dc-text: #4f5d78;
	--dc-muted: #8a96ad;
	--dc-line: #e6ebf3;
	--dc-soft: #f4f7fc;
	--dc-card-w: 480px;
	--dc-ease: cubic-bezier(.2, .7, .2, 1);
	--dc-head: "Sora", "Segoe UI", system-ui, sans-serif;
	--dc-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; font-family: var(--dc-body); font-size: 15px; line-height: 1.6; color: var(--dc-text);
	background: var(--dc-navy); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--dc-blue); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--dc-head); color: var(--dc-ink); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
svg { flex: none; }
:focus-visible { outline: 3px solid var(--dc-accent); outline-offset: 2px; }

/* ---------- Stage ---------- */
.dc-stage { position: relative; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; gap: 70px; padding: 40px 16px 60px; }
.dc-bg { position: fixed; inset: -40px; background-size: cover; background-position: center; filter: blur(28px) saturate(1.2); transform: scale(1.1); opacity: .55; }
.dc-bg__shade { position: fixed; inset: 0; background: radial-gradient(1000px 600px at 20% 10%, rgba(47, 140, 255, .25), transparent 60%), linear-gradient(160deg, rgba(10, 26, 51, .9), rgba(7, 16, 32, .96)); }
.dc-aside { position: sticky; top: 80px; z-index: 1; width: 320px; color: #c9d4e8; display: none; animation: dc-rise 1s var(--dc-ease) .4s both; }
.dc-aside__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dc-accent); margin-bottom: 14px; }
.dc-aside h2 { color: #fff; font-size: 40px; margin-bottom: 14px; }
.dc-aside__qr { width: 210px; padding: 16px; background: #fff; border-radius: 22px; margin-top: 24px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.dc-aside__qr img, .dc-aside__qr svg, .dc-aside__qr canvas { width: 100%; height: auto; }
@media (min-width: 1000px) { .dc-aside { display: block; } }

/* ---------- Card ---------- */
.dc-card {
	position: relative; z-index: 2; width: 100%; max-width: var(--dc-card-w); background: #f2f5fb; border-radius: 30px; overflow: hidden;
	box-shadow: 0 40px 100px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); animation: dc-card-in 1s var(--dc-ease) both;
	overflow: clip;
}
@keyframes dc-card-in { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }
.dc-card .elementor-section, .dc-card .elementor-container, .dc-card .elementor-column, .dc-card .elementor-widget-wrap { max-width: 100% !important; }
.dc-card .elementor-widget-wrap { padding: 0 !important; }
.dc-card .elementor-widget:not(:last-child) { margin-bottom: 0; }

/* ---------- Profile ---------- */
.dc-profile { position: relative; background: #fff; padding-bottom: 22px; border-radius: 0 0 28px 28px; box-shadow: 0 10px 30px rgba(10, 26, 51, .06); }
.dc-cover { position: relative; height: 210px; overflow: hidden; background: linear-gradient(135deg, var(--dc-navy), var(--dc-navy-2)); }
.dc-cover__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.15); transition: opacity 1.2s ease, transform 6.5s linear; }
.dc-cover__slide.is-active { opacity: 1; transform: scale(1); }
.dc-cover__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 26, 51, .15) 0%, rgba(10, 26, 51, .7) 100%); }
.dc-cover__spark { position: absolute; left: -40%; top: 0; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-20deg); animation: dc-sweep 5s ease-in-out infinite; }
@keyframes dc-sweep { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.dc-cover__rating { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--dc-ink); font-size: 13px; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); animation: dc-rise .8s var(--dc-ease) .9s both; }
.dc-cover__rating > svg { width: 16px; height: 16px; color: #4285f4; }
.dc-cover__rating strong { font-family: var(--dc-head); }
.dc-id { text-align: center; padding: 0 22px; margin-top: -62px; position: relative; }
.dc-logo { position: relative; width: 124px; height: 124px; margin: 0 auto 14px; border-radius: 30px; background: #fff; padding: 6px; box-shadow: 0 16px 40px rgba(10, 26, 51, .25); animation: dc-pop .9s var(--dc-ease) .3s both; }
.dc-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.dc-logo > span { width: 100%; height: 100%; border-radius: 24px; background: var(--dc-navy); color: var(--dc-accent); display: grid; place-items: center; }
.dc-logo > span svg { width: 54px; height: 54px; }
.dc-logo__ring { position: absolute; inset: -6px; border-radius: 34px; border: 2px solid var(--dc-accent); opacity: .0; animation: dc-ring 2.6s ease-out 1.2s infinite; }
@keyframes dc-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes dc-pop { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
.dc-name { font-size: 27px; margin-bottom: 4px; display: inline-flex; align-items: center; gap: 8px; }
.dc-verified { width: 22px; height: 22px; border-radius: 50%; background: var(--dc-blue); color: #fff; display: grid; place-items: center; }
.dc-verified svg { width: 22px; height: 22px; }
.dc-verified svg circle { display: none; }
.dc-sub { font-size: 14.5px; margin-bottom: 14px; }
.dc-badges { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.dc-badges li { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--dc-soft); color: var(--dc-ink); font-size: 12.5px; font-weight: 600; }
.dc-badges svg { width: 13px; height: 13px; color: #d89a00; fill: currentColor; }
.dc-rise { animation: dc-rise .8s var(--dc-ease) both; animation-delay: calc(var(--d, 0) * .12s + .45s); }
@keyframes dc-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Actions ---------- */
.dc-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 16px 4px; }
.dc-action {
	position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 18px; background: #fff;
	color: var(--dc-ink); font-weight: 600; font-size: 13px; box-shadow: 0 6px 18px rgba(10, 26, 51, .06); transition: transform .3s var(--dc-ease), box-shadow .3s;
}
.dc-js .dc-actions:not(.is-in) .dc-action { opacity: 0; transform: translateY(16px) scale(.95); }
.dc-actions.is-in .dc-action { animation: dc-rise .6s var(--dc-ease) both; animation-delay: calc(var(--i) * 70ms); }
.dc-action:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(10, 26, 51, .12); }
.dc-action__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--dc-navy); color: var(--dc-accent); transition: transform .35s var(--dc-ease), background .3s, color .3s; }
.dc-action__icon svg { width: 22px; height: 22px; }
.dc-action:hover .dc-action__icon { transform: rotate(-8deg) scale(1.08); background: var(--dc-accent); color: var(--dc-navy); }
.dc-action--call .dc-action__icon { background: var(--dc-accent); color: var(--dc-navy); animation: dc-call 2.4s infinite; }
@keyframes dc-call { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 194, 26, .6); } 60% { box-shadow: 0 0 0 12px rgba(255, 194, 26, 0); } }
.dc-action--whatsapp .dc-action__icon { background: #25d366; color: #fff; }
.dc-ripple { position: absolute; border-radius: 50%; background: rgba(255, 194, 26, .35); transform: scale(0); animation: dc-ripple .6s ease-out; pointer-events: none; }
@keyframes dc-ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- Blocks ---------- */
.dc-block { margin: 14px 16px 0; padding: 22px 20px; background: #fff; border-radius: 22px; box-shadow: 0 6px 20px rgba(10, 26, 51, .05); }
.dc-js .dc-block[data-anim] { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--dc-ease), transform .8s var(--dc-ease); }
.dc-js .dc-block[data-anim].is-in { opacity: 1; transform: none; }
.elementor-editor-active .dc-block[data-anim], .elementor-editor-active .dc-actions .dc-action { opacity: 1 !important; transform: none !important; }
.dc-title { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 16px; }
.dc-title span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff5d6; color: #c58b00; }
.dc-title svg { width: 18px; height: 18px; }

/* Contact list */
.dc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dc-list li { display: flex; align-items: center; gap: 8px; }
.dc-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--dc-soft); color: var(--dc-ink); transition: background .25s, transform .25s; }
a.dc-row:hover { background: #fff5d6; transform: translateX(4px); }
.dc-row__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--dc-navy); color: var(--dc-accent); display: grid; place-items: center; flex: none; }
.dc-row__icon svg { width: 19px; height: 19px; }
.dc-row__txt { min-width: 0; }
.dc-row__txt small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--dc-muted); font-weight: 700; }
.dc-row__txt strong { display: block; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.dc-copy { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--dc-line); background: #fff; color: var(--dc-muted); cursor: pointer; display: grid; place-items: center; flex: none; transition: .25s; }
.dc-copy:hover { color: var(--dc-navy); border-color: var(--dc-accent); }
.dc-copy svg { width: 17px; height: 17px; }

/* About */
.dc-b-about p { font-size: 14.5px; }
.dc-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dc-points li { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--dc-ink); }
.dc-points svg { width: 17px; height: 17px; color: var(--dc-blue); margin-top: 2px; }

/* Services */
.dc-services { display: grid; gap: 10px; }
.dc-service { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; border: 1px solid var(--dc-line); transition: .3s var(--dc-ease); }
.dc-service:hover { border-color: var(--dc-accent); transform: translateX(4px); box-shadow: 0 8px 20px rgba(10, 26, 51, .07); }
.dc-service__icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--dc-navy), var(--dc-navy-2)); color: var(--dc-accent); display: grid; place-items: center; flex: none; transition: transform .35s var(--dc-ease); }
.dc-service:hover .dc-service__icon { transform: rotate(-8deg); }
.dc-service__icon svg { width: 24px; height: 24px; }
.dc-service h3 { font-size: 15px; margin: 0 0 2px; }
.dc-service p { font-size: 13px; margin: 0; }
.dc-block.is-in .dc-service, .dc-block.is-in .dc-list li, .dc-block.is-in .dc-gallery__item { animation: dc-rise .6s var(--dc-ease) both; animation-delay: calc(var(--i, 0) * 70ms + .15s); }

/* Gallery */
.dc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dc-gallery__item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--dc-soft); }
.dc-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.dc-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--dc-ease); }
.dc-gallery__item:hover img { transform: scale(1.12); }

/* Reviews */
.dc-gscore { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--dc-navy); color: #fff; margin-bottom: 14px; }
.dc-gscore__g { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: #4285f4; }
.dc-gscore__g svg { width: 22px; height: 22px; }
.dc-gscore strong { font-family: var(--dc-head); font-size: 28px; line-height: 1; }
.dc-gscore small { display: block; color: #b9c6dd; font-size: 12px; }
.dc-stars { display: inline-flex; gap: 2px; color: var(--dc-accent); vertical-align: middle; }
.dc-star { position: relative; display: inline-flex; width: 15px; height: 15px; }
.dc-star svg { width: 100%; height: 100%; }
.dc-star.is-empty, .dc-star.is-half { color: #cfd6e3; }
.dc-star.is-half::after { content: ""; position: absolute; inset: 0; background: var(--dc-accent); clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") center/contain no-repeat; }
.dc-reviews { overflow: hidden; margin-bottom: 14px; }
.dc-reviews__track { display: flex; transition: transform .6s var(--dc-ease); }
.dc-review { flex: 0 0 100%; margin: 0; padding: 18px; border-radius: 16px; background: var(--dc-soft); position: relative; }
.dc-review::after { content: "“"; position: absolute; right: 14px; top: -10px; font-family: Georgia, serif; font-size: 90px; color: rgba(255, 194, 26, .25); line-height: 1; }
.dc-review blockquote { margin: 10px 0 12px; font-size: 14.5px; color: var(--dc-ink); }
.dc-review figcaption { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--dc-ink); font-family: var(--dc-head); font-size: 14px; }
.dc-review figcaption span { width: 34px; height: 34px; border-radius: 50%; background: var(--dc-accent); color: var(--dc-navy); display: grid; place-items: center; }
.dc-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.dc-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #cfd6e3; cursor: pointer; transition: width .35s, background .35s; }
.dc-dots button.is-active { width: 24px; background: var(--dc-accent); }

/* Hours */
.dc-open { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #e8f8ee; color: #137a3c; font-weight: 700; font-size: 13px; margin-bottom: 12px; }
.dc-open i { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; animation: dc-blink 1.6s infinite; }
@keyframes dc-blink { 50% { opacity: .3; } }
.dc-hours { width: 100%; border-collapse: collapse; font-size: 14px; }
.dc-hours th, .dc-hours td { padding: 9px 10px; border-bottom: 1px dashed var(--dc-line); text-align: left; font-weight: 500; }
.dc-hours th { color: var(--dc-ink); font-weight: 600; }
.dc-hours td { text-align: right; }
.dc-hours tr.is-today th, .dc-hours tr.is-today td { color: var(--dc-navy); font-weight: 700; background: #fff5d6; }
.dc-hours tr.is-today th { border-radius: 10px 0 0 10px; }
.dc-hours tr.is-today td { border-radius: 0 10px 10px 0; }

/* Map */
.dc-map { height: 200px; border-radius: 16px; overflow: hidden; margin-bottom: 12px; background: var(--dc-soft); }
.dc-map iframe { width: 100%; height: 100%; border: 0; }
.dc-map__addr { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--dc-ink); font-weight: 500; }
.dc-map__addr svg { width: 18px; height: 18px; color: var(--dc-blue); margin-top: 2px; }

/* Buttons */
.dc-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px 18px; border-radius: 14px; border: 0; background: var(--dc-navy); color: #fff; font-family: var(--dc-head); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s; position: relative; overflow: hidden; }
.dc-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(10, 26, 51, .2); color: #fff; }
.dc-btn svg { width: 18px; height: 18px; }
.dc-btn--accent { background: var(--dc-accent); color: var(--dc-navy); }
.dc-btn--accent:hover { color: var(--dc-navy); }
.dc-btn--accent::after { content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); animation: dc-shine 3.4s infinite; }
@keyframes dc-shine { 0%, 60% { left: -80%; } 100% { left: 130%; } }
.dc-btn--ghost { background: var(--dc-soft); color: var(--dc-ink); }
.dc-btn--ghost:hover { background: #fff5d6; color: var(--dc-ink); box-shadow: none; }

/* QR + share */
.dc-qr { position: relative; width: 210px; margin: 6px auto 16px; padding: 14px; border-radius: 22px; background: #fff; border: 2px dashed var(--dc-line); }
.dc-qr__code img, .dc-qr__code svg, .dc-qr__code canvas { width: 100%; height: auto; display: block; }
.dc-qr__logo { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 12px; background: var(--dc-navy); color: var(--dc-accent); display: grid; place-items: center; border: 4px solid #fff; }
.dc-qr__logo svg { width: 20px; height: 20px; fill: currentColor; }
.dc-qr + .dc-btn { margin-bottom: 14px; }
.dc-b-qr > p { text-align: center; font-size: 14px; }
.dc-share { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.dc-share a, .dc-share button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--dc-soft); color: var(--dc-ink); display: grid; place-items: center; cursor: pointer; transition: .25s var(--dc-ease); }
.dc-share a:hover, .dc-share button:hover { background: var(--dc-accent); color: var(--dc-navy); transform: translateY(-3px) rotate(-6deg); }
.dc-share svg { width: 19px; height: 19px; }

/* Form */
.dc-form { display: grid; gap: 10px; }
.dc-form label span { display: block; font-size: 12.5px; font-weight: 700; color: var(--dc-ink); margin-bottom: 5px; }
.dc-form input, .dc-form select, .dc-form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--dc-line); background: var(--dc-soft); color: var(--dc-ink); font: inherit; transition: .2s; }
.dc-form input:focus, .dc-form select:focus, .dc-form textarea:focus { outline: none; border-color: var(--dc-blue); background: #fff; box-shadow: 0 0 0 4px rgba(47, 140, 255, .12); }
.dc-form .dc-btn { margin-top: 4px; }
.dc-form__msg { display: none; padding: 11px 14px; border-radius: 12px; font-weight: 600; font-size: 14px; }
.dc-form__msg.is-ok { display: block; background: #e8f8ee; color: #137a3c; }
.dc-form__msg.is-err { display: block; background: #fdecec; color: #b42318; }
.dc-hp { position: absolute !important; left: -9999px !important; }

/* Social */
.dc-social { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dc-social a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--dc-soft); color: var(--dc-ink); font-weight: 600; transition: .25s; }
.dc-social a svg { width: 20px; height: 20px; }
.dc-social a:hover { background: var(--dc-navy); color: #fff; transform: translateY(-2px); }
.dc-social--google svg { color: #4285f4; }
.dc-social--facebook svg { color: #1877f2; }
.dc-social--instagram svg { color: #e1306c; }
.dc-social--linkedin svg { color: #0a66c2; }

/* Footer */
.dc-footer { text-align: center; padding: 26px 20px 4px; font-size: 13px; color: var(--dc-muted); }
.dc-footer p { margin: 0 0 4px; }
.dc-credit a, .dc-credit strong { color: var(--dc-navy); font-weight: 700; background: linear-gradient(transparent 60%, rgba(255, 194, 26, .5) 60%); }
.dc-content { line-height: 1.7; }

/* Sticky bar */
.dc-bar { position: sticky; z-index: 50; bottom: 14px; margin: 10px 14px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 20px; background: rgba(10, 26, 51, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); animation: dc-bar-in .8s var(--dc-ease) 1.2s both; }
@keyframes dc-bar-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.dc-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px; border-radius: 14px; font-family: var(--dc-head); font-weight: 700; font-size: 14px; color: #fff; transition: .25s; }
.dc-bar a svg { width: 18px; height: 18px; }
.dc-bar__call { background: var(--dc-accent); color: var(--dc-navy) !important; }
.dc-bar__save { background: rgba(255, 255, 255, .1); }
.dc-bar a:hover { transform: translateY(-2px); }
@media (min-width: 1000px) { .dc-stage { padding-top: 50px; } }

/* Lightbox + toast */
.dc-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(5, 12, 26, .94); display: flex; align-items: center; justify-content: center; padding: 50px 14px; opacity: 0; visibility: hidden; transition: .3s; }
.dc-lightbox.is-open { opacity: 1; visibility: visible; }
.dc-lightbox img { max-width: min(900px, 94vw); max-height: 78vh; border-radius: 14px; transform: scale(.92); transition: transform .4s var(--dc-ease); }
.dc-lightbox.is-open img { transform: none; }
.dc-lightbox button { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 24px; cursor: pointer; }
.dc-lightbox__x { top: 16px; right: 16px; }
.dc-lightbox__p { left: 12px; top: 50%; }
.dc-lightbox__n { right: 12px; top: 50%; }
.dc-toast { position: fixed; z-index: 10000; left: 50%; bottom: 100px; transform: translate(-50%, 20px); padding: 11px 18px; border-radius: 999px; background: var(--dc-ink); color: #fff; font-weight: 600; font-size: 14px; opacity: 0; visibility: hidden; transition: .3s; }
.dc-toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Small phones */
@media (max-width: 520px) {
	.dc-stage { padding: 0; }
	.dc-card { border-radius: 0; box-shadow: none; }
	.dc-bg, .dc-bg__shade { display: none; }
	body { background: #f2f5fb; }
}
@media (max-width: 360px) {
	.dc-actions { grid-template-columns: repeat(2, 1fr); }
	.dc-points, .dc-social { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.dc-js .dc-block[data-anim], .dc-js .dc-actions .dc-action { opacity: 1; transform: none; }
}