/*
Theme Name: Astra Child JAUNS
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.7.1753451912
Updated: 2025-07-25 16:58:32

*/

.site-content:has(#bbpress-forums) { /* WPIDE shows error, dont know why (ignore it) */
	background-image: url('https://difflove.wasmer.app/wp-content/uploads/2025/08/foru_back.png');
}

.site-content:has(.rencAccount) {
    background-image: url('https://difflove.wasmer.app/wp-content/uploads/2025/08/sett_back.png');
}

.site-content:has(.rencPortrait) { 
   /* background-image: url('https://difflove.wasmer.app/wp-content/uploads/2025/08/prof_back.png');*/
   /*background-color: url('https://difflove.wasmer.app/wp-content/uploads/2025/08/Untitled-design-1-1.png');*/
   
}
.site-content:has(.rencPortraitEdit) {
    background-image: url('https://difflove.wasmer.app/wp-content/uploads/2025/08/sett_back.png') !important;
}

.site-content:has(.renc-enhanced-inbox) {
    background-image: url('https://difflove.wasmer.app/wp-content/uploads/2025/08/mess_whats_back.png');
}

.site-content:has(.rencTrouve) {
    background-image: url('https://difflove.wasmer.app/wp-content/uploads/2025/08/Untitled-design-1-2.png');
    background-size: cover;
}

/* Enhanced messaging styles */
.renc-enhanced-messaging {
    max-width: 100%;
    margin: 0 auto;
}

.renc-conversation-header {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #dee2e6;
}

.renc-conversation-body {
    max-height: 400px;
    overflow-y: auto;
    padding: 15px;
    background: white;
}

.renc-message-input-area {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid #dee2e6;
}

.renc-message-bubble {
    margin-bottom: 15px;
    clear: both;
}

.renc-message-sent {
    text-align: right;
}

.renc-message-received {
    text-align: left;
}

.renc-message-content {
    display: inline-block;
    max-width: 70%;
    padding: 10px 15px;
    border-radius: 18px;
    word-wrap: break-word;
}

.renc-message-sent .renc-message-content {
    background: #007cba;
    color: white;
    margin-left: 30%;
}

.renc-message-received .renc-message-content {
    background: #e9ecef;
    color: #333;
    margin-right: 30%;
}

.renc-message-time {
    font-size: 0.8em;
    opacity: 0.7;
    margin-top: 5px;
}

.renc-typing-indicator {
    display: none;
    font-style: italic;
    opacity: 0.7;
    padding: 10px;
}

.renc-send-button {
    background: #007cba;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s;
}

.renc-send-button:hover {
    background: #005a87;
}

.renc-send-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.renc-message-input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    resize: none;
    outline: none;
    font-family: inherit;
}

.renc-input-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.renc-emoji-picker {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px;
}

.renc-success-message {
    background: #d4edda;
    color: #155724;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid #c3e6cb;
}

.renc-error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid #f5c6cb;
}

/* Loading animation */
.renc-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0,124,186,.3);
    border-radius: 50%;
    border-top-color: #007cba;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .renc-message-content {
        max-width: 85%;
    }
    
    .renc-message-sent .renc-message-content {
        margin-left: 15%;
    }
    
    .renc-message-received .renc-message-content {
        margin-right: 15%;
    }
}

/* Enhanced messaging styles - WCAG 2.1 AA Compliant */

/* Remove blank space issues */
#rencMsg {
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove extra spacing from containers when messaging is active */
.renc-enhanced-messaging {
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure messaging containers don't have extra top spacing */
.w3-container:has(#rencMsg),
.w3-container.w3-white:has(.renc-enhanced-messaging) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Fix for containers that contain the messaging interface */
.w3-container.w3-card.w3-white:has(.renc-enhanced-messaging) {
    padding: 0 !important;
}

.renc-enhanced-messaging .renc-conversation-header {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 0;
    border-bottom: 1px solid #dee2e6;
    margin: 0;
}

.renc-conversation-body {
    max-height: 400px;
    overflow-y: auto;
    padding: 15px;
    background: white;
    /* WCAG: Ensure focus is visible in scrollable area */
    scroll-behavior: smooth;
}

.renc-conversation-body:focus {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}

.renc-message-input-area {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid #dee2e6;
}

/* CRITICAL OVERRIDE: Remove all container backgrounds */
.renc-message-bubble,
.renc-message-bubble.renc-message-sent,
.renc-message-bubble.renc-message-received,
.renc-msg-bubble,
.renc-msg-bubble.renc-msg-sent,
.renc-msg-bubble.renc-msg-received {
    margin-bottom: 15px;
    clear: both;
    padding: 0;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    /* WCAG: Better spacing for screen readers */
}

/* CRITICAL: Container alignment without backgrounds */
.renc-message-sent,
.renc-msg-sent {
    text-align: right;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

.renc-message-received,
.renc-msg-received {
    text-align: left;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* ONLY the content bubbles get colors */
.renc-message-sent .renc-message-content,
.renc-msg-sent .renc-message-content {
    background: #b71c1c !important; /* Dark red bubble */
    color: #ffffff !important; /* White text on red background */
    padding: 12px 16px !important;
    border-radius: 18px 18px 4px 18px !important;
    display: inline-block !important;
    max-width: 80% !important;
    word-wrap: break-word !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.renc-message-received .renc-message-content,
.renc-msg-received .renc-message-content {
    background: #f0f0f0 !important; /* Lighter grey bubble */
    color: #333 !important; /* Dark text on grey background */
    padding: 12px 16px !important;
    border-radius: 18px 18px 18px 4px;
    display: inline-block;
    max-width: 80%;
    word-wrap: break-word;
    /* WCAG: Ensure text is readable */
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* WCAG: Time stamps with sufficient contrast */
.renc-message-time {
    font-size: 12px;
    color: #6c757d; /* 4.5:1 contrast ratio on white */
    margin-top: 4px;
    /* WCAG: Screen reader support */
    display: block;
}

/* WCAG: Status icons with proper contrast and labels */
.renc-message-time i {
    color: #28a745; /* Green with 3.8:1 ratio - acceptable for icons */
    margin-left: 4px;
}

.renc-message-time i.w3-text-blue {
    color: #0066cc !important; /* Blue with 4.5:1 ratio */
}

/* Message sending state - WCAG compliant */
.message-sending {
    opacity: 0.8; /* Reduced from 0.7 for better contrast */
    transition: opacity 0.3s ease;
}

.message-sending .renc-message-content {
    position: relative;
    /* WCAG: Indicate loading state to screen readers */
    background: #dc3545; /* Keep red color during sending */
}

.message-sending .renc-message-content::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -20px;
    width: 12px;
    height: 12px;
    border: 2px solid #dc3545; /* Red loading indicator */
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* WCAG: Input field accessibility */
.renc-message-input {
    border: 2px solid #ced4da;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #212529;
    background: #ffffff;
    width: 100%;
    min-height: 44px; /* WCAG: Minimum touch target size */
    resize: vertical;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.renc-message-input:focus {
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
    outline: none;
}

/* WCAG: Button accessibility - Force red styling */
.renc-send-button {
    background: #dc3545 !important; /* Red theme with !important */
    color: #ffffff !important; /* 8.59:1 contrast ratio */
    border: 2px solid #dc3545 !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    min-height: 44px !important; /* WCAG: Minimum touch target size */
    min-width: 44px !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
}

.renc-send-button:hover {
    background: #c82333 !important; /* Darker red on hover */
    border-color: #c82333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.renc-send-button:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
    outline: none;
}

.renc-send-button:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.renc-send-button:disabled {
    background: #6c757d;
    border-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.8;
}

/* WCAG: Emoji buttons accessibility */
.renc-emoji-picker {
    background: transparent;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 8px;
    margin: 0 4px;
    font-size: 16px;
    min-height: 44px; /* WCAG: Minimum touch target size */
    min-width: 44px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.renc-emoji-picker:hover {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

.renc-emoji-picker:focus {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}

/* New emoji picker dropdown styles */
.renc-emoji-picker-container {
    position: relative;
    display: inline-block;
}

.renc-emoji-toggle {
    background: #f8f9fa !important;
    color: #495057 !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.renc-emoji-toggle:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    transform: scale(1.1) !important;
}

.renc-emoji-toggle:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
}

.renc-emoji-picker-dropdown {
    position: absolute;
    bottom: 50px;
    left: 0;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 280px;
}

.renc-emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.renc-emoji-option {
    background: transparent !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.renc-emoji-option:hover {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
    transform: scale(1.2) !important;
}

.renc-emoji-option:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    background: #e3f2fd !important;
}

/* iOS-style emoji font support with proper rendering */
.emoji-char {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne", "Twemoji Mozilla", sans-serif !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;
    text-rendering: optimizeQuality !important;
    -webkit-font-feature-settings: "liga" off !important;
    font-feature-settings: "liga" off !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    /* Force color emoji rendering */
    font-variant-emoji: emoji !important;
    /* Prevent text fallback */
    unicode-bidi: isolate !important;
    /* Ensure proper spacing */
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    /* Force block display for consistency */
    display: inline-block !important;
    vertical-align: middle !important;
    width: 24px !important;
    height: 24px !important;
    text-align: center !important;
}

/* Larger emojis for picker */
.renc-emoji-option .emoji-char {
    font-size: 24px !important;
    width: 32px !important;
    height: 32px !important;
}

.renc-emoji-toggle .emoji-char {
    font-size: 22px !important;
    width: 28px !important;
    height: 28px !important;
}

/* Twemoji (iOS-style) emoji fallback styles */
.twemoji-emoji {
    width: 1.2em !important;
    height: 1.2em !important;
    vertical-align: -0.1em !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

.renc-emoji-option .twemoji-emoji {
    width: 24px !important;
    height: 24px !important;
}

.renc-emoji-toggle .twemoji-emoji {
    width: 22px !important;
    height: 22px !important;
}

/* Force emoji rendering on all browsers */
.emoji-char {
    /* iOS emoji style override */
    text-rendering: optimizeQuality !important;
    /* Prevent emoji from being replaced by system fonts that don't support color */
    font-variant-emoji: emoji !important;
}

/* Add this to force proper emoji colors on Windows/Linux */
@supports not (font-variant-emoji: emoji) {
    .emoji-char {
        background-image: none !important;
        color: transparent !important;
        text-shadow: 0 0 0 black !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
    }
}

/* WCAG: Back button accessibility */
.w3-button.w3-renc-mebt {
    background: #000000 !important; /* Black background */
    color: #ffffff !important; /* White text for contrast */
    border: 2px solid #000000 !important;
    min-height: 44px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    transition: all 0.15s ease-in-out !important;
}

.w3-button.w3-renc-mebt:hover {
    background: #333333 !important; /* Dark gray on hover */
    border-color: #333333 !important;
    transform: translateY(-1px);
}

.w3-button.w3-renc-mebt:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* Fix blank spaces and container issues */
.w3-container:has(.renc-enhanced-messaging) {
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure no extra spacing around the messaging interface */
.renc-enhanced-messaging {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Remove spacing from W3.CSS containers when they contain messaging */
.w3-card:has(.renc-enhanced-messaging) {
    box-shadow: none !important;
    border: none !important;
}

/* WCAG: High contrast mode support */
@media (prefers-contrast: high) {
    .renc-message-sent .renc-message-content {
        background: #800000; /* Darker red for high contrast */
        border: 2px solid #ffffff;
    }
    
    .renc-message-received .renc-message-content {
        background: #ffffff;
        color: #000000;
        border: 2px solid #000000;
    }
    
    .renc-send-button {
        background: #800000;
        border-color: #800000;
    }
}

/* WCAG: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .message-sending,
    .renc-send-button,
    .renc-emoji-picker,
    .w3-button.w3-renc-mebt {
        transition: none;
    }
    
    .message-sending .renc-message-content::after {
        animation: none;
    }
    
    .renc-conversation-body {
        scroll-behavior: auto;
    }
}

.renc-message-content {
    display: inline-block;
    max-width: 70%;
    padding: 10px 15px;
    border-radius: 18px;
    word-wrap: break-word;
}

.renc-message-sent .renc-message-content {
    background: #007cba;
    color: white;
    margin-left: 30%;
}

.renc-message-received .renc-message-content {
    background: #e9ecef;
    color: #333;
    margin-right: 30%;
}

.renc-message-time {
    font-size: 0.8em;
    opacity: 0.7;
    margin-top: 5px;
}

.renc-typing-indicator {
    display: none;
    font-style: italic;
    opacity: 0.7;
    padding: 10px;
}

.renc-send-button {
    background: #007cba;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s;
}

.renc-send-button:hover {
    background: #005a87;
}

.renc-send-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.renc-message-input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    resize: none;
    outline: none;
    font-family: inherit;
}

.renc-input-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.renc-emoji-picker {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px;
}

.renc-success-message {
    background: #d4edda;
    color: #155724;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid #c3e6cb;
}

.renc-error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid #f5c6cb;
}

/* Loading animation */
.renc-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0,124,186,.3);
    border-radius: 50%;
    border-top-color: #007cba;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .renc-message-content {
        max-width: 85%;
    }
    
    .renc-message-sent .renc-message-content {
        margin-left: 15%;
    }
    
    .renc-message-received .renc-message-content {
        margin-right: 15%;
    }
    
    .rencMiniPortrait {
    max-width: 175px !important;
}
}

.rencMiniPortrait {
    max-width: 221px !important;
}

/* Apple emoji PNG styles for consistent iOS appearance */
.emoji-img {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    display: inline-block;
    margin: 0;
    padding: 0;
    object-fit: contain;
    /* Better rendering for PNG images */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.emoji-text {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.2em;
    line-height: 1;
    font-variant-emoji: emoji;
}

/* Override existing emoji-char styles for image support */
.renc-emoji-option .emoji-char,
.renc-emoji-toggle .emoji-char {
    font-size: 1.3em;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

.renc-emoji-option .emoji-img,
.renc-emoji-toggle .emoji-img {
    width: 1.3em;
    height: 1.3em;
}

/* Message emoji styles for consistent appearance */
.message-emoji {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0.1em;
    object-fit: contain;
    /* Crisp rendering for message emojis */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.fa {
    text-decoration: none !important;
    text-align: inherit;
}

/* Base styling for all disability icons */
/* Movement disorder - Standard wheelchair icon (already universally recognized) */



/* Deaf - Standard deaf symbol (already recognized) */


/* Accessibility improvements - apply to all FA icons used for disabilities */
.fa-wheelchair:focus,
.fa-wheelchair:hover,
.fa-eye-slash:focus,
.fa-eye-slash:hover,
.fa-eye:focus,
.fa-eye:hover,
.fa-deaf:focus,
.fa-deaf:hover,
.fa-assistive-listening-systems:focus,
.fa-assistive-listening-systems:hover,
.fa-low-vision:focus,
.fa-low-vision:hover,
.fa-puzzle-piece:focus,
.fa-puzzle-piece:hover,
.fa-ear-listen:focus,
.fa-ear-listen:hover,
.fa-deaf:focus,
.fa-deaf:hover,
.fa-ribbon:focus,
.fa-ribbon:hover,
.fa-brain:focus,
.fa-brain:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}