.lourdes-cap {
position: absolute;
top: -12px; left: 1%;
width: 98%;
height: 22px; background: linear-gradient(90deg, #7c6832 0%, #d4c388 20%, #f7eeb8 50%, #d4c388 80%, #7c6832 100%);
border-radius: 2px;
z-index: 65; box-shadow: inset 0 -2px 5px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
gap: 8px; } .lourdes-cap::before {
content: '';
position: absolute;
top: -6px;
left: -1%;
width: 102%;
height: 12px;
background: radial-gradient(ellipse at center, #f7eeb8 0%, #c4b47a 70%, #7c6832 100%);
border-radius: 50%;
border: 1px solid #635226;
z-index: 2;
} .cap-hole {
background: #3a0a0a; box-shadow: inset 0 2px 4px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.4);
z-index: 1;
margin-top: 3px;
} .cap-hole.cross {
clip-path: polygon(33% 0, 66% 0, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0 66%, 0 33%, 33% 33%);
width: 10px;
height: 10px;
} .cap-hole.octagon {
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
width: 9px;
height: 9px;
} .flame-assembly {
z-index: 70 !important; 
}  .candle .novena-wax {
opacity: 0.5 !important;
} .candle.red .novena-case { background-color: rgba(220, 20, 60, 0.9) !important; }
.candle.blue .novena-case { background-color: rgba(20, 80, 220, 0.9) !important; }
.candle.green .novena-case { background-color: rgba(30, 150, 50, 0.9) !important; }
.candle.yellow .novena-case { background-color: rgba(250, 210, 50, 0.9) !important; }
.candle.white .novena-case { background-color: rgba(255, 255, 255, 0.9) !important; } .candle.red .votive-glass { background-color: rgba(220, 20, 60, 0.8) !important; }
.candle.blue .votive-glass { background-color: rgba(20, 80, 220, 0.8) !important; }
.candle.green .votive-glass { background-color: rgba(30, 150, 50, 0.8) !important; }
.candle.yellow .votive-glass { background-color: rgba(220, 180, 20, 0.8) !important; }
.candle.white .votive-glass { background-color: rgba(240, 240, 240, 0.8) !important; } .v-candle-preview .novena-wax {
opacity: 0.5 !important;
} .v-candle-preview .blue .novena-wax, .v-candle-preview .blue .wax-level { background-color: #1976d2 !important; }
.v-candle-preview .blue .novena-surface-oval, .v-candle-preview .blue .wax-surface-oval { background-color: #1565c0 !important; } .v-candle-preview .green .novena-wax, .v-candle-preview .green .wax-level { background-color: #388e3c !important; }
.v-candle-preview .green .novena-surface-oval, .v-candle-preview .green .wax-surface-oval { background-color: #2e7d32 !important; } .v-candle-preview .yellow .novena-wax, .v-candle-preview .yellow .wax-level { background-color: #fbc02d !important; }
.v-candle-preview .yellow .novena-surface-oval, .v-candle-preview .yellow .wax-surface-oval { background-color: #f9a825 !important; } .v-candle-preview .white .novena-wax, .v-candle-preview .white .wax-level { background-color: #f5f5f5 !important; }
.v-candle-preview .white .novena-surface-oval, .v-candle-preview .white .wax-surface-oval { background-color: #e0e0e0 !important; } .lourdes-modal-root .modal-header .btn-close-modal {
display: block !important; visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
top: 5px !important;
right: 5px !important;
background: transparent !important;
border: none !important;
font-size: 24px !important;
color: #666 !important;
cursor: pointer !important;
padding: 5px 10px !important;
z-index: 1000 !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
}
.lourdes-modal-root .modal-header .btn-close-modal:hover {
color: #d32f2f !important;
} .novena-compact-group {
background: #f9fcff; padding: 12px 15px; border-radius: 8px; border: 1px solid #cce5ff; margin-top: 15px;
}
.novena-sentence {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-weight: 600; color: #005b96; font-size: 0.9rem;
}
.pill-time {
width: auto !important; margin: 0 !important; padding: 4px 8px !important; font-weight: bold; border-radius: 6px; border: 1px solid #005b96; color: #005b96; background: #fff;
}
.novena-pills {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.pill-checkbox { margin: 0 !important; cursor: pointer; }
.pill-checkbox input[type="checkbox"] { display: none; }
.pill-label {
display: inline-block; padding: 6px 12px; background: #fff; border: 1px solid #ccc; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; font-size: 0.85rem; color: #555; user-select: none;
}
.pill-checkbox input[type="checkbox"]:checked + .pill-label {
background: #005b96; color: #fff; border-color: #005b96; box-shadow: 0 2px 4px rgba(0,91,150,0.3);
} .lourdes-modal-root .modal-header {
position: relative;
}
.lourdes-modal-root .btn-close-modal {
position: absolute;
top: 15px;
right: 15px;
background: transparent;
border: none;
font-size: 1.8rem;
line-height: 1;
color: #999;
cursor: pointer;
transition: color 0.2s;
padding: 0;
}
.lourdes-modal-root .btn-close-modal:hover {
color: #d32f2f;
}
#lourdes-app * { box-sizing: border-box; } #lourdes-app.lourdes-app-container {
z-index: 99999;
display: flex; gap: 0; width: 100%; max-width: 1100px; margin: 0 auto;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow: hidden; position: relative;
background-color: transparent; border: none; border-radius: 4px;
} #lourdes-app .lourdes-col-altar { flex: 1; position: relative; overflow: hidden; }
#lourdes-app #altar-scene { width: 100%; height: 100%; position: relative; --wind: 0px; --flicker: 1; }
#lourdes-app #altar-empty-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; text-align: center; color: #666; font-size: 1.1rem; font-style: italic; z-index: 0; } #lourdes-app .btn-mode-switch { 
width: 40%; min-width: 40%; 
position: absolute; top: 15px; right: 15px; 
background: rgba(0,0,0,0.4); color: #fff; 
border: 1px solid rgba(255,255,255,0.2); 
padding: 6px 15px; border-radius: 20px; 
font-size: 0.8rem; cursor: pointer; z-index: 10; 
backdrop-filter: blur(4px); 
}
#lourdes-app .btn-ignite { 
width: 40%; padding: 8px 20px; left: 15px; position: absolute; top: 15px; 
background: rgba(255,255,255,0.9); color: #005b96; border: 1px solid #005b96; 
border-radius: 20px; cursor: pointer; z-index: 10; font-weight: 600; 
box-shadow: 0 2px 5px rgba(0,0,0,0.1); font-size: 0.85rem; 
} #altar-rows {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 100%;
pointer-events: none;
}
.altar-side {
width: 35%; height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
pointer-events: none;
padding-bottom: 20px;
}
.altar-center {
width: 30%;
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
z-index: 5;
pointer-events: none;
}
.altar-center img {
height: 400px;
width: auto;
max-width: 100%;
object-fit: contain;
margin-bottom: -40px;
} .a-row {
position: absolute;
width: 100%;
display: flex; justify-content: center; align-items: flex-end;
pointer-events: none; gap: 5px; padding: 0 5px;
height: 80px; } .a-row::after {
content: '';
position: absolute;
bottom: 5px;
left: 10%;
width: 80%;
height: 10px;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, transparent 70%);
border-radius: 50%;
z-index: -1;
transform: scaleY(0.5);
pointer-events: none;
}
#lourdes-app .candle { pointer-events: auto; }  .r1 { bottom: 10px; z-index: 30; transform: scale(1); }
.r2 { bottom: 80px; z-index: 20; transform: scale(0.9); filter: brightness(0.95); }
.r3 { bottom: 150px; z-index: 10; transform: scale(0.8); filter: brightness(0.9); } #candles-right-container {
width: 100%; height: 100%; position: relative;
} #internal-prayer-book {
width: 95%; margin: 65px auto 10px auto; max-height: 260px !important; background: rgba(255, 255, 255, 0.95);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
pointer-events: auto;
z-index: 100;
}
.book-header {
background: linear-gradient(135deg, #005b96 0%, #004a7c 100%);
color: #fff;
padding: 12px;
text-align: center;
flex-shrink: 0; }
.book-header h4 { margin: 0; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: white; }
.book-list-scroll {
flex: 1; overflow-y: auto; padding: 0;
background: #fff;
}
.book-item {
display: flex; align-items: center;
padding: 10px 12px;
border-bottom: 1px solid rgba(0,0,0,0.05);
cursor: pointer; transition: background 0.2s;
}
.book-item:hover { background: #f0f7fb; }
.bi-thumb { width: 32px; height: 32px; border-radius: 50%; background-size: cover; background-position: center; border: 1px solid #ddd; margin-right: 10px; flex-shrink: 0; }
.bi-title { font-size: 0.85rem; color: #333; line-height: 1.2; flex: 1; font-weight: 500; }
.bi-play { color: #005b96; font-size: 1rem; opacity: 0.7; } @media (max-width: 900px) {
#lourdes-app.lourdes-app-container {
flex-direction: column; 
height: auto !important; 
overflow: visible !important;
} #lourdes-app .altar-form-overlay {
align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch;
padding: 0;
background: rgba(253, 250, 245, 0.98); }
#lourdes-app #lourdesFormBox.form-box-wide {
height: auto !important;
min-height: auto;
display: flex; flex-direction: column;
padding: 20px;
padding-bottom: 100px; }
#lourdes-app .form-split-layout {
flex-direction: column;
gap: 15px;
height: auto; overflow: visible;
}
#lourdes-app .form-part-left, #lourdes-app .form-part-right {
width: 100%;
padding: 0;
overflow: visible;
}
#lourdes-app .prayer-scroll-list {
max-height: 250px; overflow-y: auto;
} #internal-prayer-book {
margin-top: 50px !important;
margin-left: 10% !important;
max-height: 340px !important;
width: 80% !important;
position: relative;
z-index:10 !important;
}
#altar-rows { flex-direction: row; flex-wrap: wrap; height: 320px; }
.altar-side { width: 50%; padding-bottom: 0; }
.altar-center { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); width: 140px; z-index: 100; }
.altar-center img { height: 400px; }
} @media (min-width: 901px) {
#lourdes-app .form-split-layout {
display: flex !important;
flex-direction: row !important; align-items: stretch !important;
gap: 40px;
}
#lourdes-app .form-part-left, 
#lourdes-app .form-part-right {
flex: 1 !important;
width: 50% !important; max-width: 50%;
}
} #lourdes-app .candle { position: relative; cursor: pointer; transition: transform 0.2s; display: flex; justify-content: center; transform-style: preserve-3d; }
#lourdes-app .candle:hover { transform: scale(1.1) translateY(-5px); z-index: 900 !important; filter: brightness(1.15); }
#lourdes-app .flame-assembly { position: absolute; left: 50%; width: 0; height: 0; z-index: 50; transition: bottom 0.5s; pointer-events: none; transform: translateX(-50%); }
#lourdes-app .f-wick { position: absolute; bottom: -2px; left: -1px; width: 2px; height: 8px; background: #222; border-radius: 2px; }
#lourdes-app .f-base { position: absolute; bottom: 2px; left: -5px; width: 10px; height: 28px; background: radial-gradient(ellipse at center, #fff 0%, #ffdc00 40%, #ff6400 100%); border-radius: 50% 50% 20% 20%; filter: blur(0.5px); transform-origin: bottom center; animation: flame-flicker 0.1s infinite alternate; transform: skewX(calc(var(--wind) * 1)); }
#lourdes-app .f-glow { position: absolute; bottom: 8px; left: -15px; width: 30px; height: 30px; background: radial-gradient(circle, rgba(255, 200, 50, 0.2) 0%, transparent 70%); border-radius: 50%; mix-blend-mode: screen; opacity: var(--flicker); }
@keyframes flame-flicker { 0% { transform: scale(1, 1) skewX(-1deg); } 100% { transform: scale(0.95, 1.05) skewX(1deg); } } #lourdes-app .c-votive { width: 44px; height: 50px; }
#lourdes-app .votive-glass { width: 100%; height: 100%; position: relative; background: linear-gradient(90deg, rgba(120,0,20,0.7) 0%, rgba(220,20,60,0.3) 40%, rgba(220,20,60,0.3) 60%, rgba(120,0,20,0.7) 100%); border-radius: 0 0 15px 15px; box-shadow: inset 0 -5px 10px rgba(0,0,0,0.5); z-index: 1; overflow: visible; }
#lourdes-app .glass-top-oval { position: absolute; top: -3px; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2)); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; z-index: 60; }
#lourdes-app .wax-level { position: absolute; bottom: 3px; left: 2px; width: calc(100% - 4px); background: linear-gradient(90deg, #b30000 0%, #ff5500 50%, #b30000 100%); border-radius: 0 0 12px 12px; transition: height 0.5s; opacity: 0.95; }
#lourdes-app .wax-surface-oval { position: absolute; top: -2px; left: 0; width: 100%; height: 4px; background: radial-gradient(ellipse at center, #ffcc00 0%, #ff4500 100%); border-radius: 50%; box-shadow: 0 0 8px #ff9900; }
#lourdes-app .c-stick { width: 16px; height: 130px; position: relative; }
#lourdes-app .stick-assembly { width: 100%; height: 100%; position: relative; }
#lourdes-app .stick-blue-base { position: absolute; bottom: 0; left: 0; width: 100%; height: 25px; background: linear-gradient(90deg, #0d1e45 0%, #3355b5 45%, #1a2b5e 100%); border-radius: 0 0 3px 3px; z-index: 1; }
#lourdes-app .stick-white-body { position: absolute; bottom: 25px; left: 0; width: 100%; background: linear-gradient(90deg, #e0dfd5 0%, #fffdf0 45%, #f2f0e6 100%); z-index: 5; transition: height 0.5s; }
#lourdes-app .white-top-oval { position: absolute; top: -2px; left: 0; width: 100%; height: 4px; background: radial-gradient(ellipse at center, #fff 20%, #e0dfd5 100%); border-radius: 50%; }
#lourdes-app .drip-refined { position: absolute; top: 2px; left: -2px; width: 4px; height: 18px; background: linear-gradient(to bottom, #fffdf0, #e6e5d8); border-radius: 4px; opacity: 0.95; }
#lourdes-app .c-stick .flame-assembly { margin-bottom: 22px; }
#lourdes-app .c-novena { width: 56px; height: 110px; }
#lourdes-app .novena-case { width: 100%; height: 100%; position: relative; background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 30%, rgba(255,255,255,0.02) 70%, rgba(255,255,255,0.1) 100%); border: 1px solid rgba(255,255,255,0.15); border-radius: 0 0 6px 6px; box-shadow: inset 0 0 8px rgba(0,0,0,0.2); overflow: visible !important; }
#lourdes-app .case-top-oval { position: absolute; top: -4px; left: 0; width: 100%; height: 8px; border: 1px solid rgba(255,255,255,0.2); background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.15)); border-radius: 50%; z-index: 60; }
#lourdes-app .novena-wax {      position: absolute; bottom: 3px; left: 3px; width: calc(100% - 6px); background: linear-gradient(90deg, #e6e0c8 0%, #fffff0 50%, #dcd6bc 100%); transition: height 0.5s; z-index: 1; border-radius: 0 0 4px 4px; max-height: 95%; }
#lourdes-app .novena-surface-oval { position: absolute; top: -3px; left: 0; width: 100%; height: 6px; background: radial-gradient(ellipse at center, #fffef0 0%, #e0dcca 100%); border-radius: 50%; }
#lourdes-app .novena-sticker { position: absolute; top: 15%; left: 10%; width: 80%; height: 65%; background-size: cover; background-position: center; opacity: 0.9; mix-blend-mode: multiply; filter: contrast(1.1); z-index: 2; }
#lourdes-app .tooltip { position: absolute; bottom: 115%; left: 50%; transform: translateX(-50%) translateY(10px); background: rgba(30, 30, 40, 0.95); color: #fff; padding: 12px 15px; border-radius: 6px; font-size: 0.9rem; line-height: 1.4; box-shadow: 0 5px 15px rgba(0,0,0,0.3); white-space: normal; width: max-content; max-width: 220px; text-align: center; opacity: 0; pointer-events: none; transition: all 0.3s ease; z-index: 200; }
#lourdes-app .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; border-color: rgba(30, 30, 40, 0.95) transparent transparent transparent; }
#lourdes-app .candle:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } #lourdes-app .c-votive.blue .votive-glass { background: linear-gradient(90deg, rgba(0,20,100,0.7) 0%, rgba(0,100,255,0.3) 50%, rgba(0,20,100,0.7) 100%); }
#lourdes-app .c-votive.blue .wax-level { background: linear-gradient(90deg, #003366 0%, #0066cc 50%, #003366 100%); }
#lourdes-app .c-votive.green .votive-glass { background: linear-gradient(90deg, rgba(0,60,0,0.7) 0%, rgba(0,150,0,0.3) 50%, rgba(0,60,0,0.7) 100%); }
#lourdes-app .c-votive.green .wax-level { background: linear-gradient(90deg, #004d00 0%, #009900 50%, #004d00 100%); }
#lourdes-app .c-votive.white .votive-glass { background: linear-gradient(90deg, rgba(150,150,150,0.6) 0%, rgba(255,255,255,0.3) 50%, rgba(150,150,150,0.6) 100%); }
#lourdes-app .c-votive.white .wax-level { background: linear-gradient(90deg, #ccc 0%, #fff 50%, #ccc 100%); }
#lourdes-app .c-votive.yellow .votive-glass { background: linear-gradient(90deg, rgba(100,80,0,0.7) 0%, rgba(255,200,0,0.3) 50%, rgba(100,80,0,0.7) 100%); }
#lourdes-app .c-votive.yellow .wax-level { background: linear-gradient(90deg, #cc9900 0%, #ffcc00 50%, #cc9900 100%); }  .candle { position: relative; cursor: pointer; transition: transform 0.2s; display: flex; justify-content: center; transform-style: preserve-3d; }
.candle:hover { transform: scale(1.1) translateY(-5px); z-index: 900 !important; filter: brightness(1.15); } .flame-assembly { position: absolute; left: 50%; width: 0; height: 0; z-index: 50; transition: bottom 0.5s; pointer-events: none; transform: translateX(-50%); }
.f-wick { position: absolute; bottom: -2px; left: -1px; width: 2px; height: 8px; background: #222; border-radius: 2px; }
.f-base { position: absolute; bottom: 2px; left: -5px; width: 10px; height: 28px; background: radial-gradient(ellipse at center, #fff 0%, #ffdc00 40%, #ff6400 100%); border-radius: 50% 50% 20% 20%; filter: blur(0.5px); transform-origin: bottom center; animation: flame-flicker 0.1s infinite alternate; transform: skewX(calc(var(--wind) * 1)); }
.f-glow { position: absolute; bottom: 8px; left: -15px; width: 30px; height: 30px; background: radial-gradient(circle, rgba(255, 200, 50, 0.2) 0%, transparent 70%); border-radius: 50%; mix-blend-mode: screen; opacity: var(--flicker); }
@keyframes flame-flicker { 0% { transform: scale(1, 1) skewX(-1deg); } 100% { transform: scale(0.95, 1.05) skewX(1deg); } } .c-votive { width: 44px; height: 50px; position: relative; } .votive-glass { width: 100%; height: 100%; position: relative; background: linear-gradient(90deg, rgba(120,0,20,0.7) 0%, rgba(220,20,60,0.3) 40%, rgba(220,20,60,0.3) 60%, rgba(120,0,20,0.7) 100%); border-radius: 0 0 15px 15px; box-shadow: inset 0 -5px 10px rgba(0,0,0,0.5); z-index: 1; overflow: visible; }
.glass-top-oval { position: absolute; top: -3px; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2)); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; z-index: 60; }
.wax-level { position: absolute; bottom: 3px; left: 2px; width: calc(100% - 4px); background: linear-gradient(90deg, #b30000 0%, #ff5500 50%, #b30000 100%); border-radius: 0 0 12px 12px; transition: height 0.5s; opacity: 0.95; }
.wax-surface-oval { position: absolute; top: -2px; left: 0; width: 100%; height: 4px; background: radial-gradient(ellipse at center, #ffcc00 0%, #ff4500 100%); border-radius: 50%; box-shadow: 0 0 8px #ff9900; }
.c-stick { width: 16px; height: 130px; position: relative; }
.stick-assembly { width: 100%; height: 100%; position: relative; }
.stick-blue-base { position: absolute; bottom: 0; left: 0; width: 100%; height: 25px; background: linear-gradient(90deg, #0d1e45 0%, #3355b5 45%, #1a2b5e 100%); border-radius: 0 0 3px 3px; z-index: 1; }
.stick-white-body { position: absolute; bottom: 25px; left: 0; width: 100%; background: linear-gradient(90deg, #e0dfd5 0%, #fffdf0 45%, #f2f0e6 100%); z-index: 5; transition: height 0.5s; }
.white-top-oval { position: absolute; top: -2px; left: 0; width: 100%; height: 4px; background: radial-gradient(ellipse at center, #fff 20%, #e0dfd5 100%); border-radius: 50%; }
.drip-refined { position: absolute; top: 2px; left: -2px; width: 4px; height: 18px; background: linear-gradient(to bottom, #fffdf0, #e6e5d8); border-radius: 4px; opacity: 0.95; }
.c-stick .flame-assembly { margin-bottom: 22px; }
.c-novena { width: 56px; height: 110px; position: relative; } .novena-case { width: 100%; height: 100%; position: relative; background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 30%, rgba(255,255,255,0.02) 70%, rgba(255,255,255,0.1) 100%); border: 1px solid rgba(255,255,255,0.15); border-radius: 0 0 6px 6px; box-shadow: inset 0 0 8px rgba(0,0,0,0.2); overflow: visible !important; }
.case-top-oval { position: absolute; top: -4px; left: 0; width: 100%; height: 8px; border: 1px solid rgba(255,255,255,0.2); background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.15)); border-radius: 50%; z-index: 60; }
.novena-wax { position: absolute; bottom: 3px; left: 3px; width: calc(100% - 6px); background: linear-gradient(90deg, #e6e0c8 0%, #fffff0 50%, #dcd6bc 100%); transition: height 0.5s; z-index: 1; border-radius: 0 0 4px 4px; max-height: 95%; }
.novena-surface-oval { position: absolute; top: -3px; left: 0; width: 100%; height: 6px; background: radial-gradient(ellipse at center, #fffef0 0%, #e0dcca 100%); border-radius: 50%; }
.novena-sticker { position: absolute; top: 15%; left: 10%; width: 80%; height: 65%; background-size: cover; background-position: center; opacity: 0.9; mix-blend-mode: multiply; filter: contrast(1.1); z-index: 2; }
.tooltip { position: absolute; bottom: 115%; left: 50%; transform: translateX(-50%) translateY(10px); background: rgba(30, 30, 40, 0.95); color: #fff; padding: 12px 15px; border-radius: 6px; font-size: 0.9rem; line-height: 1.4; box-shadow: 0 5px 15px rgba(0,0,0,0.3); white-space: normal; width: max-content; max-width: 220px; text-align: center; opacity: 0; pointer-events: none; transition: all 0.3s ease; z-index: 200; }
.tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; border-color: rgba(30, 30, 40, 0.95) transparent transparent transparent; }
.candle:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } .c-votive.blue .votive-glass { background: linear-gradient(90deg, rgba(0,20,100,0.7) 0%, rgba(0,100,255,0.3) 50%, rgba(0,20,100,0.7) 100%); }
.c-votive.blue .wax-level { background: linear-gradient(90deg, #003366 0%, #0066cc 50%, #003366 100%); }
.c-votive.green .votive-glass { background: linear-gradient(90deg, rgba(0,60,0,0.7) 0%, rgba(0,150,0,0.3) 50%, rgba(0,60,0,0.7) 100%); }
.c-votive.green .wax-level { background: linear-gradient(90deg, #004d00 0%, #009900 50%, #004d00 100%); }
.c-votive.white .votive-glass { background: linear-gradient(90deg, rgba(150,150,150,0.6) 0%, rgba(255,255,255,0.3) 50%, rgba(150,150,150,0.6) 100%); }
.c-votive.white .wax-level { background: linear-gradient(90deg, #ccc 0%, #fff 50%, #ccc 100%); }
.c-votive.yellow .votive-glass { background: linear-gradient(90deg, rgba(100,80,0,0.7) 0%, rgba(255,200,0,0.3) 50%, rgba(100,80,0,0.7) 100%); }
.c-votive.yellow .wax-level { background: linear-gradient(90deg, #cc9900 0%, #ffcc00 50%, #cc9900 100%); } #lourdes-app .altar-form-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fdfaf5; z-index: 10000000000; display: none; align-items: center; justify-content: center; }
#lourdes-app #lourdesFormBox.form-box-wide { width: 100%; height: 100%; padding: 5px 30px; display: flex; flex-direction: column; position: relative; }
#lourdes-app .btn-close-form { position: absolute; top: 20px; right: 25px; font-size: 30px; cursor: pointer; color: #555; line-height: 1; z-index: 10; }
#lourdes-app .form-split-layout { display: flex; gap: 40px; height: 100%; overflow: hidden; }
#lourdes-app .form-part-left { flex: 1; display: flex; flex-direction: column; gap: 20px; }
#lourdes-app .form-part-right { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; padding-top: 50px; }
#lourdes-app .form-title { margin: 0 0 10px 0; color: #000; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; text-align: left; font-family: sans-serif; }
#lourdes-app .candle-selector-wrapper { display: flex; gap: 10px; justify-content: space-between; }
#lourdes-app .candle-card { flex: 1; border: none; background: transparent; cursor: pointer; transition: 0.2s; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 120px; padding: 5px; opacity: 0.6; }
#lourdes-app .candle-card:hover { opacity: 0.8; }
#lourdes-app .candle-card.selected { opacity: 1; background: rgba(255,255,255,0.5); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
#lourdes-app .cc-preview { width: 100%; height: 70px; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; transform: scale(0.8); transform-origin: bottom center; }
#lourdes-app .cc-info { display: flex; flex-direction: column; }
#lourdes-app .cc-name { font-size: 0.8rem; color: #333; line-height: 1.2; font-weight: 600; margin-top: 5px; }
#lourdes-app .cc-dur { font-size: 0.75rem; color: #666; }
#lourdes-app .intention-wrapper { flex: 1; display: flex; max-height: 50px; }
#lourdes-app .lourdes-textarea { width: 100% !important; height: 65px !important; resize: none; border: 1px solid #ccc !important; border-radius: 6px !important; padding: 10px !important; font-family: inherit; font-size: 0.95rem; background: #fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
#lourdes-app .visibility-wrapper { display: flex; gap: 20px; margin-top: 0; align-items: center; }
#lourdes-app .vis-radio-item { display: flex; align-items: center; cursor: pointer; font-size: 0.9rem; color: #333; gap: 8px; }
#lourdes-app .vis-radio-item input[type="radio"] { display: none !important; }
#lourdes-app .vis-custom-check { width: 18px; height: 18px; border: 2px solid #005b96; border-radius: 50%; position: relative; display: inline-block; flex-shrink: 0; }
#lourdes-app .vis-radio-item input:checked + .vis-custom-check::after { content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; background: #005b96; border-radius: 50%; }
#lourdes-app .vis-label { font-weight: 500; }
#lourdes-app .section-title { margin: 0 0 10px 0; color: #000; font-size: 1rem; font-weight: 700; }
#lourdes-app .search-bar-wrap { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 4px; padding: 5px 10px; background: #fff; margin-bottom: 10px; }
#lourdes-app .search-icon { font-size: 1.2rem; color: #999; margin-right: 8px; }
#lourdes-app #prayerSearchInput { border: none !important; background: transparent !important; width: 100%; font-size: 0.95rem; padding: 5px 0 !important; outline: none; box-shadow: none !important; }
#lourdes-app .prayer-scroll-list { flex: 1; overflow-y: auto; border: 1px solid #eee; background: #eef6fc; border-radius: 6px; padding: 0; margin-bottom: 20px; }
#lourdes-app .prayer-row { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #fff; cursor: pointer; transition: 0.1s; }
#lourdes-app .prayer-row:hover { background: #fff; }
#lourdes-app .prayer-row.selected { background: #fff; font-weight: bold; }
#lourdes-app .prayer-row input[type="radio"] { display: none !important; }
#lourdes-app .prayer-check-circle { width: 16px; height: 16px; border: 2px solid #005b96; border-radius: 50%; margin-right: 12px; position: relative; flex-shrink: 0; }
#lourdes-app .prayer-row input:checked + .prayer-check-circle::after, #lourdes-app .prayer-row.selected .prayer-check-circle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; background: #005b96; border-radius: 50%; }
#lourdes-app .prayer-name { font-size: 0.9rem; color: #333; }
#lourdes-app .form-footer-action { margin-top: auto; padding-top: 0; }
#lourdes-app .btn-submit-action {
pointer-events: auto;
width: auto !important; min-width: 100%;
border-radius: 50px !important;
box-shadow: 0 5px 20px rgba(0, 91, 150, 0.4) !important;
padding: 14px 28px !important;
font-size: 1rem !important; letter-spacing: 1px;
background: linear-gradient(135deg, #005b96 0%, #004a7c 100%) !important;
}
#lourdes-app .btn-submit-action:hover { background: #003355; } #lourdes-app .player-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 200; display: none; flex-direction: column; }
#lourdes-app .player-overlay.active { display: flex; }
#lourdes-app .btn-close-overlay { position: absolute; top: 10px; right: 15px; background: transparent; border: none; font-size: 28px; color: #999; cursor: pointer; z-index: 60; }
#lourdes-app .overlay-content { padding: 20px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
#lourdes-app .player-media { width: 100%; height: 200px; background: #000; overflow: hidden; margin-bottom: 15px; flex-shrink: 0; display: none; border-radius: 6px; }
#lourdes-app .player-media iframe { width: 100%; height: 100%; border: none; }
#lourdes-app #playerTitle { font-size: 1.1rem; color: #005b96; margin: 0 0 10px 0; text-align: center; padding-right: 30px; }
#lourdes-app .karaoke-box { flex: 1; overflow-y: auto; background: transparent; padding: 0 5px; margin-bottom: 15px; text-align: center; }
#lourdes-app #karaokeText { font-size: 1.1rem; line-height: 1.6; color: #444; font-family: Georgia, serif; }
#lourdes-app .k-active { color: #005b96; font-weight: bold; }
#lourdes-app .player-controls { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px solid #f0f0f0; margin-top: auto; }
#lourdes-app .ctrl-main { display: flex; gap: 15px; margin: 0 auto; transform: translateX(15px); }
#lourdes-app .btn-ctrl { width: 48px; height: 48px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
#lourdes-app .btn-ctrl.play { background: #005b96; color: #fff; }
#lourdes-app .btn-ctrl.stop { background: #f0f0f0; color: #555; }
#lourdes-app .vol-wrap { width: 80px; display: flex; align-items: center; gap: 5px; color: #999; }
#lourdes-app .vol-icon { width: 18px; }
#lourdes-app .vol-slider { width: 100%; height: 3px; background: #ddd; -webkit-appearance: none; border-radius: 2px; }
#lourdes-app .vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: #005b96; border-radius: 50%; cursor: pointer; }
#lourdes-app .share-group { position: relative; }
#lourdes-app .btn-share-t { background: transparent; border: none; color: #999; cursor: pointer; padding: 8px; }
#lourdes-app .share-menu { position: absolute; bottom: 100%; right: 0; background: #fff; border: 1px solid #eee; padding: 8px; border-radius: 6px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); display: none; flex-direction: column; gap: 8px; margin-bottom: 10px; }
#lourdes-app .share-menu.active { display: flex; }
#lourdes-app .s-i { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; border-radius: 50%; color: #555; border: none; cursor: pointer; text-decoration: none; }
#lourdes-app .s-i:hover { background: #005b96; color: #fff; }  .success-marketing-box { background:#f8fafc; border:2px solid #e2e8f0; border-radius:12px; padding:25px 20px; width:100%; box-sizing:border-box; margin-bottom:25px; }
.success-marketing-title { color:#0f172a; font-size:18px; font-weight:800; margin:0 0 10px 0; text-transform:uppercase; letter-spacing:0.5px; }
.success-marketing-desc { color:#64748b; font-size:14px; margin:0 0 20px 0; line-height: 1.4; }
.btn-upsell-primary { display:flex; flex-direction:column; justify-content:center; align-items:center; background:#004a7c; color:#ffffff; padding:15px; border-radius:8px; text-decoration:none; margin-bottom:12px; transition:transform 0.1s, box-shadow 0.1s; box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1); width: 100%; box-sizing: border-box; }
.btn-upsell-primary:hover { transform: translateY(-2px); background:#003355; color: #fff; box-shadow:0 6px 12px -2px rgba(0, 0, 0, 0.15); }
.btn-upsell-primary .title { font-size:16px; font-weight:800; }
.btn-upsell-primary .subtitle { font-size:12px; opacity:0.8; margin-top:3px; }
.btn-upsell-secondary { display:flex; flex-direction:column; justify-content:center; align-items:center; background:#ffffff; color:#004a7c; border:2px solid #004a7c; padding:13px; border-radius:8px; text-decoration:none; transition:background 0.2s; width: 100%; box-sizing: border-box; }
.btn-upsell-secondary:hover { background:#f0f7fb; color:#004a7c; }
.btn-upsell-secondary .title { font-size:15px; font-weight:700; }
.btn-upsell-secondary .subtitle { font-size:12px; color:#64748b; margin-top:3px; }
.share-divider { border-top:1px solid #e2e8f0; padding-top:15px; width:100%; margin-top: 10px; }
.share-pill-container { display:flex; justify-content:center; gap:15px; }
.share-pill { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; padding:6px 15px; border-radius:20px; text-decoration:none; transition: opacity 0.2s; }
.share-pill:hover { opacity: 0.8; }
.share-whatsapp { color:#25D366; background:#f0fdf4; border: 1px solid #bbf7d0; }
.share-facebook { color:#1877F2; background:#eff6ff; border: 1px solid #bfdbfe; } .lr-echo-container { position: fixed; bottom: 15%; left: 50%; transform: translateX(-50%); z-index: 99999; pointer-events: none; opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.lr-echo-text { color: #005b96; font-family: Georgia, serif; font-style: italic; font-size: 1.4rem; white-space: nowrap; text-shadow: 0 0 20px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,0.8); font-weight: bold; }
.lr-ambient-glow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 80%, rgba(255, 215, 0, 0.15) 0%, transparent 70%); pointer-events: none; z-index: 99998; opacity: 0; transition: opacity 0.8s ease-in-out; }
.lr-glow-active { opacity: 1; }
.lr-echo-active { animation: residualRise 5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
@keyframes residualRise { 0% { bottom: 15%; opacity: 0; filter: blur(10px); transform: translateX(-50%) scale(0.8); } 15% { opacity: 1; filter: blur(0px); transform: translateX(-50%) scale(1.1); } 80% { opacity: 1; filter: blur(0px); bottom: 45%; transform: translateX(-50%) scale(1.2); } 100% { bottom: 55%; opacity: 0; filter: blur(20px); transform: translateX(-50%) scale(1.4); } } .history-nav-container {
position: absolute;
top: 60px; left: 50%;
transform: translateX(-50%);
z-index: 500;
width: 100%;
display: flex;
justify-content: left;
pointer-events: none; }
.reset-nav-container {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 500;
width: 100%;
display: flex;
justify-content: left;
}
.btn-history-nav {
pointer-events: auto;
background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.7);
padding: 5px 15px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
backdrop-filter: blur(2px);
}
.btn-history-nav:hover {
background: rgba(0, 91, 150, 0.8); color: #fff;
border-color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.nav-arrow { font-size: 1.2rem; line-height: 1; color: #000000;}
.nav-arrow :hover { color: #ffffff;}
.nav-text { font-size: 0.75rem; opacity: 0; max-height: 0; transition: all 0.3s; overflow: hidden; } .btn-history-nav:hover .nav-text { opacity: 1; max-height: 20px; margin-top: 5px; } .btn-history-nav.down { top: auto; bottom: 0; flex-direction: column-reverse; }
.btn-history-nav.down:hover .nav-text { margin-top: 0; margin-bottom: 5px; } #lourdesFormBox.form-box-step {
width: 95%; max-width: 600px; height: auto; max-height: 90vh;
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
display: flex; flex-direction: column;
padding: 20px;
position: relative;
} .stepper-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.step-indicator { font-size: 0.85rem; color: #bbb; font-weight: 600; text-transform: uppercase; }
.step-indicator.active { color: #005b96; }
.step-line { flex: 1; height: 1px; background: #eee; margin: 0 10px; } .step-content { display: none; flex-direction: column; height: 100%; animation: fadeInStep 0.3s ease; }
.step-content.active { display: flex; }
@keyframes fadeInStep { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.step-title { font-size: 1.2rem; color: #333; margin: 0 0 15px 0; text-align: center; font-weight: 700; } .product-cards-container { display: flex; flex-direction: column; gap: 10px; }
.product-card { 
display: flex; align-items: center; padding: 15px; 
border: 2px solid #eee; border-radius: 8px; 
cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden;
}
.product-card:hover { border-color: #005b96; background: #f9fcff; }
.product-card.selected { border-color: #005b96; background: #f0f7fb; box-shadow: 0 4px 10px rgba(0,91,150,0.1); }
.product-card.disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(1); }
.pc-icon { font-size: 2rem; margin-right: 15px; }
.pc-title { font-weight: 700; color: #333; font-size: 1rem; }
.pc-desc { font-size: 0.85rem; color: #666; }
.pc-price { margin-left: auto; font-weight: 700; color: #005b96; font-size: 1.1rem; }
.pc-badge { position: absolute; top: 0; right: 0; background: #eee; color: #555; font-size: 0.7rem; padding: 2px 6px; border-bottom-left-radius: 6px; } .sub-option-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
.candle-mini-selector { display: flex; gap: 5px; }
.cms-item { padding: 5px 10px; border: 1px solid #ddd; border-radius: 20px; font-size: 0.8rem; cursor: pointer; color: #666; }
.cms-item.selected { background: #005b96; color: #fff; border-color: #005b96; }
.prayer-link-preview { display: flex; align-items: center; background: #f5f5f5; padding: 10px; border-radius: 6px; margin-top: 15px; }
.plp-icon { margin-right: 10px; }
.plp-text { flex: 1; font-size: 0.9rem; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-link-prayer { background: gray; border: 1px solid #ccc; border-radius: 4px; padding: 2px 8px; font-size: 0.75rem; cursor: pointer; } .form-footer-nav { margin-top: auto; padding-top: 20px; display: flex; justify-content: space-between; gap: 10px; }
.btn-nav-prev { background: #eee; color: #555; border: none; padding: 10px 20px; border-radius: 50px; font-weight: 600; cursor: pointer; }
.btn-nav-next { background: #005b96; color: #fff; border: none; padding: 10px 25px; border-radius: 50px; font-weight: 600; cursor: pointer; flex: 1; }
.btn-nav-next:hover { background: #004a7c; } @media (max-width: 600px) {
#lourdesFormBox.form-box-step { width: 100%; height: 100%; max-height: 100%; border-radius: 0; padding: 15px; }
.product-card { padding: 10px; }
.pc-icon { font-size: 1.5rem; margin-right: 10px; }
}  .lourdes-modal-root {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(5px);
z-index: 9999999 !important;
display: none; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.3s ease;
}
.lourdes-modal-root.open { opacity: 1; }
#lourdesFormBox.form-box-step {
width: 95%; max-width: 550px; 
background: #fff; border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
display: flex; flex-direction: column;
max-height: 90vh; overflow: hidden;
position: relative; animation: modalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalIn { from { transform: translateY(40px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .modal-header { padding: 15px 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background: #fff; z-index: 10; }
.modal-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: #222; }
.btn-close-modal { background: none; border: none; font-size: 1.8rem; line-height: 1; color: #999; cursor: pointer; padding: 0; }
.btn-close-modal:hover { color: #d32f2f; }
.modal-body { flex: 1; overflow-y: auto; padding: 20px; background: #fff; }
.modal-footer { padding: 15px 20px; border-top: 1px solid #eee; background: #fafafa; display: flex; gap: 10px; }
.btn-step-nav { flex: 1; padding: 12px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 1rem; transition: 0.2s; }
.btn-prev { flex: 0 0 50px; background: #ffee8c; color: #555; font-size: 1.2rem; }
.btn-next, #btn-confirm-ignite { background: #005b96; color: #fff; }
.btn-next:hover, #btn-confirm-ignite:hover { background: #004a7c; } .visual-candle-grid { 
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; 
}
.v-candle-card {
border: 2px solid #f0f0f0; border-radius: 10px;
padding: 10px 5px; cursor: pointer; transition: all 0.2s;
display: flex; flex-direction: column; align-items: center;
background: #fff; position: relative; overflow: hidden;
}
.v-candle-card:hover { transform: translateY(-3px); border-color: #005b96; box-shadow: 0 5px 15px rgba(0,91,150,0.1); }
.v-candle-card.selected { border-color: #005b96; background: #f0f7fb; box-shadow: inset 0 0 0 1px #005b96; } .v-candle-preview { 
height: 100px; width: 100%; 
display: flex; justify-content: center; align-items: flex-end; margin-bottom: 10px; 
background: #f7f7f7; border-radius: 6px;
position: relative;
padding-bottom: 5px; } .v-candle-preview > div {
transform: scale(0.65); transform-origin: bottom center; pointer-events: none; }
.v-candle-card.selected .v-candle-preview { background: transparent; } .v-candle-preview .c-votive, 
.v-candle-preview .c-stick, 
.v-candle-preview .c-novena {
flex-shrink: 0; transform: scale(1.2); transform-origin: bottom center;
margin: 0 !important; }   .v-card-label { font-size: 0.85rem; font-weight: 700; color: #333; text-align: center; margin-top: 5px; }
.v-card-dur { font-size: 0.75rem; color: #888; } .lourdes-textarea, .lourdes-input { width: 100%; border: 1px solid #ccc; border-radius: 6px; padding: 12px; font-size: 0.95rem; font-family: inherit; }
.lourdes-textarea:focus, .lourdes-input:focus { border-color: #005b96; outline: none; } .color-picker-wrapper { display: flex; gap: 10px; margin-top: 5px; }
.color-opt { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #e0e0e0; cursor: pointer; transition: 0.2s; }
.color-opt:hover { transform: scale(1.1); }
.color-opt.selected { border-color: #333; transform: scale(1.15); box-shadow: 0 3px 6px rgba(0,0,0,0.2); } .cp-red { background: #d32f2f; } .cp-blue { background: #1976d2; } 
.cp-white { background: #fff; } .cp-green { background: #388e3c; } 
.cp-yellow { background: #fbc02d; } .visibility-wrapper { display: flex; gap: 15px; }
.vis-radio-item { display: flex; align-items: center; cursor: pointer; }
.vis-radio-item input { display: none; }
.vis-custom-check { width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 50%; margin-right: 8px; position: relative; }
.vis-radio-item input:checked + .vis-custom-check { border-color: #005b96; }
.vis-radio-item input:checked + .vis-custom-check::after { content: ''; position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; background: #005b96; border-radius: 50%; } .success-upsell-container { margin-top: 20px; border-top: 2px dashed #eee; padding-top: 20px; }
.upsell-title { font-weight: 700; color: #333; margin-bottom: 10px; text-align: center; }
.upsell-card { display: flex; align-items: center; padding: 12px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: 0.2s; }
.upsell-card:hover { border-color: #005b96; background: #f9fcff; }
.uc-icon { font-size: 1.8rem; margin-right: 15px; }
.uc-info { flex: 1; }
.uc-title { display: block; font-weight: 700; color: #333; font-size: 0.95rem; }
.uc-desc { font-size: 0.8rem; color: #666; }
.uc-price { font-weight: 700; color: #005b96; background: #eef6fc; padding: 4px 8px; border-radius: 4px; font-size: 0.9rem; } @media (max-width: 600px) {
#lourdesFormBox.form-box-step { width: 100%; height: 100%; border-radius: 0; }
.visual-candle-grid { gap: 8px; }
.v-candle-preview { height: 80px; }
.v-candle-preview .c-votive, .v-candle-preview .c-stick, .v-candle-preview .c-novena { transform: scale(1); }
}  .lourdes-modal-root, .lourdes-modal-root * {
box-sizing: border-box !important;
} .v-candle-preview { 
height: 110px !important; 
width: 100%; 
display: flex; 
justify-content: center; 
align-items: flex-end; 
padding-bottom: 10px;
margin-bottom: 10px; 
transform: scale(1); transform-origin: bottom center; 
pointer-events: none;
overflow: visible !important; 
background: rgba(0,0,0,0.04); border-radius: 8px;
}  .v-candle-preview .c-votive,
.v-candle-preview .c-stick,
.v-candle-preview .c-novena {
position: relative !important;
flex-shrink: 0 !important; opacity: 1 !important;
visibility: visible !important;
margin: 0 !important;
transform: scale(1.1) !important; bottom: 0 !important;
filter: drop-shadow(0 4px 3px rgba(0,0,0,0.3)); }  .v-candle-preview .red .votive-glass { background-color: rgba(220, 20, 60, 0.8) !important; }
.v-candle-preview .blue .votive-glass { background-color: rgba(20, 80, 220, 0.8) !important; }
.v-candle-preview .green .votive-glass { background-color: rgba(30, 150, 50, 0.8) !important; }
.v-candle-preview .yellow .votive-glass { background-color: rgba(220, 180, 20, 0.8) !important; }
.v-candle-preview .white .votive-glass { background-color: rgba(240, 240, 240, 0.8) !important; }
.v-candle-preview .votive-glass { border: 1px solid #999 !important; }
.v-candle-preview .votive-glass .glass-top-oval { border-color: #666 !important; background-color: rgba(255, 255, 255, 0.2) !important; }
.v-candle-preview .wax-level { background-color: #f0f0f0 !important; border-top: 1px solid #ccc; } .v-candle-preview .red .novena-case { background-color: rgba(220, 20, 60, 0.9) !important; }
.v-candle-preview .blue .novena-case { background-color: rgba(20, 80, 220, 0.9) !important; }
.v-candle-preview .green .novena-case { background-color: rgba(30, 150, 50, 0.9) !important; }
.v-candle-preview .yellow .novena-case { background-color: rgba(250, 210, 50, 0.9) !important; }
.v-candle-preview .white .novena-case { background-color: rgba(255, 255, 255, 0.9) !important; }
.v-candle-preview .novena-case { border: 1px solid #777 !important; }
.v-candle-preview .novena-wax { background-color: #fbeea9 !important; }  .v-candle-preview .stick-white-body { background: #fff !important; border: 1px solid #888 !important; }
.v-candle-preview .stick-blue-base { background-color: #004a7c !important; } .v-candle-preview .flame-assembly {
display: none !important;
} .v-candle-card.selected .v-candle-preview {
background: transparent;
} #lourdes-app .candle:focus {
outline: none; filter: brightness(1.3) drop-shadow(0 0 8px gold); transform: scale(1.05); z-index: 1000 !important;
} @media (forced-colors: active) {
#lourdes-app .candle:focus {
outline: 3px solid ButtonText;
}
}  .v-candle-preview .c-votive,
.v-candle-preview .c-stick,
.v-candle-preview .c-novena {
transform: scale(0.65) !important; transform-origin: bottom center !important; bottom: 0 !important;
margin: 0 !important;
pointer-events: none;
} .v-candle-preview .c-stick {
transform: scale(0.55) !important; }
#btn-finish-success{min-width:50%;}
.uc-price{display:none;} @media (max-width: 900px) {
#lourdes-app .candle { transform: scale(0.7); margin: -10px -5px !important; 
} .altar-center img {
transform: scale(1.1); transform-origin: bottom center;
}
} .prayer-selection-list {
margin-top: 15px;
border: 1px solid #e0e0e0;
border-radius: 8px;
max-height: 220px; overflow-y: auto;
background: #fafafa;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.03); scrollbar-width: thin; 
scrollbar-color: #ccc transparent;
} .prayer-row {
display: flex;
align-items: center;
padding: 12px 15px; border-bottom: 1px solid #eee;
background: #fff;
transition: all 0.2s ease;
}
.prayer-row:last-child { border-bottom: none; }
.prayer-row:hover { 
background: #f0f7fb; 
padding-left: 20px; }
.prayer-row.selected { 
background: #e3f2fd; 
border-left: 4px solid #005b96;
}
.prayer-name { 
font-size: 0.95rem; 
color: #444; 
font-weight: 500;
}