/**
 * SupportCandy Theme Integration
 *
 * Styles SupportCandy plugin to match the Tajheez Wedding Marketplace theme.
 * Design System: Enchanted Romance
 *
 * @package Tajheez
 * @since 1.5.0
 */

/* ==========================================================================
   IMPORTANT: Override SupportCandy's inline styles and !important rules
   ========================================================================== */

/* ==========================================================================
   PAGE LAYOUT - Full Width Container
   ========================================================================== */

/* Override any page constraints */
.page-template-default .site-main,
.page .site-main,
.page .entry-content,
.page article,
.supportcandy-page .site-main,
.supportcandy-page .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Main SupportCandy container - centered and properly sized */
#wpsc-container {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1rem !important;
    color: #4A4543 !important;
    line-height: 1.5 !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
    box-sizing: border-box !important;
}

/* Make the form body full width within container */
#wpsc-container .wpsc-body,
#wpsc-container .wpsc-ct-body,
#wpsc-container .wpsc-create-ticket,
#wpsc-container > div {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* Fix any column restrictions */
#wpsc-container .wpsc-lg-12,
#wpsc-container .wpsc-md-12,
#wpsc-container .wpsc-sm-12,
#wpsc-container .wpsc-xs-12,
#wpsc-container [class*="wpsc-lg-"],
#wpsc-container [class*="wpsc-md-"],
#wpsc-container .wpsc-row {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure form fields take full width */
#wpsc-container .wpsc-input-group,
#wpsc-container .wpsc-tff,
#wpsc-container .wpsc-cf-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================================
   HIDE UNWANTED NAVIGATION ITEMS
   ========================================================================== */

/* Hide My Profile link */
#wpsc-container .wpsc-header-nav[data-nav="my-profile"],
#wpsc-container .wpsc-tickets-nav[data-nav="my-profile"],
#wpsc-container .wpsc-header .my-profile,
#wpsc-container .wpsc-humbargar-menu-item[data-nav="my-profile"] {
    display: none !important;
}

/* Hide Logout link */
#wpsc-container .wpsc-header-nav[data-nav="logout"],
#wpsc-container .wpsc-header-nav.log-out,
#wpsc-container .wpsc-header .log-out,
#wpsc-container .wpsc-header .logout,
#wpsc-container .wpsc-humbargar-menu-item[data-nav="logout"] {
    display: none !important;
}

/* Alternative selector if nav items don't have data attributes */
#wpsc-container .wpsc-header-nav:has(label:contains("My Profile")),
#wpsc-container .wpsc-header-nav:has(label:contains("Logout")) {
    display: none !important;
}

/* ==========================================================================
   HEADER BAR - Purple Gradient (Override dark background)
   ========================================================================== */

#wpsc-container .wpsc-header,
#wpsc-container .wpsc-ct-header,
#wpsc-container .wpsc-create-ticket .wpsc-header,
#wpsc-container > .wpsc-header,
.wpsc-header {
    background: linear-gradient(135deg, #652C8F 0%, #8B5CF6 100%) !important;
    color: #FFFFFF !important;
    padding: 1rem 1.5rem !important;
    border-radius: 1rem 1rem 0 0 !important;
    border: none !important;
}

#wpsc-container .wpsc-header *,
#wpsc-container .wpsc-ct-header *,
.wpsc-header * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

#wpsc-container .wpsc-header label,
#wpsc-container .wpsc-ct-header label,
.wpsc-header label {
    color: #FFFFFF !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
}

#wpsc-container .wpsc-header svg,
#wpsc-container .wpsc-ct-header svg,
.wpsc-header svg {
    fill: #FFFFFF !important;
}

#wpsc-container .wpsc-header svg path,
.wpsc-header svg path {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Hamburger menu icon */
#wpsc-container .wpsc-humbargar,
#wpsc-container .wpsc-humbargar svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* ==========================================================================
   FORM CONTAINER
   ========================================================================== */

#wpsc-container .wpsc-body,
#wpsc-container .wpsc-ct-body,
#wpsc-container .wpsc-create-ticket-container {
    background: #FFFFFF !important;
    border: 1px solid #EDE9E3 !important;
    border-top: none !important;
    border-radius: 0 0 1rem 1rem !important;
    padding: 2rem !important;
    box-shadow: 0 4px 16px rgba(45, 41, 38, 0.06) !important;
}

/* ==========================================================================
   FORM LABELS
   ========================================================================== */

#wpsc-container .wpsc-input-group label,
#wpsc-container .wpsc-tff .name,
#wpsc-container .wpsc-cf-label,
#wpsc-container label,
.wpsc-modal label {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #4A4543 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

#wpsc-container .wpsc-input-group .extra-info,
#wpsc-container .wpsc-tff .extra-info {
    font-size: 0.8125rem !important;
    color: #8B8178 !important;
    margin-top: 0.25rem !important;
}

/* Required asterisk */
#wpsc-container .required-char,
#wpsc-container .wpsc-mandatory {
    color: #E57373 !important;
}

/* ==========================================================================
   FORM INPUTS
   ========================================================================== */

#wpsc-container input[type="text"],
#wpsc-container input[type="email"],
#wpsc-container input[type="password"],
#wpsc-container input[type="number"],
#wpsc-container input[type="tel"],
#wpsc-container input[type="url"],
#wpsc-container select,
#wpsc-container textarea,
.wpsc-modal input[type="text"],
.wpsc-modal input[type="email"],
.wpsc-modal select,
.wpsc-modal textarea {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1rem !important;
    padding: 0.875rem 1rem !important;
    border: 1px solid #EDE9E3 !important;
    border-radius: 0.75rem !important;
    background-color: #FFFFFF !important;
    color: #4A4543 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    max-height: none !important;
    line-height: 1.5 !important;
}

#wpsc-container input[type="text"]:focus,
#wpsc-container input[type="email"]:focus,
#wpsc-container input[type="password"]:focus,
#wpsc-container select:focus,
#wpsc-container textarea:focus,
.wpsc-modal input:focus,
.wpsc-modal select:focus,
.wpsc-modal textarea:focus {
    border-color: #652C8F !important;
    box-shadow: 0 0 0 3px rgba(101, 44, 143, 0.15) !important;
    outline: none !important;
}

#wpsc-container textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* ==========================================================================
   SELECT2 DROPDOWNS
   ========================================================================== */

#wpsc-container .select2-container .select2-selection--single,
#wpsc-container .select2-container .select2-selection--multiple {
    border: 1px solid #EDE9E3 !important;
    border-radius: 0.75rem !important;
    min-height: 48px !important;
    padding: 0.5rem !important;
    background-color: #FFFFFF !important;
}

#wpsc-container .select2-container--focus .select2-selection,
#wpsc-container .select2-container--open .select2-selection {
    border-color: #652C8F !important;
    box-shadow: 0 0 0 3px rgba(101, 44, 143, 0.15) !important;
}

.select2-dropdown {
    border: 1px solid #EDE9E3 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 8px 32px rgba(45, 41, 38, 0.08) !important;
    overflow: hidden !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: #652C8F !important;
    color: #FFFFFF !important;
}

.select2-results__option--selected {
    background-color: #F3E8FF !important;
    color: #4A1F6B !important;
}

/* ==========================================================================
   RICH TEXT EDITOR (TinyMCE)
   ========================================================================== */

#wpsc-container .mce-tinymce,
#wpsc-container .wpsc-editor-container,
#wpsc-container .tox-tinymce {
    border: 1px solid #EDE9E3 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

#wpsc-container .mce-panel,
#wpsc-container .mce-toolbar,
#wpsc-container .tox-toolbar,
#wpsc-container .tox-toolbar__primary {
    background: #F8F5F2 !important;
    border-color: #EDE9E3 !important;
}

#wpsc-container .mce-btn,
#wpsc-container .tox-tbtn {
    border-radius: 0.375rem !important;
}

#wpsc-container .mce-btn:hover,
#wpsc-container .tox-tbtn:hover {
    background: #EDE9E3 !important;
}

/* Simple editor toolbar buttons */
#wpsc-container .wpsc-editor-toolbar button,
#wpsc-container .wpsc-rich-text-editor button {
    border: 1px solid #EDE9E3 !important;
    border-radius: 0.5rem !important;
    background: #FFFFFF !important;
    color: #4A4543 !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 0.25rem 0.25rem 0 !important;
    transition: all 0.2s ease !important;
}

#wpsc-container .wpsc-editor-toolbar button:hover,
#wpsc-container .wpsc-rich-text-editor button:hover {
    background: #F3E8FF !important;
    border-color: #652C8F !important;
    color: #652C8F !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

#wpsc-container button,
#wpsc-container .wpsc-button,
#wpsc-container input[type="submit"],
#wpsc-container input[type="button"],
.wpsc-modal button,
.wpsc-modal input[type="submit"] {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: 0.75rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

/* Primary Submit Button */
#wpsc-container button[type="submit"],
#wpsc-container input[type="submit"],
#wpsc-container .wpsc-button.primary,
#wpsc-container .wpsc-ct-submit-btn,
.wpsc-modal button[type="submit"] {
    background: linear-gradient(135deg, #652C8F 0%, #8B5CF6 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(101, 44, 143, 0.2) !important;
    min-width: 150px !important;
}

#wpsc-container button[type="submit"]:hover,
#wpsc-container input[type="submit"]:hover,
#wpsc-container .wpsc-button.primary:hover,
#wpsc-container .wpsc-ct-submit-btn:hover,
.wpsc-modal button[type="submit"]:hover {
    background: linear-gradient(135deg, #4A1F6B 0%, #652C8F 100%) !important;
    box-shadow: 0 12px 32px rgba(101, 44, 143, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Secondary/Cancel Button */
#wpsc-container button[type="button"],
#wpsc-container .wpsc-button.secondary,
.wpsc-modal button[type="button"] {
    background: #FFFFFF !important;
    color: #652C8F !important;
    border: 2px solid #652C8F !important;
}

#wpsc-container button[type="button"]:hover,
#wpsc-container .wpsc-button.secondary:hover,
.wpsc-modal button[type="button"]:hover {
    background: #F3E8FF !important;
}

/* ==========================================================================
   TICKET LIST TABLE
   ========================================================================== */

#wpsc-container .wpsc-tickets-container {
    background: #FFFFFF !important;
    border: 1px solid #EDE9E3 !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 16px rgba(45, 41, 38, 0.06) !important;
    padding: 1.5rem !important;
    margin: 1rem 0 !important;
}

#wpsc-container .wpsc-ticket-list-tbl {
    font-size: 0.875rem !important;
}

#wpsc-container .wpsc-ticket-list-tbl th {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    color: #4A4543 !important;
    background: #F8F5F2 !important;
    padding: 1rem !important;
    border-bottom: 2px solid #EDE9E3 !important;
    text-align: left !important;
}

#wpsc-container .wpsc-ticket-list-tbl td {
    padding: 1rem !important;
    border-bottom: 1px solid #EDE9E3 !important;
    vertical-align: middle !important;
}

#wpsc-container .wpsc-ticket-list-tbl tbody tr:hover {
    background: #FDFBF7 !important;
}

/* ==========================================================================
   STATUS TAGS & BADGES
   ========================================================================== */

#wpsc-container .wpsc-tag {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 0.375rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ==========================================================================
   NAVIGATION TABS
   ========================================================================== */

#wpsc-container .wpsc-tickets-nav,
#wpsc-container .wpsc-header-nav {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.75rem !important;
    transition: all 0.2s ease !important;
    opacity: 0.8 !important;
}

#wpsc-container .wpsc-tickets-nav:hover,
#wpsc-container .wpsc-header-nav:hover,
#wpsc-container .wpsc-tickets-nav.active,
#wpsc-container .wpsc-header-nav.active {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

/* ==========================================================================
   INDIVIDUAL TICKET VIEW
   ========================================================================== */

#wpsc-container .wpsc-it-container {
    margin: 1rem 0 !important;
}

#wpsc-container .wpsc-it-widget {
    background: #FFFFFF !important;
    border: 1px solid #EDE9E3 !important;
    border-radius: 1rem !important;
    padding: 1.25rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 2px 8px rgba(45, 41, 38, 0.04) !important;
}

/* Thread/Reply Section */
#wpsc-container .wpsc-thread {
    background: #FFFFFF !important;
    border: 1px solid #EDE9E3 !important;
    border-radius: 1rem !important;
    padding: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 2px 8px rgba(45, 41, 38, 0.04) !important;
}

#wpsc-container .wpsc-thread-customer {
    border-left: 4px solid #E8A598 !important;
}

#wpsc-container .wpsc-thread-agent {
    border-left: 4px solid #652C8F !important;
    background: #FDFBF7 !important;
}

/* ==========================================================================
   MODAL POPUPS
   ========================================================================== */

.wpsc-modal .overlay,
.wpsc-humbargar-overlay {
    background-color: rgba(45, 41, 38, 0.6) !important;
    opacity: 1 !important;
}

.wpsc-modal .modal {
    background: #FFFFFF !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 16px 48px rgba(45, 41, 38, 0.15) !important;
    overflow: hidden !important;
}

.wpsc-modal .wpsc-modal-header {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #2D2926 !important;
    padding: 1.25rem 1.5rem !important;
    background: #F8F5F2 !important;
    border-bottom: 1px solid #EDE9E3 !important;
}

.wpsc-modal .wpsc-modal-body {
    padding: 1.5rem !important;
    max-height: 60vh !important;
    border-bottom: 1px solid #EDE9E3 !important;
}

.wpsc-modal .wpsc-modal-footer {
    padding: 1rem 1.5rem !important;
    background: #F8F5F2 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
}

/* ==========================================================================
   HAMBURGER SIDE MENU
   ========================================================================== */

#wpsc-container .wpsc-humbargar-menu {
    background: #FFFFFF !important;
    box-shadow: 0 16px 48px rgba(45, 41, 38, 0.15) !important;
}

#wpsc-container .wpsc-humbargar-menu-item,
#wpsc-container .wpsc-setting-nav {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    border-radius: 0.75rem !important;
    color: #4A4543 !important;
    transition: all 0.2s ease !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.375rem !important;
}

#wpsc-container .wpsc-humbargar-menu-item:hover,
#wpsc-container .wpsc-humbargar-menu-item.active,
#wpsc-container .wpsc-setting-nav:hover,
#wpsc-container .wpsc-setting-nav.active {
    background-color: #652C8F !important;
    color: #FFFFFF !important;
}

#wpsc-container .wpsc-humbargar-menu-item:hover svg,
#wpsc-container .wpsc-humbargar-menu-item.active svg {
    fill: #FFFFFF !important;
}

/* ==========================================================================
   ALERTS & MESSAGES
   ========================================================================== */

#wpsc-container .wpsc-alert,
#wpsc-container .wpsc-notice {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    padding: 1rem 1.25rem !important;
    border-radius: 0.75rem !important;
    margin-bottom: 1rem !important;
}

#wpsc-container .wpsc-alert-success,
#wpsc-container .wpsc-notice-success {
    background: #E8F5E9 !important;
    color: #5D8A66 !important;
    border: 1px solid #5D8A66 !important;
}

#wpsc-container .wpsc-alert-error,
#wpsc-container .wpsc-notice-error {
    background: #FFEBEE !important;
    color: #E57373 !important;
    border: 1px solid #E57373 !important;
}

/* ==========================================================================
   LOADER/SPINNER
   ========================================================================== */

#wpsc-container .wpsc-loader {
    padding: 3rem !important;
}

/* ==========================================================================
   FILE ATTACHMENTS
   ========================================================================== */

#wpsc-container .wpsc-editor-attachment {
    border-radius: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    margin-top: 0.5rem !important;
}

#wpsc-container .wpsc-editor-attachment.upload-success {
    background-color: #E8F5E9 !important;
    color: #5D8A66 !important;
}

#wpsc-container .wpsc-editor-attachment.upload-error {
    background-color: #FFEBEE !important;
    color: #E57373 !important;
}

#wpsc-container .wpsc-editor-attachment.upload-waiting {
    background-color: #FFF8E1 !important;
    color: #FFB74D !important;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

#wpsc-container .wpsc-ticket-pagination-header,
#wpsc-container .wpsc-ticket-pagination-footer {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.875rem !important;
    color: #8B8178 !important;
}

#wpsc-container .wpsc-ticket-pagination-header span,
#wpsc-container .wpsc-ticket-pagination-footer span {
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease !important;
}

#wpsc-container .wpsc-ticket-pagination-header span:hover,
#wpsc-container .wpsc-ticket-pagination-footer span:hover {
    background: #F3E8FF !important;
    color: #652C8F !important;
}

/* ==========================================================================
   FORM SPACING & LAYOUT
   ========================================================================== */

#wpsc-container .wpsc-input-group,
#wpsc-container .wpsc-tff {
    padding-bottom: 1.25rem !important;
    margin-bottom: 0 !important;
}

#wpsc-container .wpsc-row {
    margin-bottom: 0 !important;
}

/* Full width form fields */
#wpsc-container .wpsc-lg-12,
#wpsc-container .wpsc-md-12 {
    padding: 0 0 1rem 0 !important;
}

/* ==========================================================================
   RTL SUPPORT
   ========================================================================== */

[dir="rtl"] #wpsc-container {
    font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif !important;
}

[dir="rtl"] #wpsc-container .wpsc-thread-customer {
    border-left: none !important;
    border-right: 4px solid #E8A598 !important;
}

[dir="rtl"] #wpsc-container .wpsc-thread-agent {
    border-left: none !important;
    border-right: 4px solid #652C8F !important;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    #wpsc-container {
        padding: 0 0.5rem !important;
    }

    #wpsc-container .wpsc-header,
    #wpsc-container .wpsc-ct-header {
        padding: 0.875rem 1rem !important;
        border-radius: 0.75rem 0.75rem 0 0 !important;
    }

    #wpsc-container .wpsc-body,
    #wpsc-container .wpsc-ct-body {
        padding: 1.25rem !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
    }

    #wpsc-container button[type="submit"],
    #wpsc-container input[type="submit"] {
        width: 100% !important;
    }
}

/* ==========================================================================
   PAGE TITLE STYLING
   ========================================================================== */

.page #wpsc-container h1.entry-title,
.page .entry-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 2.5rem !important;
    font-weight: 600 !important;
    color: #2D2926 !important;
    margin-bottom: 1.5rem !important;
}

/* ==========================================================================
   SUPPORT PAGE SPECIFIC LAYOUT
   ========================================================================== */

/* Override the container width for pages with SupportCandy */
body.page:has(#wpsc-container) .container,
body.page:has(#wpsc-container) .site-main .container,
.site-main:has(#wpsc-container) .container {
    max-width: 900px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}

/* Target pages containing SupportCandy */
body.page:has(#wpsc-container) .site-main,
body.page:has(#wpsc-container) .entry-content,
body.page:has(#wpsc-container) article.page {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 2rem !important;
}

/* Alternative selector for browsers without :has() support */
.support-page .site-main,
.support-page .entry-content,
.contact-support .site-main,
.contact-support .entry-content {
    max-width: 100% !important;
    width: 100% !important;
}

/* Center the content wrapper */
body.page:has(#wpsc-container) .content-area,
body.page:has(#wpsc-container) .site-content {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Page container with SupportCandy */
.page .entry-content:has(#wpsc-container) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2rem 1rem !important;
}

/* Fallback: target common page wrapper classes */
.page-content,
.post-content,
.entry-content {
    display: block !important;
}

.page-content #wpsc-container,
.post-content #wpsc-container,
.entry-content #wpsc-container {
    margin: 0 auto !important;
}