/**
 * Tacticalia Business Directory
 *
 * Frontend:
 * Rivendica la tua attività.
 *
 * Responsabilità:
 * - layout generale pagina claim;
 * - hero;
 * - ricerca attività;
 * - lista risultati;
 * - attività selezionata;
 * - login;
 * - form claim;
 * - feedback;
 * - responsive.
 */


/*
 * ============================================================
 * ROOT
 * ============================================================
 */

.tbd-claim {
    --tbd-claim-bg: #F6F7F4;
    --tbd-claim-surface: #FFFFFF;

    --tbd-claim-text: #101820;
    --tbd-claim-muted: #6D7480;

    --tbd-claim-border: #E5E9E3;
    --tbd-claim-border-strong: #CFD8CC;

    --tbd-claim-primary: #5B6F40;
    --tbd-claim-primary-hover: #405733;
    --tbd-claim-primary-dark: #2F3D29;

    --tbd-claim-success: #3F7652;
    --tbd-claim-success-soft: #E6F2E6;

    --tbd-claim-warning: #B78632;
    --tbd-claim-warning-soft: #FFF3CD;

    --tbd-claim-danger: #B64D49;
    --tbd-claim-danger-soft: #F7E6E5;

    min-height: 100vh;

    background:
        var(--tbd-claim-bg);

    color:
        var(--tbd-claim-text);

    font-family:
        "Inter",
        sans-serif;
}


.tbd-claim,
.tbd-claim *,
.tbd-claim *::before,
.tbd-claim *::after {
    box-sizing: border-box;
}


/*
 * ============================================================
 * HERO
 * ============================================================
 */

.tbd-claim-hero {
    padding:
        64px 24px 58px;

    background:
        linear-gradient(135deg,
            #1A201B,
            #353D31);

    color:
        #FFFFFF;
}


.tbd-claim-hero__inner {
    max-width:
        1180px;

    margin:
        0 auto;
}


.tbd-claim-eyebrow {
    display:
        block;

    margin-bottom:
        12px;

    color:
        #B9C2AD;

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


.tbd-claim-hero h1 {
    max-width:
        760px;

    margin:
        0;

    color:
        #FFFFFF;

    font-size:
        clamp(36px,
            6vw,
            58px);

    line-height:
        1.04;

    letter-spacing:
        -.04em;
}


.tbd-claim-hero p {
    max-width:
        680px;

    margin:
        16px 0 0;

    color:
        rgba(255,
            255,
            255,
            .74);

    font-size:
        16px;

    line-height:
        1.6;
}


/*
 * ============================================================
 * SHELL
 * ============================================================
 */

.tbd-claim-shell {
    max-width:
        1180px;

    margin:
        0 auto;

    padding:
        36px 24px 64px;
}


/*
 * ============================================================
 * FEEDBACK
 * ============================================================
 */

.tbd-claim-feedback {
    margin-bottom:
        24px;

    padding:
        15px 18px;

    border:
        1px solid var(--tbd-claim-border);

    border-radius:
        10px;

    background:
        var(--tbd-claim-surface);

    font-size:
        14px;

    line-height:
        1.55;
}


.tbd-claim-feedback--success {
    border-color:
        rgba(63,
            118,
            82,
            .22);

    background:
        var(--tbd-claim-success-soft);

    color:
        var(--tbd-claim-success);
}


.tbd-claim-feedback--warning {
    border-color:
        rgba(183,
            134,
            50,
            .25);

    background:
        var(--tbd-claim-warning-soft);

    color:
        #735316;
}


.tbd-claim-feedback--error {
    border-color:
        rgba(182,
            77,
            73,
            .22);

    background:
        var(--tbd-claim-danger-soft);

    color:
        var(--tbd-claim-danger);
}


/*
 * ============================================================
 * SECTION
 * ============================================================
 */

.tbd-claim-section {
    padding:
        28px;

    border:
        1px solid var(--tbd-claim-border);

    border-radius:
        12px;

    background:
        var(--tbd-claim-surface);

    box-shadow:
        0 10px 30px rgba(16,
            24,
            32,
            .035);
}


.tbd-claim-section+.tbd-claim-section {
    margin-top:
        24px;
}


.tbd-claim-section__header {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    margin-bottom:
        24px;
}


.tbd-claim-section__header h2 {
    margin:
        0;

    color:
        var(--tbd-claim-text);

    font-size:
        22px;

    line-height:
        1.2;
}


.tbd-claim-section__header p {
    margin:
        5px 0 0;

    color:
        var(--tbd-claim-muted);

    font-size:
        13px;

    line-height:
        1.5;
}


/*
 * ============================================================
 * STEP
 * ============================================================
 */

.tbd-claim-step {
    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    background:
        var(--tbd-claim-primary);

    color:
        #FFFFFF;

    font-size:
        13px;

    font-weight:
        800;
}


/*
 * ============================================================
 * SEARCH
 * ============================================================
 */

.tbd-claim-search {
    max-width:
        820px;

    display:
        grid;

    grid-template-columns:
        minmax(0,
            1fr) auto;

    gap:
        10px;
}


.tbd-claim-search__field {
    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 15px;

    border:
        1px solid var(--tbd-claim-border-strong);

    border-radius:
        9px;

    background:
        #FFFFFF;
}


.tbd-claim-search__field .dashicons {
    flex:
        0 0 auto;

    color:
        #7A8475;

    font-size:
        19px;
}


.tbd-claim-search input {
    width:
        100%;

    min-width:
        0;

    min-height:
        48px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--tbd-claim-text);

    font:
        inherit;

    font-size:
        14px;
}


.tbd-claim-search input::placeholder {
    color:
        #9CA3AF;
}


.tbd-claim-search input:focus {
    outline:
        none;
}


/*
 * ============================================================
 * BUTTONS
 * ============================================================
 */

.tbd-claim-button {
    min-height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 22px;

    border:
        1px solid var(--tbd-claim-primary);

    border-radius:
        8px;

    background:
        var(--tbd-claim-primary);

    color:
        #FFFFFF !important;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1;

    text-decoration:
        none !important;

    cursor:
        pointer;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.tbd-claim-button:hover,
.tbd-claim-button:focus {
    border-color:
        var(--tbd-claim-primary-hover);

    background:
        var(--tbd-claim-primary-hover);

    color:
        #FFFFFF !important;
}


.tbd-claim-button:active {
    transform:
        translateY(1px);
}


.tbd-claim-button--secondary {
    min-height:
        40px;

    padding:
        0 18px;

    border-color:
        var(--tbd-claim-border-strong);

    background:
        #FFFFFF;

    color:
        var(--tbd-claim-primary-dark) !important;
}


.tbd-claim-button--secondary:hover,
.tbd-claim-button--secondary:focus {
    border-color:
        var(--tbd-claim-primary);

    background:
        #F2F4EF;

    color:
        var(--tbd-claim-primary-dark) !important;
}


/*
 * ============================================================
 * RESULTS
 * ============================================================
 */

.tbd-claim-results {
    margin-top:
        30px;
}


.tbd-claim-results__header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        14px;
}


.tbd-claim-results__header strong {
    color:
        var(--tbd-claim-text);

    font-size:
        15px;
}


.tbd-claim-results__header span {
    color:
        var(--tbd-claim-muted);

    font-size:
        12px;
}


.tbd-claim-results__list {
    display:
        grid;

    gap:
        12px;
}


/*
 * ============================================================
 * RESULT ITEM
 * ============================================================
 */

.tbd-claim-result {
    display:
        grid;

    grid-template-columns:
        minmax(0,
            1fr) auto;

    align-items:
        center;

    gap:
        24px;

    padding:
        18px 20px;

    border:
        1px solid var(--tbd-claim-border);

    border-radius:
        10px;

    background:
        #FFFFFF;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.tbd-claim-result:hover {
    border-color:
        var(--tbd-claim-border-strong);

    box-shadow:
        0 8px 22px rgba(16,
            24,
            32,
            .045);
}


.tbd-claim-result__content {
    min-width:
        0;
}


.tbd-claim-result__top {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;
}


.tbd-claim-result__top h3 {
    margin:
        0;

    color:
        var(--tbd-claim-text);

    font-size:
        17px;

    line-height:
        1.25;
}


.tbd-claim-result__verified {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    padding:
        4px 7px;

    border-radius:
        999px;

    background:
        var(--tbd-claim-success-soft);

    color:
        var(--tbd-claim-success);

    font-size:
        10px;

    font-weight:
        700;
}


.tbd-claim-result__verified .dashicons {
    width:
        auto;

    height:
        auto;

    font-size:
        14px;
}


.tbd-claim-result__location {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        7px;

    color:
        var(--tbd-claim-muted);

    font-size:
        11px;
}


.tbd-claim-result__location .dashicons {
    width:
        auto;

    height:
        auto;

    font-size:
        15px;
}


.tbd-claim-result__description {
    max-width:
        720px;

    margin:
        10px 0 0;

    color:
        #555F56;

    font-size:
        12px;

    line-height:
        1.5;
}


.tbd-claim-result__action {
    flex:
        0 0 auto;
}


/*
 * ============================================================
 * EMPTY STATE
 * ============================================================
 */

.tbd-claim-empty {
    min-height:
        230px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        36px;

    border:
        1px dashed var(--tbd-claim-border-strong);

    border-radius:
        10px;

    background:
        #FBFCFA;

    text-align:
        center;
}


.tbd-claim-empty .dashicons {
    width:
        42px;

    height:
        42px;

    margin-bottom:
        12px;

    color:
        var(--tbd-claim-primary);

    font-size:
        42px;
}


.tbd-claim-empty h3 {
    margin:
        0;

    color:
        var(--tbd-claim-text);

    font-size:
        18px;
}


.tbd-claim-empty p {
    max-width:
        440px;

    margin:
        8px 0 0;

    color:
        var(--tbd-claim-muted);

    font-size:
        13px;

    line-height:
        1.55;
}


/*
 * ============================================================
 * SELECTED BUSINESS
 * ============================================================
 */

.tbd-claim-selected {
    border:
        1px solid var(--tbd-claim-border);

    border-radius:
        10px;

    background:
        #FAFBF9;
}


.tbd-claim-selected__main {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        28px;

    padding:
        22px;
}


.tbd-claim-selected h3 {
    margin:
        0;

    color:
        var(--tbd-claim-text);

    font-size:
        21px;

    line-height:
        1.2;
}


.tbd-claim-selected__location {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        8px;

    color:
        var(--tbd-claim-muted);

    font-size:
        12px;
}


.tbd-claim-selected__location .dashicons {
    width:
        auto;

    height:
        auto;

    font-size:
        16px;
}


.tbd-claim-selected p {
    max-width:
        720px;

    margin:
        12px 0 0;

    color:
        #555F56;

    font-size:
        13px;

    line-height:
        1.55;
}


.tbd-claim-selected__types {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-top:
        14px;
}


.tbd-claim-selected__types span {
    padding:
        5px 8px;

    border-radius:
        999px;

    background:
        #EEF0E9;

    color:
        #535D4D;

    font-size:
        10px;

    font-weight:
        700;
}


.tbd-claim-change {
    flex:
        0 0 auto;

    color:
        var(--tbd-claim-primary) !important;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none !important;
}


.tbd-claim-change:hover,
.tbd-claim-change:focus {
    color:
        var(--tbd-claim-primary-hover) !important;

    text-decoration:
        underline !important;
}


/*
 * ============================================================
 * LOGIN
 * ============================================================
 */

.tbd-claim-login {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        22px;

    border:
        1px solid var(--tbd-claim-border);

    border-radius:
        10px;

    background:
        #FAFBF9;
}


.tbd-claim-login h3 {
    margin:
        0;

    color:
        var(--tbd-claim-text);

    font-size:
        18px;
}


.tbd-claim-login p {
    max-width:
        640px;

    margin:
        7px 0 0;

    color:
        var(--tbd-claim-muted);

    font-size:
        13px;

    line-height:
        1.55;
}


/*
 * ============================================================
 * CLAIM FORM
 * ============================================================
 */

.tbd-claim-form {
    display:
        grid;

    gap:
        22px;
}


.tbd-claim-form__notice {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    padding:
        16px;

    border:
        1px solid #D9E0D5;

    border-radius:
        9px;

    background:
        #F2F4EF;

    color:
        #3E4A3A;
}


.tbd-claim-form__notice .dashicons {
    flex:
        0 0 auto;

    margin-top:
        1px;

    color:
        var(--tbd-claim-primary);

    font-size:
        19px;
}


.tbd-claim-form__notice p {
    margin:
        0;

    font-size:
        12px;

    line-height:
        1.55;
}


/*
 * ============================================================
 * FIELD
 * ============================================================
 */

.tbd-claim-field label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--tbd-claim-text);

    font-size:
        12px;

    font-weight:
        700;
}


.tbd-claim-field label span {
    margin-left:
        4px;

    color:
        var(--tbd-claim-muted);

    font-size:
        10px;

    font-weight:
        500;
}


.tbd-claim-field textarea {
    width:
        100%;

    min-height:
        130px;

    padding:
        13px 14px;

    border:
        1px solid var(--tbd-claim-border-strong);

    border-radius:
        8px;

    background:
        #FFFFFF;

    color:
        var(--tbd-claim-text);

    font:
        inherit;

    font-size:
        13px;

    line-height:
        1.5;

    resize:
        vertical;
}


.tbd-claim-field textarea:focus {
    border-color:
        var(--tbd-claim-primary);

    outline:
        2px solid rgba(91,
            111,
            64,
            .12);

    outline-offset:
        1px;
}


.tbd-claim-field small {
    display:
        block;

    margin-top:
        6px;

    color:
        var(--tbd-claim-muted);

    font-size:
        10px;
}


/*
 * ============================================================
 * FORM FOOTER
 * ============================================================
 */

.tbd-claim-form__footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding-top:
        4px;
}


.tbd-claim-form__footer p {
    max-width:
        620px;

    margin:
        0;

    color:
        var(--tbd-claim-muted);

    font-size:
        11px;

    line-height:
        1.5;
}


/*
 * ============================================================
 * HELP
 * ============================================================
 */

.tbd-claim-help {
    margin-top:
        30px;

    padding:
        26px 28px;

    border:
        1px solid var(--tbd-claim-border);

    border-radius:
        12px;

    background:
        #F2F4EF;
}


.tbd-claim-help h2 {
    margin:
        0;

    color:
        var(--tbd-claim-text);

    font-size:
        19px;
}


.tbd-claim-help p {
    max-width:
        760px;

    margin:
        9px 0 0;

    color:
        var(--tbd-claim-muted);

    font-size:
        12px;

    line-height:
        1.55;
}


/*
 * ============================================================
 * ACCESSIBILITY
 * ============================================================
 */

.tbd-claim a:focus-visible,
.tbd-claim button:focus-visible,
.tbd-claim input:focus-visible,
.tbd-claim textarea:focus-visible {
    outline:
        2px solid #8C9470;

    outline-offset:
        2px;
}


/*
 * ============================================================
 * TABLET
 * ============================================================
 */

@media (max-width: 900px) {

    .tbd-claim-section {
        padding:
            24px;
    }

    .tbd-claim-result {
        grid-template-columns:
            1fr;
    }

    .tbd-claim-result__action {
        width:
            100%;
    }

    .tbd-claim-result__action .tbd-claim-button {
        width:
            100%;
    }

    .tbd-claim-selected__main {
        flex-direction:
            column;
    }

    .tbd-claim-login {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .tbd-claim-form__footer {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */

@media (max-width: 600px) {

    .tbd-claim-hero {
        padding:
            48px 16px;
    }

    .tbd-claim-shell {
        padding:
            24px 14px 48px;
    }

    .tbd-claim-section {
        padding:
            20px;
    }

    .tbd-claim-section__header {
        gap:
            11px;
    }

    .tbd-claim-section__header h2 {
        font-size:
            19px;
    }

    .tbd-claim-step {
        width:
            29px;

        height:
            29px;

        flex-basis:
            29px;
    }

    .tbd-claim-search {
        grid-template-columns:
            1fr;
    }

    .tbd-claim-search .tbd-claim-button {
        width:
            100%;
    }

    .tbd-claim-results__header {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            5px;
    }

    .tbd-claim-result {
        padding:
            16px;
    }

    .tbd-claim-selected__main {
        padding:
            18px;
    }

    .tbd-claim-login {
        padding:
            18px;
    }

    .tbd-claim-login .tbd-claim-button {
        width:
            100%;
    }

    .tbd-claim-form__footer .tbd-claim-button {
        width:
            100%;
    }

    .tbd-claim-help {
        padding:
            22px;
    }

}