/* Start:/vau_pidpyska_na_bezkoshtovnu_dostavku/style.css?177324084419624*/
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


	.cont{
		width: 1279px!important;
	}
	
	.subscription-section .cont{
		border: 10px solid transparent; 
  border-image: url("/vau_pidpyska_na_bezkoshtovnu_dostavku/./img/gradient.avif") 14 round;
	}

        .menu-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .menu-btn svg {
            width: 24px;
            height: 24px;
            fill: #333;
        }

        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            gap: 8px;
        }

        .logo-text {
            font-size: 26px;
            font-weight: 900;
            color: #00a046;
            letter-spacing: -1px;
        }

        .logo-icon {
            width: 32px;
            height: 32px;
            background: #00a046;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-icon svg {
            width: 18px;
            height: 18px;
            fill: #fff;
        }

        .logo-badge {
            background: #00a046;
            color: #fff;
            font-size: 9px;
            padding: 3px 6px;
            border-radius: 4px;
            font-weight: 500;
            white-space: nowrap;
        }

        .logo-badge .exclaim {
            color: #ffe100;
        }

        .catalog-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #f5f5f5;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            padding: 10px 16px;
            font-size: 14px;
            font-weight: 500;
            color: #333;
            cursor: pointer;
            transition: all 0.2s;
        }

        .catalog-btn:hover {
            background: #eee;
        }

        .catalog-btn svg {
            width: 18px;
            height: 18px;
            fill: #333;
        }

        .search-box {
            flex: 1;
            display: flex;
            align-items: center;
            background: #f5f5f5;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #e5e5e5;
        }

        .search-box input {
            flex: 1;
            padding: 12px 16px;
            border: none;
            background: transparent;
            font-size: 14px;
            outline: none;
        }

        .search-box input::placeholder {
            color: #999;
        }

        .search-mic {
            padding: 8px;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .search-mic svg {
            width: 20px;
            height: 20px;
            fill: #666;
        }

        .search-btn {
            background: #00a046;
            color: #fff;
            border: none;
            padding: 12px 24px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
        }

        .search-btn:hover {
            background: #008a3b;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .lang-select {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 8px 12px;
            background: none;
            border: none;
            font-size: 14px;
            color: #333;
            cursor: pointer;
        }

        .lang-select svg {
            width: 16px;
            height: 16px;
            fill: #666;
        }

        .header-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            cursor: pointer;
            border-radius: 8px;
            transition: background 0.2s;
        }

        .header-icon:hover {
            background: #f5f5f5;
        }

        .header-icon svg {
            width: 24px;
            height: 24px;
            fill: #333;
        }



        .brand-logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .brand-logo.rozetka {
            font-size: 36px;
            font-weight: 900;
            color: #fff;
        }

        .brand-logo.rozetka .icon {
            width: 40px;
            height: 40px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .brand-logo.rozetka .icon svg {
            width: 22px;
            height: 22px;
            fill: #00a046;
        }

        .brand-plus {
            font-size: 32px;
            color: #fff;
            font-weight: 300;
        }

        .brand-logo.prom {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .brand-logo.prom .icon {
            width: 32px;
            height: 32px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .brand-logo.prom span {
            font-size: 32px;
            font-weight: 700;
            color: #fff;
        }



        .btn-auth {
            display: inline-block;
            background: #55ad4d;
			    color: #fff;
            padding: 14px 36px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-auth:hover {
            background: #ec6e0f;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }



        .package {
            position: absolute;
            width: 90px;
            height: 90px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            box-shadow: 0 15px 40px rgba(0,0,0,0.25);
        }

        .package.green {
            background: linear-gradient(145deg, #00c853 0%, #009624 100%);
            color: #fff;
        }

        .package.yellow {
            background: linear-gradient(145deg, #ffe100 0%, #ffc400 100%);
            color: #333;
        }

        .package:nth-child(1) { top: 15%; left: 4%; transform: rotate(-18deg); }
        .package:nth-child(2) { top: 45%; left: 8%; transform: rotate(12deg); }
        .package:nth-child(3) { top: 72%; left: 2%; transform: rotate(-8deg); }
        .package:nth-child(4) { top: 12%; right: 6%; transform: rotate(22deg); }
        .package:nth-child(5) { top: 42%; right: 3%; transform: rotate(-20deg); }
        .package:nth-child(6) { top: 70%; right: 8%; transform: rotate(8deg); }

        .arrow-badge {
            position: absolute;
            top: 32%;
            left: 22%;
            background: #fff;
            padding: 10px 18px;
            border-radius: 24px;
            font-size: 13px;
            font-weight: 500;
            color: #333;
            transform: rotate(-12deg);
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
            white-space: nowrap;
        }

        .arrow-badge::after {
            content: ' ↗';
        }

        /* Yellow Subscription Card */
        .subscription-section {
            padding: 20px 0;
        }

        .subscription-card {

            border-radius: 20px;
            overflow: hidden;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
        }

        .subscription-left {
            padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
        }
	.subscription-img{
		margin-bottom: 20px;
		max-width: 300px;	
	}
        .subscription-brands {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 28px;
        }

        .sub-brand {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sub-brand.rozetka .icon {
            width: 30px;
            height: 30px;
            background: #00a046;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sub-brand.rozetka .icon svg {
            width: 16px;
            height: 16px;
            fill: #fff;
        }

        .sub-brand.rozetka span {
            font-size: 22px;
            font-weight: 900;
            color: #00a046;
        }

        .sub-brand-plus {
            font-size: 20px;
            color: #666;
        }

        .sub-brand.prom .icon {
            width: 24px;
            height: 24px;
            background: #333;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sub-brand.prom span {
            font-size: 22px;
            font-weight: 700;
            color: #333;
        }

        .subscription-title {
            font-size: 34px;
            font-weight: 700;
            color: #333;
            margin-bottom: 6px;
            line-height: 1.2;
        }

        .subscription-title .smart {
            font-weight: 900;
            letter-spacing: 1px;
        }

        .subscription-title .smart .exclaim {
            color: #00a046;
        }

        .subscription-period {
            font-size: 34px;
            font-weight: 700;
            color: #333;
            margin-bottom: 20px;
        }

        .subscription-price {
            font-size: 20px;
            color: var(--color-main);
            font-weight: 700;
            margin-bottom: 10px;
        }

        .subscription-note {
            font-size: 14px;
            color: #666;
        }

        .subscription-right {
            padding: 20px 20px 20px 0;
        }

        .delivery-title {
            font-size: 15px;
            color: #666;
            margin-bottom: 24px;
            font-weight: 500;
        }

        .delivery-option {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0,0,0,0.06);
        }

        .delivery-option:last-of-type {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .delivery-icon {
    display: flex;
    justify-content: center; /* горизонтальное центрирование */
    align-items: center;     /* вертикальное центрирование */
    width: 60px;             /* или свой размер контейнера */
    height: 60px;            /* регулируй по макету */
    overflow: hidden;        /* если картинка больше контейнера */
}

.delivery-icon img {
   max-width: 100%;  /* чтобы не вылезала за контейнер */
    max-height: 100%;
    object-fit: contain; /* сохраняет пропорции */
}



        .delivery-info {
            flex: 1;
        }

        .delivery-name {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .delivery-desc {
            font-size: 13px;
            color: #666;
        }

        .delivery-badges {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-end;
        }

        .badge {
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 6px;
            font-weight: 500;
            white-space: nowrap;
        }

        .badge.green {
            background: #e8f5e9;
            color: var(--color-main);
            border: 1px solid #c8e6c9;
        }

        .badge.gray {
            background: #f5f5f5;
            color: #666;
            border: 1px solid #e0e0e0;
        }

        .card-footer {
            grid-column: 1 / -1;
            text-align: center;
            padding-bottom: 20px;
        }



        .faq-item {
            background: #fff;
            border: 1px solid #e5e5e5;

            margin-bottom: 14px;
            overflow: hidden;
        }

        .faq-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .faq-header:hover {
            background: #fafafa;
        }
	
	.faq-item.open .faq-header{
		background: #55ad4d;
	}
		.faq-item.open .faq-question{
		color: #fff;
	}	
	
	.faq-content p,.faq-content ol{
		margin-top: 10px;
	}

        .faq-question {
            font-size: 17px;
            font-weight: 500;
            color: #333;
        }

        .faq-toggle {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s;
        }

        .faq-toggle svg {
            width: 22px;
            height: 22px;
            fill: #666;
        }

        .faq-item.open .faq-toggle {
            transform: rotate(180deg);
        }

        .faq-content {
            display: none;
            padding: 0 28px 24px;
            font-size: 15px;
            color: #666;
            line-height: 1.7;
        }

        .faq-item.open .faq-content {
            display: block;
        }

        .rules-link {
            display: inline-block;
            color: #333;
            font-size: 15px;
            margin-bottom: 20px;
            text-decoration: underline;
        }

        .rules-link:hover {
            color: var(--color-main);
        }

        /* Free Delivery Section */
        .free-delivery-section {
            background: #fff;
            border: 10px solid #55ad4d;
 position: relative;
            padding: 45px;
            margin-bottom: 40px;
        }
	.corner-image {
    position: absolute;
top: -30px;
    right: -20px;
    width: 325px;
    height: auto;

    pointer-events: none; /* чтобы не мешала кликам */
    user-select: none;

    /* если нужно красиво */
    /* opacity: 0.9; */
    /* filter: drop-shadow(0 4px 10px rgba(0,0,0,.2)); */
}

        .free-delivery-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 35px;
        }

        .free-delivery-title {
            font-size: 31px;
            font-weight: 700;
            color: #333;
        }

        .free-delivery-icons {
            display: flex;
            gap: 14px;
        }

        .delivery-partner-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .delivery-partner-icon.green {
            background: #e8f5e9;
        }

        .delivery-partner-icon.yellow {
            background: #fffde7;
        }

        .delivery-partner-icon svg {
            width: 32px;
            height: 32px;
        }

        .partners-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .partner-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 22px;
            background: #fafafa;
            border-radius: 14px;
            transition: all 0.2s;
        }

        .partner-card:hover {
            background: #f0f0f0;
            transform: translateY(-2px);
        }

        .partner-logo {
            width: 52px;
            height: 52px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 14px;
            flex-shrink: 0;
        }
.lock{
		            width: 40px!important;

	}




        .partner-info h4 {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .partner-info p {
            font-size: 13px;
            color: #666;
        }

 



 
	.hero {
    position: relative;      /* база для позиционирования кнопки */
    width: 100%;
		padding-top: 20px;
    max-width: 100%;
}
	.faq-content li{
		margin-left:20px;
	}
.hero img {
    width: 100%;
    display: block;
}

/* КНОПКА ПОВЕРХ БАННЕРА */
.hero-btn, .hero-btn_a {
    position: absolute;
    bottom: 20px;                 /* отступ от низа */
    left: 50%;                    /* центр по горизонтали */
    transform: translateX(-50%);  /* точное выравнивание по центру */
    padding: 14px 36px;
    background: #55ad4d;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
	transition: all 0.2s;
}

.hero-btn:hover {
    background: #ff7a00;
	transform: translateY(-2px) translateX(-50%);

            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
	
	  /* =========================
     АДАПТИВ: только для <1279
     ========================= */

  @media (max-width: 1279px){
     .cont{
      width:100%!important;
      max-width:1279px; /* десктопный лимит сохраняем */
      padding:0 16px;
    }
	   .free-delivery-title{
		  font-size: 23px;
	  }
  }

  @media (max-width: 1100px){
    
     .subscription-left{
      border-right:none;
      border-bottom:1px solid rgba(0,0,0,.08);
    }
	 .free-delivery-title{
		  font-size: 1em;
	  }
     .subscription-right{ padding:20px; }

     .partners-grid{ grid-template-columns:repeat(2, 1fr); }

    /* чтобы бейджи не «вылетали» */
     .delivery-option{

      flex-wrap:wrap;
    }
     .delivery-badges{
      width:100%;
      flex-direction:row;
      flex-wrap:wrap;
      justify-content:flex-start;
      align-items:center;
      gap:8px;
      margin-left:74px; /* 60 + gap 14 */
    }
  }

  @media (max-width: 768px){
	 
	   
     .subscription-left,
     .subscription-right{ padding:30px; }

     .subscription-title,
     .subscription-period{ font-size:26px; }

     .partners-grid{ grid-template-columns:1fr; }

     .free-delivery-section{ padding:30px; }
     .free-delivery-header{
      flex-direction:column;
      align-items:flex-start;
      gap:20px;
    }
     .free-delivery-title{ font-size:22px; }

    /* уголок часто мешает на мобилке */
     .corner-image{ width:300px; top:70px; right:-16px; }
	  
  }
	@media(max-width: 710px){
		.subscription-card{ grid-template-columns:1fr; }
	}

  @media (max-width: 520px){
     .delivery-badges{ margin-left:0; }
    
	 
  }
	@media (max-width: 477px){
		.corner-image{ width:250px; top:80px; right:-16px; }
		}
/* End */


/* Start:/local/js/plugin/delivery_modal/modal.css?17732420074787*/

.deliverymodal-bg {position: fixed;z-index: 9999;top: 0;left: 0;display: block;width: 100%;height: 100%;opacity: 0.6;background: #333;}

.deliverymodal {position: fixed;z-index: 9999;top: 50%;left: 50%;width: 90%;max-width: 370px;padding: 15px;transform: translate(-50%, -50%);border-radius: 12px;background: #fff;}

.deliverymodal .quit {
    font-size: 8px;
}

.deliverymodal, .deliverymodal .join {font-size: 10px;}

.modal-buy-btn {font-size: 8px;font-weight: 700;display: inline-block;width: auto;margin: 8px auto 0;padding: 0.8em 1.2em;transition: box-shadow .2s ease;text-align: center;text-transform: uppercase;color: #fff;border-radius: 5px;background-color: #f27110;background-image: -webkit-linear-gradient(#f27110, #e86c0f);background-image: linear-gradient(#f27110, #e86c0f);box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);}

.modal-buy-btn.disabled {background-color: rgba(179, 194, 200, .96);background-image: linear-gradient(rgba(179, 194, 200, .96), #646566);}

.deliverymodal .closer {position: absolute;top: 5px;right: 10px;display: block;width: 17px;height: 17px;cursor: pointer;}

.deliverymodal .closer:before, .deliverymodal .closer:after {position: absolute;top: 0;left: 0;display: block;width: 2px;height: 100%;content: '';background: #000;}

.deliverymodal .closer:before {transform: rotate(45deg) translate(8px, -7px);}

.deliverymodal .closer:after {transform: rotate(315deg) translate(7px, 8px);}

.deliverymodal ul {list-style: none;}

.deliverymodal p.h3 {font-weight: bold;margin: 4px 0;}

.deliverymodal ul { /* margin-bottom: 10px; */}

.deliverymodal li {font-size: 0.9em;padding: 2px 0;border-bottom: 0.5px solid rgba(236, 110, 15, 0.31);}

.deliverymodal .quit li {font-size: 1em;}

.deliverymodal .plus {font-size: 1.1em;line-height: 1;color: #959595;}

.deliverymodal .cbx {font-size: 1em;position: relative;display: inline;margin-top: 10px;padding-left: 1.8em;cursor: pointer;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;}

.deliverymodal .cbx input {position: absolute;width: 0;height: 0;cursor: pointer;opacity: 0;}

.deliverymodal .checkmark {position: absolute; top: 0;left: 0;width: 1.4em;height: 1.4em;user-select: none;border: 2px solid #f09800;border-radius: 50%;background-color: white;}

.deliverymodal .checkmark.red {border-color: red;}

.deliverymodal .cbx:hover input ~ .checkmark {background-color: white;}

.deliverymodal .cbx input:checked ~ .checkmark {border-color: #f09800;background-color: white;}

.deliverymodal .checkmark:after {position: absolute;display: none;content: "";}

.deliverymodal .cbx input:checked ~ .checkmark:after {display: block;}

.deliverymodal .cbx .checkmark:after {top: -0.45em;left: 0.4em;width: 0.4em;height: 1em;-ms-transform: rotate(45deg);-webkit-transform: rotate(38deg);transform: rotate(38deg);border: solid #f09800;border-width: 0 2px 2px 0;}

.deliverymodal .oferta {
    display: block;
    margin-top: 5px;
    text-shadow:none;
}

.deliverymodal .oferta a {font-size: 0.8em;vertical-align: baseline;text-decoration: underline;color: #5a5a5a;}

.text-center {
    text-align: center;
}

.deliverymodal   #telno, .deliverymodal #telcode-delivery {font-size: 13px;display: block;width: 11em;height: 1em;margin: 0 auto 1em;padding: 1em;border: 1px solid #e8e8e8;border-radius: 3px;background: #fbfbfb;box-shadow: inset 0 0 12px 0 rgba(240, 240, 240, .75);}

.deliverymodal  #telcode-delivery {width: 7em;}

.deliverymodal  #telcode-delivery.error, .deliverymodal  #telno.error {border-color: red;}

.deliverymodal  label {font-size: 0.9em;margin: 0.5em auto;}

.deliverymodal  label {width: 100%;text-align: center;}

.deliverymodal .error-place {font-size: 0.8em;height: 1em;margin-bottom: 0.3em;text-align: center;color: red;}

@media (min-width: 600px) {
    .deliverymodal {
        max-width: 505px;
    }
    
    .deliverymodal, .deliverymodal .join {
        font-size: 14px;
    }
    
    .deliverymodal .quit {
        font-size: 12px;
    }
    
    .deliverymodal li {font-size: 12px;}
    
    .modal-buy-btn {
        font-size: 14px;
    }
    
    .deliverymodal .cbx .checkmark:after {
        top: -0.3em;
    }
}

.deliverymodal .phone-block {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.deliverymodal .phone-block a {
    font-size: 1em;
    margin-right: 12px;
    margin-left: 4px;
    color: #000;
}

.deliverymodal .phone-block svg {width: 1.3em;height: 1.3em;}

.deliverymodal .phone-block img {height: 1.3em;}

.deliverymodal .code-block {
    display: flex;
    flex-direction: column;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}


/* End */
/* /vau_pidpyska_na_bezkoshtovnu_dostavku/style.css?177324084419624 */
/* /local/js/plugin/delivery_modal/modal.css?17732420074787 */