/* ═══════════════════════════════════════════════════════════════════════════
   JOUYOUS STORE — Custom Form Controls
   Replaces all browser-default form UI with consistent branded design.
   Included in both _Layout.cshtml and _AdminLayout.cshtml
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --f-pink:       #e91e8c;
    --f-pink-light: #fdf0f7;
    --f-pink-dark:  #c2185b;
    --f-border:     #e8e0e8;
    --f-border-focus: #e91e8c;
    --f-text:       #1a1a2e;
    --f-muted:      #9e9e9e;
    --f-radius:     10px;
    --f-shadow:     0 0 0 3px rgba(233,30,140,.12);
}

/* ── Base text inputs ────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    border: 1.5px solid var(--f-border);
    border-radius: var(--f-radius);
    padding: 10px 14px;
    font-size: .875rem;
    font-family: inherit;
    color: var(--f-text);
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    line-height: 1.5;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus {
    border-color: var(--f-border-focus);
    box-shadow: var(--f-shadow);
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder { color: #bbb; }

input[type="text"][readonly],
input[type="email"][readonly],
input[type="tel"][readonly] {
    background: #f9f9f9;
    color: var(--f-muted);
    cursor: default;
}

textarea { resize: vertical; min-height: 100px; }

/* ── Number input ────────────────────────────────────────────────────────── */
input[type="number"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    border: 1.5px solid var(--f-border);
    border-radius: var(--f-radius);
    padding: 10px 14px;
    font-size: .875rem;
    font-family: inherit;
    color: var(--f-text);
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
input[type="number"]:focus { border-color: var(--f-border-focus); box-shadow: var(--f-shadow); }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Select ──────────────────────────────────────────────────────────────── */
select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    border: 1.5px solid var(--f-border);
    border-radius: var(--f-radius);
    padding: 10px 38px 10px 14px;
    font-size: .875rem;
    font-family: inherit;
    color: var(--f-text);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e91e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    outline: none;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    line-height: 1.5;
}
select:focus { border-color: var(--f-border-focus); box-shadow: var(--f-shadow); }
select:invalid, select option[value=""] { color: #bbb; }
select option { color: var(--f-text); }

/* ── Checkbox ────────────────────────────────────────────────────────────── */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--f-border);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: border-color .2s, background .2s;
    vertical-align: middle;
    flex-shrink: 0;
}
input[type="checkbox"]:hover { border-color: var(--f-pink); }
input[type="checkbox"]:checked {
    background: var(--f-pink);
    border-color: var(--f-pink);
}
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 6px; height: 10px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible { box-shadow: var(--f-shadow); }

/* Large checkboxes (gift items, wishlist) */
input[type="checkbox"].chk-lg {
    width: 22px; height: 22px; min-width: 22px;
    border-radius: 7px;
}
input[type="checkbox"].chk-lg:checked::after {
    left: 5px; top: 1px; width: 8px; height: 12px;
}

/* ── Radio ───────────────────────────────────────────────────────────────── */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px; min-width: 18px;
    border: 2px solid var(--f-border);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: border-color .2s, background .2s;
    vertical-align: middle;
    flex-shrink: 0;
}
input[type="radio"]:hover { border-color: var(--f-pink); }
input[type="radio"]:checked { border-color: var(--f-pink); background: #fff; }
input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--f-pink);
}
input[type="radio"]:focus-visible { box-shadow: var(--f-shadow); }

/* ── Range slider ────────────────────────────────────────────────────────── */
input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: var(--f-border);
    outline: none;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--f-pink);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(233,30,140,.3);
    cursor: pointer;
    transition: transform .15s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--f-pink);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(233,30,140,.3);
    cursor: pointer;
}

/* ── Color input ─────────────────────────────────────────────────────────── */
input[type="color"] {
    appearance: none;
    -webkit-appearance: none;
    width: 44px; height: 44px;
    border: 2px solid var(--f-border);
    border-radius: 10px;
    padding: 2px;
    cursor: pointer;
    background: none;
    transition: border-color .2s, transform .15s;
}
input[type="color"]:hover { border-color: var(--f-pink); transform: scale(1.05); }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 7px; overflow: hidden; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 7px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 7px; }

/* ── File input ──────────────────────────────────────────────────────────── */
input[type="file"] { display: none !important; }

.file-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px dashed var(--f-border);
    border-radius: var(--f-radius);
    padding: 12px 16px;
    cursor: pointer;
    background: var(--f-pink-light);
    transition: border-color .2s, background .2s;
}
.file-input-wrap:hover { border-color: var(--f-pink); background: #fce4f4; }
.file-input-wrap.has-file { border-style: solid; border-color: var(--f-pink); }
.file-input-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--f-pink); color: #fff;
    border: none; border-radius: 7px;
    padding: 7px 14px; font-size: .8rem; font-weight: 700;
    cursor: pointer; white-space: nowrap; font-family: inherit;
    transition: background .2s;
}
.file-input-btn:hover { background: var(--f-pink-dark); }
.file-input-name {
    font-size: .8rem; color: var(--f-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1;
}
.file-input-name.chosen { color: var(--f-text); font-weight: 600; }

/* ── Toggle switch (for flags/booleans) ──────────────────────────────────── */
.toggle-switch {
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; user-select: none;
}
.toggle-switch input[type="checkbox"] {
    display: none;
}
.toggle-track {
    width: 44px; height: 24px;
    border-radius: 12px;
    background: var(--f-border);
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}
.toggle-track::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    top: 3px; left: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s, box-shadow .2s;
}
.toggle-switch input[type="checkbox"]:checked + .toggle-track {
    background: var(--f-pink);
}
.toggle-switch input[type="checkbox"]:checked + .toggle-track::after {
    transform: translateX(20px);
    box-shadow: 0 1px 6px rgba(233,30,140,.35);
}
.toggle-label { font-size: .875rem; font-weight: 600; color: var(--f-text); }

/* ── Form group / label ──────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label, .adm-label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--f-text);
    letter-spacing: .02em;
}

/* Override .form-control and .adm-input to use our system */
.form-control, .adm-input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    border: 1.5px solid var(--f-border);
    border-radius: var(--f-radius);
    padding: 10px 14px;
    font-size: .875rem;
    font-family: inherit;
    color: var(--f-text);
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .adm-input:focus {
    border-color: var(--f-border-focus);
    box-shadow: var(--f-shadow);
}
select.form-control, select.adm-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e91e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px;
    cursor: pointer;
}

/* ── Admin toggle grid (product flags) ───────────────────────────────────── */
.toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.toggle-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--f-border);
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
    transition: border-color .2s, background .2s;
    font-size: .85rem; font-weight: 600;
    user-select: none;
}
.toggle-item:hover { border-color: var(--f-pink); background: var(--f-pink-light); }
.toggle-item:has(input:checked) { border-color: var(--f-pink); background: var(--f-pink-light); color: var(--f-pink-dark); }

/* ── Delivery option cards (radio-based) ─────────────────────────────────── */
.delivery-option {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--f-border);
    border-radius: 14px;
    cursor: pointer;
    background: #fff;
    transition: border-color .2s, background .2s;
}
.delivery-option:has(input:checked) {
    border-color: var(--f-pink);
    background: var(--f-pink-light);
}