/* Shop product cards (every category's list, inside .cardlist.sp-plans) and the step-3 buy box. Linked from
   public/__index.php on step 2/3 pages only; style2.css stays untouched. Selectors are (0,3,0) or higher to beat
   style2.css's fixed card heights, floats, absolute .card-item img and media-query widths without !important;
   .cselected's blue (!important in style2.css) still wins.
   Old browsers: the base layout is inline-block cards (IE8+, Opera Mini, old Android/UC), every calc() has a plain
   fallback before it, every gradient a solid colour, transforms are prefixed. Flexbox (equal heights, buttons and prices
   aligned at the bottom) is only an enhancement inside @supports, which IE and pre-2013 WebKit skip. */

/* ---------- product list: base layout (all browsers) ---------- */
.cardlist.sp-plans { padding: 30px 0 8px; text-align: center; }
.cardlist.sp-plans.clearfix::after { display: none; } /* the cards are inline-blocks / flex items, nothing to clear */

.sp-plans .card-item.sp-plan { position: relative; float: none; display: inline-block; vertical-align: top; width: 23%; width: calc(25% - 16px); max-width: 270px; height: auto; min-height: 0; margin: 0 8px 26px; padding: 0; background: #fff; border: 2px solid #e4e7ee; border-radius: 12px; text-align: center; cursor: pointer; -webkit-transition: border-color .15s, box-shadow .15s; transition: border-color .15s, box-shadow .15s; }
.sp-plans .card-item.sp-plan:hover { border-color: #2ba5e0; box-shadow: 0 4px 14px rgba(43,165,224,.22); }
.sp-plans .card-item.sp-plan--pick,
.sp-plans .card-item.sp-plan--pick:hover { border-color: #f08c00; background: #fffaf2; box-shadow: 0 6px 18px rgba(240,140,0,.18); }
.sp-plans .card-item.sp-plan.cselected { background: #f5fbff; box-shadow: 0 4px 14px rgba(43,165,224,.25); } /* border + button blue come from .cselected */

.sp-plans .sp-plan a.link_class { display: block; padding: 24px 14px 14px; line-height: 1.7; color: #3b4256; text-decoration: none; border-radius: 10px; }
.sp-plans .sp-plan a.link_class:focus { outline: 2px solid #4786ff; outline-offset: 2px; }
.sp-plans .sp-plan a.link_class:focus:not(:focus-visible) { outline: none; } /* mouse clicks: no ring (old browsers drop this rule) */
.sp-plans .sp-plan a.link_class > *:nth-last-child(2) { margin-bottom: 14px; } /* gap above the button (always the last child) */
.sp-plans .card-item.sp-plan img { position: static; display: block; width: 60px; max-width: 60px; height: auto; margin: 0 auto 6px; }
.sp-plans .sp-plan h2.faname { font-size: 15px; line-height: 1.7; color: #3d3a4b; margin: 0 0 6px; }
.sp-plans .card-item.sp-plan img.sp-flag { width: 72px; max-width: 72px; margin: 3px auto -43px; } /* flag on a mostly empty 72x103 canvas */

.sp-plans .card-item .sp-nb { display: inline; white-space: nowrap; color: inherit; } /* beats .card-item span{display:block} / .card2 span{color} */
.sp-plans .card-item .sp-ie { display: inline; color: inherit; }

.sp-plans .sp-plan .sp-badge { position: absolute; top: -14px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; white-space: nowrap; font-size: 12px; font-weight: 700; line-height: 1; padding: 7px 14px; border-radius: 99px; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.sp-plans .sp-plan .sp-badge--pick { background-color: #c2410c; background-image: linear-gradient(45deg, #b93a0b 0%, #c2410c 100%); } /* white text >= 5:1 */
.sp-plans .sp-plan .sp-badge--best { background-color: #15803d; background-image: linear-gradient(45deg, #0f6f33 0%, #15803d 100%); }

.sp-plans .sp-plan .sp-anchor { font-size: 12px; line-height: 1.7; color: #5b6170; }
.sp-plans .sp-plan .sp-anchor del { color: #646a77; text-decoration: line-through; -webkit-text-decoration-color: #d64545; text-decoration-color: #d64545; } /* the comparison must stay readable (>= 4.5:1) */
.sp-plans .sp-plan .sp-price { color: #1a8f00; line-height: 1.4; margin: 2px 0 4px; } /* single price group:   keeps it on one line */
.sp-plans .sp-plan .sp-price b { font-size: 26px; font-weight: 700; }
.sp-plans .sp-plan .sp-price small { font-size: 13px; color: #4a5163; }
.sp-plans .sp-plan .sp-month { font-size: 13px; line-height: 1.7; color: #4a5163; margin-bottom: 6px; }
.sp-plans .sp-plan .sp-month b { font-size: 15px; font-weight: 700; color: #1d2433; }
.sp-plans .sp-plan .sp-save { display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.6; color: #11733a; background: #e3f6e9; border-radius: 12px; padding: 3px 10px; }
.sp-plans .sp-plan .priceen { margin: 2px 0 4px; }

.sp-plans .sp-plan .bluebtn-small { display: block; padding: 8px 6px; min-height: 40px; line-height: 22px; font-size: 14px; font-weight: 700; border-radius: 8px; }
.sp-plans .sp-plan--pick .bluebtn-small { background-color: #c2410c; background-image: linear-gradient(45deg, #b93a0b 0%, #c2410c 100%); border-color: transparent; color: #fff; }
.sp-plans .sp-plan--pick:hover .bluebtn-small { background-color: #9a3412; background-image: none; color: #fff; }
.sp-plans .sp-plan:hover .bluebtn-small { background-color: #1d5fd6; }
.sp-plans .card-item.sp-plan.cselected .bluebtn-small { background-color: #1d5fd6 !important; border-color: #1d5fd6; } /* beats style2's #4786ff !important: white text 5.7:1 */

/* ---------- enhancement: equal-height cards, button (and on gift-card lists the price) at the bottom ---------- */
@supports (display: flex) or (display: -webkit-flex) {
    .cardlist.sp-plans { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-align-items: stretch; align-items: stretch; }
    .sp-plans .card-item.sp-plan { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
    .sp-plans .sp-plan a.link_class { -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; }
    .sp-plans .sp-plan .sp-save { -webkit-align-self: center; align-self: center; }
    .sp-plans .sp-plan .bluebtn-small { margin-top: auto; }
    /* gift-card lists: names of different lengths on top, price + € + button lined up at the bottom of every card */
    .sp-plans--generic .sp-plan .sp-price { margin-top: auto; }
    .sp-plans--generic .sp-plan .bluebtn-small { margin-top: 0; }
}

/* ---------- widths ---------- */
/* small laptops 901-1099 (e.g. 1366px at 150%): keep 4 across, tighter, so no line wraps */
@media only screen and (min-width: 901px) and (max-width: 1099px) {
    .sp-plans .card-item.sp-plan { width: 23.5%; width: calc(25% - 10px); margin: 0 5px 26px; }
    .sp-plans .sp-plan a.link_class { padding: 24px 8px 14px; }
    .sp-plans .sp-plan h2.faname { font-size: 14px; }
    .sp-plans .sp-plan .sp-anchor { font-size: 11px; }
    .sp-plans .sp-plan .sp-save { font-size: 11px; padding: 3px 6px; }
}
/* tablets / large phones: 2 per row (1storage: row 1 = 1-month + 3-month) */
@media only screen and (max-width: 900px) {
    .cardlist.sp-plans { margin: 0 -6px; }
    .sp-plans .card-item.sp-plan { width: 46%; width: calc(50% - 12px); max-width: 340px; margin: 0 6px 24px; }
}
/* phones 360-539: 2 per row, compact type; the list bleeds into .bodywhite's 20px padding */
@media only screen and (max-width: 539px) {
    .cardlist.sp-plans { margin: 0 -14px; padding-top: 24px; }
    .sp-plans .card-item.sp-plan { width: 47%; width: calc(50% - 8px); margin: 0 4px 22px; border-radius: 10px; }
    .sp-plans .sp-plan a.link_class { padding: 20px 7px 10px; line-height: 1.6; }
    .sp-plans .sp-plan a.link_class > *:nth-last-child(2) { margin-bottom: 10px; }
    .sp-plans .card-item.sp-plan img { width: 42px; max-width: 42px; margin-bottom: 2px; }
    .sp-plans .card-item.sp-plan img.sp-flag { width: 60px; max-width: 60px; margin: -1px auto -43px; }
    .sp-plans .sp-plan h2.faname { font-size: 13px; line-height: 1.6; margin-bottom: 4px; }
    .sp-plans .sp-plan .sp-badge { font-size: 11px; padding: 6px 10px; top: -13px; }
    .sp-plans .sp-plan .sp-anchor { font-size: 11px; }
    .sp-plans .sp-plan .sp-price b { font-size: 21px; }
    .sp-plans .sp-plan .sp-price small { font-size: 11px; }
    .sp-plans .sp-plan .sp-month { font-size: 12px; margin-bottom: 5px; }
    .sp-plans .sp-plan .sp-month b { font-size: 13px; }
    .sp-plans .sp-plan .sp-save { font-size: 11px; padding: 2px 6px; }
    .sp-plans .sp-plan .bluebtn-small { font-size: 13px; }
}
/* 2-per-row phones: drop «شما:» from the saving pill and «یعنی» from the per-month line so both stay on one line, and
   give the name and the comparison the same height in both cards of a row so the prices line up */
@media only screen and (min-width: 360px) and (max-width: 539px) {
    .sp-plans .sp-plan .sp-save .sp-you { display: none; }
    .sp-plans .sp-plan .sp-save { padding: 2px 4px; }
}
@media only screen and (min-width: 360px) and (max-width: 480px) {
    .sp-plans .card-item .sp-ie { display: none; }
}
@media only screen and (min-width: 360px) and (max-width: 429px) {
    .sp-plans .sp-plan h2.faname { min-height: 3.2em; }
    .sp-plans .sp-plan .sp-anchor { min-height: 3.4em; }
}
/* very narrow phones (320-359): one card per row so no line breaks into fragments */
@media only screen and (max-width: 359px) {
    .sp-plans .card-item.sp-plan { width: 96%; width: calc(100% - 8px); max-width: none; margin: 0 4px 24px; }
    .sp-plans .sp-plan a.link_class { padding: 20px 14px 12px; }
    .sp-plans .card-item.sp-plan img { width: 40px; max-width: 40px; }
    .sp-plans .card-item.sp-plan img.sp-flag { width: 60px; max-width: 60px; margin: -2px auto -44px; }
    .sp-plans .sp-plan h2.faname { font-size: 14px; }
    .sp-plans .sp-plan .sp-anchor { font-size: 12px; }
    .sp-plans .sp-plan .sp-price b { font-size: 24px; }
    .sp-plans .sp-plan .sp-price small { font-size: 12px; }
    .sp-plans .sp-plan .sp-month { font-size: 13px; }
    .sp-plans .sp-plan .sp-month b { font-size: 14px; }
    .sp-plans .sp-plan .sp-save { font-size: 12px; padding: 3px 10px; }
}

/* ---------- step-3 buy page + /ypay/ form (.bp-*) ----------
   New class names only.
   Old browsers: block / float / display:table layout only - no flex, grid, variables, calc, gap, clamp/min/max, sticky,
   object-fit, :is/:where/:has, no gradients (solid colours; style2.css's rgb(0 153 50) gradients are dropped by IE11,
   Android 4.4 and iOS < 12.1). The only transform is in the prefixed spinner keyframes. The site has no doctype (quirks),
   so every sized box sets box-sizing itself (prefixed for Android <= 4.3); no percentage heights. */

.bp-wrap { max-width: 560px; margin: 16px auto 8px; color: #3b4256; font-size: 14px; line-height: 1.9; text-align: right; }
.bp-wrap--two { max-width: 900px; }
.bp-wrap--ypay { max-width: 600px; }
.bp-box { padding: 18px 20px 22px; background-color: #fff; border: 1px solid #e4e7ee; border-radius: 12px; -webkit-box-shadow: 0 4px 16px rgba(32, 48, 90, 0.07); box-shadow: 0 4px 16px rgba(32, 48, 90, 0.07); }
.bp-box p { margin: 0; }
.bp-box ul { margin: 0; padding: 0; }
.bp-box li { list-style: none; background: none; }

/* what you buy (media object: floats beside an overflow:hidden body) */
.bp-item { overflow: hidden; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid #eef0f5; }
.bp-item-img { float: right; width: 48px; height: auto; margin: 2px 0 0 12px; border: 0; }
.bp-box img.bp-item-img.sp-flag { width: 60px; margin: 6px 0 -43px 12px; } /* flag on a mostly empty 72x103 canvas */
.bp-box a.bp-item-change { float: left; margin: 8px 10px 0 0; padding: 0 12px; font-size: 13px; line-height: 26px; color: #1d5fd6; background-color: #fff; border: 1px solid #c8dbff; border-radius: 99px; text-decoration: none; }
.bp-box a.bp-item-change:hover,
.bp-box a.bp-item-change:focus { color: #fff; background-color: #1d5fd6; border-color: #1d5fd6; }
.bp-item-body { overflow: hidden; }
.bp-box .bp-item-label { font-size: 12px; line-height: 1.7; color: #5b6170; }
.bp-box .bp-item-name { font-size: 16px; font-weight: 700; line-height: 1.7; color: #003aa4; }
.bp-box .bp-item-fine { clear: both; padding: 8px 0 0; font-size: 12px; line-height: 1.9; color: #7a4a00; }

/* foreign visitor: the question above the two options */
.bp-choose { margin: 0 0 14px; text-align: center; }
.bp-box .bp-choose-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.7; color: #1d2433; }
.bp-box .bp-choose-sub { font-size: 12px; line-height: 1.8; color: #5b6170; }
.bp-box .bp-jump { margin: 10px 0 0; padding: 8px 12px; font-size: 13px; line-height: 1.9; color: #3b4256; background-color: #f2f6ff; border: 1px solid #d6e4ff; border-radius: 8px; }
.bp-box .bp-jump a { font-weight: 700; color: #1d5fd6; text-decoration: underline; }

/* option cards: bordered only when there are two */
.bp-opts--two .bp-opt { padding: 14px 14px 16px; background-color: #fff; border: 2px solid #bfe5c9; border-radius: 12px; }
.bp-opts--two .bp-opt--euro { border-color: #cddcfb; }
.bp-box .bp-opt-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.7; color: #1d2433; text-align: center; }
.bp-box .bp-opt-who { margin: 0 0 10px; font-size: 13px; line-height: 1.8; color: #4a5163; text-align: center; }
.bp-or { margin: 14px 0; border-top: 1px solid #e4e7ee; text-align: center; line-height: 0; }
.bp-or span { position: relative; top: -11px; display: inline-block; padding: 0 12px; font-size: 13px; line-height: 22px; color: #5b6170; background-color: #fff; }

/* amount panel */
.bp-amount { margin: 0 0 14px; padding: 8px 12px 10px; text-align: center; background-color: #f4fbf6; border: 1px solid #d9f0df; border-radius: 10px; }
.bp-amount--eur { background-color: #f3f7ff; border-color: #d6e4ff; }
.bp-box .bp-amount-label { font-size: 13px; line-height: 1.7; color: #4a5163; }
.bp-box .bp-amount-value { font-size: 15px; line-height: 1.5; color: #4a5163; }
.bp-box .sp-nb,
.bp-box .bp-nb { white-space: nowrap; }
.bp-amount-value .bold { font-size: 30px; font-weight: 700; color: #1a8f00; }
.bp-amount-value .sp-unit { font-size: 15px; color: #4a5163; }
.bp-box .bp-eur span { direction: ltr; unicode-bidi: embed; white-space: nowrap; font-size: 28px; font-weight: 700; color: #0b5ed7; }
.bp-box .bp-save { margin: 4px 0 0; font-size: 13px; font-weight: 700; line-height: 1.8; color: #11733a; }
.bp-box .bp-tip { margin: 0 0 14px; padding: 7px 10px; font-size: 12px; line-height: 1.9; color: #6b4500; background-color: #fff7e6; border: 1px solid #ffe2a8; border-radius: 8px; }

/* Toman form */
.bp-form { margin: 0; }
.bp-box .bp-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.7; color: #1d2433; }
.bp-eg { margin: 0 4px 0 0; font-size: 12px; font-weight: 400; color: #5b6170; white-space: nowrap; }
.bp-box .bp-input { display: block; width: 100%; height: 48px; margin: 0; padding: 8px 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: Yekan, tahoma, sans-serif; font-size: 16px; line-height: normal; color: #1d2433; background-color: #fff; border: 1px solid #c3ccdb; border-radius: 8px; -webkit-box-shadow: none; box-shadow: none; }
.bp-box input.bp-input { -webkit-appearance: none; } /* not on <select>: old Android would drop its arrow */
.bp-box .bp-input--tel { height: 52px; font-size: 20px; letter-spacing: 1px; text-align: center; }
.bp-box .bp-input:focus { border-color: #1d5fd6; -webkit-box-shadow: 0 0 0 3px rgba(29, 95, 214, 0.2); box-shadow: 0 0 0 3px rgba(29, 95, 214, 0.2); }
.bp-box .bp-input::-webkit-input-placeholder { color: #a3a9b5; letter-spacing: 0; }
.bp-box .bp-input:-ms-input-placeholder { color: #a3a9b5; }
.bp-box .bp-input::-moz-placeholder { color: #a3a9b5; opacity: 1; }
.bp-box .bp-input::placeholder { color: #a3a9b5; letter-spacing: 0; }
.bp-box .bp-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.9; color: #5b6170; }
.bp-box .bp-hint--top { margin: 0 0 12px; font-size: 13px; }
.bp-box .bp-known { margin: 0; padding: 8px 10px; font-size: 13px; line-height: 1.9; text-align: center; background-color: #f6f8fc; border-radius: 8px; }
.bp-ltr { direction: ltr; unicode-bidi: embed; white-space: nowrap; font-weight: 700; }
.bp-box .bp-check { display: block; overflow: hidden; margin: 10px 0 12px; padding: 4px 0; font-size: 13px; line-height: 1.9; color: #3b4256; cursor: pointer; }
.bp-box .bp-check input { float: right; width: 18px; height: 18px; margin: 4px 0 0 8px; }
.bp-check span { display: block; overflow: hidden; }

/* messages (the site's .alert colours; spacing only) */
.bp-box .bp-alert { margin: 0 0 14px; padding: 10px 12px; font-size: 13px; line-height: 1.9; text-align: right; border-radius: 8px; }
.bp-box .bp-alert a { font-weight: 700; color: inherit; text-decoration: underline; }
.bp-box .bp-dup p + p { margin-top: 4px; }
.bp-box .bp-dup-title { font-weight: 700; }
.bp-code { display: inline-block; padding: 0 10px; font-family: Consolas, "Courier New", monospace; font-size: 18px; line-height: 1.6; letter-spacing: 2px; color: #1d2433; background-color: #fff; border: 1px dashed #d6b25e; border-radius: 6px; white-space: nowrap; direction: ltr; unicode-bidi: embed; }

/* buttons: solid colours, one full-width button per option */
.bp-box .bp-btn { display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: Yekan, tahoma, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.6; color: #fff; text-align: center; text-decoration: none; background-color: #15803d; background-image: none; border: 0; border-radius: 10px; cursor: pointer; -webkit-appearance: none; }
.bp-box .bp-btn--green { background-color: #15803d; }
.bp-box .bp-btn--green:hover { background-color: #0f6f33; }
.bp-box .bp-btn--blue { background-color: #1d5fd6; }
.bp-box .bp-btn--blue:hover { background-color: #1f4fbf; }
.bp-box .bp-btn--orange { background-color: #c2410c; }
.bp-box .bp-btn--orange:hover { background-color: #9a3412; }
.bp-box a.bp-btn,
.bp-box a.bp-btn:visited,
.bp-box a.bp-btn:hover,
.bp-box a.bp-btn:focus { color: #fff; text-decoration: none; }
.bp-box .bp-btn:focus { -webkit-box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.6); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.6); }
.bp-box .bp-btn[disabled],
.bp-box .bp-btn[disabled]:hover { background-color: #7a808c; cursor: default; }
.bp-box .bp-btn .p-r-10 { padding-left: 10px; } /* balances .p-r-10 so the label stays centred */
.bp-box .bp-btn .lds-dual-ring:after { -webkit-animation: bp-spin 1.2s linear infinite; animation: bp-spin 1.2s linear infinite; }
@-webkit-keyframes bp-spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@keyframes bp-spin { from { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }

/* small print: trust lines (CSS dots, no images), next step, card logos */
.bp-box .bp-trust { margin: 12px 0 0; }
.bp-box .bp-trust li { position: relative; margin: 0 0 2px; padding: 0 14px 0 0; font-size: 12px; line-height: 1.9; color: #4a5163; }
.bp-box .bp-trust li:before { content: ""; position: absolute; top: 9px; right: 2px; width: 5px; height: 5px; background-color: #15803d; border-radius: 50%; }
.bp-box .bp-trust--eur li:before { background-color: #1d5fd6; }
.bp-box .bp-trust a { color: #1d5fd6; text-decoration: underline; }
.bp-box .bp-opt-next { margin: 0 0 12px; font-size: 13px; line-height: 1.9; color: #3b4256; text-align: center; }
.bp-box .bp-next,
.bp-box .bp-fine { margin: 8px 0 0; font-size: 12px; line-height: 1.9; color: #5b6170; text-align: center; }
.bp-box .bp-cards { margin: 12px 0 0; text-align: center; }
.bp-cards img { max-width: 100%; height: auto; border: 0; }
.bp-help { margin: 10px 0 0; font-size: 13px; line-height: 1.9; color: #5b6170; text-align: center; }
.bp-help a { font-weight: 700; color: #1d5fd6; text-decoration: underline; }

/* /ypay/: summary + English (LTR) form inside the RTL page */
.bp-box .bp-title { margin: 4px 0 0; font-size: 16px; font-weight: 700; line-height: 1.7; color: #1d2433; text-align: center; }
.bp-box .bp-sub { margin: 0 0 12px; font-size: 13px; line-height: 1.9; color: #4a5163; text-align: center; }
.bp-yform { margin: 0; direction: ltr; text-align: left; }
.bp-box .bp-fs-title { overflow: hidden; margin: 14px 0 10px; padding: 0 0 4px; font-size: 14px; font-weight: 700; line-height: 1.8; color: #1d2433; border-bottom: 1px solid #eef0f5; }
.bp-fa { float: right; margin: 0 0 0 10px; font-size: 12px; font-weight: 400; color: #5b6170; direction: rtl; }
.bp-row { overflow: hidden; }
.bp-field { margin: 0 0 12px; }
.bp-box .bp-field label { display: block; overflow: hidden; margin: 0 0 4px; font-size: 13px; font-weight: 700; line-height: 1.8; color: #1d2433; text-align: left; }
.bp-box .bp-select { padding: 8px; }
.bp-yform .bp-hint { direction: rtl; text-align: right; }
.bp-pay { margin: 16px 0 0; direction: rtl; text-align: center; }
.bp-ypay .bp-trust { padding: 12px 0 0; border-top: 1px dashed #e4e7ee; }
.bp-box .bp-switch { margin: 14px 0 0; padding: 8px 10px; font-size: 13px; line-height: 1.9; text-align: center; color: #3b4256; background-color: #f4fbf6; border: 1px solid #d9f0df; border-radius: 8px; }
.bp-box .bp-switch a { font-weight: 700; color: #11733a; text-decoration: underline; }

/* /ypay/ field pairs side by side from 481px (floats, LTR: first field on the left) */
@media only screen and (min-width: 481px) {
    .bp-half { float: left; width: 48.5%; }
    .bp-half--2 { float: right; }
}
/* foreign visitor, 768px and up: the two options side by side with display:table = equal heights in every browser
   (IE8+, Android 2+, Opera Mini); the wrapper's negative margin cancels the outer border-spacing */
@media only screen and (min-width: 768px) {
    .bp-opts--two { margin: 0 -12px; }
    .bp-opts--two .bp-opts-in { display: table; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 12px 0; }
    .bp-opts--two .bp-opt { display: table-cell; width: 50%; vertical-align: top; }
    .bp-opts--two .bp-or,
    .bp-box .bp-jump { display: none; }
}
/* phones: use the whole width (bleed 10px into .bodywhite's 20px padding), slightly smaller type */
@media only screen and (max-width: 480px) {
    .bp-wrap { margin: 12px -10px 6px; }
    .bp-box { padding: 14px 12px 16px; border-radius: 10px; }
    .bp-opts--two .bp-opt { padding: 12px 10px 14px; }
    .bp-box .bp-item-name { font-size: 15px; }
    .bp-amount-value .bold { font-size: 26px; }
    .bp-box .bp-eur span { font-size: 24px; }
    .bp-box .bp-btn { font-size: 16px; }
    .bp-code { padding: 0 6px; font-size: 16px; letter-spacing: 1px; }
}
/* very narrow phones (320-359): the longest button label («رفتن به درگاه و پرداخت 18.99 €») stays on one line */
@media only screen and (max-width: 359px) {
    .bp-box .bp-btn { padding-right: 6px; padding-left: 6px; font-size: 15px; }
    .bp-box .bp-btn .p-r-10 { padding-left: 4px; }
}