/**
 * Stylesheet cho công cụ Tạo chữ ký email HTML (Email Signature Generator)
 */

.hihi-sig-container {
    --primary-indigo: #4f46e5;
    --primary-indigo-hover: #4338ca;
}

/* Kiểu dáng các nút chọn Template */
.template-select-btn.active {
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.1), 0 4px 6px -4px rgba(79, 70, 229, 0.1);
}

/* Accordion Form nhập liệu */
.sig-accordion-header {
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.sig-accordion-header:hover {
    color: var(--primary-indigo);
    border-color: #c7d2fe;
}

.sig-accordion-header .arrow {
    font-size: 8px;
    color: #94a3b8;
}

.sig-accordion-header.active {
    color: var(--primary-indigo);
    border-color: #c7d2fe;
}

.sig-accordion-header.active .arrow {
    transform: rotate(180deg);
    color: var(--primary-indigo);
}

.sig-accordion-content {
    transition: all 0.3s ease;
}

/* Hướng dẫn sử dụng Tabs */
.guide-tab-btn {
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.guide-tab-btn.active {
    color: var(--primary-indigo);
    border-color: var(--primary-indigo);
}

.guide-tab-btn:hover:not(.active) {
    color: #475569;
    border-color: #cbd5e1;
}

/* Khung Live Preview */
#signature-preview {
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    width: 100%;
}

/* Custom styles for tables inside signature preview to make it look clean */
#signature-preview table {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}

/* Form inputs border focus */
.hihi-sig-container input:focus, 
.hihi-sig-container select:focus {
    border-color: transparent !important;
}

/* Micro-animations */
.template-select-btn:hover {
    transform: translateY(-1px);
}
.template-select-btn:active {
    transform: translateY(0);
}
kbd {
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}