/**
 * DiplomaPrints ThemeHigh Styler - frontend v0.3.5
 * CSS-only on the frontend. No JavaScript dependency.
 */

body.dp-thwepo-styler .extra-options,
body.dp-thwepo-styler .thwepo-extra-options {
    font-family: var(--dp-thwepo-font) !important;
}

/* Every ThemeHigh field gets consistent vertical rhythm. */
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field {
    box-sizing: border-box !important;
    margin: 0 0 var(--dp-thwepo-field-gap) !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Force older left/right ThemeHigh layouts into a modern stacked layout. */
body.dp-thwepo-force-above :is(.extra-options, .thwepo-extra-options) .thwepo-field {
    display: block !important;
    width: 100% !important;
}

/* Respect ThemeHigh's own conditional-display engine. ThemeHigh hides fields
   by setting an inline display:none on the field wrapper. This rule must
   outrank our stacked-layout display:block rule so native Display Rules work. */
body.dp-thwepo-force-above :is(.extra-options, .thwepo-extra-options) .thwepo-field[style*="display: none"],
body.dp-thwepo-force-above :is(.extra-options, .thwepo-extra-options) .thwepo-field[style*="display:none"] {
    display: none !important;
}

body.dp-thwepo-force-above :is(.extra-options, .thwepo-extra-options) .thwepo-field > :is(.label, .value) {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
}

/* Main field label. */
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field > .label > :is(label, .label-tag) {
    display: block !important;
    margin: 0 0 var(--dp-thwepo-title-desc-gap) !important;
    padding: 0 !important;
    font-family: var(--dp-thwepo-font) !important;
    font-size: var(--dp-thwepo-title-size) !important;
    font-weight: var(--dp-thwepo-title-weight) !important;
    line-height: 1.3 !important;
    color: var(--dp-thwepo-title-color) !important;
}

/* ThemeHigh inserts a BR between label and help text in older markup. */
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field > .label > br {
    display: none !important;
}

/* Description / help text. Overrides ThemeHigh inline font-size/color. */
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field .sublabel-tag,
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field .sublabel-tag * {
    display: block !important;
    margin: 0 0 var(--dp-thwepo-desc-input-gap) !important;
    padding: 0 !important;
    font-family: var(--dp-thwepo-font) !important;
    font-size: var(--dp-thwepo-desc-size) !important;
    font-weight: var(--dp-thwepo-desc-weight) !important;
    line-height: 1.45 !important;
    color: var(--dp-thwepo-desc-color) !important;
}

/* If there is no description, use description-to-input spacing below the title. */
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field > .label:not(:has(.sublabel-tag)) > :is(label, .label-tag) {
    margin-bottom: var(--dp-thwepo-desc-input-gap) !important;
}

/* Text-like controls. */
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="url"],
    input[type="password"],
    select,
    textarea
) {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--dp-thwepo-input-height) !important;
    margin: 0 !important;
    padding: 10px var(--dp-thwepo-input-padding-x) !important;
    font-family: var(--dp-thwepo-font) !important;
    font-size: var(--dp-thwepo-input-size) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--dp-thwepo-input-text) !important;
    background-color: var(--dp-thwepo-input-bg) !important;
    border: 1px solid var(--dp-thwepo-border-color) !important;
    border-radius: var(--dp-thwepo-input-radius) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
}

body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field textarea {
    min-height: var(--dp-thwepo-textarea-height) !important;
    resize: vertical;
}

body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field :is(input, textarea)::placeholder {
    color: var(--dp-thwepo-placeholder) !important;
    opacity: 1 !important;
}

/* Hover is intentionally subtle. */
@media (hover:hover) {
    body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field :is(
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        input[type="date"],
        input[type="url"],
        input[type="password"],
        select,
        textarea
    ):not(:disabled):hover {
        border-color: var(--dp-thwepo-hover-border) !important;
    }
}

body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="url"],
    input[type="password"],
    select,
    textarea
):focus {
    border-color: var(--dp-thwepo-focus) !important;
    box-shadow: 0 0 0 var(--dp-thwepo-focus-ring-size) var(--dp-thwepo-focus-ring-color) !important;
}

/* Disabled/read-only controls. */
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field :is(input, select, textarea):disabled,
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field :is(input, textarea)[readonly] {
    color: var(--dp-thwepo-disabled-text) !important;
    background-color: var(--dp-thwepo-disabled-bg) !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* Dropdowns. */
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field select {
    background-color: var(--dp-thwepo-select-bg) !important;
}

body.dp-thwepo-custom-select :is(.extra-options, .thwepo-extra-options) .thwepo-field.thwepo_select > .value {
    position: relative !important;
}

/* Some themes/older ThemeHigh CSS add their own arrow with a pseudo-element.
   Remove that arrow before drawing ours so only one chevron is visible. */
body.dp-thwepo-custom-select :is(.extra-options, .thwepo-extra-options) .thwepo-field.thwepo_select > .value::before {
    content: none !important;
    display: none !important;
}

body.dp-thwepo-custom-select :is(.extra-options, .thwepo-extra-options) .thwepo-field.thwepo_select > .value > select,
body.dp-thwepo-custom-select :is(.extra-options, .thwepo-extra-options) .thwepo-field.thwepo_select select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    padding-right: calc(var(--dp-thwepo-select-arrow-right) + var(--dp-thwepo-select-arrow-size) + 15px) !important;
}

body.dp-thwepo-custom-select :is(.extra-options, .thwepo-extra-options) .thwepo-field.thwepo_select select::-ms-expand {
    display: none !important;
}

body.dp-thwepo-custom-select :is(.extra-options, .thwepo-extra-options) .thwepo-field.thwepo_select > .value::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    right: var(--dp-thwepo-select-arrow-right);
    width: var(--dp-thwepo-select-arrow-size);
    height: var(--dp-thwepo-select-arrow-size);
    border-right: 2px solid var(--dp-thwepo-select-arrow);
    border-bottom: 2px solid var(--dp-thwepo-select-arrow);
    transform: translateY(-70%) rotate(45deg);
    transform-origin: center;
    pointer-events: none;
}

/* Native checkbox/radio controls with consistent size, accent and text rhythm. */
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field input[type="radio"],
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field input[type="checkbox"] {
    box-sizing: border-box !important;
    width: var(--dp-thwepo-choice-size) !important;
    height: var(--dp-thwepo-choice-size) !important;
    min-width: var(--dp-thwepo-choice-size) !important;
    margin: 0 var(--dp-thwepo-choice-gap) 0 0 !important;
    padding: 0 !important;
    accent-color: var(--dp-thwepo-choice-accent) !important;
    vertical-align: -3px !important;
    cursor: pointer;
}

/* Handle common ThemeHigh choice label structures without changing its logic. */
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field .value:has(input[type="checkbox"]),
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field .value:has(input[type="radio"]) {
    font-family: var(--dp-thwepo-font) !important;
    font-size: var(--dp-thwepo-choice-label-size) !important;
    font-weight: var(--dp-thwepo-choice-label-weight) !important;
    line-height: 1.45 !important;
    color: var(--dp-thwepo-input-text) !important;
}

body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field .value:has(input[type="checkbox"]) label,
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field .value:has(input[type="radio"]) label {
    font: inherit !important;
    color: inherit !important;
    cursor: pointer;
}

/* File inputs: keep browser functionality but match the form shell. */
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field input[type="file"] {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 10px var(--dp-thwepo-input-padding-x) !important;
    font-family: var(--dp-thwepo-font) !important;
    font-size: var(--dp-thwepo-desc-size) !important;
    color: var(--dp-thwepo-input-text) !important;
    background: var(--dp-thwepo-input-bg) !important;
    border: 1px solid var(--dp-thwepo-border-color) !important;
    border-radius: var(--dp-thwepo-input-radius) !important;
}

/* Don't let old ThemeHigh table/column helpers reintroduce narrow inputs. */
body.dp-thwepo-force-above :is(.extra-options, .thwepo-extra-options) .thwepo-field .value > * {
    max-width: 100%;
}

@media (max-width: 767px) {
    body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field {
        margin-bottom: max(20px, var(--dp-thwepo-field-gap)) !important;
    }
}

/* ---------------------------------------------------------
   Delivery Format configurator - v0.3
   --------------------------------------------------------- */
body.dp-thwepo-styler .dp-delivery-format {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 28px;
    padding: 0;
    font-family: var(--dp-thwepo-font);
}

body.dp-thwepo-styler .dp-delivery-heading {
    margin: 0 0 4px;
    font-size: var(--dp-thwepo-title-size);
    font-weight: var(--dp-thwepo-title-weight);
    line-height: 1.3;
    color: var(--dp-thwepo-title-color);
}

body.dp-thwepo-styler .dp-delivery-help {
    margin: 0 0 12px;
    font-size: var(--dp-thwepo-desc-size);
    font-weight: var(--dp-thwepo-desc-weight);
    line-height: 1.45;
    color: var(--dp-thwepo-desc-color);
}

body.dp-thwepo-styler .dp-delivery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.dp-thwepo-styler .dp-delivery-card {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

body.dp-thwepo-styler .dp-delivery-card > input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none;
}

body.dp-thwepo-styler .dp-delivery-card-inner {
    box-sizing: border-box;
    display: flex;
    min-height: 88px;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 14px 15px;
    background: #fff;
    border: 1px solid var(--dp-thwepo-border-color);
    border-radius: var(--dp-thwepo-input-radius);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, transform .16s ease;
}

body.dp-thwepo-styler .dp-delivery-card-title {
    display: block;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.25;
    color: var(--dp-thwepo-title-color);
}

body.dp-thwepo-styler .dp-delivery-card-help {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--dp-thwepo-desc-color);
}

@media (hover:hover) {
    body.dp-thwepo-styler .dp-delivery-card:hover .dp-delivery-card-inner {
        border-color: var(--dp-thwepo-hover-border);
        transform: translateY(-1px);
    }
}

body.dp-thwepo-styler .dp-delivery-card > input:checked + .dp-delivery-card-inner {
    border-color: var(--dp-thwepo-focus);
    background: rgba(70, 130, 180, .055);
    box-shadow: 0 0 0 2px var(--dp-thwepo-focus-ring-color);
}

body.dp-thwepo-styler .dp-delivery-card > input:focus-visible + .dp-delivery-card-inner {
    border-color: var(--dp-thwepo-focus);
    box-shadow: 0 0 0 var(--dp-thwepo-focus-ring-size) var(--dp-thwepo-focus-ring-color);
}

/* Delivery visibility must outrank the global "force titles above" rule,
   which also sets ThemeHigh fields to display:block !important. */
body.dp-thwepo-styler :is(.extra-options, .thwepo-extra-options) .thwepo-field.dp-delivery-hidden,
body.dp-thwepo-styler.dp-thwepo-force-above :is(.extra-options, .thwepo-extra-options) .thwepo-field.dp-delivery-hidden {
    display: none !important;
}

body.dp-thwepo-styler .dp-delivery-format.dp-delivery-error .dp-delivery-card-inner {
    border-color: #dc2626;
}

@media (max-width: 767px) {
    body.dp-thwepo-styler .dp-delivery-grid {
        grid-template-columns: 1fr;
    }
    body.dp-thwepo-styler .dp-delivery-card-inner {
        min-height: 72px;
    }
}