/* ==========================================================================
   Keybin WooCommerce Plugin v2.0 - Admin Styles
   Design: Modern card-based layout matching Keybin.net brand
   ========================================================================== */

:root {
    --keybin-purple: #7c66c7;
    --keybin-purple-dark: #6350a8;
    --keybin-purple-light: #f0edfa;
    --keybin-purple-bg: #ece8f7;
    --keybin-success: #22c55e;
    --keybin-success-bg: #f0fdf4;
    --keybin-danger: #ef4444;
    --keybin-danger-bg: #fef2f2;
    --keybin-warning: #f59e0b;
    --keybin-text: #1e293b;
    --keybin-text-muted: #64748b;
    --keybin-border: #e2e8f0;
    --keybin-bg: #f8fafc;
    --keybin-card-bg: #ffffff;
    --keybin-radius: 12px;
    --keybin-radius-sm: 8px;
    --keybin-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --keybin-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --keybin-transition: all 0.2s ease;
}

/* Typography */
.keybin-wrap,
.keybin-wrap *:not(.dashicons) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    box-sizing: border-box;
}

.keybin-wrap {
    max-width: 1600px;
    color: var(--keybin-text);
}

.keybin-wrap h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--keybin-text);
    margin-bottom: 24px;
}

.keybin-wrap h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--keybin-text);
    margin: 0 0 8px 0;
}

.keybin-wrap p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--keybin-text-muted);
    margin: 0 0 12px 0;
}

.keybin-wrap b,
.keybin-wrap strong {
    color: var(--keybin-text);
    font-weight: 600;
}

.keybin-wrap a {
    color: var(--keybin-purple);
    text-decoration: none;
    transition: var(--keybin-transition);
}

.keybin-wrap a:hover {
    color: var(--keybin-purple-dark);
}

/* Layout */
.settingpagemaindiv {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.settingpagemaindiv .leftpart {
    flex: 1;
    min-width: 0;
}

.settingpagemaindiv .rightpart {
    width: 280px;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .settingpagemaindiv {
        flex-direction: column;
    }
    .settingpagemaindiv .rightpart {
        width: 100%;
    }
}

/* Cards */
.keybin-card {
    background: var(--keybin-card-bg);
    border: 1px solid var(--keybin-border);
    border-radius: var(--keybin-radius);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--keybin-shadow);
    transition: var(--keybin-transition);
}

.keybin-card:hover {
    box-shadow: var(--keybin-shadow-lg);
}

.keybin-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--keybin-border);
}

.keybin-card-header h6 {
    margin: 0;
}

.keybin-card-header .dashicons {
    color: var(--keybin-purple);
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Status Badges */
.keybin-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.keybin-badge-success {
    background: var(--keybin-success-bg);
    color: var(--keybin-success);
}

.keybin-badge-danger {
    background: var(--keybin-danger-bg);
    color: var(--keybin-danger);
}

.keybin-badge-purple {
    background: var(--keybin-purple-light);
    color: var(--keybin-purple);
}

/* Buttons */
.keybin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--keybin-radius-sm);
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--keybin-transition);
    text-decoration: none;
    line-height: 1.4;
}

.keybin-btn:focus {
    outline: 2px solid var(--keybin-purple);
    outline-offset: 2px;
}

.keybin-btn-primary,
.savebtnsetting,
.savebtnsetting:hover,
.savebtnsetting:focus {
    background: var(--keybin-purple);
    color: #fff !important;
    border-radius: var(--keybin-radius-sm);
    border: none;
    outline: none;
    box-shadow: none;
    height: auto;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--keybin-transition);
}

.savebtnsetting:hover,
.keybin-btn-primary:hover {
    background: var(--keybin-purple-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 102, 199, 0.4);
}

.savebtnsetting-green,
.savebtnsetting-green:hover,
.savebtnsetting-green:focus {
    background: var(--keybin-success) !important;
}

.savebtnsetting-green:hover {
    background: #16a34a !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4) !important;
}

.keybin-btn-outline {
    background: transparent;
    color: var(--keybin-purple);
    border: 2px solid var(--keybin-purple);
}

.keybin-btn-outline:hover {
    background: var(--keybin-purple-light);
}

.keybin-btn-warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
}

.keybin-btn-warning:hover {
    background: #fde68a;
}

.keybin-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* Form Inputs */
.keybin-wrap input[type="text"],
.keybin-wrap input[type="password"],
.keybin-wrap input[type="number"],
.keybin-wrap input[type="date"],
.keybin-wrap select {
    padding: 8px 12px;
    border: 1px solid var(--keybin-border);
    border-radius: var(--keybin-radius-sm);
    font-size: 14px;
    color: var(--keybin-text);
    transition: var(--keybin-transition);
    background: #fff;
}

.keybin-wrap input[type="text"]:focus,
.keybin-wrap input[type="password"]:focus,
.keybin-wrap input[type="number"]:focus,
.keybin-wrap select:focus {
    border-color: var(--keybin-purple);
    box-shadow: 0 0 0 3px rgba(124, 102, 199, 0.15);
    outline: none;
}

.keybin-wrap input[type="checkbox"] {
    accent-color: var(--keybin-purple);
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Token Input */
.common-input-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.common-input-label input {
    width: 350px;
    max-width: 100%;
}

/* Margin Section */
.fixedmargindiv {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.fixedmargindiv > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fixedmargindiv .keybin-input-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fixedmargindiv .keybin-input-group input {
    width: 100px;
}

.fixedmargindiv .keybin-input-group .keybin-unit {
    font-size: 14px;
    font-weight: 600;
    color: var(--keybin-text-muted);
    min-width: 16px;
}

.fixedmargindiv label {
    font-size: 13px;
    font-weight: 600;
    color: var(--keybin-text);
}

.fixedmargindiv .keybin-plus {
    font-size: 20px;
    font-weight: 700;
    color: var(--keybin-text-muted);
    padding: 0 4px;
    align-self: flex-end;
    line-height: 38px;
}

/* Platform/Region Margin Select */
.select-input,
.platform-select {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.select-input .keybin-input-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.select-input .keybin-input-group input {
    width: 80px;
}

.select-input .keybin-input-group .keybin-unit {
    font-size: 14px;
    font-weight: 600;
    color: var(--keybin-text-muted);
}

.select-input select,
.platform-select select {
    min-width: 180px;
}

/* Import Input Groups */
.importinputdiv {
    margin-bottom: 12px;
}

.importinputdiv p {
    display: inline;
    margin-right: 8px;
}

.importinputdiv .keybin-input-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.importinputdiv .keybin-input-group input {
    width: 80px;
}

.importinputdiv .keybin-input-group .keybin-unit {
    font-size: 14px;
    font-weight: 600;
    color: var(--keybin-text-muted);
}

/* Remove Button */
.removeinput {
    text-decoration: none !important;
    display: inline-flex;
}

.removeinput .dashicons {
    width: 32px;
    height: 32px;
    background: var(--keybin-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: var(--keybin-radius-sm);
    font-size: 16px;
    transition: var(--keybin-transition);
}

.removeinput:hover .dashicons {
    background: #dc2626;
}

/* Add Platform Link */
.addplatform {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--keybin-purple) !important;
    text-decoration: none !important;
    margin-top: 8px;
}

.addplatform:hover {
    color: var(--keybin-purple-dark) !important;
}

/* Tables */
.keybin-wrap table {
    width: 100%;
    border-collapse: collapse;
    background: var(--keybin-card-bg);
    border-radius: var(--keybin-radius);
    overflow: hidden;
    border: 1px solid var(--keybin-border);
}

.keybin-wrap table thead {
    background: var(--keybin-bg);
}

.keybin-wrap table th {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--keybin-text);
    text-align: left;
    border-bottom: 2px solid var(--keybin-border);
}

.keybin-wrap table td {
    padding: 10px 16px;
    font-size: 13px;
    color: var(--keybin-text);
    border-bottom: 1px solid var(--keybin-border);
}

.keybin-wrap table tbody tr:nth-child(even) {
    background: var(--keybin-bg);
}

.keybin-wrap table tbody tr:hover {
    background: var(--keybin-purple-light);
}

.keybin-wrap table tbody tr:last-child td {
    border-bottom: none;
}

/* Import Info Section */
.import_info {
    margin-bottom: 24px;
}

/* Sidebar */
.settingpagemaindiv .rightpart .keybin-card {
    text-align: center;
}

.settingpagemaindiv .rightpart img {
    width: 80px;
    margin-bottom: 16px;
}

.settingpagemaindiv .rightpart .keybin-card p {
    text-align: left;
    font-size: 13px;
}

/* Status indicator */
.text_color {
    color: var(--keybin-success) !important;
    font-weight: 600;
}

.red_text {
    color: var(--keybin-danger) !important;
    font-weight: 600;
}

/* Date Filter Form */
.tablefiltermaindiv {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 24px 0 16px 0;
}

.table_form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.fromdiv,
.toinputdiv {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fromdiv label,
.toinputdiv label {
    font-size: 12px;
    font-weight: 600;
    color: var(--keybin-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.showbtndiv {
    display: flex;
    gap: 8px;
}

/* Cron Paths */
.keybin-cron-path {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--keybin-bg);
    border: 1px solid var(--keybin-border);
    border-radius: var(--keybin-radius-sm);
    padding: 8px 12px;
    margin-bottom: 8px;
    font-family: "SF Mono", "Fira Code", "Consolas", monospace;
    font-size: 12px;
    word-break: break-all;
    color: var(--keybin-text);
}

.keybin-copy-btn {
    flex-shrink: 0;
    background: var(--keybin-purple-light);
    color: var(--keybin-purple);
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: var(--keybin-transition);
}

.keybin-copy-btn:hover {
    background: var(--keybin-purple);
    color: #fff;
}

/* Progress Bar */
.keybin-progress {
    width: 100%;
    height: 8px;
    background: var(--keybin-border);
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0;
}

.keybin-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--keybin-purple), var(--keybin-purple-dark));
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Action Buttons Grid */
.keybin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

/* Notices */
.keybin-wrap .updated.notice {
    border-left-color: var(--keybin-success);
    background: var(--keybin-success-bg);
    border-radius: var(--keybin-radius-sm);
    padding: 12px 16px;
}

.keybin-wrap .updated.error {
    border-left-color: var(--keybin-danger);
    background: var(--keybin-danger-bg);
    border-radius: var(--keybin-radius-sm);
    padding: 12px 16px;
}

/* Webhook Section */
.keybin-endpoint {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--keybin-bg);
    border: 1px solid var(--keybin-border);
    border-radius: var(--keybin-radius-sm);
    padding: 12px 16px;
    margin: 8px 0 16px 0;
    word-break: break-all;
    font-family: "SF Mono", "Fira Code", "Consolas", monospace;
    font-size: 13px;
}

/* Button spacing utilities (replaces Bootstrap) */
.mb-3 { margin-bottom: 12px; }
.mr-3 { margin-right: 12px; }
.mt-2 { margin-top: 8px; }
.mt-b { margin-top: 8px; }
.ml-2 { margin-left: 8px; }

/* Import Platform/Region Select Grid */
.import-platform-select-items,
.import-region-select-items {
    display: grid;
    gap: 8px;
}

.platform-select-items,
.region-select-items {
    display: grid;
    gap: 4px;
}

/* Section label */
.keybin-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--keybin-text-muted);
    margin-bottom: 8px;
}

/* Product Tester */
.keybin-tester-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.keybin-tester-form input[type="text"] {
    width: 300px;
    max-width: 100%;
}

.keybin-tester-result {
    display: none;
    margin-top: 16px;
}

.keybin-tester-result.active {
    display: block;
}

.keybin-tester-result table {
    margin-top: 8px;
}

.keybin-tester-result table td:first-child {
    font-weight: 600;
    white-space: nowrap;
    width: 180px;
}

.keybin-tester-loading {
    display: none;
    padding: 16px 0;
    color: var(--keybin-text-muted);
    font-style: italic;
}

.keybin-tester-error {
    display: none;
    padding: 12px 16px;
    background: var(--keybin-danger-bg);
    color: var(--keybin-danger);
    border-radius: var(--keybin-radius-sm);
    font-weight: 600;
}

/* SKU textarea */
.keybin-wrap textarea {
    padding: 8px 12px;
    border: 1px solid var(--keybin-border);
    border-radius: var(--keybin-radius-sm);
    font-size: 14px;
    color: var(--keybin-text);
    transition: var(--keybin-transition);
    background: #fff;
    width: 100%;
    max-width: 500px;
    resize: vertical;
}

.keybin-wrap textarea:focus {
    border-color: var(--keybin-purple);
    box-shadow: 0 0 0 3px rgba(124, 102, 199, 0.15);
    outline: none;
}

/* Priority info box */
.keybin-priority-info {
    background: var(--keybin-purple-light);
    border: 1px solid var(--keybin-purple);
    border-radius: var(--keybin-radius-sm);
    padding: 12px 16px;
    margin: 12px 0;
}

.keybin-priority-info p {
    margin: 4px 0;
    font-size: 13px;
    color: var(--keybin-text);
}

.keybin-priority-info strong {
    color: var(--keybin-purple-dark);
}

/* Type Select (% / €) */
.keybin-type-select {
    min-width: auto !important;
    width: 56px;
    padding: 8px 4px !important;
    text-align: center;
    font-weight: 600;
    border-left: none !important;
    border-radius: 0 var(--keybin-radius-sm) var(--keybin-radius-sm) 0 !important;
}

.keybin-input-group .keybin-type-select {
    margin-left: -1px;
}

/* Price Range Margin Rows */
.range-row {
    flex-wrap: wrap;
}

.range-row .keybin-input-group input {
    width: 70px;
}

.keybin-range-sep {
    font-size: 16px;
    font-weight: 700;
    color: var(--keybin-text-muted);
    padding: 0 2px;
    line-height: 38px;
}

.keybin-range-arrow {
    font-size: 16px;
    font-weight: 700;
    color: var(--keybin-purple);
    padding: 0 4px;
    line-height: 38px;
}

/* Mapping Rows */
.mapping-row {
    align-items: center;
}

.mapping-row input[type="text"] {
    min-width: 160px;
    flex: 1;
}

.mapping-row select {
    min-width: 180px;
    flex: 1;
}

/* Margin & Mapping Container Grids */
.category-margin-items,
.range-margin-items,
.category-map-items,
.attribute-map-items {
    display: grid;
    gap: 4px;
}

.margin-inputs-main {
    margin-bottom: 4px;
}

/* Add Row Links (shared pattern for all add buttons) */
.addrangerow,
.addcategorymargin,
.addcategorymap,
.addattributemap,
.addregion,
.prefill-category-map,
.prefill-attribute-map {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--keybin-purple) !important;
    text-decoration: none !important;
    margin-top: 8px;
}

.addrangerow:hover,
.addcategorymargin:hover,
.addcategorymap:hover,
.addattributemap:hover,
.addregion:hover,
.prefill-category-map:hover,
.prefill-attribute-map:hover {
    color: var(--keybin-purple-dark) !important;
}

/* Product Tester Import Status */
#tester-import-status {
    margin-bottom: 12px;
}

#tester-import-status .keybin-badge {
    font-size: 14px;
    padding: 6px 16px;
}

/* Product Tester Image Thumbnail */
#tester-image img {
    max-height: 60px;
    border-radius: 4px;
    vertical-align: middle;
}