/* =========================================================
   Rosha Club — عضویت در باشگاه مشتریان روشا
   Page-specific stylesheet extracted from Blade.
   ========================================================= */

:root {
            --rm-dark: #292927;
            --rm-dark-2: #343431;
            --rm-gold: #c4a25f;
            --rm-gold-soft: #f7f0e3;
            --rm-bg: #f4f3ef;
            --rm-card: #ffffff;
            --rm-text: #2f2f2c;
            --rm-muted: #76746d;
            --rm-line: #e5e1d8;
            --rm-success: #238260;
            --rm-danger: #bd4a4a;
        }

        html,
        body {
            min-height: 100%;
        }

        body.membership-page {
            margin: 0 !important;
            padding: 0 !important;
            direction: rtl;
            background: var(--rm-bg) !important;
            color: var(--rm-text);
            font-family: yj, Tahoma, Arial, sans-serif !important;
            font-size: 14px;
            line-height: 1.9;
        }

        .membership-page,
        .membership-page * {
            box-sizing: border-box;
        }

        .membership-page input,
        .membership-page select,
        .membership-page button,
        .membership-page textarea {
            font-family: yj, Tahoma, Arial, sans-serif !important;
        }

        .membership-layout {
            width: 100%;
            max-width: 1120px;
            margin: 0 auto;
            padding: 28px 18px 54px;
        }

        .membership-hero {
            position: relative;
            min-height: 270px;
            overflow: hidden;
            padding: 38px 42px 76px;
            border-radius: 24px;
            background: var(--rm-dark);
            color: #fff;
            box-shadow: 0 17px 44px rgba(34, 34, 31, .11);
        }

        .membership-hero::before {
            content: "";
            position: absolute;
            top: -125px;
            left: -90px;
            width: 315px;
            height: 315px;
            border: 48px solid rgba(196, 162, 95, .11);
            border-radius: 50%;
        }

        .membership-hero::after {
            content: "";
            position: absolute;
            right: -105px;
            bottom: -180px;
            width: 310px;
            height: 310px;
            border: 42px solid rgba(255, 255, 255, .025);
            border-radius: 50%;
        }

        .membership-hero-inner {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 34px;
        }

        .membership-hero-copy {
            max-width: 760px;
        }

        .membership-kicker {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 11px;
            color: #dbba77;
            font-size: 13px;
            font-weight: 700;
        }

        .membership-kicker::before {
            content: "";
            width: 25px;
            height: 2px;
            border-radius: 5px;
            background: #dbba77;
        }

        .membership-hero h1 {
            margin: 0 0 12px;
            color: #fff;
            font-size: 29px;
            font-weight: 700;
            line-height: 1.75;
        }

        .membership-hero p {
            max-width: 720px;
            margin: 0;
            color: #d2d1cc;
            font-size: 14px;
            line-height: 2.15;
        }

        .membership-benefits {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-top: 20px;
        }

        .membership-benefit {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 11px;
            border: 1px solid rgba(219, 186, 119, .22);
            border-radius: 999px;
            background: rgba(255, 255, 255, .045);
            color: #e7e3d9;
            font-size: 12px;
            line-height: 1.6;
        }

        .membership-benefit i {
            color: #dbba77;
        }

        .membership-hero-icon {
            display: flex;
            width: 76px;
            height: 76px;
            flex: 0 0 76px;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(219, 186, 119, .32);
            border-radius: 22px;
            background: rgba(255, 255, 255, .05);
            color: #dbba77;
            font-size: 30px;
        }

        .membership-home-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin-top: 19px;
            color: #e5c888;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
        }

        .membership-home-link:hover,
        .membership-home-link:focus {
            color: #fff;
            text-decoration: none;
        }

        body.membership-page .register-box.membership-card {
            position: relative;
            z-index: 3;
            width: calc(100% - 50px) !important;
            max-width: none !important;
            min-height: 0 !important;
            margin: -46px auto 0 !important;
            padding: 31px 32px 34px !important;
            float: none !important;
            border: 1px solid var(--rm-line) !important;
            border-radius: 21px !important;
            background: var(--rm-card) !important;
            box-shadow: 0 15px 38px rgba(35, 35, 31, .075) !important;
            color: var(--rm-text) !important;
        }

        .membership-card-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 22px;
            margin-bottom: 24px;
            padding-bottom: 21px;
            border-bottom: 1px solid #eeeae2;
        }

        .membership-card-head h2 {
            margin: 3px 0 5px;
            color: var(--rm-text);
            font-size: 20px;
            font-weight: 700;
            line-height: 1.8;
        }

        .membership-card-head p {
            margin: 0;
            color: var(--rm-muted);
            font-size: 13px;
            line-height: 2;
        }

        .membership-card-label {
            color: #a07c3e;
            font-size: 12px;
            font-weight: 700;
        }

        .membership-step {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border: 1px solid #eadfc9;
            border-radius: 999px;
            background: #fbf7ef;
            color: #896a35;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
        }

        body.membership-page .membership-form {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px 20px;
            width: 100%;
            margin: 0;
        }

        body.membership-page .membership-form > .alert,
        body.membership-page .membership-form > .form-section-title,
        body.membership-page .membership-form > .membership-location-row,
        body.membership-page .membership-form > .membership-mobile-row,
        body.membership-page .membership-form > #mobileAjaxMsg,
        body.membership-page .membership-form > small.help-block,
        body.membership-page .membership-form > #plateGroup,
        body.membership-page .membership-form > .membership-submit {
            grid-column: 1 / -1;
        }

        body.membership-page .membership-form > .form-group {
            min-width: 0;
            margin: 0 !important;
        }

        .form-section-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 6px 0 0;
            padding: 0 0 12px;
            border-bottom: 1px solid #eeeae2;
            color: #373733;
            font-size: 15px;
            font-weight: 700;
            line-height: 1.8;
        }

        .form-section-title:first-of-type {
            margin-top: 0;
        }

        .form-section-title i {
            display: inline-flex;
            width: 31px;
            height: 31px;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            background: var(--rm-gold-soft);
            color: #9b7637;
            font-size: 13px;
        }

        body.membership-page .form-group label {
            display: block;
            margin: 0 0 8px !important;
            color: #3a3a36;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.8;
        }

        body.membership-page .input-group {
            display: flex !important;
            width: 100% !important;
            direction: rtl;
        }

        body.membership-page .input-group .form-control {
            position: relative;
            z-index: 1;
            flex: 1 1 auto;
            width: 1% !important;
            min-width: 0;
            border-radius: 0 11px 11px 0 !important;
        }

        body.membership-page .input-group-addon {
            display: flex !important;
            width: 48px !important;
            min-width: 48px;
            height: 49px;
            align-items: center;
            justify-content: center;
            padding: 0 !important;
            border: 1px solid #ded9cf !important;
            border-right: 0 !important;
            border-radius: 11px 0 0 11px !important;
            background: #f7f4ed !important;
            color: #a07c3e !important;
            font-size: 15px;
        }

        body.membership-page .form-control {
            display: block;
            width: 100% !important;
            height: 49px;
            margin: 0 !important;
            padding: 10px 13px !important;
            border: 1px solid #ded9cf !important;
            border-radius: 11px !important;
            background: #fff !important;
            color: #30302d !important;
            font-size: 14px !important;
            line-height: 1.8 !important;
            box-shadow: none !important;
            outline: none !important;
            transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
        }

        body.membership-page input[type="tel"],
        body.membership-page input[type="email"] {
            direction: ltr;
            text-align: left;
        }

        body.membership-page input[readonly] {
            cursor: pointer;
            background: #fcfbf8 !important;
        }

        body.membership-page .form-control:hover {
            border-color: #cbc4b7 !important;
        }

        body.membership-page .form-control:focus {
            border-color: #b69150 !important;
            background: #fff !important;
            box-shadow: 0 0 0 3px rgba(182, 145, 80, .11) !important;
        }

        body.membership-page .form-control:disabled {
            cursor: not-allowed;
            border-color: #e8e5de !important;
            background: #f3f2ef !important;
            color: #9b9992 !important;
            opacity: 1;
        }

        body.membership-page .has-error .form-control,
        body.membership-page .has-error .input-group-addon {
            border-color: #cf6969 !important;
        }

        body.membership-page .has-success .form-control,
        body.membership-page .has-success .input-group-addon {
            border-color: #55a589 !important;
        }

        body.membership-page .help-block,
        body.membership-page .marriageDate {
            display: block;
            margin: 7px 2px 0 !important;
            color: var(--rm-danger) !important;
            font-size: 12px !important;
            font-weight: 500;
            line-height: 1.8;
        }

        body.membership-page #mobileHelp {
            color: #a85a3d !important;
        }

        body.membership-page #mobileAjaxMsg {
            min-height: 22px;
            margin: -8px 2px 0 !important;
            font-size: 13px !important;
            font-weight: 700;
        }

        body.membership-page .text-success {
            color: var(--rm-success) !important;
        }

        body.membership-page .text-danger {
            color: var(--rm-danger) !important;
        }

        body.membership-page .alert {
            margin: 0 !important;
            padding: 14px 16px !important;
            border: 1px solid !important;
            border-radius: 12px !important;
            font-size: 13px;
            line-height: 2;
        }

        body.membership-page .alert-success {
            border-color: #cae4da !important;
            background: #eff9f5 !important;
            color: #23765c !important;
        }

        body.membership-page .alert-info {
            border-color: #d9dfeb !important;
            background: #f4f7fb !important;
            color: #4f607b !important;
        }

        body.membership-page .alert-danger {
            border-color: #eed0d0 !important;
            background: #fff5f5 !important;
            color: #a74444 !important;
        }

        body.membership-page .alert a {
            color: #8b6830;
            font-weight: 700;
        }

        body.membership-page .alert ul {
            margin: 0 !important;
            padding-right: 19px !important;
        }

        .membership-mobile-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(260px, .92fr);
            align-items: start;
            gap: 0 20px;
            width: 100%;
        }

        .membership-mobile-row > .form-group {
            min-width: 0;
            margin: 0 !important;
        }

        .membership-mobile-action {
            min-width: 0;
            padding-top: 33px;
        }

        .membership-mobile-feedback {
            grid-column: 1 / -1;
            min-height: 24px;
            padding-top: 7px;
        }

        .membership-mobile-feedback:empty {
            min-height: 0;
            padding-top: 0;
        }

        body.membership-page .membership-check-btn {
            display: flex !important;
            width: 100% !important;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 49px;
            margin: 0 !important;
            border: 1px solid #d9cfbb !important;
            border-radius: 11px !important;
            background: #fbf7ee !important;
            color: #75582d !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            box-shadow: none !important;
            transition: .18s ease;
        }

        body.membership-page .membership-check-btn:hover,
        body.membership-page .membership-check-btn:focus {
            border-color: #c3a66e !important;
            background: #f6ecda !important;
            color: #55401f !important;
        }

        body.membership-page .membership-check-btn:disabled {
            opacity: .65;
            cursor: wait;
        }

        body.membership-page .membership-location-row {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: start;
            gap: 20px;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        body.membership-page .membership-location-row::before,
        body.membership-page .membership-location-row::after {
            display: none !important;
            content: none !important;
        }

        body.membership-page .membership-location-row > [class*="col-"] {
            display: block !important;
            width: auto !important;
            min-width: 0;
            margin: 0 !important;
            padding: 0 !important;
            float: none !important;
        }

        body.membership-page .membership-location-row .form-group {
            width: 100%;
            margin: 0 !important;
        }

        body.membership-page .membership-location-row .form-control {
            width: 100% !important;
        }

        body.membership-page .plate-wrapper {
            display: grid !important;
            grid-template-columns: 118px minmax(90px, 1fr) 100px minmax(85px, .8fr);
            align-items: stretch;
            gap: 9px;
            width: 100%;
            direction: rtl;
        }

        body.membership-page .plate-rightbox {
            display: grid;
            grid-template-columns: 1fr 58px;
            overflow: hidden;
            min-height: 56px;
            border: 1px solid #20201e;
            border-radius: 10px;
            background: #fff;
        }

        body.membership-page .plate-iran {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px;
            background: #1246a2;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
        }

        body.membership-page .plate-input,
        body.membership-page .plate-letter {
            width: 100% !important;
            height: 56px !important;
            margin: 0 !important;
            padding: 7px !important;
            border: 1px solid #20201e !important;
            border-radius: 10px !important;
            background: #fff !important;
            color: #1f1f1d !important;
            font-size: 17px !important;
            font-weight: 700;
            text-align: center;
            box-shadow: none !important;
        }

        body.membership-page .plate-rightbox .plate-city {
            height: 100% !important;
            border: 0 !important;
            border-radius: 0 !important;
        }

        body.membership-page .membership-submit {
            display: inline-flex !important;
            min-height: 50px;
            align-items: center;
            justify-content: center;
            gap: 9px;
            margin: 8px 0 0 !important;
            padding: 11px 20px !important;
            border: 1px solid var(--rm-dark) !important;
            border-radius: 12px !important;
            background: var(--rm-dark) !important;
            color: #fff !important;
            font-size: 15px !important;
            font-weight: 700 !important;
            box-shadow: 0 9px 21px rgba(41, 41, 39, .15) !important;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
        }

        body.membership-page .membership-submit:hover,
        body.membership-page .membership-submit:focus {
            transform: translateY(-1px);
            background: #1e1e1d !important;
            box-shadow: 0 12px 26px rgba(41, 41, 39, .19) !important;
        }

        body.membership-page .membership-submit:disabled {
            opacity: .55;
            cursor: not-allowed;
            transform: none;
            box-shadow: none !important;
        }

        .membership-footer-note {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            width: calc(100% - 50px);
            margin: 15px auto 0;
            padding: 0 4px;
            color: #77756f;
            font-size: 12px;
            line-height: 2;
        }

        .membership-footer-note i {
            margin-top: 5px;
            color: var(--rm-gold);
        }

        body.membership-page .datepicker-plot-area {
            z-index: 99999 !important;
            overflow: hidden;
            border: 1px solid #ddd8cf !important;
            border-radius: 14px !important;
            font-family: yj, Tahoma, Arial, sans-serif !important;
            box-shadow: 0 14px 36px rgba(30, 30, 27, .15) !important;
        }

        @media (max-width: 767px) {
            .membership-layout {
                padding: 15px 10px 36px;
            }

            .membership-hero {
                min-height: 0;
                padding: 27px 22px 62px;
                border-radius: 18px;
            }

            .membership-hero h1 {
                font-size: 23px;
            }

            .membership-hero p {
                font-size: 13px;
            }

            .membership-hero-icon {
                width: 56px;
                height: 56px;
                flex-basis: 56px;
                border-radius: 17px;
                font-size: 23px;
            }

            body.membership-page .register-box.membership-card {
                width: calc(100% - 14px) !important;
                margin-top: -38px !important;
                padding: 22px 17px 25px !important;
                border-radius: 17px !important;
            }

            .membership-card-head {
                display: block;
            }

            .membership-step {
                margin-top: 12px;
            }

            body.membership-page .membership-form {
                grid-template-columns: 1fr;
                gap: 17px;
            }

            body.membership-page .membership-form > .alert,
            body.membership-page .membership-form > .form-section-title,
            body.membership-page .membership-form > .membership-location-row,
            body.membership-page .membership-form > .membership-mobile-row,
            body.membership-page .membership-form > #mobileAjaxMsg,
            body.membership-page .membership-form > small.help-block,
            body.membership-page .membership-form > #plateGroup,
            body.membership-page .membership-form > .membership-submit {
                grid-column: auto;
            }

            .membership-mobile-row {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .membership-mobile-action {
                padding-top: 0;
            }

            .membership-mobile-feedback {
                grid-column: auto;
                padding-top: 0;
            }

            body.membership-page .membership-check-btn {
                margin-top: 0 !important;
            }

            body.membership-page .membership-location-row {
                grid-template-columns: 1fr;
                gap: 17px;
            }

            body.membership-page .plate-wrapper {
                grid-template-columns: 1fr 1fr;
            }

            body.membership-page .plate-rightbox {
                grid-column: 1 / -1;
            }

            .membership-footer-note {
                width: calc(100% - 14px);
            }
        }

        @media (max-width: 470px) {
            .membership-hero-icon {
                display: none;
            }

            .membership-benefits {
                display: grid;
                grid-template-columns: 1fr;
            }

            .membership-benefit {
                justify-content: flex-start;
            }

            body.membership-page .plate-wrapper {
                grid-template-columns: 1fr;
            }

            body.membership-page .plate-rightbox {
                grid-column: auto;
            }
        }