/* Frontend Styles for WP Affiliate Notice Pro */

.affnotice-notice-box {
    /* visible by default to prevent "not showing" errors. JS will hide if dismissed. */
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    /* Soft corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family: inherit;
    font-size: 1em;
    line-height: 1.5;
    transition: all 0.3s ease;
    box-sizing: border-box;
    /* Ensure padding doesn't affect width */
    position: relative;
    z-index: 10;
    /* Ensure it sits above standard content floats */
    z-index: 10;
    /* Ensure it sits above standard content floats */
    display: none;
    /* Hidden by default to prevent FOUC/Layout Shift for dismissed users */
    align-items: center;
    /* Center vertically */
    gap: 15px;
    min-height: 50px;
    /* Ensure minimum height */
    overflow: hidden;
    /* Initial State for FOUC Prevention */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.affnotice-notice-box.affnotice-visible {
    opacity: 1;
    transform: translateY(0);
}

.affnotice-notice-box * {
    box-sizing: border-box;
    /* Reset box-sizing for children */
}

/* Content Wrapper */
.affnotice-content {
    flex-grow: 1;
    word-break: break-word;
    /* Prevent text overflow */
    overflow-wrap: anywhere;
    max-width: 100%;
    /* Ensure it doesn't overflow flex container */
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    /* Align checkmark to center */
}

/* Checkmark Correction */
.affnotice-checkmark {
    margin-right: 15px !important;
    display: block !important;
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
}

/* Dismiss Button - Minimal Circle */
.affnotice-dismiss-btn {
    position: absolute;
    top: 4px;
    /* Tighter spacing */
    right: 4px;
    /* Tighter spacing */
    width: 16px;
    /* Slightly larger for easier clicking */
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    /* Constant White */
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* Subtle border for contrast on light bg */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-size: 12px;
    /* Font size stays legible */
    color: #72777c !important;
    /* Soft grey instead of black */
    /* Force dark text for contrast against white */
    transition: all 0.2s ease;
    opacity: 0.8;
    /* Slight transparency */
    /* Always fully visible */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Softer shadow */
    /* Shadow to pop against light backgrounds */
    z-index: 10;
}

.affnotice-dismiss-btn:hover {
    transform: scale(1.1);
    background: #ffffff !important;
    color: #444 !important;
    /* Slightly darker on hover but not pitch black */
    /* Ensure it stays white/light */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    opacity: 1;
}

.affnotice-dismiss-btn:active,
.affnotice-dismiss-btn:focus {
    background: #ffffff !important;
    color: #222 !important;
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
    /* Slight press effect */
}

/* 
 * Text Colors 
 * These utility classes are injected by PHP based on the preset's brightness.
 */

.affnotice-text-light {
    color: #ffffff;
}

.affnotice-text-light a {
    color: #ffffff;
    text-decoration: underline;
}

.affnotice-text-light a:hover {
    color: #f0f0f0;
    text-decoration: none;
}

.affnotice-text-dark {
    color: #222222;
}

.affnotice-text-dark a {
    color: #000000;
    text-decoration: underline;
    font-weight: bold;
}

.affnotice-text-dark a:hover {
    color: #333333;
    text-decoration: none;
}

/* Design Style Overrides */
.affnotice-style-minimal {
    border-radius: 4px;
    border: 1px solid #eaeff2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.affnotice-style-flat {
    border: none;
    box-shadow: none;
    border-radius: 6px;
}

/* Force paragraph margins to 0 to align with checkmark */
.affnotice-content p {
    margin: 0 !important;
    padding: 0 !important;
}