/*
Plugin Name: GPX/FIT Converter
Description: Public-facing stylesheet for the GPX/FIT Converter plugin.
*/

/* This file contains specific overrides or additions to rb-sizer-style.css */

/* Custom styling for the file input button to match the theme's button style */
input[type="file"] {
    /* Hide the default "No file chosen" text */
    color: transparent;
    /* Ensure the input takes full width */
    width: 100%;
    /* Position the custom button */
    position: relative;
    z-index: 1; /* Ensure it's above any background elements */
    cursor: pointer;
    /* Adjust padding to make space for the custom button, if needed */
    padding-left: 10px; /* Example: adjust based on final button size */
}

/* Hide the default file upload button */
input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
}
input[type="file"]::before {
    content: '选择文件'; /* Custom button text */
    display: inline-block;
    /* Use variables from rb-sizer-style.css for button styling */
    background: var(--input-bg); /* Using input background for file button */
    color: var(--text-color);
    border: 1px solid var(--input-border);
    border-radius: 8px; /* Matches input/button border-radius */
    padding: 12px 15px; /* Matches input padding */
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 1em;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    /* Position the custom button */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Include padding and border in width/height */
}

input[type="file"]:hover::before {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly brighter on hover */
    border-color: var(--input-focus-border-color);
    box-shadow: 0 0 0 3px rgba(0, 175, 255, 0.25);
}

input[type="file"]:active::before {
    transform: translateY(0);
    filter: brightness(0.95);
}

input[type="file"]:disabled::before {
    opacity: 0.65;
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, 0.5);
    border-color: rgba(200, 200, 200, 0.2);
    box-shadow: none;
}

/* Adjust the main button's width to match the new UI (if needed) */
#cwa-submit-button {
    width: 100%; /* Make convert button full width within its container */
}

/* Specific adjustments for the preview section elements */
#gpx-converter-preview .rbf-card-title h4 {
    /* Ensure the title within the preview card matches the rbf-card-title style */
    font-size: 1.5em;
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 500;
    border-bottom: 1px solid var(--input-border);
    padding-bottom: 12px;
    text-align: left; /* Align with other rbf-card-title */
}

#gpx-converter-preview p {
    font-size: 0.95em; /* Match rbf text sizing */
    line-height: 1.6;
    color: var(--text-color);
    opacity: 0.9;
    margin-bottom: 8px; /* Adjust spacing */
}

#gpx-converter-preview p strong {
    font-weight: 500; /* Match rbf font weights */
    color: var(--text-color);
    min-width: 80px; /* Keep labels aligned */
    display: inline-block;
}

/* Ensure Leaflet map border-radius and margin are consistent */
#preview-map {
    border-radius: 8px; /* Matches common border-radius in rb-sizer-style */
    border: 1px solid var(--input-border); /* Use input border color */
    margin-top: 15px; /* Consistent spacing */
}

/* Message styling overrides for specific colors if needed,
   otherwise, rbf-error-message will handle it */
#gpx-converter-message.rbf-error-message {
    /* inherits from rbf-error-message */
}
#gpx-converter-message.rbf-success-message { /* Define if you need a success message style */
    background-color: rgba(40, 167, 69, 0.15);
    color: #155724;
    border: 1px solid rgba(40, 167, 69, 0.25);
    padding: 12px 18px;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    margin-top: 20px;
    text-align: center;
    font-weight: 500;
}

/* Loading message specific style */
#gpx-converter-loading {
    /* Already defined inline in public.php to use rbf-error-message with custom colors */
}

/* Adjust Leaflet popups and controls to match glassmorphism if rb-sizer-style.css doesn't cover it */
/* (rb-sizer-style.css already has some Leaflet styling, so these might be redundant or for fine-tuning) */
.rb-sizer-astra-container .leaflet-popup-content-wrapper {
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: 8px; /* Adjusted from 5px to 8px for consistency */
    box-shadow: var(--card-shadow);
    border: 1px solid var(--card-border-color);
    backdrop-filter: blur(calc(var(--glass-blur) / 1.5)); /* Using theme glass blur */
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) / 1.5));
}
.rb-sizer-astra-container .leaflet-popup-tip {
    background: var(--card-bg);
    opacity: 0.85;
}
.rb-sizer-astra-container .leaflet-control-zoom a {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-radius: 8px; /* Adjusted from small to 8px */
    border: 1px solid var(--card-border-color);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(calc(var(--glass-blur) / 1.5));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) / 1.5));
}
.rb-sizer-astra-container .leaflet-control-zoom a:hover {
    background-color: rgba(255,255,255,0.35);
}


/* gpx-fit-converter/assets/css/style.css */

/* For the loading indicator visual */
#gpx-converter-loading.is-loading {
    position: relative;
    padding-right: 30px; /* Make space for the spinner */
}

#gpx-converter-loading.is-loading::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #f3f3f3; /* Light grey */
    border-top: 2px solid #007bff; /* Blue spinner */
    border-radius: 50%;
    animation: spin 1s linear infinite; /* Spin animation */
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}