/*
 Theme Name:     FindaPro Child
 Theme URI:      https://findapro.fi/
 Description:    A child theme for the FindAPro theme.
 Author:         FindaPro Team
 Author URI:     https://findapro.fi/
 Template:       FindaPro
 Version:        2.0.0
 
 CHANGELOG v2.0.0:
 - Fixed hover color from #1f3140 to #1e3445 to match baseline
 - Fixed text gray #555 to #294259 with opacity
 - Fixed secondary gray #6b7280 to #294259 with opacity
 - Fixed borders #e5e7eb to rgba(41,66,89,0.1)
 - Fixed input border #ccc to rgba(41,66,89,0.2)
 - Fixed info button hover #d1dae0 to #C5D6D3
 - Added Poppins font declarations to popup elements
 - All colors now match front-page.php baseline
*/

/* =================================================================== */
/* =========  GLOBAL FONT DECLARATION  =============================== */
/* =================================================================== */

/* Ensure Poppins is used throughout popups and custom elements */
.contact-flow-popup-content,
.contact-flow-popup-content * {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =================================================================== */
/* =========  MULTI-STEP CONTACT POP-UP STYLES  ====================== */
/* =================================================================== */

/* --- Main Pop-up Container & Overlay --- */
.contact-flow-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 66, 89, 0.6); /* STYLE FIX: Changed to brand color */
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.contact-flow-popup-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.contact-flow-popup-content {
    background-color: #ffffff;
    border-radius: 16px;
    /* The padding is now on the .popup-screen */
    width: 100%;
    max-width: 480px;
    box-shadow: 0 10px 30px rgba(41, 66, 89, 0.2); /* STYLE FIX: Brand shadow */
    text-align: center;
    position: relative; 
    overflow: hidden; /* To contain the screens */

    /* Slide-in animation */
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.contact-flow-popup-overlay.is-visible .contact-flow-popup-content {
    transform: scale(1);
}

/* --- General Pop-up Elements --- */
.popup-title {
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    color: #294259; /* Brand navy color */
    margin-top: 0;
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
}

.popup-text {
    font-size: 0.95rem;
    color: rgba(41, 66, 89, 0.8); /* STYLE FIX: Changed from #555 to brand with opacity */
    line-height: 1.6;
    margin: 0 auto 24px;
    max-width: 90%;
    font-family: 'Poppins', sans-serif;
}

.popup-button-wrap {
    margin-top: 24px;
}

.popup-button-primary {
    display: inline-block;
    width: 100%;
    background-color: #294259;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.popup-button-primary:hover {
    background-color: #1e3445; /* STYLE FIX: Changed from #1f3140 to match baseline */
}

/* --- Accordion (for "Why do you need this?") --- */
.popup-accordion {
    margin-top: 24px;
    border-top: 1px solid rgba(41, 66, 89, 0.1); /* STYLE FIX: Changed from #e5e7eb */
    padding-top: 16px;
}

.popup-accordion-trigger {
    background: none;
    border: none;
    color: rgba(41, 66, 89, 0.7); /* STYLE FIX: Changed from #6b7280 */
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.popup-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding-top 0.3s ease-out;
}

.popup-accordion-content.is-open {
    max-height: 200px; /* Adjust if your content is taller */
    padding-top: 16px;
}

.popup-accordion-content p {
    font-size: 0.85rem;
    color: rgba(41, 66, 89, 0.7); /* STYLE FIX: Changed from #6b7280 */
    line-height: 1.5;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

/* --- Fluent Form Styling Tweaks --- */
#popup-screen-form .frm-fluent-form {
    margin-top: 1rem;
}

#popup-screen-form .ff-el-input--content {
    text-align: left;
}

/* --- Success Screen Styles --- */
#popup-screen-success .success-icon-wrap {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background-color: #dcfce7; /* Light green */
    display: flex;
    align-items: center;
    justify-content: center;
}
#popup-screen-success .success-icon-wrap::before {
    content: '✓';
    color: #16a34a; /* Dark green */
    font-size: 2rem;
    font-weight: bold;
}

.revealed-info {
    margin-top: 24px;
    border: 1px solid rgba(41, 66, 89, 0.1); /* STYLE FIX: Changed from #e5e7eb */
    border-radius: 12px;
    text-align: left;
}
.info-item {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.info-item:not(:last-child) {
    border-bottom: 1px solid rgba(41, 66, 89, 0.1); /* STYLE FIX: Changed from #e5e7eb */
}
.info-item span {
    font-size: 0.9rem;
    color: rgba(41, 66, 89, 0.7); /* STYLE FIX: Changed from #6b7280 */
    font-family: 'Poppins', sans-serif;
}
.info-item strong {
    font-weight: 600;
    color: #294259;
    font-family: 'Poppins', sans-serif;
}
.info-button {
    background-color: #E6ECF2; /* Brand light blue */
    color: #294259;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s;
    font-family: 'Poppins', sans-serif;
}
.info-button:hover {
    background-color: #C5D6D3; /* STYLE FIX: Changed from #d1dae0 to brand accent */
}

/* ====================================================== */
/* FINAL FIX: Correct way to hide/show screens in a pop-up */
/* ====================================================== */
.popup-screen {
    display: none;
    /* These styles were moved from .contact-flow-popup-content */
    padding: 28px 32px;
    box-sizing: border-box; /* Ensures padding doesn't break layout */
    width: 100%;
}

.popup-screen.is-active {
    display: block;
}

/* ===================================================================== */
/* ========= NEW STYLES for the Verification Code Screen =============== */
/* ===================================================================== */
.verify-form-wrap {
    margin: 20px 0;
    text-align: center;
}

.verify-input-field {
    width: 100%;
    max-width: 250px; /* Prevents it from being too wide on large screens */
    margin-left: auto;
    margin-right: auto;
    padding: 12px;
    border: 1px solid rgba(41, 66, 89, 0.2); /* STYLE FIX: Changed from #ccc */
    border-radius: 8px;
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.5em; /* Creates space between characters like in the image */
    font-family: 'Poppins', sans-serif;
}

.verify-input-field:focus {
    outline: none;
    border-color: #294259;
    box-shadow: 0 0 0 2px rgba(41, 66, 89, 0.1);
}

.verify-error {
    color: #D32F2F; /* A standard red color for error text */
    font-size: 0.875rem;
    margin-top: 8px;
    min-height: 1.2em; /* Prevents layout shift when message appears */
    font-family: 'Poppins', sans-serif;
}

.popup-button-secondary {
    background: none;
    border: none;
    color: rgba(41, 66, 89, 0.7); /* STYLE FIX: Changed from #666 */
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.875rem;
    margin-top: 10px;
    font-family: 'Poppins', sans-serif;
}

.popup-button-secondary:hover {
    color: #294259;
}

/*
 * Styles the Fluent Forms "Next" and "Submit" buttons to look like a solid submit button
 */
#popup-screen-form .ff-btn-next,
#popup-screen-form .ff-btn-submit {
    background-color: #294259 !important; /* Brand navy */
    color: #ffffff !important;            /* White text for good contrast */
    border: none !important;              /* Removes the default gray border */
    width: 100%;                          /* Makes the button full-width */
    padding: 12px 20px !important;        /* Makes the button taller */
    border-radius: 8px !important;        /* Gives the button rounded corners */
    font-weight: 500;                     /* Adjusts font weight for clarity */
    text-align: center;                   /* Ensures text is centered */
    font-family: 'Poppins', sans-serif !important;
}

/* Optional: Add a hover effect for better user experience */
#popup-screen-form .ff-btn-next:hover,
#popup-screen-form .ff-btn-submit:hover {
    background-color: #1e3445 !important; /* STYLE FIX: Changed from #1f3140 */
}

/*
 * (New Fix) Repositions and restyles the 'Previous' (Back) button.
 */
#popup-screen-form .ff-el-group .ff-el-btn-group {
   margin-top: 1.5rem;
   text-align: center; /* Center the 'Go Back' button within this container */
}

/* Ensure the main button is a full-width block */
#popup-screen-form .ff-btn-submit {
    display: block;
    width: 100%;
}

/* Style the 'Back' button to be a simple link underneath */
#popup-screen-form .ff-btn-prev {
    display: inline-block; /* Allows it to be centered without being full-width */
    margin-top: 12px;      /* Adds space above it, separating it from the main button */
    background: transparent !important;
    border: none !important;            /* Removes the border as requested */
    box-shadow: none !important;        /* Removes any default shadows */
    color: #294259 !important;         /* Dark blue text as requested */
    padding: 8px 12px !important;
    font-weight: 500;
    font-family: 'Poppins', sans-serif !important;
}

/* Add a simple underline on hover to show it's clickable */
#popup-screen-form .ff-btn-prev:hover {
    text-decoration: underline !important;
    background: transparent !important; /* Ensure no background appears on hover */
}

/* =================================================================== */
/* =========  RESPONSIVE SEARCH BAR  ================================= */
/* =================================================================== */

.search-bar-container {
  width: 90vw !important; /* Takes 90% of the viewport width on mobile */
  max-width: 700px !important; /* Prevents it from being too wide on larger mobile screens */
  min-width: 280px !important; /* Ensures it doesn't shrink too much on small screens */
}

/* Desktop styles (matches current 700px width) */
@media (min-width: 768px) {
  .search-bar-container {
    width: 700px !important; /* Matches the current desktop width */
  }
}

/* =================================================================== */
/* =========  UTILITY CLASSES  ======================================= */
/* =================================================================== */

.font-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", "EmojiOne Mozilla", "Twemoji Mozilla", "Fira Code", "Noto Color Emoji", sans-serif;
}

/* =================================================================== */
/* =========  BRAND COLOR VARIABLES (for reference)  ================= */
/* =================================================================== */
/*
 * Primary Navy:     #294259
 * Hover Navy:       #1e3445
 * Background:       #F4EEE6
 * Light Blue:       #E6ECF2
 * Sage Green:       #C5D6D3
 * Warm Peach:       #F2E2D7
 * Shadow Base:      rgba(41, 66, 89, ...)
 * Font:             'Poppins', sans-serif
 */