@import"https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap";:root{--color-blue-100: hsl(225deg 100% 94%);--color-blue-700: hsl(245deg 75% 52%);--color-blue-50: hsl(225deg 100% 98%);--color-blue-500: hsl(245deg 83% 68%);--color-blue-950: hsl(223deg 47% 23%);--color-gray-600: hsl(224deg 23% 55%);--color-white: hsl(0deg 0% 100%);--color-box-shadow: hsl(245deg 75% 52% / 20%);--font-size: 16px;--font-family: "Red Hat Display";--font-weight-500: 500;--font-weight-700: 700;--font-weight-900: 900;--line-height: 1.5;--order-summary-max-width: 375px;--order-summary-border-radius: 16px;--order-summary-gap: 24px;--order-summary-margin: 32px 16px;--order-summary-plan-padding: 16px 0}*{margin:0;padding:0;box-sizing:border-box}:is(html,body){font-size:var(--font-size);font-family:var(--font-family),sans-serif;font-weight:var(--font-weight-500);color:var(--color-gray-600);line-height:var(--line-height)}@media (width >= 960px){:is(html,body){min-height:100vh}}:is(h1,h2,h3,h4,h5,h6){color:var(--color-blue-950);font-weight:var(--font-weight-900)}:is(p){color:var(--color-gray-600)}:is(button){font-family:var(--font-family),sans-serif;font-weight:var(--font-weight-500);border:none;outline:none;background-color:transparent;-webkit-tap-highlight-color:transparent;cursor:pointer}.background-layer{position:fixed;inset:0;z-index:-1;background-color:var(--color-blue-100);background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='375'%20height='194'%3e%3cpath%20fill='%23D6E1FF'%20fill-rule='evenodd'%20d='M-131.808%20155.366c97.026%2051.512%20204.233%2051.512%20321.62%200%20117.388-51.512%20223.27-51.512%20317.648%200V0h-639.268v155.366z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:100% 50%}@media (width >= 960px){.background-layer{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1440'%20height='437'%3e%3cpath%20fill='%23D6E1FF'%20fill-rule='evenodd'%20d='M0%20349.974c218.558%20116.035%20460.05%20116.035%20724.475%200s502.933-116.035%20715.525%200V0H0v349.974z'/%3e%3c/svg%3e")}}.main{display:grid;justify-content:center}@media (width >= 960px){.main{align-items:center;height:100vh}}.order-summary{display:flex;flex-direction:column;box-shadow:0 20px 30px var(--color-box-shadow);background-color:var(--color-white);max-width:var(--order-summary-max-width);border-radius:var(--order-summary-border-radius);gap:var(--order-summary-gap);margin:var(--order-summary-margin)}.order-summary__image{width:100%;height:200px}.order-summary__image img{border-radius:var(--order-summary-border-radius) var(--order-summary-border-radius) 0 0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.order-summary__content{padding:8px 24px;display:flex;flex-direction:column;gap:16px}.order-summary__title,.order-summary__description{text-align:center}.order-summary__plan{display:grid;width:100%;padding:var(--order-summary-plan-padding);grid-template-columns:25% 40% 35%;background-color:var(--color-blue-50);border-radius:var(--order-summary-border-radius);justify-content:space-between;align-items:center}.order-summary__plan-icon{display:grid;justify-content:center;align-items:center}.order-summary__plan-title,.order-summary__plan-description{font-size:var(--font-size)}.order-summary__button--change{font-size:var(--font-size);font-weight:var(--font-weight-700);color:var(--color-blue-700);text-decoration:underline;cursor:pointer}.order-summary__button--change:hover{text-decoration:none;color:var(--color-blue-500)}.order-summary__button--payment,.order-summary__button--cancel{padding:var(--order-summary-plan-padding);font-size:var(--font-size);font-weight:var(--font-weight-700)}.order-summary__button--payment{background-color:var(--color-blue-700);border-radius:var(--order-summary-border-radius);color:var(--color-white);box-shadow:0 10px 20px var(--color-box-shadow)}.order-summary__button--payment:hover{background-color:var(--color-blue-500)}.order-summary__button--cancel{color:var(--color-gray-600)}.order-summary__button--cancel:hover{color:var(--color-blue-950)}
