/* Container & Animation Safety */
.fs-popup-initially-hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    position: fixed !important;
    z-index: 9999999 !important;
    pointer-events: none !important;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease, visibility 0.4s ease !important;
}

/* Base Wrapper Reset */
#fs-notification-popup * {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* LARGE CARD LAYOUT - REVERTED TO LARGER CARD (now with % height for image) */
.fs-fruitful-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 270px !important; /* Fixed total height for the card to enable %-based splitting (adjust this if needed for overall card size) */
    position: relative !important;
}

/* Close Button */
.fs-fc-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 30px !important;
    height: 30px !important;
    background: #ff0000 !important; /* Changed to red */
    color: #ffffff !important; /* X remains white */
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: background 0.2s !important;
}
.fs-fc-close:hover {
    background: #cc0000 !important; /* Darker red on hover for visual feedback */
}

/* Image Link - Set to 50% height for top half */
.fs-fc-img-link {
    display: block !important;
    width: 100% !important;
    height: 50% !important; /* Image container takes half the card's vertical size */
    flex-shrink: 0 !important;
    text-decoration: none !important;
}

.fs-fc-img {
    width: 100% !important;
    height: 100% !important; /* Full height of the link container */
    background: #f3f4f6 !important;
    display: block !important;
}

.fs-fc-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border: none !important;
}

/* White Content Body - extra bottom space so button is never cut off */
.fs-fc-body {
    padding: 20px 20px 30px !important; /* Reduce padding to prevent overflow; adjust bottom for space below button */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: flex-start !important; /* Override to start from top */
}

.fs-fc-btn {
    margin-top: auto !important; /* Push button to bottom */
    padding: 12px 24px !important; /* Normal pill shape: vertical 12px (not squeezed), horizontal 24px */
    min-width: 160px !important;
}

/* Title + Stars (small stars) */
.fs-fc-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
}
.fs-name {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.fs-fc-desc {
    font-size: 15px !important;
    color: #4b5563 !important;
    line-height: 1.5 !important;
    margin-bottom: 28px !important;
}

/* CTA Button - strict width/height control */
.fs-fc-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #000000 !important; 
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    width: 200px !important;  /* Change this for exact button width */
    height: 50px !important;  /* Change this for exact button height */
    padding: 0 !important;    /* Forces the button to respect the width/height */
    border-radius: 9999px !important;
    text-decoration: none !important;
    align-self: center !important;
    margin-top: auto !important; /* Pushes button to bottom; horizontal centering handled by align-self */
    transition: background-color 0.2s !important;
}
.fs-fc-btn:hover {
    background-color: #000000 !important;
}

/* Placement */
#fs-notification-popup {
    bottom: 20px !important;
    left: 50% !important;
    width: calc(100% - 32px) !important;
    max-width: 400px !important;
    transform: translate(-50%, 150%) !important;
}

#fs-notification-popup.fs-visible {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) !important;
}

@media (min-width: 768px) {
    #fs-notification-popup { 
        bottom: 30px !important; 
        right: 30px !important; 
        left: auto !important;
        width: 380px !important;
        transform: translateY(150%) !important; 
    }
    #fs-notification-popup.fs-visible { 
        transform: translateY(0) !important; 
    }
}

/* Onboarding Form Stylings */
#fs-onboard-wrapper { max-width: 450px; margin: 50px auto; background: #fff; padding: 30px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.fs-step { display: none; }
.fs-step.active { display: block; }
.fs-steps-indicator { display: flex; gap: 10px; justify-content: center; margin-bottom: 30px; }
.step { width: 35px; height: 35px; border-radius: 50%; background: #f2f2f7; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #8e8e93; }
.step.active { background: #007aff; color: #fff; }
#fs-onboard-form label { font-weight: 600; display: block; margin-top: 15px; color: #1d1d1f; font-size: 14px; }
#fs-onboard-form input, #fs-onboard-form textarea { width: 100%; padding: 12px; margin: 8px 0 5px; border: 1px solid #d1d1d6; border-radius: 10px; box-sizing: border-box; font-size: 15px; }
#fs-onboard-form input:focus, #fs-onboard-form textarea:focus { border-color: #007aff; outline: none; }
.fs-price-display { background: #f2f2f7; padding: 15px; border-radius: 10px; font-weight: bold; margin: 20px 0; text-align: center; font-size: 16px; color: #007aff; }
.fs-btn-group { display: flex; gap: 10px; margin-top: 20px; }
.fs-next-btn, #fs-submit-btn { background: #000; color: #fff; border: none; padding: 14px; width: 100%; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 16px; }
.fs-next-btn:disabled { background: #e5e5ea; color: #8e8e93; cursor: not-allowed; }
.fs-back-btn { background: #e5e5ea; color: #1d1d1f; border: none; padding: 14px; width: 100%; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 16px; }
#fs-availability-msg { color: #ff3b30; font-size: 13px; font-weight: 600; margin-top: 5px; }
/* Step 4 Review Box Styles */
.fs-review-box { background: #f9fafb; padding: 18px; border-radius: 12px; margin-bottom: 20px; font-size: 14px; color: #374151; border: 1px solid #e5e7eb; }
.fs-review-box p { margin: 10px 0 !important; border-bottom: 1px solid #e5e7eb; padding-bottom: 10px; line-height: 1.4 !important; }
.fs-review-box p:last-of-type { border-bottom: none; margin-bottom: 5px !important; }
.fs-review-box strong { color: #111827; display: inline-block; width: 55px; font-weight: 600; }
#rev_img_preview { max-width: 100%; height: auto; max-height: 200px; border-radius: 10px; margin-top: 5px; object-fit: cover; display: none; border: 1px solid #d1d1d6; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

/* Tutorial Button & Modal Styles */
.fs-tutorial-wrapper { text-align: center; margin-bottom: 25px; }
#fs-tutorial-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #000; color: #fff; border: none; padding: 10px 24px; border-radius: 50px; font-weight: 600; font-size: 15px; cursor: pointer; transition: background 0.2s; }
#fs-tutorial-btn:hover { background: #333; }
#fs-tutorial-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999999; display: none; align-items: center; justify-content: center; }
.fs-tutorial-content { background: #111; padding: 45px 20px 20px; border-radius: 12px; position: relative; width: 90%; max-width: 600px; box-shadow: 0 15px 30px rgba(0,0,0,0.5); }
#fs-tutorial-close { position: absolute; top: 10px; right: 15px; background: none; border: none; color: #fff; font-size: 30px; cursor: pointer; line-height: 1; }
#fs-tutorial-close:hover { color: #ff3b30; }
/* Fix for Cookie Consent Wrapper Collapse */
.fs-tutorial-content iframe, 
.fs-tutorial-content .lcc-youtube-blocked-wrapper {
    width: 100% !important;
    height: 315px !important;
    display: block !important;
}