.cips-container {
max-width: max-content;
margin: 0 auto;
padding: 2rem 1rem;
} .cips-header {
text-align: center;
margin-bottom: 3rem;
}
.cips-title {
color: #1c417b;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.cips-subtitle {
color: #666;
font-size: 1.1rem;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
} .cips-property-selector {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
margin-bottom: 3rem;
position: relative;
}
.cips-property-card {
background-color: #fff;
border-radius: 8px;
border: 1px solid #e5e5e5;
padding: 1rem;
text-align: center;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease,
filter 0.3s ease;
width: 175px;
height: 175px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
opacity: 1;
filter: grayscale(0%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.cips-property-card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
} .cips-property-selector.has-selection .cips-property-card:not(.selected) {
opacity: 0.65;
filter: grayscale(40%);
}
.cips-property-card.selected {
border-color: #1c417b;
background-color: #f5f8ff;
opacity: 1;
filter: grayscale(0%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.cips-property-icon {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-bottom: 0.5rem;
}
.cips-property-icon img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.cips-property-name {
font-weight: 600;
color: #333;
font-size: 1.1rem;
margin-top: auto;
} .cips-pricing-section {
margin: 4rem auto 2rem;
position: relative;
} .cips-price-box {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
padding: 2rem;
max-width: 500px;
margin: 0 auto;
text-align: center;
position: relative;
display: none; border: 1px solid #1c417b;
}
.cips-price-description {
color: #666;
font-size: 0.95rem;
margin-top: 0.5rem;
}
.cips-price-header {
color: #1c417b;
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 1rem;
} .cips-rooms-text {
color: #666;
font-size: 0.9rem;
margin-top: 0.2rem;
font-weight: normal;
}
.cips-price-amount {
margin: 1.5rem 0;
display: flex;
justify-content: center;
align-items: baseline;
}
.cips-price-value {
font-size: 4rem;
font-weight: 700;
color: #1c417b;
position: relative;
}
.cips-price-value .decimal-part {
font-size: 2rem;
font-weight: 600;
vertical-align: baseline;
position: relative;
} .cips-iva-text {
font-size: 0.8rem;
font-weight: normal;
color: #666;
margin-left: 4px;
vertical-align: super;
white-space: nowrap;
}
.cips-price-currency {
font-size: 2rem;
font-weight: 600;
color: #1c417b;
} .cips-price-toggle {
display: flex;
align-items: center;
justify-content: center;
margin: 1.5rem 0;
} .cips-price-toggle.monthly-disabled .cips-price-mensual {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.cips-price-toggle.monthly-disabled .cips-toggle-slider {
background-color: #1c417b;
opacity: 0.7;
cursor: not-allowed;
}
.cips-price-mensual,
.cips-price-anual {
font-size: 1rem;
color: #666;
margin: 0 0.8rem;
cursor: pointer;
}
.cips-price-mensual.active,
.cips-price-anual.active {
color: #1c417b;
font-weight: 600;
}
.cips-toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
} .cips-toggle-switch.disabled {
pointer-events: none;
opacity: 0.6;
position: relative;
} .cips-toggle-switch.disabled:after {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: transparent;
z-index: 100;
cursor: not-allowed;
} .cips-toggle-switch.disabled ~ .cips-price-mensual,
.cips-toggle-switch.disabled ~ .cips-price-anual {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.cips-toggle-switch.disabled .cips-toggle-slider {
background-color: #1c417b;
cursor: not-allowed;
}
.cips-toggle-switch.disabled .cips-toggle-slider:before {
transform: translateX(30px);
}
.cips-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
} .cips-toggle-switch.disabled input {
pointer-events: none;
}
.cips-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
transition: 0.4s;
}
.cips-toggle-slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%;
transition: 0.4s;
}
.cips-billing-toggle:checked + .cips-toggle-slider {
background-color: #1c417b;
}
.cips-billing-toggle:checked + .cips-toggle-slider:before {
transform: translateX(30px);
} .cips-billing-toggle:disabled + .cips-toggle-slider {
opacity: 0.7;
cursor: not-allowed;
pointer-events: none;
} .cips-billing-toggle:disabled + .cips-toggle-slider:after {
content: "🔒";
position: absolute;
top: 6px;
right: 8px;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
} .cips-price-discount {
margin: 1rem 0;
}
.cips-price-discount p {
color: #1c417b;
font-weight: 600;
} .cips-price-cta {
margin-top: 2rem;
}
.cips-cta-button {
display: inline-block;
background-color: #5ca83e;
color: #fff !important;
font-weight: 400;
padding: 1rem 2rem;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 3px 3px 4px 1px rgb(0 0 0 / 69%);
letter-spacing: 0.5px;
}
.cips-cta-button a {
color: #fff !important;
}
.cips-cta-button:hover {
background-color: #4d8f32;
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
} @media (min-width: 1200px) {
.cips-property-selector {
grid-template-columns: repeat(7, 1fr);
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.cips-property-selector {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 768px) and (max-width: 991px) {
.cips-property-selector {
grid-template-columns: repeat(3, 1fr);
}
.cips-property-card {
width: 240px;
height: 240px;
padding: 1rem;
}
.cips-property-icon {
height: 120px;
}
.cips-title {
font-size: 2rem;
}
.cips-price-value {
font-size: 3rem;
}
.cips-price-value .decimal-part {
font-size: 1.5rem;
}
.cips-price-currency {
font-size: 2rem;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.cips-property-selector {
grid-template-columns: repeat(2, 1fr);
}
.cips-property-card {
width: 220px;
height: 220px;
padding: 1rem;
}
.cips-property-icon {
height: 100px;
}
}
@media (max-width: 575px) {
.cips-property-selector {
grid-template-columns: 1fr;
}
.cips-property-card {
width: 100%;
height: auto;
min-height: 200px;
padding: 1rem;
}
.cips-property-icon {
height: 80px;
}
.cips-price-box {
padding: 1.5rem;
}
.cips-price-value {
font-size: 3rem;
}
.cips-price-value .decimal-part {
font-size: 1.5rem;
}
.cips-price-currency {
font-size: 1.5rem;
}
.cips-cta-button {
padding: 0.8rem 1.5rem;
font-size: 0.9rem;
}
}
@media (max-width: 767px) {
.cips-property-selector {
flex-direction: column;
align-items: center;
}
}