/* ============================================================
   sig.css — Free Online Signature Generator
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

.sig-form {
    background: #ffffff;
    border: 1px solid #d0d8e0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 4px rgba(15,25,35,.08);
}

.sig-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #000000 !important;
    margin: 0 0 .75rem;
}

.sig-label {
    display: block;
    font-size: .95rem;
    font-weight: 600;
    color: #0f1923;
    margin-bottom: .4rem;
}

.sig-input {
    width: 100%;
    padding: .75rem 1rem;
    font-size: 1.1rem;
    border: 2px solid #d0d8e0;
    border-radius: 10px;
    background: #ffffff;
    color: #0f1923;
    margin-bottom: 1.25rem;
    transition: border-color .15s, box-shadow .15s;
}

.sig-input:focus {
    outline: none;
    border-color: #005fa3;
    box-shadow: 0 0 0 3px rgba(0,95,163,.15);
}

.sig-input::placeholder { color: #8fa0b0; }

/* Style grid */
.sig-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.sig-style-card {
    border: 2px solid #d0d8e0;
    border-radius: 10px;
    padding: .75rem 1rem;
    cursor: pointer;
    background: #ffffff;
    transition: border-color .15s, background .15s;
    text-align: center;
}

.sig-style-card:hover   { border-color: #005fa3; background: #f0f8ff; }
.sig-style-card.selected { border-color: #005fa3; background: #e0f0fb; }

.sig-style-preview {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sig-style-preview span {
    font-size: 1.6rem;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.sig-style-name {
    font-size: .8rem;
    font-weight: 600;
    color: #4a5c6e;
    margin-top: .4rem;
}

/* Colour row */
.sig-color-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.sig-color-input {
    width: 48px;
    height: 38px;
    border: 2px solid #d0d8e0;
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
    background: none;
}

.sig-color-presets {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    align-items: center;
}

.sig-color-preset {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #d0d8e0;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
}

.sig-color-preset:hover { transform: scale(1.15); border-color: #005fa3; }

.sig-eyedropper-btn {
    padding: .45rem .9rem;
    font-size: .85rem;
    font-weight: 700;
    border: 2px solid #d0d8e0;
    border-radius: 8px;
    background: #ffffff;
    color: #1e2d3d;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.sig-eyedropper-btn:hover { background: #e0f0fb; border-color: #005fa3; }
.sig-eyedropper-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Size row */
.sig-size-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.sig-range {
    flex: 1;
    accent-color: #005fa3;
}

.sig-size-label {
    font-size: .9rem;
    color: #0f1923;
    font-weight: 600;
    min-width: 40px;
}

/* Options row */
.sig-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 560px) {
    .sig-row { grid-template-columns: 1fr; }
}

.sig-select {
    width: 100%;
    padding: .65rem .9rem;
    font-size: .95rem;
    border: 2px solid #d0d8e0;
    border-radius: 10px;
    background: #ffffff;
    color: #0f1923;
    transition: border-color .15s;
}

.sig-select:focus {
    outline: none;
    border-color: #005fa3;
    box-shadow: 0 0 0 3px rgba(0,95,163,.15);
}

/* Buttons */
.sig-btn-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.sig-btn {
    padding: .75rem 1.5rem;
    font-size: .95rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.sig-btn:active { transform: scale(.97); }

.sig-btn-primary             { background: #e0f0fb; color: #0c4e7a; box-shadow: 0 1px 4px rgba(15,25,35,.08); }
.sig-btn-primary:hover       { background: #b8d9f0; }

.sig-btn-dl                  { background: #2d3f52; color: #ffffff; }
.sig-btn-dl:hover            { background: #1e2d3d; }
.sig-btn-dl:disabled         { background: #8fa0b0; cursor: not-allowed; }

.sig-btn-clear               { background: #f4f6f8; color: #4a5c6e; border: 1px solid #d0d8e0; }
.sig-btn-clear:hover         { background: #e8ecf0; }

/* Preview */
.sig-preview-wrap {
    background: #ffffff;
    border: 1px solid #d0d8e0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 4px rgba(15,25,35,.08);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Checkerboard behind canvas to show transparency */
.sig-preview-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background-image:
        linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
        linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}

.sig-canvas {
    max-width: 100%;
    border-radius: 6px;
    display: none;
    position: relative;
    z-index: 1;
}

.sig-placeholder {
    color: #2d3f52;
    font-size: 1rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Disclaimer */
.sig-disclaimer {
    margin-top: 1.5rem;
    padding: .9rem 1.1rem;
    background: #e0f0fb;
    border: 1px solid #90cff0;
    border-radius: 10px;
    font-size: .8rem;
    color: #0c4e7a;
    line-height: 1.5;
}

.sig-disclaimer p { color: #0c4e7a; margin: 4px 0; }

/* Slant toggle */
.sig-toggle-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.sig-toggle-label {
    font-size: .9rem;
    font-weight: 600;
    color: #0f1923;
}

.sig-toggle {
    display: flex;
    border: 2px solid #d0d8e0;
    border-radius: 8px;
    overflow: hidden;
}

.sig-toggle input[type="radio"] { display: none; }

.sig-toggle label {
    padding: .4rem .85rem;
    font-size: .85rem;
    font-weight: 600;
    color: #4a5c6e;
    cursor: pointer;
    background: #ffffff;
    transition: background .15s, color .15s;
    border-right: 1px solid #d0d8e0;
    user-select: none;
}

.sig-toggle label:last-child { border-right: none; }

.sig-toggle input[type="radio"]:checked + label {
    background: #005fa3;
    color: #ffffff;
}

/* Underline toggle */
.sig-underline-btn {
    padding: .4rem .85rem;
    font-size: .85rem;
    font-weight: 700;
    border: 2px solid #d0d8e0;
    border-radius: 8px;
    background: #ffffff;
    color: #4a5c6e;
    cursor: pointer;
    text-decoration: underline;
    transition: background .15s, border-color .15s;
}

.sig-underline-btn.active { background: #005fa3; color: #ffffff; border-color: #005fa3; }