/* Verktyg */
.position-absolute { position: absolute; }
.position-relative { position: relative; }

.top-0 { top: 0; }
.left-0 { left: 0; }

.text-center { text-align: center; }
.text-light-grey { color: #999; }
.text-dark-grey { color: #333; }

.fw-bold { font-weight: bold; }
.fw-400 { font-weight: 400; }

.visibility-hidden { visibility: hidden; }

.d-none { display: none; }
.d-block { display: block; }

.label {
  font-weight: bold;
  font-size: 1rem;
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #333; /* matchar övriga labels */
}

.fs-small { font-size: 13px; }

.border { border: 1px solid #ccc; }
.rounded { border-radius: 8px; }

.py-1 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-1 { padding-left: 0.5rem; padding-right: 0.5rem; }

.file-input-hidden {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.cursor-pointer { cursor: pointer; }

.hover-light:hover {
    background: #f0f0f0;
    border-color: #bbb;
}


/* Wrapper formulär*/
form.event-creator-form {
    /* Ta bort ALL layout */
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* Rubrik */
form.event-creator-form h1 {
    margin-top: 0; /* tar bort onödig luft ovanför */
    margin-bottom: 20px;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    color: #222;
}

/* Fälttgrupper */
.event-field {
    margin-bottom: 20px;
}

/* Etiketter */
.event-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}

/* Checkbox- och radioalternativ ska INTE vara feta */
.event-field label:has(input[type="checkbox"]),
.event-field label:has(input[type="radio"]) {
    font-weight: normal;
	color:#999;
}


/* Inputs */
.event-field input[type="text"],
.event-field input[type="email"],
.event-field input[type="number"],
.event-field select,
.event-field textarea {
    width: 100%;
    padding: 18px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
}

.event-field input:focus,
.event-field select:focus,
.event-field textarea:focus {
    border-color: #0073aa;
    background: #fff;
    outline: none;
}

/* Checkboxar */
.event-field input[type="checkbox"] {
    margin-right: 6px;
}

/* Checkbox-raderna ska ligga som egna block */ 
.event-creator-form .event-field.checkbox-field { display: block; margin-bottom: 12px; } 
.event-creator-form .event-field.checkbox-field label { display: flex; align-items: center; gap: 8px; 
}

/* Textarea */
.event-field textarea {
    min-height: 120px;
    resize: vertical;
}

/* Knapp */
form.event-creator-form button,
form.event-creator-form .button {
    width: 100%;
    padding: 0.9rem 1.2rem;
    border: none;
    border-radius: 0;
    background: #db991e; /* HE-orange */
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s ease;
}

form.event-creator-form button:hover,
form.event-creator-form .button:hover {
    background: #000;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* Mobilanpassning */
@media (max-width: 480px) {
    form.event-creator-form {
        padding: 0px;
    }
}

/* Ingen extra luft mellan alternativen */
.event-creator-form .radio-field {
    margin-bottom: 0;
}

/* Luft ovanför fältet efter radioknapparna */
.event-creator-form .event-field:nth-of-type(3) {
    margin-top: 20px !important;
}


/* === FLIKSYSTEM (Login / Registrera) === */

.he-tabs {
    display: flex;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.he-tab {
    flex: 1;
    padding: 0.8rem;
    text-align: center;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s ease;
}

.he-tab.active {
    background: #ffffff;
    border-bottom: 3px solid #db991e;
}

.he-tab-content {
    display: none;
}

.he-tab-content.active {
    display: block;
}

/* ====================================================
   PORTAL: Grundlayout (ingen egen padding/margin)
   ==================================================== */

.he-register-wrapper,
.he-register-card,
.he-tab-content,
.he-register-card form,
.he-switch-link {
    padding: 0 !important;
    margin: 0 !important;
}

.he-register-wrapper {
    width: 100%;
}

.he-register-card {
    width: 100%;
    background: #ffffff;
}



/* ====================================================
   Rubrik + ikon
   ==================================================== */

.he-form-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.7rem;
    font-weight: 600;
}

.he-form-title .he-icon {
    width: 30px;
    height: auto;
}

.he-form-subtitle {
    color: #555;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}



/* ====================================================
   Formulär + inputs
   ==================================================== */

.he-register-card form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.he-register-card label {
    display: block;
    font-weight: 600;
    margin-bottom: -10px;
    color: #333;
}

.he-register-card input[type="email"],
.he-register-card input[type="password"],
.he-register-card input[type="text"] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    border: 1px solid #d4d7dd;
    background: #f9fafb;
    font-size: 1rem;
    transition: 0.15s ease;
}

.he-register-card input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37,99,235,0.25);
    background: #ffffff;
}



/* ====================================================
   HundEvent-knapp
   ==================================================== */

.he-button,
.he-register-card button {
    width: 100%;
    padding: 0.9rem 1.2rem;
    border: none;
    border-radius: 0;
    background: #db991e;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s ease;
}

.he-button:hover,
.he-register-card button:hover {
    background: #000;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}



/* ====================================================
   Felmeddelanden
   ==================================================== */

.he-register-error,
.reg-error {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.95rem;
}



/* ====================================================
   Visa/dölj login & registrering
   ==================================================== */

.he-tab-content {
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.he-tab-content.active {
    display: block;
    opacity: 1;
}



/* ====================================================
   Länkar under formulären (båda flikar)
   ==================================================== */

.he-switch-link {
    margin-top: 0.75rem !important;
    font-size: 0.95rem;
}

.he-switch-link a {
    color: #db991e;
    font-weight: 600;
    cursor: pointer;
}



/* ====================================================
   Återställ konto – inline-länk i login-steget
   ==================================================== */

.he-label-with-reset {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-weight: 600;
    margin-bottom: -10px;
    color: #333;
}

.he-reset-inline {
    font-size: 0.8rem;
    font-weight: normal;
    color: #777;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

/* -----------------------------------------
   RESET PASSWORD – INLINE CHECKLIST
----------------------------------------- */

.he-password-checklist-inline {
    display: flex;
    gap: 12px;
    font-size: 13px;
    margin: 6px 0 2px 0; /* mindre spacing nedåt */
    opacity: 0.8;
}

.he-password-checklist-inline .he-valid {
    color: #2ecc71;
    font-weight: 600;
}

/* Strength bar kompakt */
.he-strength-bar {
    margin: 2px 0 10px 0; /* drar upp bekräfta-fältet */
}

/* Flytta upp Bekräfta lösenord */
.he-reset-form label[for="he-password-confirm"] {
    margin-top: 6px !important;
}


/* Hjälptext datum och tid i aktivitersformulär */
.he-help {
    display:block;
    margin-top:-4px;
    margin-bottom:6px;
    font-size:13px;
    color:#999;
    font-weight:400;
}

/* Datum- och tidsfält med ikoner */
.event-field input[type="date"],
.event-field input[type="time"] {
    -webkit-appearance: none;
    appearance: none;

    width: 100%;
    padding: 18px 12px;
    padding-left: 40px; /* plats för ikon */

    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;

    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 20px;

    transition: border-color 0.2s, background 0.2s;
}

.event-field input[type="date"] {
    background-image: url('includes/icons/calendar.svg');
}

.event-field input[type="time"] {
    background-image: url('includes/icons/clock.svg');
}

/* Enhetlig placeholder-stil för alla fält */
.event-field input::placeholder,
.event-field textarea::placeholder {
    font-family: inherit !important;
    font-weight: 400 !important;
    color: #999;
    font-size: 14px;
    opacity: 1;
}

/* Tvinga textarea att använda samma font som inputs */
.event-field textarea {
    font-family: inherit !important;
    font-weight: 400 !important;
}

/* Tvinga select att använda samma font som inputs */
.event-field select {
    font-family: inherit !important;
    font-weight: 400 !important;
    color: #999;
	font-size: 14px;
}

.event-field input:focus::placeholder,
.event-field textarea:focus::placeholder,
.event-field select:focus::placeholder {
    color: transparent;
}

/* Ingen fil vald-texten vid uppladdning av bild */
.text-small { font-size: 0.85rem; }
.text-muted { color: #777; }

/* Hjälptext under formulär-inputruta */
.he-subtitle {
    font-size: 0.85rem;
    font-weight: 400;
    color: #444;
    margin-top: 12px;
    margin-bottom: 6px;
    margin-left: 6px;
}

/* ====================================================
   ORTMOTOR – DROPDOWN + CLEAR BUTTON
   ==================================================== */

/* Wrapper runt ort-inputen */
.he-ort-wrapper {
    position: relative;
    width: 100%;
}

/* Själva inputfältet får plats för krysset */
#he_ort {
    padding-right: 36px !important;
    box-sizing: border-box;
}

/* Rensa-knappen (×) */
.he-ort-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #999;
    cursor: pointer;
    user-select: none;
    display: none; /* visas av JS */
    z-index: 20;
}

.he-ort-clear:hover {
    color: #555;
}

/* Dropdown-container */
.he-ort-dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 9999;
    max-height: 220px;
    overflow-y: auto;
    display: none; /* visas av JS */
    font-size: 15px;
}

/* Dropdown items */
.he-ort-dropdown div {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.he-ort-dropdown div:last-child {
    border-bottom: none;
}

.he-ort-dropdown div:hover {
    background: #f5f5f5;
}

/* ============================================
   TAGGMOTOR – PREMIUM VERSION (matchar ortmotorn)
   ============================================ */

/* Isolera taggmotorn från .event-field-regler */
#taggar-section .tag-suggestion-box,
#taggar-section .tag-suggestion-item,
#taggar-section .recommended-tag,
#taggar-section .tag-chip,
#taggar-section .tag-chip-remove {
    all: unset;
    box-sizing: border-box;
}

/* ===========================
   AUTOSUGGEST (som ortmotorn)
   =========================== */

#taggar-section .tag-suggestion-box {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    width: 100%;

    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);

    max-height: 220px;
    overflow-y: auto;

    display: none;
    font-size: 15px;

    z-index: 999999; /* Viktigt: över rekommenderade taggar */
}

#taggar-section .tag-suggestion-item {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;

    cursor: pointer;
    color: #222;
    background: #fff;

    display: block;
}

#taggar-section .tag-suggestion-item:last-child {
    border-bottom: none;
}

#taggar-section .tag-suggestion-item:hover {
    background: #f5f5f5;
}

/* ===========================
   REKOMMENDERADE TAGGAR
   =========================== */

#taggar-section .recommended-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 14px;
    margin: 4px;

    min-height: 34px;
    white-space: nowrap;

    background: #fff;
    border: 1px solid #ddd;
    border-radius: 999px;

    font-size: 14px;
    font-weight: 500;
    color: #222;

    cursor: pointer;
}

#taggar-section .recommended-tag:hover {
    background: #f5f5f5;
}

/* ===========================
   CHIPS (valda taggar)
   =========================== */

#taggar-section .tag-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 6px 12px;
    margin: 4px;

    background: #f3f3f3;
    border-radius: 999px;

    font-size: 14px;
    font-weight: 500;
    color: #333;

    line-height: 1;
}

#taggar-section .tag-chip-remove {
    font-size: 14px;
    line-height: 1;
    opacity: 0.6;
    cursor: pointer;
    padding: 0;
}

#taggar-section .tag-chip-remove:hover {
    opacity: 1;
}

#tag-chips {
    margin-bottom: 10px; /* eller 14–16px om du vill ha mer premium-luft */
}

/* valideringserror */
.he-field-error {
    outline: 1px solid #db991e !important;
    background: #fff5f5 !important;
}

/* Altertruta vid fel inmatning i formulär */
.he-inline-alert {
    background: #f7f7f7; /* Svagt grå */
    border: 1px solid #db991e; /* HE-orange */
    color: #999; /* Mörkare orange/brun text för bra kontrast */
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    animation: fadeInAlert 0.2s ease-out;
}

@keyframes fadeInAlert {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}