/* =============================================================================
   Ashbar Summaries - Frontend Styles
   Direction-agnostic. Works for both RTL and LTR.
   ============================================================================= */

.ashbar-summaries-wrapper {
    max-width: 640px;
    margin: 24px auto;
    font-family: inherit;
    color: #222;
    box-sizing: border-box;
}

.ashbar-summaries-wrapper *,
.ashbar-summaries-wrapper *::before,
.ashbar-summaries-wrapper *::after {
    box-sizing: border-box;
}

.ashbar-summaries-step {
    display: none;
}
.ashbar-summaries-step.is-active {
    display: block;
}

/* =============================================================================
   Drop Zone
   ============================================================================= */
.ashbar-summaries-dropzone {
    border: 2px dashed #b8c2cc;
    border-radius: 14px;
    padding: 44px 24px;
    text-align: center;
    background: #fafbfc;
    transition: all 0.2s ease;
    cursor: pointer;
    outline: none;
}

.ashbar-summaries-dropzone:hover,
.ashbar-summaries-dropzone:focus {
    border-color: #5b8dee;
    background: #f0f5ff;
}

.ashbar-summaries-dropzone.is-dragover {
    border-color: #2563eb;
    background: #e0ecff;
    transform: scale(1.01);
}

.ashbar-summaries-dropzone__icon {
    color: #5b8dee;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
}

.ashbar-summaries-dropzone__text {
    font-size: 16px;
    color: #4b5563;
    margin: 0 0 18px 0;
    line-height: 1.5;
}

/* =============================================================================
   Buttons
   ============================================================================= */
.ashbar-summaries-button {
    display: inline-block;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    line-height: 1.4;
}

.ashbar-summaries-button--primary {
    background: #2563eb;
    color: #fff;
}
.ashbar-summaries-button--primary:hover {
    background: #1d4ed8;
}
.ashbar-summaries-button--primary:active {
    transform: translateY(1px);
}

.ashbar-summaries-button--secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}
.ashbar-summaries-button--secondary:hover {
    background: #e5e7eb;
}

.ashbar-summaries-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* =============================================================================
   Error message (shared)
   ============================================================================= */
.ashbar-summaries-error,
.ashbar-summaries-form__error {
    margin-top: 14px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    display: none;
}
.ashbar-summaries-error.is-visible,
.ashbar-summaries-form__error.is-visible {
    display: block;
}

/* =============================================================================
   Uploading state (spinner + progress)
   ============================================================================= */
.ashbar-summaries-step-uploading {
    text-align: center;
    padding: 40px 24px;
}

.ashbar-summaries-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
    position: relative;
    height: 56px;
}

.ashbar-summaries-spinner--large {
    height: 96px;
    margin-bottom: 24px;
}

.ashbar-summaries-spinner__ring {
    width: 56px;
    height: 56px;
    border: 4px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: ashbar-summaries-spin 0.9s linear infinite;
}

.ashbar-summaries-spinner--large .ashbar-summaries-spinner__ring {
    width: 84px;
    height: 84px;
    border-width: 5px;
}

.ashbar-summaries-spinner__pulse {
    position: absolute;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #2563eb;
    opacity: 0.15;
    animation: ashbar-summaries-pulse 1.8s ease-in-out infinite;
}

@keyframes ashbar-summaries-spin {
    to { transform: rotate(360deg); }
}

@keyframes ashbar-summaries-pulse {
    0%   { transform: scale(0.8); opacity: 0.25; }
    50%  { transform: scale(1.15); opacity: 0.05; }
    100% { transform: scale(0.8); opacity: 0.25; }
}

.ashbar-summaries-uploading-text,
.ashbar-summaries-processing-text {
    font-size: 15px;
    color: #4b5563;
    margin: 0 0 16px 0;
    text-align: center;
}

.ashbar-summaries-step-processing {
    text-align: center;
    padding: 50px 24px;
}

.ashbar-summaries-processing-text {
    font-size: 16px;
    color: #374151;
    transition: opacity 0.4s ease;
    min-height: 1.5em;
}
.ashbar-summaries-processing-text.is-fading {
    opacity: 0;
}

.ashbar-summaries-progress {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    height: 6px;
    background: #e5e7eb;
    border-radius: 100px;
    overflow: hidden;
}

.ashbar-summaries-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2563eb, #5b8dee);
    border-radius: 100px;
    transition: width 0.25s ease;
}

/* =============================================================================
   File Pill
   ============================================================================= */
.ashbar-summaries-file-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #f1f5f9;
    border-radius: 10px;
    margin-bottom: 22px;
}

.ashbar-summaries-file-pill__icon {
    color: #dc2626;
    flex-shrink: 0;
}

.ashbar-summaries-file-pill__name {
    font-size: 15px;
    color: #1f2937;
    word-break: break-all;
    font-weight: 500;
}

/* =============================================================================
   Form
   ============================================================================= */
.ashbar-summaries-form {
    margin: 0;
}

.ashbar-summaries-form__row {
    margin-bottom: 18px;
}

.ashbar-summaries-form__row--checkbox {
    margin-bottom: 12px;
}

.ashbar-summaries-form__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.ashbar-summaries-form__input,
.ashbar-summaries-form__textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 15px;
    font-family: inherit;
    color: #111827;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ashbar-summaries-form__input:focus,
.ashbar-summaries-form__textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ashbar-summaries-form__textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.ashbar-summaries-form__help {
    font-size: 13px;
    color: #6b7280;
    margin: 6px 0 0 0;
    line-height: 1.5;
}

.ashbar-summaries-form__actions {
    margin-top: 24px;
    text-align: center;
}

/* Checkbox styling */
.ashbar-summaries-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.ashbar-summaries-checkbox:hover {
    background: #f3f4f6;
}

.ashbar-summaries-checkbox input[type="checkbox"] {
    margin: 3px 0 0 0;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
}

.ashbar-summaries-checkbox__text {
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

/* Honeypot - hidden from real users, visible to bots */
.ashbar-summaries-honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* =============================================================================
   Rate limit step (friendly waiting state, not an error)
   ============================================================================= */
.ashbar-summaries-step-rate-limit {
    text-align: center;
    padding: 40px 24px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
}

.ashbar-summaries-rate-limit__message {
    font-size: 15px;
    color: #1e3a8a;
    line-height: 1.6;
    margin-bottom: 22px;
}

.ashbar-summaries-rate-limit__message p {
    margin: 0 0 10px 0;
}
.ashbar-summaries-rate-limit__message p:last-child {
    margin-bottom: 0;
}

.ashbar-summaries-rate-limit__timer {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    background: #fff;
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    font-variant-numeric: tabular-nums;
}

.ashbar-summaries-rate-limit__time {
    font-size: 20px;
    font-weight: 700;
    color: #1d4ed8;
    line-height: 1;
}

.ashbar-summaries-rate-limit__label {
    font-size: 13px;
    color: #1e3a8a;
}

/* =============================================================================
   Success step
   ============================================================================= */
.ashbar-summaries-step-success {
    text-align: center;
    padding: 40px 24px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
}

.ashbar-summaries-success__check {
    color: #16a34a;
    margin: 0 auto 14px auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ashbar-summaries-pop 0.4s ease;
}

@keyframes ashbar-summaries-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

.ashbar-summaries-success__message {
    font-size: 16px;
    color: #14532d;
    line-height: 1.6;
    margin-bottom: 22px;
}
.ashbar-summaries-success__message p {
    margin: 0 0 8px 0;
}
.ashbar-summaries-success__message p:last-child {
    margin-bottom: 0;
}

.ashbar-summaries-success__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.ashbar-summaries-success__actions .ashbar-summaries-button {
    text-decoration: none;
}