/* Info strip */

.info-strip {
    position: relative;
    z-index: var(--pdc-hero-z-info-strip);
     /* Move the info-strip up so it sits centered (floats) between the hero and the following section.
         Use the centralized hero variable for the offset so it can be tuned globally. */
    margin-top: var(--pdc-hero-info-strip-offset);
    margin-bottom: 0; /* ensure no extra gap beneath */
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}

/* Mobile: make info-strip full-width and allow it to overlap the hero slightly
   so the decorative image can peek through. Use design tokens to control the
   vertical offset (negative margin) so this can be tuned from variables.css. */
@media (max-width: 768px) {
    .info-strip {
        /* raise the info-strip to overlap the hero by a token-controlled amount */
        margin-top: var(--pdc-hero-info-strip-offset-mobile) !important;
        position: relative !important;
        z-index: var(--pdc-hero-z-info-strip) !important;
        padding-top: 1rem;
        animation: none !important;
        width: 100%;
        left: 0;
    }

    /* Ensure the three info cards become full-width stacked blocks on mobile */
    .info-strip-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        width: 100%;
    }

    .info-card {
        border-radius: 0; /* flush to edges when full width */
        padding: 1.25rem 1rem;
    }
}

@keyframes fadeInUpInfoStrip {
    from {
        transform: translateY(100%); /* Start from completely below its final position */
    }
    to {
        transform: translateY(0);
    }
}

.info-strip-grid {
    display: grid;
    gap: 0; /* Remove gap to make them touch like in screenshot */
    /* Removed box-shadow as requested */
    box-shadow: none; 
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Ensure the next major section (services) sits directly under the info-strip with no visible stripe */
.info-strip + .section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (min-width: 900px) {
    .info-strip-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.info-card {
    padding: 2rem 2rem 1rem; /* Reduced bottom padding to balance with top */
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    height: auto; /* Allow height to adjust to content */
    min-height: 100%; /* Ensure they fill the grid row */
}

.info-card h3 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 0.75rem;
    width: 100%;
    color: #ffffff;
}

.info-card p,
.info-card li {
    font-size: 0.95rem;
    font-weight: var(--weight-regular);
    line-height: 1.6;
    opacity: 0.9;
}

.info-card-cta {
    display: block;
    margin-top: 0.5rem;
    font-size: 1.1rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-card ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.info-card li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Colors based on screenshot */
.info-card-emergency {
    background: #312e81; /* Dark Indigo/Blue */
}

.info-card-hours {
    background: #16a34a; /* Green */
}

.info-card-form {
    background: #7f1d1d; /* Dark Red */
    position: relative;
    transition: background-color 0.3s ease;
}

.info-card-cta {
    display: block;
    margin-top: 0.5rem;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
}

/* CTA Header Styles (default for info-strip) */
.cta-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Center vertically */
    width: 100%;
    gap: 1.5rem;
    cursor: pointer; /* Make the whole header clickable */
}

.cta-header-content {
    flex: 1;
}

/* CTA appearance for info-strip left as default; hero-specific styling moved to hero.css */

.cta-description {
    margin-bottom: 0;
    font-size: 0.95rem;
    opacity: 0.9;
}

.cta-expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Removed background to avoid button look */
    background: transparent; 
    border: 2px solid rgba(255, 255, 255, 0.3); /* Subtle ring instead */
    transition: all 0.3s ease;
    flex-shrink: 0;
    color: #ffffff;
}

.cta-header:hover .cta-expand-icon {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.cta-container.expanded .cta-expand-icon {
    transform: rotate(180deg);
    background: #ffffff;
    color: #7f1d1d;
    border-color: #ffffff;
}

/* Success Message Styles */
.cta-success-message {
    text-align: center;
    padding: 1rem;
    padding-bottom: 2.5rem; /* Extra space at bottom */
    animation: fadeIn 0.5s ease;
}

.cta-success-message .success-icon {
    width: 50px;
    height: 50px;
    background: #ffffff;
    color: #16a34a; /* Green */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.cta-success-message h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #ffffff; /* Ensure text is white */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* CTA Form Wrapper (Collapsible) */
.cta-form-wrapper {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, margin-top 0.4s ease;
    margin-top: 0;
}

/* Form Styles */
.appointment-form {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr 1fr; /* Two columns for inputs */
}

.form-row {
    grid-column: span 1;
}

.form-row:last-child {
    grid-column: span 2; /* Button spans full width */
}

.appointment-form input {
    width: 100%;
    border-radius: 0.5rem; /* Slightly less rounded for form fields inside card */
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    color: #ffffff;
    transition: all 0.2s;
}

.appointment-form input:focus {
    outline: none;
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.appointment-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.appointment-form .btn-submit {
    width: 100%;
    border-radius: 2rem;
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #7f1d1d;
    padding: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 700;
    margin-top: 0.5rem;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* CTA appearance for info-strip left as default; hero-specific styling moved to hero.css */

.appointment-form .btn-submit:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Make textarea and select visually match text inputs inside the CTA card */
.appointment-form textarea,
.appointment-form select {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    color: #ffffff;
    transition: all 0.15s ease;
}

.appointment-form textarea {
    min-height: 3.25rem; /* make notes area taller */
    resize: vertical;
}

.appointment-form select:focus,
.appointment-form textarea:focus {
    outline: none;
    border-color: #ffffff;
    background: rgba(255,255,255,0.14);
}

/* Improve select appearance on browsers that support appearance reset */
.appointment-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.85) 50%),
                      linear-gradient(135deg, rgba(255,255,255,0.85) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    background-clip: padding-box;
}

/* Ensure dropdown options are readable (may be limited by browser styling) */
.appointment-form select option {
    background-color: #7f1d1d; /* match card color */
    color: #ffffff;
}

/* Small utility for hidden labels */
.visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added to prevent wrap */
}

/* Appointment modal styles */
.appointment-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px; /* avoid edge collisions that cause scrollbars */
    box-sizing: border-box;
}
.appointment-modal.is-open { display: flex; }
.appointment-modal-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.6);
}
.appointment-modal-panel {
    position: relative;
    /* Use the same solid background as the hero CTA card for consistency */
    background: #7f1d1d;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    padding: 2rem; /* increase top padding so close button doesn't overlap inputs */
    width: min(720px, 95%);
    max-height: calc(100vh - 80px);
    overflow: auto;
    box-sizing: border-box;
}
.appointment-modal-close {
    position: absolute;
    right: 12px;
    top: 12px;
    border: none;
    background: transparent; /* no filled circle */
    color: #ffffff; /* white cross */
    font-size: 1.2rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    z-index: 2; /* ensure above panel content */
}
.appointment-modal-close:hover { opacity: 0.9; }
.appointment-modal-content {
    margin-top: 0.25rem;
}

@media (max-width: 600px) {
    .appointment-modal-panel { width: calc(100% - 2rem); padding: 1rem; }
    .appointment-modal-close { right: 8px; top: 8px; }
}

/* Ensure modal buttons match hero form button colors */
.appointment-modal-panel .btn-submit,
.appointment-modal-panel .btn-submit:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #7f1d1d;
}

/* Modal confirmation screen */
.modal-confirmation {
    text-align: center;
    padding: 2rem 1rem;
    color: #ffffff;
}
.modal-confirmation .modal-confirmation-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #ffffff;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
}
.modal-confirmation h3 {
    margin: 0 0 .5rem;
    color: #ffffff;
}
.modal-confirmation p { color: rgba(255,255,255,0.95); margin-bottom: 1rem; }
.modal-confirmation-actions { margin-top: 1rem; }
.modal-confirmation-close {
    background: #ffffff;
    color: #7f1d1d;
    border: 1px solid #ffffff;
    padding: .6rem 1rem;
    border-radius: .5rem;
    cursor: pointer;
}