.lm-cs-page {padding: 0 24px; z-index:222; position:relative; }
.lm-cs-page .lm-container {margin-inline: auto; }
.lm-cs-page .lm-top-section { text-align: center; max-width: 1100px; margin: 0 auto 60px; }
.lm-cs-page .lm-top-section h1 { font-size: 56px; font-weight: 600; color: #004087; }
.lm-cs-page .lm-text { font-size: 18px; line-height: 1.6; font-weight: 300; margin-bottom: 25px; color: #707070; }
.lm-cs-page .lm-h2 { font-size: 24px; font-weight: 600; color: #004087; text-align: center; margin-top: 0; }
.lm-cs-page .lm-big-title { color: #004087; font-size: 96px; text-align: center; margin-bottom: 30px; font-weight: 600; text-transform: uppercase; }

/* Buton General */
.lm-cs-page .lm-btn { height: 51px; display: inline-flex; border-radius: 8px; align-items: center; justify-content: center; padding: 0 20px; font-weight: 600; transition: .3s all; font-size: 17px; cursor: pointer; border: 0 none; }
.lm-cs-page .lm-btn-accent { color: #fff; background: #004087; }
.lm-cs-page .lm-btn-accent:hover { background: #707070; }

/* Layout calculatoare */
.lm-cs-page .lm-inner-page { position: relative; }
.lm-cs-page .lm-wrap { display: flex; gap: 40px; position: relative; }
.lm-cs-page .lm-wrap p { text-align: center; }

/* Stil comun pentru ambele carduri de calcul */
.lm-cs-page .lm-calculator-box { width: 50%; padding: 55px 40px; border: 1px solid #004087; border-radius: 40px; box-shadow: 0px 0px 17px -11px rgba(0, 0, 0, 0.85); display: flex; flex-direction: column; background:white; }
.lm-cs-page .lm-calculator-box p { flex: 1; }
.lm-cs-page .lm-form-um { display: flex; align-items: center; gap: 40px; margin-top: 20px; }
.lm-cs-page .lm-form-um .lm-btn { flex-shrink: 0; width: 150px; }
.lm-cs-page .lm-calendar-input { position: relative; width: 100%; }

/* Input-ul de calendar */
.lm-cs-page .lm-calendar-input::before { content: ''; display: block; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23004087' class='bi bi-calendar' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E"); background-repeat: no-repeat; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); }
.lm-cs-page .lm-calendar-input input { border: 1px solid #858585; border-radius: 8px; width: 100%; font-size: 17px; height: 51px; background: 0 none; outline: 0; color: #004087; padding: 0 20px 0 50px; }
.lm-cs-page .lm-calendar-input input::placeholder { color: #004087; opacity: 1; }
.lm-cs-page .lm-error { position: absolute; top: 100%; left: 0; padding-top: 3px; color: red; font-size: 11px; }

/* Stil comun pentru containerele de rezultate */
.lm-cs-page .lm-result-wrapper { display: none; margin-top: 50px; text-align: center; }
.lm-cs-page .lm-inner-result { padding: 55px 40px; border: 1px solid #004087; border-radius: 40px; box-shadow: 0px 0px 17px -11px rgba(0, 0, 0, 0.85); margin-top: 50px; background:white; }
.lm-cs-page .lm_weekno { font-size: 48px; color: #707070; }
.lm-cs-page .lm-inner-result .lm-big-title { margin-top: 40px; }
.lm-cs-page .lm-result-wrapper .lm_buttons { margin-top: 40px; }

/* Loader */
.lm-cs-page .lm-loader-wrapper { background: #fff; position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10;}
.lm-cs-page .lm-loader-wrapper.active { display: flex; }
.lm-cs-page .lm-loader { position: relative; width: 40px; height: 40px; animation: animateBg 2s linear infinite; }
.lm-cs-page .lm-loader span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(calc(18deg * var(--i))); }
.lm-cs-page .lm-loader span:before { content: ""; position: absolute; top: 0; left: 0; width: calc(15px * (var(--i) / 60)); height: calc(15px * (var(--i) / 60)); border-radius: 50%; background-color: #004087; }
@keyframes animateBg { 100% { transform: rotate(360deg); } }

/* Media Queries */
@media (max-width: 991px) {
    .lm-cs-page .lm-wrap { flex-direction: column; gap: 40px; }
    .lm-cs-page .lm-calculator-box { width: 100%; }
    .lm-cs-page .lm-top-section h1 { font-size: 48px; }
    .lm-cs-page .lm-big-title { font-size: 56px; }
    .lm-cs-page .lm-h2 { font-size: 24px; }
}

@media (max-width: 767px) {
    .lm-cs-page .lm-wrap { gap: 30px; }
    .lm-cs-page .lm-top-section h1 { font-size: 38px; }
    .lm-cs-page .lm-big-title { font-size: 48px; }
    .lm-cs-page .lm-h2 { font-size: 18px; }
    .lm-cs-page .lm-form-um { flex-direction: column; gap: 10px; align-items: stretch; }
    .lm-cs-page .lm-form-um .lm-btn { width: 100%; }
    .lm-cs-page .lm-calculator-box { padding: 40px 24px; }
    /* Am eliminat !important folosind un selector mai specific */
    body > .ui-datepicker { left: 50% !important; transform: translateX(-50%); }
}