/* */
/* artboard */

.iphone-artboard {
    background-color: var(--systemWhite);
}


/**/
/**/

.pw-clipboard-copied-ctnr {
    display: none;
    position: absolute;
    width: calc(100% - var(--systemSpacing-64));
    top: var(--systemSpacing-72);
    left: 50%;
    transform: translate(-50%, -100%);
    background-color: var(--systemBG-primary);
    border-radius: var(--systemSpacing-9999);
    z-index: 9999;
    box-shadow: var(--systemSpacing-0) var(--systemSpacing-4) var(--systemSpacing-16) var(--systemSpacing-0) var(--systemQuinary);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.pw-clipboard-copied-ctnr.show {
    transform: translate(-50%, 0);
    opacity: 1;
}

.pw-clipboard-copied-ctnr.hide {
    transform: translate(-50%, -100%);
    opacity: 0;
}

.clipboard-copied-txt {
    font-size: var(--p-fontSize);
    font-weight: 500;
    color: var(--systemPrimary);
    padding: var(--systemSpacing-20) var(--systemSpacing-0);
    text-align: center;
    white-space: nowrap;
}

/* */
/* reservation screen */

.reservation-screen-all-wrp {
    margin: var(--systemSpacing-12) var(--systemSpacing-32) var(--systemSpacing-0) var(--systemSpacing-32);
}

.top-close-btn {
    background-color: var(--systemBG);
    box-shadow: var(--systemSpacing-0) var(--systemSpacing-0) var(--systemSpacing-16) var(--systemSpacing-0) var(--systemQuinary);
    padding: var(--systemSpacing-0);
    border-radius: var(--systemSpacing-9999);
    margin-bottom: var(--systemSpacing-32);
}

.top-close-btn svg {
    display: block;
    fill: var(--systemPrimary);
}

.reservation-tl-img-wrp {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--systemSpacing-24);
}

.reservation-tl {
    font-size: var(--h6-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
    margin-bottom: var(--systemSpacing-24);
}

.reservation-img-wrp img {
    display: block;
    max-width: 100%;
    border-radius: var(--systemSpacing-8);
}

.check-in-out-info-all-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.check-in-out-seperator {
    width: var(--systemSpacing-1);
    height: var(--systemSpacing-60);
    background-color: var(--systemQuinary);
}

.check-in-tl, .check-out-tl {
    font-size: var(--ph-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
    margin-bottom: var(--systemSpacing-8);
}

.check-in-dt-wrp, .check-out-dt-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-2);
}

.check-in-dt, .check-in-time {
    font-size: var(--p-fontSize);
    color: var(--systemSecondary);
    font-weight: 400;
    text-align: left;
}

.check-out-dt, .check-out-time {
    font-size: var(--p-fontSize);
    color: var(--systemSecondary);
    font-weight: 400;
    text-align: right;
}

.reservation-screen-seperator {
    width: 100%;
    height: var(--systemSpacing-1);
    background-color: var(--systemQuinary);
    margin: var(--systemSpacing-24) var(--systemSpacing-0);
}

.message-place-info-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-28);
}

.message-icon-txt-all-wrp, .place-info-icon-txt-all-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-12);
}

.message-icon-wrp svg, .place-icon-wrp svg {
    display: block;
    fill: var(--systemPrimary);
}

.message-tl, .place-info-tl {
    font-size: var(--p-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
    margin-bottom: var(--systemSpacing-2);
}

.message-dsc, .place-info-dsc {
    font-size: var(--p-fontSize);
    color: var(--systemSecondary);
    font-weight: 400;
}

.check-in-btn {
    position: absolute;
    bottom: var(--systemSpacing-28);
    border-radius: var(--systemSpacing-12);

    font-size: var(--ph-fontSize);
    color: var(--systemWhite);
    background-color: var(--systemBlack);
    padding: var(--systemSpacing-20) var(--systemSpacing-0);
    width: calc(100% - var(--systemSpacing-64));
    
}


/* */
/* bottom sheet */

.bottom-sheet-ctnr {
    display: block;
    width: 100%;
    position: absolute;
    bottom: var(--systemSpacing-0);
}

.bottom-sheet-all-wrp {
    padding: var(--systemSpacing-20) var(--systemSpacing-0) var(--systemSpacing-40) var(--systemSpacing-0);
    margin: var(--systemSpacing-0) var(--systemSpacing-12);
    border-radius: var(--systemSpacing-16) var(--systemSpacing-16) var(--systemSpacing-0) var(--systemSpacing-0);
    background-color: var(--systemBG-primary);
}

.close-btn {
    padding: var(--systemSpacing-0);
    margin-left: var(--systemSpacing-32);
}

.close-btn:hover svg {
    opacity: 80%;
}

.close-btn svg {
    display: block;
    fill: var(--systemPrimary);
}

.bottom-sheet-seperator {
    width: 100%;
    height: var(--systemSpacing-1);
    background-color: var(--systemQuaternary);
    margin: var(--systemSpacing-16) var(--systemSpacing-0) var(--systemSpacing-20) var(--systemSpacing-0);
}

.network-pw-info-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-32);
    margin: var(--systemSpacing-32);
}

.network-info-wrp, .pw-info-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-4);
}

.network-kr, .pw-kr {
    font-size: var(--p-fontSize);
    color: var(--systemSecondary);
    font-weight: 400;
}

.network-name, .pw-name {
    font-size: var(--hl-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
}

.bottom-sheet-btn-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-8);
    margin: var(--systemSpacing-0) var(--systemSpacing-32);
}

.connect-network, .copy-pw {
    font-size: var(--p-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
    padding: var(--systemSpacing-0);
    border-radius: var(--systemSpacing-12);
    height: var(--systemSpacing-48);
}

.connect-network {
    color: var(--systemWhite);
    background-color: var(--systemPrimary);
}

.connect-network:hover {
    opacity: 80%;
    transition: all 0.15s ease-in-out;
}

.copy-pw {
    color: var(--systemPrimary);
    border: var(--systemSpacing-1) solid var(--systemPrimary);
}

.copy-pw:hover {
    opacity: 70%;
    transition: all 0.15s ease-in-out;
}


/* */
/* */

.alert-dim {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--alert-dim);
    z-index: 5000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.alert-dim.show {
    display: block;
    opacity: 1;
}

.alert-ctnr {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--alert-materialBG);
    background-blend-mode: color-dodge, normal;
    backdrop-filter: blur(var--systemSpacing-40);
    border-radius: var(--systemSpacing-16);

    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
}

.alert-ctnr.show {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.alert-tl {
    font-size: var(--ph-fontSize);
    font-weight: 600;
    color: var(--systemPrimary);
    text-align: center;
    padding: var(--systemSpacing-20) var(--systemSpacing-16) var(--systemSpacing-16) var(--systemSpacing-16);
    width: var(--systemSpacing-280);
}

.alert-tl-btn-seperator {
    width: var(--systemSpacing-280);
    height: var(--systemSpacing-1);
    background-color: var(--systemQuinary);
}

.alert-btn-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.alert-not-allowed {
    font-size: var(--ph-fontSize);
    color: var(--systemAccent);
    font-weight: 400;
    padding: var(--systemSpacing-12) var(--systemSpacing-0);
    text-align: center;
    width: 100%;
}

.alert-btn-seperator {
    width: var(--systemSpacing-1);
    height: 48px;
    background-color: var(--systemQuinary);
}

.alert-allowed {
    font-size: var(--ph-fontSize);
    color: var(--systemAccent);
    font-weight: 600;
    padding: var(--systemSpacing-12) auto;
    text-align: center;
    width: 100%;
}