/* ==========================================================================
   Kakle – gavekortskjemaet

   Feltene kommer fra PW Gift Cards og sto med nettleserens egne rammer:
   tynne, firkantede og helt ulike resten av nettstedet. Her far de samme
   form som feltene paa Min konto og i kassen.
   ========================================================================== */

#pwgc-purchase-container { display: grid; gap: var(--r5); }

.pwgc-field-container { display: grid; gap: var(--r2); }

/* Beloepsfeltet er selve kjernen i gavekortet - her skrives beloepet inn.
   Det skal derfor ikke skjules, men staa tydelig. */
#pwgc-custom-amount-form { display: grid; gap: var(--r2); }

.pwgc-label,
#pwgc-purchase-container label {
    display: block;
    margin: 0;
    font-family: var(--ui);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--navy);
}

#pwgc-purchase-container input[type="text"],
#pwgc-purchase-container input[type="email"],
#pwgc-purchase-container input[type="date"],
#pwgc-purchase-container select,
#pwgc-purchase-container textarea,
.pwgc-input-text {
    width: 100%;
    height: 52px;
    padding: 0 var(--r4);
    box-sizing: border-box;
    border: 1.5px solid var(--kant-sterk);
    border-radius: var(--radius-m);
    background: var(--hvit);
    font-family: var(--ui);
    font-size: 1rem;
    color: var(--tekst);
    transition: border-color var(--fart), box-shadow var(--fart);
}
#pwgc-purchase-container textarea {
    height: auto;
    min-height: 120px;
    padding: var(--r3) var(--r4);
    line-height: 1.55;
    resize: vertical;
}
#pwgc-purchase-container input::placeholder,
#pwgc-purchase-container textarea::placeholder { color: #9A9AAC; }
#pwgc-purchase-container input:hover,
#pwgc-purchase-container textarea:hover,
#pwgc-purchase-container select:hover { border-color: var(--navy-myk); }
#pwgc-purchase-container input:focus,
#pwgc-purchase-container textarea:focus,
#pwgc-purchase-container select:focus {
    outline: 0;
    border-color: var(--gronn);
    box-shadow: 0 0 0 4px rgba(151, 174, 50, .16);
}

/* Smaateksten under feltene. */
.pwgc-subtitle {
    margin: 0;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--tekst-svak);
}
#pwgc-custom-amount-error { color: var(--rod) !important; font-size: .84rem; }

/* ---- Variantvelgeren over skjemaet ---- */
.woocommerce .variations,
.woocommerce table.variations {
    display: grid;
    gap: var(--r2);
    margin: 0 0 var(--r4);
    border: 0;
}
.woocommerce .variations tbody,
.woocommerce .variations tr,
.woocommerce .variations th,
.woocommerce .variations td {
    display: block;
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    text-align: left;
}
.woocommerce .variations label {
    font-family: var(--ui);
    font-size: .9rem;
    font-weight: 500;
    color: var(--navy);
    text-transform: none;
}
.woocommerce .variations select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 52px;
    padding: 0 46px 0 var(--r4);
    box-sizing: border-box;
    border: 1.5px solid var(--kant-sterk);
    border-radius: var(--radius-m);
    background-color: var(--hvit);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141434' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--r4) center;
    background-size: 15px 15px;
    font-family: var(--ui);
    font-size: 1rem;
    color: var(--tekst);
    cursor: pointer;
}
.woocommerce .variations select:focus {
    outline: 0;
    border-color: var(--gronn);
    box-shadow: 0 0 0 4px rgba(151, 174, 50, .16);
}
.woocommerce .reset_variations {
    display: inline-block;
    margin-top: var(--r2);
    font-size: .86rem;
    color: var(--gronn-dyp);
    text-decoration: underline;
    text-underline-offset: 3px;
}