/**
 * Calculator Embed Modal Styles
 *
 * Styles for the "Embed this calculator" button and modal
 * shown on regular calculator pages.
 * Matches the modern rcl-btn pattern from course-landing.css.
 *
 * @package Ryan_OConnell_Theme
 * @since 1.0.0
 */

/* Embed Button (outline style) */
.roc-embed-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid #2563eb;
    background: transparent;
    color: #2563eb;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.roc-embed-btn:hover,
.roc-embed-btn:focus {
    background: rgba(37, 99, 235, 0.05);
    color: #1e40af;
    border-color: #1e40af;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

/* Modal Overrides */
#rocEmbedModal .modal-header {
    border-bottom: 1px solid #e5e7eb;
}

#rocEmbedModal .modal-title {
    color: #1e40af;
    font-weight: 700;
}

#rocEmbedModal .modal-footer {
    border-top: 1px solid #e5e7eb;
}

/* Embed Code Textarea */
.roc-embed-code {
    font-size: 0.8rem;
    line-height: 1.5;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
    resize: none;
    padding-right: 100px;
}

.roc-embed-code:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

/* Copy Button (positioned inside textarea area) */
.roc-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid transparent;
    background-color: #2563eb;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
    line-height: 1.4;
}

.roc-copy-btn:hover {
    background-color: #1e40af;
    border-color: #1e40af;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.roc-copy-btn.copied {
    background-color: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

/* Modal Close Button */
#rocEmbedModal .modal-footer .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    background: transparent;
    color: #6b7280;
    transition: all 0.2s ease;
}

#rocEmbedModal .modal-footer .btn-secondary:hover {
    background: #f1f5f9;
    color: #374151;
    border-color: #d1d5db;
}

/* Preview Wrapper */
.roc-embed-preview-wrapper {
    background-color: #f1f5f9;
    border-radius: 8px;
    min-height: 200px;
}

/* Height Input */
#rocEmbedHeight {
    max-width: 150px;
    border-radius: 8px;
}