/**
 * Copyright © 2025 BasicInvite. All rights reserved.
 *
 * Order notification bar - mirrors M1 basicinvite/proof/notification.phtml styling.
 * Hero color: #937c66 | Light bg: #F7F8F6 | Text: #263138
 */

.order-notification .order-notification-row {
    display: flex;
    align-items: stretch;
    background-color: #F7F8F6;
    margin-bottom: 4px;
    color: #263138;
    font-size: 14px;
}
.order-notification {
    max-width: 1271px;
    margin: 0 auto;
}

/* Left badge: hero-color background with :after triangle notch (matches M1 border trick) */
.order-notification .status-order-number-wrap {
    display: none;
    align-items: stretch;
}

@media (min-width: 640px) {
    .order-notification .status-order-number-wrap {
        display: flex;
    }
}

.order-notification .status-order-number {
    background-color: #937c66;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 29px 12px 12px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 12px;
    font-family: 'Montserrat-regular';
    letter-spacing: 0.5px;
    position: relative;
}

.order-notification .status-order-number::after {
    content: "";
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 23px solid transparent;
    border-right: 6px solid #F7F8F6;
    border-bottom: 23px solid transparent;
}

.order-notification .status-order-number a {
    color: #ffffff;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.order-notification .status-order-number a:hover {
    text-decoration: underline;
}

/* Center content area */
.order-notification .order-notification-content {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 8px 28px;
    min-width: 0;
}

.order-notification .order-notification-status {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 14px;
    color: #cf4425;
    letter-spacing: .03em;
    padding: 0 16px;
    text-transform: uppercase;
    font-family: Filosofia, Didot, Bodoni MT, Palatino, serif;
    font-weight: 400;
    font-style: normal;
    margin-left: auto;
}

.order-notification .status-order-number-mobile {
    display: inline;
}

@media (min-width: 640px) {
    .order-notification .status-order-number-mobile {
        display: none;
    }
}

.order-notification .status-prefix {
    display: none;
}

@media (min-width: 640px) {
    .order-notification .status-prefix {
        display: inline;
    }
}



.order-notification .status-info {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.order-notification .status-post {
    font-style: italic;
    font-weight: 400;
    text-transform: none;
}

.order-notification .status-tracking {
    text-transform: uppercase;
    color: #937c66;
    font-weight: 700;
}

.order-notification .status-details {
    color: #cf4425;
    font-weight: 400;
    font-size: 14px;
    text-transform: initial;
    letter-spacing: .015em;
    word-spacing: .001em;
    font-family: Montserrat-Regular, Arial, sans-serif;
    font-style: normal;

}

/* Right: action button */
.order-notification .order-notification-button {
    display: flex;
    align-items: center;
    padding: 0;
    flex-shrink: 0;
}

.order-notification .order-notification-button a {
    background-color: #937c66;
    color: #ffffff;
    text-transform: uppercase;
    padding: 4px 28px;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    letter-spacing: 0.5px;
    display: inline-block;
    margin: 8px;
    min-width: 121px;
    text-align: center;
    border: none;
    transition: opacity 0.2s;
    vertical-align: text-top;
    font-family: 'Montserrat-semibold';
}

.order-notification .order-notification-button a:hover {
    opacity: 0.85;
    color: #ffffff;
}

/*
 * Proof-review login/checkout notices (Yunk\YProof\Observer\ProofReviewLoginNoticeObserver,
 * LastMinuteChangesNoticeObserver). Reuses M1's .notice-msg markup/class so the
 * icon rules already ported into styles.css apply unchanged
 * (.notice-msg ul li:before { content: "M"; font-family: handdrawn_iconsregular3;
 * color: #f8af45; font-size: 5em; }). Only the surrounding text/border rules —
 * originally in M1's custom-2018.less (uppercase, border-bottom, no background,
 * centered) — are ported here, scoped to our .yproof-messages wrapper so they
 * cannot affect the unrelated floating success/error/warning toast markup.
 */
.yproof-messages,
.yproof-messages ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.yproof-messages {
    overflow: hidden;
    margin: 0 auto 10px;
    max-width: 1255px;
}

.yproof-messages > li:last-child {
    margin-bottom: 0;
}

.yproof-messages a {
    text-decoration: underline;
}

.yproof-messages .notice-msg {
    text-transform: uppercase;
    background: none;
}

.yproof-messages .notice-msg ul li {
    color: #263138;
    font-size: 1.55em;
    line-height: 1.25em;
    border-bottom: 1px solid #eeeeee;
    letter-spacing: .015em;
    font-weight: normal;
    padding: 25px;
    text-align: center;
    font-family: 'FilosofiaRoman';
}

.yproof-messages .notice-msg ul li a {
    color: #336f7f;
    text-decoration: none;
}


@media (max-width:767px) {
    .order-notification .order-notification-content{
        padding: 8px;
    }

    .order-notification .order-notification-content {
        flex: auto;
    }
    .order-notification .status-details{
        display: none;
    }
    .order-notification .order-notification-status{
        margin: 0;
        padding: 0;
    }
    .order-notification .order-notification-button{
        margin-left: auto;
        padding: 0;
    }

    .status-order-number-mobile a{
        color: #336f7f;
    }
    .order-notification .order-notification-row{
        flex-wrap: wrap;
    }
    .order-notification .order-notification-button a{
        padding: 4px 14px !;
    }
    
}