/**
 * css/custom/register.css
 * Stili per login e register
 * 
 * @package ItticiSurgelati
 * @version 1.0.0
 *
 */


/* =========================================================
   REGISTER PAGE
   css/custom/pages/register.css
   ========================================================= */

.gp-register-page {
    background : #fff;
}

.gp-register-layout {
    max-width : 1440px;
    margin    : 0 auto;
    display   : grid;
    grid-template-columns : minmax(0, 2fr) minmax(320px, 1fr);
    gap       : 48px;

    align-items : flex-start;
}

.gp-register-form-col {
    min-width : 0;
}

.gp-register-form {
    width : 100%;
}

/* FORM GRID */

.gp-form-grid {
    display : grid;
    gap     : 20px;
}

.gp-form-grid-2 {
    grid-template-columns : repeat(2, minmax(0, 1fr));
}

.gp-form-grid-3 {
    grid-template-columns : repeat(3, minmax(0, 1fr));
}

.gp-form-grid-4 {
    grid-template-columns : repeat(4, minmax(0, 1fr));
}

.gp-form-grid-5 {
    grid-template-columns : 120px minmax(240px, 1fr) 120px 90px 90px;
}

/* FORM BOX PERSONA GIURIDICA */

.gp-form-box {
    margin-bottom : 24px;
    padding       : 20px;
    border        : 1px solid var(--gp-theme-light);
    border-radius : 24px;
    background    : #fff;
}


/* CHECKBOX */
.gp-form-check {
    display     : flex;
    align-items : center;
    gap         : 10px;
    margin      : 10px 0 20px;
}

.gp-form-check-input {
    width        : 18px;
    height       : 18px;
    accent-color : var(--gp-theme-light);
    cursor       : pointer;
}

.gp-form-check-label {
    color       : var(--gp-text-secondary);
    font-size   : 18px;
    font-weight : 500;
    cursor      : pointer;
}


/* SELECT */
.gp-form-select {
    width      : 100%;
    height     : 40px;
    min-height : 40px;
    max-height : 180px;
    padding    : 8px 18px;

    color      : var(--gp-theme-dark);
    background : var(--gp-input-bg);

    /** border        : 1px solid var(--gp-input-border); */ 
    /** border-radius : var(--gp-radius-sm); */ 

    border        : 1px solid var(--gp-theme-light);
    border-radius : 24px;

    font-size   : 18px;
    font-weight : 300;

    outline    : none;
    box-shadow : none;

    transition : border-color 0.2s ease;
}


.gp-form-select:focus {
    border-color : var(--gp-input-focus);
}

#quartiereDropdown li {
    padding : 2px 14px;
}

#quartiereDropdown li:hover {
    background : var(--gp-input-bg);
}

#quartiereCol {
    position: relative;
}

#quartiereDropdown {
    position   : absolute;
    z-index    : 9999;
    top        : calc(100% + 4px);
    left       : 0;
    right      : 0;

    max-height : 250px;

    overflow-y : auto;
}



/* COMUNE AUTOCOMPLETE */

.is-hidden {
    display: none !important;
}

.gp-comune-field {
    position : relative;
}

.gp-comune-dropdown {
    position        : absolute;
    z-index         : 9999;
    top             : calc(100% + 4px);
    left            : 0;
    right           : 0;

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

    margin          : 0;
    padding         : 6px;
    list-style      : none;

    background      : #fff;
    border          : 1px solid var(--gp-input-border);
    border-radius   : 14px;
    box-shadow      : 0 10px 30px rgba(0,0,0,0.12);
    
}


.gp-comune-dropdown-item {
    padding : 10px 12px;

    border-radius : 10px;

    color  : var(--gp-text-primary);
    cursor : pointer;
}

.gp-comune-dropdown-item:hover {
    background : rgba(0,117,201,0.08);
}

/* ACTIONS */

.gp-form-actions {
    margin-top : 28px;

    display         : flex;
    justify-content : flex-start;
}

/* HIDDEN */

.is-hidden {
    display : none !important;
}

/* RESPONSIVE */

@media (max-width: 1199px) {
    .gp-register-layout {
        grid-template-columns : 1fr;
    }

    .gp-auth-image-col {
        display : none;
    }
}

@media (max-width: 991px) {
    .gp-form-grid-2,
    .gp-form-grid-3,
    .gp-form-grid-4,
    .gp-form-grid-5 {
        grid-template-columns : 1fr;
    }

    .gp-form-box {
        padding : 16px;
    }
}

@media (max-width: 575px) {
    .gp-form-check-label {
        font-size : 16px;
    }

    .gp-form-actions .gp-btn {
        width : 100%;
    }
}