/* ---------------------------------------------------------------------------
   RIANO Beauty Klub — podstranka /beauty-klub (club.tpl)
   Barvy vychazeji z vizualu klubu: pudrova ruzova, petrolejova a tmave hneda.
   --------------------------------------------------------------------------- */

.clubPage {
    --club-rose: #d98b85;
    --club-rose-soft: #f3d7d2;
    --club-teal: #2f6b6b;
    --club-teal-soft: #d8e6e4;
    --club-brown: #4a2b28;
    --club-cream: #fbf6f2;
    --club-line: rgba(74, 43, 40, .12);
    --club-shadow: 0 18px 40px rgba(74, 43, 40, .08);

    color: var(--club-brown);
    background: var(--club-cream);
}

.clubPage .container {
    max-width: 1180px;
}

/* ikony jako vložené SVG (sections/club-icon.tpl) — velikost 1em a barva z okolí */
.clubPage .clubIcon {
    display: inline-block;
    line-height: 0;
    vertical-align: -0.125em;
}

/* náhled v editoru: obal klikacích obrázků závěrečné výzvy nemá měnit rozvržení */
.clubPage .clubCta__pick {
    display: inline-flex;
    align-items: center;
}

.clubPage .clubIcon svg {
    display: block;
    width: 1em;
    height: 1em;
}

/* --- spolecne prvky sekci --------------------------------------------------- */

.clubPage section {
    padding: 64px 0;
}

.clubSection__eyebrow {
    margin: 0 0 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--club-rose);
}

.clubSection__title {
    margin: 0 0 8px;
    text-align: center;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--club-brown);
}

.clubSection__subtitle {
    margin: 0 auto 40px;
    max-width: 640px;
    text-align: center;
    font-size: 16px;
    color: rgba(74, 43, 40, .68);
}

.clubBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.clubBtn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.clubBtn--primary {
    background: var(--club-rose);
    color: #fff;
    box-shadow: 0 10px 24px rgba(217, 139, 133, .35);
}

.clubBtn--primary:hover {
    background: #cf7b74;
    color: #fff;
}

.clubBtn--ghost {
    border: 1.5px solid var(--club-teal);
    color: var(--club-teal);
    background: transparent;
}

.clubBtn--ghost:hover {
    background: var(--club-teal);
    color: #fff;
}

.clubBtn--outline {
    border: 1.5px solid var(--club-brown);
    color: var(--club-brown);
    background: transparent;
}

.clubBtn--outline:hover {
    background: var(--club-brown);
    color: #fff;
}

/* --- hero ------------------------------------------------------------------- */

.clubHero {
    text-align: center;
    background: linear-gradient(160deg, #f7e2dc 0%, #f6e7de 45%, #f1ece4 100%);
}

.clubHero__eyebrow {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--club-rose);
}

.clubHero__script {
    margin: 0 0 18px;
    font-family: "Parisienne", "Brush Script MT", cursive;
    font-weight: 400;
    font-size: clamp(56px, 8.5vw, 104px);
    line-height: 1.15;
    color: #3d221f;
}

/* napis jako obrazek (CZ) — sirka odpovida puvodnimu textu v Parisienne */
.clubHero__script--img {
    margin: 0 auto 18px;
    line-height: 0;
}

.clubHero__script--img img {
    display: block;
    width: clamp(240px, 38vw, 440px);
    height: auto;
    margin: 0 auto;
}

.clubHero__title {
    margin: 0 0 18px;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 600;
    color: var(--club-teal);
}

.clubHero__text {
    margin: 0 auto 28px;
    max-width: 680px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(74, 43, 40, .78);
}

.clubHero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.clubHero__chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 6px 16px rgba(74, 43, 40, .06);
}

.clubHero__chips i {
    color: var(--club-rose);
}

.clubHero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* --- pruh se statistikami --------------------------------------------------- */

/* vyssi specificita nez obecne ".clubPage section" — pruh ma byt sevreny */
.clubPage .clubStats {
    padding: 34px 0;
    background: #4a2b28;
    color: #fff;
}

.clubStats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

.clubStat__value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.1;
}

.clubStat__value i {
    font-size: .55em;
    color: var(--club-rose);
}

.clubStat__label {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, .72);
}

/* --- tri kroky -------------------------------------------------------------- */

.clubSteps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    /* všechny karty stejně vysoké a ve stejné linii */
    align-items: stretch;
}

.clubStep {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 28px 30px;
    border-radius: 20px;
    background: #fff;
    text-align: center;
    box-shadow: var(--club-shadow);
    overflow: hidden;
}

.clubStep::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--club-rose);
}

.clubStep--accent::before {
    background: var(--club-teal);
}

.clubStep__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 18px;
    border-radius: 50%;
    font-size: 28px;
    color: #fff;
}

.clubStep__icon--rose {
    background: linear-gradient(145deg, #e09a94, #cf7b74);
}

.clubStep__icon--teal {
    background: linear-gradient(145deg, #3d7f7c, #26575a);
}

.clubStep__badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--club-rose-soft);
    font-size: 13px;
    font-weight: 600;
}

.clubStep--accent .clubStep__badge {
    background: var(--club-teal-soft);
}

.clubStep h3 {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
}

.clubStep p {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(74, 43, 40, .72);
}

.clubStep__highlight {
    font-weight: 700;
    color: var(--club-teal) !important;
}

.clubStep__highlight--rose {
    color: var(--club-rose) !important;
}

.clubSteps__cta {
    margin: 36px auto 0;
    width: fit-content;
    padding: 14px 32px;
    border-radius: 999px;
    background: #fff;
    font-weight: 600;
    box-shadow: var(--club-shadow);
}

/* --- kalkulacka ------------------------------------------------------------- */

.clubCalc__box {
    max-width: 640px;
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--club-shadow);
    background: linear-gradient(150deg, #e58e86 0%, #e9a79c 55%, #2f6b6b 160%);
}

.clubCalc__title {
    margin: 0;
    padding: 22px 24px 4px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.clubCalc__inner {
    margin: 18px;
    padding: 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .16);
}

.clubCalc__label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.clubCalc__field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    border-radius: 10px;
    background: #fff;
}

.clubCalc__field input {
    flex: 1;
    border: 0;
    padding: 10px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--club-brown);
    background: transparent;
}

.clubCalc__field input:focus {
    outline: none;
}

.clubCalc__unit {
    font-size: 18px;
    font-weight: 700;
}

.clubCalc__resultLabel {
    margin: 20px 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}

.clubCalc__rows {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.clubCalc__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.clubCalc__rowName {
    font-weight: 700;
    letter-spacing: .04em;
}

.clubCalc__rowName em {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    font-size: 12px;
    font-style: normal;
}

.clubCalc__rowPoints {
    font-size: 20px;
    font-weight: 700;
    text-align: right;
}

.clubCalc__rowValue {
    grid-column: 1 / -1;
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
}

.clubCalc__tip {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(74, 43, 40, .45);
    font-size: 14px;
    text-align: center;
    color: #fff;
}

.clubCalc__rate {
    padding: 24px;
    text-align: center;
    background: var(--club-cream);
}

.clubCalc__rate strong {
    display: block;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    color: var(--club-rose);
}

.clubCalc__rate span {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    color: rgba(74, 43, 40, .7);
}

.clubCalc__example {
    max-width: 640px;
    margin: 20px auto 0;
    padding: 18px 22px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(74, 43, 40, .06);
}

.clubCalc__exampleLabel {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--club-rose);
}

.clubCalc__exampleItem {
    display: inline-block;
    margin-right: 18px;
    font-size: 15px;
}

/* --- karty (jak ziskas body) ------------------------------------------------ */

.clubEarn__grid,
.clubCare__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.clubCard {
    padding: 26px;
    border: 1px solid var(--club-line);
    border-radius: 18px;
    background: #fff;
}

.clubCard--highlight {
    border-color: var(--club-rose);
}

.clubCard--tip {
    border-color: var(--club-rose);
    background: #fdf1ec;
}

.clubCard__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 14px;
    font-size: 20px;
    color: #fff;
}

.clubCard__icon--rose {
    background: linear-gradient(145deg, #e8a49d, #d98b85);
}

.clubCard__icon--teal {
    background: linear-gradient(145deg, #3d7f7c, #26575a);
}

.clubCard h3 {
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 700;
}

.clubCard p {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(74, 43, 40, .74);
}

.clubCard__value {
    font-size: 28px;
    font-weight: 700;
}

.clubCard__value--teal {
    color: var(--club-teal);
}

.clubCard__value--rose {
    color: var(--club-rose);
}

.clubCard__row {
    font-size: 15px;
}

.clubCard__note {
    margin-top: 10px;
    font-size: 13px;
    font-style: italic;
    color: rgba(74, 43, 40, .55);
}

/* --- urovne ----------------------------------------------------------------- */

.clubLevel {
    max-width: 900px;
    margin: 0 auto 22px;
    border: 1px solid var(--club-line);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}

.clubLevel__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
}

.clubLevel--glow .clubLevel__head {
    background: linear-gradient(90deg, #f7dcd8, #fdf3f0);
}

.clubLevel--radiance .clubLevel__head {
    background: linear-gradient(90deg, #d7e7e4, #f2f8f7);
}

.clubLevel--luxe .clubLevel__head {
    background: linear-gradient(90deg, #e4d6d2, #f6efec);
}

.clubLevel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    font-size: 22px;
    color: #fff;
}

.clubLevel--glow .clubLevel__icon {
    background: linear-gradient(145deg, #e8a49d, #d98b85);
}

.clubLevel--radiance .clubLevel__icon {
    background: linear-gradient(145deg, #3d7f7c, #26575a);
}

.clubLevel--luxe .clubLevel__icon {
    background: linear-gradient(145deg, #5a3a35, #3a2220);
}

.clubLevel__name {
    flex: 1;
}

.clubLevel__name strong {
    display: block;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .04em;
}

.clubLevel__name em {
    font-size: 14px;
    font-style: normal;
    color: rgba(74, 43, 40, .62);
}

.clubLevel__percent {
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    font-size: 20px;
    font-weight: 700;
}

.clubLevel__body {
    padding: 22px 24px 24px;
    border-top: 1px solid var(--club-line);
}

.clubLevel__cashback {
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--club-cream);
}

.clubLevel__cashback strong {
    display: block;
    font-size: 16px;
}

.clubLevel__cashback span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: rgba(74, 43, 40, .62);
}

.clubLevel__perks {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.clubLevel__perks li {
    position: relative;
    padding-left: 30px;
    font-size: 15px;
}

.clubLevel__perks li::before {
    content: "\2726";
    position: absolute;
    left: 6px;
    color: var(--club-rose);
}

.clubLevels__update {
    max-width: 900px;
    margin: 32px auto 0;
    padding: 22px 26px;
    border-radius: 16px;
    background: #fdf6f1;
    text-align: center;
}

.clubLevels__update h3 {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
}

.clubLevels__update p {
    margin: 0 0 8px;
    font-size: 15px;
    color: rgba(74, 43, 40, .72);
}

.clubLevels__updateNote {
    margin-top: 12px !important;
    font-weight: 700;
    color: var(--club-brown) !important;
}

/* --- pece ------------------------------------------------------------------- */

.clubCare {
    text-align: center;
}

.clubCare__lead {
    margin: 0;
    font-size: 18px;
}

.clubCare__leadHighlight {
    margin: 4px 0 18px;
    font-size: 18px;
    font-weight: 600;
    color: var(--club-rose);
}

.clubCare__text {
    margin: 0 auto 36px;
    max-width: 640px;
    color: rgba(74, 43, 40, .7);
}

.clubCare__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    margin: 0 auto;
}

.clubCare__item {
    padding: 26px;
    border: 1px solid var(--club-line);
    border-radius: 16px;
    background: #fff;
}

.clubCare__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 12px;
    font-size: 18px;
}

.clubCare__icon--rose {
    background: #fbe8e4;
    color: var(--club-rose);
}

.clubCare__icon--teal {
    background: #e2efed;
    color: var(--club-teal);
}

.clubCare__item h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
}

.clubCare__item p {
    margin: 0;
    font-size: 15px;
    color: rgba(74, 43, 40, .7);
}

/* --- poradenstvi ------------------------------------------------------------ */

.clubAdvice__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1000px;
    margin: 0 auto;
}

.clubAdvice__card {
    border: 1px solid var(--club-line);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}

.clubAdvice__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
}

.clubAdvice__card--rose .clubAdvice__head {
    background: #fdeeea;
}

.clubAdvice__card--teal .clubAdvice__head {
    background: #e3efed;
}

.clubAdvice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 18px;
    color: #fff;
}

.clubAdvice__card--rose .clubAdvice__icon {
    background: linear-gradient(145deg, #e8a49d, #d98b85);
}

.clubAdvice__card--teal .clubAdvice__icon {
    background: linear-gradient(145deg, #3d7f7c, #26575a);
}

.clubAdvice__head strong {
    display: block;
    font-size: 19px;
    font-weight: 700;
}

.clubAdvice__head em {
    font-size: 14px;
    font-style: normal;
    color: rgba(74, 43, 40, .62);
}

.clubAdvice__badge {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--club-teal);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.clubAdvice__body {
    padding: 20px 22px 24px;
}

.clubAdvice__body p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(74, 43, 40, .78);
}

.clubAdvice__body ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.clubAdvice__body li {
    position: relative;
    padding-left: 28px;
    font-size: 15px;
}

.clubAdvice__body li::before {
    content: "\2726";
    position: absolute;
    left: 4px;
    color: var(--club-rose);
}

.clubAdvice__card--teal .clubAdvice__body li::before {
    color: var(--club-teal);
}

.clubAdvice__note {
    margin: 16px 0 0 !important;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--club-cream);
    font-size: 13px;
    text-align: center;
}

.clubAdvice__footer {
    margin: 30px 0 0;
    text-align: center;
    font-size: 16px;
    color: rgba(74, 43, 40, .7);
}

/* --- FAQ -------------------------------------------------------------------- */

.clubFaq__list {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.clubFaq__item {
    border: 1px solid var(--club-rose-soft);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.clubFaq__item:nth-child(even) {
    border-color: var(--club-teal-soft);
}

.clubFaq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 22px;
    border: 0;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    color: var(--club-brown);
    cursor: pointer;
}

.clubFaq__question i {
    font-size: 14px;
    color: rgba(74, 43, 40, .5);
    transition: transform .2s ease;
}

.clubFaq__question[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.clubFaq__answer {
    padding: 0 22px 18px;
}

.clubFaq__answer p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(74, 43, 40, .74);
}

/* --- zaverecne CTA ---------------------------------------------------------- */

.clubCta {
    text-align: center;
    background: linear-gradient(140deg, #f7e6e1 0%, #f4ece4 50%, #e4ece9 100%);
}

.clubCta__icon {
    display: block;
    margin-bottom: 18px;
    font-size: 40px;
    color: var(--club-rose);
}

.clubCta__title {
    margin: 0 0 14px;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
}

.clubCta__text {
    margin: 0 0 8px;
    font-size: 17px;
    color: rgba(74, 43, 40, .78);
}

.clubCta__script {
    margin: 0 0 26px;
    font-size: 22px;
    font-weight: 700;
    color: var(--club-rose);
}

.clubCta__script--img {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.clubCta__scriptImg {
    width: clamp(150px, 20vw, 210px);
    height: auto;
}

.clubCta__heart {
    width: auto;
    height: 44px;
}

.clubCta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.clubCta__note {
    margin: 26px auto 0;
    max-width: 560px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(74, 43, 40, .55);
}

/* --- responzivita ----------------------------------------------------------- */

@media (max-width: 991px) {
    .clubSteps__grid,
    .clubEarn__grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 767px) {
    .clubPage section {
        padding: 44px 0;
    }

    .clubSteps__grid,
    .clubEarn__grid,
    .clubCare__grid,
    .clubAdvice__grid {
        grid-template-columns: 1fr;
    }

    .clubLevel__head {
        flex-wrap: wrap;
    }

    .clubLevel__percent {
        margin-left: auto;
    }

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

    .clubCalc__rowPoints {
        text-align: left;
    }

    .clubCalc__exampleItem {
        display: block;
        margin: 4px 0 0;
    }
}

/* --- stav prihlasene clenky ------------------------------------------------ */

.clubMember__box {
    background: #fff;
    border: 1px solid var(--club-line);
    border-radius: 18px;
    box-shadow: var(--club-shadow);
    padding: 32px;
    text-align: center;
}

.clubMember__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px;
}

.clubMember__level {
    display: inline-block;
    background: var(--club-teal-soft);
    color: var(--club-teal);
    border-radius: 999px;
    font-weight: 700;
    padding: 6px 18px;
    margin: 0 0 12px;
}

.clubMember__percent,
.clubMember__orders,
.clubMember__points {
    margin: 0 0 6px;
}

.clubMember__points {
    font-weight: 700;
}

.clubMember__next {
    color: var(--club-rose);
    font-weight: 600;
    margin: 12px 0 20px;
}

@media (max-width: 575px) {
    .clubMember__box {
        padding: 24px 18px;
    }
}