/* /odoo_digital_business_card_coquicloud/static/src/css/vcard.css */
 :root{--bg-color: #0f172a; --card-bg: #1e293b; --text-color: #f8fafc; --text-muted: #94a3b8; --icon-bg: #334155; --btn-bg: #334155; --btn-hover: #475569; --modal-bg: #1e293b; --modal-border: #334155; --input-bg: #0f172a; --input-border: #334155; --btn-cta-text: #ffffff;}.light-mode{--bg-color: #f0f9ff; --card-bg: #ffffff; --text-color: #1e293b; --text-muted: #64748b; --accent-color: #0ea5e9; --icon-bg: #e0f2fe; --btn-bg: #e2e8f0; --btn-hover: #cbd5e1; --modal-bg: #ffffff; --modal-border: #e2e8f0; --input-bg: #f8fafc; --input-border: #e2e8f0;}body{background-attachment: fixed; color: var(--text-color); font-family: 'Inter', sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; margin: 0; overflow-x: hidden; transition: background-color 0.5s ease, color 0.5s ease;}.vcard-card{background-color: var(--card-bg); border-radius: 24px; padding: 40px 30px; width: 100%; max-width: 400px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); position: relative; z-index: 10; transition: background-color 0.5s ease; margin-top: 5rem; margin-bottom: 2rem;}.profile-img{width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--accent-color); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin-bottom: 20px; margin-top: -6.5rem; background-color: var(--card-bg);}.card-title{font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-color);}.card-subtitle{font-size: 1rem; color: var(--text-muted); font-weight: 500; margin-bottom: 1rem;}.theme-message{font-size: 1.1rem; font-weight: 600; color: var(--accent-color); margin-bottom: 1.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); animation: fadeIn 2s ease-in-out;}@keyframes fadeIn{0%{opacity: 0; transform: translateY(10px);}100%{opacity: 1; transform: translateY(0);}}.social-media-hub{display: flex; justify-content: center; gap: 15px;}.social-icon{width: 40px; height: 40px; border-radius: 50%; background-color: var(--btn-bg); color: var(--text-color); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all 0.2s; text-decoration: none;}.social-icon:hover{background-color: var(--accent-color); color: white; transform: translateY(-3px);}.btn-appointment{background: linear-gradient(135deg, var(--accent-color), #6366f1); color: white !important; font-weight: 600; border: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);}.btn-appointment:hover{filter: brightness(110%); transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);}.btn-save{background-color: var(--accent-color); color: #ffffff !important; border: none;}.btn-save:hover{background-color: var(--accent-color); filter: brightness(90%); color: #ffffff !important;}.btn-back{background-color: rgba(255, 255, 255, 0.1); border: 1px solid var(--text-muted); color: var(--text-color) !important;}.btn-back:hover{background-color: var(--btn-bg); color: var(--text-color) !important;}.footer-logo{content: url('https://coqui.cloud/web/image/website/1/logo/Coqui%20Cloud?unique=2e0b722'); height: 20px; max-height: 20px; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s;}.powered-by-text{font-size: 0.75rem; color: var(--text-muted); opacity: 0.8; transition: all 0.3s; font-weight: 500;}.vcard-powered-by a:hover .powered-by-text{color: var(--accent-color); opacity: 1;}.vcard-powered-by a:hover .footer-logo{filter: grayscale(0%); opacity: 1;}.qr-code-container{text-align: center; margin-bottom: 1.5rem;}.qr-code-container img{width: 80%; max-width: 250px; margin: 0 auto; border-radius: 12px; background-color: white; padding: 10px;}body.winter .qr-code-container img{background-color: black;}.light-mode .qr-code-container img{background-color: white !important;}.btn-contact{background-color: transparent; border: 1px solid var(--modal-border); color: var(--text-color); border-radius: 50px; padding: 10px 20px; font-weight: 500; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; text-decoration: none; width: 100%;}.btn-contact:hover{background-color: var(--accent-color); border-color: var(--accent-color); color: white !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}.btn-share{background-color: #6c757d; color: white !important; border: none;}.btn-share:hover{background-color: #5a6268; color: white !important;}.btn-group-vcard{display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 2rem; width: 100%;}.modal-content{background-color: var(--modal-bg); color: var(--text-color); border: 1px solid var(--modal-border);}.light-mode .btn-close-white{filter: none;}.animation-container{position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1;}.stars div{position: absolute; background: white; border-radius: 50%; animation: twinkle var(--duration) infinite ease-in-out; opacity: var(--opacity);}@keyframes twinkle{0%, 100%{opacity: var(--opacity); transform: scale(1);}50%{opacity: 0.2; transform: scale(0.5);}}

/* /odoo_digital_business_card_coquicloud/static/src/css/vcard_themes.css */
 body.spring{--accent-color: #28a745;}body.summer{--accent-color: #00c9e4;}body.autumn{--accent-color: #fd7e14;}.snowflakes, .leaves, .petals, .clovers, .hearts, .ghosts, .easter-items, .balloons, .confetti, .tech-items, .fireworks{position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20;}.snowflake, .leaf, .petal, .clover, .heart, .ghost, .egg, .balloon, .confetti-piece, .tech-item{position: absolute; top: -10%; font-size: 1.5em; animation: fall linear infinite; will-change: transform;}.snowflake{color: #fff;}.leaf{font-size: 2rem;}.heart{font-size: 2rem; animation-name: floatUp; bottom: -10%; top: auto;}.ghost{font-size: 2rem; animation-name: floatUp; bottom: -10%; top: auto;}.balloon{font-size: 3rem; animation-name: floatUp; bottom: -20%; top: auto;}.confetti-piece{font-size: 1.5rem; animation-name: fall;}.tech-item{font-size: 1.5rem; color: #00ff00; text-shadow: 0 0 5px #00ff00;}@keyframes fall{0%{transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 1;}100%{transform: translate3d(20px, 110vh, 0) rotate(360deg); opacity: 0;}}@keyframes floatUp{0%{transform: translate3d(0, 0, 0); opacity: 1;}100%{transform: translate3d(0, -120vh, 0); opacity: 0;}}@keyframes pop{0%{transform: translate(-50%, -50%) scale(0); opacity: 0;}50%{transform: translate(-50%, -50%) scale(1.5); opacity: 1;}100%{transform: translate(-50%, -50%) scale(1); opacity: 0;}}.firework{position: absolute; top: 50%; left: 50%; width: 0.5rem; height: 0.5rem; border-radius: 50%; animation: bang 2s infinite; opacity: 0;}.firework:nth-child(1){top: 20%; left: 20%; animation-delay: 0s; color: #ff0000;}.firework:nth-child(2){top: 30%; left: 80%; animation-delay: 0.5s; color: #00ff00;}.firework:nth-child(3){top: 50%; left: 50%; animation-delay: 1s; color: #0000ff;}@keyframes bang{0%, 100%{box-shadow: 0 0 0 0 transparent; opacity: 0;}50%{opacity: 1; box-shadow: -120px -120px 0 -2px currentColor, 120px -120px 0 -2px currentColor, 120px 120px 0 -2px currentColor, -120px 120px 0 -2px currentColor, -70px -70px 0 -2px currentColor, 70px -70px 0 -2px currentColor, 70px 70px 0 -2px currentColor, -70px 70px 0 -2px currentColor;}}.snowflake:nth-child(1), .leaf:nth-child(1), .petal:nth-child(1), .heart:nth-child(1), .ghost:nth-child(1), .balloon:nth-child(1), .tech-item:nth-child(1){left: 10%; animation-duration: 10s; animation-delay: 0s;}.snowflake:nth-child(2), .leaf:nth-child(2), .petal:nth-child(2), .heart:nth-child(2), .ghost:nth-child(2), .balloon:nth-child(2), .tech-item:nth-child(2){left: 20%; animation-duration: 12s; animation-delay: 1s;}.snowflake:nth-child(3), .leaf:nth-child(3), .petal:nth-child(3), .heart:nth-child(3), .ghost:nth-child(3), .balloon:nth-child(3), .tech-item:nth-child(3){left: 30%; animation-duration: 8s; animation-delay: 2s;}.snowflake:nth-child(4), .leaf:nth-child(4), .petal:nth-child(4), .heart:nth-child(4), .ghost:nth-child(4), .balloon:nth-child(4), .tech-item:nth-child(4){left: 40%; animation-duration: 15s; animation-delay: 0s;}.snowflake:nth-child(5), .leaf:nth-child(5), .petal:nth-child(5), .heart:nth-child(5), .ghost:nth-child(5), .balloon:nth-child(5), .tech-item:nth-child(5){left: 50%; animation-duration: 11s; animation-delay: 3s;}.snowflake:nth-child(6), .leaf:nth-child(6), .petal:nth-child(6), .heart:nth-child(6), .ghost:nth-child(6), .balloon:nth-child(6), .tech-item:nth-child(6){left: 60%; animation-duration: 9s; animation-delay: 1s;}.snowflake:nth-child(7), .leaf:nth-child(7), .petal:nth-child(7), .heart:nth-child(7), .ghost:nth-child(7), .balloon:nth-child(7), .tech-item:nth-child(7){left: 70%; animation-duration: 13s; animation-delay: 2s;}.snowflake:nth-child(8), .leaf:nth-child(8), .petal:nth-child(8), .heart:nth-child(8), .ghost:nth-child(8), .balloon:nth-child(8), .tech-item:nth-child(8){left: 80%; animation-duration: 10s; animation-delay: 4s;}.snowflake:nth-child(9), .leaf:nth-child(9), .petal:nth-child(9), .heart:nth-child(9), .ghost:nth-child(9), .balloon:nth-child(9), .tech-item:nth-child(9){left: 90%; animation-duration: 14s; animation-delay: 1s;}.snowflake:nth-child(10), .leaf:nth-child(10), .petal:nth-child(10), .heart:nth-child(10), .ghost:nth-child(10), .balloon:nth-child(10), .tech-item:nth-child(10){left: 15%; animation-duration: 11s; animation-delay: 5s;}.snowflake:nth-child(11), .leaf:nth-child(11), .petal:nth-child(11), .heart:nth-child(11), .ghost:nth-child(11), .balloon:nth-child(11), .tech-item:nth-child(11){left: 25%; animation-duration: 13s; animation-delay: 1s;}.snowflake:nth-child(12), .leaf:nth-child(12), .petal:nth-child(12), .heart:nth-child(12), .ghost:nth-child(12), .balloon:nth-child(12), .tech-item:nth-child(12){left: 35%; animation-duration: 9s; animation-delay: 3s;}.snowflake:nth-child(13), .leaf:nth-child(13), .petal:nth-child(13), .heart:nth-child(13), .ghost:nth-child(13), .balloon:nth-child(13), .tech-item:nth-child(13){left: 45%; animation-duration: 14s; animation-delay: 0s;}.snowflake:nth-child(14), .leaf:nth-child(14), .petal:nth-child(14), .heart:nth-child(14), .ghost:nth-child(14), .balloon:nth-child(14), .tech-item:nth-child(14){left: 55%; animation-duration: 10s; animation-delay: 4s;}.snowflake:nth-child(15), .leaf:nth-child(15), .petal:nth-child(15), .heart:nth-child(15), .ghost:nth-child(15), .balloon:nth-child(15), .tech-item:nth-child(15){left: 65%; animation-duration: 12s; animation-delay: 2s;}.snowflake:nth-child(16), .leaf:nth-child(16), .petal:nth-child(16), .heart:nth-child(16), .ghost:nth-child(16), .balloon:nth-child(16), .tech-item:nth-child(16){left: 75%; animation-duration: 15s; animation-delay: 1s;}.snowflake:nth-child(17), .leaf:nth-child(17), .petal:nth-child(17), .heart:nth-child(17), .ghost:nth-child(17), .balloon:nth-child(17), .tech-item:nth-child(17){left: 85%; animation-duration: 11s; animation-delay: 3s;}.snowflake:nth-child(18), .leaf:nth-child(18), .petal:nth-child(18), .heart:nth-child(18), .ghost:nth-child(18), .balloon:nth-child(18), .tech-item:nth-child(18){left: 5%; animation-duration: 13s; animation-delay: 0s;}.snowflake:nth-child(19), .leaf:nth-child(19), .petal:nth-child(19), .heart:nth-child(19), .ghost:nth-child(19), .balloon:nth-child(19), .tech-item:nth-child(19){left: 95%; animation-duration: 9s; animation-delay: 5s;}.snowflake:nth-child(20), .leaf:nth-child(20), .petal:nth-child(20), .heart:nth-child(20), .ghost:nth-child(20), .balloon:nth-child(20), .tech-item:nth-child(20){left: 12%; animation-duration: 14s; animation-delay: 2s;}.snowflake:nth-child(21), .leaf:nth-child(21), .petal:nth-child(21), .heart:nth-child(21), .ghost:nth-child(21), .balloon:nth-child(21), .tech-item:nth-child(21){left: 22%; animation-duration: 10s; animation-delay: 4s;}.snowflake:nth-child(22), .leaf:nth-child(22), .petal:nth-child(22), .heart:nth-child(22), .ghost:nth-child(22), .balloon:nth-child(22), .tech-item:nth-child(22){left: 32%; animation-duration: 12s; animation-delay: 1s;}.snowflake:nth-child(23), .leaf:nth-child(23), .petal:nth-child(23), .heart:nth-child(23), .ghost:nth-child(23), .balloon:nth-child(23), .tech-item:nth-child(23){left: 42%; animation-duration: 15s; animation-delay: 3s;}.snowflake:nth-child(24), .leaf:nth-child(24), .petal:nth-child(24), .heart:nth-child(24), .ghost:nth-child(24), .balloon:nth-child(24), .tech-item:nth-child(24){left: 52%; animation-duration: 11s; animation-delay: 0s;}.snowflake:nth-child(25), .leaf:nth-child(25), .petal:nth-child(25), .heart:nth-child(25), .ghost:nth-child(25), .balloon:nth-child(25), .tech-item:nth-child(25){left: 62%; animation-duration: 13s; animation-delay: 5s;}.snowflake:nth-child(26), .leaf:nth-child(26), .petal:nth-child(26), .heart:nth-child(26), .ghost:nth-child(26), .balloon:nth-child(26), .tech-item:nth-child(26){left: 72%; animation-duration: 9s; animation-delay: 2s;}.snowflake:nth-child(27), .leaf:nth-child(27), .petal:nth-child(27), .heart:nth-child(27), .ghost:nth-child(27), .balloon:nth-child(27), .tech-item:nth-child(27){left: 82%; animation-duration: 14s; animation-delay: 4s;}.snowflake:nth-child(28), .leaf:nth-child(28), .petal:nth-child(28), .heart:nth-child(28), .ghost:nth-child(28), .balloon:nth-child(28), .tech-item:nth-child(28){left: 92%; animation-duration: 10s; animation-delay: 1s;}.snowflake:nth-child(29), .leaf:nth-child(29), .petal:nth-child(29), .heart:nth-child(29), .ghost:nth-child(29), .balloon:nth-child(29), .tech-item:nth-child(29){left: 18%; animation-duration: 12s; animation-delay: 3s;}.snowflake:nth-child(30), .leaf:nth-child(30), .petal:nth-child(30), .heart:nth-child(30), .ghost:nth-child(30), .balloon:nth-child(30), .tech-item:nth-child(30){left: 88%; animation-duration: 15s; animation-delay: 0s;}.rainbows, .sun-container{position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20;}.rainbow{position: absolute; font-size: clamp(3rem, 10vw, 5rem); opacity: 0.3; top: 10%; left: 50%; transform: translateX(-50%);}.sun{position: absolute; font-size: clamp(3rem, 10vw, 5rem); top: 5%; right: 5%; animation: spin 20s linear infinite; will-change: transform;}@keyframes spin{100%{transform: rotate(360deg);}}