/**
 * CharityGlow Settings Page Styles
 *
 * Brand Palette:
 *   Primary   #15803D  Deep Green  — active toggle, progress, success states
 *   Secondary #1E40AF  Royal Blue  — active tabs, borders, icons, links
 *   Accent    #DC2626  Crimson      — Save/primary CTA buttons
 *   BG        #F8FAFC  Off-white   — surface backgrounds
 *   Heading   #111827  Near-black  — headings
 */

/* ========================================
   SETTINGS LAYOUT
======================================== */
.charityglow-settings {
    max-width: 1200px;
}

.charityglow-settings-form {
    background: #fff;
    margin-top: 0;
}

.charityglow-settings-content {
    padding: 20px 30px;
}

/* ========================================
   SETTINGS GROUPS
======================================== */
.charityglow-settings-group {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #dcdcde;
}

.charityglow-settings-group:last-child {
    border-bottom: none;
}

.charityglow-settings-group h2 {
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
    display: flex;
    align-items: center;
    gap: 10px;
}

.charityglow-settings-group .form-table {
    margin-top: 0;
}

/* ========================================
   TOGGLE SWITCH
   ON state — Primary Green
======================================== */
.charityglow-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.charityglow-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.charityglow-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #8c8f94;
    transition: 0.3s;
    border-radius: 24px;
}

.charityglow-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .charityglow-slider {
    background-color: #15803D;
}

input:checked + .charityglow-slider:before {
    transform: translateX(26px);
}

input:focus + .charityglow-slider {
    box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.3);
}

/* ========================================
   SETTINGS FOOTER / SAVE BAR
   Save button — Accent Amber
======================================== */
.charityglow-settings-footer {
    background: #f6f7f7;
    padding: 20px 30px;
    border-top: 1px solid #dcdcde;
    display: flex;
    gap: 10px;
    align-items: center;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.charityglow-settings-footer .button-primary {
    background: #DC2626;
    border-color: #B91C1C;
    color: #ffffff;
    font-weight: 700;
}

.charityglow-settings-footer .button-primary:hover {
    background: #B91C1C;
    border-color: #B45309;
    color: #ffffff;
}

.charityglow-settings-footer.sticky {
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

/* ========================================
   FORM FIELDS
   All inputs, selects and textareas on every
   settings tab are given a consistent width so
   nothing looks mismatched.

   Layout:
     General tab   → 280px  (currency, separator, numeric fields, page dropdowns)
     Gateways tab  → 100%   (long API keys should fill the available column)
     Emails tab    → 100%   (subject lines, recipient lists fill the column)
======================================== */

/* ── Base padding / font for every settings input ── */
.charityglow-settings input[type="text"],
.charityglow-settings input[type="email"],
.charityglow-settings input[type="url"],
.charityglow-settings input[type="password"],
.charityglow-settings input[type="number"],
.charityglow-settings input[type="tel"],
.charityglow-settings select,
.charityglow-settings textarea {
    padding: 8px 12px;
    font-size: 14px;
    box-sizing: border-box;
}

/* ── General tab: fixed 280px so every row is equal ── */
/* Targets regular-text, small-text, and unwrapped selects */
.charityglow-settings input[type="text"].regular-text,
.charityglow-settings input[type="email"].regular-text,
.charityglow-settings input[type="url"].regular-text,
.charityglow-settings input[type="number"].regular-text,
.charityglow-settings input[type="text"].small-text,
.charityglow-settings input[type="number"].small-text,
.charityglow-settings select.regular-text,
.charityglow-settings select:not(.large-text):not(.code) {
    width: 280px;
    max-width: 100%;
}

/* wp_dropdown_pages() emits a bare <select> with no class — target by id */
#charityglow_success_page,
#charityglow_failed_page {
    width: 280px;
    max-width: 100%;
}

/* ── Gateways tab: full-width for all API key inputs ── */
/* large-text and .code already correct for Stripe/PayPal;
   fix SSLCommerz + offline inputs that use regular-text   */
.charityglow-settings input[type="text"].large-text,
.charityglow-settings input[type="password"].large-text,
.charityglow-settings input[type="text"].code,
.charityglow-settings input[type="password"].code {
    width: 100%;
    max-width: 100%;
}

/* SSLCommerz store ID / password, offline bank fields use regular-text
   but live inside the gateway groups — override to full-width.
   Also covers the Emails tab: from_email uses type="email".regular-text */
.charityglow-settings-group input[type="text"].regular-text,
.charityglow-settings-group input[type="email"].regular-text,
.charityglow-settings-group input[type="password"].regular-text {
    width: 100%;
    max-width: 100%;
}

/* Re-constrain general-tab fields (they also live in settings-groups).
   The General tab fields that should stay at 280px use specific IDs.
   !important is needed to override WordPress core forms.css which sets
   .regular-text { width: 25em } — that rule loads after ours.           */
#charityglow_organization_name,
#charityglow_tax_id,
#charityglow_currency,
#charityglow_currency_position,
#charityglow_thousand_separator,
#charityglow_decimal_separator,
#charityglow_decimals,
#charityglow_min_donation,
#charityglow_max_donation {
    width: 280px !important;
    max-width: 100%;
}

/* ── Emails tab: full-width for subject lines and textareas ── */
.charityglow-settings input[type="text"].large-text,
.charityglow-settings input[type="email"].large-text,
.charityglow-settings textarea.large-text,
.charityglow-settings textarea {
    width: 100%;
    max-width: 100%;
}

/* ── Monospace styling for key/secret fields ── */
.charityglow-settings input.code,
.charityglow-settings input[type="password"] {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.5px;
    background: #f6f7f7;
}

/* ── Color picker ── */
.charityglow-settings input[type="color"] {
    width: 60px;
    height: 40px;
    border: 2px solid #8c8f94;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 4px;
}

/* ========================================
   KEY/SECRET SECTIONS
======================================== */
.charityglow-settings-group table tr th[colspan="2"] {
    font-weight: 600;
    padding: 12px;
    font-size: 14px;
}

/* ========================================
   NOTICES
======================================== */
.charityglow-settings .notice.inline {
    margin: 15px 0;
    padding: 12px;
}

.charityglow-settings .notice.inline p {
    margin: 0;
}

.charityglow-settings .notice a {
    text-decoration: underline;
}

/* ========================================
   DESCRIPTION TEXT
======================================== */
.charityglow-settings .description {
    color: #646970;
    font-size: 13px;
    font-style: normal;
    margin-top: 8px;
}

.charityglow-settings .description code {
    background: #f0f0f1;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* ========================================
   WEBHOOK URLS
   Link color — Secondary Blue
======================================== */
.charityglow-settings code.webhook-url {
    display: inline-block;
    padding: 10px 15px;
    background: #f0f0f1;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    color: #1E40AF;
    margin-bottom: 10px;
    max-width: 100%;
    overflow-x: auto;
}

/* ========================================
   EDITOR
======================================== */
.charityglow-settings .wp-editor-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ========================================
   BUTTONS IN TABLES
======================================== */
.charityglow-settings .form-table .button {
    vertical-align: middle;
}

.charityglow-settings .form-table .button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-top: 4px;
}

/* ========================================
   TEST MODE WARNING
======================================== */
.charityglow-test-mode-warning {
    background: #fcf9e8;
    border-left: 4px solid #f0b429;
    padding: 12px 16px;
    margin: 15px 0;
}

.charityglow-test-mode-warning p {
    margin: 0;
    color: #614700;
}

/* ========================================
   GATEWAY SECTIONS
======================================== */
.charityglow-gateway-section {
    background: #F8FAFC;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.charityglow-gateway-section h3 {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ========================================
   RESPONSIVE
======================================== */
@media screen and (max-width: 782px) {
    .charityglow-settings-content {
        padding: 15px;
    }

    .charityglow-settings-footer {
        padding: 15px;
        flex-direction: column;
        align-items: stretch;
    }

    .charityglow-settings-footer .button {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .charityglow-settings .form-table th,
    .charityglow-settings .form-table td {
        display: block;
        width: 100%;
        padding: 10px 0;
    }

    .charityglow-settings .form-table th {
        padding-bottom: 0;
    }
}

/* ========================================
   HELP TOOLTIPS
   Hover — Secondary Blue
======================================== */
.charityglow-help-tip {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: #646970;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    cursor: help;
    margin-left: 5px;
}

.charityglow-help-tip:hover {
    background: #1E40AF;
}

/* ========================================
   SUCCESS/ERROR ANIMATIONS
======================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.settings-error,
.updated {
    animation: fadeIn 0.3s ease-in-out;
}

/* ========================================
   LOADING SPINNER
======================================== */
.charityglow-settings .dashicons-update.dashicons-spin {
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    from { transform: rotate(0deg); }
    to   { transform: rotate(359deg); }
}

/* ========================================
   CARD-STYLE SECTIONS
======================================== */
.charityglow-settings-card {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}

.charityglow-settings-card h3 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #dcdcde;
}

/* ========================================
   CALLOUT BOXES
   info border — Secondary Blue
======================================== */
.charityglow-callout {
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 4px;
    border-left: 4px solid;
}

.charityglow-callout.info {
    background: #dbeafe;
    border-color: #1E40AF;
    color: #1d2327;
}

.charityglow-callout.warning {
    background: #fcf9e8;
    border-color: #f0b429;
    color: #614700;
}

.charityglow-callout.success {
    background: #dcfce7;
    border-color: #15803D;
    color: #1d2327;
}

.charityglow-callout.error {
    background: #fcf0f1;
    border-color: #d63638;
    color: #1d2327;
}

.charityglow-callout p:first-child { margin-top: 0; }
.charityglow-callout p:last-child  { margin-bottom: 0; }

/* ========================================
   TABS STYLING
   Active tab — Secondary Blue
======================================== */
.nav-tab-wrapper {
    border-bottom: 1px solid #c3c4c7;
    padding: 0;
    margin: 0 0 20px 0;
    background: transparent;
}

.nav-tab {
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: #646970;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

.nav-tab:hover {
    background: #f6f7f7;
    color: #1d2327;
}

.nav-tab-active {
    background: #fff;
    border-color: #c3c4c7;
    color: #1E40AF;
    position: relative;
    font-weight: 600;
}

.nav-tab-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #1E40AF;
}

/* ========================================
   FIELDSETS
======================================== */
.charityglow-settings fieldset {
    border: 1px solid #dcdcde;
    padding: 15px;
    border-radius: 4px;
    background: #F8FAFC;
}

.charityglow-settings fieldset label {
    display: block;
    padding: 8px 0;
    cursor: pointer;
}

.charityglow-settings fieldset label:hover {
    background: #fff;
}

.charityglow-settings fieldset input[type="checkbox"] {
    margin-right: 8px;
    accent-color: #15803D;
}

/* ========================================
   SECTION HEADERS WITH ICONS
   Icon — Secondary Blue
======================================== */
.charityglow-settings-group h2 .dashicons {
    color: #1E40AF;
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* ========================================
   KEY VISIBILITY TOGGLE
   Hover — Secondary Blue
======================================== */
.charityglow-key-field {
    position: relative;
}

.charityglow-key-field input[type="password"],
.charityglow-key-field input[type="text"] {
    padding-right: 45px;
}

.charityglow-toggle-key {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    color: #646970;
    padding: 5px;
}

.charityglow-toggle-key:hover {
    color: #1E40AF;
}