Checkout page clean up #100
@@ -204,7 +204,7 @@
|
||||
</li>
|
||||
<li><hr class="dropdown-divider m-0" /></li>
|
||||
<li>
|
||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-danger d-flex align-items-center gap-2" href="/logout">
|
||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-danger d-flex align-items-center gap-2" href="javascript:void(0)" @onclick:preventDefault @onclick="HandleLogout">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
||||
<polyline points="16 17 21 12 16 7"></polyline>
|
||||
@@ -216,15 +216,15 @@
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<li>
|
||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="/login">
|
||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="javascript:void(0)" @onclick:preventDefault @onclick="HandleLogin">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>
|
||||
Sign In
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-muted d-flex align-items-center gap-2" href="/account">
|
||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-muted d-flex align-items-center gap-2" href="javascript:void(0)" @onclick:preventDefault @onclick="RedirectToAccount">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
|
||||
Order Status
|
||||
Order History
|
||||
</a>
|
||||
</li>
|
||||
</NotAuthorized>
|
||||
|
||||
@@ -5,15 +5,10 @@ namespace MidrandBookshop.Components.Layout;
|
||||
|
||||
public partial class MainLayout(CartService cartService) : IDisposable
|
||||
{
|
||||
[Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
|
||||
[Inject] public IToastService ToastService { get; set; } = default!;
|
||||
|
||||
private Cart ShoppingCart => cartService.ShoppingCart;
|
||||
|
||||
private AuthenticationState? AuthState { get; set; }
|
||||
private ClaimsPrincipal? User { get; set; }
|
||||
private bool IsAuthenticated => User?.Identity?.IsAuthenticated ?? false;
|
||||
|
||||
private string SearchInputBuffer { get; set; } = string.Empty;
|
||||
private string GlobalSearchQuery { get; set; } = string.Empty;
|
||||
private bool IsSearchActive { get; set; } = false;
|
||||
@@ -21,12 +16,10 @@ public partial class MainLayout(CartService cartService) : IDisposable
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
AuthState = await AuthStateProvider.GetAuthenticationStateAsync();
|
||||
User = AuthState!.User;
|
||||
|
||||
Navigation.LocationChanged += OnLocationChanged;
|
||||
cartService.OnCartChanged += CartService_OnCartChanged;
|
||||
|
||||
if (cartService.ShoppingCart.Items.Count == 0)
|
||||
await cartService.LoadCartFromStorageAsync();
|
||||
|
||||
SyncSearchQueryFromUrl();
|
||||
@@ -122,16 +115,49 @@ public partial class MainLayout(CartService cartService) : IDisposable
|
||||
|
||||
private decimal GetCartTotal() => ShoppingCart?.TotalAmount ?? 0.00m;
|
||||
|
||||
private void RedirectToCart()
|
||||
private async Task RedirectToCart()
|
||||
{
|
||||
IsCartOpen = false;
|
||||
|
||||
await cartService.SaveCartToStorageAsync();
|
||||
|
||||
Navigation.NavigateTo("/cart");
|
||||
}
|
||||
|
||||
private void RedirectToCheckout()
|
||||
private async Task RedirectToCheckout()
|
||||
{
|
||||
IsCartOpen = false;
|
||||
Navigation.NavigateTo("/checkout");
|
||||
|
||||
await cartService.SaveCartToStorageAsync();
|
||||
|
||||
Navigation.NavigateTo("/checkout", forceLoad: true);
|
||||
}
|
||||
|
||||
private async Task RedirectToAccount()
|
||||
{
|
||||
IsCartOpen = false;
|
||||
|
||||
await cartService.SaveCartToStorageAsync();
|
||||
|
||||
Navigation.NavigateTo("/account", forceLoad: true);
|
||||
}
|
||||
|
||||
private async Task HandleLogin()
|
||||
{
|
||||
IsCartOpen = false;
|
||||
|
||||
await cartService.SaveCartToStorageAsync();
|
||||
|
||||
Navigation.NavigateTo("/login", forceLoad: true);
|
||||
}
|
||||
|
||||
private async Task HandleLogout()
|
||||
{
|
||||
IsCartOpen = false;
|
||||
|
||||
await cartService.SaveCartToStorageAsync();
|
||||
|
||||
Navigation.NavigateTo("/logout", forceLoad: true);
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
|
||||
@@ -3,66 +3,239 @@
|
||||
@rendermode InteractiveServer
|
||||
@attribute [Authorize]
|
||||
|
||||
<div class="container py-5">
|
||||
<h2 class="fw-bold mb-4">Checkout</h2>
|
||||
<div class="checkout-page-container py-5">
|
||||
|
||||
<!-- HANDOVER MODAL VIEW OVERLAY -->
|
||||
@if (IsProcessing)
|
||||
{
|
||||
<div class="processing-screen-overlay">
|
||||
<div class="processing-card-box">
|
||||
<div class="mb-1">
|
||||
<svg class="payment-vector-loader" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="loader-track" cx="12" cy="12" r="10" />
|
||||
<path class="loader-handshake-ring" d="M12 2a10 10 0 0 1 10 10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="fw-bold text-dark font-monospace text-uppercase tracking-wider mb-2" style="font-size: 1.1rem;">
|
||||
Securing Your Order
|
||||
</h4>
|
||||
<p class="text-muted small mb-0 px-2" style="line-height: 1.5; font-size: 0.85rem;">
|
||||
Please stand by. We are preparing your payment portal and transferring you securely to PayFast.
|
||||
</p>
|
||||
</div>
|
||||
<div class="secure-badge">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
||||
</svg>
|
||||
<span>Bank-Grade 256-Bit SSL Connection</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Header Presentation Details -->
|
||||
<header class="checkout-header mb-5">
|
||||
<span class="text-uppercase font-monospace text-muted tracking-wider small d-block mb-1">Secure Checkout</span>
|
||||
<h1 class="checkout-main-title fw-bold">Review Your Order</h1>
|
||||
</header>
|
||||
|
||||
@if (ShoppingCart.Items.Any() == false)
|
||||
{
|
||||
<!-- EMPTY STATE TRAP: Displays when cart hits zero items -->
|
||||
<div class="checkout-section-panel text-center py-5 my-4 d-flex flex-column align-items-center gap-3">
|
||||
<div class="text-muted opacity-50">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="9" cy="21" r="1"></circle>
|
||||
<circle cx="20" cy="21" r="1"></circle>
|
||||
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="fw-bold text-dark mb-1">Your cart is empty</h4>
|
||||
<p class="text-muted small mb-0">You cannot proceed to payment without selected titles.</p>
|
||||
</div>
|
||||
<a href="/" class="btn btn-premium-action px-4 py-2 mt-2 text-decoration-none" style="font-size: 0.85rem;">
|
||||
Browse Book Catalogue
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="row g-5">
|
||||
<div class="col-lg-8">
|
||||
<div class="card border-0 shadow-sm p-4 mb-4">
|
||||
<h5 class="fw-bold mb-3">Your Items</h5>
|
||||
<!-- Left Side Forms Layout Matrix -->
|
||||
<div class="col-lg-7">
|
||||
|
||||
<!-- SECTION A: SHOPPING CART MANIFEST LIST -->
|
||||
<section class="checkout-section-panel mb-4">
|
||||
<div class="panel-header-row d-flex justify-content-between align-items-center mb-4">
|
||||
<h5 class="panel-title fw-bold mb-0">Your Selection</h5>
|
||||
<span class="badge rounded-pill bg-light text-dark font-monospace px-2.5 py-1.5 border">
|
||||
@ShoppingCart.Items.Count Items
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="checkout-items-stack">
|
||||
@foreach (var item in ShoppingCart.Items)
|
||||
{
|
||||
<div class="d-flex align-items-center justify-content-between pb-3 border-bottom mb-3">
|
||||
<div><h6 class="mb-0">@item.Product!.Name</h6><small class="text-muted">@($"{item.Author!.Name} {item.Author.LastName}")</small></div>
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="d-flex border rounded-pill">
|
||||
<button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, -1)">-</button>
|
||||
<span class="px-2 pt-1">@item.Quantity</span>
|
||||
<button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, 1)">+</button>
|
||||
<div class="checkout-item-row py-3 d-flex align-items-center justify-content-between">
|
||||
<div class="item-meta-details pe-4">
|
||||
<h6 class="item-product-name fw-bold mb-1 text-dark">@item.Product!.Name</h6>
|
||||
<span class="item-author-label small text-muted font-monospace">
|
||||
By @($"{item.Author!.Name} {item.Author.LastName}")
|
||||
</span>
|
||||
</div>
|
||||
<button class="btn btn-sm text-danger" @onclick="() => RemoveFromCart(item)">Remove</button>
|
||||
<div class="item-interactive-actions d-flex align-items-center gap-3 flex-shrink-0">
|
||||
<div class="premium-quantity-stepper">
|
||||
<button class="step-btn" @onclick="() => ChangeQuantity(item, -1)" aria-label="Decrease quantity">−</button>
|
||||
<span class="step-value font-monospace">@item.Quantity</span>
|
||||
<button class="step-btn" @onclick="() => ChangeQuantity(item, 1)" aria-label="Increase quantity">+</button>
|
||||
</div>
|
||||
<button class="btn-clean-remove font-monospace text-uppercase" @onclick="() => RemoveFromCart(item)">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="card border-0 shadow-sm p-4 mb-4">
|
||||
<h5 class="fw-bold mb-3">Shipping Method</h5>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="radio" name="shipping" id="pickup"
|
||||
<!-- SECTION B: FULFILLMENT SELECTABLE METHODS -->
|
||||
<section class="checkout-section-panel mb-4">
|
||||
<h5 class="panel-title fw-bold mb-4">Fulfillment Option</h5>
|
||||
|
||||
<div class="premium-radio-group d-flex flex-column gap-3">
|
||||
|
||||
<!-- Collect Card Structure -->
|
||||
<div class="premium-selectable-card @(ShippingCost == 0 ? "active" : "")">
|
||||
<input class="form-check-input visual-hidden" type="radio" name="shipping" id="pickup"
|
||||
checked=@(ShippingCost == 0) @onclick="() => ShippingCost = 0">
|
||||
<label class="form-check-label" for="pickup">Pickup from Bookshop (Free)</label>
|
||||
<div class="card-indicator-circle"></div>
|
||||
<label class="card-text-block m-0 context-clickable" for="pickup">
|
||||
<span class="card-label-title fw-bold d-block text-dark">Collect from Midrand Bookshop</span>
|
||||
<span class="card-label-desc text-muted small">Corner of Church & Third Roads. Ready within 2 hours.</span>
|
||||
</label>
|
||||
<span class="card-price-tag font-monospace ms-auto text-success fw-bold">FREE</span>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="shipping" id="delivery"
|
||||
|
||||
<!-- Courier Card Structure -->
|
||||
<div class="premium-selectable-card @(ShippingCost == 60 ? "active" : "")">
|
||||
<input class="form-check-input visual-hidden" type="radio" name="shipping" id="delivery"
|
||||
checked=@(ShippingCost == 60) @onclick="() => ShippingCost = 60">
|
||||
<label class="form-check-label" for="delivery">Home Delivery (R60.00)</label>
|
||||
<div class="card-indicator-circle"></div>
|
||||
<label class="card-text-block m-0 context-clickable" for="delivery">
|
||||
<span class="card-label-title fw-bold d-block text-dark">Door-to-Door Home Delivery</span>
|
||||
<span class="card-label-desc text-muted small">Dispatched via reliable overnight courier straight to your steps.</span>
|
||||
</label>
|
||||
<span class="card-price-tag font-monospace ms-auto text-dark fw-bold">R 60.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION C: ADDITIONAL COURIER DELIVERY NOTES -->
|
||||
<section class="checkout-section-panel mb-4">
|
||||
<div class="d-flex justify-content-between align-items-baseline mb-2">
|
||||
<h5 class="panel-title fw-bold mb-0">Delivery Instructions</h5>
|
||||
<span class="text-muted font-monospace extra-small opacity-75">Optional</span>
|
||||
</div>
|
||||
<p class="text-muted small mb-3">
|
||||
Add any specific details for our dispatch team (e.g., gate access codes, complex navigation, or safe drop-off preferences).
|
||||
</p>
|
||||
<div class="premium-textarea-wrapper">
|
||||
<textarea class="form-control premium-plaintext-field"
|
||||
rows="3"
|
||||
placeholder="Type your notes or courier instructions here..."
|
||||
@bind="OrderNotes"
|
||||
maxlength="500">
|
||||
</textarea>
|
||||
<div class="text-end mt-1.5">
|
||||
<small class="font-monospace text-muted extra-small opacity-50">
|
||||
@(OrderNotes?.Length ?? 0) / 500 characters
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION D: BILLING ADDRESS EQUALITY SETTINGS -->
|
||||
<section class="checkout-section-panel">
|
||||
<h5 class="panel-title fw-bold mb-3">Billing Settings</h5>
|
||||
<div class="premium-checkbox-wrapper d-flex align-items-center gap-3 p-3 border rounded-3">
|
||||
<input class="form-check-input custom-box-tick m-0" type="checkbox" id="sameAsBilling" @bind="IsSameAddress">
|
||||
<label class="checkbox-text-label small text-dark fw-medium m-0 context-clickable w-100 py-1" for="sameAsBilling">
|
||||
My billing address is the same as my shipping address
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 shadow-sm p-4">
|
||||
<h5 class="fw-bold mb-3">Shipping Address</h5>
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="sameAsBilling" @bind="IsSameAddress">
|
||||
<label class="form-check-label" for="sameAsBilling">Billing address same as shipping</label>
|
||||
<!-- Right Side Sidebar Sticky Cost Summary -->
|
||||
<div class="col-lg-5">
|
||||
<div class="sticky-summary-card p-4 border">
|
||||
<h5 class="fw-bold text-dark font-monospace text-uppercase tracking-wider mb-4 small-summary-heading">Summary Breakdown</h5>
|
||||
|
||||
<div class="price-summary-ledger d-flex flex-column gap-3">
|
||||
<div class="ledger-row d-flex justify-content-between">
|
||||
<span class="text-muted small">Items Subtotal</span>
|
||||
<span class="font-monospace text-dark fw-medium">R @ShoppingCart.TotalAmount.ToString("F2")</span>
|
||||
</div>
|
||||
|
||||
<!-- VAT DISPLAY LOGIC SWITCH -->
|
||||
<div class="ledger-row d-flex justify-content-between align-items-center">
|
||||
@if (ShoppingCart.TotalVat > 0)
|
||||
{
|
||||
<span class="text-muted small">Value Added Tax (VAT 15%)</span>
|
||||
<span class="font-monospace text-dark fw-medium">R @ShoppingCart.TotalVat.ToString("F2")</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="text-muted small">Value Added Tax (VAT)</span>
|
||||
<small class="text-danger fw-medium tracking-wide font-monospace" style="font-size: 0.78rem;">
|
||||
(Price is VAT inclusive)
|
||||
</small>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="ledger-row d-flex justify-content-between">
|
||||
<span class="text-muted small">Fulfillment Courier Fee</span>
|
||||
<span class="font-monospace text-dark fw-medium">
|
||||
@if (ShippingCost == 0)
|
||||
{
|
||||
<span class="text-success fw-bold">FREE</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>R @($"{ShippingCost:F2}")</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<hr class="summary-divider my-2" />
|
||||
|
||||
<div class="ledger-row d-flex justify-content-between align-items-baseline mb-4">
|
||||
<span class="fw-bold text-dark">Total Due Amount</span>
|
||||
<div class="text-end">
|
||||
<span class="font-monospace text-dark fw-bold h3 mb-0 d-block tracking-tight">
|
||||
R @($"{ShoppingCart.TotalAmount + ShoppingCart.TotalVat + ShippingCost:F2}")
|
||||
</span>
|
||||
<small class="text-muted opacity-60 font-monospace extra-small">ZAR Currency</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card border-0 shadow-sm p-4 sticky-top" style="top: 100px;">
|
||||
<h5 class="fw-bold mb-3">Order Summary</h5>
|
||||
<div class="d-flex justify-content-between mb-2"><span>Subtotal</span><span>R @ShoppingCart.TotalAmount.ToString("F2")</span></div>
|
||||
<div class="d-flex justify-content-between mb-2"><span>VAT (15%)</span><span>R @ShoppingCart.TotalVat.ToString("F2")</span></div>
|
||||
<div class="d-flex justify-content-between mb-2"><span>Shipping</span><span>R @($"{ShippingCost:F2}")</span></div>
|
||||
<hr />
|
||||
<div class="d-flex justify-content-between mb-4">
|
||||
<span class="fw-bold">Total Due</span>
|
||||
<h4 class="fw-bold">R @($"{ShoppingCart.TotalAmount + ShoppingCart.TotalVat + ShippingCost:F2}")</h4>
|
||||
</div>
|
||||
<button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="PayNow">Complete Purchase</button>
|
||||
<button class="btn btn-premium-action w-100 py-3.5 d-flex align-items-center justify-content-center gap-2"
|
||||
disabled="@IsProcessing"
|
||||
@onclick="PayNow">
|
||||
<span>Pay Now</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
<polyline points="12 5 19 12 12 19"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Automatic PayFast Form Handover Context -->
|
||||
@if (IsProcessing == true && CheckoutPayload?.Count > 0)
|
||||
{
|
||||
<form id="payfastForm" action="@PayfastOptions.Value.CheckoutUrl" method="POST">
|
||||
@@ -73,4 +246,5 @@
|
||||
</form>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -29,6 +29,7 @@ public partial class Checkout()
|
||||
private decimal ShippingCost = 0;
|
||||
private bool IsSameAddress = true;
|
||||
|
||||
public string? OrderNotes { get; set; }
|
||||
private Dictionary<string, string> CheckoutPayload { get; set; } = [];
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
@@ -38,6 +39,9 @@ public partial class Checkout()
|
||||
|
||||
Navigation.LocationChanged += OnLocationChanged;
|
||||
CartService.OnCartChanged += CartService_OnCartChanged;
|
||||
|
||||
if (CartService.ShoppingCart.Items.Count == 0)
|
||||
await CartService.LoadCartFromStorageAsync();
|
||||
}
|
||||
|
||||
private async void CartService_OnCartChanged() => await InvokeAsync(StateHasChanged);
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
/* ==========================================================================
|
||||
Midrand Books — Checkout Layout Polish & Tightening
|
||||
========================================================================== */
|
||||
|
||||
/* --- 🛠️ 1. Global Page Wrapper Boundary Constraints --- */
|
||||
.checkout-page-container {
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
/* --- 2. Page Typography & Headers --- */
|
||||
.checkout-header {
|
||||
margin-bottom: 2.5rem !important;
|
||||
}
|
||||
|
||||
.checkout-main-title {
|
||||
font-size: 2.25rem;
|
||||
letter-spacing: -0.03em;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.tracking-wider {
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
/* --- 3. Custom Structural Content Panels --- */
|
||||
.checkout-section-panel {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: -0.01em;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* --- 🛠️ 4. Items Manifest Row & Stepper Controls --- */
|
||||
.checkout-items-stack .checkout-item-row {
|
||||
display: flex;
|
||||
align-items: center; /* Locks elements on a clean vertical axis line */
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.checkout-items-stack .checkout-item-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-meta-details {
|
||||
max-width: 65%; /* Brounds long item titles elegantly */
|
||||
}
|
||||
|
||||
.item-product-name {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.4;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.premium-quantity-stepper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: #F8F9FA;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 30px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.premium-quantity-stepper .step-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
color: #555555;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.premium-quantity-stepper .step-btn:hover {
|
||||
background-color: #FFFFFF;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.premium-quantity-stepper .step-value {
|
||||
min-width: 28px;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.btn-clean-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #DC3545;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-clean-remove:hover {
|
||||
background-color: rgba(220, 53, 69, 0.06);
|
||||
}
|
||||
|
||||
/* --- 5. Interactive Selectable Radio Selection Cards --- */
|
||||
.visual-hidden {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.premium-selectable-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.premium-selectable-card:hover {
|
||||
border-color: #111111;
|
||||
background-color: #FAFBFB;
|
||||
}
|
||||
|
||||
.premium-selectable-card.active {
|
||||
border-color: #000000;
|
||||
box-shadow: inset 0 0 0 1px #000000;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.card-indicator-circle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
border-radius: 50%;
|
||||
margin-right: 1.25rem;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.premium-selectable-card.active .card-indicator-circle {
|
||||
border-color: #000000;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.premium-selectable-card.active .card-indicator-circle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.card-label-title {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.card-label-desc {
|
||||
font-size: 0.78rem !important;
|
||||
}
|
||||
|
||||
.card-price-tag {
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* --- 6. Form Checkbox Options --- */
|
||||
.context-clickable {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.context-clickable:hover {
|
||||
background-color: #FAFBFB;
|
||||
}
|
||||
|
||||
.custom-box-tick {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* --- 🛠️ 7. Sticky Right Sidebar Order Ledger --- */
|
||||
.sticky-summary-card {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||||
border-radius: 12px;
|
||||
position: sticky;
|
||||
top: 120px; /* Safe breathing room underneath the global nav header */
|
||||
box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.small-summary-heading {
|
||||
font-size: 0.78rem;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.price-summary-ledger .ledger-row {
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.summary-divider {
|
||||
border-color: rgba(0, 0, 0, 0.06);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.extra-small {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
/* --- 8. Core Checkout Action Button --- */
|
||||
.btn-premium-action {
|
||||
background-color: #111111;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.btn-premium-action:hover:not(:disabled) {
|
||||
background-color: #222222;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.btn-premium-action:disabled {
|
||||
background-color: #CCCCCC;
|
||||
color: #888888;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Full-Screen Handover Processing Overlay
|
||||
========================================================================== */
|
||||
.processing-screen-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 3000;
|
||||
}
|
||||
|
||||
.processing-card-box {
|
||||
max-width: 420px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.payment-vector-loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.loader-track {
|
||||
stroke: rgba(0, 0, 0, 0.06);
|
||||
stroke-width: 2.5;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.loader-handshake-ring {
|
||||
stroke: #111111;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round;
|
||||
fill: none;
|
||||
transform-origin: center;
|
||||
animation: spinHandoverLoop 1s linear infinite;
|
||||
}
|
||||
|
||||
.secure-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: #666666;
|
||||
opacity: 0.6;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
padding: 0.35rem 0.85rem;
|
||||
border-radius: 50px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@keyframes spinHandoverLoop {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 9. Premium Plaintext Field & Textarea Structure --- */
|
||||
.premium-textarea-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.premium-plaintext-field {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 8px;
|
||||
padding: 0.85rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
color: #1A1A1A;
|
||||
resize: none; /* Disables ugly drag handles to maintain design proportions */
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.premium-plaintext-field:focus {
|
||||
background-color: #FFFFFF;
|
||||
border-color: #000000;
|
||||
box-shadow: none; /* Strip standard blue Bootstrap glowing halos */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.premium-plaintext-field::placeholder {
|
||||
color: #A0A0A0;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
Reference in New Issue
Block a user