/* Smiešny Certifikát — frontend štýly pre polia a live náhľad */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Inter:wght@400;700&display=swap');

.smc-product-fields {
    margin: 1.5em 0;
    padding: 20px 24px;
    background: #fffdf5;
    border: 1.5px solid #E8D5A3;
    border-radius: 8px;
}

.smc-product-fields .form-row {
    margin-bottom: 1em;
}

.smc-product-fields label {
    display: block;
    font-weight: 700;
    color: #1A2040;
    margin-bottom: 6px;
}

.smc-product-fields input[type="text"],
.smc-product-fields textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.smc-product-fields input[type="text"]:focus,
.smc-product-fields textarea:focus {
    border-color: #C9A84C;
    outline: none;
    box-shadow: 0 0 0 3px rgba(201,168,76,.15);
}

.smc-product-fields small {
    color: #888;
    font-size: 0.82em;
}

/* ——— Náhľad certifikátu ——— */

.smc-preview-wrapper {
    margin-top: 1.8em;
}

.smc-preview-wrapper h4 {
    margin: 0 0 0.7em;
    font-size: 0.85em;
    color: #1A2040;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    border-top: 1px solid #E8D5A3;
    padding-top: 0.9em;
}

/* Obal karty — pomer 1181:1476 (20×25 cm pri 150 DPI) */
.smc-preview-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1181 / 1476;
    margin: 0 auto;
    background-color: #fffbf0;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    overflow: hidden;
}

/*
 * Pozície sú vypočítané z v9 CSS (1181×1476 px canvas):
 *
 * Recipient name:  CSS top 750px  / 1476 = 50.8%
 * Certifier name:  CSS top 1068px / 1476 = 72.4%
 * Custom title:    CSS top 558px  / 1476 = 37.8% (t-subtitle pozícia)
 * Custom body:     CSS top 840px  / 1476 = 56.9% (t-body pozícia)
 */

/* Meno príjemcu — bottom-anchored: spodná hrana overlayu = zlatá čiara (832/1476 = 56.37%)
   Tým overlay neprekrýva zlatú čiaru ani body text pod ňou. */
.smc-preview-recipient {
    position: absolute;
    bottom: 43.63%;
    left: 50%;
    transform: translateX(-50%);
    /* min-width prekryje celé PNG "Meno Priezvisko", max-width chráni gold border */
    min-width: 55%;
    max-width: 75%;
    white-space: nowrap;
    text-align: center;
    font-size: 7.45cqw;
    font-weight: 400;
    color: #2C2C2C;
    font-family: 'Great Vibes', 'Brush Script MT', cursive;
    line-height: 1;
    pointer-events: none;
    /* Biele pozadie prekryje PNG placeholder "Meno Priezvisko" keď zákazník napíše svoj text */
    background: white;
    padding: 0 1.5cqw;
    /* Skrytý kým zákazník nezadá meno — JS pridá .is-visible */
    display: none;
}
.smc-preview-recipient.is-visible { display: inline-block; }

/* Meno certifikátora — pozícia presne ako v PNG: top 1068/1476 = 72.36%, font 26/1181 = 2.20cqw, Inter Bold */
.smc-preview-certifier {
    position: absolute;
    top: 72.36%;
    left: 50%;
    transform: translateX(-50%);
    /* min-width prekryje celé PNG "MENO CERTIFIKÁTORA" (cca 30% šírky) */
    min-width: 38%;
    max-width: 75%;
    white-space: nowrap;
    text-align: center;
    font-size: 2.20cqw;
    font-weight: 700;
    color: #2C2C2C;
    font-family: 'Inter', Arial, sans-serif;
    letter-spacing: 0.085cqw;
    line-height: 1;
    pointer-events: none;
    /* Biele pozadie prekryje PNG placeholder "MENO CERTIFIKÁTORA" keď zákazník napíše */
    background: white;
    padding: 0 1.5cqw;
    display: none;
}
.smc-preview-certifier.is-visible { display: inline-block; }

/* Nadpis certifikátu — len custom type (prekryje t-subtitle "VLASTNÉHO CERTIFIKÁTU")
   min-width 55% → pokryje text (23.5%–75.6%), max-width 74% → bezpečná zóna pred ornamentmi (87.9%) */
.smc-preview-title {
    position: absolute;
    top: 37.8%;          /* 558px / 1476px — t-subtitle pozícia v šablóne */
    left: 50%;
    transform: translateX(-50%);
    min-width: 55%;
    max-width: 74%;
    text-align: center;
    font-size: clamp(7px, 3.05cqw, 22px);  /* 36px / 1181px = 3.05cqw */
    font-weight: 400;
    color: #6B1929;      /* t-subtitle farba */
    font-family: 'Inter', Arial, sans-serif;
    letter-spacing: 0.68cqw;   /* 8px / 1181px */
    text-transform: uppercase;
    line-height: 1.2;
    word-break: break-word;
    pointer-events: none;
    background: white;
    padding: 0.2cqw 1cqw;
}

/* Vlastný text — len custom type (prekryje t-body placeholder text)
   min-width 45% → pokryje body text (28.6%–71.3%), max-width 66% → bezpečná zóna pred ornamentmi */
.smc-preview-body {
    position: absolute;
    top: 56.9%;          /* 840px / 1476px — t-body pozícia v šablóne */
    left: 50%;
    transform: translateX(-50%);
    min-width: 45%;
    max-width: 66%;
    min-height: 5%;      /* 72px / 1476px = 4.9% — pokryje obe riadky PNG placeholdera (y=840–912) */
    text-align: center;
    font-size: clamp(7px, 2.03cqw, 16px);  /* 24px / 1181px = 2.03cqw */
    font-style: normal;
    color: #333333;      /* t-body farba */
    font-family: 'Inter', Arial, sans-serif;
    line-height: 1.65;
    word-break: break-word;
    pointer-events: none;
    background: white;
    padding: 0.3cqw 1.5cqw;
}

/* Fallback farba kým sa šablóna nenačíta */
.smc-preview-card:not([style*="background-image"]) {
    background: linear-gradient(135deg, #fffaf0 0%, #f5e6b8 100%);
}

/* Zapni container queries pre font-size: Xcqw */
.smc-preview-wrapper { container-type: inline-size; }