/* -------------------------------------------------------
   Sélecteur de datacenter
------------------------------------------------------- */

.oaka-datacenter-selector {
    display: block;
    width:   100%;
}

/* Select custom */
.oaka-dc-custom-select {
    position:    relative;
    display:     block;
    width:       100%;
    user-select: none;
    color:       #000064;
}

.oaka-dc-button {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    width:           100%;
    padding:         6px 12px;
    border:          1px solid #ccc;
    border-radius:   7px;
    background:      #fff;
    cursor:          pointer;
    font:            inherit;
    font-size:       inherit;
    white-space:     nowrap;
    color:           #000064;
    box-sizing:      border-box;
}

.oaka-dc-button::after {
    content:            '';
    display:            inline-block;
    width:              18px;
    height:             18px;
    margin-left:        4px;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000064' 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-size:    contain;
    transition:         transform 0.15s;
}

.oaka-dc-custom-select.is-open .oaka-dc-button::after {
    transform: rotate(180deg);
}

.oaka-dc-button:disabled {
    opacity: 0.5;
    cursor:  wait;
}

.oaka-dc-list {
    display:      none;
    position:     absolute;
    top:          calc(100% + 4px);
    left:         0;
    min-width:    100%;
    margin:       0;
    padding:      4px 0;
    list-style:   none;
    background:   #fff;
    border:       1px solid #ccc;
    border-radius: 7px;
    box-shadow:   0 4px 12px rgba(0,0,0,.12);
    z-index:      9999;
}

.oaka-dc-custom-select.is-open .oaka-dc-list {
    display: block;
    list-style-type: none;
    padding: 0px;
    overflow: hidden;
}

.oaka-dc-list li {
    padding: 8px 16px;
    cursor:  pointer;
    white-space: nowrap;
}

.oaka-dc-list li:hover,
.oaka-dc-list li.is-selected {
    background: #BED2FF;
}

/* -------------------------------------------------------
   Listing d'articles par datacenter
------------------------------------------------------- */

.oaka-datacenter-listing {
    list-style: none;
    margin:     0;
    padding:    0;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.oaka-datacenter-listing li {
    padding: 8px 0;
}

.oaka-datacenter-listing li a {
    display:         block;
    text-decoration: none;
    color:           inherit;
}

.oaka-datacenter-listing li a:hover {
    text-decoration: underline;
}

.oaka-datacenter-no-results {
    margin: 0;
}

/* -------------------------------------------------------
   Notice article hors datacenter
------------------------------------------------------- */

.oaka-datacenter-notice {
    padding:       12px 16px;
    margin-bottom: 20px;
    border-left:   4px solid #f0a500;
    background:    #fff8ec;
    color:         #6b4f00;
    font-size:     14px;
    line-height:   1.5;
}