/* Ask Me - Visual Overhaul */

/* Colors */
:root {
    --ask-me-blue: #4285f4;
    --ask-me-green: #28a745;
    --ask-me-dark: #333;
    --ask-me-gray: #f8f9fa;
    --ask-me-red: #dc3545;
}

/* Wrapper & Lang Switcher */
.ask-me-wrapper {
    overflow: hidden;
    padding: 0 !important;
}

/* Header Styling */
.ask-me-header {
    background: linear-gradient(135deg, #f5f8ff 0%, #f4fdf6 100%);
    color: var(--ask-me-dark);
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    position: relative;
    overflow: hidden;
}

.ask-me-header h3 {
    color: var(--ask-me-blue) !important;
    font-weight: 700 !important;
    margin-top: 0.1rem;
    margin-bottom: 0;
    font-size: 1rem;
}

.ask-me-header p {
    color: #666 !important;
    font-size: 0.95rem;
}

/* Logo Styling */
.ask-me-logo {
    max-height: 60px !important;
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0.2rem;
    box-shadow: none;
    border: none;
    display: inline-block !important;
}

/* RTL Specific Typography */
.ask-me-wrapper[dir="rtl"] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Force header to look identical in RTL/AR mode */
.ask-me-wrapper[dir="rtl"] .ask-me-header {
    direction: ltr;
    text-align: center !important;
}

.ask-me-wrapper[dir="rtl"] .ask-me-logo {
    max-height: 60px !important;
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
}

/* Language Switcher */
.ask-me-lang-switcher {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 10;
}

.ask-me-lang-switcher .btn {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 4px 10px;
    transition: all 0.2s;
    border-radius: 4px;
    line-height: 1.4;
}

/* Active State */
.ask-me-lang-switcher .btn.btn-primary {
    background-color: var(--ask-me-blue) !important;
    color: #fff !important;
    border-color: var(--ask-me-blue) !important;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(66, 133, 244, 0.3);
}

/* Inactive State */
.ask-me-lang-switcher .btn.btn-light {
    background-color: #fff !important;
    color: var(--ask-me-blue) !important;
    border: 1px solid var(--ask-me-blue) !important;
    opacity: 0.8;
}

.ask-me-lang-switcher .btn.btn-light:hover {
    background-color: rgba(66, 133, 244, 0.1) !important;
    opacity: 1;
}

/* Form Styling */
.ask-me-form {
    border: none;
}

/* Question Area */
#grdv_ask_me_question {
    border: 1px solid #ccc;
    background-color: #fcfcfc;
}

#grdv_ask_me_question:focus {
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.15);
    border-color: var(--ask-me-blue);
}

.form-floating>label {
    color: #888;
    font-weight: 600;
}

/* Questionnaire Chips */
.ask-me-chips .btn-outline-primary {
    border-color: #dee2e6;
    color: #495057;
    border-radius: 50rem;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.ask-me-chips .btn-check:checked+.btn-outline-primary {
    background-color: var(--ask-me-blue);
    border-color: var(--ask-me-blue);
    color: #fff;
    box-shadow: 0 2px 4px rgba(66, 133, 244, 0.3);
}

/* Inline Anonymous Button */
#btn-inline-anonymous {
    transition: all 0.3s ease;
}

#btn-inline-anonymous:hover {
    transform: scale(1.05);
}

/* Active anonymous state */
#btn-inline-anonymous.btn-danger {
    background-color: var(--ask-me-red);
    border-color: var(--ask-me-red);
    color: #fff;
}

/* Contact Inputs */
#ask-me-contact-fields input.form-control-sm {
    border-radius: 4px;
    background-color: #fafafa;
    border: 1px solid #ced4da;
    font-size: 0.9em;
}

#ask-me-contact-fields input.form-control-sm:focus {
    background-color: #fff;
    border-color: var(--ask-me-blue);
}

/* List Card Styling */
.ask-me-list .card {
    border: 1px solid var(--ask-me-blue) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ask-me-list .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px);
}

.ask-me-list .btn-outline-secondary {
    color: #555;
    border-color: #ccc;
    border-radius: 4px;
}

.ask-me-list .btn-success {
    background-color: var(--ask-me-green);
    border-color: var(--ask-me-green);
    border-radius: 4px;
}

/* Card Status Styling */
.ask-me-list .ask-me-status-pending {
    background-color: #fff;
    border-left: 5px solid var(--ask-me-blue) !important;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.ask-me-list .ask-me-status-pending:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-2px);
    border-color: #cbd5e0;
}

.ask-me-list .ask-me-status-replied {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    opacity: 0.75;
}

.ask-me-list .ask-me-status-replied:hover {
    opacity: 1;
    border-color: #dee2e6;
}

.ask-me-list .ask-me-status-replied .card-title {
    color: #6c757d !important;
}