/*
 * صفحه حساب کاربری — the [pepro-profile] login form.
 *
 * Redesigned 2026-07-28 (client-approved mockup): the logged-out form is the
 * same glossy green glass card as the header popup and the login screen, so
 * assets/geranset-login-widget.css carries the whole visual treatment. This
 * file only places the card on the page and undoes the UPS 8.x defaults the
 * widget stylesheet cannot reach from its #pepro-profile scope.
 *
 * The earlier version of this file recreated the UPS 2.4 layout (large avatar,
 * flat cream form, brown button) — replaced wholesale by the new design, and
 * its `background: transparent !important` on the container is exactly what
 * would blank the card if it came back.
 */

/* Centre the card and keep it at the mockup's width on a full page. */
.login-form-container {
	max-width: 440px;
	margin: 24px auto;
}

/* Mobile OTP only. The email form is already off in the UPS settings
   (login-branding.php asserts it); this covers the switcher should a future
   UPS update re-render tabs regardless. */
.pepro-login-reg-container .switcher {
	display: none !important;
}

/* UPS 8.x hides the form heading; show it, styled by the widget stylesheet. */
#pepro-profile .pepro-login-reg h6,
.pepro-login-reg h6 {
	display: block !important;
}

/* ==========================================================================
   Logged-in dashboard — full width
   --------------------------------------------------------------------------
   The dashboard is a 300px sidebar next to a content column, and it needs
   room. Inside the theme's 1170px container only 790px is left for the
   content, which is not enough for the four statistic cards: three fit and
   the fourth wraps onto a line of its own, stretched across the full width.
   The live site runs it at 1140px and all four sit on one row.

   Break the page out of the theme container so it has the same room. Scoped
   to the dashboard, so the logged-out login form keeps its centred card.
   ========================================================================== */

.profile-page-wrapper {
	width: 100%;
}

body.geranset-profile-page .entry-content > .wp-block-columns,
body.geranset-profile-page .entry-content > .wp-block-columns > .wp-block-column {
	max-width: none !important;
	width: auto !important;
	flex-basis: auto !important;
}

/* `.site-content.container-wrapper` is the element that actually caps the
   page, at max-width:1200px. Everything below it simply inherits.
   
   The live dashboard is full-bleed — it replaces the page entirely and its
   statistic cards get ~360px each. Capping this at 1460px left them around
   180px, narrow enough that the labels broke mid-word. The site header stays
   (so customers can get back to the shop) but the panel itself takes the whole
   window, which is what makes the cards read like the live ones. */
body.geranset-profile-page .site-content.container-wrapper {
	max-width: none !important;
	width: 100% !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}

/* The four statistic cards sit on one row, as on the live site.
   Bootstrap's col-lg-3 does not resolve to a quarter inside this container —
   the columns come out ~227px against an available 730px — so the fourth wraps
   onto a line of its own and stretches full width. A grid removes the
   arithmetic. */
/* `.d-flex` also carries `display:flex !important` from Bootstrap, so the
   selector has to out-specify it, not just come later. */
body.geranset-profile-page .row.wc_stats,
body.geranset-profile-page .row.wc_stats.d-flex {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 18px;
	margin: 0 0 26px !important;
}

/* Equal shares of the row, and `nowrap` above keeps all four on it. Grid was
   tried first: auto-placement kept dropping the fourth card onto a second row
   even with four explicit tracks. */
body.geranset-profile-page .row.wc_stats > [class*="col-"] {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.geranset-profile-page .row.wc_stats .overview-item {
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
}

/* Icon beside the figure rather than behind it. */
body.geranset-profile-page .overview-box {
	display: flex;
	align-items: center;
	gap: 12px;
}

body.geranset-profile-page .overview-box .icon {
	flex: 0 0 auto;
	font-size: 34px;
	line-height: 1;
	opacity: .55;
}

body.geranset-profile-page .overview-box .text {
	flex: 1 1 auto;
	min-width: 0;
}

body.geranset-profile-page .overview-box .text h2 {
	margin: 0 0 2px;
	font-size: 26px;
	line-height: 1.1;
}

body.geranset-profile-page .overview-box .text span {
	display: block;
	font-size: 13px;
	line-height: 1.5;
}

@media screen and ( max-width: 900px ) {
	body.geranset-profile-page .row.wc_stats,
	body.geranset-profile-page .row.wc_stats.d-flex {
		flex-wrap: wrap !important;
	}
	body.geranset-profile-page .row.wc_stats > [class*="col-"] {
		flex: 1 1 calc( 50% - 9px ) !important;
	}
}

@media screen and ( max-width: 520px ) {
	body.geranset-profile-page .row.wc_stats > [class*="col-"] {
		flex: 1 1 100% !important;
	}
}

/* ==========================================================================
   Order-table action buttons
   --------------------------------------------------------------------------
   2.4 rendered these with Bootstrap's `btn btn-outline-primary`, which the
   dashboard theme styled. 8.x renames them `us-btn-style_2`, which nothing
   styles, so they came out as bare text links. The semantic classes — .view
   and the two invoice ones — are unchanged between versions, so they are what
   this keys on. Colours taken from the live site: green rgb(67,159,95) for
   view, brown rgb(191,156,101) for the invoices.
   ========================================================================== */

body.geranset-profile-page .table-data__tool a.woocommerce-button,
body.geranset-profile-page td a.woocommerce-button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 2px 3px;
	padding: 9px 12px;
	border: none;
	border-radius: 6px;
	background: #bf9c65;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: filter .15s ease;
}

body.geranset-profile-page .table-data__tool a.woocommerce-button.view,
body.geranset-profile-page td a.woocommerce-button.view {
	background: #439f5f;
}

body.geranset-profile-page .table-data__tool a.woocommerce-button:hover,
body.geranset-profile-page td a.woocommerce-button:hover {
	filter: brightness( .92 );
	color: #fff !important;
}

/* ==========================================================================
   Width caps inside the dashboard itself
   --------------------------------------------------------------------------
   Two more caps sit below the theme container and both had to go, or the
   statistic cards stay ~160px wide and their labels break mid-word:

     .main-content            max-width: 820px  (from the restored UPS theme,
                                                 which assumed a fixed layout)
     .wp-block-column         held at 1200px by the block editor's own layout

   With these lifted the row gets the full window and the cards land near the
   ~360px they occupy on the live site.
   ========================================================================== */

body.geranset-profile-page .profile-page-wrapper,
body.geranset-profile-page .entry-content > .wp-block-columns,
body.geranset-profile-page .entry-content > .wp-block-columns > .wp-block-column {
	width: 100% !important;
	max-width: 100% !important;
	flex-basis: 100% !important;
}

body.geranset-profile-page .main-content,
body.geranset-profile-page .main-content.section- {
	max-width: none !important;
	width: auto !important;
}

body.geranset-profile-page .section__content,
body.geranset-profile-page .container-fluid {
	max-width: none !important;
	width: auto !important;
}

/* Labels on one line where there is room, rather than breaking mid-word. */
body.geranset-profile-page .overview-box .text span {
	overflow-wrap: normal;
	word-break: keep-all;
}

/* ==========================================================================
   Dashboard sidebar
   --------------------------------------------------------------------------
   2.4 rendered a white rail: the shop logo at the top, then rows of 56px with
   a 16px label. 8.x keeps the same `nav.navbar-sidebar > ul.navbar__list`
   structure but drops the logo block, adds an avatar row, and inherits an 18px
   font from the theme — which pushed every row to ~77px and left the rail
   looking sparse and oversized. Measured side by side:

       reference   white   5 rows   56px each   16px text
       before      grey    8 rows   77px each   18px text

   The logo is painted on the rail rather than added to the markup, because the
   markup belongs to the plugin and anything injected would be lost on update.
   ========================================================================== */

body.geranset-profile-page .menu-sidebar {
	background: #fff !important;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, .06 );
}

/* The shop logo, where 2.4 put it. */
/* The shop's logo asset is the white version used on the dark site header, so
   the strip behind it is painted brand green rather than left white — a white
   logo on a white rail is invisible. */
body.geranset-profile-page .menu-sidebar__content::before {
	content: "";
	display: block;
	height: 66px;
	margin: 0 0 8px;
	background-color: #1a3b24;
	background-image: var( --gs-dash-logo, none );
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 32px;
}

body.geranset-profile-page .navbar__list > li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 22px !important;
	font-size: 16px !important;
	line-height: 1.4;
}

body.geranset-profile-page .navbar__list > li > a i {
	flex: 0 0 auto;
	font-size: 17px;
}

/* The avatar row: a 48px circle beside the greeting, not a 163px block. */
body.geranset-profile-page .navbar__list > li.user-icon {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 22px;
	border-bottom: 1px solid #eceded;
}

body.geranset-profile-page .navbar__list > li.user-icon img.avatar {
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	border-radius: 50%;
	object-fit: cover;
	background: #eceded;
}

body.geranset-profile-page .navbar__list > li.user-icon .user_name_display {
	width: auto !important;
	margin: 0 !important;
	font-size: 15px;
	font-weight: 700;
	color: #4a4238;
}

/* The rows carried their own margin on top of the link padding, which is what
   kept them at ~77px against the reference's 56px. */
body.geranset-profile-page .navbar__list,
body.geranset-profile-page .navbar__list > li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

body.geranset-profile-page .navbar__list > li > a {
	padding: 15px 22px !important;
	line-height: 1.5;
}

body.geranset-profile-page .navbar__list > li.user-icon {
	padding: 14px 22px !important;
}