/**
 * Button Protection - Prevent Theme Override
 *
 * This file protects ALL buttons from Astra theme overriding colors, backgrounds, borders.
 *
 * @package Utleiekalk_FINN
 * @version 2.0.3
 */

/* =================================================================
   ENFORCE PLUGIN BUTTON STYLES - Override Astra completely
   ================================================================= */

/**
 * Strategy: Re-declare all plugin button styles with !important
 * to ensure they override Astra theme
 */

/* Primary button (green "Hent fra FINN" etc.) */
/* EXCLUDE .action-button from this rule - sticky panel buttons need white bg */
html body .utleiekalk-finn-wrapper .uk-btn.uk-primary:not(.action-button),
html body .utleiekalk-finn-form .uk-btn.uk-primary:not(.action-button),
html body .flipping-form .uk-btn.uk-primary:not(.action-button),
html body .uk-primary.uk-btn:not(.action-button) {
    background: var(--uk-primary, #09B87D) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(9,184,125,.25) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

html body .utleiekalk-finn-wrapper .uk-btn.uk-primary:not(.action-button):hover,
html body .flipping-form .uk-btn.uk-primary:not(.action-button):hover {
    background: #078f63 !important;
    color: #fff !important;
}

/* Secondary button (dark) */
/* EXCLUDE .action-button from this rule */
html body .utleiekalk-finn-wrapper .uk-btn.uk-secondary:not(.action-button),
html body .utleiekalk-finn-form .uk-btn.uk-secondary:not(.action-button),
html body .flipping-form .uk-btn.uk-secondary:not(.action-button),
html body .uk-secondary.uk-btn:not(.action-button) {
    background: #0b1220 !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

html body .utleiekalk-finn-wrapper .uk-btn.uk-secondary:not(.action-button):hover,
html body .flipping-form .uk-btn.uk-secondary:not(.action-button):hover {
    background: #1a2332 !important;
    color: #fff !important;
}

/* Ghost button (white with border - "Legg til utgift" etc.) */
/* EXCLUDE .action-button from this rule */
html body .utleiekalk-finn-wrapper .uk-btn.uk-ghost:not(.action-button),
html body .utleiekalk-finn-form .uk-btn.uk-ghost:not(.action-button),
html body .flipping-form .uk-btn.uk-ghost:not(.action-button),
html body .uk-ghost.uk-btn:not(.action-button) {
    background: #fff !important;
    color: #0b1220 !important;
    border: 1px solid var(--uk-border, #E6E8EC) !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

html body .utleiekalk-finn-wrapper .uk-btn.uk-ghost:not(.action-button):hover,
html body .flipping-form .uk-btn.uk-ghost:not(.action-button):hover {
    background: #f9fafb !important;
    color: #0b1220 !important;
    border-color: var(--uk-border, #E6E8EC) !important;
}

/* Danger button (red) */
/* EXCLUDE .action-button from this rule */
html body .utleiekalk-finn-wrapper .uk-btn.uk-danger:not(.action-button),
html body .utleiekalk-finn-form .uk-btn.uk-danger:not(.action-button),
html body .flipping-form .uk-btn.uk-danger:not(.action-button),
html body .uk-danger.uk-btn:not(.action-button) {
    background: #e11d48 !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

html body .utleiekalk-finn-wrapper .uk-btn.uk-danger:not(.action-button):hover,
html body .flipping-form .uk-btn.uk-danger:not(.action-button):hover {
    background: #dc2626 !important;
    color: #fff !important;
}

/* Accent button (yellow) */
/* EXCLUDE .action-button from this rule */
html body .utleiekalk-finn-wrapper .uk-btn.uk-accent:not(.action-button),
html body .utleiekalk-finn-form .uk-btn.uk-accent:not(.action-button),
html body .flipping-form .uk-btn.uk-accent:not(.action-button),
html body .uk-accent.uk-btn:not(.action-button) {
    background: var(--uk-accent, #F8C72F) !important;
    color: #111 !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

/* Info button (blue/info color) */
/* EXCLUDE .action-button from this rule */
html body .utleiekalk-finn-wrapper .uk-btn.uk-info:not(.action-button),
html body .utleiekalk-finn-form .uk-btn.uk-info:not(.action-button),
html body .flipping-form .uk-btn.uk-info:not(.action-button),
html body .uk-info.uk-btn:not(.action-button) {
    background: #3b82f6 !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

/* Remove button (red "Fjern") */
html body .utleiekalk-finn-wrapper .remove-btn,
html body .utleiekalk-finn-form .remove-btn,
html body .flipping-form .remove-btn,
html body button.remove-btn {
    background: #e11d48 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-shadow: none !important;
    text-transform: none !important;
}

html body .utleiekalk-finn-wrapper .remove-btn:hover,
html body .flipping-form .remove-btn:hover {
    background: #dc2626 !important;
    color: #fff !important;
}

/* Base .uk-btn (without variant class) */
html body .utleiekalk-finn-wrapper .uk-btn,
html body .utleiekalk-finn-form .uk-btn,
html body .flipping-form .uk-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: .2s !important;
    text-shadow: none !important;
    outline: none !important;
}

/* Active state (when clicked) */
html body .utleiekalk-finn-wrapper .uk-btn:active,
html body .flipping-form .uk-btn:active {
    transform: translateY(1px) !important;
}

/* Focus states */
html body .utleiekalk-finn-wrapper .uk-btn:focus,
html body .flipping-form .uk-btn:focus {
    outline: none !important;
}

html body .utleiekalk-finn-wrapper .uk-btn.uk-primary:focus,
html body .flipping-form .uk-btn.uk-primary:focus {
    box-shadow: 0 8px 20px rgba(9,184,125,0.25), 0 0 0 4px rgba(9,184,125,0.18) !important;
}

/* =================================================================
   SCENARIO-SPECIFIC REMOVE BUTTONS (Flipping Calculator)
   ================================================================= */

html body .flipping-form .scenario-cost-row .remove-btn {
    padding: 6px 10px !important;
    background: #ef4444 !important;
    color: #fff !important;
    border: 1px solid #ef4444 !important;
    font-size: 13px !important;
}

html body .flipping-form .scenario-cost-row .remove-btn:hover {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
}

/* =================================================================
   ALL OTHER BUTTONS (fallback)
   ================================================================= */

/**
 * For any button without a specific class,
 * at least remove theme interference
 */
html body .utleiekalk-finn-wrapper button:not([class*="uk-"]):not(.remove-btn),
html body .flipping-form button:not([class*="uk-"]):not(.remove-btn) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    text-transform: none !important;
}

/* =================================================================
   SLIDER INPUT FIELD PROTECTION
   ================================================================= */

/**
 * Protect the percentage input field next to sliders
 * from Astra adding gray background
 */

/* The container should have white background */
html body .utleiekalk-finn-wrapper .uk-range-out,
html body .flipping-form .uk-range-out {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid var(--uk-border, #E6E8EC) !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    background: #fff !important;
}

/* The input field inside should have transparent/white background */
html body .utleiekalk-finn-wrapper .uk-range-out input,
html body .flipping-form .uk-range-out input {
    width: 72px !important;
    border: none !important;
    outline: none !important;
    font-size: 14px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--uk-text, #1b1f23) !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Remove any theme-added backgrounds on focus */
html body .utleiekalk-finn-wrapper .uk-range-out input:focus,
html body .flipping-form .uk-range-out input:focus {
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* =================================================================
   STICKY ACTIONS PANEL PROTECTION (Left side menu)
   ================================================================= */

/**
 * Protect sticky actions panel from theme background override
 * Applies to both rental and flipping calculators
 */

/* Panel container */
html body .sticky-actions-panel,
html body div.sticky-actions-panel {
    background: transparent !important;
}

/* Individual action items (the white boxes) */
html body .sticky-action-item,
html body div.sticky-action-item {
    background: white !important;
    background-color: white !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1) !important;
}

html body .sticky-action-item:first-child,
html body div.sticky-action-item:first-child {
    border-radius: 0 8px 0 0 !important;
}

html body .sticky-action-item:last-child,
html body div.sticky-action-item:last-child {
    border-radius: 0 0 8px 0 !important;
    border-bottom: none !important;
}

html body .sticky-action-item:hover,
html body div.sticky-action-item:hover {
    background: #f9fafb !important;
    background-color: #f9fafb !important;
}

/* The button inside each item */
html body .sticky-action-item .action-button,
html body div.sticky-action-item button.action-button,
html body button.action-button,
html body .action-button {
    background: white !important;
    background-color: white !important;
    color: #111827 !important;
    text-shadow: none !important;
}

html body .sticky-action-item:hover .action-button,
html body div.sticky-action-item:hover button.action-button {
    background: #f9fafb !important;
    background-color: #f9fafb !important;
}

/* =================================================================
   CALCULATOR MODAL BUTTONS PROTECTION
   ================================================================= */

/**
 * Protect calculator modal buttons from Astra theme override
 * The calculator popup that appears when clicking "Kalkulator"
 */

/* Base calculator button */
html body .kalkulator-modal .calc-btn,
html body .calc-btn {
    padding: 20px !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    background: #f3f4f6 !important;
    color: #1f2937 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Number buttons */
html body .kalkulator-modal .calc-num,
html body .calc-btn.calc-num {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
}

/* Operator buttons (÷, ×, −, +) */
html body .kalkulator-modal .calc-op,
html body .calc-btn.calc-op {
    background: var(--uk-primary, #09B87D) !important;
    color: white !important;
}

html body .kalkulator-modal .calc-op:hover,
html body .calc-btn.calc-op:hover {
    background: #08a875 !important;
    color: white !important;
}

/* Equals button (=) */
html body .kalkulator-modal .calc-equals,
html body .calc-btn.calc-equals {
    background: var(--uk-accent, #F8C72F) !important;
    color: white !important;
}

html body .kalkulator-modal .calc-equals:hover,
html body .calc-btn.calc-equals:hover {
    background: #0284c7 !important;
    color: white !important;
}

/* Clear button (C) - spans full width across 4 columns */
html body .kalkulator-modal .calc-clear,
html body .calc-btn.calc-clear {
    grid-column: span 4 !important;
    background: #ef4444 !important;
    color: white !important;
}

html body .kalkulator-modal .calc-clear:hover,
html body .calc-btn.calc-clear:hover {
    background: #dc2626 !important;
    color: white !important;
}

/* =================================================================
   MARKET RENT RESEARCH BUTTONS PROTECTION
   ================================================================= */

/**
 * Protect market rent research buttons (FINN/Hybel) from Astra override
 * These buttons should always be white with black border
 */
html body .utleiekalk-finn-wrapper .market-rent-btn,
html body .market-rent-btn,
html body button.market-rent-btn {
    background: white !important;
    border: 1px solid #000 !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

html body .utleiekalk-finn-wrapper .market-rent-btn:hover,
html body .market-rent-btn:hover,
html body button.market-rent-btn:hover {
    background: #f8f9fa !important;
    border-color: #000 !important;
    color: #1a1a1a !important;
}

html body .utleiekalk-finn-wrapper .market-rent-btn:active,
html body .market-rent-btn:active,
html body button.market-rent-btn:active {
    background: #e9ecef !important;
    border-color: #000 !important;
}

html body .utleiekalk-finn-wrapper .market-rent-btn:focus,
html body .market-rent-btn:focus,
html body button.market-rent-btn:focus {
    outline: 2px solid #000 !important;
    outline-offset: 2px !important;
}

/* Market rent button images (logos) */
html body .market-rent-btn img {
    height: 18px !important;
    width: auto !important;
    max-width: 60px !important;
    object-fit: contain !important;
}

/* Market rent button text */
html body .market-rent-btn span {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
}

/* =================================================================
   END OF BUTTON PROTECTION
   ================================================================= */