:root {
--background-surface-base: #fafbff;
--background-surface-base-darker: #f0f1f5;
--background-surface-inverse: #1a1b1f;
--background-surface-neutral: #dcdde1;
--background-surface-inverse: #1a1b1f;
--background-inputs-on-base: rgba(26, 27, 31, 0.08);
--background-button-on-base-primary-disabled: #dcdde1;
--background-button-on-base-primary-default: #d19173;
--background-button-on-base-primary-hover: #d9a68e;
--background-button-on-base-secondary-hover: rgba(26, 27, 31, 0.08);
--background-button-on-inverse-secondary-hover: rgba(240, 241, 245, 0.08);
--background-inputs-on-inverse: rgba(240, 241, 245, 0.08);
--text-on-base-default: #1a1b1f;
--text-on-base-subtle-default: #46484f;
--text-on-inverse-default: #fffaf7;
--text-on-inverse-subtle-default: #c0c1c6;
--text-button-on-base-secondary: #1a1b1f;
--text-on-base-active: #b6846d;
--text-on-base-disabled: #87888d;
--border-radius: 16px;
--border-radius-input: 6px;
--background-inputs-on-base: rgba(26, 27, 31, 0.08);
--dialog-width-medium: 1360px;
--padding-outer-vertical: 72px;
--padding-outer-horizontal: 72px;
}
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
.vertical-align-center {
display: flex;
align-items: center;
gap: 8px;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
white-space: nowrap;
}
.is-hidden {
display: none !important;
}
.prevent-copy,
.prevent-copy * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
.prevent-copy {
-webkit-touch-callout: none;
}
.m-date {
color: var(--text-on-inverse-subtle-default);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
small {
font-size: 70%;
}
.modal {
--modal-content-bg: var(--color-content-bg-alt);
--modal-content-title-bg: var(--color-content-bg-grad);
--modal-content-border: var(--color-content-border);
--modal-content-color: var(--color-white);
}
.modal-large {
--bs-modal-width: 800px;
}
.modal-backdrop,
.modal-backdrop.fade.in {
background: var(--color-content-bg-alt) !important;
}
.modal-content {
color: var(--modal-content-color);
background-color: var(--modal-content-bg);
border: var(--bs-modal-border-width) solid var(--modal-content-border);
}
.modal-header {
background-color: var(--modal-content-title-bg);
border-bottom: var(--bs-modal-header-border-width) solid var(--modal-content-border);
}
.modal-footer {
background-color: var(--modal-content-bg);
border-top: var(--bs-modal-footer-border-width) solid var(--modal-content-border);
}
.btn-close {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.switcher {
position: relative;
display: block;
}
.switcher-navigation {
display: flex;
width: auto;
}
.switcher-list {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-direction: row;
padding: 0 !important;
}
.switcher-list li {
flex-shrink: 0;
padding: 0 !important;
}
.switcher-list li::before {
display: none;
}
.switcher-item {
--switcher-item-width: 60px;
--switcher-item-padding: 0 5px;
--switcher-item-border-top: 2px solid transparent;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 60px;
width: var(--switcher-item-width);
padding: var(--switcher-item-padding);
border-top: var(--switcher-item-border-top);
}
@media (min-width: 64rem) {
.switcher-item {
--switcher-item-width: auto;
--switcher-item-: 0 35px;
flex-direction: row;
}
}
.switcher-item.is-selected {
--switcher-item-border-top: 2px solid #ddd;
}
.switcher-item::before {
display: none;
}
.switcher-item:hover {
border-bottom: 0 solid transparent !important;
}
.switcher-panels {
overflow: hidden;
padding: 0 !important;
}
.switcher-panel {
--switcher-panel-display: none;
display: var(--switcher-panel-display);
padding: 0 !important;
}
.switcher-panel.is-selected {
--switcher-panel-display: block;
}
.switcher-panel::before {
display: none;
}
.user-form {
--user-form-gap: 24px;
display: flex;
flex-direction: column;
gap: var(--user-form-gap);
}
.user-form .memoary-btn-wrapper {
margin-top: 8px;
}
@media (min-width: 768px) {
.user-form .memoary-btn-wrapper {
margin-top: 24px;
}
}
.w-form.for_login.layout_ver {
--fields-gap: 24px;
}
.w-form-row.for_submit {
display: flex !important;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
@media (min-width: 768px) {
.w-form-row.for_submit {
margin-top: 24px;
}
}
.w-form.for_login .w-form-row.for_submit > * {
vertical-align: middle;
margin-inline-end: 0;
}
label {
font-size: 16px;
}
.memoary-input-group {
display: flex;
border-radius: var(--border-radius-input);
background: var(--background-inputs-on-base);
}
.memoary-findname-form {
display: flex;
gap: 4px;
}
.memoary-grid-sorting {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
@media only screen and (min-width: 600px) {
.memoary-grid-sorting {
flex-wrap: nowrap;
}
}
.memoary-sorting-options-form {
display: flex;
align-items: center;
}
.memoary-sorting-options {
display: flex;
align-items: center;
gap: 16px;
}
.memoary-reset-btn {
display: flex;
gap: 4px;
align-items: center;
color: var(--text-on-base-active);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.08px;
}
.memoary-reset-btn-path {
fill: var(--text-on-base-active);
}
.w-form-row.check_wrong input,
.w-form-row.check_wrong textarea,
.w-form-row.check_wrong select {
box-shadow: none !important;
}
.w-form-row-group-wrapper {
display: flex;
flex-direction: column;
gap: 24px;
}
.w-form-row-group {
--w-form-row-group-gap: 24px;
display: grid;
gap: var(--w-form-row-group-gap);
}
.w-form-row-group.has-2-cols {
grid-template-columns: 1fr 1fr;
}
.w-form-row-group.has-3-cols {
grid-template-columns: 1fr 1fr 1fr;
}
.w-form-row-group.has-4-cols {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media only screen and (min-width: 600px) {
.w-form-row-group {
--w-form-row-group-gap: 24px;
}
}
.w-form-row-field {
display: flex;
flex-direction: column;
}
.w-form-row-field .mb-1 {
margin-bottom: 4px;
}
.w-form-row-field .mb-2 {
margin-bottom: 8px;
}
.w-form-row-field .mb-3 {
margin-bottom: 12px;
}
html {
scroll-behavior: smooth;
}
@media only screen and (max-width: 992px) {
html {
overflow-x: hidden;
}
}
body {
--bs-body-line-height: 1.7;
}
body:has(.memoary-dialog[open]) {
overflow: hidden;
}
.l-main .w-image {
border-radius: var(--border-radius);
}
.memoary-contact-info {
display: flex;
gap: 8px;
align-items: center;
}
.memoary-contact-info-svg-wrapper {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.memoary-contact-info-text {
color: var(--text-on-base-subtle-default, #46484F);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
.memoary-newsletter-grid {
position: relative;
}
.memoary-newsletter-grid p {
--memoary-newsletter-grid-columns: 1fr;
--memoary-newsletter-grid-gap: 12px;
display: grid;
grid-template-columns: var(--memoary-newsletter-grid-columns);
gap: var(--memoary-newsletter-grid-gap);
}
@media (min-width: 601px) {
.memoary-newsletter-grid p {
--memoary-newsletter-grid-columns: 1fr 124px;
--memoary-newsletter-grid-gap: 8px;
}
}
.memoary-newsletter-grid .wpcf7-form-control-wrap {
margin-top: 0 !important;
}
.memoary-newsletter-grid .wpcf7-spinner {
position: absolute;
bottom: 14px;
right: 25px;
}
.wpcf7-not-valid-tip {
font-size: 12px;
}
.wpcf7-response-output {
border-width: 1px !important;
border-radius: 6px;
margin-top: 12px !important;
font-size: 12px;
}
.wpcf7-form-control.wpcf7-submit {
max-height: 52px !important;
}
.profile-card {
--profile-card-bg: var(--color-content-bg-alt);
--profile-card-border: var(--color-content-border);
--profile-card-svg: var(--color-content-border);
--profile-card-border-radius: var(--element-border-radius);
--profile-card-image-wrapper-height: 315px;
--profile-card-name-color: var(--color-white);
position: relative;
background-color: var(--profile-card-bg);
overflow: hidden;
margin: 10px auto;
cursor: pointer;
border-radius: var(--profile-card-border-radius);
border: 1px solid var(--profile-card-border);
transform: none;
transition: all ease 0.25s;
}
.profile-card .profile-image-wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: var(--profile-card-image-wrapper-height);
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
filter: greyscale(100%);
opacity: 0.8;
overflow: hidden;
transform: scale(1);
transition: all ease 1.5s;
}
.profile-card .profile-name {
font-family: var(--h6-font-family, inherit);
font-weight: normal;
font-size: var(--h6-font-size, inherit);
line-height: var(--h6-line-height, 1.2);
color: var(--profile-card-name-color);
padding: 30px 20px 0 20px;
text-align: center;
}
.profile-card .profile-info {
color: var(--color-white);
font-size: 13px;
padding: 0 20px 20px 20px;
text-align: center;
}
.profile-card .profile-content {
position: absolute;
top: 65%;
left: 20px;
right: 20px;
color: var(--color-white);
font-size: 13px;
text-align: center;
transition: all ease 0.25s;
}
.profile-card:hover {
transform: translate(0px, -5px);
border: 1px solid var(--profile-card-bg);
box-shadow: 0px 10px 61px -25px rgba(0, 0, 0, 0.75);
}
.profile-card:hover .profile-image-wrapper {
filter: greyscale(0%);
transform: scale(1.025);
}
.profile-card.add-new {
--profile-card-image-wrapper-height: 293px;
--profile-card-name-color: var(--color-content-primary);
}
.profile-card.add-new .add-memoar-svg {
width: 100px;
fill: var(--color-content-primary);
}
.video-container {
--video-container-height: 525px;
position: relative;
width: 100%;
height: var(--video-container-height);
display: flex;
flex-wrap: wrap;
justify-content: center;
}
@media (min-width: 601px) {
.video-container {
--video-container-height: 608px;
}
}
.video-container-background-video {
width: 100%;
height: var(--video-container-height);
object-fit: cover;
position: absolute;
border-radius: 32px 0px 0px 32px;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
aspect-ratio: 59/38;
}
.video-container-mobile-image {
width: 100%;
height: var(--video-container-height);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
.video-container-mobile-image img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 59/38;
display: block;
}
.video-container-mobile-image::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(26, 27, 31, 0) 9.5%, rgba(26, 27, 31, 0.82) 85%, #1A1B1F 100%);
z-index: 1;
pointer-events: none;
}
.custom-button,
.w-btn.custom-button {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.custom-button.with-icon, .custom-button:has(.w-btn-icon),
.w-btn.custom-button.with-icon,
.w-btn.custom-button:has(.w-btn-icon) {
gap: 8px;
}
.w-btn-wrapper.memoary-btn-wrapper {
display: flex !important;
}
.w-btn-wrapper.memoary-btn-wrapper.align-desktop-left {
justify-content: flex-start;
}
.w-btn-wrapper.memoary-btn-wrapper.align-desktop-center {
justify-content: center;
}
.w-btn-wrapper.memoary-btn-wrapper.align-desktop-right {
justify-content: flex-end;
}
.w-btn-wrapper.memoary-btn-wrapper.align-desktop-justify .w-btn {
width: 100%;
}
@media (max-width: 600px) {
.w-btn-wrapper.memoary-btn-wrapper.align-mobile-left {
justify-content: flex-start;
}
.w-btn-wrapper.memoary-btn-wrapper.align-mobile-center {
justify-content: center;
}
.w-btn-wrapper.memoary-btn-wrapper.align-mobile-right {
justify-content: flex-end;
}
.w-btn-wrapper.memoary-btn-wrapper.align-mobile-justify .w-btn {
width: 100%;
}
}
.memoary-box {
--memoary-box-is-dark-background: var(--background-surface-inverse);
--memoary-box-is-grey-background: var(--background-surface-neutral);
--memoary-box-is-light-background: var(--background-surface-base);
--memoary-box-background: var(--memoary-box-is-light-background);
--memoary-box-title-color: var(--text-on-base-default);
--memoary-box-description-color: var(--text-on-base-subtle-default);
--memoary-box-padding-top: 24px;
--memoary-box-padding-bottom: 24px;
--memoary-box-flex-direction: column;
--memoary-box-padding-inline: 24px;
--memoary-box-gap: 24px;
--vwrapper-gap: 24px;
display: flex;
flex-direction: var(--memoary-box-flex-direction);
border-radius: var(--border-radius);
padding-inline: var(--memoary-box-padding-inline);
padding-top: var(--memoary-box-padding-top);
padding-bottom: var(--memoary-box-padding-bottom);
background: var(--memoary-box-background);
gap: var(--memoary-box-gap);
}
.memoary-box.is-dark {
--memoary-box-background: var(--memoary-box-is-dark-background);
--memoary-box-title-color: var(--text-on-inverse-default);
--memoary-box-description-color: var(--text-on-inverse-subtle-default);
}
.memoary-box.is-grey {
--memoary-box-background: var(--memoary-box-is-grey-background);
}
.memoary-box.is-light {
--memoary-box-background: var(--memoary-box-is-light-background);
}
.memoary-box.on-top {
--memoary-box-padding-top: 60px;
--memoary-box-padding-bottom: 32px;
--memoary-box-flex-direction: column;
min-height: 716px;
}
.memoary-box.on-right {
--memoary-box-flex-direction: column-reverse;
justify-content: space-between;
}
@media only screen and (min-width: 900px) {
.memoary-box.on-right {
--memoary-box-flex-direction: row;
}
}
@media only screen and (min-width: 600px) {
.memoary-box {
--memoary-box-padding-inline: 32px;
--memoary-box-padding-top: 60px;
--memoary-box-padding-bottom: 32px;
--memoary-box-gap: 32px;
--vwrapper-gap: 32px;
}
}
.memoary-box-content {
--memoary-box-content-gap: 16px;
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: space-between;
gap: var(--memoary-box-content-gap);
}
@media only screen and (min-width: 600px) {
.memoary-box-content {
--memoary-box-content-gap: 0;
}
}
.memoary-box-title {
color: var(--memoary-box-title-color);
margin-bottom: 24px;
}
.memoary-box-description {
color: var(--memoary-box-description-color);
min-height: 140px;
margin-bottom: 32px;
}
.memoary-box-image {
max-width: 328px;
max-height: 328px;
object-fit: contain;
}
.memoary-price-box {
--memoary-price-box-background: var(--background-surface-base-darker);
--memoary-price-box-badge-background: var(--background-button-on-base-secondary-hover);
--memoary-price-box-title-color: var(--text-on-base-default);
--memoary-price-box-description-color: var(--text-on-base-default);
--memoary-price-box-list-item-color: var(--text-on-base-default);
--memoary-price-box-padding: 24px;
display: flex;
padding: var(--memoary-price-box-padding);
flex-direction: column;
align-items: flex-start;
background: var(--memoary-price-box-background);
border-radius: var(--border-radius);
}
.memoary-price-box.is-dark {
--memoary-price-box-background: var(--background-surface-inverse);
--memoary-price-box-badge-background: var(--background-button-on-base-primary-default);
--memoary-price-box-title-color: var(--text-on-inverse-default);
--memoary-price-box-description-color: var(--text-on-inverse-subtle-default);
--memoary-price-box-list-item-color: var(--text-on-inverse-subtle-default);
}
@media only screen and (min-width: 600px) {
.memoary-price-box {
--memoary-price-box-padding: 32px;
}
}
.memoary-price-box-badge {
display: flex;
padding: 4px 12px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 33px;
background: var(--memoary-price-box-badge-background);
color: var(--text-on-base-default);
font-size: 16px;
line-height: 28px;
margin-bottom: 8px;
}
.memoary-price-box-title {
color: var(--memoary-price-box-title-color);
margin-bottom: 16px;
padding-top: 0;
}
.memoary-price-box-description {
color: var(--memoary-price-box-description-color);
margin-bottom: 32px;
}
.memoary-price-box-list {
list-style: none;
padding: 0;
margin: 0 0 48px 0;
}
.memoary-price-box-list-item {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
color: var(--memoary-price-box-list-item-color);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 32px;
letter-spacing: -0.09px;
}
.memoary-price-box-svg {
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
flex-shrink: 0;
}
.memoary-simple-box {
--memoary-simple-box-padding: 24px;
--memoary-simple-box-gap: 16px;
display: flex;
flex-direction: column;
gap: var(--memoary-simple-box-gap);
border-radius: var(--border-radius);
padding: var(--memoary-simple-box-padding);
background: var(--background-surface-base-darker);
min-height: 310px;
}
@media only screen and (min-width: 600px) {
.memoary-simple-box {
--memoary-simple-box-padding: 32px;
--memoary-simple-box-gap: 32px;
}
}
.memoary-simple-box-title {
--h5-margin-bottom: 0px;
color: var(--text-on-base-default);
padding-top: 0;
}
.memoary-simple-box-description {
color: var(--text-on-base-subtle-default);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
margin: 0;
}
.memoary-simple-box-image {
max-width: 48px;
max-height: 48px;
object-fit: contain;
margin-bottom: 8px;
}
.memoary-simple-box-link {
--memoary-simple-box-link-color: var(--background-button-on-base-primary-default);
display: flex;
gap: 8px;
align-items: center;
color: var(--memoary-simple-box-link-color);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.08px;
}
.memoary-simple-box-link:hover {
--memoary-simple-box-link-color: var(--background-button-on-base-primary-hover);
}
.memoary-simple-box-path {
fill: var(--memoary-simple-box-link-color);
}
.memoary-simple-box-buttons {
--memoary-simple-box-buttons-margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: var(--memoary-simple-box-buttons-margin-top);
}
@media only screen and (min-width: 600px) {
.memoary-simple-box-buttons {
--memoary-simple-box-buttons-margin-top: 16px;
}
}
.memoary-person {
--memoary-person-padding: 24px;
padding: var(--memoary-person-padding);
border-radius: var(--border-radius);
background: var(--background-surface-base-darker);
}
@media only screen and (min-width: 600px) {
.memoary-person {
--memoary-person-padding: 24px 32px 32px 32px;
}
}
.memoary-person-who {
display: flex;
gap: 16px;
align-items: center;
margin-bottom: 24px;
}
.memoary-person-image {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.memoary-person-info {
display: flex;
flex-direction: column;
}
.memoary-person-name {
padding: 0;
margin: 0;
}
.memoary-person-position {
color: var(--text-on-base-subtle-default);
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
.memoary-person-contact {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
color: var(--text-on-base-subtle-default);
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
.memoary-person-link {
margin-top: 32px;
}
.memoary-person-text {
color: var(--text-on-base-subtle-default);
font-size: 16px;
font-weight: 400;
line-height: 28px;
margin-bottom: 24px;
}
.memoary-tag-list.w-grid.type_grid .w-grid-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.w-sharing-tooltip.active .w-sharing-list:not(:empty) {
background: #1a1b1f;
border-radius: 16px;
overflow: hidden;
}
.memoary-share-popup .w-popup-box {
width: 250px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
overflow: hidden;
}
.memoary-blog-items {
--blog-item-border: var(--color-content-border);
}
.memoary-blog-items article > .w-grid-item-h {
border: 1px solid var(--blog-item-border);
}
blockquote {
position: relative;
padding: 32px 0 16px 0;
border-bottom: 1px solid var(--background-surface-neutral);
}
blockquote > * {
color: var(--text-on-base-default);
text-align: center;
font-size: 20px;
font-weight: 400;
line-height: 32px;
letter-spacing: -0.24px;
}
blockquote::before {
position: absolute;
top: 0;
left: 0;
content: "";
background: var(--background-surface-neutral);
width: 100%;
height: 1px;
opacity: 1;
}
blockquote::after {
position: absolute;
content: "";
display: block;
width: 32px;
height: 32px;
background: url(https://memoary.cz/wp-content/uploads/2025/08/quote.svg);
opacity: 1;
top: -32px;
left: 50%;
transform: translateX(-50%);
border: 16px solid white;
}
.w-filter.state_mobile .w-filter-list {
padding: 24px;
}
.w-filter.state_desktop.layout_hor .w-filter-list,
.w-filter.state_desktop.layout_hor .w-filter-item,
.w-filter-item-content {
width: 100%;
}
.w-filter.state_desktop.layout_hor .w-filter-list {
display: block;
}
.memoary-filter-tags .w-filter-item.type_radio .w-filter-item-values {
display: flex;
flex-wrap: wrap;
overflow: visible;
gap: 8px;
max-height: unset !important;
}
.memoary-filter-tags .w-filter-item.type_radio .w-filter-item-values .w-filter-item-value {
display: flex;
height: 36px;
color: var(--text-on-base-default);
font-size: 16px;
font-style: normal;
font-weight: 400;
border-radius: 33px;
background: var(--background-button-on-base-secondary-hover);
padding: 4px 12px;
}
.memoary-filter-tags .w-filter-item.type_radio .w-filter-item-values .w-filter-item-value.active {
background: var(--background-button-on-base-primary-default);
}
.memoary-filter-tags .w-filter-item.type_radio .w-filter-item-values .w-filter-item-value.active:hover {
background: #D9A68E;
}
.memoary-filter-tags .w-filter-item.type_radio .w-filter-item-values .w-filter-item-value > label input {
width: 0;
height: 0;
margin: 0;
padding: 0;
}
.memoary-filter-tags .w-filter-item.type_radio .w-filter-item-values .w-filter-item-value:hover {
background: #f0f1f5;
color: var(--text-on-base-default);
}
.memoary-post-content a {
text-decoration: underline;
}
.memoary-post-content a:hover {
text-decoration: none;
}
.memoary-post-content img {
border-radius: var(--border-radius);
}
.memoary-post-content .wp-caption-text {
font-size: 14px;
margin: 8px 0 0 0;
}
.w-gallery-list {
--items-gap: 16px;
}
.w-gallery-item {
border-radius: 16px;
overflow: hidden;
}
input:checked ~ .w-filter-item-value-label {
font-weight: 400;
}
.g-loadmore {
min-height: 0 !important;
margin-top: 0 !important;
}
.w-grid > .pagination {
padding-top: 16px;
margin-top: 16px !important;
border-top: 1px solid #dcdde1;
}
@media (min-width: 600px) {
.w-grid > .pagination {
margin-top: 32px !important;
}
}
@media (min-width: 600px) {
.pagination .nav-links {
justify-content: flex-end !important;
}
}
.post_navigation.layout_simple a.post_navigation-item {
border-radius: 6px;
border: 1px solid var(--background-button-on-base-primary-default, #D19173);
padding: 12px 2.2rem;
}
.post_navigation-item-meta {
display: block;
opacity: 1;
color: var(--text-button-on-base-secondary);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.08px;
}
.post_navigation.layout_simple .post_navigation-item-title {
display: none;
}
.post_navigation-item:hover {
background: var(--background-button-on-base-secondary-hover, rgba(26, 27, 31, 0.08));
}
.post_navigation-item.to_prev .post_navigation-item-arrow {
position: absolute;
top: 50%;
left: 10px !important;
transform: translateY(-62%);
font-size: 2em;
line-height: 1;
opacity: 1;
}
.post_navigation-item.to_prev .post_navigation-item-arrow::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.71289 9.7002L12.7129 1.7002L13.5137 2.2998L7.73828 10L13.5137 17.7002L12.7129 18.2998L6.71289 10.2998L6.48828 10L6.71289 9.7002Z' fill='%231A1B1F'/%3E%3C/svg%3E") !important;
width: 20px;
height: 20px;
}
.post_navigation-item.to_next .post_navigation-item-arrow {
position: absolute;
top: 50%;
right: 10px !important;
transform: translateY(-62%);
font-size: 2em;
line-height: 1;
opacity: 1;
}
.post_navigation-item.to_next .post_navigation-item-arrow:hover {
background: var(--background-button-on-base-secondary-hover, rgba(26, 27, 31, 0.08));
}
.post_navigation-item.to_next .post_navigation-item-arrow::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.28906 1.7002L13.2891 9.7002L13.5137 10L13.2891 10.2998L7.28906 18.2998L6.48828 17.7002L12.2637 10L6.48828 2.2998L7.28906 1.7002Z' fill='%231A1B1F'/%3E%3C/svg%3E") !important;
width: 20px;
height: 20px;
}
.post_author.avapos_left {
display: flex;
align-items: center;
}
.post_author.avapos_left .post-author-ava {
flex-shrink: 0;
margin-right: 0.25em;
margin-bottom: 0;
}
.form-header {
--form-header-margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: var(--form-header-margin-bottom);
}
@media (min-width: 670px) {
.form-header {
--form-header-margin-bottom: 48px;
}
}
.form-title-container {
--form-title-container-padding-inline: 24px;
padding-inline: var(--form-title-container-padding-inline);
}
@media (min-width: 670px) {
.form-title-container {
--form-title-container-padding-inline: 72px;
}
}
.form-title {
padding: 0;
}
.form-subtitle {
color: var(--Brown-600, #b6846d);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 28px;
letter-spacing: 2.8px;
text-transform: uppercase;
margin: 0 0 16px;
} .progress-container {
--progress-container-margin-right: 24px;
margin-right: var(--progress-container-margin-right);
width: 64px;
height: 64px;
position: relative;
}
@media (min-width: 670px) {
.progress-container {
--progress-container-margin-right: 72px;
}
}
.progress-ring {
transform: rotate(-90deg);
}
.progress-ring circle {
fill: transparent;
stroke-width: 4;
}
.progress-ring .bg {
stroke: var(--background-button-on-base-primary-disabled);
}
.progress-ring .progress {
stroke: var(--background-button-on-base-primary-default);
stroke-linecap: round;
transition: stroke-dashoffset 0.4s;
}
.indicator-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.9rem;
}
.step-indicator {
color: var(--text-on-base-disabled);
text-align: center;
font-variant-numeric: lining-nums tabular-nums;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.step-indicator-current {
color: var(--text-on-base-default);
} .steps {
--memoary-steps-padding-block: 24px;
--memoary-steps-padding-inline: 24px;
border-radius: 32px;
background: var(--background-surface-base);
max-width: var(--container-width-medium-Small, 800px);
padding-block: var(--memoary-steps-padding-block);
padding-inline: var(--memoary-steps-padding-inline);
}
@media (min-width: 670px) {
.steps {
--memoary-steps-padding-block: 72px;
--memoary-steps-padding-inline: 72px;
}
}
.step {
display: none;
}
.step.active {
--step-active-gap: 24px;
display: flex;
gap: var(--step-active-gap);
flex-direction: column;
}
@media (min-width: 670px) {
.step.active {
--step-active-gap: 24px;
}
}
input.error,
textarea.error {
border-color: red;
}
.error-msg {
color: red;
font-size: 12px;
} .dropzone {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
padding: 32px;
text-align: center;
padding: 32px;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 6px;
border: 1px dashed var(--border-button-on-base-primary-disabled, #dcdde1);
background: var(--background-inputs-on-base, rgba(26, 27, 31, 0.08));
color: var(--text-on-base-default, #1a1b1f);
text-align: center;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.dropzone-icon {
display: flex;
padding: 16px;
align-items: center;
border-radius: 100px;
border: 1px solid var(--icon-button-on-base-primary-disabled, #87888d);
}
.thumb-item {
display: grid;
grid-template-columns: 48px 1fr auto;
padding: 16px;
gap: 8px;
border-radius: 6px;
border: 1px solid var(--border-button-on-base-primary-disabled, #dcdde1);
}
.thumbnail-img {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 4px;
background-color: lightgray;
}
.thumbnail-meta {
color: var(--text-on-base-default, #1a1b1f);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
.thumbnail-remove-btn {
width: 20px;
height: 20px;
background: transparent;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
}
.nav-buttons {
--nav-buttons-margin-top: 32px;
display: flex;
flex-direction: column-reverse;
gap: 12px;
margin-top: var(--nav-buttons-margin-top);
padding: 0 var(--Padding-OuterPaper-horizontal, 24px);
}
@media (min-width: 768px) {
.nav-buttons {
--nav-buttons-margin-top: 48px;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 0;
padding: 0 var(--Padding-OuterPaper-horizontal, 72px);
}
}
.milestone-main {
--milestone-main-gap: 16px;
display: grid;
gap: var(--milestone-main-gap);
margin-bottom: 16px;
}
.milestone-main .empty-message-title {
margin-bottom: 0;
}
.milestone-main .empty-message-desc {
color: var(--text-on-base-subtle-default, #46484F);
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
.milestone-main.empty {
text-align: center;
}
@media (min-width: 600px) {
.milestone-main {
--milestone-main-gap: 32px;
}
}
.category-box {
--category-box-padding: 24px;
border-radius: 16px;
background: var(--background-surface-base-darker, #F0F1F5);
padding: var(--category-box-padding);
}
@media (min-width: 768px) {
.category-box {
--category-box-padding: 24px 32px 32px 32px;
}
}
.category-header {
position: relative;
}
.category-edit {
position: absolute;
top: 0;
right: 32px;
background: transparent;
border: none;
padding: 8px;
cursor: pointer;
}
.category-delete {
position: absolute;
top: 0;
right: 0;
background: transparent;
border: none;
padding: 8px;
cursor: pointer;
}
.milestone-row {
position: relative;
}
.milestone-edit {
position: absolute;
top: 0;
right: 32px;
background: transparent;
border: none;
padding: 8px;
cursor: pointer;
}
.milestone-delete {
position: absolute;
top: 0;
right: 0;
background: transparent;
border: none;
padding: 8px;
cursor: pointer;
}
.milestone-info {
padding-right: 40px;
}
.milestone-list {
display: grid;
gap: 32px;
}
.milestone-row {
border-bottom: 1px solid #dcdde1;
padding-bottom: 16px;
margin-bottom: 16px;
}
.milestone-row:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.milestone-date {
color: var(--text-on-base-active);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
margin-bottom: 4px;
}
.milestone-name {
color: var(--text-on-base-subtle-default);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
.final-message {
--final-message-padding-inline: 24px;
--final-message-padding-block: 16px 24px;
border-radius: 16px;
background: var(--background-surface-base-darker);
padding-inline: var(--final-message-padding-inline);
padding-block: var(--final-message-padding-block);
margin-bottom: 32px;
}
@media (min-width: 768px) {
.final-message {
--final-message-padding-inline: 32px;
--final-message-padding-block: 24px 32px;
}
}
.final-note {
color: var(--text-on-base-subtle-default, #46484F);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.price-summary-section {
--price-summary-section-padding: 24px;
border-radius: 16px;
background: var(--background-surface-base-darker);
padding: var(--price-summary-section-padding);
}
.price-summary-section h5 {
margin-bottom: 24px;
}
@media (min-width: 768px) {
.price-summary-section {
--price-summary-section-padding: 24px 32px;
}
}
.price-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.price-row.price-total {
border-top: 1px solid #dcdde1;
margin-top: 8px;
padding-top: 16px;
font-weight: 600;
}
.price-row.price-total .price-label {
color: var(--text-on-base-default, #1A1B1F);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px; letter-spacing: -0.09px;
}
.price-row.price-total .price-value {
color: var(--text-on-base-default, #1A1B1F);
text-align: right;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px; letter-spacing: -0.09px;
}
.price-label {
font-size: 16px;
font-weight: 400;
line-height: 28px;
color: var(--text-on-base-subtle-default);
}
.price-value {
font-size: 16px;
font-weight: 500;
line-height: 28px;
color: var(--text-on-base-default);
text-align: right;
}
.selected-services-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.selected-services-list .price-label {
font-size: 14px;
color: var(--text-on-base-subtle);
}
.selected-services-list .price-value {
font-size: 14px;
}
.thumbnail {
display: flex;
flex-direction: column;
gap: 16px;
}
.memoary-divider {
border-top: 1px solid #dcdde1;
}
.memoary-info-box {
display: flex;
padding: 8px 12px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 33px;
background: rgba(209, 145, 115, 0.5);
margin: 16px 0;
font-size: 14px;
line-height: 1.5;
}
.memoary-info-box svg {
flex: 0 0 auto;
}
.voiceover-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
}
.voiceover-item-label {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
margin: 0;
cursor: pointer;
}
.voiceover-play-btn {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 5px;
}
#wp-smutecni-oznameni-wrap,
#wp-loucim-se-wrap {
margin-bottom: 10px;
}
.memoary-accordeon-section {
border-color: rgba(26, 27, 31, 0.08);
}
.memoary-accordeon-section-header {
gap: 16px;
padding: 1.2em 16px 1.2em 0;
}
.memoary-accordeon-section-header-title {
color: var(--text-on-base-default, #1a1b1f);
}
.w-tabs.memoary-accordeon > div > div > .memoary-accordeon-section-content {
padding: 16px 16px 24px 16px;
color: var(--text-on-base-subtle-default, #46484f);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
.no-touch .memoary-accordeon .w-tabs-section-header:hover,
.no-touch .memoary-accordeon .w-tabs-section-header:focus {
background: rgba(0, 0, 0, 0.01);
}
.w-tabs.accordion > div > .w-tabs-section.memoary-accordeon-section:last-of-type {
border-bottom-width: 0;
}
.memoary-osnova-wrapper {
margin: 0 0 32px 0;
}
.memoary-osnova-wrapper .w-accordion {
border: 1px solid var(--color-content-link);
border-radius: 8px;
overflow: hidden;
}
.memoary-osnova-wrapper .w-accordion-item {
border-bottom: 1px solid rgba(26, 27, 31, 0.08);
}
.memoary-osnova-wrapper .w-accordion-item:last-child {
border-bottom: none;
}
.memoary-osnova-wrapper .w-accordion-item.is-active .w-accordion-item-arrow {
transform: rotate(180deg);
}
.memoary-osnova-wrapper .w-accordion-item-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
cursor: pointer;
transition: background-color 0.2s ease;
user-select: none;
}
.memoary-osnova-wrapper .w-accordion-item-header:hover {
background-color: rgba(0, 0, 0, 0.02);
}
.memoary-osnova-wrapper .w-accordion-item-title {
font-size: 18px;
font-weight: 600;
color: var(--text-on-base-default, #1a1b1f);
}
.memoary-osnova-wrapper .w-accordion-item-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
transition: transform 0.3s ease;
color: var(--text-on-base-subtle-default, #46484f);
}
.memoary-osnova-wrapper .w-accordion-item-content {
overflow: hidden;
}
.memoary-osnova-wrapper .w-accordion-item-body {
padding: 0 24px 24px 24px;
max-height: 600px;
overflow-y: auto;
}
.memoary-osnova-list {
list-style: none;
margin: 0;
padding: 0;
}
.memoary-osnova-list ul {
list-style: none;
margin: 8px 0 0 0;
padding: 0 0 0 20px;
}
.memoary-osnova-list li {
margin: 0;
padding: 0;
}
.memoary-osnova-item {
margin-bottom: 8px;
}
.memoary-osnova-item:last-child {
margin-bottom: 0;
}
.memoary-osnova-item .memoary-osnova-item {
margin-top: 8px;
}
.memoary-osnova-link {
display: inline-block;
padding: 6px 0;
color: var(--color-primary, #d19173);
text-decoration: none;
font-size: 16px;
line-height: 24px;
transition: all 0.2s ease;
position: relative;
}
.memoary-osnova-link::before {
content: "";
position: absolute;
left: 0;
bottom: 4px;
width: 0;
height: 1px;
background-color: currentColor;
transition: width 0.2s ease;
}
.memoary-osnova-link:hover {
color: var(--color-primary-hover, #b6846d);
}
.memoary-osnova-link:hover::before {
width: 100%;
}
.memoary-osnova-list > .memoary-osnova-item > .memoary-osnova-link {
font-weight: 600;
font-size: 16px;
}
.memoary-osnova-list ul .memoary-osnova-link {
font-weight: 400;
font-size: 15px;
}
.memoary-osnova-list ul ul .memoary-osnova-link {
font-size: 14px;
opacity: 0.9;
}
.memoary-blog-title {
margin-bottom: 16px;
}
.memoary-blog {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 48px;
}
.memoary-card-blog {
--memoary-card-blog-background: var(--background-surface-base-darker);
--memoary-card-blog-icon-transform: translate(0, -50%);
position: relative;
display: flex;
align-items: center;
gap: 16px;
align-self: stretch;
border-radius: var(--border-radius);
background: var(--memoary-card-blog-background);
padding-right: 24px;
}
.memoary-card-blog:hover {
--memoary-card-blog-icon-transform: translate(10px, -50%);
}
.memoary-card-blog-image {
width: 70px;
min-height: 90px;
border-radius: var(--border-radius);
overflow: hidden;
background-blend-mode: color, normal, normal;
}
.memoary-card-blog-content {
padding-block: 16px;
}
.memoary-card-blog-content-link.no-touch:hover, .memoary-card-blog-content-link:hover,
.memoar-blog-post-link.no-touch:hover,
.memoar-blog-post-link:hover {
text-decoration: none;
}
.memoary-card-blog-name {
color: var(--text-on-base-default);
margin-bottom: 4px;
}
.memoary-card-blog-info,
.memoar-blog-post-info {
display: flex;
gap: 16px;
align-self: stretch;
}
.memoary-card-blog-date,
.memoar-blog-post-date {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-on-base-subtle-default);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.memoary-card-blog-icon {
position: absolute;
right: 24px;
top: 50%;
transform: var(--memoary-card-blog-icon-transform);
transition: all 0.3s ease;
}
.memoar-blog-posts {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 48px;
}
.memoar-blog-post {
--memoar-blog-post-background: var(--background-surface-base-darker);
padding: 24px 32px 32px 32px;
border-radius: var(--border-radius);
background: var(--memoar-blog-post-background, #F0F1F5);
}
.memoar-blog-post-name {
--h5-margin-bottom: 0;
}
.memoar-blog-post-content {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 24px;
margin-bottom: 48px;
}
.memoar-blog-post-content-item-dt {
--memoar-blog-post-content-item-dt: var(--text-on-base-subtle-default);
color: var(--memoar-blog-post-content-item-dt);
font-size: 14px;
line-height: 24px;
margin-bottom: 4px;
}
.memoar-blog-post-content-dd {
--memoar-blog-post-content-dd: var(--text-on-base-default);
color: var(--memoar-blog-post-content-dd);
font-size: 16px;
line-height: 28px;
margin-left: 0;
}
.memoary-blog-repeater-list {
--memoar-blog-repeater-background: var(--background-surface-base-darker);
padding: 24px 32px 32px;
border-radius: var(--border-radius);
background: var(--memoar-blog-repeater-background, #f0f1f5);
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 24px;
margin-bottom: 48px;
}
.memoary-blog-repeater-title {
--memoar-blog-repeater-content-item-dt: var(--text-on-base-subtle-default);
color: var(--memoar-blog-repeater-content-item-dt);
font-size: 14px;
line-height: 24px;
margin-bottom: 4px;
margin-left: 0;
}
.memoary-blog-repeater-description {
--memoar-blog-repeater-content-dd: var(--text-on-base-default);
color: var(--memoar-blog-repeater-content-dd);
font-size: 16px;
line-height: 28px;
margin-left: 0;
}
.memoary-grid {
--memoary-grid-columns: 1;
--memoary-grid-gap: 16px;
display: grid;
gap: var(--memoary-grid-gap);
grid-template-columns: repeat(var(--memoary-grid-columns), 1fr);
margin-bottom: 16px;
}
@media (min-width: 320px) {
.memoary-grid {
--memoary-grid-columns: 2;
--memoary-grid-gap: 16px;
margin-bottom: 16px;
}
}
@media (min-width: 1024px) {
.memoary-grid {
--memoary-grid-columns: 4;
--memoary-grid-gap: 32px;
}
}
.memoary-hp-card {
--memoary-hp-image-background: var(--background-surface-base-darker);
--memoary-hp-image-filter: grayscale(0%);
--memoary-hp-image-box-shadow: 0 8px 24px 0 rgba(38, 26, 9, 0);
--memoary-hp-date-color: var(--text-on-base-subtle-default);
position: relative;
display: flex;
flex-direction: column;
padding-bottom: 16px;
width: 100%;
}
@media (hover: hover) {
.memoary-hp-card {
--memoary-hp-image-filter: grayscale(100%);
}
.memoary-hp-card:hover {
--memoary-hp-image-filter: grayscale(0%);
--memoary-hp-image-box-shadow: 0 8px 24px 0 rgba(38, 26, 9, 0.15);
}
}
.memoary-hp-image-wrapper {
position: relative;
margin-bottom: 16px;
}
.memoary-hp-image {
width: 100%;
height: 350px;
aspect-ratio: 35/44;
border-radius: var(--border-radius);
background-color: var(--memoary-hp-image-background);
background-size: cover;
background-position: center;
filter: var(--memoary-hp-image-filter);
transition: all 0.3s ease-in-out;
box-shadow: var(--memoary-hp-image-box-shadow);
}
@media (min-width: 320px) and (max-width: 1023px) {
.memoary-hp-image {
height: auto;
}
}
.memoary-hp-badge {
--_memoary-hp-badge-position: 12px;
position: absolute;
bottom: var(--_memoary-hp-badge-position);
right: var(--_memoary-hp-badge-position);
}
@media (min-width: 400px) {
.memoary-hp-badge {
--_memoary-hp-badge-position: 16px;
}
}
.memoary-badge {
--memoary-badge-background: var(--background-button-on-base-primary-default);
--memoary-badge-color: var(--text-on-base-default);
display: flex;
padding: 2px 12px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 33px;
background: var(--memoary-badge-background);
color: var(--memoary-badge-color);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.memoary-badge.is-dark {
--memoary-badge-background: var(--background-button-on-inverse-secondary-hover);
--memoary-badge-color: var(--text-on-inverse-default);
}
.memoary-hp-name {
--memoary-hp-name-margin-bottom: 8px;
margin-bottom: var(--memoary-hp-name-margin-bottom) !important;
}
@media (min-width: 400px) {
.memoary-hp-name {
--memoary-hp-name-margin-bottom: 4px;
}
}
.memoary-hp-info {
--memoary-hp-info-gap: 0;
--memoary-hp-flex-direction: column;
display: flex;
gap: var(--memoary-hp-info-gap);
align-self: stretch;
flex-wrap: wrap;
flex-direction: var(--memoary-hp-flex-direction);
}
@media (min-width: 400px) {
.memoary-hp-info {
--memoary-hp-info-gap: 16px;
--memoary-hp-flex-direction: row;
}
}
.memoary-hp-date {
--memoary-hp-date-font-size: 12px;
--memoary-hp-date-line-height: 20px;
--memoary-hp-date-gap: 4px;
display: flex;
align-items: center;
gap: var(--memoary-hp-date-gap);
color: var(--memoary-hp-date-color);
font-size: var(--memoary-hp-date-font-size);
font-style: normal;
font-weight: 400;
line-height: var(--memoary-hp-date-line-height);
}
@media (min-width: 320px) and (max-width: 1023px) {
.memoary-hp-date {
font-size: 12px;
gap: 4px;
}
}
@media (min-width: 400px) {
.memoary-hp-date {
--memoary-hp-date-font-size: 14px;
--memoary-hp-date-line-height: 24px;
--memoary-hp-date-gap: 8px;
}
}
.memoary-hp-link {
color: var(--text-on-base-default);
}
@media (hover: hover) {
.memoary-hp-link:hover {
text-decoration: none !important;
}
}
.memoary-pagination {
--page-numbers-border-color: transparent;
padding-top: 16px;
border-top: 1px solid #dcdde1;
}
.memoary-pagination ul.page-numbers {
display: flex;
width: 100%;
justify-content: flex-end;
gap: 2px;
align-self: stretch;
padding-left: 0;
margin-left: 0;
list-style: none;
}
.memoary-pagination ul.page-numbers li {
margin-bottom: 0;
list-style: none;
}
.memoary-pagination ul.page-numbers li::marker {
display: none;
content: "";
}
a.page-numbers,
span.page-numbers {
--_page-numbers-size: 44px;
--page-numbers-border-color: transparent;
display: flex;
min-width: var(--_page-numbers-size);
height: var(--_page-numbers-size);
padding: 12px;
justify-content: center;
align-items: center;
background: transparent !important;
border-radius: 6px;
border: 1px solid var(--page-numbers-border-color);
color: var(--text-button-on-base-secondary);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.08px;
text-decoration: none !important;
}
a.page-numbers::before,
span.page-numbers::before {
display: none;
}
a.page-numbers.current,
span.page-numbers.current {
--page-numbers-border-color: var(--background-button-on-base-primary-default);
}
@media (hover: hover) {
a.page-numbers:hover,
span.page-numbers:hover {
--page-numbers-border-color: var(--background-button-on-base-primary-default);
color: var(--text-button-on-base-secondary);
text-decoration: none !important;
}
}
.page-numbers-svg {
fill: var(--icon-button-on-base-secondary);
}
.page-numbers-svg path {
fill: var(--icon-button-on-base-secondary);
}
.memoary-advanced-form-group {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 24px;
}
@media only screen and (min-width: 600px) {
.memoary-advanced-form-group {
flex-wrap: nowrap;
margin-bottom: 24px;
}
}
.memoary-toggle-group {
--memoary-toggle-group-transition-duration: 0.3s;
--memoary-toggle-group-easing: ease;
--memoary-toggle-group-opacity: 0;
--memoary-toggle-group-hidden-translate: -10px;
--memoary-toggle-group-visible-translate: 0;
--memoary-toggle-group-max-height: 0;
position: relative;
z-index: 1;
opacity: var(--memoary-toggle-group-opacity);
max-height: var(--memoary-toggle-group-max-height);
overflow: hidden;
transform: translateY(var(--memoary-toggle-group-hidden-translate));
transition: opacity var(--memoary-toggle-group-transition-duration) var(--memoary-toggle-group-easing), max-height var(--memoary-toggle-group-transition-duration) var(--memoary-toggle-group-easing), transform var(--memoary-toggle-group-transition-duration) var(--memoary-toggle-group-easing);
}
.memoary-toggle-group.is-shown {
--memoary-toggle-group-opacity: 1;
--memoary-toggle-group-max-height: 500px;
transform: translateY(var(--memoary-toggle-group-visible-translate)) !important;
overflow: visible;
}
.memoary-advanced-form-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
margin-top: 24px;
flex-direction: column-reverse;
}
@media only screen and (min-width: 600px) {
.memoary-advanced-form-buttons {
justify-content: flex-end;
flex-direction: row;
}
}
@media only screen and (max-width: 600px) {
.memoary-advanced-form-buttons button,
.memoary-advanced-form-buttons a {
flex: 1 1 auto;
}
}
.memoary-advanced-form-toggle-btn {
--memoary-advanced-form-toggle-svg-rotation: 180deg;
}
.memoary-advanced-form-toggle-btn.is-active {
--memoary-advanced-form-toggle-svg-rotation: 0deg;
}
.memoary-advanced-form-toggle-btn .memoary-advanced-form-toggle-svg {
transform: rotate(var(--memoary-advanced-form-toggle-svg-rotation));
transition: rotate 0.3s ease;
}
.memoary-total-results {
color: var(--text-on-base-disabled, #87888D);
font-size: 14px;
font-style: normal;
font-weight: 400;
}
.select2-container--sorting {
--select2-sorting-results-option-color: var(--text-on-base-default);
--select2-sorting-results-option-background: var(--background-surface-base);
}
.select2-container--sorting .select2-selection--single {
display: flex;
align-items: center;
}
.select2-container--sorting .select2-selection--single::after {
content: "";
position: absolute;
top: 50%;
right: 0.75rem;
width: 16px;
height: 16px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M13.6699 6.37598L13.999 6.75293L8.3291 11.7139L7.99902 12.002L7.66992 11.7139L2 6.75293L2.3291 6.37598L2.6582 6L8 10.6738L13.3408 6L13.6699 6.37598Z' fill='%23B6846D'/></svg>") no-repeat center;
background-size: contain;
transform: translateY(-50%);
pointer-events: none;
margin: 0;
border: 0;
}
.select2-container--sorting .select2-selection--single .select2-selection__rendered {
color: var(--text-on-base-active);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.08px;
}
.select2-container--sorting .select2-dropdown {
margin-top: 30px;
border-radius: 12px;
background: var(--background-surface-base);
box-shadow: 0 8px 24px 0 rgba(38, 26, 9, 0.15);
padding: 8px;
border: none;
}
.select2-container--sorting .select2-dropdown .select2-results__option {
color: var(--select2-sorting-results-option-color);
background: var(--select2-sorting-results-option-background);
border-radius: 6px;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.08px;
margin: 0;
padding: 8px;
transition: background 0.2s ease-in-out;
}
.select2-container--sorting .select2-dropdown .select2-results__option--highlighted {
--select2-sorting-results-option-background: var(--background-inputs-on-base);
}
.datepicker-wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.datepicker-wrap input {
width: 100%;
padding-right: 40px;
}
.datepicker-wrap .datepicker-icon {
position: absolute;
right: 10px;
display: flex;
align-items: center;
pointer-events: none;
}
.air-datepicker {
--adp-background-color: var(--background-surface-base);
--adp-border-color: transparent;
--adp-border-radius: 16px;
--adp-box-shadow: 0 8px 24px 0 rgba(38, 26, 9, 0.15);
--adp-font-family: inherit;
--adp-font-size: 14px;
--adp-color: var(--text-on-base-default);
--adp-accent-color: var(--background-button-on-base-primary-default);
--adp-color-secondary: var(--text-body-on-base-secondary);
--adp-nav-arrow-color: var(--text-body-on-base-secondary);
--adp-nav-color-secondary: var(--text-body-on-base-secondary);
--adp-day-name-color: var(--text-body-on-base-secondary);
--adp-cell-border-radius: 50%;
--adp-cell-background-color-hover: rgba(209, 145, 115, 0.1);
--adp-cell-background-color-selected: var(--background-button-on-base-primary-default);
--adp-cell-background-color-selected-hover: var(--background-button-on-base-primary-default);
--adp-cell-border-color-hover: transparent;
--adp-cell-border-color-selected: var(--background-button-on-base-primary-default);
--adp-color-current-date: var(--background-button-on-base-primary-default);
}
.air-datepicker-nav--title {
font-weight: 600;
font-size: 15px;
}
.air-datepicker-cell.-month-,
.air-datepicker-cell.-year- {
border-radius: 8px;
}
.air-datepicker-cell.-other-month- {
opacity: 0.5;
}
.air-datepicker-body--day-names {
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
}
.air-datepicker-nav--action svg {
fill: #1A1B1F !important;
}
.air-datepicker-nav--action path {
fill: #1A1B1F !important;
}
.memoary-button-group {
--memoary-button-group-display: flex;
display: var(--memoary-button-group-display);
gap: 4px;
align-items: center;
padding: 4px;
border-radius: 8px;
background: var(--background-inputs-on-base);
}
@media only screen and (min-width: 600px) {
.memoary-button-group {
--memoary-button-group-display: inline-flex;
}
}
.memoary-button-group a,
.memoary-button-group button {
flex: 1 1 auto;
}
.memoary-dialog {
--memoary-dialog-padding-inline: 24px;
--memoary-dialog-padding-block: 24px;
position: relative;
max-width: var(--dialog-width-medium);
border: none;
border-radius: 32px;
background: var(--background-surface-base);
padding: 0;
box-sizing: border-box;
flex-direction: column;
max-height: 97vh;
overflow: visible;
}
.memoary-dialog::backdrop {
background: rgba(26, 27, 31, 0.75);
backdrop-filter: blur(10px);
}
@media (min-width: 768px) {
.memoary-dialog {
--memoary-dialog-padding-inline: 74px;
--memoary-dialog-padding-block: 62px;
min-width: 600px;
}
}
.memoary-dialog[open] {
display: flex;
}
.memoary-dialog-close-btn {
position: absolute;
top: 26px;
right: 26px;
background: transparent;
border: none;
cursor: pointer;
}
.memoary-dialog-content {
display: grid;
gap: 24px;
padding-block: var(--memoary-dialog-padding-block);
}
.memoary-dialog-content {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 0;
padding-inline: var(--memoary-dialog-padding-inline);
overflow-y: auto;
}
#mottoModal {
max-width: 900px;
}
.dialog-form {
display: grid;
gap: 24px;
}
.filterable-area {
--filterable-area-max-height: 65vh;
display: flex;
flex-direction: column;
border-radius: 16px;
border: 1px solid var(--Neutral-200, #dcdde1);
overflow: hidden;
max-height: var(--filterable-area-max-height);
}
.filterable-area-filter {
--filterable-area-filter-padding: 24px;
padding: var(--filterable-area-filter-padding);
background: var(--background-surface-base-darker);
height: 50%;
min-height: 5vh;
overflow-y: auto;
}
@media (min-width: 768px) {
.filterable-area-filter {
--filterable-area-filter-padding: 32px;
}
}
.filterable-area-resizer {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 32px;
cursor: row-resize;
background: var(--background-surface-base-darker);
border-top: 1px solid var(--Neutral-200, #dcdde1);
border-bottom: 1px solid var(--Neutral-200, #dcdde1);
touch-action: none;
user-select: none;
-webkit-user-select: none;
color: var(--text-on-base-subtle-default, #87888d);
transition: background-color 0.15s, color 0.15s;
}
.filterable-area-resizer:hover, .filterable-area-resizer.is-dragging {
background: rgba(209, 145, 115, 0.12);
color: var(--text-on-base-default, #1a1b1f);
}
@media (min-width: 901px) {
.filterable-area-resizer {
display: none;
}
}
.filterable-area-content {
--filterable-area-content-padding: 24px;
padding: var(--filterable-area-content-padding);
background: var(--background-surface-base);
height: 50%;
min-height: 5vh;
overflow-y: auto;
}
@media (min-width: 768px) {
.filterable-area-content {
--filterable-area-content-padding: 32px;
}
}
@media (min-width: 900px) {
.filterable-area {
display: grid;
grid-template-columns: 340px 1fr;
max-height: var(--filterable-area-max-height);
}
.filterable-area-filter,
.filterable-area-content {
height: auto;
max-height: var(--filterable-area-max-height);
}
}
.filterable-btns {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.filterable-btn {
display: flex;
padding: 4px 12px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 33px;
background: var(--background-button-on-base-secondary-hover, rgba(26, 27, 31, 0.08));
color: var(--text-on-base-default, #1a1b1f);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
.filterable-btn.is-active {
background: var(--background-button-on-base-primary-default, #d19173);
}
.btn-sablona,
.btn-motto {
--btn-sablona-icon-fill: #87888d;
position: relative;
display: flex;
flex-direction: column;
padding: 12px 16px;
text-align: left;
justify-content: center;
align-items: flex-start;
align-self: stretch;
border-radius: 8px;
background: var(--background-button-on-base-secondary-hover);
height: 75px;
}
.btn-sablona .btn-sablona-icon,
.btn-sablona .btn-motto-icon,
.btn-motto .btn-sablona-icon,
.btn-motto .btn-motto-icon {
position: absolute;
top: 12px;
right: 16px;
fill: var(--btn-sablona-icon-fill);
}
.btn-sablona.is-active,
.btn-motto.is-active {
background: var(--background-button-on-base-primary-default, #d19173);
}
.btn-sablona.is-active .btn-sablona-icon,
.btn-sablona.is-active .btn-motto-icon,
.btn-motto.is-active .btn-sablona-icon,
.btn-motto.is-active .btn-motto-icon {
--btn-sablona-icon-fill: #1a1b1f;
}
.sablona-btns,
.motta-btns {
display: flex;
flex-direction: column;
gap: 4px;
flex-wrap: wrap;
}
.btn-sablona-title,
.btn-motto-title {
width: 100%;
color: var(--text-on-base-default, #1a1b1f);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 28px;
padding-right: 32px;
}
.btn-sablona-info {
overflow: hidden;
color: var(--text-on-base-default);
text-overflow: ellipsis;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.filterable-area-tabs {
--color-content-border: #dcdde1;
}
.filterable-area-tabs .w-tabs-section:first-child {
border-top: none !important;
}
.filterable-area-tabs .w-tabs-section-header {
padding: 16px 0;
}
.filterable-area-tabs .w-tabs-section-content {
padding: 0 0 16px 0 !important;
}
.sablony-title {
padding: 16px 0 8px 0;
margin: 0;
color: var(--text-on-base-subtle-default);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
#templatesName {
padding-bottom: 16px;
}
.service-list {
--service-list-gap: 16px;
display: grid;
gap: var(--service-list-gap);
}
@media (min-width: 768px) {
.service-list {
--service-list-gap: 32px;
}
}
.service-box {
--service-box-padding-inline: 24px;
--service-box-padding-block: 24px;
--service-box-gap: 16px;
display: grid;
gap: var(--service-box-gap);
border-radius: 16px;
background: var(--background-surface-base-darker);
padding-inline: var(--service-box-padding-inline);
padding-block: var(--service-box-padding-block);
}
@media (min-width: 768px) {
.service-box {
--service-box-padding-inline: 32px;
--service-box-padding-block: 24px;
--service-box-gap: 24px;
}
}
.service-box-header {
--service-box-header-flex-direction: column;
display: flex;
flex-direction: var(--service-box-header-flex-direction);
justify-content: space-between;
align-items: center;
gap: 8px;
flex: 1 0 0;
}
@media (min-width: 768px) {
.service-box-header {
--service-box-header-flex-direction: row;
}
}
.service-box-body {
display: grid;
gap: 12px;
}
.service-box-title {
padding: 0;
margin: 0;
}
.service-box-badge {
display: flex;
padding: 2px 12px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 33px;
background: var(--background-button-on-base-secondary-hover);
color: var(--text-on-base-default);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
text-wrap: wrap;
}
.service-box-label {
display: flex;
align-items: center;
color: var(--text-on-base-default);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
.memoary-detail {
background: var(--background-surface-base-darker);
}
.memoary-detail-hero {
--color-content-heading: var(--text-on-inverse-default);
--memoary-detail-hero-padding-top: 48px;
--memoary-detail-hero-padding-bottom: 48px;
padding-top: var(--memoary-detail-hero-padding-top);
padding-bottom: var(--memoary-detail-hero-padding-bottom);
background: var(--background-surface-inverse);
color: var(--text-on-inverse-default);
}
@media (min-width: 768px) {
.memoary-detail-hero {
--memoary-detail-hero-padding-top: 96px;
--memoary-detail-hero-padding-bottom: 96px;
}
}
.memoary-detail-hero.is-upcoming {
--memoary-detail-hero-padding-bottom: 320px;
}
@media (min-width: 768px) {
.memoary-detail-hero.is-upcoming {
--memoary-detail-hero-padding-bottom: 320px;
}
}
.memoary-detail-edit-hero {
--memoary-detail-hero-padding-top: 96px;
--memoary-detail-hero-padding-bottom: 320px;
padding-top: var(--memoary-detail-hero-padding-top);
padding-bottom: var(--memoary-detail-hero-padding-bottom);
background: var(--background-surface-inverse);
}
.memoary-detail-hero-image img {
border-radius: 16px;
overflow: hidden;
}
.memoary-detail-title {
color: var(--text-on-inverse-default);
--h1-font-size: 52px;
--h1-font-weight: 400;
--h1-line-height: 68px;
--h1-letter-spacing: -1.56px;
padding-top: 0;
margin-bottom: 16px;
}
.memoary-detail-dates {
margin-bottom: 48px;
}
.memoary-detail-dates .memoary-hp-date {
color: var(--text-on-inverse-subtle-default);
}
.memoary-detail-label {
--memoary-detail-label: #D19173;
color: var(--memoary-detail-label);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 28px;
letter-spacing: 2.8px;
text-transform: uppercase;
margin-bottom: 0;
}
.memoary-detail-loucim-se {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 40px;
color: var(--text-on-inverse-subtle-default);
}
.memoary-detail-loucim-se .memoary-read-more {
color: var(--memoary-detail-label, #D19173);
text-decoration: none;
font-weight: 500;
cursor: pointer;
transition: opacity 0.2s ease;
display: inline;
}
.memoary-detail-loucim-se .memoary-loucim-se-text {
margin: 0;
}
.memoary-detail-share-button.w-btn-wrapper {
--memoary-detail-share-button-flex-wrap: wrap;
display: flex !important;
flex-wrap: var(--memoary-detail-share-button-flex-wrap);
align-items: center;
gap: 8px;
justify-content: space-between;
margin-bottom: 48px;
}
.memoary-detail-share-button.w-btn-wrapper .custom-button {
flex: 1 0 50%;
}
@media (min-width: 670px) {
.memoary-detail-share-button.w-btn-wrapper {
--memoary-detail-share-button-flex-wrap: nowrap;
}
}
.memoary-detail-collection {
--memoary-detail-collection-bg: rgba(240, 241, 245, 0.08);
--memoary-detail-collection-padding: 24px;
border-radius: 16px;
background: var(--memoary-detail-collection-bg);
padding: var(--memoary-detail-collection-padding);
}
.memoary-detail-collection h3 {
color: var(--text-on-inverse-default);
font-size: 25px;
font-weight: 400;
line-height: 36px;
letter-spacing: -0.5px;
margin-bottom: 24px;
}
@media (min-width: 670px) {
.memoary-detail-collection {
--memoary-detail-collection-padding: 24px 32px 32px 32px;
}
}
.memoary-collection-timer {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-on-inverse-subtle-default);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
@media (max-width: 768px) {
.memoary-collection-timer {
padding: 16px;
}
.memoary-collection-timer .memoary-timer-text {
font-size: 16px;
}
}
.memoary-detail-collection-top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.memoary-detail-collection-badges {
--memoary-detail-collection-badges-direction: column;
display: flex;
gap: 8px;
flex-direction: var(--memoary-detail-collection-badges-direction);
}
@media (min-width: 768px) {
.memoary-detail-collection-badges {
--memoary-detail-collection-badges-direction: row;
}
}
.memoary-detail-collection-title {
padding-top: 0;
margin-bottom: 24px;
}
.memoary-detail-collection-description {
color: var(--text-on-inverse-subtle-default);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
margin-bottom: 16px;
}
.memoary-detail-last-faraway {
--memoary-detail-last-faraway-padding-block: 24px;
--memoary-detail-last-faraway-padding-inline: 24px;
padding-block: var(--memoary-detail-last-faraway-padding-block);
padding-inline: var(--memoary-detail-last-faraway-padding-inline);
border-radius: 32px;
border: 1px solid var(--background-inputs-on-inverse, rgba(240, 241, 245, 0.08));
background: var(--background-surface-inverse);
margin-top: -284px;
}
@media (min-width: 768px) {
.memoary-detail-last-faraway {
--memoary-detail-last-faraway-padding-block: 72px;
--memoary-detail-last-faraway-padding-inline: 72px;
}
}
.memoary-detail-last-faraway-title {
color: var(--text-on-inverse-default, #FFFAF7);
margin-bottom: 32px !important;
}
.memoary-detail-icon-box {
display: flex;
align-items: center;
gap: 16px;
}
.memoary-detail-icon-box svg {
flex-shrink: 0;
}
.memoary-detail-icon-box-inner {
display: grid;
gap: 4px;
}
.memoary-detail-icon-box-label {
color: var(--text-on-inverse-subtle-default, #C0C1C6);
font-size: 14px;
font-weight: 400;
line-height: 24px;
margin-bottom: 0;
}
.memoary-detail-icon-box-description {
color: var(--text-on-inverse-default, #FFFAF7);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
margin-bottom: 0;
}
.memoary-detail-separator {
border-top: 1px solid var(--background-inputs-on-inverse);
margin: 32px 0;
}
.memoary-detail-flowers {
--memoary-detail-flowers-padding: 24px;
display: grid;
gap: 24px;
border-radius: 16px;
background: var(--background-inputs-on-inverse);
padding: var(--memoary-detail-flowers-padding);
}
@media (min-width: 670px) {
.memoary-detail-flowers {
--memoary-detail-flowers-padding: 24px 32px 32px 32px;
}
}
.memoary-detail-flowers-title-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.memoary-detail-flowers-title {
color: var(--text-on-inverse-default);
font-size: 25px;
font-style: normal;
font-weight: 400;
line-height: 36px;
letter-spacing: -0.5px;
margin-bottom: 0;
}
.memoary-detail-flowers-description {
color: var(--text-on-inverse-subtle-default);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
.memoary-detail-tabs-button-inner {
--memoary-detail-tabs-button-inner-padding-inline: 12px;
padding-inline: var(--memoary-detail-tabs-button-inner-padding-inline);
}
@media (min-width: 670px) {
.memoary-detail-tabs-button-inner {
--memoary-detail-tabs-button-inner-padding-inline: 72px;
}
}
.memoary-tabs {
display: flex;
gap: 8px;
margin-top: 96px;
}
.memoary-tab {
--memoary-tab-border-bottom: 2px solid transparent;
padding: 8px;
flex: 1 0 0;
color: var(--text-on-base-default);
font-family: Lora;
font-size: 20px;
font-weight: 400;
line-height: 32px;
letter-spacing: -0.24px;
border-bottom: var(--memoary-tab-border-bottom);
background: transparent;
transition: all ease 0.3s;
}
.memoary-tab[aria-selected=true] {
--memoary-tab-border-bottom: 2px solid var(--Brown-500, #D19173);
}
.memoary-detail-tabs-inner {
--memoary-detail-tabs-inner-padding: 24px;
padding: var(--memoary-detail-tabs-inner-padding);
border-radius: 32px;
background: var(--background-surface-base);
}
@media (min-width: 670px) {
.memoary-detail-tabs-inner {
--memoary-detail-tabs-inner-padding: 72px;
}
}
.memoary-detail-title-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 16px;
margin-bottom: 32px;
}
.memoary-tab-panel-title {
color: var(--text-on-base-default);
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 44px;
letter-spacing: -0.32px;
}
.memoary-detail-content {
color: var(--text-on-base-default);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
.memoary-detail-content p {
margin-bottom: 16px;
}
.memoary-detail-ban {
--memoary-detail-ban-padding-bottom: 42px;
padding-bottom: var(--memoary-detail-ban-padding-bottom);
}
@media (min-width: 670px) {
.memoary-detail-ban {
--memoary-detail-ban-padding-bottom: 72px;
}
}
.memoary-detail-ban-info {
display: flex;
align-items: center;
justify-content: center;
}
.memoary-creator-report-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.memoary-creator-info {
display: flex;
align-items: center;
gap: 4px;
color: var(--text-on-base-disabled, #87888D);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
border-right: 1px solid #dcdde1;
padding-right: 12px;
margin-right: 12px;
}
.memoary-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.memoary-form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.memoary-form-group label {
color: var(--text-on-base-default);
font-size: 14px;
font-weight: 500;
}
.memoary-form-group label .required {
color: #D19173;
}
.memoary-textarea {
resize: vertical;
min-height: 120px;
}
.memoary-form-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 8px;
}
.memoary-form-actions .custom-button {
min-width: 140px;
}
.memoary-report-message {
padding: 16px;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
}
.memoary-report-message.success {
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
border: 1px solid rgba(34, 197, 94, 0.2);
}
.memoary-report-message.error {
background: rgba(239, 68, 68, 0.1);
color: #dc2626;
border: 1px solid rgba(239, 68, 68, 0.2);
}
.memoary-audio-player audio {
display: none;
}
.memoary-audio-controls {
display: flex;
align-items: center;
gap: 8px;
}
.memoary-audio-play {
background: transparent;
border-radius: 6px;
border: 1px solid var(--background-button-on-base-primary-default, #D19173);
display: flex;
padding: 10px;
justify-content: center;
align-items: center;
gap: 6px;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.memoary-audio-play:hover {
transform: scale(1.05);
}
.memoary-audio-play:active {
transform: scale(0.95);
}
.memoary-audio-play svg {
width: 16px;
height: 16px;
}
.memoary-audio-time {
color: var(--text-on-base-active, #B6846D);
font-variant-numeric: lining-nums tabular-nums;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
min-width: 40px;
text-align: center;
}
.memoary-audio-progress {
--memoary-audio-progress-width: 55px;
width: var(--memoary-audio-progress-width);
flex-shrink: 0;
}
@media (min-width: 768px) {
.memoary-audio-progress {
--memoary-audio-progress-width: 125px;
}
}
.progress-bar {
height: 6px;
background: #dcdde1;
border-radius: 3px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.progress-filled {
height: 100%;
background: #D19173;
border-radius: 4px;
width: 0%;
transition: width 0.1s ease, background 0.2s ease;
position: relative;
}
.progress-filled::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
background: #D19173;
border-radius: 50%;
opacity: 0;
transition: opacity 0.2s ease;
}
.progress-bar:hover .progress-filled::after {
opacity: 1;
}
.memoary-audio-volume {
position: relative;
}
.volume-button {
background: none;
border: none;
cursor: pointer;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-on-base-default);
border-radius: 8px;
transition: background 0.2s ease;
}
.volume-button:hover {
background: var(--background-surface-base-darker);
}
.volume-button svg {
width: 20px;
height: 20px;
}
.volume-slider {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 8px;
padding: 12px 8px;
background: var(--background-surface-base);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: none;
}
.volume-slider.is-visible {
display: block;
}
@media (max-width: 768px) {
.volume-slider {
display: none !important;
}
}
.volume-bar {
width: 6px;
height: 80px;
background: #dcdde1;
border-radius: 3px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.volume-bar:hover .volume-filled {
background: #B6846D;
}
.volume-filled {
width: 100%;
background: #D19173;
border-radius: 3px;
height: 0%;
position: absolute;
bottom: 0;
left: 0;
transition: height 0.1s ease, background 0.2s ease;
}
.milestones-list-title {
margin-bottom: var(--h5-margin-bottom, 1.5rem);
}
.memoary-detail-message-section {
--memoary-detail-message-section-padding-block: 48px;
background: var(--background-surface-base, #FAFBFF);
padding-block: var(--memoary-detail-message-section-padding-block);
}
@media (min-width: 670px) {
.memoary-detail-message-section {
--memoary-detail-message-section-padding-block: 96px;
}
}
.memoary-detail-message-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.memoary-detail-message {
--memoary-detail-message-padding-inline: 24px;
--memoary-detail-message-padding-block: 24px;
display: flex;
max-width: var(--container-width-medium-Small, 800px);
padding-inline: var(--memoary-detail-message-padding-inline);
padding-block: var(--memoary-detail-message-padding-block);
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
border-radius: 32px;
background: var(--background-surface-base-darker, #F0F1F5);
}
@media (min-width: 768px) {
.memoary-detail-message {
--memoary-detail-message-padding-inline: 72px;
--memoary-detail-message-padding-block: 72px;
}
}
.memoary-message-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.memoary-message-section {
--memoary-message-section-padding: 24px;
width: 100%;
background: #fff;
border-radius: 32px;
padding: var(--memoary-message-section-padding);
}
@media (min-width: 768px) {
.memoary-message-section {
--memoary-message-section-padding: 24px 32px 32px 32px;
}
}
.memoary-section-title {
width: 100%;
text-align: left;
margin-bottom: 16px;
}
@media (max-width: 600px) {
.memoary-section-title {
margin: 0 24px 16px 24px;
}
}
.memoary-section-description {
color: var(--text-on-base-subtle-default);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
margin-bottom: 32px;
}
.memoary-message-section-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.memoary-photo-upload-wrapper {
display: flex;
flex-direction: column;
gap: 24px;
}
.memoary-link-row {
position: relative;
}
.memoary-links-wrapper {
display: flex;
flex-direction: column;
gap: 16px;
}
.memoary-btn-remove-link {
position: absolute;
top: 15px;
right: 5px;
background: transparent;
border: 0;
display: flex;
align-items: center;
justify-content: center;
}
.memoary-btn-add-link {
margin-top: 48px;
}
.memoary-message-verification-info {
margin-top: 48px;
color: var(--text-on-base-default, #1A1B1F);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
margin-bottom: 8px;
}
.memoary-message-user-details {
display: flex;
flex-direction: column;
gap: 24px;
}
.memoary-message-form-actions {
--memoary-message-form-actions-direction: column-reverse;
display: flex;
justify-content: flex-end;
gap: 16px;
flex-direction: var(--memoary-message-form-actions-direction);
margin-top: 16px;
}
@media (min-width: 768px) {
.memoary-message-form-actions {
--memoary-message-form-actions-direction: row;
}
}
.memoary-message-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
margin-top: 16px;
}
.memoary-message-photo {
height: 200px;
width: 100%;
aspect-ratio: 1;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
border-radius: 8px;
}  .memoary-gallery-trigger {
cursor: pointer;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.memoary-gallery-trigger:hover {
opacity: 0.9;
transform: scale(1.02);
}
.memoary-gallery-trigger:focus {
outline: 2px solid #1a1b1f;
outline-offset: 2px;
} .memoary-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
}
.memoary-lightbox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
}
.memoary-lightbox-content {
position: relative;
width: 90%;
max-width: 1200px;
height: 90vh;
display: flex;
flex-direction: column;
z-index: 1;
} .memoary-lightbox-close {
position: absolute;
top: -50px;
right: 0;
background: transparent;
border: none;
color: white;
width: 40px;
height: 40px;
cursor: pointer;
transition: opacity 0.3s ease;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.memoary-lightbox-close:hover,
.memoary-lightbox-close:focus {
opacity: 0.7;
outline: 2px solid white;
outline-offset: 2px;
} .memoary-lightbox-prev,
.memoary-lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: none;
color: white;
width: 50px;
height: 50px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.memoary-lightbox-prev {
left: 20px;
}
.memoary-lightbox-next {
right: 20px;
}
.memoary-lightbox-prev:hover,
.memoary-lightbox-next:hover,
.memoary-lightbox-prev:focus,
.memoary-lightbox-next:focus {
background: rgba(255, 255, 255, 0.2);
outline: 2px solid white;
outline-offset: 2px;
} .memoary-lightbox-image-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 20px;
}
.memoary-lightbox-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
} .memoary-lightbox-thumbnails {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
padding: 10px;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
border-radius: 8px;
overflow-x: auto;
max-width: 100%;
}
.memoary-lightbox-thumbnails::-webkit-scrollbar {
height: 6px;
}
.memoary-lightbox-thumbnails::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.memoary-lightbox-thumbnails::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}
.memoary-lightbox-thumb {
flex-shrink: 0;
width: 80px;
height: 80px;
cursor: pointer;
border: 2px solid transparent;
border-radius: 6px;
overflow: hidden;
transition: all 0.3s ease;
opacity: 0.6;
}
.memoary-lightbox-thumb:hover,
.memoary-lightbox-thumb:focus {
opacity: 1;
border-color: white;
outline: none;
}
.memoary-lightbox-thumb.active {
opacity: 1;
border-color: white;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.memoary-lightbox-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
} @media (max-width: 768px) {
.memoary-lightbox-close {
top: 10px;
right: 10px;
}
.memoary-lightbox-prev,
.memoary-lightbox-next {
width: 40px;
height: 40px;
}
.memoary-lightbox-prev {
left: 10px;
}
.memoary-lightbox-next {
right: 10px;
}
.memoary-lightbox-thumb {
width: 60px;
height: 60px;
}
}
.memoary-messages-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.memoary-message-item {
--memoary-message-item-padding: 24px;
border-radius: 16px;
background: var(--background-surface-base-darker, #f0f1f5);
padding: var(--memoary-message-item-padding);
}
@media (min-width: 670px) {
.memoary-message-item {
--memoary-message-item-padding: 24px 32px 32px;
}
}
.memoary-message-date {
color: var(--text-on-inverse-subtle-default, #c0c1c6);
font-size: 14px;
}
.memoary-message-link {
display: flex;
gap: 8px;
align-items: center;
}
.memoary-contribution-qr {
text-align: center;
padding: 16px 0;
}
.memoary-currency-selector {
margin-bottom: 24px;
text-align: left;
}
.memoary-currency-selector > label {
display: block;
margin-bottom: 12px;
color: var(--text-primary, #1A1B1F);
font-size: 14px;
font-weight: 600;
}
.memoary-currency-options {
display: flex;
gap: 12px;
justify-content: flex-start;
}
.memoary-currency-option {
flex: 0 1 auto;
position: relative;
cursor: pointer;
}
.memoary-currency-option input[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.memoary-currency-option input[type=radio]:disabled + .memoary-currency-label {
opacity: 0.5;
cursor: not-allowed;
background: var(--background-surface-secondary, #f9f9f9);
}
.memoary-currency-option input[type=radio]:checked + .memoary-currency-label {
background: var(--primary, #B6846D);
color: white;
border-color: var(--primary, #B6846D);
}
.memoary-currency-label {
display: inline-block;
padding: 8px 24px;
background: white;
border: 1px solid var(--border-subtle, #e5e5e5);
border-radius: 8px;
transition: all 0.2s ease;
font-size: 14px;
font-weight: 600;
color: var(--text-primary, #1A1B1F);
min-width: 80px;
text-align: center;
}
.memoary-currency-label:hover {
border-color: var(--primary, #B6846D);
}
.memoary-qr-format-selector {
margin-bottom: 24px;
}
.memoary-qr-format-options {
display: flex;
gap: 12px;
justify-content: center;
padding: 12px 0;
background: var(--background-surface-secondary, #f9f9f9);
border-radius: 12px;
}
@media (max-width: 600px) {
.memoary-qr-format-options {
flex-direction: column;
}
}
.memoary-qr-format-option {
flex: 1;
position: relative;
cursor: pointer;
}
.memoary-qr-format-option input[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.memoary-qr-format-option input[type=radio]:checked + .memoary-qr-format-label {
background: var(--primary, #B6846D);
color: white;
border-color: var(--primary, #B6846D);
}
.memoary-qr-format-option input[type=radio]:checked + .memoary-qr-format-label strong,
.memoary-qr-format-option input[type=radio]:checked + .memoary-qr-format-label small {
color: white;
}
.memoary-qr-format-label {
display: flex;
flex-direction: column;
align-items: center;
padding: 4px 12px;
background: white;
border: 1px solid var(--border-subtle, #e5e5e5);
border-radius: 8px;
transition: all 0.2s ease;
}
.memoary-qr-format-label strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-primary, #1A1B1F);
}
.memoary-qr-format-label small {
display: block;
font-size: 12px;
color: var(--text-secondary, #666);
}
.memoary-qr-format-label:hover {
border-color: var(--primary, #B6846D);
}
.memoary-contribution-description {
margin-bottom: 24px;
color: var(--text-secondary, #666);
font-size: 14px;
line-height: 1.6;
}
.memoary-qrcode-container {
display: flex;
justify-content: center;
align-items: center;
margin: 24px auto;
padding: 16px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
width: fit-content;
}
.memoary-qrcode-container img {
display: block;
max-width: 100%;
height: auto;
}
.memoary-qrcode-container canvas {
display: block;
}
.memoary-contribution-details {
margin-top: 32px;
text-align: left;
background: var(--background-surface-secondary, #f9f9f9);
padding: 20px;
border-radius: 8px;
}
.memoary-contribution-detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--border-subtle, #e5e5e5);
}
.memoary-contribution-detail:last-child {
border-bottom: none;
}
.memoary-contribution-detail strong {
color: var(--text-primary, #1A1B1F);
font-weight: 600;
font-size: 14px;
}
.memoary-contribution-detail span {
color: var(--text-secondary, #666);
font-size: 14px;
word-break: break-all;
text-align: right;
margin-left: 16px;
}
.memoary-flowers-info {
padding: 16px 0;
}
.memoary-flowers-description {
margin-bottom: 16px;
color: var(--text-secondary, #666);
font-size: 15px;
line-height: 1.6;
}
.memoary-flowers-instructions {
margin-bottom: 24px;
color: var(--text-primary, #1A1B1F);
font-weight: 600;
font-size: 16px;
}
.memoary-flowers-contact {
background: var(--background-surface-secondary, #f9f9f9);
padding: 24px;
border-radius: 12px;
margin-bottom: 24px;
}
.memoary-flowers-contact-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
}
.memoary-flowers-contact-item:not(:last-child) {
border-bottom: 1px solid var(--border-subtle, #e5e5e5);
}
.memoary-flowers-contact-item svg {
flex-shrink: 0;
color: var(--primary, #B6846D);
}
.memoary-flowers-contact-item a {
color: var(--text-primary, #1A1B1F);
text-decoration: none;
font-size: 16px;
font-weight: 500;
transition: color 0.2s;
}
.memoary-flowers-contact-item a:hover {
color: var(--primary, #B6846D);
}
.memoary-flowers-note {
display: flex;
gap: 12px;
padding: 16px;
background: rgba(182, 132, 109, 0.08);
border-radius: 8px;
border-left: 3px solid var(--primary, #B6846D);
}
.memoary-flowers-note svg {
flex-shrink: 0;
color: var(--primary, #B6846D);
margin-top: 2px;
}
.memoary-flowers-note p {
margin: 0;
color: var(--text-secondary, #666);
font-size: 14px;
line-height: 1.6;
}
.memoary-edit-form {
position: relative;
}
.memoary-edit-toolbar {
position: fixed;
bottom: 16px;
right: 16px;
background: #fff;
padding: 16px;
border-radius: var(--border-radius);
z-index: 999;
}
.memoary-edit-toolbar-inner {
display: flex;
gap: 16px;
justify-content: space-between;
}
.memoary-edit-title {
color: var(--text-on-base-default);
margin-bottom: 0;
}
.memoary-edit-toolbar .l-section-h {
display: flex;
justify-content: space-between;
align-items: center;
}
.memoary-edit-actions {
display: flex;
gap: 12px;
justify-content: space-between;
width: 100%;
}
.memoary-edit-actions-right {
display: flex;
gap: 12px;
}
.memoary-delete-btn {
color: #d32f2f !important;
}
.memoary-delete-btn:hover {
background-color: rgba(211, 47, 47, 0.08) !important;
}
.memoary-edit-hero {
--memoary-edit-hero-padding: 24px 0;
background: #f9f9f9;
padding: var(--memoary-edit-hero-padding);
}
@media (min-width: 670px) {
.memoary-edit-hero {
--memoary-edit-hero-padding: 48px 0;
}
}
.memoary-edit-fields {
display: flex;
flex-direction: column;
gap: 32px;
}
.memoary-edit-section {
display: flex;
background: #fff;
padding: 24px;
border-radius: 8px;
flex-direction: column;
gap: 8px;
}
.memoary-edit-section-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--text-primary, #1A1B1F);
}
.memoary-edit-photo-section {
background: #fff;
padding: 24px;
border-radius: 8px;
}
.memoary-edit-photo-label {
display: block;
margin-bottom: 16px;
font-size: 18px;
font-weight: 600;
color: var(--text-primary, #1A1B1F);
}
.memoary-edit-photo-current {
margin-bottom: 20px;
border-radius: 6px;
overflow: hidden;
}
.memoary-edit-dropzone {
margin-bottom: 16px;
}
.memoary-edit-photo-preview {
position: relative;
margin-top: 16px;
}
.memoary-edit-photo-preview img {
max-width: 100%;
border-radius: 6px;
}
.memoary-remove-photo {
position: absolute;
top: 8px;
right: 8px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.memoary-remove-photo:hover {
background: #fff;
transform: scale(1.1);
}
.memoary-edit-note {
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: 6px;
padding: 16px;
font-size: 14px;
color: #856404;
}
.memoary-delete-info {
margin: 0 0 16px 0;
color: var(--text-secondary, #87888D);
font-size: 14px;
line-height: 1.5;
}
.memoary-message {
padding: 12px 16px;
border-radius: 6px;
font-size: 14px;
margin-top: 16px;
}
.memoary-message.success {
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}
.memoary-message.error {
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
.memoary-edit-funeral-fields {
transition: all 0.3s ease;
}
@media (max-width: 768px) {
.memoary-edit-toolbar .l-section-h {
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.memoary-edit-actions {
width: 100%;
flex-direction: column;
}
.memoary-edit-actions-right {
width: 100%;
flex-direction: column;
}
.memoary-edit-actions .w-btn {
width: 100%;
justify-content: center;
}
}
.memoary-edit-milestones {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (max-width: 670px) {
.milestone-app {
margin: 0 24px;
}
}
.memoary-payment-container {
max-width: 678px;
border-radius: 32px;
text-align: center;
background: var(--background-surface-base);
max-width: var(--container-width-medium-Small, 800px);
padding: var(--padding-outer-vertical) var(--padding-outer-horizontal);
margin: 0 auto;
}
.memoary-payment-icon {
margin-bottom: 20px;
}
.memoary-payment-title {
font-size: 28px;
margin-bottom: 20px;
color: #10B981;
}
.memoary-payment-message {
font-size: 16px;
line-height: 1.6;
margin-bottom: 32px;
}
.memoary-payment-info {
background: var(--background-surface-base-darker);
border-radius: 32px;
padding: 20px;
margin-bottom: 32px;
font-size: 16px;
}
.memoary-payment-info p {
margin: 0 0 10px 0;
}
.memoary-payment-actions {
display: flex;
gap: 16px;
justify-content: center;
margin-bottom: 32px;
}
.payment-success-note {
font-size: 14px;
color: #6b7280;
}
.payment-cancel-info {
font-size: 16px;
line-height: 1.6;
margin-bottom: 32px;
color: #6b7280;
}
.payment-cancel-help {
background: #f9fafb;
padding: 20px;
border-radius: 6px;
margin-top: 32px;
}
.payment-cancel-help h3 {
font-size: 18px;
margin-bottom: 10px;
color: #1f2937;
}
.payment-cancel-help p {
font-size: 14px;
color: #6b7280;
}
.payment-cancel-help a {
color: #3b82f6;
text-decoration: underline;
}
.payment-error-info {
background: #FEE2E2;
padding: 15px;
border-radius: 6px;
margin-bottom: 20px;
border-left: 4px solid #EF4444;
}
.payment-error-info h4 {
font-size: 14px;
font-weight: 600;
margin: 0 0 8px 0;
color: #991B1B;
}
.payment-error-info p {
font-size: 14px;
margin: 0;
color: #7F1D1D;
}
.payment-failed-reasons {
background: #f9fafb;
padding: 20px;
border-radius: 6px;
margin: 32px 0;
text-align: left;
}
.payment-failed-reasons h3 {
font-size: 16px;
margin: 0 0 15px 0;
color: #1f2937;
text-align: center;
}
.payment-failed-reasons ul {
margin: 0;
padding-left: 25px;
list-style-type: disc;
}
.payment-failed-reasons li {
font-size: 14px;
color: #6b7280;
margin-bottom: 8px;
line-height: 1.5;
}
.payment-retry-info {
font-size: 16px;
line-height: 1.6;
margin-bottom: 32px;
color: #6b7280;
}
.payment-failed-actions .button-primary {
background: #EF4444;
color: #fff;
border: none;
}
.payment-failed-actions .button-primary:hover {
background: #DC2626;
}
.payment-failed-help {
background: #f9fafb;
padding: 20px;
border-radius: 6px;
margin-top: 32px;
}
.payment-failed-help h3 {
font-size: 18px;
margin-bottom: 10px;
color: #1f2937;
}
.payment-failed-help p {
font-size: 14px;
color: #6b7280;
margin-bottom: 10px;
}
.payment-failed-help a {
color: #3b82f6;
text-decoration: none;
}
.payment-failed-help a:hover {
text-decoration: underline;
}
.help-email {
font-weight: 600;
}
.payment-timer-container {
margin: 25px 0;
padding: 0;
}
.payment-timer-warning {
display: flex;
align-items: flex-start;
gap: 15px;
background: #fef3c7;
border: 2px solid #f59e0b;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.payment-timer-warning svg {
flex-shrink: 0;
margin-top: 2px;
}
.payment-timer-warning h4 {
margin: 0 0 10px 0;
color: #92400e;
font-size: 18px;
font-weight: 600;
}
.payment-timer-warning p {
margin: 0 0 8px 0;
color: #78350f;
font-size: 15px;
line-height: 1.6;
}
.payment-attempts-info {
margin-top: 12px !important;
font-size: 14px !important;
color: #92400e !important;
}
#timer-display {
font-size: 16px;
font-weight: bold;
color: #d97706;
padding: 2px 8px;
background: #fde68a;
border-radius: 4px;
display: inline-block;
}
#timer-display.timer-warning {
color: #dc2626;
background: #fee2e2;
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.payment-security-info,
.payment-next-steps {
padding: 20px;
margin: 20px 0;
}
.payment-security-info h4,
.payment-next-steps h4 {
margin: 0 0 15px 0;
font-size: 16px;
color: #111827;
font-weight: 600;
}
.payment-security-info ul,
.payment-next-steps ol {
margin: 0;
padding-left: 20px;
}
.payment-security-info li,
.payment-next-steps li {
margin-bottom: 10px;
color: #374151;
font-size: 14px;
line-height: 1.6;
}
#retry-payment-btn {
position: relative;
min-width: 200px;
}
#retry-payment-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.payment-retry-message {
padding: 15px 20px;
border-radius: 8px;
margin: 20px 0;
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.payment-message-error {
border-left: 4px solid #dc2626;
color: #7f1d1d;
}
.payment-message-success {
border-left: 4px solid #10b981;
color: #065f46;
}
.payment-retry-message p {
margin: 0;
font-size: 14px;
line-height: 1.5;
}
.memoary-payment-details {
text-align: center;
margin-top: 32px;
}
@media (max-width: 768px) {
.payment-timer-warning {
flex-direction: column;
gap: 10px;
}
}
.memoary-user-profile {
max-width: 1020px;
margin: 0 auto;
padding: 72px 0 0 0;
}
.memoary-user-profile-header {
--memoary-user-profile-header-padding-inline: 42px;
display: flex;
justify-content: space-between;
align-items: center;
padding-inline: var(--memoary-user-profile-header-padding-inline);
margin-bottom: 28px;
}
@media (min-width: 670px) {
.memoary-user-profile-header {
--memoary-user-profile-header-padding-inline: 72px;
}
}
.memoary-user-profile-header h3 {
margin-bottom: 0;
}
.memoary-tabs-nav {
--memoary-tabs-nav-margin: 0 42px 48px 42px;
margin: var(--memoary-tabs-nav-margin);
display: flex;
gap: 4px;
align-items: center;
padding: 4px;
border-radius: 8px;
background: var(--background-inputs-on-base);
}
.memoary-tabs-nav.mobile-tabs {
display: none;
}
@media (min-width: 670px) {
.memoary-tabs-nav {
--memoary-tabs-nav-margin: 0 72px 48px 72px;
}
}
.memoary-tab-btn {
flex: 1;
display: flex;
padding: 10px 20px;
justify-content: center;
align-items: center;
background: transparent;
border: none;
border-radius: 6px;
color: var(--text-button-on-base-secondary, #1A1B1F);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 16px;
letter-spacing: -0.07px;
cursor: pointer;
transition: all 0.2s ease;
}
.memoary-tab-btn:hover {
background: #d191731e;
}
.memoary-tab-btn.active {
background: var(--background-button-on-base-primary-default, #D19173);
}
.memoary-tab-select {
width: 100%;
padding: 12px 16px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
font-size: 16px;
color: #1a1b1f;
cursor: pointer;
}
.memoary-tabs-content {
border-radius: 32px;
background: var(--background-surface-base);
padding: var(--Padding-OuterPaper-vertical, 72px) var(--Padding-OuterPaper-horizontal, 72px);
}
.memoary-tab-pane {
display: none;
}
.memoary-tab-pane.active {
display: block;
}
.memoary-user-list {
width: 100%;
}
.memoary-user-list-items {
display: flex;
flex-direction: column;
gap: 8px;
}
.memoary-user-list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 32px;
border-radius: 16px;
background: var(--background-surface-base-darker, #F0F1F5);
}
.memoary-user-list-item-info {
flex: 1;
display: flex;
gap: 16px;
}
.memoary-user-list-item-name {
color: var(--text-on-base-default, #1A1B1F);
font-size: 16px;
font-style: normal;
font-weight: 500;
}
.memoary-user-list-item-date {
color: var(--text-on-base-subtle-default, #46484F);
font-size: 16px;
font-style: normal;
font-weight: 400;
}
.memoary-user-list-item-actions {
display: flex;
gap: 8px;
}
.memoary-load-more-wrapper {
text-align: center;
margin-top: 30px;
}
.memoary-load-more-btn {
padding: 12px 32px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
color: #1a1b1f;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.memoary-load-more-btn:hover {
background: #f5f5f5;
border-color: #d0d0d0;
}
.memoary-load-more-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.memoary-empty-state {
text-align: center;
padding: 60px 20px;
}
.memoary-empty-state p {
font-size: 18px;
color: #87888d;
margin-bottom: 20px;
}
.memoary-empty-state-btn {
display: inline-block;
padding: 12px 32px;
background: #1a1b1f;
color: #fff;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
transition: all 0.2s ease;
}
.memoary-empty-state-btn:hover {
background: #2a2b2f;
transform: translateY(-2px);
}
.memoary-faktury-list {
width: 100%;
}
.memoary-faktury-table-wrapper {
width: 100%;
overflow-x: auto;
}
.memoary-faktury-table {
width: 100%;
border-collapse: collapse;
}
.memoary-faktury-table th {
padding: 16px;
text-align: left;
color: var(--text-on-base-default, #1a1b1f);
font-size: 16px;
font-style: normal;
font-weight: 600;
border-bottom: 1px solid var(--background-surface-base-darker, #f0f1f5);
white-space: nowrap;
}
.memoary-faktury-table td {
padding: 16px;
border-bottom: 1px solid #e5e5e5;
vertical-align: middle;
font-size: 14px;
color: var(--text-on-base-default, #1a1b1f);
}
.memoary-faktury-table tbody tr {
transition: background 0.2s ease;
}
.memoary-faktury-table tbody tr:hover {
background: #f9f9f9;
}
.memoary-invoice-number {
font-size: 14px;
color: var(--text-on-base-default, #1a1b1f);
}
.memoary-payment-status {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 500;
color: var(--text-on-base-default, #1a1b1f);
}
.memoary-payment-status .status-icon {
margin-right: 4px;
font-weight: bold;
}
.memoary-payment-status .status-icon.success {
color: #28a745;
}
.memoary-payment-status .status-icon.pending {
color: #ffc107;
}
.memoary-payment-status .status-icon.canceled {
color: #87888d;
}
.memoary-payment-status.status-zaplaceno {
background: #e7f5ed;
}
.memoary-payment-status.status-nezaplaceno {
background: #fff3cd;
}
.memoary-payment-status.status-stornovano {
background: #f5f5f5;
}
.memoary-payment-status.status-succeeded {
background: #e7f5ed;
color: #28a745;
}
.memoary-payment-status.status-pending {
background: #fff3cd;
color: #ffc107;
}
.memoary-payment-status.status-failed {
background: #fff5f5;
color: #f44336;
}
.memoary-payment-status.status-canceled {
background: #f5f5f5;
color: #87888d;
}
.memoary-payment-status.status-refunded {
background: #e7f5ff;
color: #2196f3;
}
.memoary-invoice-actions {
display: flex;
gap: 8px;
align-items: center;
}
.memoary-account-settings h5 {
margin-bottom: 0;
}
.memoary-form-message {
margin-top: 20px;
}
.memoary-notice {
padding: 16px;
border-radius: 8px;
font-size: 15px;
margin-bottom: 20px;
}
.memoary-notice.success {
background: #e7f5ed;
color: #28a745;
border: 1px solid #c3e6cb;
}
.memoary-notice.error {
background: #fff5f5;
color: #f44336;
border: 1px solid #f5c6cb;
}
.memoary-change-password-wrapper {
margin-top: 32px;
}
.memoary-notification {
position: fixed;
top: 20px;
right: 20px;
padding: 16px 24px;
background: #1a1b1f;
color: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 9999;
opacity: 0;
transform: translateX(400px);
transition: all 0.3s ease;
}
.memoary-notification.show {
opacity: 1;
transform: translateX(0);
}
.memoary-notification.success {
background: #28a745;
}
.memoary-notification.error {
background: #f44336;
}
@media (max-width: 768px) {
.memoary-user-profile {
padding: 24px 0;
}
.memoary-user-profile-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.memoary-user-profile-header h2 {
font-size: 24px;
}
.memoary-tabs-nav.desktop-tabs {
display: none;
}
.memoary-tabs-nav.mobile-tabs {
display: block;
}
.memoary-tabs-content {
padding: 24px;
}
.memoary-user-list-item {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.memoary-user-list-item-actions {
width: 100%;
justify-content: flex-end;
padding: 24px;
}
.memoary-faktury-table thead {
display: none;
}
.memoary-faktury-table tbody,
.memoary-faktury-table tr,
.memoary-faktury-table td {
display: block;
}
.memoary-faktury-table tr {
margin-bottom: 20px;
padding: 15px;
background: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 8px;
}
.memoary-faktury-table td {
padding: 8px 0;
border: none;
text-align: right;
position: relative;
padding-left: 50%;
}
.memoary-faktury-table td::before {
content: attr(data-label);
position: absolute;
left: 0;
font-weight: 600;
color: #1a1b1f;
}
.memoary-invoice-actions {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.memoary-invoice-actions .memoary-invoice-action-btn,
.memoary-invoice-actions .memoary-refund-btn {
width: 100%;
justify-content: center;
}
.w-form-row-group.has-2-cols {
grid-template-columns: 1fr;
}
}