/* הודעת הנחת הסט - עגלה, מיני-קארט וקופה.
 *
 * הצבעים והפונט נלקחים ממשתני הערכה עצמה (--wd-primary-color הוא #0B2C21,
 * --wd-text-font הוא Noto Sans Hebrew), עם ערכי גיבוי מפורשים למקרה שההודעה
 * מוצגת מחוץ להקשר של הערכה - למשל בתצוגה מקדימה. כך שינוי צבע בערכה נמשך
 * לכאן מעצמו במקום להישאר מאחור. */

.olive-set {
    --olive-green: var(--wd-primary-color, #0B2C21);
    --olive-sage: #788C78;
    --olive-line: #dce5d4;
    --olive-field: #f7f9f5;
    --olive-radius: var(--btn-accented-brd-radius, 5px);

    display: flex;
    align-items: center;
    gap: 18px;
    direction: rtl;
    text-align: right;
    font-family: var(--wd-text-font, "Noto Sans Hebrew", Arial, Helvetica, sans-serif);
    background: var(--olive-field);
    border: 1px solid var(--olive-line);
    border-radius: var(--olive-radius);
    padding: 20px 22px;
    margin: 0 0 18px;
    line-height: 1.5;
}

/* פס הדגשה בקצה הפותח. ב-RTL הקצה הפותח הוא הימני, ולכן border-inline-start
   ולא border-right - כך זה נשאר נכון גם אם הדף יוצג פעם ב-LTR. */
.olive-set--earned {
    border-inline-start: 3px solid var(--olive-green);
}

.olive-set--nudge {
    background: #fbfaf6;
    border-color: #e6e3d5;
    border-inline-start: 3px solid #ACC999;
}

/* הדירבון נכנס בתנועה, וקופסת ההנחה לא.
 *
 * המגירה הצדדית נפתחת מעצמה בכל הוספה לעגלה, ולכן הפעם השנייה שמוסיפים
 * פריט היא הפעם שבה כל מה שעל המסך כבר היה שם. קופסה שמופיעה בלי תנועה
 * בין שורות שלא זזו פשוט לא נקראת - וזו קופסה שכל תפקידה להיקרא ברגע
 * אחד מסוים. קופסת ההנחה לעומתה מלווה סכום שהשתנה ממילא, ותנועה עליה
 * הייתה קישוט. שבריר שנייה, ובלי הקפצה שמסיטה את מה שמתחתיה. */
@keyframes olive-set-nudge-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.olive-set--nudge {
    animation: olive-set-nudge-in .32s cubic-bezier(.2, .7, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .olive-set--nudge { animation: none; }
}

/* הסימן: עיגול מלא בירוק המותג. מספר אחד, בלי אייקון ובלי אימוג'י -
   הריסון הוא מה שקונה את המראה, לא הקישוט. */
.olive-set__mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--olive-green);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .02em;
    direction: ltr;
}

/* בדירבון שורת ההסבר היא הפרס - "ותקבלו 10% הנחת סט על כל ההזמנה" -
   ולא הערת שוליים כמו בקופסת ההנחה, שבה הסכום כבר אמר הכל. היא נשארת
   קטנה מהשורה שמעליה כי שתיהן משפט אחד שנשבר, אבל בצבע המותג ולא באפור. */
.olive-set--nudge .olive-set__sub {
    color: var(--olive-green);
    font-weight: 500;
}

.olive-set__body {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

/* שורת העל: קטנה, מרווחת אותיות, בצבע מרווה. היא זו שנותנת את הטון. */
.olive-set__eyebrow {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--olive-sage);
}

.olive-set__title {
    display: block;
    font-size: 19px;
    font-weight: 600;
    color: var(--olive-green);
    letter-spacing: -.005em;
    margin-top: 5px;
}

.olive-set__sub {
    display: block;
    font-size: 13.5px;
    font-weight: 400;
    color: #6e7f6e;
    margin-top: 5px;
}

/* ספרות בעלות רוחב אחיד, כדי שהסכום לא ירקוד כשהעגלה מתעדכנת */
.olive-set__amount {
    flex: 0 0 auto;
    font-size: 25px;
    font-weight: 300;
    color: var(--olive-green);
    white-space: nowrap;
    direction: ltr;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* המיני-קארט צר: שורת העל, שם המבצע והסכום - בלי ההסבר.
 *
 * הריפוד האופקי זהה לזה של שורות הסיכום של הערכה (15px), ולכן הכיתוב
 * מתחיל בדיוק מתחת ל"סכום ביניים" והסכום נגמר בדיוק מעל הסכום שמתחת.
 * שלוש השורות נקראות כטור אחד ולא כשלוש הזחות שונות. */
.olive-set--compact {
    padding-block: 12px;
    /* 15px של הערכה, פחות המסגרת: 3px בקצה הפותח ו-1px בקצה הסוגר */
    padding-inline: 12px 14px;
    margin-bottom: 12px;
    gap: 12px;
}

/* הערכה כופה padding-inline: 15px על כל ילדי תחתית העגלה הצדדית
   (.cart-widget-side .shopping-cart-widget-footer > *), וזה גובר על הבורר
   שלמעלה. אותו הורה ומחלקה אחת נוספת מכריעים בלי !important - בלי זה
   המסגרת דוחפת את הכיתוב 3px פנימה ואת הסכום 1px, והטור נשבר. */
.cart-widget-side .shopping-cart-widget-footer > .olive-set--compact {
    padding-inline: 12px 14px;
}

.olive-set--compact .olive-set__title {
    font-size: 15px;
    margin-top: 3px;
}

/* בגרסה הצרה הסימן הוא תווית קטנה בתוך שם המבצע ולא עיגול לפניו: עיגול
   של 38px היה תופס את הקצה הפותח ודוחף את כל הכיתוב פנימה. */
.olive-set--compact .olive-set__mark {
    width: auto;
    height: auto;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-inline-start: 8px;
    vertical-align: 1px;
}

.olive-set--compact .olive-set__eyebrow {
    font-size: 10.5px;
    letter-spacing: .1em;
}

/* שורת ההסבר קיימת רק בדירבון הצר, ושם היא נושאת את כל הסיבה לקרוא אותו */
.olive-set--compact .olive-set__sub {
    font-size: 12.5px;
    margin-top: 4px;
}

.olive-set--compact .olive-set__amount {
    font-size: 18px;
    font-weight: 400;
}

/* שורת הסיכום במיני-קארט, מתחת לקופסת ההנחה.
 *
 * הפריסה מגיעה מהערכה דרך .woocommerce-mini-cart__total, ולכן השורה
 * מיושרת בדיוק עם שורת סכום הביניים שמעליה. מה שנוסף כאן הוא ההבדל בין
 * השתיים: הקו העליון והריווח יורדים - קופסת ההנחה כבר מפרידה - והמספר
 * מודגש בירוק המותג, כי זה הסכום שמשלמים. שם המחלקה של הערכה נכלל בבורר
 * כדי לגבור על כלליה בלי !important. */
.woocommerce-mini-cart__total.olive-set-total {
    margin: 0 0 15px;
    padding-block: 0;
    border-top: 0;
    color: var(--wd-primary-color, #0B2C21);
    font-weight: 600;
}

.woocommerce-mini-cart__total.olive-set-total strong {
    color: inherit;
    font-weight: inherit;
}

.woocommerce-mini-cart__total.olive-set-total .woocommerce-Price-amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* בקופה ההודעה יושבת בתוך תא בטבלת סיכום ההזמנה */
.olive-set-discount-row td {
    padding: 0 0 8px !important;
    border: 0 !important;
}

.olive-set-discount-row .olive-set {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .olive-set {
        flex-wrap: wrap;
        gap: 14px;
        padding: 16px;
    }

    .olive-set__title {
        font-size: 17px;
    }

    .olive-set__amount {
        width: 100%;
        font-size: 22px;
    }
}