/**
 * WhoKnew Views - Styling Render Page CSS
 * 
 * WordPress.org Compliance:
 * All inline CSS from styling-render.php extracted to external file
 * Enqueued via wp_enqueue_style() for proper WordPress standards
 * 
 * @package WhoKnew_Views
 */

/* Footer and layout fixes */
#wpfooter {
    position: relative !important;
    display: block !important;
    clear: both !important;
    margin-top: 20px !important;
}

.wkviews-wrap {
    margin-bottom: 50px !important;
    overflow: visible !important;
}

.preview-container {
    margin-bottom: 30px !important;
}

/* Collapsible sections */
.rotate-180 {
    transform: rotate(180deg) !important;
}

.wkviews-section-header {
    user-select: none;
}

.wkviews-section-header:hover {
    background: #f9fafb !important;
}

/* Coloris container styling */
.whoknew-views-color-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.whoknew-views-color-field .clr-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.whoknew-views-color-field .clr-field button {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 2px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    background-size: 20px 20px;
    z-index: 1;
}

/* Don't style ANY inputs - let Coloris handle its own styling */

/* CRITICAL FIX: Exclude Coloris format toggle from broad input styling in woo-product-view-counter-admin.css */
.clr-picker .clr-segmented {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
    color: #999 !important;
    font-size: 12px !important;
}

/* Hide both the radio inputs AND the legend */
.clr-picker .clr-segmented input,
.clr-picker .clr-segmented legend {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    left: 0 !important;
    top: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Labels are the clickable buttons */
.clr-picker .clr-segmented label {
    flex-grow: 1 !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: initial !important;
    text-align: center !important;
    cursor: pointer !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    color: #999 !important;
    pointer-events: auto !important;
}

.clr-picker .clr-segmented label:first-of-type {
    border-radius: 10px 0 0 10px !important;
}

.clr-picker .clr-segmented label:last-of-type {
    border-radius: 0 10px 10px 0 !important;
}

/* When a radio is checked, style its adjacent label */
.clr-picker .clr-segmented input:checked + label {
    color: #fff !important;
    background-color: #666 !important;
}

.clr-picker {
    z-index: 10000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    border-radius: 4px;
}

.whoknew-views-pro-notice {
    color: #d97706;
    font-style: italic;
    margin-top: 5px;
}

.whoknew-views-pro-notice a {
    color: #1e3a8a;
    text-decoration: underline;
}