/*
 * Merchant portal shapes, the same as the dashboard (public/admin/assets/css/doobly-theme.css):
 * every input and dropdown field fully round (text areas: large radius so text corners are not clipped),
 * dropdown lists and menus rounded, cards 14px. Loaded after style.css so it wins.
 */
:root { --dv-radius-card: 14px; --dv-radius-pill: 999px; }

/* ---------- Inputs and dropdown fields: fully round ---------- */
.form-control,
.form-select,
.custom-select,
input[type=text], input[type=email], input[type=number], input[type=password], input[type=tel],
input[type=search], input[type=date], input[type=time], input[type=url],
.form-group .inputGroup .form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.input-group > .form-control,
.iti input {
    border-radius: var(--dv-radius-pill) !important;
}
textarea, textarea.form-control, .form-group .inputGroup textarea.form-control { border-radius: 24px !important; }
.form-group .inputGroup .form-control { padding-inline-end: 18px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { border-radius: var(--dv-radius-pill); }
.select2-dropdown { border-radius: 16px !important; overflow: hidden; }
.select2-container--default .select2-search--dropdown .select2-search__field { border-radius: var(--dv-radius-pill) !important; }

/* ---------- Dropdown lists and menus ---------- */
.dropdown-menu, .DropAccountMenu { border-radius: 14px !important; }
.flatpickr-calendar, .datetimepicker.dropdown-menu { border-radius: 16px !important; }

/* ---------- Cards ---------- */
.BoxCard, .itemTahseel, .infoCal, .createShippigBox, .AddCustomShippingBox, .imageBox,
.Table_style_1 { border-radius: var(--dv-radius-card) !important; }
.Table_style_1 { overflow: clip; }
.modal-content { border-radius: 18px !important; }

/* ---------- Buttons: pill, like the dashboard (a pill on a square icon-only button is a circle) ---------- */
.theme-btn, .btn, [class*="btn_style"], .search-btn, .filterBTN, .notificationBTN,
.modal .btn-close, .swal2-confirm, .swal2-cancel, .sweet-alert button {
    border-radius: var(--dv-radius-pill) !important;
}

/* Icon-only buttons: the icon sits exactly in the middle (some had min-width / padding that pushed it aside) */
.theme-btn.w_44px.h_44px, .theme-btn.w_44px, .search-btn, .notificationBTN {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 0; padding: 0 !important; gap: 0;   /* gap + the empty ::after item pushed the icon 2px aside */
}
.theme-btn.w_44px img, .search-btn img, .notificationBTN img { margin: 0 !important; display: block; }

/* ---------- Close buttons: round, grey, darker on hover (same as the dashboard's side panels) ---------- */
.closeIcon, .FilterSideBare .FilterHeader .closeIcon, .superAgentRight .FarzSideBare .FarzHeader .closeIcon {
    width: 36px; height: 36px; flex: none;
    border-radius: 50% !important; border: 0 !important;
    background: #eef1f3 !important;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s;
}
.closeIcon:hover, .FilterSideBare .FilterHeader .closeIcon:hover { background: #e2e6ea !important; }
.closeIcon img, .FilterSideBare .FilterHeader .closeIcon img { width: 14px; height: 14px; display: block; }
.FilterSideBare .FilterHeader .closeIcon:hover img { filter: none; }
.modal .btn-close { transition: background .15s; }
.modal .btn-close:hover { background: #eef1f3; }

/* ---------- Fields: more room inside, left and right ---------- */
.form-control:not(textarea) { padding-inline: 22px; }
textarea.form-control { padding: 14px 22px; }
.form-group .inputGroup .form-control { padding-inline-end: 26px; }
.form-group .inputGroup:has(.IconSHape) .form-control { padding-inline-start: 58px; }
/* the icons sit a little inside the rounded edge instead of touching it */
.form-group .inputGroup .IconSHape { right: 10px !important; left: auto !important; }
.form-group .inputGroup .IconSHape_2, .form-group .inputGroup .IconSHape_2_d { left: 10px !important; right: auto !important; }
.form-group .inputGroup:has(.IconSHape) .select2-selection--single { padding-inline-start: 48px !important; }
.form-group .inputGroup:has(.IconSHape_2_d) .select2-selection--single,
.form-group .inputGroup:has(.IconSHape_2) .select2-selection--single { padding-inline-end: 36px !important; }
.form-group .inputGroup:has(.IconSHape) .select2-selection--multiple { padding-inline-start: 48px !important; }

/* Account button in the side menu: shorter, and more room on the left (arrow side) */
body:not(.vertical-collpsed) .AccountDropMenu { padding: 7px 12px 7px 26px; height: 54px !important; }
body:not(.vertical-collpsed) .AccountDropMenu .userInfooo .UserName p { line-height: 20px; }
body:not(.vertical-collpsed) .AccountDropMenu .userInfooo .UserName span { line-height: 16px; }

/* Phones and tablets: the search field takes the free space and the buttons sit beside it (not under it) */
@media (max-width: 991.98px) {
    .PageHeader .leftSide.btns-fixed-right { width: 100%; align-self: stretch; flex-wrap: wrap; }
    .PageHeader .leftSide.btns-fixed-right > .form-group { flex: 1 1 180px; width: auto; min-width: 0; margin-bottom: 0; }
    .PageHeader .leftSide.btns-fixed-right > .theme-btn { flex: none; }
}

/* Phone field: the country box is a round pill inside the field, not a grey square poking out of its corner */
.iti__flag-container { padding: 4px !important; }
.iti__selected-flag { border-radius: 999px !important; height: 100% !important; padding: 0 12px 0 10px !important; }
.iti--separate-dial-code input.form-control, .iti input.form-control { padding-left: 108px; }

/* ---------- Button hover: one effect for all, like the dashboard ----------
 * Solid buttons get a darker shade of their own colour, soft buttons a slightly stronger tint.
 * The old diagonal colour wipe (::before) and its colour change are gone. */
[class*="btn_style"] { transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s !important; }
[class*="btn_style"]::before { display: none !important; }
[class*="btn_style"]:hover img { filter: none !important; }

/* solid teal */
.btn_style_green:hover, .btn_style_green:focus-visible,
.btn_style_green_hover_light:hover, .btn_style_green_hover_light:focus-visible {
    background: #005f61 !important; border-color: #005f61 !important; color: #fff !important;
}
/* solid green */
.btn_style_green_open:hover, .btn_style_green_open:focus-visible,
.btn_style_yellow:hover, .btn_style_yellow:focus-visible {
    background: #17964f !important; border-color: #17964f !important; color: #fff !important;
}
/* solid red */
.btn_style_danger:hover, .btn_style_danger:focus-visible {
    background: #b32220 !important; border-color: #b32220 !important; color: #fff !important;
}
/* soft teal / red / green */
.btn_style_green_light:hover { background: rgba(0, 123, 125, .14) !important; color: #007B7D !important; }
.btn_style_danger_light:hover { background: rgba(211, 42, 40, .14) !important; color: #d32a28 !important; }
.btn_style_yellow_light:hover { background: rgba(29, 178, 97, .16) !important; color: #1DB261 !important; }
/* neutral */
.btn_style_gray_light:hover { background: #eef1f3 !important; color: #4b5560 !important; }
.btn_style_light:hover { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }

/* row actions, bell, search icon button */
.Table_style_1 .ActionsGroup .optionItem { transition: background-color .15s, border-color .15s; }
.Table_style_1 .ActionsGroup .optionItem:hover { background: #f2f5f6; }
.notificationBTN:hover { background: rgba(29, 178, 97, .28) !important; }
/* the menu button is as tall as the header: its circle is the picture inside, so only that reacts (a background would make a tall capsule) */
#vertical-menu-btn:hover, #vertical-menu-btn:focus { background: transparent !important; }
#vertical-menu-btn img { transition: filter .15s, transform .15s; }
#vertical-menu-btn:hover img { filter: brightness(1.35) saturate(1.3); transform: scale(1.05); }

/* ---------- Icon tiles are round everywhere (a pill on a square is a circle) ---------- */
.infoCal .icon, .itemTahseel .icon, .itemref .icon, .ActivityItem .icon,
.leftSideNotfication .icon, .page-content .icon, .modal .icon { border-radius: 999px !important; }

/* Dropdown buttons with a label (the chart's period picker): room inside, text not on the edge */
.dropdown > button.search-btn:has(span) { padding: 0 18px !important; gap: 10px; min-width: 0; }

/* ---------- Add-shipment field list: rows stay flat, active only gets a soft tint (no pill outline) ---------- */
.AddCustomShippingBox .GridItems .ItemBox .form-control,
.AddCustomShippingBox .GridItems .ItemBox .form-control:focus,
.AddCustomShippingBox .GridItems .ItemBox textarea.form-control,
.AddCustomShippingBox .GridItems .ItemBox textarea.form-control:focus {
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0;
}
.AddCustomShippingBox .GridItems .ItemBox:focus-within { background: #f4f8f8; }
.AddCustomShippingBox .GridItems .ItemBox .select2-container--focus .select2-selection,
.AddCustomShippingBox .GridItems .ItemBox .select2-container--open .select2-selection,
.AddCustomShippingBox .GridItems .ItemBox .select2-selection--single {
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
}
/* a chosen dropdown value: the label floats up (like the other rows) instead of sitting under the value */
.AddCustomShippingBox .GridItems .ItemBox:has(.select2-selection__rendered[title]:not([title=""]):not([title^="اختر"])) .labelName { top: 8px !important; font-size: 12px !important; }
.AddCustomShippingBox .GridItems .ItemBox .select2-selection__rendered[title]:not([title=""]):not([title^="اختر"]) { padding-top: 16px !important; line-height: 30px !important; color: #211E1F; }

/* ---------- Status / label chips: one small size everywhere (same height, same font) ---------- */
.ItemStatus, .StatusBox .ItemStatus {
    height: 28px !important; min-height: 0 !important; padding: 0 12px !important; gap: 6px !important;
    font-size: 13px !important; font-weight: 600; line-height: 28px !important; border-radius: 999px !important;
    display: inline-flex !important; align-items: center; white-space: nowrap; width: max-content;
}
.ItemStatus span, .ItemStatus p, .StatusBox .ItemStatus span { font-size: 13px !important; line-height: 1 !important; margin: 0; }
.ItemStatus img { height: 14px; width: auto; }

/* ---------- Font icons: Phosphor (admin/assets/css/phosphor.css) instead of Font Awesome ---------- */
.list-style-one li:before { font-family: "Phosphor" !important; content: "\e182"; font-weight: 400; }
.list-style-two li:before { font-family: "Phosphor" !important; content: "\e06c"; font-weight: 400; }
.tagify__tag__removeBtn::after { font-family: "Phosphor" !important; content: "\e4f6"; font-size: 16px; font-weight: 400; }
.page-breadcrumb li::after { font-family: "Phosphor" !important; content: "\e13a"; font-weight: 400; }

/* ---------- Single-choice dropdowns: no radio box, a check mark on the chosen option ---------- */
.dropdown-menu .dropdown-item:has(.chiller_cb input[type="radio"]) .CheckLable { display: none !important; }
.dropdown-menu .dropdown-item:has(.chiller_cb input[type="radio"]) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dropdown-menu .dropdown-item:has(.chiller_cb input[type="radio"]:checked)::after {
    content: ""; flex: none; width: 20px; height: 20px; background-color: #00796b;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.5 79.5l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 0 1 17-17L96 182l119.5-119.5a12 12 0 0 1 17 17z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.5 79.5l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 0 1 17-17L96 182l119.5-119.5a12 12 0 0 1 17 17z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Balance cards (المستحقات): round icon tiles, 20px icons, amount and currency on one line ---------- */
.itemTahseel { align-items: center !important; }
.itemTahseel .iconInfo { display: flex; align-items: center; gap: 8px; flex: none; }
.itemTahseel .icon {
    width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px; max-height: none; flex: none; aspect-ratio: 1 / 1; margin: 0 !important; padding: 0 !important;
    border-radius: 50% !important; background: rgba(255, 255, 255, .75); display: flex !important; align-items: center; justify-content: center;
}
.itemTahseel .icon img { width: 20px !important; height: 20px !important; object-fit: contain; }
.itemTahseel .info { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.itemTahseel .info img { width: 20px !important; height: 20px !important; }
.itemTahseel .Datata h2 { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; line-height: 1.2; white-space: nowrap; }
.itemTahseel .Datata h2 span { display: inline-flex; align-items: center; }
.itemTahseel .Datata h2 .priceIconNew { width: 18px !important; height: 18px !important; margin: 0 !important; object-fit: contain; }

/* ---------- Info strip (limits): icon, sentence and amount stay together, the colon never drops alone ---------- */
.limetedMonylabel .rightSide p { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; line-height: 1.5; }
.limetedMonylabel { border-radius: 20px !important; }
.limetedMonylabel .rightSide { width: 100%; }
.limetedMonylabel .rightSide p { padding: 10px 0; }
.limetedMonylabel .rightSide p + p { border-top: 1px solid rgba(0, 0, 0, .08); }
.limetedMonylabel .rightSide p > img { width: 20px; height: 20px; flex: none; }

.limetedMonylabel .rightSide p > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.limetedMonylabel .rightSide p .priceIconNew { width: 18px !important; height: 18px !important; margin: 0 !important; object-fit: contain; }
.itemTahseel .Datata h2 span, .itemTahseel .Datata h2 .priceIconNew { flex: none; }
.itemTahseel .Datata h2 .priceIconNew { min-width: 18px; }
.limetedMonylabel .rightSide p { width: 100%; justify-content: flex-start; padding-inline: 0; }
.limetedMonylabel { flex-direction: column; align-items: stretch; }
.limetedMonylabel .rightSide p, .limetedMonylabel .rightSide p + p { padding-left: 0 !important; padding-right: 0 !important; }
.limetedMonylabel { padding: 14px 24px !important; }
.limetedMonylabel .rightSide p { padding-top: 8px !important; padding-bottom: 8px !important; }
.limetedMonylabel .rightSide p:first-child { padding-top: 0 !important; padding-bottom: 6px !important; }
.limetedMonylabel .rightSide p:last-child { padding-bottom: 0 !important; }

/* ---------- Popups: no icon on top; a round close button in the top-left corner ---------- */
.modal .iconImage, .modal .ActionModalBody .iconImage { display: none !important; }
.modal .modal-content { position: relative; }
.modal .modal-content .btn-close {
    display: flex !important; position: absolute !important; top: 14px; left: 14px; right: auto !important; z-index: 20;
    width: 36px !important; height: 36px !important; min-width: 36px; padding: 0 !important; margin: 0 !important;
    align-items: center; justify-content: center; background: #f3f5f6 !important; border-radius: 50% !important; opacity: 1;
}
.modal .modal-content .btn-close img { width: 20px !important; height: 20px !important; margin: 0 !important; }
.modal .modal-content .btn-close:hover { background: #e7ecee !important; }
.modal .modal-content .btn-close:hover img { filter: none !important; }
.modal .ModalAuthBoxy, .modal .ActionModalBody { padding-top: 6px; }
.modal .modal-content .btn-close.dv-added-close svg { display: block; }
.modal .selectProductandValueModalBody { padding-top: 44px; }

/* ---------- Branch cards (settings): round action buttons, 20px icons ---------- */
.BoxCard .ActionsGroup { display: flex; gap: 6px; }
.BoxCard .ActionsGroup .optionItem {
    width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important; border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, border-color .15s;
}
.BoxCard .ActionsGroup .optionItem img { width: 20px !important; height: 20px !important; margin: 0 !important; }
.BoxCard .ActionsGroup .DeleteAction:hover { background: #FF3B30; border-color: #FF3B30; }
.BoxCard .ActionsGroup .EditAction:hover, .BoxCard .ActionsGroup .PrintAction:hover { background: #007B7D; border-color: #007B7D; }
.BoxCard .ActionsGroup .Close_circleAction:hover { background: #D32A28; border-color: #D32A28; }

/* ---------- Home banner: brand gradient (no pattern image) ---------- */
.createShippigBox {
    background-image:
        radial-gradient(560px 240px at 88% -10%, rgba(255, 255, 255, .20), transparent 62%),
        radial-gradient(460px 280px at 8% 125%, rgba(120, 255, 200, .28), transparent 66%),
        linear-gradient(to left, #00595B 0%, #007B7D 38%, #0E9F74 72%, #1DB261 100%) !important;
    background-color: #007B7D !important;
    background-size: auto !important;
    background-position: 0 0 !important;
}

/* ---------- Login: round mode switch, and the image slider as a rounded card with breathing room ---------- */
.switch_Mode_Label { border-radius: 50% !important; overflow: hidden; }
@media (min-width: 769px) {
    .AuthnticationPage .ColImages { padding: 24px 24px 24px 0 !important; }
    .AuthnticationPage .ColImages .leftSide { border-radius: 24px; overflow: hidden; }
    .AuthnticationPage .leftSide .ImagesAuthentication .imageItem { border-radius: 24px; }
    .AuthnticationPage .leftSide .ImagesAuthentication .imageItem .dataLayer { padding: 64px 72px; }
}

/* account menu: inline svg icons line up with the image icons */
.DropAccountMenu .dropdown-item svg { width: 22px; height: 22px; flex-shrink: 0; margin-inline-end: 7px; }