From 9842cc3a4a9b773edea9342ea78a1acf20f72b71 Mon Sep 17 00:00:00 2001
From: Iliyan Angelov <angelov@angeloviliyan.com>
Date: Fri, 21 Nov 2025 19:44:42 +0200
Subject: [PATCH] updates

---
 .../booking_routes.cpython-312.pyc            |  Bin 93489 -> 93619 bytes
 .../schemas/__pycache__/auth.cpython-312.pyc  |  Bin 6596 -> 6872 bytes
 Backend/src/schemas/auth.py                   |    6 +-
 Frontend/src/App.tsx                          |   18 -
 .../components/booking/CancelBookingModal.tsx |  232 +++
 .../components/booking/InvoiceInfoModal.tsx   |  145 ++
 .../components/booking/LuxuryBookingModal.tsx | 1081 ++++++++++
 .../components/payments/CashPaymentModal.tsx  |  124 ++
 .../payments/DepositPaymentModal.tsx          |  417 ++++
 .../payments/PayPalPaymentModal.tsx           |  188 ++
 .../components/payments/StripePaymentForm.tsx |  145 +-
 .../payments/StripePaymentModal.tsx           |  185 ++
 .../src/pages/customer/BookingDetailPage.tsx  |  111 +-
 Frontend/src/pages/customer/BookingPage.tsx   | 1816 -----------------
 .../src/pages/customer/BookingSuccessPage.tsx |  175 +-
 .../src/pages/customer/DepositPaymentPage.tsx |  505 -----
 .../src/pages/customer/MyBookingsPage.tsx     |  110 +-
 .../src/pages/customer/PayPalCancelPage.tsx   |    4 +-
 .../src/pages/customer/PayPalReturnPage.tsx   |   22 +-
 .../src/pages/customer/PaymentResultPage.tsx  |    4 +-
 Frontend/src/pages/customer/ProfilePage.tsx   |    4 +-
 .../src/pages/customer/RoomDetailPage.tsx     |  155 +-
 Frontend/src/utils/validationSchemas.ts       |    4 +-
 Frontend/src/validators/bookingValidator.ts   |    4 +-
 24 files changed, 2801 insertions(+), 2654 deletions(-)
 create mode 100644 Frontend/src/components/booking/CancelBookingModal.tsx
 create mode 100644 Frontend/src/components/booking/InvoiceInfoModal.tsx
 create mode 100644 Frontend/src/components/booking/LuxuryBookingModal.tsx
 create mode 100644 Frontend/src/components/payments/CashPaymentModal.tsx
 create mode 100644 Frontend/src/components/payments/DepositPaymentModal.tsx
 create mode 100644 Frontend/src/components/payments/PayPalPaymentModal.tsx
 create mode 100644 Frontend/src/components/payments/StripePaymentModal.tsx
 delete mode 100644 Frontend/src/pages/customer/BookingPage.tsx
 delete mode 100644 Frontend/src/pages/customer/DepositPaymentPage.tsx

diff --git a/Backend/src/routes/__pycache__/booking_routes.cpython-312.pyc b/Backend/src/routes/__pycache__/booking_routes.cpython-312.pyc
index dcb492648163a8f493e952f8290ec652f8fe6e62..ef2fbfa7f0f2b260cce5509ac953e69e80666237 100644
GIT binary patch
delta 8328
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
GBL5BTa81_$

delta 8294
zcmb_BX>^pwkzda@hoq6jNHZg8bl>Pk7w8rmp$iGniLk&}8uSSvp^I;ZOZ3M8#x`I9
zk~{I|18kgRH_n4Na^$QCc`rf9#z&lFC6i6C;$5@B&U<+;iOIPM#$l_zIpyH&{#d=I
z>guZM>gwvM>h5pmey(|SSrhtpNJtO|e>*1=hXSKt4Q<}4x|TDyeQScw8Z4OhW^kMo
zK_f(!kUT~NjT8xZm}3Kuz&{#znYgjYNe#ydDU*7RQzWAtrE+2mi4B%4G+0PIz=;Mo
zMGcfNc3m>5#Z(t!5;S}3I8HSCX;viU>sAuT=YZ5~r8y*F1$(yA#0JeK6wwE!Nzv3u
z!zY7SL2N{@6hotF3>qZGvRAf6=B5vFmsKu9r8pr?il=env%+d2V`TMchLk`!8dt~d
zJO}cLG?C42Glyh)7A7URDCR67%&Q}rCfUhUCRMRZIx|UNcZ4{A6QW5)lUU+JW?%|U
z0f9l9B408PQ#jxb8t-R*3a+2cmIpX#GTJ#A0&~YtO{+N?OXDZOR4J8)h*6HME~~+{
zX*AVOf!Fbquzeo8!0~BP8r2^nb`{}-Y$+Xd#0xnz<azF*N?J|RMKfLfJSXJRbfECV
z+c>!>jKrwvYAKyn_GOm@!T=Rb1w|ZSI-2I*85K=)(P%og&<G*#%9_ieZii-o8~WCp
z3^c>zGw`Qscn4cbj?M>E+5KrErhvoqNAgD3NSUMgQr2jJls#G~<tP#b7-?b%&0@!+
zOa>`;tO$k`dWn7CGz9=LiE4)TvKf=n3~X3N@kQQmN@c7{%4NrPMe=KD2JA<qZk-}n
z!t!hp?8o~;wJMHgDlC(h2GU%b!|v>XUCU-m2_}QUT`9e+buTN=v#dP7Io!))M|WBH
zGMa}|tSWcx^K25$8y3;NRTZ8s5hD~@fzin7qK(=yJ$9ekW-7g?_EQ@no}*E2SD*eY
zH~CCg(<sGLW|G5h?J}upq-y~zf0stDbKAehWB(eziG23QkTr_+)ieq`xt>M>thuOT
zvD=a|SELK1%6I=RRp$TSQbh-;A_lt?#Q=$7_lt5*ngmAX(|lK^NP&)nUU%ajn<8iu
zO$K)073*b4CH#{LT#FB<1-`{keG{@v#oBliGwcpwGk-Ngkoeev9IUc-q<VC{R0zql
zTG%jBGisHJ0M`h0BekO&q~g&!X)R&4tx>FMM>zY@ZleJ<WvwIMH7myrPeITd+4=DR
znN$&@%5gwGT18Ts&Jf3bGagSAd$B;oWxxdWBTb_lrFDcG;-nIx0V>eLV0tOoh*f2s
zQdQQmw(miFmMT@HjFy3eth9{f+e}(Ox42L>Edhz<JqarY35_^NS5C{tBwCI`<X?x9
z5K_+i{*<6klPZQdTJldss$|haaiod$4JU;(dHg{ug(fyT6hk&D^o@S>jS9V4p*Q={
zn-zMCLT~Y-w;-MM4(ITdLb!sL3?aTr!H*B+1Xc>0E5U`3my3gLBV8!gc1@a8MJur=
zhlLB-p1hK(X~ys~%ob_X<wAi29FoeU6uD||k*mfcC+CNecqdf2YFZ7e3Rh-wpKVZ;
ziu}UOTU3QD%Ha|9KwhiDTTiRp39A82kypxZ%?i3A3v@W3tPm=N!_Q%P;6LvwLG0Fu
zC8okzBeV&5kpJx$0%+xz$T=d_K3KM-f?7eggRb|J-4Mt*E_wpcSqr7P)9a)<&{IT-
zJl#M{CZUVg3R^883aQ?Gk*9T6wy}ps3;2iJ6714wSb|U02BE`GRl^EZ+vx_csvV%J
zK~c3<o@pRPRx@VgAFxtm1-J%QDm-#Q=U!(c*6LMVw9%`q*HyP;`z~rcA@mOuFci!x
z_9dV^VI|7B`hQH!#qkPXQtC4VPHGnVr52i@C<+ztI4*l!>!vjc!buK1GjN%AaRd#z
zRNCZ-^h$0T7CpGHb!K_CMT~TU1aqGW;ZpNht?vj?SSyc^zY{k*zUa}bh-1xpu~Mg!
znw7I}x66n6L1#1U^d1y}<Y0^YLM)qxuXslKT4(m~D=bfpOyY$hsbwq%20TEDW)IJT
zlx5Yh)Z%OwRnF!yLW8Bv{!^yyrJG^O5oO|0<>(!|=*=oDbi%kR^aB_XCLnFU&e|%?
zntg!1reMK<6(h!nfWzBDNhDDklWKS#Q-^)UZs0>f$1ywHA7d26OgyY`K4bVQjE;o%
z8Wab!{81<gQaUal1%;)-#G>C`Ww4spOzf2%LF`wNdWZ$=ZHP9h;iOhN;UI5xZU$&~
zwg7Yh`OXm&+P@!c{WiPqz}c=VHXndYnt)tWxic!tx38242fYCh%<ecM3}coR>_aST
zf6^)<WDAEc@SuJY)W3-pP7|$Q5HI9yyi~Ep{W{GNp#9Lx{UJt^AD4dS*jv?V)^<(9
zZ*j-77HZ&2ZroJIop0?|4RZaeX|nSPi0W3_ibre|Z5{rxFJL?vZI!2+h*GhGRZe#Y
zYj#1J&%@5v|0NqDP{NZ9hOru-QxwL^T=<l*$uAR73+{67cLMa@Ty(ZF!$DK1Gso+D
z(10ZOCc8Rl{B>9fn>wUVYkg4kJH025h$dX|*jqTJ$F9dCz80uI_4Pa$`0=J|(|~`|
zZ_{8~qJgyR5%je%#2p2|e{<!KLP5HqpMlMqI-`b7lUkiygrj)CIsU_=fMy6zf%6nA
zsg0F(7qaxpNZwr~Dvr@MNZI3#IPZuyPvwQ<Q|rOun%)MXqIJCQk#n}OrzTf>^pu_O
z=Xgee=12W2Ic<XwYj=g%&SxRO+G#rmSUznZzU5KuYki?W+l7<fElhT{v)SE{{}C>P
z(Ib&Dk2%|if8iVI!9ei`o=Om?2AL0(AbGJeNRtLVZ<SDZ*F3z4G~w|J+8Nc<^NL^F
z!LLs6E8903<yo-i2?|7ZlxBM<F{k|BBZHiK5Zr5qf64xnVww1*5;uCu<i(RDqgoNb
z<6y01Gzh0J@G$a>>qg`r@%&MvR-E<9L6-$dX0H<L(<AT@@XUY&d>p@EA|WfJJTGQV
z+6vi6By;PN7t}Z}o@T-n&MtHaXPsMy2)y|NgmcOZ;rvBjn7P1ra>BH$E#amErf#Qj
zj!Pbgr*dM3R8KYR*s>{9=<!R?diGLs1Uu%`6x1KBhhZPVaSPZ%a*#X3_izV^qU;Bs
zt!(Fml$E)Zo%pn}PpNT8O>mFrMgk<Y(soE2Sxt8qqsJq88`SiPV;1s7*5@>{SC1!a
zcF~Q)Ush`Etz*XCrlU>Mfm14&0WhDr{qV@fq&o;u!P*aUFsu7r%yHlepr2Ujn=_wn
zN8nRVeAP0?gY5`a!>jruG)gvXCLtxC^Lc}M@9kIAo-8>5Z}^q=ew9B+GM}E?b>b_8
zojDoDf={kxUp{$Q`$yP1@lP!MvA0$CIrfLg#`X7+@>c|R+34fn(CgqUj~IYJ&vKvG
z9<A{A0)IKAUmUPG287;ShkJ(vF=XzgCsK)zFB)-B2!hk7&cxn7^)YE=KR<ontSH%p
z)F%=AGXjo%bmp7|XI>7r4~Peb`UiT)Y@-9>UF53fo_;cdkVEXNQ{QYBH=~qpVqi=d
z8XH{JOo$*XUP8GqAV)3O4%?SQN5_SM5qq9nnfMoE1rFJJZT*g+0|VlBpwF(IE!Df6
zfTQ1He>vMhc-C@mT}lR8o(o_(!lUT0-7zrQYaehpU|PGVWnVfsYw)eby$s=elHTP&
zRH<Uq=aWeXn>){RB7A1Th5lwbl{HRh)%+Q{%b{-j?7fb0hi$}Vrq=^QFr#}ra4gy*
zo<a<L$_z8RG9k`jFFYRGZ?_E&h&+m=p;#aS{LBZ|K0mXLgnaRx84`qRTUOck+dJf$
ztz`4(`^YL*!Bzzw0Qxit+h<u9+opP$mkr&db?zSfnyU3?Oy<koOEE=@0a5R!6g}H<
zHEb~;`rYR37tGHbxnap(%&S?l)Lbum$I`IaXFC=8o+bTfmb@iP-l@==ddp&5!IHk<
zy|}EO#T72a6`tC1Q=aG{ogwCg#pJ>zbK$9=o5lqBRu6eGGn9)?y)?FDDLxhYZcERF
zlxO-cRlin$HTy<!!%|AaPof(adv~2$bu%JHesTv{>wGWV@^bw3*f$au5*D}H7WW;#
z!*MODE)_I3)d)6|s(Su+9Jhx*fK4|q@Ia(|jT(9bYP%YGht!Q4Xqq)Gn%`ruMFYGJ
zwGDagnytv&t#M$}sO``~vqL+C4b_@9>9DKo(?Jv&ZMsvsn*l-0^6a-NuC^>bv=?|s
zNQ3IXv1w6(Qfz?uuxbd253BYe5gQ=Z@O3<BiL9S9JojgH?0ZS+myX;>Dw^$IN-CQU
zeJ>^B<(L~OYp?Q4DHU^3FUA|3Juze<uPw&fUCF%@RE5orfMBIDZ%)PbR{4f(YgZxn
zL3*&#6g3lUf4erv+Nt9{N+Q-ywfdvvWbED10I{08Qvk#Y^_@Z>R&&2ISxq?N_Zh7T
zsBocH*AQauE>tfxnQEODh18r|8*l9{Q7>%P*B2|4j`hTfwsms6((mNmeKqLTaSNTg
zKx=0yztCxjvvw9io2$i17CMVGE_x~N>Q{h#HPEXAtzB#Qg)Uv3wJQtSR7JjLp({({
zVytlu=qe1fcB5d0HPhM+lHDMQW_N=iGP>7*_1LcrxAsKw3)@0#HP#*@ztCfZ76|YU
zrq7+7Eiseh?EBxZi%G&<N=6`I8XZM2g&>8<??;n#*8F;|ISu*wNPP~$vk21J)a#AG
zN*T#Sb{1iaug7W&5HDopjR>-dMZFQHS0oZ~L@uj&W3|2n1@LQ@xQ>Z$RKQ1@SKjz;
zbQ@C35VRxkFED4`tR)Wiqc^j(imLtWlQ+vX5=hzSD&IOAWjKTbW>MjX2oBG^`(GwP
zH0-y(C?}OH^LA|P36QvJsvRHS3xzFlgKeyTU}R)KNX$(XBbn{?7E;1yZ%2hyg4l9k
z|M=MMA#rp-5Ubd`x2reSA~ndqZ^Smzzh_|duy_pTJB}b0=Ti#gw-KvDS`&iJ2($=}
zAR`>Xqpa_PMyQl8f6x=>Rk3VvSNYxv+u_lHF$b32_z$DV30Cr9i{^8nVs`F{597^d
z-zxDlu4^-#?AqN^dBr$S7ZUN4y4a22Ap`~l8swq_#77aFWD_5Y<T-Zx;|k{sKv?Ft
zY_Ag^18kDtvc@_Ym{yyZCgdch^@w3W%v>cNLoH9>Sp0zEI)=KjyA8qPNK@ujihmE%
zyail5gIt_^c~$>@Q5+cSKiq3SJi2RqWYSd2F5WX4B5?pZUVK~`$`<a8lVVoz$!>tp
zd?I%H!bMqk5o(M=pbTn8ECE3k4nKon2D_^eR3rFT1h|Q={h7xud=mUyYUXJqerl^I
zvR(Uy+$jWS*;oJeB<x(-{bucXBuul@_tW*t{yv5M6YSdk#wdIlD2`gz5AGkZJ9-C3
zZ9^j>`@Dq=Xs-hEL-LK2<e-HdlJ8l__jIlByN!5+u-wLU`Pb3p5_wfV8$+T(WYqHv
zfJ|O2mcJfDy0tDRFlSSRyfK!%t9=zk=H-kyQlj}5;0^QeGfhJ<xjKJ2le`|HU!<Y#
z-x$6x(-QJ4(k)+DM`Gmn%gFKYX)>mz8REatEP*ILPQ8jUWpYay88A7l-~i>126>)3
z^4H7A+azfIXgN6&M!qnAw}p(T$Z2_S3#n<sL*5l>Q1JZ|w;j5ZF>QEvNgN%rkJ=pl
zd&(30A&d5p;JvD9QlFDJA&wsy60pN2PDZa58(}eB;vY~GhM(AgixWGruauvU5xXbf
z-9nPgpCJA>1b8nMUDq5rzm?>xF(=vA9<#_&D=CcdU19vLV?^H9N{sT&Rx+d`IF%Yc
zf1j@4#W=!VIvpjy&_-5=y#Qar#CYV^;}i)*UW_KORcEoI#Jf@$(^23lq<s#71Ho#f
z^&qAcE#+d9hqN{Fns&0D6v^Z5BnP(SLOV&&mm=qfC|xGM-cFKT8(uE|7I0D_hjoy+
zy-K`4iZYKOfL|3Mz;PVj7F}tHw?lC~(rOUkjZm~A_8q{MdD||#_!iQXz*iDM$qN~2
z8&FQEVD*IM&qO%g4n>}F9^h7pE!b7k3U_KbP{bG?gR1JvzeHp!6>uX;Z$jX^qP>RP
zPx<6|q`ios6@`@zQgTqv>m*yNd|T(beWJ{lQTk;BN~S9(hwspM8X2xTwS2u3+}9!B
z?j(EKyKv}M1j=l_3ic4vj^U^sh&_y8Cjuq1A3;oUWG`aAb19d7X}ZbGAyFxM+Y#$S
zV3TijkwVKZz?Xw}?;jcQ)ON8S*?Z;qtt2u=g>0j8C+<})_;B%7UIn5cw{0bHW(NxY
z1noMAz;*V?C$^G9L2m(T0;-4o+Pu1({6I&Zmj7)h>0b3mEti_<x<!S;Wl~=A2(gj$
z`I$#Zaey<LoNO<#)>U&$l~vfhQyz@X4P9*}w*OubXRR}FKMn1z!0w*|;UZL5tiBhq
z8oT$Z;1X0<roJCjSBm|GIwP?*Mw5j)lf_zBz%SJ0@-BKlarFyeILcLrTN@+!h586X
zt;*UM&M!2EYZMAlL4&+~kYt*bKncKQ`l97Y`I$kIMyBL%50ZIOFCW-LdPs}BxQ7&y
zQkfqjrFD3p7x5+lZzL=)BA%Da{KS5Ti1k*)(kP;{#I*>N94>`f?gmuCn`i&XK(+YZ
uymN>=qRQ^$N#!NS9S+;8#jbX-clYlV!XJ1}6@EvBygPNe`G65}nfwpGE{AIX

diff --git a/Backend/src/schemas/__pycache__/auth.cpython-312.pyc b/Backend/src/schemas/__pycache__/auth.cpython-312.pyc
index 56c5532d4eb793539a93d1d3f91593a69baab2a8..a6dd20722d6200a73479c1fa129a3aa71293ede8 100644
GIT binary patch
delta 1510
zcmZuwS!+{46uy(CP0Vi7o11Ql3uvfYEomioxvrJAwn`OojW<n<w@q{F+*CxOR;{4u
zgL1?Q7W7dODbimciU=aq<)H*c`=;Q7qJq9TXHrc}9hfik<(}`GGv~}aX`Bf=pF122
z1U8o44ys+Yht6_Ky@^pHo8M9l#)T}Q4RJC+7%3TX1I#+a;3-1}!}-V>?#~6rje`b3
zptg(|9yz?0Ea?+M=AInPx_r)!EVfG^Xf7P|LBO=wsgo<-EV)6(2@$UNVU0UP8sNR9
zZr7@ol-94L^tM$k$wWGFVwkp7F}W@=_$d4w6<*aw?rgZLOse<P2ZIyJ%i72<-NHVe
zs|=8v<pJ`^%*e_59Y?ivBA6Z-iX|un%)W3q7*~^OMh_WtrU6Y&(|Q(1S1<?}>1tfB
zVUR2DPbHLeBCg{ZgYeYS5^iFvQDN3*{~$`^$!kfr<z3I4+Q@4$a<SvBYvI-A%h{XC
zD_7vH7@S_z^IGhkcK5;xt41O)VLk0FGkd-ng)-@@fvspGZe<0x-47iL&Uddz+JexE
zfX$%o2yF<P5Xu?kOfgMM(ap$Z1a4D{E37Vu0Eo6GvXNUq^SR-;t$k^U{Wgq6zq~!)
zNQSfa8u($WA{|V+XIqJ+kdchK!oHnI5tg&5qv-`<##S-bn~&+7nzSD<kVde(9+NOk
zGi-+I?%m6Ht=FO$y?R1cTCyWQc{{j0l3)H4M)^^@ks{Q?22U&Lo;u^HA!q)T=Uhjq
zHWXDd8LGxcG6}t;Ub(VOTKb5Zq<fhU)|00`Cd^dTU2^49-_QQ-30X?=${E#krl>c(
zj4ZTzUPt<vo+7M=a78!i;~lwGv9oDA8dGe-Ja-;n<X-5M3@^Ms)|-eoL=G{lbui&|
z?ci4T%q2M%w-u8pbW1^sfaUw!E$3KgK1P|lHPx`XvY{@9!7@U@AdVEF7fx4Jk$927
z4eu%!t^A)zMG*ooNfH@%RR5}@Vvr2LsOXRUPd|hTggtEP4hHOw*<I(mW~Ayjrs}-e
z5I6fQZrO)L*_v~zdNii=4~`5+`?YvtekY5nbc`wT4`K_hWQ4+*hmj)ehs(YtWOy#?
z!_EI*Im)&CF&#jKj8JgVks?GPD%B7jvQl#^f3+R>g})<yv-^-9Lg3xv73US?W#Gwh
cFB!f_5;*}@e~sNwJXh840{i*i1Py-p4dG5T3jhEB

delta 1436
zcmZ{jOH30%7{_<o^6I;VmeLlim=KC$D5yN7Jmg`(T2UTBG1iuDVR>|6cFVyKC5i`c
z;F#decrejmB8J3x*Bb{haA+D1k`NOP9t@m3Io}in7TjciJ3I5u|NHj;%_c8?tun3{
z3|fv}Tm2s4llG%AD?3+BU*X=lN3p<7BWxx`mZC@4M28L;me@6o7EyW>MN<gt<cz%q
zE~?sJd5oq}H|JFcy{c`<v#q0e;OrU}<Gg1)A<3Qy@9|ZX`+T0LFeJ#5SB*<)2tErq
z2RKh5sW=XC<XcXC87$0jn>zhmctMyKUW~q;eBZrfS?v2<^S!)f!|GlwtX;F#t?KJY
zlU794WJ&u_r_QkKsJTqXZ<U(V>fQuuK)4oA2hafO0ha+yfGmoXCL)SsxEbF4fGR*C
zpm85=Ql`Iz8cA3`JfM(mgBZ|B%d!LtnO0Z@6w_NWQ#|F8#U(R=xzd+a^X2QBl61~i
zs$W3-h6bl1$3f|S@=Nd5K{_g-%bmSJ3Jv+oYleUdRS=K)3#uerlo!ZbOK(4Owvxs&
z`JgukD|DF=tYYXYwgNH%K7isYI$#b^N_wq+)UiygZgl#nV#*Z5;&>=5%UFmcWM0C4
zvYKlj?4#SjU<oRp<&w^#XQuQw_tS}>H(OCzN-f0YL(O9TLa4H+E|>$<kdC|n>S7Ll
z$h#Tr1YHcxIVR5H4~ZXiQ1QhBAP#6HL7Nv1?6v0<S+bcrSb}#Mio*YY2;e`%0I-nx
z039^Wc9Kb(hio`pq{Z&b3_+BiY}#Co9X%b>7`^GqwWPs38%P@#rd4=}*`Xyr?3Lx|
zc-VAsYGd#UVCF>sEyfP*G<BNW;^D{`f4#l=7C)KbB^eLV$dq-8$3jdP49kKT56R*v
z9}nV_vW$Q(pogsFyU+-j^W4#P2YhKy83id62@j4YCPIT^lt13#Lq^3xiFNo2j1)~6
zhdDq$dF41me&#!=S@(O6o;%ETvXgxK1dR!p1Kg#zWTc?JT5M|?ThifL*SON=O^~^Q
z>OS_*vp@DK>|&>$8Ocrq>tYxdn9IxrRv}AqwDdpO_2XhRF~&FG1Sxd7^>$>L6LvZJ
K*sUOKPVyI5S|Z;7

diff --git a/Backend/src/schemas/auth.py b/Backend/src/schemas/auth.py
index a5b7e9da..661095be 100644
--- a/Backend/src/schemas/auth.py
+++ b/Backend/src/schemas/auth.py
@@ -21,8 +21,10 @@ class RegisterRequest(BaseModel):
 
     @validator('phone')
     def validate_phone(cls, v):
-        if v and (not v.isdigit()) or (v and len(v) not in [10, 11]):
-            raise ValueError('Phone must be 10-11 digits')
+        if v:
+            cleaned = ''.join(c for c in v if c.isdigit())
+            if len(cleaned) < 5:
+                raise ValueError('Phone number must contain at least 5 digits')
         return v
 
 class LoginRequest(BaseModel):
diff --git a/Frontend/src/App.tsx b/Frontend/src/App.tsx
index 9086bfd0..b566429b 100644
--- a/Frontend/src/App.tsx
+++ b/Frontend/src/App.tsx
@@ -42,10 +42,8 @@ const RoomDetailPage = lazy(() => import('./pages/customer/RoomDetailPage'));
 const SearchResultsPage = lazy(() => import('./pages/customer/SearchResultsPage'));
 const FavoritesPage = lazy(() => import('./pages/customer/FavoritesPage'));
 const MyBookingsPage = lazy(() => import('./pages/customer/MyBookingsPage'));
-const BookingPage = lazy(() => import('./pages/customer/BookingPage'));
 const BookingSuccessPage = lazy(() => import('./pages/customer/BookingSuccessPage') as Promise<{ default: React.ComponentType<any> }>);
 const BookingDetailPage = lazy(() => import('./pages/customer/BookingDetailPage'));
-const DepositPaymentPage = lazy(() => import('./pages/customer/DepositPaymentPage'));
 const FullPaymentPage = lazy(() => import('./pages/customer/FullPaymentPage'));
 const PaymentConfirmationPage = lazy(() => import('./pages/customer/PaymentConfirmationPage'));
 const PaymentResultPage = lazy(() => import('./pages/customer/PaymentResultPage'));
@@ -234,14 +232,6 @@ function App() {
               </ProtectedRoute>
             } 
           />
-          <Route 
-            path="booking/:id" 
-            element={
-              <CustomerRoute>
-                <BookingPage />
-              </CustomerRoute>
-            } 
-          />
           <Route 
             path="booking-success/:id" 
             element={
@@ -250,14 +240,6 @@ function App() {
               </CustomerRoute>
             } 
           />
-          <Route 
-            path="payment/deposit/:bookingId" 
-            element={
-              <CustomerRoute>
-                <DepositPaymentPage />
-              </CustomerRoute>
-            } 
-          />
           <Route 
             path="bookings" 
             element={
diff --git a/Frontend/src/components/booking/CancelBookingModal.tsx b/Frontend/src/components/booking/CancelBookingModal.tsx
new file mode 100644
index 00000000..3d306afe
--- /dev/null
+++ b/Frontend/src/components/booking/CancelBookingModal.tsx
@@ -0,0 +1,232 @@
+import React, { useState } from 'react';
+import { X, AlertTriangle, XCircle, Loader2, Info } from 'lucide-react';
+import { cancelBooking, type Booking } from '../../services/api/bookingService';
+import { toast } from 'react-toastify';
+import { useFormatCurrency } from '../../hooks/useFormatCurrency';
+
+interface CancelBookingModalProps {
+  isOpen: boolean;
+  booking: Booking | null;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+const CancelBookingModal: React.FC<CancelBookingModalProps> = ({
+  isOpen,
+  booking,
+  onClose,
+  onSuccess,
+}) => {
+  const { formatCurrency } = useFormatCurrency();
+  const [cancelling, setCancelling] = useState(false);
+
+  if (!isOpen || !booking) return null;
+
+  // Check if booking is fully paid
+  const isFullyPaid = (() => {
+    // Check payment_status first
+    if (booking.payment_status === 'paid') {
+      return true;
+    }
+    
+    // Check payment_balance
+    if (booking.payment_balance?.is_fully_paid === true) {
+      return true;
+    }
+    
+    // Check payments array - sum all completed payments
+    if (booking.payments && Array.isArray(booking.payments)) {
+      const totalPaid = booking.payments
+        .filter((p: any) => p.payment_status === 'completed')
+        .reduce((sum: number, p: any) => sum + parseFloat(p.amount?.toString() || '0'), 0);
+      
+      return totalPaid >= booking.total_price - 0.01; // Allow small rounding differences
+    }
+    
+    return false;
+  })();
+
+  const cancellationFee = booking.total_price * 0.2;
+  const refundAmount = isFullyPaid ? booking.total_price - cancellationFee : 0;
+
+  const handleCancel = async () => {
+    try {
+      setCancelling(true);
+      const response = await cancelBooking(booking.id);
+
+      if (response.success || (response as any).status === 'success') {
+        toast.error(
+          `Booking ${booking.booking_number} has been cancelled`
+        );
+        onSuccess();
+        onClose();
+      } else {
+        throw new Error(response.message || 'Unable to cancel booking');
+      }
+    } catch (err: any) {
+      console.error('Error cancelling booking:', err);
+      const message =
+        err.response?.data?.detail ||
+        err.response?.data?.message ||
+        err.message ||
+        'Unable to cancel booking. Please try again.';
+      toast.error(message);
+    } finally {
+      setCancelling(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[10001] flex items-center justify-center p-2 sm:p-4">
+      <div
+        className="fixed inset-0 bg-black/90 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      <div className="relative w-full max-w-md max-h-[95vh] bg-gradient-to-br from-[#0a0a0a] via-[#1a1a1a] to-[#0a0a0a] rounded-xl sm:rounded-2xl border border-red-500/30 shadow-2xl shadow-red-500/20 overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="px-3 sm:px-4 md:px-6 py-3 sm:py-4 border-b border-red-500/20 bg-gradient-to-r from-[#1a1a1a] to-[#0a0a0a] flex-shrink-0">
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+              <div className="w-8 h-8 sm:w-10 sm:h-10 bg-red-500/20 rounded-full flex items-center justify-center border border-red-500/30 flex-shrink-0">
+                <AlertTriangle className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 text-red-400" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <h2 className="text-base sm:text-lg md:text-xl font-serif font-bold text-white tracking-tight truncate">
+                  Cancel Booking
+                </h2>
+                <p className="text-xs text-gray-400 mt-0.5 truncate">
+                  Booking #{booking.booking_number}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={onClose}
+              disabled={cancelling}
+              className="p-1.5 sm:p-2 hover:bg-red-500/10 rounded-lg transition-colors text-gray-400 hover:text-white disabled:opacity-50 flex-shrink-0"
+            >
+              <X className="w-4 h-4 sm:w-5 sm:h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto px-3 sm:px-4 md:px-6 py-4 sm:py-6 space-y-4 sm:space-y-6">
+          {/* Warning Message */}
+          <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-3 sm:p-4">
+            <div className="flex items-start gap-2 sm:gap-3">
+              <AlertTriangle className="w-4 h-4 sm:w-5 sm:h-5 text-red-400 mt-0.5 flex-shrink-0" />
+              <div className="min-w-0 flex-1">
+                <p className="text-xs sm:text-sm font-semibold text-red-300 mb-1">
+                  Are you sure you want to cancel this booking?
+                </p>
+                <p className="text-xs text-red-200/80 leading-relaxed">
+                  This action cannot be undone. The room will be made available for other guests.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Booking Details */}
+          <div className="bg-[#0a0a0a] border border-gray-700/50 rounded-lg p-3 sm:p-4 space-y-2 sm:space-y-3">
+            <h3 className="text-xs sm:text-sm font-semibold text-gray-300 mb-2 sm:mb-3">Booking Details</h3>
+            <div className="space-y-1.5 sm:space-y-2 text-xs sm:text-sm">
+              <div className="flex justify-between">
+                <span className="text-gray-400">Room</span>
+                <span className="text-white font-medium">
+                  {booking.room?.room_number || 'N/A'}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-400">Check-in</span>
+                <span className="text-white font-medium">
+                  {new Date(booking.check_in_date).toLocaleDateString('en-US')}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-400">Check-out</span>
+                <span className="text-white font-medium">
+                  {new Date(booking.check_out_date).toLocaleDateString('en-US')}
+                </span>
+              </div>
+              <div className="flex justify-between pt-2 border-t border-gray-700/50">
+                <span className="text-gray-400">Total Amount</span>
+                <span className="text-white font-semibold">
+                  {formatCurrency(booking.total_price)}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Cancellation Policy */}
+          <div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-3 sm:p-4">
+            <div className="flex items-start gap-2 sm:gap-3">
+              <Info className="w-4 h-4 sm:w-5 sm:h-5 text-amber-400 mt-0.5 flex-shrink-0" />
+              <div className="flex-1 min-w-0">
+                <h4 className="text-xs sm:text-sm font-semibold text-amber-300 mb-1.5 sm:mb-2">
+                  Cancellation Policy
+                </h4>
+                <div className="space-y-1.5 sm:space-y-2 text-xs text-amber-200/80">
+                  <div className="flex justify-between">
+                    <span>Cancellation Fee (20%)</span>
+                    <span className="font-semibold text-amber-300">
+                      -{formatCurrency(cancellationFee)}
+                    </span>
+                  </div>
+                  {isFullyPaid && (
+                    <>
+                      <div className="flex justify-between pt-2 border-t border-amber-500/20">
+                        <span>Refund Amount (80%)</span>
+                        <span className="font-semibold text-green-400">
+                          {formatCurrency(refundAmount)}
+                        </span>
+                      </div>
+                      <p className="text-amber-200/70 mt-3 pt-3 border-t border-amber-500/20">
+                        The refund will be processed to your original payment method within 5-7 business days.
+                      </p>
+                    </>
+                  )}
+                  {!isFullyPaid && (
+                    <p className="text-amber-200/70 mt-3 pt-3 border-t border-amber-500/20">
+                      Since this booking is not fully paid, no refund will be issued. The cancellation fee applies to the total booking amount.
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-col gap-2 sm:gap-3 pt-2">
+            <button
+              onClick={handleCancel}
+              disabled={cancelling}
+              className="w-full bg-red-500/20 hover:bg-red-500/30 border-2 border-red-500/50 text-red-300 font-semibold py-2.5 sm:py-3 px-4 sm:px-6 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base min-h-[44px]"
+            >
+              {cancelling ? (
+                <>
+                  <Loader2 className="w-4 h-4 sm:w-5 sm:h-5 animate-spin" />
+                  <span>Cancelling...</span>
+                </>
+              ) : (
+                <>
+                  <XCircle className="w-4 h-4 sm:w-5 sm:h-5" />
+                  <span>Yes, Cancel Booking</span>
+                </>
+              )}
+            </button>
+            <button
+              onClick={onClose}
+              disabled={cancelling}
+              className="w-full bg-transparent border border-gray-600 text-gray-300 font-medium py-2.5 sm:py-3 px-4 sm:px-6 rounded-lg hover:bg-gray-800/50 transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base min-h-[44px]"
+            >
+              Keep Booking
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CancelBookingModal;
+
diff --git a/Frontend/src/components/booking/InvoiceInfoModal.tsx b/Frontend/src/components/booking/InvoiceInfoModal.tsx
new file mode 100644
index 00000000..4b6fb49a
--- /dev/null
+++ b/Frontend/src/components/booking/InvoiceInfoModal.tsx
@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { X, Building2, Save } from 'lucide-react';
+
+interface InvoiceInfoModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (invoiceInfo: any) => void;
+}
+
+interface InvoiceFormData {
+  company_name: string;
+  company_address: string;
+  company_tax_id: string;
+  customer_tax_id: string;
+}
+
+const InvoiceInfoModal: React.FC<InvoiceInfoModalProps> = ({
+  isOpen,
+  onClose,
+  onSave,
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<InvoiceFormData>({
+    defaultValues: {
+      company_name: '',
+      company_address: '',
+      company_tax_id: '',
+      customer_tax_id: '',
+    },
+  });
+
+  const onSubmit = (data: InvoiceFormData) => {
+    onSave(data);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[10001] flex items-center justify-center p-2 sm:p-4">
+      <div
+        className="fixed inset-0 bg-black/90 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      <div className="relative w-full max-w-lg max-h-[95vh] bg-gradient-to-br from-[#0a0a0a] via-[#1a1a1a] to-[#0a0a0a] rounded-xl sm:rounded-2xl border border-[#d4af37]/30 shadow-2xl shadow-[#d4af37]/20 overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="px-3 sm:px-4 md:px-6 py-3 sm:py-4 border-b border-[#d4af37]/20 bg-gradient-to-r from-[#1a1a1a] to-[#0a0a0a] flex-shrink-0">
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2 min-w-0 flex-1">
+              <Building2 className="w-4 h-4 sm:w-5 sm:h-5 text-[#d4af37] flex-shrink-0" />
+              <h2 className="text-base sm:text-lg md:text-xl font-serif font-bold text-white tracking-tight truncate">
+                Invoice Information
+              </h2>
+            </div>
+            <button
+              onClick={onClose}
+              className="p-1.5 sm:p-2 hover:bg-[#d4af37]/10 rounded-lg transition-colors text-gray-400 hover:text-white flex-shrink-0"
+            >
+              <X className="w-4 h-4 sm:w-5 sm:h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <form onSubmit={handleSubmit(onSubmit)} className="flex-1 overflow-y-auto p-3 sm:p-4 md:p-6 flex flex-col">
+          <div className="space-y-3 sm:space-y-4 flex-1">
+            <div>
+              <label className="block text-xs font-medium text-gray-300 mb-2">
+                Company Name
+              </label>
+              <input
+                {...register('company_name')}
+                type="text"
+                className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
+                placeholder="Company Name"
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs font-medium text-gray-300 mb-2">
+                Company Address
+              </label>
+              <textarea
+                {...register('company_address')}
+                rows={3}
+                className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37] resize-none"
+                placeholder="Company Address"
+              />
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-xs font-medium text-gray-300 mb-2">
+                  Company Tax ID
+                </label>
+                <input
+                  {...register('company_tax_id')}
+                  type="text"
+                  className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
+                  placeholder="Tax ID"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-300 mb-2">
+                  Customer Tax ID
+                </label>
+                <input
+                  {...register('customer_tax_id')}
+                  type="text"
+                  className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
+                  placeholder="Tax ID"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="mt-4 sm:mt-6 flex items-center justify-end gap-2 sm:gap-3 pt-3 sm:pt-4 border-t border-[#d4af37]/20 flex-shrink-0">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium text-gray-300 hover:text-white transition-colors min-h-[44px]"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="px-4 sm:px-6 py-2 bg-[#d4af37] text-black font-semibold rounded-lg hover:bg-[#c9a227] transition-all flex items-center gap-1.5 sm:gap-2 text-sm sm:text-base min-h-[44px]"
+            >
+              <Save className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+              <span>Save</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default InvoiceInfoModal;
+
diff --git a/Frontend/src/components/booking/LuxuryBookingModal.tsx b/Frontend/src/components/booking/LuxuryBookingModal.tsx
new file mode 100644
index 00000000..6fcc0051
--- /dev/null
+++ b/Frontend/src/components/booking/LuxuryBookingModal.tsx
@@ -0,0 +1,1081 @@
+import React, { useState, useEffect } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import {
+  X,
+  Calendar,
+  Users,
+  CreditCard,
+  FileText,
+  Sparkles,
+  CheckCircle,
+  ArrowRight,
+  ArrowLeft,
+  Loader2,
+  Plus,
+  Minus,
+  Building2,
+  Receipt,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import { getRoomById, getRoomBookedDates, type Room } from '../../services/api/roomService';
+import {
+  createBooking,
+  checkRoomAvailability,
+  type BookingData,
+} from '../../services/api/bookingService';
+import { serviceService, Service, promotionService, Promotion } from '../../services/api';
+import useAuthStore from '../../store/useAuthStore';
+import {
+  bookingValidationSchema,
+  type BookingFormData,
+} from '../../validators/bookingValidator';
+import { useFormatCurrency } from '../../hooks/useFormatCurrency';
+import { formatDateLocal } from '../../utils/format';
+import Recaptcha from '../common/Recaptcha';
+import { recaptchaService } from '../../services/api/systemSettingsService';
+import StripePaymentModal from '../payments/StripePaymentModal';
+import PayPalPaymentModal from '../payments/PayPalPaymentModal';
+import CashPaymentModal from '../payments/CashPaymentModal';
+import InvoiceInfoModal from '../booking/InvoiceInfoModal';
+
+interface LuxuryBookingModalProps {
+  roomId: number;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: (bookingId: number) => void;
+}
+
+type BookingStep = 'dates' | 'guests' | 'services' | 'payment' | 'confirmation';
+
+const LuxuryBookingModal: React.FC<LuxuryBookingModalProps> = ({
+  roomId,
+  isOpen,
+  onClose,
+  onSuccess,
+}) => {
+  const { userInfo } = useAuthStore();
+  const { formatCurrency, currency } = useFormatCurrency();
+  const [currentStep, setCurrentStep] = useState<BookingStep>('dates');
+  const [room, setRoom] = useState<Room | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [recaptchaToken, setRecaptchaToken] = useState<string | null>(null);
+  const [services, setServices] = useState<Service[]>([]);
+  const [selectedServices, setSelectedServices] = useState<Array<{ service: Service; quantity: number }>>([]);
+  const [bookedDates, setBookedDates] = useState<Date[]>([]);
+  const [promotionCode, setPromotionCode] = useState('');
+  const [selectedPromotion, setSelectedPromotion] = useState<Promotion | null>(null);
+  const [promotionDiscount, setPromotionDiscount] = useState(0);
+  const [validatingPromotion, setValidatingPromotion] = useState(false);
+  const [promotionError, setPromotionError] = useState<string | null>(null);
+  const [showInvoiceModal, setShowInvoiceModal] = useState(false);
+  const [showPaymentModal, setShowPaymentModal] = useState(false);
+  const [paymentMethod, setPaymentMethod] = useState<'stripe' | 'paypal' | 'cash' | null>(null);
+  const [createdBookingId, setCreatedBookingId] = useState<number | null>(null);
+  const [totalPrice, setTotalPrice] = useState(0);
+
+  const {
+    control,
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+    setValue,
+  } = useForm<BookingFormData & { invoiceInfo?: any }>({
+    resolver: yupResolver(bookingValidationSchema),
+    defaultValues: {
+      checkInDate: undefined,
+      checkOutDate: undefined,
+      guestCount: 1,
+      notes: '',
+      paymentMethod: 'cash',
+      fullName: userInfo?.name || '',
+      email: userInfo?.email || '',
+      phone: userInfo?.phone || '',
+      invoiceInfo: {
+        company_name: '',
+        company_address: '',
+        company_tax_id: '',
+        customer_tax_id: '',
+      },
+    },
+  });
+
+  const checkInDate = watch('checkInDate');
+  const checkOutDate = watch('checkOutDate');
+  const paymentMethodForm = watch('paymentMethod');
+
+  useEffect(() => {
+    if (isOpen && roomId) {
+      fetchRoomDetails(roomId);
+      fetchServices();
+      fetchBookedDates(roomId);
+    }
+  }, [isOpen, roomId]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setCurrentStep('dates');
+      setSelectedServices([]);
+      setPromotionCode('');
+      setSelectedPromotion(null);
+      setPromotionDiscount(0);
+      setShowPaymentModal(false);
+      setPaymentMethod(null);
+      setCreatedBookingId(null);
+    }
+  }, [isOpen]);
+
+  const fetchBookedDates = async (roomId: number) => {
+    try {
+      const response = await getRoomBookedDates(roomId);
+      const isSuccess = response.success === true || (response as any).status === 'success';
+      if (isSuccess && response.data?.booked_dates) {
+        const dates = response.data.booked_dates.map((dateStr: string) => {
+          const [year, month, day] = dateStr.split('-').map(Number);
+          const date = new Date(year, month - 1, day);
+          date.setHours(0, 0, 0, 0);
+          return date;
+        });
+        setBookedDates(dates);
+      }
+    } catch (err) {
+      console.error('Error fetching booked dates:', err);
+    }
+  };
+
+  const isDateBooked = (date: Date): boolean => {
+    if (!date || bookedDates.length === 0) return false;
+    const normalizedDate = new Date(date);
+    normalizedDate.setHours(0, 0, 0, 0);
+    return bookedDates.some(bookedDate => {
+      const normalizedBooked = new Date(bookedDate);
+      normalizedBooked.setHours(0, 0, 0, 0);
+      return normalizedDate.getTime() === normalizedBooked.getTime();
+    });
+  };
+
+  const doesRangeIncludeBookedDates = (startDate: Date, endDate: Date): boolean => {
+    if (!startDate || !endDate || bookedDates.length === 0) return false;
+    const start = new Date(startDate);
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(endDate);
+    end.setHours(0, 0, 0, 0);
+    let currentDate = new Date(start);
+    while (currentDate < end) {
+      if (isDateBooked(currentDate)) {
+        return true;
+      }
+      currentDate.setDate(currentDate.getDate() + 1);
+    }
+    return false;
+  };
+
+  const fetchServices = async () => {
+    try {
+      const response = await serviceService.getServices({
+        status: 'active',
+        limit: 100,
+      });
+      setServices(response.data.services || []);
+    } catch (err: any) {
+      console.error('Error fetching services:', err);
+    }
+  };
+
+  const fetchRoomDetails = async (roomId: number) => {
+    try {
+      setLoading(true);
+      const response = await getRoomById(roomId);
+      if (
+        (response.success || (response as any).status === 'success') &&
+        response.data?.room
+      ) {
+        setRoom(response.data.room);
+      } else {
+        throw new Error('Unable to load room information');
+      }
+    } catch (err: any) {
+      console.error('Error fetching room:', err);
+      toast.error(err.response?.data?.message || 'Unable to load room information');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const numberOfNights =
+    checkInDate && checkOutDate
+      ? Math.ceil((checkOutDate.getTime() - checkInDate.getTime()) / (1000 * 60 * 60 * 24))
+      : 0;
+
+  const roomPrice = (room?.price && room.price > 0) ? room.price : (room?.room_type?.base_price || 0);
+  const roomTotal = numberOfNights * roomPrice;
+  const servicesTotal = selectedServices.reduce((sum, item) => {
+    return sum + (item.service.price * item.quantity);
+  }, 0);
+  const subtotal = roomTotal + servicesTotal;
+  const finalTotal = Math.max(0, subtotal - promotionDiscount);
+  
+  useEffect(() => {
+    setTotalPrice(finalTotal);
+  }, [finalTotal]);
+
+  const handleValidatePromotion = async () => {
+    if (!promotionCode.trim()) {
+      setPromotionError('Please enter a promotion code');
+      return;
+    }
+    if (subtotal === 0) {
+      setPromotionError('Please select dates first');
+      return;
+    }
+    try {
+      setValidatingPromotion(true);
+      setPromotionError(null);
+      const response = await promotionService.validatePromotion(
+        promotionCode.toUpperCase().trim(),
+        subtotal
+      );
+      if (response.success && response.data) {
+        setSelectedPromotion(response.data.promotion);
+        setPromotionDiscount(response.data.discount);
+        toast.success(`Promotion "${response.data.promotion.name}" applied!`);
+      } else {
+        throw new Error(response.message || 'Invalid promotion code');
+      }
+    } catch (error: any) {
+      setPromotionError(error.response?.data?.message || error.message || 'Invalid promotion code');
+      setSelectedPromotion(null);
+      setPromotionDiscount(0);
+      toast.error(error.response?.data?.message || error.message || 'Invalid promotion code');
+    } finally {
+      setValidatingPromotion(false);
+    }
+  };
+
+  const handleRemovePromotion = () => {
+    setPromotionCode('');
+    setSelectedPromotion(null);
+    setPromotionDiscount(0);
+    setPromotionError(null);
+    toast.info('Promotion removed');
+  };
+
+  const steps: { key: BookingStep; label: string; icon: React.ReactNode }[] = [
+    { key: 'dates', label: 'Dates', icon: <Calendar className="w-4 h-4" /> },
+    { key: 'guests', label: 'Guests', icon: <Users className="w-4 h-4" /> },
+    { key: 'services', label: 'Services', icon: <Sparkles className="w-4 h-4" /> },
+    { key: 'payment', label: 'Payment', icon: <CreditCard className="w-4 h-4" /> },
+  ];
+
+  const getCurrentStepIndex = () => {
+    return steps.findIndex(s => s.key === currentStep);
+  };
+
+  const canGoToNextStep = () => {
+    switch (currentStep) {
+      case 'dates':
+        return checkInDate && checkOutDate;
+      case 'guests':
+        return true;
+      case 'services':
+        return true;
+      case 'payment':
+        return paymentMethodForm;
+      default:
+        return false;
+    }
+  };
+
+  const handleNext = () => {
+    if (!canGoToNextStep()) {
+      toast.error('Please complete the current step');
+      return;
+    }
+    const currentIndex = getCurrentStepIndex();
+    if (currentIndex < steps.length - 1) {
+      setCurrentStep(steps[currentIndex + 1].key as BookingStep);
+    }
+  };
+
+  const handleBack = () => {
+    const currentIndex = getCurrentStepIndex();
+    if (currentIndex > 0) {
+      setCurrentStep(steps[currentIndex - 1].key as BookingStep);
+    }
+  };
+
+  const onSubmit = async (data: BookingFormData) => {
+    console.log('Form submitted with data:', data);
+    console.log('Current form errors:', errors);
+    
+    if (!room) {
+      toast.error('Room information is missing. Please try again.');
+      return;
+    }
+
+    // Verify reCAPTCHA if token is provided (reCAPTCHA is optional)
+    if (recaptchaToken) {
+      try {
+        const verifyResponse = await recaptchaService.verifyRecaptcha(recaptchaToken);
+        if (verifyResponse.status === 'error' || !verifyResponse.data.verified) {
+          toast.error('reCAPTCHA verification failed. Please try again.');
+          setRecaptchaToken(null);
+          return;
+        }
+      } catch (error) {
+        toast.error('reCAPTCHA verification failed. Please try again.');
+        setRecaptchaToken(null);
+        return;
+      }
+    }
+
+    try {
+      setSubmitting(true);
+      const checkInDateStr = formatDateLocal(data.checkInDate);
+      const checkOutDateStr = formatDateLocal(data.checkOutDate);
+      const checkIn = new Date(data.checkInDate);
+      checkIn.setHours(0, 0, 0, 0);
+      const checkOut = new Date(data.checkOutDate);
+      checkOut.setHours(0, 0, 0, 0);
+
+      if (isDateBooked(checkIn)) {
+        toast.error('Check-in date is already booked. Please select another date.');
+        return;
+      }
+
+      const availability = await checkRoomAvailability(
+        room.id,
+        checkInDateStr,
+        checkOutDateStr
+      );
+
+      if (!availability.available) {
+        toast.error(availability.message || 'Room is already booked during this time');
+        return;
+      }
+
+      const bookingData: BookingData & { invoice_info?: any } = {
+        room_id: room.id,
+        check_in_date: checkInDateStr,
+        check_out_date: checkOutDateStr,
+        guest_count: data.guestCount,
+        notes: data.notes || '',
+        payment_method: data.paymentMethod,
+        total_price: totalPrice,
+        guest_info: {
+          full_name: data.fullName,
+          email: data.email,
+          phone: data.phone,
+        },
+        services: selectedServices.map(item => ({
+          service_id: item.service.id,
+          quantity: item.quantity,
+        })),
+        promotion_code: selectedPromotion?.code || undefined,
+        invoice_info: (data as any).invoiceInfo ? {
+          company_name: (data as any).invoiceInfo.company_name || undefined,
+          company_address: (data as any).invoiceInfo.company_address || undefined,
+          company_tax_id: (data as any).invoiceInfo.company_tax_id || undefined,
+          customer_tax_id: (data as any).invoiceInfo.customer_tax_id || undefined,
+        } : undefined,
+      };
+
+      const response = await createBooking(bookingData);
+
+      if (response.success && response.data?.booking) {
+        const bookingId = response.data.booking.id;
+        setCreatedBookingId(bookingId);
+        setPaymentMethod(data.paymentMethod as 'stripe' | 'paypal' | 'cash');
+        setShowPaymentModal(true);
+      } else {
+        throw new Error(response.message || 'Unable to create booking');
+      }
+    } catch (err: any) {
+      console.error('Error creating booking:', err);
+      if (err.response?.status === 409) {
+        toast.error('❌ Room is already booked during this time. Please select different dates.');
+      } else if (err.response?.status === 400) {
+        toast.error(err.response?.data?.message || 'Invalid booking information');
+      } else {
+        toast.error(err.response?.data?.message || 'Unable to book room. Please try again.');
+      }
+      setRecaptchaToken(null);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handlePaymentSuccess = async () => {
+    setShowPaymentModal(false);
+    if (createdBookingId) {
+      // Check booking status before showing success toast
+      try {
+        const { getBookingById } = await import('../../services/api/bookingService');
+        const bookingResponse = await getBookingById(createdBookingId);
+        if (bookingResponse.success && bookingResponse.data?.booking) {
+          const booking = bookingResponse.data.booking;
+          // Only show success toast if booking is not cancelled
+          if (booking.status !== 'cancelled') {
+            toast.success('🎉 Booking successful!');
+          }
+        }
+      } catch (err) {
+        // If we can't check status, don't show toast to avoid confusion
+        console.error('Error checking booking status:', err);
+      }
+      if (onSuccess) {
+        onSuccess(createdBookingId);
+      }
+    }
+    onClose();
+  };
+
+  const handlePaymentClose = () => {
+    setShowPaymentModal(false);
+    if (createdBookingId && onSuccess) {
+      onSuccess(createdBookingId);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <div className="fixed inset-0 z-[9999] flex items-center justify-center p-2 sm:p-4">
+        <div
+          className="fixed inset-0 bg-black/80 backdrop-blur-sm"
+          onClick={onClose}
+        />
+        <div className="relative w-full max-w-4xl max-h-[95vh] bg-gradient-to-br from-[#0a0a0a] via-[#1a1a1a] to-[#0a0a0a] rounded-xl sm:rounded-2xl border border-[#d4af37]/30 shadow-2xl shadow-[#d4af37]/20 overflow-hidden flex flex-col">
+          {/* Header */}
+          <div className="relative px-3 sm:px-4 md:px-6 py-3 sm:py-4 border-b border-[#d4af37]/20 bg-gradient-to-r from-[#1a1a1a] to-[#0a0a0a] flex-shrink-0">
+            <div className="flex items-center justify-between gap-2">
+              <div className="min-w-0 flex-1">
+                <h2 className="text-base sm:text-lg md:text-xl lg:text-2xl font-serif font-bold text-white tracking-tight truncate">
+                  Complete Your Booking
+                </h2>
+                <p className="text-xs sm:text-sm text-gray-400 mt-0.5 sm:mt-1 font-light truncate">
+                  {room?.room_type?.name || 'Room'} - {formatCurrency(roomPrice)}/night
+                </p>
+              </div>
+              <button
+                onClick={onClose}
+                className="p-1.5 sm:p-2 hover:bg-[#d4af37]/10 rounded-lg transition-colors text-gray-400 hover:text-white flex-shrink-0"
+              >
+                <X className="w-4 h-4 sm:w-5 sm:h-5" />
+              </button>
+            </div>
+
+            {/* Progress Steps */}
+            <div className="mt-3 sm:mt-4 flex items-center justify-between gap-1 sm:gap-2">
+              {steps.map((step, index) => {
+                const isActive = step.key === currentStep;
+                const isCompleted = getCurrentStepIndex() > index;
+                return (
+                  <div key={step.key} className="flex items-center flex-1 min-w-0">
+                    <div className="flex items-center flex-1 min-w-0">
+                      <div
+                        className={`flex items-center justify-center w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 rounded-full border-2 transition-all flex-shrink-0 ${
+                          isActive
+                            ? 'bg-[#d4af37] border-[#d4af37] text-black'
+                            : isCompleted
+                            ? 'bg-green-500/20 border-green-500 text-green-400'
+                            : 'bg-transparent border-gray-600 text-gray-500'
+                        }`}
+                      >
+                        {isCompleted ? (
+                          <CheckCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-5 md:h-5" />
+                        ) : (
+                          <div className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-5 md:h-5">
+                            {step.icon}
+                          </div>
+                        )}
+                      </div>
+                      <span
+                        className={`ml-1 sm:ml-2 text-[10px] sm:text-xs font-medium hidden md:block truncate ${
+                          isActive ? 'text-[#d4af37]' : isCompleted ? 'text-green-400' : 'text-gray-500'
+                        }`}
+                      >
+                        {step.label}
+                      </span>
+                    </div>
+                    {index < steps.length - 1 && (
+                      <div
+                        className={`h-0.5 flex-1 mx-1 sm:mx-2 transition-all flex-shrink ${
+                          isCompleted ? 'bg-green-500' : 'bg-gray-700'
+                        }`}
+                      />
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 px-4 sm:px-6 py-4 sm:py-6 overflow-hidden">
+            <div className="h-full overflow-y-auto">
+            {loading ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="w-8 h-8 animate-spin text-[#d4af37]" />
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+                {/* Step 1: Dates */}
+                {currentStep === 'dates' && (
+                  <div className="space-y-4">
+                    <div>
+                      <h3 className="text-lg font-serif font-semibold text-white mb-4 flex items-center gap-2">
+                        <Calendar className="w-5 h-5 text-[#d4af37]" />
+                        Select Dates
+                      </h3>
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <div>
+                          <label className="block text-xs font-medium text-gray-300 mb-2">
+                            Check-in Date <span className="text-[#d4af37]">*</span>
+                          </label>
+                          <Controller
+                            control={control}
+                            name="checkInDate"
+                            render={({ field }) => (
+                              <DatePicker
+                                selected={field.value}
+                                minDate={new Date()}
+                                selectsStart
+                                startDate={checkInDate}
+                                endDate={checkOutDate}
+                                dateFormat="dd/MM/yyyy"
+                                placeholderText="Select check-in"
+                                excludeDates={bookedDates}
+                                filterDate={(date) => !isDateBooked(date)}
+                                onChange={(date) => {
+                                  if (date && isDateBooked(date)) {
+                                    toast.error('This date is already booked');
+                                    return;
+                                  }
+                                  field.onChange(date);
+                                }}
+                                className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
+                                wrapperClassName="w-full"
+                              />
+                            )}
+                          />
+                          {errors.checkInDate && (
+                            <p className="text-xs text-red-400 mt-1">{errors.checkInDate.message}</p>
+                          )}
+                        </div>
+                        <div>
+                          <label className="block text-xs font-medium text-gray-300 mb-2">
+                            Check-out Date <span className="text-[#d4af37]">*</span>
+                          </label>
+                          <Controller
+                            control={control}
+                            name="checkOutDate"
+                            render={({ field }) => (
+                              <DatePicker
+                                selected={field.value}
+                                minDate={checkInDate || new Date()}
+                                selectsEnd
+                                startDate={checkInDate}
+                                endDate={checkOutDate}
+                                dateFormat="dd/MM/yyyy"
+                                placeholderText="Select check-out"
+                                excludeDates={bookedDates}
+                                filterDate={(date) => {
+                                  if (!checkInDate) return !isDateBooked(date);
+                                  return !isDateBooked(date) && !doesRangeIncludeBookedDates(checkInDate, date);
+                                }}
+                                onChange={(date) => {
+                                  if (date && checkInDate && doesRangeIncludeBookedDates(checkInDate, date)) {
+                                    toast.error('Selected range includes booked dates');
+                                    return;
+                                  }
+                                  field.onChange(date);
+                                }}
+                                className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
+                                wrapperClassName="w-full"
+                              />
+                            )}
+                          />
+                          {errors.checkOutDate && (
+                            <p className="text-xs text-red-400 mt-1">{errors.checkOutDate.message}</p>
+                          )}
+                        </div>
+                      </div>
+                      {checkInDate && checkOutDate && (
+                        <div className="mt-4 p-3 bg-[#d4af37]/10 border border-[#d4af37]/20 rounded-lg">
+                          <p className="text-sm text-gray-300">
+                            <span className="text-[#d4af37] font-semibold">{numberOfNights}</span> night{numberOfNights !== 1 ? 's' : ''} • 
+                            <span className="text-[#d4af37] font-semibold ml-1">{formatCurrency(roomTotal)}</span>
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* Step 2: Guests */}
+                {currentStep === 'guests' && (
+                  <div className="space-y-4">
+                    <div>
+                      <h3 className="text-lg font-serif font-semibold text-white mb-4 flex items-center gap-2">
+                        <Users className="w-5 h-5 text-[#d4af37]" />
+                        Guest Information
+                      </h3>
+                      <div className="space-y-4">
+                        <div>
+                          <label className="block text-xs font-medium text-gray-300 mb-2">
+                            Full Name <span className="text-[#d4af37]">*</span>
+                          </label>
+                          <input
+                            {...register('fullName')}
+                            type="text"
+                            className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
+                            placeholder="John Doe"
+                          />
+                          {errors.fullName && (
+                            <p className="text-xs text-red-400 mt-1">{errors.fullName.message}</p>
+                          )}
+                        </div>
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                          <div>
+                            <label className="block text-xs font-medium text-gray-300 mb-2">
+                              Email <span className="text-[#d4af37]">*</span>
+                            </label>
+                            <input
+                              {...register('email')}
+                              type="email"
+                              className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
+                              placeholder="email@example.com"
+                            />
+                            {errors.email && (
+                              <p className="text-xs text-red-400 mt-1">{errors.email.message}</p>
+                            )}
+                          </div>
+                          <div>
+                            <label className="block text-xs font-medium text-gray-300 mb-2">
+                              Phone <span className="text-[#d4af37]">*</span>
+                            </label>
+                            <input
+                              {...register('phone')}
+                              type="tel"
+                              className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
+                              placeholder="0123456789"
+                            />
+                            {errors.phone && (
+                              <p className="text-xs text-red-400 mt-1">{errors.phone.message}</p>
+                            )}
+                          </div>
+                        </div>
+                        <div>
+                          <label className="block text-xs font-medium text-gray-300 mb-2">
+                            Number of Guests <span className="text-[#d4af37]">*</span>
+                          </label>
+                          <input
+                            {...register('guestCount')}
+                            type="number"
+                            min="1"
+                            max={room?.capacity || room?.room_type?.capacity || 10}
+                            className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
+                          />
+                          {errors.guestCount && (
+                            <p className="text-xs text-red-400 mt-1">{errors.guestCount.message}</p>
+                          )}
+                        </div>
+                        <div>
+                          <label className="block text-xs font-medium text-gray-300 mb-2">
+                            Special Requests (optional)
+                          </label>
+                          <textarea
+                            {...register('notes')}
+                            rows={2}
+                            className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37] resize-none"
+                            placeholder="Any special requests..."
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Step 3: Services */}
+                {currentStep === 'services' && (
+                  <div className="space-y-4">
+                    <div>
+                      <h3 className="text-lg font-serif font-semibold text-white mb-4 flex items-center gap-2">
+                        <Sparkles className="w-5 h-5 text-[#d4af37]" />
+                        Additional Services
+                      </h3>
+                      {services.length > 0 ? (
+                        <div className="space-y-3 max-h-48 overflow-y-auto">
+                          {services.map((service) => {
+                            const selectedItem = selectedServices.find(item => item.service.id === service.id);
+                            const quantity = selectedItem?.quantity || 0;
+                            return (
+                              <div
+                                key={service.id}
+                                className="p-3 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg"
+                              >
+                                <div className="flex items-center justify-between">
+                                  <div className="flex-1">
+                                    <h4 className="text-sm font-semibold text-white">{service.name}</h4>
+                                    <p className="text-xs text-gray-400 mt-1">{formatCurrency(service.price)} / {service.unit || 'unit'}</p>
+                                  </div>
+                                  <div className="flex items-center gap-3">
+                                    <div className="flex items-center gap-2">
+                                      <button
+                                        type="button"
+                                        onClick={() => {
+                                          if (quantity > 0) {
+                                            if (quantity === 1) {
+                                              setSelectedServices(prev => prev.filter(item => item.service.id !== service.id));
+                                            } else {
+                                              setSelectedServices(prev => prev.map(item =>
+                                                item.service.id === service.id
+                                                  ? { ...item, quantity: item.quantity - 1 }
+                                                  : item
+                                              ));
+                                            }
+                                          }
+                                        }}
+                                        disabled={quantity === 0}
+                                        className="w-7 h-7 flex items-center justify-center bg-[#1a1a1a] border border-[#d4af37]/20 rounded text-[#d4af37] hover:bg-[#d4af37]/10 disabled:opacity-50"
+                                      >
+                                        <Minus className="w-3.5 h-3.5" />
+                                      </button>
+                                      <span className="text-white font-semibold w-6 text-center text-sm">{quantity}</span>
+                                      <button
+                                        type="button"
+                                        onClick={() => {
+                                          if (quantity === 0) {
+                                            setSelectedServices(prev => [...prev, { service, quantity: 1 }]);
+                                          } else {
+                                            setSelectedServices(prev => prev.map(item =>
+                                              item.service.id === service.id
+                                                ? { ...item, quantity: item.quantity + 1 }
+                                                : item
+                                            ));
+                                          }
+                                        }}
+                                        className="w-7 h-7 flex items-center justify-center bg-[#1a1a1a] border border-[#d4af37]/20 rounded text-[#d4af37] hover:bg-[#d4af37]/10"
+                                      >
+                                        <Plus className="w-3.5 h-3.5" />
+                                      </button>
+                                    </div>
+                                    {quantity > 0 && (
+                                      <span className="text-sm font-semibold text-[#d4af37] w-20 text-right">
+                                        {formatCurrency(service.price * quantity)}
+                                      </span>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      ) : (
+                        <p className="text-sm text-gray-400">No additional services available</p>
+                      )}
+
+                      {/* Promotion Code */}
+                      <div className="mt-6 pt-6 border-t border-[#d4af37]/20">
+                        <h4 className="text-sm font-semibold text-white mb-3">Promotion Code</h4>
+                        {!selectedPromotion ? (
+                          <div className="flex gap-2">
+                            <input
+                              type="text"
+                              value={promotionCode}
+                              onChange={(e) => {
+                                setPromotionCode(e.target.value.toUpperCase());
+                                setPromotionError(null);
+                              }}
+                              placeholder="Enter code"
+                              className="flex-1 px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
+                              disabled={validatingPromotion || subtotal === 0}
+                            />
+                            <button
+                              type="button"
+                              onClick={handleValidatePromotion}
+                              disabled={validatingPromotion || !promotionCode.trim() || subtotal === 0}
+                              className="px-4 py-2 bg-[#d4af37] text-black font-semibold rounded-lg hover:bg-[#c9a227] disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+                            >
+                              {validatingPromotion ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Apply'}
+                            </button>
+                          </div>
+                        ) : (
+                          <div className="p-3 bg-green-500/10 border border-green-500/30 rounded-lg flex items-center justify-between">
+                            <div>
+                              <p className="text-sm font-semibold text-green-400">{selectedPromotion.name}</p>
+                              <p className="text-xs text-gray-400">Discount: -{formatCurrency(promotionDiscount)}</p>
+                            </div>
+                            <button
+                              type="button"
+                              onClick={handleRemovePromotion}
+                              className="text-red-400 hover:text-red-300"
+                            >
+                              <X className="w-4 h-4" />
+                            </button>
+                          </div>
+                        )}
+                        {promotionError && <p className="text-xs text-red-400 mt-2">{promotionError}</p>}
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Step 4: Payment */}
+                {currentStep === 'payment' && (
+                  <div className="space-y-4">
+                    <div>
+                      <h3 className="text-lg font-serif font-semibold text-white mb-4 flex items-center gap-2">
+                        <CreditCard className="w-5 h-5 text-[#d4af37]" />
+                        Payment Method
+                      </h3>
+                      <div className="space-y-3">
+                        <label className="flex items-start p-4 bg-[#0a0a0a] border-2 border-[#d4af37]/20 rounded-lg cursor-pointer hover:border-[#d4af37]/40 transition-all">
+                          <input
+                            {...register('paymentMethod')}
+                            type="radio"
+                            value="cash"
+                            className="mt-1 mr-3 w-4 h-4 text-[#d4af37] border-[#d4af37]/30 focus:ring-[#d4af37]/50"
+                          />
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2 mb-1">
+                              <CreditCard className="w-4 h-4 text-[#d4af37]" />
+                              <span className="font-semibold text-white text-sm">Pay on Arrival</span>
+                              <span className="text-xs bg-orange-500/20 text-orange-300 px-2 py-0.5 rounded">20% deposit</span>
+                            </div>
+                            <p className="text-xs text-gray-400">Pay 20% deposit now, remaining on arrival</p>
+                          </div>
+                        </label>
+                        <label className="flex items-start p-4 bg-[#0a0a0a] border-2 border-[#d4af37]/20 rounded-lg cursor-pointer hover:border-[#d4af37]/40 transition-all">
+                          <input
+                            {...register('paymentMethod')}
+                            type="radio"
+                            value="stripe"
+                            className="mt-1 mr-3 w-4 h-4 text-[#d4af37] border-[#d4af37]/30 focus:ring-[#d4af37]/50"
+                          />
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2 mb-1">
+                              <CreditCard className="w-4 h-4 text-[#d4af37]" />
+                              <span className="font-semibold text-white text-sm">Credit/Debit Card</span>
+                            </div>
+                            <p className="text-xs text-gray-400">Secure payment via Stripe</p>
+                          </div>
+                        </label>
+                        <label className="flex items-start p-4 bg-[#0a0a0a] border-2 border-[#d4af37]/20 rounded-lg cursor-pointer hover:border-[#d4af37]/40 transition-all">
+                          <input
+                            {...register('paymentMethod')}
+                            type="radio"
+                            value="paypal"
+                            className="mt-1 mr-3 w-4 h-4 text-[#d4af37] border-[#d4af37]/30 focus:ring-[#d4af37]/50"
+                          />
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2 mb-1">
+                              <CreditCard className="w-4 h-4 text-[#d4af37]" />
+                              <span className="font-semibold text-white text-sm">PayPal</span>
+                            </div>
+                            <p className="text-xs text-gray-400">Pay securely with PayPal</p>
+                          </div>
+                        </label>
+                      </div>
+
+                      {/* Invoice Info Button */}
+                      <div className="mt-6">
+                        <button
+                          type="button"
+                          onClick={() => setShowInvoiceModal(true)}
+                          className="flex items-center gap-2 px-4 py-2 text-sm text-[#d4af37] hover:text-[#f5d76e] transition-colors"
+                        >
+                          <Receipt className="w-4 h-4" />
+                          Add Invoice Information (Optional)
+                        </button>
+                      </div>
+
+                      {/* Summary */}
+                      <div className="mt-6 p-4 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg">
+                        <div className="space-y-2 text-sm">
+                          <div className="flex justify-between text-gray-300">
+                            <span>Room ({numberOfNights} nights)</span>
+                            <span>{formatCurrency(roomTotal)}</span>
+                          </div>
+                          {servicesTotal > 0 && (
+                            <div className="flex justify-between text-gray-300">
+                              <span>Services</span>
+                              <span>{formatCurrency(servicesTotal)}</span>
+                            </div>
+                          )}
+                          {promotionDiscount > 0 && (
+                            <div className="flex justify-between text-green-400">
+                              <span>Discount</span>
+                              <span>-{formatCurrency(promotionDiscount)}</span>
+                            </div>
+                          )}
+                          <div className="flex justify-between text-lg font-bold text-[#d4af37] pt-2 border-t border-[#d4af37]/20">
+                            <span>Total</span>
+                            <span>{formatCurrency(totalPrice)}</span>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Validation Summary */}
+                      {(errors.checkInDate || errors.checkOutDate || errors.fullName || errors.email || errors.phone || errors.guestCount) && (
+                        <div className="mt-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
+                          <p className="text-xs text-red-400 font-medium mb-1">Please complete all required fields:</p>
+                          <ul className="text-xs text-red-300 space-y-1">
+                            {errors.checkInDate && <li>• Check-in date is required</li>}
+                            {errors.checkOutDate && <li>• Check-out date is required</li>}
+                            {errors.fullName && <li>• Full name is required</li>}
+                            {errors.email && <li>• Email is required</li>}
+                            {errors.phone && <li>• Phone number is required</li>}
+                            {errors.guestCount && <li>• Number of guests is required</li>}
+                          </ul>
+                        </div>
+                      )}
+
+                      {/* reCAPTCHA */}
+                      <div className="mt-4">
+                        <Recaptcha 
+                          onChange={(token) => {
+                            console.log('reCAPTCHA token received:', token ? 'Yes' : 'No');
+                            setRecaptchaToken(token || null);
+                          }} 
+                          onError={(error) => {
+                            console.error('reCAPTCHA error:', error);
+                            setRecaptchaToken(null);
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </form>
+            )}
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="px-3 sm:px-4 md:px-6 py-3 sm:py-4 border-t border-[#d4af37]/20 bg-gradient-to-r from-[#1a1a1a] to-[#0a0a0a] flex-shrink-0">
+            <div className="flex items-center justify-between gap-2 sm:gap-3">
+              <button
+                onClick={currentStep === 'dates' ? onClose : handleBack}
+                className="px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium text-gray-300 hover:text-white transition-colors flex items-center gap-1.5 sm:gap-2 min-h-[44px]"
+              >
+                <ArrowLeft className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                <span className="hidden xs:inline">{currentStep === 'dates' ? 'Cancel' : 'Back'}</span>
+                <span className="xs:hidden">{currentStep === 'dates' ? 'Cancel' : 'Back'}</span>
+              </button>
+              {currentStep !== 'payment' ? (
+                <button
+                  onClick={handleNext}
+                  disabled={!canGoToNextStep()}
+                  className="px-4 sm:px-6 py-2 bg-[#d4af37] text-black font-semibold rounded-lg hover:bg-[#c9a227] disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm sm:text-base min-h-[44px]"
+                >
+                  <span>Next</span>
+                  <ArrowRight className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    console.log('Complete Booking button clicked');
+                    console.log('Payment method:', paymentMethodForm);
+                    console.log('Form errors:', errors);
+                    console.log('Submitting:', submitting);
+                    handleSubmit(onSubmit, (errors) => {
+                      console.error('Form validation errors:', errors);
+                      // Show validation errors
+                      if (errors.checkInDate || errors.checkOutDate) {
+                        toast.error('Please select check-in and check-out dates');
+                        setCurrentStep('dates');
+                      } else if (errors.fullName || errors.email || errors.phone || errors.guestCount) {
+                        toast.error('Please complete all guest information fields');
+                        setCurrentStep('guests');
+                      } else if (errors.paymentMethod) {
+                        toast.error('Please select a payment method');
+                      } else {
+                        toast.error('Please complete all required fields');
+                      }
+                    })();
+                  }}
+                  disabled={submitting || !paymentMethodForm}
+                  className="px-4 sm:px-6 py-2 bg-[#d4af37] text-black font-semibold rounded-lg hover:bg-[#c9a227] disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm sm:text-base min-h-[44px]"
+                >
+                  {submitting ? (
+                    <>
+                      <Loader2 className="w-3.5 h-3.5 sm:w-4 sm:h-4 animate-spin" />
+                      <span className="hidden xs:inline">Processing...</span>
+                      <span className="xs:hidden">Processing...</span>
+                    </>
+                  ) : (
+                    <>
+                      <span className="hidden sm:inline">Complete Booking</span>
+                      <span className="sm:hidden">Complete</span>
+                      <CheckCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                    </>
+                  )}
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Invoice Info Modal */}
+      {showInvoiceModal && (
+        <InvoiceInfoModal
+          isOpen={showInvoiceModal}
+          onClose={() => setShowInvoiceModal(false)}
+          onSave={(invoiceInfo) => {
+            setValue('invoiceInfo', invoiceInfo);
+            setShowInvoiceModal(false);
+          }}
+        />
+      )}
+
+      {/* Payment Modals */}
+      {showPaymentModal && createdBookingId && paymentMethod && (
+        <>
+          {paymentMethod === 'stripe' && (
+            <StripePaymentModal
+              isOpen={showPaymentModal}
+              bookingId={createdBookingId}
+              amount={totalPrice}
+              currency={currency || 'USD'}
+              onSuccess={handlePaymentSuccess}
+              onClose={handlePaymentClose}
+            />
+          )}
+          {paymentMethod === 'paypal' && (
+            <PayPalPaymentModal
+              isOpen={showPaymentModal}
+              bookingId={createdBookingId}
+              amount={totalPrice}
+              currency={currency || 'USD'}
+              onSuccess={handlePaymentSuccess}
+              onClose={handlePaymentClose}
+            />
+          )}
+          {paymentMethod === 'cash' && (
+            <CashPaymentModal
+              isOpen={showPaymentModal}
+              bookingId={createdBookingId}
+              amount={totalPrice}
+              depositAmount={totalPrice * 0.2}
+              onSuccess={handlePaymentSuccess}
+              onClose={handlePaymentClose}
+            />
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+export default LuxuryBookingModal;
+
diff --git a/Frontend/src/components/payments/CashPaymentModal.tsx b/Frontend/src/components/payments/CashPaymentModal.tsx
new file mode 100644
index 00000000..9f17d584
--- /dev/null
+++ b/Frontend/src/components/payments/CashPaymentModal.tsx
@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { X, CheckCircle, CreditCard } from 'lucide-react';
+import { useFormatCurrency } from '../../hooks/useFormatCurrency';
+import DepositPaymentModal from './DepositPaymentModal';
+
+interface CashPaymentModalProps {
+  isOpen: boolean;
+  bookingId: number;
+  amount: number;
+  depositAmount: number;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const CashPaymentModal: React.FC<CashPaymentModalProps> = ({
+  isOpen,
+  bookingId,
+  amount,
+  depositAmount,
+  onSuccess,
+  onClose,
+}) => {
+  const { formatCurrency } = useFormatCurrency();
+  const [showDepositModal, setShowDepositModal] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handlePayDeposit = () => {
+    setShowDepositModal(true);
+  };
+
+  const handleDepositSuccess = () => {
+    setShowDepositModal(false);
+    onSuccess();
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-[10000] flex items-center justify-center p-2 sm:p-4">
+      <div
+        className="fixed inset-0 bg-black/90 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      <div className="relative w-full max-w-md max-h-[95vh] bg-gradient-to-br from-[#0a0a0a] via-[#1a1a1a] to-[#0a0a0a] rounded-xl sm:rounded-2xl border border-[#d4af37]/30 shadow-2xl shadow-[#d4af37]/20 overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="px-3 sm:px-4 md:px-6 py-3 sm:py-4 border-b border-[#d4af37]/20 bg-gradient-to-r from-[#1a1a1a] to-[#0a0a0a] flex-shrink-0">
+          <div className="flex items-center justify-between gap-2">
+            <h2 className="text-base sm:text-lg md:text-xl font-serif font-bold text-white tracking-tight truncate flex-1">
+              Booking Created
+            </h2>
+            <button
+              onClick={onClose}
+              className="p-1.5 sm:p-2 hover:bg-[#d4af37]/10 rounded-lg transition-colors text-gray-400 hover:text-white flex-shrink-0"
+            >
+              <X className="w-4 h-4 sm:w-5 sm:h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-3 sm:p-4 md:p-6">
+          <div className="space-y-4 sm:space-y-6">
+            <div className="flex flex-col items-center text-center">
+              <div className="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-green-500/20 rounded-full flex items-center justify-center border border-green-500/30 mb-3 sm:mb-4">
+                <CheckCircle className="w-6 h-6 sm:w-8 sm:h-8 md:w-10 md:h-10 text-green-400" />
+              </div>
+              <h3 className="text-base sm:text-lg font-serif font-semibold text-white mb-1.5 sm:mb-2">
+                Booking Confirmed!
+              </h3>
+              <p className="text-xs sm:text-sm text-gray-400 leading-relaxed px-2">
+                Your booking has been created successfully. Please pay the deposit to secure your reservation.
+              </p>
+            </div>
+
+            <div className="bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg p-3 sm:p-4 space-y-2 sm:space-y-3">
+              <div className="flex items-center justify-between text-xs sm:text-sm">
+                <span className="text-gray-400">Total Amount</span>
+                <span className="text-white font-semibold">{formatCurrency(amount)}</span>
+              </div>
+              <div className="flex items-center justify-between text-xs sm:text-sm">
+                <span className="text-gray-400 break-words pr-2">Deposit Required (20%)</span>
+                <span className="text-[#d4af37] font-bold flex-shrink-0">{formatCurrency(depositAmount)}</span>
+              </div>
+              <div className="pt-2 sm:pt-3 border-t border-[#d4af37]/20">
+                <p className="text-xs text-gray-400 leading-relaxed">
+                  Pay the remaining balance on arrival at the hotel.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-2 sm:gap-3 pt-2">
+              <button
+                onClick={handlePayDeposit}
+                className="w-full bg-[#d4af37] text-black font-semibold py-2.5 sm:py-3 px-4 sm:px-6 rounded-lg hover:bg-[#c9a227] transition-all flex items-center justify-center gap-2 text-sm sm:text-base min-h-[44px]"
+              >
+                <CreditCard className="w-4 h-4 sm:w-5 sm:h-5" />
+                <span>Pay Deposit Now</span>
+              </button>
+              <button
+                onClick={onClose}
+                className="w-full bg-transparent border border-gray-600 text-gray-300 font-medium py-2.5 sm:py-3 px-4 sm:px-6 rounded-lg hover:bg-gray-800/50 transition-all text-sm sm:text-base min-h-[44px]"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Deposit Payment Modal */}
+      {showDepositModal && (
+        <DepositPaymentModal
+          isOpen={showDepositModal}
+          bookingId={bookingId}
+          onSuccess={handleDepositSuccess}
+          onClose={() => setShowDepositModal(false)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CashPaymentModal;
+
diff --git a/Frontend/src/components/payments/DepositPaymentModal.tsx b/Frontend/src/components/payments/DepositPaymentModal.tsx
new file mode 100644
index 00000000..7693780d
--- /dev/null
+++ b/Frontend/src/components/payments/DepositPaymentModal.tsx
@@ -0,0 +1,417 @@
+import React, { useState, useEffect } from 'react';
+import {
+  X,
+  CheckCircle,
+  AlertCircle,
+  CreditCard,
+  XCircle,
+  Loader2,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import { getBookingById, type Booking } from '../../services/api/bookingService';
+import CancelBookingModal from '../booking/CancelBookingModal';
+import {
+  getPaymentsByBookingId,
+  type Payment,
+} from '../../services/api/paymentService';
+import { useFormatCurrency } from '../../hooks/useFormatCurrency';
+import StripePaymentModal from './StripePaymentModal';
+import PayPalPaymentModal from './PayPalPaymentModal';
+
+interface DepositPaymentModalProps {
+  isOpen: boolean;
+  bookingId: number;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const DepositPaymentModal: React.FC<DepositPaymentModalProps> = ({
+  isOpen,
+  bookingId,
+  onSuccess,
+  onClose,
+}) => {
+  const { formatCurrency, currency } = useFormatCurrency();
+  const [booking, setBooking] = useState<Booking | null>(null);
+  const [depositPayment, setDepositPayment] = useState<Payment | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [paymentSuccess, setPaymentSuccess] = useState(false);
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<'stripe' | 'paypal' | null>(null);
+  const [showPaymentModal, setShowPaymentModal] = useState(false);
+  const [showCancelModal, setShowCancelModal] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && bookingId) {
+      fetchData(bookingId);
+    }
+  }, [isOpen, bookingId]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setBooking(null);
+      setDepositPayment(null);
+      setPaymentSuccess(false);
+      setSelectedPaymentMethod(null);
+      setShowPaymentModal(false);
+      setError(null);
+    }
+  }, [isOpen]);
+
+  const fetchData = async (id: number) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const bookingResponse = await getBookingById(id);
+      if (!bookingResponse.success || !bookingResponse.data?.booking) {
+        throw new Error('Booking not found');
+      }
+
+      const bookingData = bookingResponse.data.booking;
+      setBooking(bookingData);
+
+      // Close modal if booking is cancelled
+      if (bookingData.status === 'cancelled') {
+        toast.info('This booking has been cancelled');
+        onClose();
+        return;
+      }
+
+      if (bookingData.status === 'confirmed' || bookingData.status === 'checked_in') {
+        toast.success('Booking is already confirmed!');
+        onSuccess();
+        onClose();
+        return;
+      }
+
+      if (!bookingData.requires_deposit) {
+        toast.info('This booking does not require a deposit');
+        onSuccess();
+        onClose();
+        return;
+      }
+
+      const paymentsResponse = await getPaymentsByBookingId(id);
+      if (paymentsResponse.success) {
+        const deposit = paymentsResponse.data.payments.find(
+          (p) => p.payment_type === 'deposit'
+        );
+        if (deposit) {
+          setDepositPayment(deposit);
+          if (deposit.payment_status === 'completed') {
+            setPaymentSuccess(true);
+          }
+        }
+      }
+    } catch (err: any) {
+      console.error('Error fetching data:', err);
+      const message =
+        err.response?.data?.message || 'Unable to load payment information';
+      setError(message);
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancelBookingClick = () => {
+    setShowCancelModal(true);
+  };
+
+  const handleCancelSuccess = () => {
+    setShowCancelModal(false);
+    onClose();
+    onSuccess();
+  };
+
+  const handlePaymentMethodSelect = (method: 'stripe' | 'paypal') => {
+    setSelectedPaymentMethod(method);
+    setShowPaymentModal(true);
+  };
+
+  const handlePaymentSuccess = async () => {
+    setShowPaymentModal(false);
+    setPaymentSuccess(true);
+    setSelectedPaymentMethod(null);
+    
+    // Check booking status before showing success toast
+    try {
+      const bookingResponse = await getBookingById(bookingId);
+      if (bookingResponse.success && bookingResponse.data?.booking) {
+        const bookingData = bookingResponse.data.booking;
+        // Only show success toast if booking is not cancelled
+        if (bookingData.status !== 'cancelled') {
+          toast.success('✅ Deposit payment successful! Your booking has been confirmed.');
+        }
+      }
+    } catch (err) {
+      // If we can't check status, don't show toast to avoid confusion
+      console.error('Error checking booking status:', err);
+    }
+    
+    setTimeout(() => {
+      onSuccess();
+      onClose();
+    }, 1500);
+  };
+
+  const handlePaymentClose = () => {
+    setShowPaymentModal(false);
+    setSelectedPaymentMethod(null);
+    // When payment is canceled, close the deposit modal entirely
+    // User can reopen it from booking details if needed
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  const depositAmount = depositPayment ? parseFloat(depositPayment.amount.toString()) : 0;
+  const remainingAmount = booking ? booking.total_price - depositAmount : 0;
+  const isDepositPaid = depositPayment?.payment_status === 'completed';
+
+  return (
+    <>
+      <div className="fixed inset-0 z-[10000] flex items-center justify-center p-2 sm:p-4">
+        <div
+          className="fixed inset-0 bg-black/90 backdrop-blur-sm"
+          onClick={onClose}
+        />
+        <div className="relative w-full max-w-3xl max-h-[95vh] bg-gradient-to-br from-[#0a0a0a] via-[#1a1a1a] to-[#0a0a0a] rounded-xl sm:rounded-2xl border border-[#d4af37]/30 shadow-2xl shadow-[#d4af37]/20 overflow-hidden flex flex-col">
+          {/* Header */}
+          <div className="px-3 sm:px-4 md:px-6 py-3 sm:py-4 border-b border-[#d4af37]/20 bg-gradient-to-r from-[#1a1a1a] to-[#0a0a0a] flex-shrink-0">
+            <div className="flex items-center justify-between gap-2">
+              <div className="min-w-0 flex-1">
+                <h2 className="text-base sm:text-lg md:text-xl font-serif font-bold text-white tracking-tight truncate">
+                  Deposit Payment
+                </h2>
+                {booking && (
+                  <p className="text-xs text-gray-400 mt-0.5 truncate">
+                    Booking #{booking.booking_number}
+                  </p>
+                )}
+              </div>
+              <div className="flex items-center gap-1.5 sm:gap-2 flex-shrink-0">
+                {!isDepositPaid && booking && (
+                  <button
+                    onClick={handleCancelBookingClick}
+                    className="px-2 sm:px-3 py-1 sm:py-1.5 text-xs bg-red-500/10 border border-red-500/30 text-red-300 rounded-lg hover:bg-red-500/20 transition-colors flex items-center gap-1 sm:gap-1.5 min-h-[32px] sm:min-h-[36px]"
+                  >
+                    <XCircle className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
+                    <span className="hidden xs:inline">Cancel Booking</span>
+                    <span className="xs:hidden">Cancel</span>
+                  </button>
+                )}
+                <button
+                  onClick={onClose}
+                  className="p-1.5 sm:p-2 hover:bg-[#d4af37]/10 rounded-lg transition-colors text-gray-400 hover:text-white flex-shrink-0"
+                >
+                  <X className="w-4 h-4 sm:w-5 sm:h-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto px-3 sm:px-4 md:px-6 py-4 sm:py-6">
+            {loading ? (
+              <div className="flex flex-col items-center justify-center py-8 sm:py-12">
+                <Loader2 className="w-10 h-10 sm:w-12 sm:h-12 animate-spin text-[#d4af37] mb-3 sm:mb-4" />
+                <p className="text-xs sm:text-sm text-gray-400">Loading payment information...</p>
+              </div>
+            ) : error || !booking || !depositPayment ? (
+              <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4 sm:p-6 text-center">
+                <AlertCircle className="w-10 h-10 sm:w-12 sm:h-12 text-red-400 mx-auto mb-3 sm:mb-4" />
+                <p className="text-xs sm:text-sm text-red-300 font-medium mb-3 sm:mb-4">
+                  {error || 'Payment information not found'}
+                </p>
+                <button
+                  onClick={onClose}
+                  className="px-4 py-2 sm:py-2.5 bg-[#d4af37] text-black font-semibold rounded-lg hover:bg-[#c9a227] transition-all text-sm sm:text-base min-h-[44px]"
+                >
+                  Close
+                </button>
+              </div>
+            ) : (
+              <div className="space-y-4 sm:space-y-6">
+                {/* Success Message */}
+                {isDepositPaid && (
+                  <div className="bg-green-500/10 border border-green-500/30 rounded-lg p-3 sm:p-4">
+                    <div className="flex items-start gap-2 sm:gap-3">
+                      <div className="w-10 h-10 sm:w-12 sm:h-12 bg-green-500/20 rounded-full flex items-center justify-center border border-green-500/30 flex-shrink-0">
+                        <CheckCircle className="w-5 h-5 sm:w-6 sm:h-6 md:w-7 md:h-7 text-green-400" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <h3 className="text-base sm:text-lg font-serif font-semibold text-green-300 mb-1">
+                          Deposit Payment Successful!
+                        </h3>
+                        <p className="text-xs sm:text-sm text-green-200/80 leading-relaxed">
+                          Your booking has been confirmed. Remaining amount to be paid on arrival at the hotel.
+                        </p>
+                        {depositPayment.payment_date && (
+                          <p className="text-xs text-green-300/70 mt-2">
+                            Paid on: {new Date(depositPayment.payment_date).toLocaleString('en-US')}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Payment Required Message */}
+                {!isDepositPaid && (
+                  <div className="bg-[#d4af37]/10 border border-[#d4af37]/30 rounded-lg p-3 sm:p-4">
+                    <div className="flex items-start gap-2 sm:gap-3">
+                      <div className="w-10 h-10 sm:w-12 sm:h-12 bg-[#d4af37]/20 rounded-full flex items-center justify-center border border-[#d4af37]/30 flex-shrink-0">
+                        <CreditCard className="w-5 h-5 sm:w-6 sm:h-6 md:w-7 md:h-7 text-[#d4af37]" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <h3 className="text-base sm:text-lg font-serif font-semibold text-[#d4af37] mb-1">
+                          Deposit Payment Required
+                        </h3>
+                        <p className="text-xs sm:text-sm text-gray-300 leading-relaxed">
+                          Please pay <strong className="text-[#d4af37]">20% deposit</strong> to confirm your booking. Pay the remaining balance on arrival at the hotel.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Payment Information */}
+                <div className="bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg p-3 sm:p-4">
+                  <h3 className="text-xs sm:text-sm font-semibold text-[#d4af37] mb-2 sm:mb-3">Payment Information</h3>
+                  <div className="space-y-1.5 sm:space-y-2 text-xs sm:text-sm">
+                    <div className="flex justify-between text-gray-300">
+                      <span>Total Room Price</span>
+                      <span>{formatCurrency(booking.total_price)}</span>
+                    </div>
+                    <div className="flex justify-between text-base sm:text-lg font-bold text-[#d4af37] pt-2 border-t border-[#d4af37]/20">
+                      <span className="break-words pr-2">Deposit Amount (20%)</span>
+                      <span className="flex-shrink-0">{formatCurrency(depositAmount)}</span>
+                    </div>
+                    <div className="flex justify-between text-xs text-gray-400 pt-1">
+                      <span>Remaining at check-in</span>
+                      <span>{formatCurrency(remainingAmount)}</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Payment Method Selection */}
+                {!isDepositPaid && !selectedPaymentMethod && (
+                  <div className="bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg p-3 sm:p-4">
+                    <h3 className="text-xs sm:text-sm font-semibold text-[#d4af37] mb-2 sm:mb-3">Choose Payment Method</h3>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
+                      <button
+                        onClick={() => handlePaymentMethodSelect('stripe')}
+                        className="p-3 sm:p-4 bg-[#1a1a1a] border-2 border-gray-600/30 rounded-lg hover:border-[#d4af37]/50 transition-all text-left group min-h-[80px] sm:min-h-[100px]"
+                      >
+                        <div className="flex items-center justify-between mb-1.5 sm:mb-2">
+                          <div className="w-8 h-8 sm:w-10 sm:h-10 bg-indigo-500/20 rounded-lg flex items-center justify-center border border-indigo-500/30 flex-shrink-0">
+                            <CreditCard className="w-4 h-4 sm:w-5 sm:h-5 text-indigo-400 group-hover:text-[#d4af37] transition-colors" />
+                          </div>
+                          <span className="text-xs font-semibold text-indigo-400 group-hover:text-[#d4af37] transition-colors">
+                            Card Payment
+                          </span>
+                        </div>
+                        <p className="text-xs text-gray-400 group-hover:text-gray-300 transition-colors leading-relaxed">
+                          Pay with credit or debit card via Stripe
+                        </p>
+                      </button>
+
+                      <button
+                        onClick={() => handlePaymentMethodSelect('paypal')}
+                        className="p-3 sm:p-4 bg-[#1a1a1a] border-2 border-gray-600/30 rounded-lg hover:border-[#d4af37]/50 transition-all text-left group min-h-[80px] sm:min-h-[100px]"
+                      >
+                        <div className="flex items-center justify-between mb-1.5 sm:mb-2">
+                          <div className="w-8 h-8 sm:w-10 sm:h-10 bg-blue-500/20 rounded-lg flex items-center justify-center border border-blue-500/30 flex-shrink-0">
+                            <svg
+                              className="w-4 h-4 sm:w-5 sm:h-5 text-blue-400 group-hover:text-[#d4af37] transition-colors"
+                              viewBox="0 0 24 24"
+                              fill="currentColor"
+                            >
+                              <path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.203zm14.146-14.42a.477.477 0 0 0-.414-.24h-3.84c-.48 0-.856.355-.932.826-.075.47-.232 1.21-.232 1.21s-.156-.74-.232-1.21a.957.957 0 0 0-.932-.826H5.342a.957.957 0 0 0-.932.826c-.076.47-.232 1.21-.232 1.21s-.156-.74-.232-1.21a.957.957 0 0 0-.932-.826H.477a.477.477 0 0 0-.414.24c-.11.19-.14.426-.08.643.06.217.2.4.388.51l.04.02c.19.11.426.14.643.08.217-.06.4-.2.51-.388l.01-.02c.11-.19.14-.426.08-.643a.955.955 0 0 0-.388-.51l-.01-.01a.955.955 0 0 0-.51-.388.955.955 0 0 0-.643.08l-.01.01a.955.955 0 0 0-.388.51c-.06.217-.03.453.08.643l.01.02c.11.188.293.328.51.388.217.06.453.03.643-.08l.01-.02c.188-.11.328-.293.388-.51.06-.217.03-.453-.08-.643l-.01-.01z"/>
+                            </svg>
+                          </div>
+                          <span className="text-xs font-semibold text-blue-400 group-hover:text-[#d4af37] transition-colors">
+                            PayPal
+                          </span>
+                        </div>
+                        <p className="text-xs text-gray-400 group-hover:text-gray-300 transition-colors leading-relaxed">
+                          Pay securely with your PayPal account
+                        </p>
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                {/* Change Payment Method */}
+                {!isDepositPaid && selectedPaymentMethod && (
+                  <div className="bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg p-3 sm:p-4">
+                    <div className="flex items-center justify-between gap-2 mb-2 sm:mb-3">
+                      <div className="min-w-0 flex-1">
+                        <h3 className="text-xs sm:text-sm font-semibold text-[#d4af37]">
+                          {selectedPaymentMethod === 'stripe' ? 'Card Payment' : 'PayPal Payment'}
+                        </h3>
+                        <p className="text-xs text-gray-400 mt-0.5 sm:mt-1">
+                          Pay deposit of {formatCurrency(depositAmount)}
+                        </p>
+                      </div>
+                      <button
+                        onClick={() => {
+                          setSelectedPaymentMethod(null);
+                          setShowPaymentModal(false);
+                        }}
+                        className="text-xs text-gray-400 hover:text-[#d4af37] underline transition-colors flex-shrink-0 whitespace-nowrap"
+                      >
+                        Change method
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Payment Modals */}
+      {showPaymentModal && booking && depositPayment && selectedPaymentMethod && (
+        <>
+          {selectedPaymentMethod === 'stripe' && (
+            <StripePaymentModal
+              isOpen={showPaymentModal}
+              bookingId={booking.id}
+              amount={depositAmount}
+              currency={currency || 'USD'}
+              onSuccess={handlePaymentSuccess}
+              onClose={handlePaymentClose}
+            />
+          )}
+          {selectedPaymentMethod === 'paypal' && (
+            <PayPalPaymentModal
+              isOpen={showPaymentModal}
+              bookingId={booking.id}
+              amount={depositAmount}
+              currency={currency || 'USD'}
+              onSuccess={handlePaymentSuccess}
+              onClose={handlePaymentClose}
+            />
+          )}
+        </>
+      )}
+
+      {/* Cancel Booking Modal */}
+      {showCancelModal && booking && (
+        <CancelBookingModal
+          isOpen={showCancelModal}
+          booking={booking}
+          onClose={() => setShowCancelModal(false)}
+          onSuccess={handleCancelSuccess}
+        />
+      )}
+    </>
+  );
+};
+
+export default DepositPaymentModal;
+
diff --git a/Frontend/src/components/payments/PayPalPaymentModal.tsx b/Frontend/src/components/payments/PayPalPaymentModal.tsx
new file mode 100644
index 00000000..4f398524
--- /dev/null
+++ b/Frontend/src/components/payments/PayPalPaymentModal.tsx
@@ -0,0 +1,188 @@
+import React, { useState, useEffect } from 'react';
+import { createPayPalOrder } from '../../services/api/paymentService';
+import { X, Loader2, AlertCircle, CheckCircle } from 'lucide-react';
+import { toast } from 'react-toastify';
+import { useFormatCurrency } from '../../hooks/useFormatCurrency';
+
+interface PayPalPaymentModalProps {
+  isOpen: boolean;
+  bookingId: number;
+  amount: number;
+  currency?: string;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const PayPalPaymentModal: React.FC<PayPalPaymentModalProps> = ({
+  isOpen,
+  bookingId,
+  amount,
+  currency: propCurrency,
+  onSuccess,
+  onClose,
+}) => {
+  const { currency: contextCurrency } = useFormatCurrency();
+  const currency = propCurrency || contextCurrency || 'USD';
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [approvalUrl, setApprovalUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const initializePayPal = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const currentUrl = window.location.origin;
+        const returnUrl = `${currentUrl}/payment/paypal/return?bookingId=${bookingId}`;
+        const cancelUrl = `${currentUrl}/payment/paypal/cancel?bookingId=${bookingId}`;
+
+        const response = await createPayPalOrder(
+          bookingId,
+          amount,
+          currency,
+          returnUrl,
+          cancelUrl
+        );
+
+        if (response.success && response.data) {
+          const { approval_url } = response.data;
+          
+          if (!approval_url) {
+            throw new Error('Approval URL not received from server');
+          }
+          
+          setApprovalUrl(approval_url);
+        } else {
+          throw new Error(response.message || 'Failed to initialize PayPal payment');
+        }
+      } catch (err: any) {
+        console.error('Error initializing PayPal:', err);
+        const errorMessage = err.response?.data?.message || err.message || 'Failed to initialize PayPal payment';
+        setError(errorMessage);
+        toast.error(errorMessage);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    initializePayPal();
+  }, [isOpen, bookingId, amount, currency]);
+
+  const handlePayPalClick = () => {
+    if (approvalUrl) {
+      window.location.href = approvalUrl;
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[10000] flex items-center justify-center p-2 sm:p-4">
+      <div
+        className="fixed inset-0 bg-black/90 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      <div className="relative w-full max-w-md max-h-[95vh] bg-gradient-to-br from-[#0a0a0a] via-[#1a1a1a] to-[#0a0a0a] rounded-xl sm:rounded-2xl border border-[#d4af37]/30 shadow-2xl shadow-[#d4af37]/20 overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="px-3 sm:px-4 md:px-6 py-3 sm:py-4 border-b border-[#d4af37]/20 bg-gradient-to-r from-[#1a1a1a] to-[#0a0a0a] flex-shrink-0">
+          <div className="flex items-center justify-between gap-2">
+            <h2 className="text-base sm:text-lg md:text-xl font-serif font-bold text-white tracking-tight truncate flex-1">
+              PayPal Payment
+            </h2>
+            <button
+              onClick={onClose}
+              className="p-1.5 sm:p-2 hover:bg-[#d4af37]/10 rounded-lg transition-colors text-gray-400 hover:text-white flex-shrink-0"
+            >
+              <X className="w-4 h-4 sm:w-5 sm:h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-3 sm:p-4 md:p-6">
+          {loading ? (
+            <div className="flex flex-col items-center justify-center py-8 sm:py-12">
+              <Loader2 className="w-10 h-10 sm:w-12 sm:h-12 animate-spin text-[#d4af37] mb-3 sm:mb-4" />
+              <p className="text-xs sm:text-sm text-gray-400">Initializing PayPal payment...</p>
+            </div>
+          ) : error ? (
+            <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-3 sm:p-4">
+              <div className="flex items-start gap-2 sm:gap-3">
+                <AlertCircle className="w-4 h-4 sm:w-5 sm:h-5 text-red-400 mt-0.5 flex-shrink-0" />
+                <div className="min-w-0 flex-1">
+                  <h3 className="text-xs sm:text-sm font-semibold text-red-300 mb-1">
+                    Payment Initialization Failed
+                  </h3>
+                  <p className="text-xs text-red-200/80 leading-relaxed">
+                    {error || 'Unable to initialize PayPal payment. Please try again.'}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : approvalUrl ? (
+            <div className="space-y-4 sm:space-y-6">
+              <div className="text-center">
+                <div className="mb-3 sm:mb-4 flex justify-center">
+                  <svg
+                    className="h-10 sm:h-12 w-auto"
+                    viewBox="0 0 283 64"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.7-9.2 12.2-9.2z"
+                      fill="#003087"
+                    />
+                  </svg>
+                </div>
+                <h3 className="text-base sm:text-lg font-serif font-semibold text-white mb-1.5 sm:mb-2">
+                  Complete Payment with PayPal
+                </h3>
+                <p className="text-xs sm:text-sm text-gray-400 mb-3 sm:mb-4 leading-relaxed px-2">
+                  You will be redirected to PayPal to securely complete your payment of{' '}
+                  <span className="font-semibold text-[#d4af37]">
+                    {new Intl.NumberFormat('en-US', {
+                      style: 'currency',
+                      currency: currency,
+                    }).format(amount)}
+                  </span>
+                </p>
+              </div>
+              <button
+                onClick={handlePayPalClick}
+                className="w-full bg-gradient-to-r from-[#0070ba] to-[#005ea6] 
+                  hover:from-[#0080cc] hover:to-[#0070ba] text-white 
+                  font-semibold py-2.5 sm:py-3 px-4 sm:px-6 rounded-lg transition-all duration-300 
+                  flex items-center justify-center gap-2 sm:gap-3 shadow-lg shadow-blue-500/30
+                  hover:shadow-xl hover:shadow-blue-500/40 text-sm sm:text-base min-h-[44px]"
+              >
+                <svg
+                  className="w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.203zm14.146-14.42a.477.477 0 0 0-.414-.24h-3.84c-.48 0-.856.355-.932.826-.075.47-.232 1.21-.232 1.21s-.156-.74-.232-1.21a.957.957 0 0 0-.932-.826H5.342a.957.957 0 0 0-.932.826c-.076.47-.232 1.21-.232 1.21s-.156-.74-.232-1.21a.957.957 0 0 0-.932-.826H.477a.477.477 0 0 0-.414.24c-.11.19-.14.426-.08.643.06.217.2.4.388.51l.04.02c.19.11.426.14.643.08.217-.06.4-.2.51-.388l.01-.02c.11-.19.14-.426.08-.643a.955.955 0 0 0-.388-.51l-.01-.01a.955.955 0 0 0-.51-.388.955.955 0 0 0-.643.08l-.01.01a.955.955 0 0 0-.388.51c-.06.217-.03.453.08.643l.01.02c.11.188.293.328.51.388.217.06.453.03.643-.08l.01-.02c.188-.11.328-.293.388-.51.06-.217.03-.453-.08-.643l-.01-.01z"/>
+                </svg>
+                <span>Pay with PayPal</span>
+              </button>
+              <p className="text-xs text-gray-500 text-center">
+                Secure payment powered by PayPal
+              </p>
+            </div>
+          ) : (
+            <div className="flex flex-col items-center justify-center py-8 sm:py-12">
+              <Loader2 className="w-10 h-10 sm:w-12 sm:h-12 animate-spin text-[#d4af37] mb-3 sm:mb-4" />
+              <p className="text-xs sm:text-sm text-gray-400">Loading PayPal...</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PayPalPaymentModal;
+
diff --git a/Frontend/src/components/payments/StripePaymentForm.tsx b/Frontend/src/components/payments/StripePaymentForm.tsx
index c5db54f8..96ade415 100644
--- a/Frontend/src/components/payments/StripePaymentForm.tsx
+++ b/Frontend/src/components/payments/StripePaymentForm.tsx
@@ -75,97 +75,88 @@ const StripePaymentForm: React.FC<StripePaymentFormProps> = ({
   if (!stripe || !elements) {
     return (
       <div className="flex items-center justify-center p-8">
-        <Loader2 className="w-8 h-8 animate-spin text-indigo-600" />
-        <span className="ml-2 text-gray-600">Loading payment form...</span>
+        <Loader2 className="w-8 h-8 animate-spin text-[#d4af37]" />
+        <span className="ml-2 text-gray-300">Loading payment form...</span>
       </div>
     );
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-6">
-      <div className="bg-white rounded-lg border border-gray-200 p-6">
-        <div className="flex items-center gap-2 mb-4">
-          <CreditCard className="w-5 h-5 text-indigo-600" />
-          <h3 className="text-lg font-semibold text-gray-900">
-            Payment Details
-          </h3>
-        </div>
-        
-        <div className="mb-4 p-4 bg-indigo-50 border border-indigo-200 rounded-lg">
-          <div className="flex justify-between items-center">
-            <span className="text-sm font-medium text-indigo-900">
-              Amount to Pay
-            </span>
-            <span className="text-xl font-bold text-indigo-600">
-              ${amount.toFixed(2)}
-            </span>
-          </div>
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="mb-4 p-4 bg-[#d4af37]/10 border border-[#d4af37]/20 rounded-lg">
+        <div className="flex justify-between items-center">
+          <span className="text-sm font-medium text-gray-300">
+            Amount to Pay
+          </span>
+          <span className="text-xl font-bold text-[#d4af37]">
+            ${amount.toFixed(2)}
+          </span>
         </div>
+      </div>
 
-        <div className="mb-4">
-          <PaymentElement
-            options={{
-              layout: 'tabs',
-            }}
-          />
-        </div>
+      <div className="mb-4">
+        <PaymentElement
+          options={{
+            layout: 'tabs',
+          }}
+        />
+      </div>
 
-        {message && (
-          <div
-            className={`mb-4 p-4 rounded-lg flex items-start gap-3 ${
+      {message && (
+        <div
+          className={`mb-4 p-3 rounded-lg flex items-start gap-3 ${
+            message.includes('succeeded')
+              ? 'bg-green-500/10 border border-green-500/30'
+              : message.includes('error') || message.includes('failed')
+              ? 'bg-red-500/10 border border-red-500/30'
+              : 'bg-yellow-500/10 border border-yellow-500/30'
+          }`}
+        >
+          {message.includes('succeeded') ? (
+            <CheckCircle className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
+          ) : message.includes('error') || message.includes('failed') ? (
+            <AlertCircle className="w-5 h-5 text-red-400 mt-0.5 flex-shrink-0" />
+          ) : (
+            <Loader2 className="w-5 h-5 text-yellow-400 mt-0.5 animate-spin flex-shrink-0" />
+          )}
+          <p
+            className={`text-sm ${
               message.includes('succeeded')
-                ? 'bg-green-50 border border-green-200'
+                ? 'text-green-300'
                 : message.includes('error') || message.includes('failed')
-                ? 'bg-red-50 border border-red-200'
-                : 'bg-yellow-50 border border-yellow-200'
+                ? 'text-red-300'
+                : 'text-yellow-300'
             }`}
           >
-            {message.includes('succeeded') ? (
-              <CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
-            ) : message.includes('error') || message.includes('failed') ? (
-              <AlertCircle className="w-5 h-5 text-red-600 mt-0.5" />
-            ) : (
-              <Loader2 className="w-5 h-5 text-yellow-600 mt-0.5 animate-spin" />
-            )}
-            <p
-              className={`text-sm ${
-                message.includes('succeeded')
-                  ? 'text-green-800'
-                  : message.includes('error') || message.includes('failed')
-                  ? 'text-red-800'
-                  : 'text-yellow-800'
-              }`}
-            >
-              {message}
-            </p>
-          </div>
+            {message}
+          </p>
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={isProcessing || !stripe || !elements}
+        className="w-full bg-[#d4af37] text-black py-3 px-4 rounded-lg 
+          hover:bg-[#c9a227] transition-colors font-semibold 
+          disabled:bg-gray-600 disabled:cursor-not-allowed disabled:text-gray-400
+          flex items-center justify-center gap-2"
+      >
+        {isProcessing ? (
+          <>
+            <Loader2 className="w-5 h-5 animate-spin" />
+            Processing...
+          </>
+        ) : (
+          <>
+            <CreditCard className="w-5 h-5" />
+            Pay ${amount.toFixed(2)}
+          </>
         )}
+      </button>
 
-        <button
-          type="submit"
-          disabled={isProcessing || !stripe || !elements}
-          className="w-full bg-indigo-600 text-white py-3 px-4 rounded-lg 
-            hover:bg-indigo-700 transition-colors font-semibold 
-            disabled:bg-gray-400 disabled:cursor-not-allowed
-            flex items-center justify-center gap-2"
-        >
-          {isProcessing ? (
-            <>
-              <Loader2 className="w-5 h-5 animate-spin" />
-              Processing...
-            </>
-          ) : (
-            <>
-              <CreditCard className="w-5 h-5" />
-              Pay ${amount.toFixed(2)}
-            </>
-          )}
-        </button>
-
-        <p className="text-xs text-gray-500 mt-3 text-center">
-          Your payment is secure and encrypted
-        </p>
-      </div>
+      <p className="text-xs text-gray-500 text-center">
+        Your payment is secure and encrypted
+      </p>
     </form>
   );
 };
diff --git a/Frontend/src/components/payments/StripePaymentModal.tsx b/Frontend/src/components/payments/StripePaymentModal.tsx
new file mode 100644
index 00000000..4d8f8e57
--- /dev/null
+++ b/Frontend/src/components/payments/StripePaymentModal.tsx
@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from 'react';
+import { loadStripe, StripeElementsOptions } from '@stripe/stripe-js';
+import { Elements } from '@stripe/react-stripe-js';
+import StripePaymentForm from './StripePaymentForm';
+import { createStripePaymentIntent, confirmStripePayment } from '../../services/api/paymentService';
+import { X, Loader2, AlertCircle, CheckCircle } from 'lucide-react';
+import { toast } from 'react-toastify';
+
+interface StripePaymentModalProps {
+  isOpen: boolean;
+  bookingId: number;
+  amount: number;
+  currency?: string;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const StripePaymentModal: React.FC<StripePaymentModalProps> = ({
+  isOpen,
+  bookingId,
+  amount,
+  currency = 'usd',
+  onSuccess,
+  onClose,
+}) => {
+  const [stripePromise, setStripePromise] = useState<Promise<any> | null>(null);
+  const [clientSecret, setClientSecret] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [paymentCompleted, setPaymentCompleted] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen || paymentCompleted) return;
+
+    const initializeStripe = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const response = await createStripePaymentIntent(
+          bookingId,
+          amount,
+          currency
+        );
+
+        if (response.success && response.data) {
+          const { publishable_key, client_secret } = response.data;
+          
+          if (!client_secret) {
+            throw new Error('Client secret not received from server');
+          }
+          
+          if (!publishable_key) {
+            throw new Error('Publishable key not configured. Please configure Stripe settings in Admin Panel.');
+          }
+          
+          setClientSecret(client_secret);
+          const stripePromise = loadStripe(publishable_key);
+          setStripePromise(stripePromise);
+        } else {
+          throw new Error(response.message || 'Failed to initialize payment');
+        }
+      } catch (err: any) {
+        console.error('Error initializing Stripe:', err);
+        const errorMessage = err.response?.data?.message || err.message || 'Failed to initialize payment';
+        setError(errorMessage);
+        toast.error(errorMessage);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    initializeStripe();
+  }, [isOpen, bookingId, amount, currency, paymentCompleted]);
+
+  const handlePaymentSuccess = async (paymentIntentId: string) => {
+    try {
+      setPaymentCompleted(true);
+      const response = await confirmStripePayment(paymentIntentId, bookingId);
+      
+      if (response.success) {
+        toast.success('✅ Payment successful!');
+        onSuccess();
+      } else {
+        setPaymentCompleted(false);
+        throw new Error(response.message || 'Payment confirmation failed');
+      }
+    } catch (err: any) {
+      console.error('Error confirming payment:', err);
+      setPaymentCompleted(false);
+      const errorMessage = err.response?.data?.message || err.message || 'Payment confirmation failed';
+      setError(errorMessage);
+      toast.error(errorMessage);
+    }
+  };
+
+  const handlePaymentError = (errorMessage: string) => {
+    setError(errorMessage);
+    toast.error(errorMessage);
+  };
+
+  if (!isOpen) return null;
+
+  const options: StripeElementsOptions = {
+    clientSecret: clientSecret || undefined,
+    appearance: {
+      theme: 'night' as const,
+      variables: {
+        colorPrimary: '#d4af37',
+        colorBackground: '#0a0a0a',
+        colorText: '#ffffff',
+        colorDanger: '#ef4444',
+        fontFamily: 'system-ui, sans-serif',
+        spacingUnit: '4px',
+        borderRadius: '8px',
+      },
+    },
+  };
+
+  return (
+    <div className="fixed inset-0 z-[10000] flex items-center justify-center p-2 sm:p-4">
+      <div
+        className="fixed inset-0 bg-black/90 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      <div className="relative w-full max-w-md max-h-[95vh] bg-gradient-to-br from-[#0a0a0a] via-[#1a1a1a] to-[#0a0a0a] rounded-xl sm:rounded-2xl border border-[#d4af37]/30 shadow-2xl shadow-[#d4af37]/20 overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="px-3 sm:px-4 md:px-6 py-3 sm:py-4 border-b border-[#d4af37]/20 bg-gradient-to-r from-[#1a1a1a] to-[#0a0a0a] flex-shrink-0">
+          <div className="flex items-center justify-between gap-2">
+            <h2 className="text-base sm:text-lg md:text-xl font-serif font-bold text-white tracking-tight truncate flex-1">
+              Complete Payment
+            </h2>
+            <button
+              onClick={onClose}
+              className="p-1.5 sm:p-2 hover:bg-[#d4af37]/10 rounded-lg transition-colors text-gray-400 hover:text-white flex-shrink-0"
+            >
+              <X className="w-4 h-4 sm:w-5 sm:h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-3 sm:p-4 md:p-6">
+          {loading ? (
+            <div className="flex flex-col items-center justify-center py-8 sm:py-12">
+              <Loader2 className="w-10 h-10 sm:w-12 sm:h-12 animate-spin text-[#d4af37] mb-3 sm:mb-4" />
+              <p className="text-xs sm:text-sm text-gray-400">Initializing payment...</p>
+            </div>
+          ) : error ? (
+            <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-3 sm:p-4">
+              <div className="flex items-start gap-2 sm:gap-3">
+                <AlertCircle className="w-4 h-4 sm:w-5 sm:h-5 text-red-400 mt-0.5 flex-shrink-0" />
+                <div className="min-w-0 flex-1">
+                  <h3 className="text-xs sm:text-sm font-semibold text-red-300 mb-1">
+                    Payment Initialization Failed
+                  </h3>
+                  <p className="text-xs text-red-200/80 leading-relaxed">
+                    {error || 'Unable to initialize payment. Please try again.'}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : clientSecret && stripePromise ? (
+            <Elements stripe={stripePromise} options={options}>
+              <StripePaymentForm
+                clientSecret={clientSecret}
+                amount={amount}
+                onSuccess={handlePaymentSuccess}
+                onError={handlePaymentError}
+              />
+            </Elements>
+          ) : (
+            <div className="flex flex-col items-center justify-center py-8 sm:py-12">
+              <Loader2 className="w-10 h-10 sm:w-12 sm:h-12 animate-spin text-[#d4af37] mb-3 sm:mb-4" />
+              <p className="text-xs sm:text-sm text-gray-400">Loading payment form...</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StripePaymentModal;
+
diff --git a/Frontend/src/pages/customer/BookingDetailPage.tsx b/Frontend/src/pages/customer/BookingDetailPage.tsx
index 2e361d0d..053f0d25 100644
--- a/Frontend/src/pages/customer/BookingDetailPage.tsx
+++ b/Frontend/src/pages/customer/BookingDetailPage.tsx
@@ -26,7 +26,6 @@ import {
 import { toast } from 'react-toastify';
 import {
   getBookingById,
-  cancelBooking,
   type Booking,
 } from '../../services/api/bookingService';
 import useAuthStore from '../../store/useAuthStore';
@@ -36,6 +35,7 @@ import PaymentStatusBadge from
   '../../components/common/PaymentStatusBadge';
 import { useFormatCurrency } from '../../hooks/useFormatCurrency';
 import { parseDateLocal } from '../../utils/format';
+import CancelBookingModal from '../../components/booking/CancelBookingModal';
 
 const BookingDetailPage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -49,7 +49,7 @@ const BookingDetailPage: React.FC = () => {
   );
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [cancelling, setCancelling] = useState(false);
+  const [showCancelModal, setShowCancelModal] = useState(false);
 
   
   useEffect(() => {
@@ -102,69 +102,19 @@ const BookingDetailPage: React.FC = () => {
     }
   };
 
-  const handleCancelBooking = async () => {
-    console.log('=== handleCancelBooking called ===');
+  const handleCancelBookingClick = () => {
     if (!booking) {
-      console.error('No booking found');
       toast.error('Booking not found');
       return;
     }
+    setShowCancelModal(true);
+  };
 
-    console.log('Cancel booking clicked', { bookingId: booking.id, status: booking.status });
-
-    
-    const confirmed = window.confirm(
-      `⚠️ CANCEL BOOKING CONFIRMATION ⚠️\n\n` +
-      `Booking Number: ${booking.booking_number}\n\n` +
-      `Are you sure you want to cancel this booking?\n\n` +
-      `IMPORTANT NOTES:\n` +
-      `• You will be charged 20% cancellation fee\n` +
-      `• The remaining 80% will be refunded\n` +
-      `• This action cannot be undone\n\n` +
-      `Click OK to confirm cancellation\n` +
-      `Click Cancel to keep your booking`
-    );
-
-    if (!confirmed) {
-      console.log('User chose to keep the booking');
-      toast.info('Booking cancellation cancelled. Your booking remains active.');
-      return;
-    }
-
-    console.log('User confirmed cancellation, proceeding...');
-
-    try {
-      setCancelling(true);
-      console.log('Calling cancelBooking API...', booking.id);
-
-      const response = await cancelBooking(booking.id);
-      console.log('Cancel booking response:', response);
-
-      
-      if (response.success || (response as any).status === 'success') {
-        toast.success(
-          `✅ Booking ${booking.booking_number} cancelled successfully!`
-        );
-        
-        
-        await fetchBookingDetails(booking.id);
-      } else {
-        throw new Error(
-          response.message || 
-          'Unable to cancel booking'
-        );
-      }
-    } catch (err: any) {
-      console.error('Error cancelling booking:', err);
-      const message =
-        err.response?.data?.detail ||
-        err.response?.data?.message ||
-        err.message ||
-        'Unable to cancel booking. Please try again.';
-      toast.error(message);
-    } finally {
-      setCancelling(false);
+  const handleCancelSuccess = async () => {
+    if (booking) {
+      await fetchBookingDetails(booking.id);
     }
+    setShowCancelModal(false);
   };
 
   const formatDate = (dateString: string) => {
@@ -828,38 +778,20 @@ const BookingDetailPage: React.FC = () => {
             <button
               type="button"
               onClick={(e) => {
-                console.log('=== BUTTON CLICKED ===', { 
-                  bookingId: booking.id, 
-                  status: booking.status,
-                  cancelling 
-                });
                 e.stopPropagation();
-                handleCancelBooking();
+                handleCancelBookingClick();
               }}
-              disabled={cancelling}
               className="flex-1 flex items-center 
                 justify-center gap-2 px-6 py-3 
                 bg-red-600 text-white rounded-lg 
                 hover:bg-red-700 active:bg-red-800
                 transition-colors 
-                font-semibold disabled:bg-gray-400 
-                disabled:cursor-not-allowed cursor-pointer
+                font-semibold cursor-pointer
                 relative z-10"
               aria-label="Cancel booking"
             >
-              {cancelling ? (
-                <>
-                  <Loader2 
-                    className="w-5 h-5 animate-spin" 
-                  />
-                  Cancelling...
-                </>
-              ) : (
-                <>
-                  <XCircle className="w-5 h-5" />
-                  Cancel Booking
-                </>
-              )}
+              <XCircle className="w-5 h-5" />
+              Cancel Booking
             </button>
           ) : (
             <div className="flex-1 text-center text-sm text-gray-500 py-3">
@@ -868,13 +800,6 @@ const BookingDetailPage: React.FC = () => {
               <small className="text-xs">(Only pending bookings can be cancelled)</small>
             </div>
           )}
-          
-          {}
-          {import.meta.env.DEV && (
-            <div className="text-xs text-gray-400 mt-2 p-2 bg-gray-100 rounded">
-              Debug: Status={booking.status}, CanCancel={canCancelBooking(booking) ? 'true' : 'false'}, Cancelling={cancelling ? 'true' : 'false'}
-            </div>
-          )}
 
           <Link
             to="/bookings"
@@ -888,6 +813,16 @@ const BookingDetailPage: React.FC = () => {
           </Link>
         </div>
       </div>
+
+      {/* Cancel Booking Modal */}
+      {showCancelModal && booking && (
+        <CancelBookingModal
+          isOpen={showCancelModal}
+          booking={booking}
+          onClose={() => setShowCancelModal(false)}
+          onSuccess={handleCancelSuccess}
+        />
+      )}
     </div>
   );
 };
diff --git a/Frontend/src/pages/customer/BookingPage.tsx b/Frontend/src/pages/customer/BookingPage.tsx
deleted file mode 100644
index 60ce451c..00000000
--- a/Frontend/src/pages/customer/BookingPage.tsx
+++ /dev/null
@@ -1,1816 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { 
-  useParams, 
-  useNavigate, 
-  Link 
-} from 'react-router-dom';
-import { useForm, Controller } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-import { 
-  Calendar,
-  Users,
-  CreditCard,
-  FileText,
-  ArrowLeft,
-  AlertCircle,
-  Loader2,
-  CheckCircle,
-  Shield,
-  Sparkles,
-  MapPin,
-  Plus,
-  Minus,
-  X,
-} from 'lucide-react';
-import { toast } from 'react-toastify';
-import { getRoomById, getRoomBookedDates, type Room } from 
-  '../../services/api/roomService';
-import { 
-  createBooking,
-  checkRoomAvailability,
-  type BookingData,
-} from '../../services/api/bookingService';
-import { serviceService, Service, promotionService, Promotion } from '../../services/api';
-import { createPayPalOrder } from '../../services/api/paymentService';
-import useAuthStore from '../../store/useAuthStore';
-import { useAuthModal } from '../../contexts/AuthModalContext';
-import { 
-  bookingValidationSchema, 
-  type BookingFormData 
-} from '../../validators/bookingValidator';
-import Loading from '../../components/common/Loading';
-import { useFormatCurrency } from '../../hooks/useFormatCurrency';
-import { formatDateLocal } from '../../utils/format';
-import Recaptcha from '../../components/common/Recaptcha';
-import { recaptchaService } from '../../services/api/systemSettingsService';
-
-const BookingPage: React.FC = () => {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const { isAuthenticated, userInfo } = useAuthStore();
-  const { openModal } = useAuthModal();
-  const { formatCurrency, currency } = useFormatCurrency();
-
-  const [room, setRoom] = useState<Room | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [recaptchaToken, setRecaptchaToken] = useState<string | null>(null);
-  const [services, setServices] = useState<Service[]>([]);
-  const [selectedServices, setSelectedServices] = useState<Array<{ service: Service; quantity: number }>>([]);
-  const [bookedDates, setBookedDates] = useState<Date[]>([]);
-  const [promotionCode, setPromotionCode] = useState('');
-  const [selectedPromotion, setSelectedPromotion] = useState<Promotion | null>(null);
-  const [promotionDiscount, setPromotionDiscount] = useState(0);
-  const [validatingPromotion, setValidatingPromotion] = useState(false);
-  const [promotionError, setPromotionError] = useState<string | null>(null);
-
-  
-  useEffect(() => {
-    if (!isAuthenticated) {
-      toast.error(
-        'Please login to make a booking'
-      );
-      openModal('login');
-    } else if (userInfo?.role === 'admin' || userInfo?.role === 'staff' || userInfo?.role === 'accountant') {
-      toast.error('Admin, staff, and accountant users cannot make bookings');
-      if (userInfo?.role === 'admin') {
-        navigate('/admin/dashboard', { replace: true });
-      } else if (userInfo?.role === 'staff') {
-        navigate('/staff/dashboard', { replace: true });
-      } else if (userInfo?.role === 'accountant') {
-        navigate('/accountant/dashboard', { replace: true });
-      }
-    }
-  }, [isAuthenticated, userInfo, navigate, id]);
-
-  
-  useEffect(() => {
-    if (id && isAuthenticated) {
-      fetchRoomDetails(Number(id));
-      fetchServices();
-      fetchBookedDates(Number(id));
-    }
-  }, [id, isAuthenticated]);
-
-  const fetchBookedDates = async (roomId: number) => {
-    try {
-      const response = await getRoomBookedDates(roomId);
-      
-      const isSuccess = response.success === true || (response as any).status === 'success';
-      
-      if (isSuccess && response.data?.booked_dates) {
-        
-        const dates = response.data.booked_dates.map((dateStr: string) => {
-          const [year, month, day] = dateStr.split('-').map(Number);
-          const date = new Date(year, month - 1, day);
-          
-          date.setHours(0, 0, 0, 0);
-          date.setMinutes(0, 0, 0);
-          return date;
-        });
-        setBookedDates(dates);
-      }
-    } catch (err) {
-      console.error('Error fetching booked dates:', err);
-      
-    }
-  };
-
-  
-  const isDateBooked = (date: Date): boolean => {
-    if (!date || bookedDates.length === 0) return false;
-    const normalizedDate = new Date(date);
-    normalizedDate.setHours(0, 0, 0, 0);
-    return bookedDates.some(bookedDate => {
-      const normalizedBooked = new Date(bookedDate);
-      normalizedBooked.setHours(0, 0, 0, 0);
-      return normalizedDate.getTime() === normalizedBooked.getTime();
-    });
-  };
-
-  
-  const doesRangeIncludeBookedDates = (startDate: Date, endDate: Date): boolean => {
-    if (!startDate || !endDate || bookedDates.length === 0) return false;
-    const start = new Date(startDate);
-    start.setHours(0, 0, 0, 0);
-    const end = new Date(endDate);
-    end.setHours(0, 0, 0, 0);
-    
-    let currentDate = new Date(start);
-    while (currentDate < end) {
-      if (isDateBooked(currentDate)) {
-        return true;
-      }
-      currentDate.setDate(currentDate.getDate() + 1);
-    }
-    return false;
-  };
-
-  const fetchServices = async () => {
-    try {
-      const response = await serviceService.getServices({
-        status: 'active',
-        limit: 100,
-      });
-      setServices(response.data.services || []);
-    } catch (err: any) {
-      console.error('Error fetching services:', err);
-      
-    }
-  };
-
-  const fetchRoomDetails = async (roomId: number) => {
-    try {
-      setLoading(true);
-      setError(null);
-      const response = await getRoomById(roomId);
-
-      if (
-        (response.success || 
-          (response as any).status === 'success') && 
-        response.data?.room
-      ) {
-        setRoom(response.data.room);
-      } else {
-        throw new Error('Unable to load room information');
-      }
-    } catch (err: any) {
-      console.error('Error fetching room:', err);
-      const message =
-        err.response?.data?.message ||
-        'Unable to load room information';
-      setError(message);
-      toast.error(message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  
-  const {
-    control,
-    register,
-    handleSubmit,
-    watch,
-    formState: { errors },
-  } = useForm<BookingFormData & { invoiceInfo?: any }>({
-    resolver: yupResolver(bookingValidationSchema),
-    defaultValues: {
-      checkInDate: undefined,
-      checkOutDate: undefined,
-      guestCount: 1,
-      notes: '',
-      paymentMethod: 'cash',
-      fullName: userInfo?.name || '',
-      email: userInfo?.email || '',
-      phone: userInfo?.phone || '',
-      invoiceInfo: {
-        company_name: '',
-        company_address: '',
-        company_tax_id: '',
-        customer_tax_id: '',
-      },
-    },
-  });
-
-  
-  const checkInDate = watch('checkInDate');
-  const checkOutDate = watch('checkOutDate');
-  const paymentMethod = watch('paymentMethod');
-
-  
-  const numberOfNights =
-    checkInDate && checkOutDate
-      ? Math.ceil(
-          (checkOutDate.getTime() - 
-            checkInDate.getTime()) /
-            (1000 * 60 * 60 * 24)
-        )
-      : 0;
-
-  
-  const roomPrice = 
-    (room?.price && room.price > 0) 
-      ? room.price 
-      : (room?.room_type?.base_price || 0);
-  const roomTotal = numberOfNights * roomPrice;
-  
-  
-  const servicesTotal = selectedServices.reduce((sum, item) => {
-    return sum + (item.service.price * item.quantity);
-  }, 0);
-  
-  const subtotal = roomTotal + servicesTotal;
-  const totalPrice = Math.max(0, subtotal - promotionDiscount);
-
-  
-  const formatPrice = (price: number) => formatCurrency(price);
-
-  
-  const handleValidatePromotion = async () => {
-    if (!promotionCode.trim()) {
-      setPromotionError('Please enter a promotion code');
-      return;
-    }
-
-    if (subtotal === 0) {
-      setPromotionError('Please select dates first');
-      return;
-    }
-
-    try {
-      setValidatingPromotion(true);
-      setPromotionError(null);
-      
-      const response = await promotionService.validatePromotion(
-        promotionCode.toUpperCase().trim(),
-        subtotal
-      );
-
-      if (response.success && response.data) {
-        setSelectedPromotion(response.data.promotion);
-        setPromotionDiscount(response.data.discount);
-        toast.success(`Promotion "${response.data.promotion.name}" applied!`);
-      } else {
-        throw new Error(response.message || 'Invalid promotion code');
-      }
-    } catch (error: any) {
-      setPromotionError(error.response?.data?.message || error.message || 'Invalid promotion code');
-      setSelectedPromotion(null);
-      setPromotionDiscount(0);
-      toast.error(error.response?.data?.message || error.message || 'Invalid promotion code');
-    } finally {
-      setValidatingPromotion(false);
-    }
-  };
-
-  
-  const handleRemovePromotion = () => {
-    setPromotionCode('');
-    setSelectedPromotion(null);
-    setPromotionDiscount(0);
-    setPromotionError(null);
-    toast.info('Promotion removed');
-  };
-
-  
-  const onSubmit = async (data: BookingFormData) => {
-    if (!room) return;
-
-    
-    if (recaptchaToken) {
-      try {
-        const verifyResponse = await recaptchaService.verifyRecaptcha(recaptchaToken);
-        if (verifyResponse.status === 'error' || !verifyResponse.data.verified) {
-          toast.error('reCAPTCHA verification failed. Please try again.');
-          setRecaptchaToken(null);
-          return;
-        }
-      } catch (error) {
-        toast.error('reCAPTCHA verification failed. Please try again.');
-        setRecaptchaToken(null);
-        return;
-      }
-    }
-
-    try {
-      setSubmitting(true);
-
-      
-      const checkInDateStr = formatDateLocal(data.checkInDate);
-      const checkOutDateStr = formatDateLocal(data.checkOutDate);
-
-      
-      const checkIn = new Date(data.checkInDate);
-      checkIn.setHours(0, 0, 0, 0);
-      const checkOut = new Date(data.checkOutDate);
-      checkOut.setHours(0, 0, 0, 0);
-
-      
-      if (isDateBooked(checkIn)) {
-        toast.error('Check-in date is already booked. Please select another date.');
-        return;
-      }
-
-      
-      
-      
-      const selectedDates: Date[] = [];
-      let currentDate = new Date(checkIn);
-      while (currentDate < checkOut) {
-        if (isDateBooked(currentDate)) {
-          toast.error('The selected date range includes booked dates. Please select different dates.');
-          return;
-        }
-        selectedDates.push(new Date(currentDate));
-        currentDate.setDate(currentDate.getDate() + 1);
-      }
-
-      
-      const availability = await checkRoomAvailability(
-        room.id,
-        checkInDateStr,
-        checkOutDateStr
-      );
-
-      if (!availability.available) {
-        toast.error(
-          availability.message || 
-          'Room is already booked during this time'
-        );
-        return;
-      }
-
-      
-      const bookingData: BookingData & { invoice_info?: any } = {
-        room_id: room.id,
-        check_in_date: checkInDateStr,
-        check_out_date: checkOutDateStr,
-        guest_count: data.guestCount,
-        notes: data.notes || '',
-        payment_method: data.paymentMethod,
-        total_price: totalPrice,
-        guest_info: {
-          full_name: data.fullName,
-          email: data.email,
-          phone: data.phone,
-        },
-        services: selectedServices.map(item => ({
-          service_id: item.service.id,
-          quantity: item.quantity,
-        })),
-        promotion_code: selectedPromotion?.code || undefined,
-        invoice_info: (data as any).invoiceInfo ? {
-          company_name: (data as any).invoiceInfo.company_name || undefined,
-          company_address: (data as any).invoiceInfo.company_address || undefined,
-          company_tax_id: (data as any).invoiceInfo.company_tax_id || undefined,
-          customer_tax_id: (data as any).invoiceInfo.customer_tax_id || undefined,
-        } : undefined,
-      };
-
-      
-      const response = await createBooking(bookingData);
-
-      if (
-        response.success && 
-        response.data?.booking
-      ) {
-        const bookingId = response.data.booking.id;
-        
-        
-        if (paymentMethod === 'paypal') {
-          try {
-            
-            const currentUrl = window.location.origin;
-            const returnUrl = `${currentUrl}/payment/paypal/return?bookingId=${bookingId}`;
-            const cancelUrl = `${currentUrl}/payment/paypal/cancel?bookingId=${bookingId}`;
-            
-            const paypalResponse = await createPayPalOrder(
-              bookingId,
-              totalPrice,
-              currency || 'USD', 
-              returnUrl,
-              cancelUrl
-            );
-
-            if (paypalResponse.success && paypalResponse.data?.approval_url) {
-              
-              window.location.href = paypalResponse.data.approval_url;
-              return; 
-            } else {
-              throw new Error(paypalResponse.message || 'Failed to initialize PayPal payment');
-            }
-          } catch (paypalError: any) {
-            console.error('Error initializing PayPal payment:', paypalError);
-            toast.error(
-              paypalError.response?.data?.message || 
-              paypalError.message || 
-              'Failed to initialize PayPal payment. Please try again or contact support.'
-            );
-            
-            navigate(`/booking-success/${bookingId}`);
-            return;
-          }
-        }
-        
-        
-        if (paymentMethod === 'cash') {
-          toast.success(
-            '📋 Booking created! Please pay the 20% deposit to confirm your booking.',
-            { icon: <CheckCircle className="text-green-500" /> }
-          );
-          
-          navigate(`/payment/deposit/${bookingId}`);
-          return;
-        }
-        
-        
-        toast.success(
-          '🎉 Booking successful!',
-          { icon: <CheckCircle className="text-green-500" /> }
-        );
-        
-        
-        navigate(`/booking-success/${bookingId}`);
-      } else {
-        throw new Error(
-          response.message || 
-          'Unable to create booking'
-        );
-      }
-    } catch (err: any) {
-      console.error('Error creating booking:', err);
-      
-      
-      if (err.response?.status === 409) {
-        toast.error(
-          '❌ Room is already booked during this time. ' +
-          'Please select different dates.'
-        );
-      } else if (err.response?.status === 400) {
-        toast.error(
-          err.response?.data?.message || 
-          'Invalid booking information'
-        );
-      } else {
-        const message =
-          err.response?.data?.message ||
-          'Unable to book room. Please try again.';
-        toast.error(message);
-      }
-      setRecaptchaToken(null);
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div 
-        className="min-h-screen bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f] py-8 w-screen relative -mt-6 -mb-6"
-        style={{ 
-          marginLeft: 'calc(50% - 50vw)',
-          marginRight: 'calc(50% - 50vw)',
-          width: '100vw',
-          zIndex: 1
-        }}
-      >
-        <div className="w-full px-2 sm:px-4 md:px-6 lg:px-8">
-          <Loading fullScreen text="Loading room details..." />
-        </div>
-      </div>
-    );
-  }
-
-  if (error || !room) {
-    return (
-      <div 
-        className="min-h-screen bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f] py-8 w-screen relative -mt-6 -mb-6"
-        style={{ 
-          marginLeft: 'calc(50% - 50vw)',
-          marginRight: 'calc(50% - 50vw)',
-          width: '100vw',
-          zIndex: 1
-        }}
-      >
-        <div className="w-full px-2 sm:px-4 md:px-6 lg:px-8 py-8">
-          <div 
-            className="bg-gradient-to-br from-red-900/20 to-red-800/10 
-              border border-red-500/30 rounded-xl p-12 text-center 
-              backdrop-blur-xl shadow-2xl shadow-red-500/10"
-          >
-            <AlertCircle 
-              className="w-12 h-12 text-red-400 
-                mx-auto mb-4" 
-            />
-            <p className="text-red-300 font-light text-lg mb-6 tracking-wide">
-              {error || 'Room not found'}
-            </p>
-            <Link
-              to="/rooms"
-              className="inline-flex items-center gap-2 bg-gradient-to-r 
-                from-[#d4af37] to-[#c9a227] text-[#0f0f0f] 
-                px-6 py-3 rounded-sm hover:from-[#f5d76e] 
-                hover:to-[#d4af37] transition-all duration-300 
-                font-medium tracking-wide shadow-lg shadow-[#d4af37]/30"
-            >
-              <ArrowLeft className="w-5 h-5" />
-              Back to Room List
-            </Link>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  const roomType = room.room_type;
-  if (!roomType) return null;
-
-  return (
-    <div 
-      className="min-h-screen bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f] py-8 sm:py-12 w-screen relative -mt-6 -mb-6"
-      style={{ 
-        marginLeft: 'calc(50% - 50vw)',
-        marginRight: 'calc(50% - 50vw)',
-        width: '100vw',
-        zIndex: 1
-      }}
-    >
-      <div className="w-full px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4">
-        {}
-        <Link
-          to={`/rooms/${room.room_number}`}
-          className="inline-flex items-center gap-1 
-            text-[#d4af37]/80 hover:text-[#d4af37] 
-            mb-3 transition-all duration-300 
-            group font-light tracking-wide text-xs sm:text-sm"
-        >
-          <ArrowLeft className="w-3.5 h-3.5 group-hover:-translate-x-1 transition-transform" />
-          <span>Back to room details</span>
-        </Link>
-
-        {}
-        <div className="mb-4">
-        <h1 
-            className="text-xl sm:text-2xl lg:text-3xl font-serif font-semibold 
-              text-white mb-1.5 tracking-tight leading-tight
-              bg-gradient-to-r from-white via-[#d4af37] to-white 
-              bg-clip-text text-transparent"
-        >
-            Book Your Room
-        </h1>
-          <p className="text-gray-400 font-light tracking-wide text-xs sm:text-sm">
-            Complete your reservation in just a few steps
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
-          {}
-          <div className="lg:col-span-2">
-            <form 
-              onSubmit={handleSubmit(onSubmit)}
-              className="bg-gradient-to-br from-[#1a1a1a] to-[#0a0a0a] 
-                rounded-lg border border-[#d4af37]/20 
-                backdrop-blur-xl shadow-lg shadow-[#d4af37]/5 
-                p-3 sm:p-4 space-y-4"
-            >
-              {}
-              <div>
-                <div className="flex items-center gap-2 mb-3">
-                  <div className="p-1 bg-[#d4af37]/10 rounded-lg 
-                    border border-[#d4af37]/30">
-                    <Users className="w-3.5 h-3.5 text-[#d4af37]" />
-                  </div>
-                <h2 
-                    className="text-sm sm:text-base font-serif font-semibold 
-                      text-white tracking-wide"
-                >
-                  Customer Information
-                </h2>
-                </div>
-
-                <div className="space-y-3">
-                  {}
-                  <div>
-                    <label 
-                      className="block text-[10px] sm:text-xs font-light tracking-wide
-                        text-gray-300 mb-1"
-                    >
-                      Full Name
-                      <span className="text-[#d4af37] ml-0.5">*</span>
-                    </label>
-                    <input
-                      {...register('fullName')}
-                      type="text"
-                      className="w-full px-2.5 py-1.5 bg-[#0a0a0a] border 
-                        border-[#d4af37]/20 rounded-lg 
-                        text-white placeholder-gray-500 text-xs sm:text-sm
-                        focus:ring-2 focus:ring-[#d4af37]/50 
-                        focus:border-[#d4af37] transition-all duration-300
-                        font-light tracking-wide"
-                      placeholder="John Doe"
-                    />
-                    {errors.fullName && (
-                      <p className="text-[10px] sm:text-xs text-red-400 mt-1 font-light">
-                        {errors.fullName.message}
-                      </p>
-                    )}
-                  </div>
-
-                  {}
-                  <div className="grid grid-cols-1 
-                    md:grid-cols-2 gap-3"
-                  >
-                    <div>
-                      <label 
-                        className="block text-[10px] sm:text-xs font-light tracking-wide
-                          text-gray-300 mb-1"
-                      >
-                        Email
-                        <span className="text-[#d4af37] ml-0.5">*</span>
-                      </label>
-                      <input
-                        {...register('email')}
-                        type="email"
-                        className="w-full px-2.5 py-1.5 bg-[#0a0a0a] border 
-                          border-[#d4af37]/20 rounded-lg 
-                          text-white placeholder-gray-500 text-xs sm:text-sm
-                          focus:ring-2 focus:ring-[#d4af37]/50 
-                          focus:border-[#d4af37] transition-all duration-300
-                          font-light tracking-wide"
-                        placeholder="email@example.com"
-                      />
-                      {errors.email && (
-                        <p className="text-[10px] sm:text-xs text-red-400 
-                          mt-1 font-light"
-                        >
-                          {errors.email.message}
-                        </p>
-                      )}
-                    </div>
-
-                    <div>
-                      <label 
-                        className="block text-[10px] sm:text-xs font-light tracking-wide
-                          text-gray-300 mb-1"
-                      >
-                        Phone Number
-                        <span className="text-[#d4af37] ml-0.5">*</span>
-                      </label>
-                      <input
-                        {...register('phone')}
-                        type="tel"
-                        className="w-full px-2.5 py-1.5 bg-[#0a0a0a] border 
-                          border-[#d4af37]/20 rounded-lg 
-                          text-white placeholder-gray-500 text-xs sm:text-sm
-                          focus:ring-2 focus:ring-[#d4af37]/50 
-                          focus:border-[#d4af37] transition-all duration-300
-                          font-light tracking-wide"
-                        placeholder="0123456789"
-                      />
-                      {errors.phone && (
-                        <p className="text-[10px] sm:text-xs text-red-400 
-                          mt-1 font-light"
-                        >
-                          {errors.phone.message}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {}
-              <div className="border-t border-[#d4af37]/20 pt-4">
-                <div className="flex items-center gap-2 mb-3">
-                  <div className="p-1 bg-[#d4af37]/10 rounded-lg 
-                    border border-[#d4af37]/30">
-                    <Calendar className="w-3.5 h-3.5 text-[#d4af37]" />
-                  </div>
-                <h2 
-                    className="text-sm sm:text-base font-serif font-semibold 
-                      text-white tracking-wide"
-                >
-                  Booking Details
-                </h2>
-                </div>
-
-                <div className="space-y-3">
-                  {}
-                  <div className="grid grid-cols-1 
-                    md:grid-cols-2 gap-3"
-                  >
-                    {}
-                    <div>
-                      <label 
-                        className="block text-[10px] sm:text-xs font-light tracking-wide
-                          text-gray-300 mb-1"
-                      >
-                        <Calendar 
-                          className="w-3 h-3 inline mr-1 text-[#d4af37]" 
-                        />
-                        Check-in Date
-                        <span className="text-[#d4af37] ml-0.5">*</span>
-                      </label>
-                      <Controller
-                        control={control}
-                        name="checkInDate"
-                        render={({ field }) => (
-                          <DatePicker
-                            selected={field.value}
-                            minDate={new Date()}
-                            selectsStart
-                            startDate={checkInDate}
-                            endDate={checkOutDate}
-                            dateFormat="dd/MM/yyyy"
-                            placeholderText="Select check-in date"
-                            excludeDates={bookedDates}
-                            highlightDates={bookedDates.length > 0 ? bookedDates.map(date => {
-                              
-                              const normalized = new Date(date);
-                              normalized.setHours(0, 0, 0, 0);
-                              normalized.setMinutes(0, 0, 0);
-                              return normalized;
-                            }) : []}
-                            dayClassName={(date) => {
-                              
-                              if (!date) return '';
-                              const normalized = new Date(date);
-                              normalized.setHours(0, 0, 0, 0);
-                              normalized.setMinutes(0, 0, 0);
-                              if (isDateBooked(normalized)) {
-                                return 'react-datepicker__day--booked';
-                              }
-                              return '';
-                            }}
-                            filterDate={(date) => {
-                              
-                              if (isDateBooked(date)) {
-                                return false;
-                              }
-                              
-                              
-                              if (checkOutDate) {
-                                const testCheckIn = date;
-                                const testCheckOut = checkOutDate;
-                                if (testCheckIn < testCheckOut && doesRangeIncludeBookedDates(testCheckIn, testCheckOut)) {
-                                  return false;
-                                }
-                              }
-                              
-                              return true;
-                            }}
-                            onChange={(date) => {
-                              
-                              if (date && isDateBooked(date)) {
-                                toast.error('This date is already booked. Please select another date.');
-                                return;
-                              }
-                              
-                              
-                              if (date && checkOutDate) {
-                                const newCheckIn = date;
-                                const newCheckOut = checkOutDate;
-                                
-                                if (newCheckIn < newCheckOut) {
-                                  if (doesRangeIncludeBookedDates(newCheckIn, newCheckOut)) {
-                                    toast.error('The selected date range includes booked dates. Please select different dates.');
-                                    return;
-                                  }
-                                }
-                              }
-                              
-                              field.onChange(date);
-                            }}
-                            className="w-full px-2.5 py-1.5 
-                              bg-[#0a0a0a] border border-[#d4af37]/20 
-                              rounded-lg text-white placeholder-gray-500 text-xs sm:text-sm
-                              focus:ring-2 focus:ring-[#d4af37]/50 
-                              focus:border-[#d4af37] transition-all duration-300
-                              font-light tracking-wide"
-                            wrapperClassName="w-full"
-                          />
-                        )}
-                      />
-                      {errors.checkInDate && (
-                        <p className="text-[10px] sm:text-xs text-red-400 
-                          mt-1 font-light"
-                        >
-                          {errors.checkInDate.message}
-                        </p>
-                      )}
-                    </div>
-
-                    {}
-                    <div>
-                      <label 
-                        className="block text-[10px] sm:text-xs font-light tracking-wide
-                          text-gray-300 mb-1"
-                      >
-                        <Calendar 
-                          className="w-3 h-3 inline mr-1 text-[#d4af37]" 
-                        />
-                        Check-out Date
-                        <span className="text-[#d4af37] ml-0.5">*</span>
-                      </label>
-                      <Controller
-                        control={control}
-                        name="checkOutDate"
-                        render={({ field }) => (
-                          <DatePicker
-                            selected={field.value}
-                            minDate={
-                              checkInDate || new Date()
-                            }
-                            selectsEnd
-                            startDate={checkInDate}
-                            endDate={checkOutDate}
-                            dateFormat="dd/MM/yyyy"
-                            placeholderText="Select check-out date"
-                            excludeDates={bookedDates}
-                            highlightDates={bookedDates.length > 0 ? bookedDates.map(date => {
-                              
-                              const normalized = new Date(date);
-                              normalized.setHours(0, 0, 0, 0);
-                              normalized.setMinutes(0, 0, 0);
-                              return normalized;
-                            }) : []}
-                            dayClassName={(date) => {
-                              
-                              if (!date) return '';
-                              const normalized = new Date(date);
-                              normalized.setHours(0, 0, 0, 0);
-                              normalized.setMinutes(0, 0, 0);
-                              if (isDateBooked(normalized)) {
-                                return 'react-datepicker__day--booked';
-                              }
-                              return '';
-                            }}
-                            filterDate={(date) => {
-                              
-                              if (isDateBooked(date)) {
-                                return false;
-                              }
-                              
-                              
-                              if (checkInDate) {
-                                const testCheckIn = checkInDate;
-                                const testCheckOut = date;
-                                if (testCheckIn < testCheckOut && doesRangeIncludeBookedDates(testCheckIn, testCheckOut)) {
-                                  return false;
-                                }
-                              }
-                              
-                              return true;
-                            }}
-                            onChange={(date) => {
-                              
-                              if (date && isDateBooked(date)) {
-                                toast.error('This date is already booked. Please select another date.');
-                                return;
-                              }
-                              
-                              
-                              if (date && checkInDate) {
-                                const newCheckIn = checkInDate;
-                                const newCheckOut = date;
-                                
-                                if (newCheckIn < newCheckOut) {
-                                  if (doesRangeIncludeBookedDates(newCheckIn, newCheckOut)) {
-                                    toast.error('The selected date range includes booked dates. Please select different dates.');
-                                    return;
-                                  }
-                                }
-                              }
-                              
-                              field.onChange(date);
-                            }}
-                            className="w-full px-2.5 py-1.5 
-                              bg-[#0a0a0a] border border-[#d4af37]/20 
-                              rounded-lg text-white placeholder-gray-500 text-xs sm:text-sm
-                              focus:ring-2 focus:ring-[#d4af37]/50 
-                              focus:border-[#d4af37] transition-all duration-300
-                              font-light tracking-wide"
-                            wrapperClassName="w-full"
-                          />
-                        )}
-                      />
-                      {errors.checkOutDate && (
-                        <p className="text-[10px] sm:text-xs text-red-400 
-                          mt-1 font-light"
-                        >
-                          {errors.checkOutDate.message}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-
-                  {}
-                  <div>
-                    <label 
-                      className="block text-[10px] sm:text-xs font-light tracking-wide
-                        text-gray-300 mb-1"
-                    >
-                      <Users 
-                        className="w-3 h-3 inline mr-1 text-[#d4af37]" 
-                      />
-                      Number of Guests
-                      <span className="text-[#d4af37] ml-0.5">*</span>
-                    </label>
-                    <input
-                      {...register('guestCount')}
-                      type="number"
-                      min="1"
-                      max={room?.capacity || roomType.capacity}
-                      className="w-full px-2.5 py-1.5 bg-[#0a0a0a] border 
-                        border-[#d4af37]/20 rounded-lg 
-                        text-white placeholder-gray-500 text-xs sm:text-sm
-                        focus:ring-2 focus:ring-[#d4af37]/50 
-                        focus:border-[#d4af37] transition-all duration-300
-                        font-light tracking-wide"
-                      placeholder="1"
-                    />
-                    <p className="text-[10px] sm:text-xs text-gray-400 mt-1 font-light tracking-wide">
-                      Maximum capacity: <span className="text-[#d4af37]">{room?.capacity || roomType.capacity}</span> guests
-                    </p>
-                    {errors.guestCount && (
-                      <p className="text-[10px] sm:text-xs text-red-400 mt-1 font-light">
-                        {errors.guestCount.message}
-                      </p>
-                    )}
-                  </div>
-
-                  {}
-                  <div>
-                    <label 
-                      className="block text-[10px] sm:text-xs font-light tracking-wide
-                        text-gray-300 mb-1"
-                    >
-                      <FileText 
-                        className="w-3 h-3 inline mr-1 text-[#d4af37]" 
-                      />
-                      Notes (optional)
-                    </label>
-                    <textarea
-                      {...register('notes')}
-                      rows={2}
-                      className="w-full px-2.5 py-1.5 bg-[#0a0a0a] border 
-                        border-[#d4af37]/20 rounded-lg 
-                        text-white placeholder-gray-500 text-xs sm:text-sm
-                        focus:ring-2 focus:ring-[#d4af37]/50 
-                        focus:border-[#d4af37] transition-all duration-300
-                        font-light tracking-wide resize-none"
-                      placeholder="Special requests..."
-                    />
-                    {errors.notes && (
-                      <p className="text-[10px] sm:text-xs text-red-400 mt-1 font-light">
-                        {errors.notes.message}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-
-              {}
-              {services.length > 0 && (
-                <div className="border-t border-[#d4af37]/20 pt-4">
-                  <div className="flex items-center gap-2 mb-3">
-                    <div className="p-1 bg-[#d4af37]/10 rounded-lg 
-                      border border-[#d4af37]/30">
-                      <Sparkles className="w-3.5 h-3.5 text-[#d4af37]" />
-                    </div>
-                    <h2 
-                      className="text-sm sm:text-base font-serif font-semibold 
-                        text-white tracking-wide"
-                    >
-                      Additional Services
-                    </h2>
-                  </div>
-                  <p className="text-gray-400 text-xs sm:text-sm mb-3 font-light tracking-wide">
-                    Enhance your stay with our premium services (optional)
-                  </p>
-
-                  <div className="space-y-2.5 sm:space-y-3">
-                    {services.map((service) => {
-                      const selectedItem = selectedServices.find(
-                        item => item.service.id === service.id
-                      );
-                      const quantity = selectedItem?.quantity || 0;
-
-                      return (
-                        <div
-                          key={service.id}
-                          className="bg-gradient-to-br from-[#0a0a0a] to-[#1a1a1a]
-                            border border-[#d4af37]/20 rounded-lg p-3
-                            hover:border-[#d4af37]/40 transition-all duration-300"
-                        >
-                          <div className="flex items-start justify-between mb-2">
-                            <div className="flex-1">
-                              <h3 className="text-white font-semibold mb-0.5 text-sm">
-                                {service.name}
-                              </h3>
-                              {service.description && (
-                                <p className="text-gray-400 text-xs mb-1">
-                                  {service.description}
-                                </p>
-                              )}
-                              <p className="text-[#d4af37] font-bold text-xs sm:text-sm">
-                                {formatPrice(service.price)} / {service.unit || 'unit'}
-                              </p>
-                            </div>
-                          </div>
-
-                          <div className="flex items-center justify-between">
-                            <div className="flex items-center gap-2">
-                              <button
-                                type="button"
-                                onClick={() => {
-                                  if (quantity > 0) {
-                                    if (quantity === 1) {
-                                      setSelectedServices(prev =>
-                                        prev.filter(item => item.service.id !== service.id)
-                                      );
-                                    } else {
-                                      setSelectedServices(prev =>
-                                        prev.map(item =>
-                                          item.service.id === service.id
-                                            ? { ...item, quantity: item.quantity - 1 }
-                                            : item
-                                        )
-                                      );
-                                    }
-                                  }
-                                }}
-                                disabled={quantity === 0}
-                                className="w-7 h-7 flex items-center justify-center 
-                                  bg-[#1a1a1a] border border-[#d4af37]/20 
-                                  rounded text-[#d4af37] hover:bg-[#d4af37]/10 
-                                  transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                              >
-                                <Minus className="w-3.5 h-3.5" />
-                              </button>
-                              <span className="text-white font-semibold w-6 text-center text-sm">
-                                {quantity}
-                              </span>
-                              <button
-                                type="button"
-                                onClick={() => {
-                                  if (quantity === 0) {
-                                    setSelectedServices(prev => [
-                                      ...prev,
-                                      { service, quantity: 1 }
-                                    ]);
-                                  } else {
-                                    setSelectedServices(prev =>
-                                      prev.map(item =>
-                                        item.service.id === service.id
-                                          ? { ...item, quantity: item.quantity + 1 }
-                                          : item
-                                      )
-                                    );
-                                  }
-                                }}
-                                className="w-7 h-7 flex items-center justify-center 
-                                  bg-[#1a1a1a] border border-[#d4af37]/20 
-                                  rounded text-[#d4af37] hover:bg-[#d4af37]/10 
-                                  transition-colors"
-                              >
-                                <Plus className="w-3.5 h-3.5" />
-                              </button>
-                            </div>
-                            {quantity > 0 && (
-                              <p className="text-[#d4af37] font-bold text-sm">
-                                {formatPrice(service.price * quantity)}
-                              </p>
-                            )}
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-
-                  {selectedServices.length > 0 && (
-                    <div className="mt-4 pt-4 border-t border-[#d4af37]/20">
-                      <div className="flex items-center justify-between">
-                        <span className="text-xs sm:text-sm text-gray-400 font-light">Services Total:</span>
-                        <span className="text-base sm:text-lg font-bold text-[#d4af37]">
-                          {formatPrice(servicesTotal)}
-                        </span>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {}
-              <div className="border-t border-[#d4af37]/20 pt-4">
-                <div className="flex items-center gap-2 mb-3">
-                  <div className="p-1 bg-[#d4af37]/10 rounded-lg border border-[#d4af37]/30">
-                    <Sparkles className="w-3.5 h-3.5 text-[#d4af37]" />
-                  </div>
-                  <h2 className="text-sm sm:text-base font-serif font-semibold text-white tracking-wide">
-                    Promotion Code
-                  </h2>
-                </div>
-                <p className="text-gray-400 text-xs sm:text-sm mb-3 font-light tracking-wide">
-                  Enter a promotion code to get a discount (optional)
-                </p>
-
-                {!selectedPromotion ? (
-                  <div className="space-y-2">
-                    <div className="flex gap-2">
-                      <input
-                        type="text"
-                        value={promotionCode}
-                        onChange={(e) => {
-                          setPromotionCode(e.target.value.toUpperCase());
-                          setPromotionError(null);
-                        }}
-                        onKeyPress={(e) => {
-                          if (e.key === 'Enter') {
-                            e.preventDefault();
-                            handleValidatePromotion();
-                          }
-                        }}
-                        placeholder="Enter promotion code"
-                        className="flex-1 px-4 py-2.5 bg-[#0a0a0a] border border-[#d4af37]/20 
-                          rounded-lg text-white placeholder-gray-500 focus:outline-none 
-                          focus:border-[#d4af37]/40 focus:ring-2 focus:ring-[#d4af37]/20 
-                          transition-all duration-300 text-sm sm:text-base"
-                        disabled={validatingPromotion || subtotal === 0}
-                      />
-                      <button
-                        type="button"
-                        onClick={handleValidatePromotion}
-                        disabled={validatingPromotion || !promotionCode.trim() || subtotal === 0}
-                        className="px-4 py-2.5 bg-gradient-to-r from-[#d4af37] to-[#c9a227] 
-                          text-black font-semibold rounded-lg hover:from-[#c9a227] 
-                          hover:to-[#d4af37] transition-all duration-300 disabled:opacity-50 
-                          disabled:cursor-not-allowed text-sm sm:text-base flex items-center gap-2"
-                      >
-                        {validatingPromotion ? (
-                          <>
-                            <Loader2 className="w-4 h-4 animate-spin" />
-                            <span>Validating...</span>
-                          </>
-                        ) : (
-                          'Apply'
-                        )}
-                      </button>
-                    </div>
-                    {promotionError && (
-                      <p className="text-red-400 text-xs sm:text-sm">{promotionError}</p>
-                    )}
-                    {subtotal === 0 && (
-                      <p className="text-yellow-400 text-xs sm:text-sm">
-                        Please select check-in and check-out dates first
-                      </p>
-                    )}
-                  </div>
-                ) : (
-                  <div className="bg-gradient-to-br from-green-900/20 to-green-800/10 
-                    border border-green-500/30 rounded-lg p-3">
-                    <div className="flex items-start justify-between">
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-1">
-                          <CheckCircle className="w-4 h-4 text-green-400" />
-                          <span className="text-green-400 font-semibold text-sm sm:text-base">
-                            {selectedPromotion.name}
-                          </span>
-                        </div>
-                        {selectedPromotion.description && (
-                          <p className="text-gray-400 text-xs mb-2">
-                            {selectedPromotion.description}
-                          </p>
-                        )}
-                        <div className="flex items-center gap-2">
-                          <span className="text-xs sm:text-sm text-gray-400">Code:</span>
-                          <span className="text-xs sm:text-sm font-mono font-bold text-[#d4af37]">
-                            {selectedPromotion.code}
-                          </span>
-                        </div>
-                        <div className="mt-2">
-                          <span className="text-xs sm:text-sm text-gray-400">Discount: </span>
-                          <span className="text-sm sm:text-base font-bold text-green-400">
-                            -{formatPrice(promotionDiscount)}
-                          </span>
-                        </div>
-                      </div>
-                      <button
-                        type="button"
-                        onClick={handleRemovePromotion}
-                        className="p-1.5 hover:bg-red-500/20 rounded-lg transition-colors"
-                        title="Remove promotion"
-                      >
-                        <X className="w-4 h-4 text-red-400" />
-                      </button>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {}
-              <div className="border-t border-[#d4af37]/20 pt-4">
-                <div className="flex items-center gap-2 mb-3">
-                  <div className="p-1 bg-[#d4af37]/10 rounded-lg 
-                    border border-[#d4af37]/30">
-                    <CreditCard className="w-3.5 h-3.5 text-[#d4af37]" />
-                  </div>
-                <h2 
-                    className="text-sm sm:text-base font-serif font-semibold 
-                      text-white tracking-wide"
-                >
-                  Payment Method
-                </h2>
-                </div>
-
-                <div className="space-y-2.5">
-                  {}
-                  <label 
-                    className="flex items-start p-3 
-                      bg-gradient-to-br from-[#0a0a0a] to-[#1a1a1a]
-                      border-2 border-[#d4af37]/20 
-                      rounded-lg cursor-pointer 
-                      hover:border-[#d4af37]/40 hover:shadow-md hover:shadow-[#d4af37]/10
-                      transition-all duration-300"
-                  >
-                    <input
-                      {...register('paymentMethod')}
-                      type="radio"
-                      value="cash"
-                      className="mt-0.5 mr-3 w-4 h-4 text-[#d4af37] 
-                        border-[#d4af37]/30 focus:ring-[#d4af37]/50"
-                    />
-                    <div className="flex-1">
-                      <div className="flex items-center flex-wrap
-                        gap-2 mb-1.5"
-                      >
-                        <CreditCard 
-                          className="w-3.5 h-3.5 
-                            text-[#d4af37]" 
-                        />
-                        <span className="font-medium 
-                          text-white tracking-wide text-xs sm:text-sm"
-                        >
-                          Pay on arrival
-                        </span>
-                        <span className="text-[10px] sm:text-xs bg-gradient-to-r 
-                          from-orange-900/30 to-orange-800/20 
-                          text-orange-300 border border-orange-500/30
-                          px-2 py-0.5 rounded font-medium tracking-wide"
-                        >
-                          Requires 20% deposit
-                        </span>
-                      </div>
-                      <p className="text-xs text-gray-400 mb-2 font-light tracking-wide">
-                        Requires 20% deposit, remaining balance on arrival
-                      </p>
-                      <div className="bg-gradient-to-br from-orange-900/20 to-orange-800/10 
-                        border border-orange-500/30 rounded-lg p-2.5"
-                      >
-                        <p className="text-[10px] sm:text-xs text-orange-300 font-light tracking-wide leading-relaxed">
-                          <strong className="text-orange-200">20% deposit required</strong> to secure your booking. Pay the remaining balance on arrival at the hotel.
-                        </p>
-                      </div>
-                    </div>
-                  </label>
-
-                  {}
-                  <label 
-                    className="flex items-start p-3 
-                      bg-gradient-to-br from-[#0a0a0a] to-[#1a1a1a]
-                      border-2 border-[#d4af37]/20 
-                      rounded-lg cursor-pointer 
-                      hover:border-[#d4af37]/40 hover:shadow-md hover:shadow-[#d4af37]/10
-                      transition-all duration-300"
-                  >
-                    <input
-                      {...register('paymentMethod')}
-                      type="radio"
-                      value="stripe"
-                      className="mt-0.5 mr-3 w-4 h-4 text-[#d4af37] 
-                        border-[#d4af37]/30 focus:ring-[#d4af37]/50"
-                    />
-                    <div className="flex-1">
-                      <div className="flex items-center flex-wrap
-                        gap-2 mb-1"
-                      >
-                        <CreditCard 
-                          className="w-3.5 h-3.5 
-                            text-[#d4af37]" 
-                        />
-                        <span className="font-medium 
-                          text-white tracking-wide text-xs sm:text-sm"
-                        >
-                          Pay with Card (Stripe)
-                        </span>
-                        <span className="text-[10px] sm:text-xs bg-gradient-to-r 
-                          from-[#d4af37]/20 to-[#c9a227]/20 
-                          text-[#d4af37] border border-[#d4af37]/40
-                          px-2 py-0.5 rounded font-medium tracking-wide"
-                        >
-                          Instant
-                        </span>
-                      </div>
-                      <p className="text-xs text-gray-400 font-light tracking-wide">
-                        Secure payment with credit or debit card
-                      </p>
-                    </div>
-                  </label>
-
-                  {errors.paymentMethod && (
-                    <p className="text-[10px] sm:text-xs text-red-400 font-light">
-                      {errors.paymentMethod.message}
-                    </p>
-                  )}
-
-                  {}
-                  <label 
-                    className="flex items-start p-3 
-                      bg-gradient-to-br from-[#0a0a0a] to-[#1a1a1a]
-                      border-2 border-[#d4af37]/20 
-                      rounded-lg cursor-pointer 
-                      hover:border-[#d4af37]/40 hover:shadow-md hover:shadow-[#d4af37]/10
-                      transition-all duration-300"
-                  >
-                    <input
-                      {...register('paymentMethod')}
-                      type="radio"
-                      value="paypal"
-                      className="mt-0.5 mr-3 w-4 h-4 text-[#d4af37] 
-                        border-[#d4af37]/30 focus:ring-[#d4af37]/50"
-                    />
-                    <div className="flex-1">
-                      <div className="flex items-center flex-wrap
-                        gap-2 mb-1"
-                      >
-                        <CreditCard 
-                          className="w-3.5 h-3.5 
-                            text-[#d4af37]" 
-                        />
-                        <span className="font-medium 
-                          text-white tracking-wide text-xs sm:text-sm"
-                        >
-                          Pay with PayPal
-                        </span>
-                        <span className="text-[10px] sm:text-xs bg-gradient-to-r 
-                          from-[#d4af37]/20 to-[#c9a227]/20 
-                          text-[#d4af37] border border-[#d4af37]/40
-                          px-2 py-0.5 rounded font-medium tracking-wide"
-                        >
-                          Instant
-                        </span>
-                      </div>
-                      <p className="text-xs text-gray-400 font-light tracking-wide">
-                        Secure payment with PayPal account
-                      </p>
-                    </div>
-                  </label>
-
-                  {}
-                  {paymentMethod === 'stripe' && (
-                    <div 
-                      className="bg-gradient-to-br from-[#d4af37]/10 to-[#c9a227]/5 
-                        border border-[#d4af37]/30 rounded-lg 
-                        p-3 mt-2 backdrop-blur-sm"
-                    >
-                      <div className="flex items-center gap-2 mb-2">
-                        <Shield className="w-3.5 h-3.5 text-[#d4af37]" />
-                        <p className="text-xs sm:text-sm text-[#d4af37] 
-                          font-medium tracking-wide"
-                      >
-                          Secure Card Payment
-                      </p>
-                      </div>
-                      <p className="text-xs text-gray-300 font-light tracking-wide leading-relaxed">
-                        You will be redirected to a secure payment page 
-                        to complete your booking with your credit or debit card.
-                      </p>
-                    </div>
-                  )}
-
-                  {}
-                  {paymentMethod === 'paypal' && (
-                    <div 
-                      className="bg-gradient-to-br from-[#d4af37]/10 to-[#c9a227]/5 
-                        border border-[#d4af37]/30 rounded-lg 
-                        p-3 mt-2 backdrop-blur-sm"
-                    >
-                      <div className="flex items-center gap-2 mb-2">
-                        <Shield className="w-3.5 h-3.5 text-[#d4af37]" />
-                        <p className="text-xs sm:text-sm text-[#d4af37] 
-                          font-medium tracking-wide"
-                      >
-                          Secure PayPal Payment
-                      </p>
-                      </div>
-                      <p className="text-xs text-gray-300 font-light tracking-wide leading-relaxed">
-                        You will be redirected to PayPal to securely complete your payment.
-                      </p>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {}
-              <div className="border-t border-[#d4af37]/20 pt-4">
-                <div className="flex items-center gap-2 mb-3">
-                  <div className="p-1 bg-[#d4af37]/10 rounded-lg 
-                    border border-[#d4af37]/30">
-                    <FileText className="w-3.5 h-3.5 text-[#d4af37]" />
-                  </div>
-                  <h2 
-                    className="text-sm sm:text-base font-serif font-semibold 
-                      text-white tracking-wide"
-                  >
-                    Invoice Information (Optional)
-                  </h2>
-                </div>
-
-                <div className="space-y-3">
-                  <p className="text-[10px] sm:text-xs text-gray-400 font-light">
-                    Fill in these details if you need an invoice for your booking
-                  </p>
-
-                  {}
-                  <div>
-                    <label className="block text-[10px] sm:text-xs font-light 
-                      text-gray-300 mb-1 tracking-wide"
-                    >
-                      Company Name
-                    </label>
-                    <input
-                      {...register('invoiceInfo.company_name')}
-                      type="text"
-                      className="w-full px-2.5 py-1.5 bg-[#0a0a0a] border 
-                        border-[#d4af37]/20 rounded-lg 
-                        text-white placeholder-gray-500 text-xs sm:text-sm
-                        focus:ring-2 focus:ring-[#d4af37]/50 
-                        focus:border-[#d4af37] transition-all duration-300
-                        font-light tracking-wide"
-                      placeholder="Your company name"
-                    />
-                  </div>
-
-                  {}
-                  <div>
-                    <label className="block text-[10px] sm:text-xs font-light 
-                      text-gray-300 mb-1 tracking-wide"
-                    >
-                      Company Address
-                    </label>
-                    <textarea
-                      {...register('invoiceInfo.company_address')}
-                      rows={2}
-                      className="w-full px-2.5 py-1.5 bg-[#0a0a0a] border 
-                        border-[#d4af37]/20 rounded-lg 
-                        text-white placeholder-gray-500 text-xs sm:text-sm
-                        focus:ring-2 focus:ring-[#d4af37]/50 
-                        focus:border-[#d4af37] transition-all duration-300
-                        font-light tracking-wide resize-none"
-                      placeholder="Company address"
-                    />
-                  </div>
-
-                  {}
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                    <div>
-                      <label className="block text-[10px] sm:text-xs font-light 
-                        text-gray-300 mb-1 tracking-wide"
-                      >
-                        Company Tax ID
-                      </label>
-                      <input
-                        {...register('invoiceInfo.company_tax_id')}
-                        type="text"
-                        className="w-full px-2.5 py-1.5 bg-[#0a0a0a] border 
-                          border-[#d4af37]/20 rounded-lg 
-                          text-white placeholder-gray-500 text-xs sm:text-sm
-                          focus:ring-2 focus:ring-[#d4af37]/50 
-                          focus:border-[#d4af37] transition-all duration-300
-                          font-light tracking-wide"
-                        placeholder="Tax ID"
-                      />
-                    </div>
-
-                    <div>
-                      <label className="block text-[10px] sm:text-xs font-light 
-                        text-gray-300 mb-1 tracking-wide"
-                      >
-                        Customer Tax ID
-                      </label>
-                      <input
-                        {...register('invoiceInfo.customer_tax_id')}
-                        type="text"
-                        className="w-full px-2.5 py-1.5 bg-[#0a0a0a] border 
-                          border-[#d4af37]/20 rounded-lg 
-                          text-white placeholder-gray-500 text-xs sm:text-sm
-                          focus:ring-2 focus:ring-[#d4af37]/50 
-                          focus:border-[#d4af37] transition-all duration-300
-                          font-light tracking-wide"
-                        placeholder="Your tax ID"
-                      />
-                    </div>
-                  </div>
-
-                </div>
-              </div>
-
-              {}
-              <div className="border-t border-[#d4af37]/20 pt-4">
-                <div className="flex justify-center mb-4">
-                  <Recaptcha
-                    onChange={(token) => setRecaptchaToken(token)}
-                    onError={(error) => {
-                      console.error('reCAPTCHA error:', error);
-                      setRecaptchaToken(null);
-                    }}
-                    theme="dark"
-                    size="normal"
-                  />
-                </div>
-              </div>
-
-              {}
-              <div className="border-t border-[#d4af37]/20 pt-4">
-                <button
-                  type="submit"
-                  disabled={submitting}
-                  className="w-full bg-gradient-to-r from-[#d4af37] to-[#c9a227] 
-                    text-[#0f0f0f] py-2.5 rounded-sm 
-                    hover:from-[#f5d76e] hover:to-[#d4af37] 
-                    transition-all duration-300 font-medium 
-                    text-sm sm:text-base disabled:bg-gray-800 disabled:text-gray-500
-                    disabled:cursor-not-allowed disabled:hover:from-gray-800
-                    disabled:hover:to-gray-800
-                    flex items-center justify-center 
-                    gap-2 relative overflow-hidden group
-                    shadow-md shadow-[#d4af37]/30 hover:shadow-[#d4af37]/50
-                    tracking-wide"
-                >
-                  {submitting ? (
-                    <>
-                      <Loader2 
-                        className="w-4 h-4 animate-spin relative z-10" 
-                      />
-                      <span className="relative z-10">Processing...</span>
-                    </>
-                  ) : (
-                    <>
-                      <span className="relative z-10">Confirm Booking</span>
-                      <CheckCircle className="w-4 h-4 relative z-10" />
-                    </>
-                  )}
-                  {!submitting && (
-                    <span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></span>
-                  )}
-                </button>
-              </div>
-            </form>
-          </div>
-
-          {}
-          <div className="lg:col-span-1">
-            <div 
-              className="bg-gradient-to-br from-[#1a1a1a] via-[#0f0f0f] to-[#1a1a1a] 
-                rounded-lg border border-[#d4af37]/30 
-                backdrop-blur-xl shadow-lg shadow-[#d4af37]/20 
-                p-3 sm:p-4 sticky top-4"
-            >
-              <div className="flex items-center gap-2 mb-4">
-                <div className="p-1 bg-[#d4af37]/10 rounded-lg 
-                  border border-[#d4af37]/30">
-                  <Sparkles className="w-3.5 h-3.5 text-[#d4af37]" />
-                </div>
-              <h2 
-                  className="text-sm sm:text-base font-serif font-semibold 
-                    text-white tracking-wide"
-              >
-                Booking Summary
-              </h2>
-              </div>
-
-              {}
-              <div className="mb-4">
-                {((room?.images && room.images.length > 0) 
-                  ? room.images[0] 
-                  : roomType.images?.[0]) && (
-                  <div className="relative overflow-hidden rounded-lg mb-3 
-                    border border-[#d4af37]/20 group"
-                  >
-                  <img
-                    src={(room?.images && room.images.length > 0) 
-                      ? room.images[0] 
-                      : (roomType.images?.[0] || '')}
-                    alt={roomType.name}
-                    className="w-full h-32 sm:h-40 object-cover 
-                        group-hover:scale-110 transition-transform 
-                        duration-500"
-                    />
-                    <div className="absolute inset-0 bg-gradient-to-t 
-                      from-black/60 via-transparent to-transparent 
-                      opacity-0 group-hover:opacity-100 transition-opacity 
-                      duration-300"
-                  />
-                  </div>
-                )}
-                <h3 className="font-serif font-semibold text-white mb-1.5 
-                  text-sm sm:text-base tracking-tight"
-                >
-                  {roomType.name}
-                </h3>
-                <div className="flex items-center gap-1.5 text-gray-400 
-                  font-light tracking-wide text-xs sm:text-sm"
-                >
-                  <MapPin className="w-3.5 h-3.5 text-[#d4af37]" />
-                  <span>
-                  Room {room.room_number} - Floor {room.floor}
-                  </span>
-                </div>
-              </div>
-
-              {}
-              <div className="border-t border-[#d4af37]/20 pt-4 space-y-2">
-                <div className="flex justify-between items-center">
-                  <span className="text-[10px] sm:text-xs text-gray-400 font-light tracking-wide">
-                    Room price/night
-                  </span>
-                  <span className="font-light text-white text-xs sm:text-sm">
-                    {formatPrice(roomPrice)}
-                  </span>
-                </div>
-
-                {numberOfNights > 0 && (
-                  <div className="flex justify-between items-center">
-                    <span className="text-[10px] sm:text-xs text-gray-400 font-light tracking-wide">
-                      Nights
-                    </span>
-                    <span className="font-light text-white text-xs sm:text-sm">
-                      {numberOfNights} night(s)
-                    </span>
-                  </div>
-                )}
-
-                {numberOfNights > 0 && (
-                  <div className="flex justify-between items-center">
-                    <span className="text-[10px] sm:text-xs text-gray-400 font-light tracking-wide">
-                      Room Total
-                    </span>
-                    <span className="font-light text-white text-xs sm:text-sm">
-                      {formatPrice(roomTotal)}
-                    </span>
-                  </div>
-                )}
-
-                {selectedServices.length > 0 && (
-                  <>
-                    <div className="border-t border-[#d4af37]/20 pt-2 mt-2">
-                      <p className="text-[10px] sm:text-xs text-gray-400 font-light tracking-wide mb-1.5">
-                        Services:
-                      </p>
-                      {selectedServices.map((item) => (
-                        <div key={item.service.id} className="flex justify-between items-center mb-1">
-                          <span className="text-[10px] sm:text-xs text-gray-500 font-light tracking-wide">
-                            {item.service.name} (×{item.quantity})
-                          </span>
-                          <span className="font-light text-white text-[10px] sm:text-xs">
-                            {formatPrice(item.service.price * item.quantity)}
-                          </span>
-                        </div>
-                      ))}
-                      <div className="flex justify-between items-center mt-1.5 pt-1.5 border-t border-[#d4af37]/10">
-                        <span className="text-[10px] sm:text-xs text-gray-400 font-light tracking-wide">
-                          Services Total
-                        </span>
-                        <span className="font-light text-white text-xs sm:text-sm">
-                          {formatPrice(servicesTotal)}
-                        </span>
-                      </div>
-                    </div>
-                  </>
-                )}
-
-                {numberOfNights > 0 && (
-                  <div className="border-t border-[#d4af37]/20 pt-2 mt-2">
-                    <div className="flex justify-between items-center mb-1">
-                      <span className="text-[10px] sm:text-xs text-gray-400 font-light tracking-wide">
-                        Subtotal
-                      </span>
-                      <span className="font-light text-white text-xs sm:text-sm">
-                        {formatPrice(subtotal)}
-                      </span>
-                    </div>
-                  </div>
-                )}
-
-                {selectedPromotion && promotionDiscount > 0 && numberOfNights > 0 && (
-                  <div className="border-t border-[#d4af37]/20 pt-2 mt-2">
-                    <div className="flex justify-between items-center">
-                      <span className="text-[10px] sm:text-xs text-green-400 font-light tracking-wide">
-                        Promotion Discount ({selectedPromotion.code})
-                      </span>
-                      <span className="font-light text-green-400 text-xs sm:text-sm">
-                        -{formatPrice(promotionDiscount)}
-                      </span>
-                    </div>
-                  </div>
-                )}
-
-                <div 
-                  className="border-t border-[#d4af37]/20 pt-3 flex 
-                    justify-between items-center"
-                >
-                  <span className="text-sm sm:text-base font-medium text-white tracking-wide">Total</span>
-                  <span className="text-lg sm:text-xl font-serif font-semibold 
-                    bg-gradient-to-r from-[#d4af37] to-[#f5d76e] 
-                    bg-clip-text text-transparent tracking-tight"
-                  >
-                    {numberOfNights > 0
-                      ? formatPrice(totalPrice)
-                      : '---'}
-                  </span>
-                </div>
-
-                {}
-                {paymentMethod === 'cash' && numberOfNights > 0 && (
-                  <div className="bg-gradient-to-br from-orange-900/20 to-orange-800/10 
-                    border border-orange-500/30 rounded-lg p-3 mt-3"
-                  >
-                    <div className="flex justify-between 
-                      items-center mb-1.5"
-                    >
-                      <span className="text-xs sm:text-sm font-medium 
-                        text-orange-300 tracking-wide"
-                      >
-                        Deposit to pay (20%)
-                      </span>
-                      <span className="text-base sm:text-lg font-display font-semibold 
-                        text-[#d4af37] tracking-tight"
-                      >
-                        {formatPrice(totalPrice * 0.2)}
-                      </span>
-                    </div>
-                    <p className="text-[10px] sm:text-xs text-orange-300/80 font-light tracking-wide">
-                      Pay 20% deposit to secure booking, remaining balance on arrival
-                    </p>
-                  </div>
-                )}
-              </div>
-
-              {}
-              <div 
-                className={`border rounded-lg p-2.5 sm:p-3 mt-3 ${
-                  paymentMethod === 'cash'
-                    ? 'bg-gradient-to-br from-orange-900/20 to-orange-800/10 border-orange-500/30'
-                    : 'bg-gradient-to-br from-[#d4af37]/10 to-[#c9a227]/5 border-[#d4af37]/30'
-                }`}
-              >
-                {paymentMethod === 'cash' ? (
-                  <div className="flex items-start gap-2">
-                    <Shield className="w-3.5 h-3.5 text-orange-400 mt-0.5 flex-shrink-0" />
-                    <p className="text-[10px] sm:text-xs text-orange-300 font-light tracking-wide leading-relaxed">
-                        <strong className="text-orange-200">20% deposit required</strong> to secure your booking. Pay the remaining balance ({formatPrice(totalPrice * 0.8)}) on arrival at the hotel.
-                  </p>
-                  </div>
-                ) : (
-                  <div className="flex items-start gap-2">
-                    <Sparkles className="w-3.5 h-3.5 text-[#d4af37] mt-0.5 flex-shrink-0" />
-                    <p className="text-[10px] sm:text-xs text-gray-300 font-light tracking-wide leading-relaxed">
-                      Secure payment via Stripe. Complete your booking 
-                      with credit or debit card after confirming.
-                  </p>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default BookingPage;
diff --git a/Frontend/src/pages/customer/BookingSuccessPage.tsx b/Frontend/src/pages/customer/BookingSuccessPage.tsx
index 68da1149..08b840f0 100644
--- a/Frontend/src/pages/customer/BookingSuccessPage.tsx
+++ b/Frontend/src/pages/customer/BookingSuccessPage.tsx
@@ -33,6 +33,7 @@ import { confirmBankTransfer } from
 import Loading from '../../components/common/Loading';
 import { useFormatCurrency } from '../../hooks/useFormatCurrency';
 import { parseDateLocal } from '../../utils/format';
+import DepositPaymentModal from '../../components/payments/DepositPaymentModal';
 
 const BookingSuccessPage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -54,6 +55,7 @@ const BookingSuccessPage: React.FC = () => {
     useState<File | null>(null);
   const [previewUrl, setPreviewUrl] = 
     useState<string | null>(null);
+  const [showDepositModal, setShowDepositModal] = useState(false);
 
   useEffect(() => {
     if (id) {
@@ -91,12 +93,13 @@ const BookingSuccessPage: React.FC = () => {
         }
 
         
+        // Only auto-open deposit modal if booking is not cancelled
         if (
           bookingData.requires_deposit && 
-          !bookingData.deposit_paid
+          !bookingData.deposit_paid &&
+          bookingData.status !== 'cancelled'
         ) {
-          navigate(`/deposit-payment/${bookingId}`, { replace: true });
-          return;
+          setShowDepositModal(true);
         }
       } else {
         throw new Error(
@@ -301,6 +304,51 @@ const BookingSuccessPage: React.FC = () => {
   const room = booking.room;
   const roomType = room?.room_type;
 
+  // Check if payment is completed
+  const isPaymentCompleted = (() => {
+    // Check if booking is cancelled
+    if (booking.status === 'cancelled') {
+      return false;
+    }
+    
+    // Check payment_status
+    if (booking.payment_status === 'paid') {
+      return true;
+    }
+    
+    // Check payment_balance
+    if (booking.payment_balance?.is_fully_paid === true) {
+      return true;
+    }
+    
+    // For deposit bookings, check if deposit is paid
+    if (booking.requires_deposit && booking.deposit_paid === true) {
+      return true;
+    }
+    
+    // Check payments array
+    if (booking.payments && Array.isArray(booking.payments)) {
+      const totalPaid = booking.payments
+        .filter((p: any) => p.payment_status === 'completed')
+        .reduce((sum: number, p: any) => sum + parseFloat(p.amount?.toString() || '0'), 0);
+      
+      // For deposit bookings, check if deposit is paid
+      if (booking.requires_deposit) {
+        const depositPayment = booking.payments.find((p: any) => p.payment_type === 'deposit' && p.payment_status === 'completed');
+        if (depositPayment) {
+          return true;
+        }
+      } else {
+        // For full payment bookings, check if fully paid
+        return totalPaid >= booking.total_price - 0.01;
+      }
+    }
+    
+    return false;
+  })();
+
+  const isCancelled = booking.status === 'cancelled';
+
   return (
     <div className="min-h-screen bg-gray-50 py-8">
       <div className="max-w-4xl mx-auto px-4">
@@ -309,24 +357,70 @@ const BookingSuccessPage: React.FC = () => {
           className="bg-white rounded-lg shadow-md 
             p-8 mb-6 text-center"
         >
-          <div
-            className="w-20 h-20 bg-green-100 
-              rounded-full flex items-center 
-              justify-center mx-auto mb-4"
-          >
-            <CheckCircle 
-              className="w-12 h-12 text-green-600" 
-            />
-          </div>
-          <h1
-            className="text-3xl font-bold text-gray-900 
-              mb-2"
-          >
-            Booking Successful!
-          </h1>
-          <p className="text-gray-600 mb-4">
-            Thank you for booking with our hotel
-          </p>
+          {isCancelled ? (
+            <>
+              <div
+                className="w-20 h-20 bg-red-100 
+                  rounded-full flex items-center 
+                  justify-center mx-auto mb-4"
+              >
+                <AlertCircle 
+                  className="w-12 h-12 text-red-600" 
+                />
+              </div>
+              <h1
+                className="text-3xl font-bold text-gray-900 
+                  mb-2"
+              >
+                Booking Cancelled
+              </h1>
+              <p className="text-gray-600 mb-4">
+                This booking has been cancelled
+              </p>
+            </>
+          ) : isPaymentCompleted ? (
+            <>
+              <div
+                className="w-20 h-20 bg-green-100 
+                  rounded-full flex items-center 
+                  justify-center mx-auto mb-4"
+              >
+                <CheckCircle 
+                  className="w-12 h-12 text-green-600" 
+                />
+              </div>
+              <h1
+                className="text-3xl font-bold text-gray-900 
+                  mb-2"
+              >
+                Booking Successful!
+              </h1>
+              <p className="text-gray-600 mb-4">
+                Thank you for booking with our hotel
+              </p>
+            </>
+          ) : (
+            <>
+              <div
+                className="w-20 h-20 bg-yellow-100 
+                  rounded-full flex items-center 
+                  justify-center mx-auto mb-4"
+              >
+                <AlertCircle 
+                  className="w-12 h-12 text-yellow-600" 
+                />
+              </div>
+              <h1
+                className="text-3xl font-bold text-gray-900 
+                  mb-2"
+              >
+                Booking Pending Payment
+              </h1>
+              <p className="text-gray-600 mb-4">
+                Please complete your payment to confirm your booking
+              </p>
+            </>
+          )}
 
           {}
           <div
@@ -681,19 +775,25 @@ const BookingSuccessPage: React.FC = () => {
                       <input
                         id="receipt-upload"
                         type="file"
-                        accept="image}
+                        accept="image/*"
+                        onChange={(e) => {
+                          const file = e.target.files?.[0];
+                          if (file) {
+                            setSelectedFile(file);
+                          }
+                        }}
+                        className="hidden"
+                      />
+                      <span className="text-sm text-gray-600">
+                        Click to upload receipt
+                      </span>
+                    </label>
+                  </div>
                   {selectedFile && (
                     <button
                       onClick={handleUploadReceipt}
                       disabled={uploadingReceipt}
-                      className="w-full px-4 py-3 
-                        bg-blue-600 text-white 
-                        rounded-lg hover:bg-blue-700 
-                        transition-colors font-semibold 
-                        disabled:bg-gray-400 
-                        disabled:cursor-not-allowed
-                        flex items-center 
-                        justify-center gap-2"
+                      className="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-semibold disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                     >
                       {uploadingReceipt ? (
                         <>
@@ -800,6 +900,21 @@ const BookingSuccessPage: React.FC = () => {
           </Link>
         </div>
       </div>
+
+      {/* Deposit Payment Modal */}
+      {showDepositModal && id && (
+        <DepositPaymentModal
+          isOpen={showDepositModal}
+          bookingId={Number(id)}
+          onClose={() => setShowDepositModal(false)}
+          onSuccess={() => {
+            setShowDepositModal(false);
+            if (id) {
+              fetchBookingDetails(Number(id));
+            }
+          }}
+        />
+      )}
     </div>
   );
 };
diff --git a/Frontend/src/pages/customer/DepositPaymentPage.tsx b/Frontend/src/pages/customer/DepositPaymentPage.tsx
deleted file mode 100644
index 775af580..00000000
--- a/Frontend/src/pages/customer/DepositPaymentPage.tsx
+++ /dev/null
@@ -1,505 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
-import {
-  CheckCircle,
-  AlertCircle,
-  CreditCard,
-  ArrowLeft,
-  XCircle,
-} from 'lucide-react';
-import { toast } from 'react-toastify';
-import { getBookingById, cancelBooking, type Booking } from 
-  '../../services/api/bookingService';
-import {
-  getPaymentsByBookingId,
-  type Payment,
-} from '../../services/api/paymentService';
-import Loading from '../../components/common/Loading';
-import { useFormatCurrency } from '../../hooks/useFormatCurrency';
-import StripePaymentWrapper from '../../components/payments/StripePaymentWrapper';
-import PayPalPaymentWrapper from '../../components/payments/PayPalPaymentWrapper';
-
-const DepositPaymentPage: React.FC = () => {
-  const { bookingId } = useParams<{ bookingId: string }>();
-  const navigate = useNavigate();
-  const { formatCurrency, currency } = useFormatCurrency();
-
-  const [booking, setBooking] = useState<Booking | null>(null);
-  const [depositPayment, setDepositPayment] = useState<Payment | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [paymentSuccess, setPaymentSuccess] = useState(false);
-  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<'stripe' | 'paypal' | null>(null);
-  const [cancelling, setCancelling] = useState(false);
-
-  useEffect(() => {
-    if (bookingId) {
-      fetchData(Number(bookingId));
-    }
-  }, [bookingId]);
-
-  const fetchData = async (id: number) => {
-    try {
-      setLoading(true);
-      setError(null);
-
-      
-      const bookingResponse = await getBookingById(id);
-      if (!bookingResponse.success || !bookingResponse.data?.booking) {
-        throw new Error('Booking not found');
-      }
-
-      const bookingData = bookingResponse.data.booking;
-      setBooking(bookingData);
-
-      
-      if (bookingData.status === 'confirmed' || bookingData.status === 'checked_in') {
-        toast.success('Booking is already confirmed!');
-        navigate(`/bookings/${id}`);
-        return;
-      }
-
-      
-      if (!bookingData.requires_deposit) {
-        toast.info('This booking does not require a deposit');
-        navigate(`/bookings/${id}`);
-        return;
-      }
-
-      
-      const paymentsResponse = await getPaymentsByBookingId(id);
-      if (paymentsResponse.success) {
-        const deposit = paymentsResponse.data.payments.find(
-          (p) => p.payment_type === 'deposit'
-        );
-        if (deposit) {
-          setDepositPayment(deposit);
-        }
-      }
-    } catch (err: any) {
-      console.error('Error fetching data:', err);
-      const message =
-        err.response?.data?.message || 'Unable to load payment information';
-      setError(message);
-      toast.error(message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const formatPrice = (price: number) => formatCurrency(price);
-
-  const handleCancelBooking = async () => {
-    if (!booking) return;
-
-    const confirmed = window.confirm(
-      `Are you sure you want to cancel this booking?\n\n` +
-      `Booking Number: ${booking.booking_number}\n\n` +
-      `⚠️ Note: This will cancel your booking and free up the room.`
-    );
-
-    if (!confirmed) return;
-
-    try {
-      setCancelling(true);
-      const response = await cancelBooking(booking.id);
-
-      if (response.success) {
-        toast.success(
-          `✅ Booking ${booking.booking_number} has been cancelled successfully!`
-        );
-        
-        setTimeout(() => {
-          navigate('/bookings');
-        }, 1500);
-      } else {
-        throw new Error(response.message || 'Unable to cancel booking');
-      }
-    } catch (err: any) {
-      console.error('Error cancelling booking:', err);
-      const message =
-        err.response?.data?.message ||
-        'Unable to cancel booking. Please try again.';
-      toast.error(message);
-    } finally {
-      setCancelling(false);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f] py-8">
-        <Loading fullScreen text="Loading payment information..." />
-      </div>
-    );
-  }
-
-  if (error || !booking || !depositPayment) {
-    return (
-      <div 
-        className="min-h-screen bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f] py-8 sm:py-12 w-screen relative -mt-6 -mb-6"
-        style={{ 
-          marginLeft: 'calc(50% - 50vw)',
-          marginRight: 'calc(50% - 50vw)',
-          width: '100vw',
-          zIndex: 1
-        }}
-      >
-        <div className="w-full px-2 sm:px-4 md:px-6 lg:px-8 py-8">
-          <div
-            className="bg-gradient-to-br from-red-900/20 to-red-800/10 
-              border border-red-500/30 rounded-xl p-6 sm:p-12 text-center 
-              backdrop-blur-xl shadow-2xl shadow-red-500/10"
-          >
-            <AlertCircle className="w-10 h-10 sm:w-12 sm:h-12 text-red-400 mx-auto mb-4" />
-            <p className="text-red-300 font-light text-base sm:text-lg mb-6 tracking-wide px-2">
-              {error || 'Payment information not found'}
-            </p>
-            <Link
-              to="/bookings"
-              className="inline-flex items-center gap-2 bg-gradient-to-r 
-                from-[#d4af37] to-[#c9a227] text-[#0f0f0f] 
-                px-4 py-2 sm:px-6 sm:py-3 rounded-sm hover:from-[#f5d76e] 
-                hover:to-[#d4af37] transition-all duration-300 
-                font-medium tracking-wide shadow-lg shadow-[#d4af37]/30 text-sm sm:text-base"
-            >
-              <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
-              Back to booking list
-            </Link>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  const depositAmount = parseFloat(depositPayment.amount.toString());
-  const remainingAmount = booking.total_price - depositAmount;
-  const isDepositPaid = depositPayment.payment_status === 'completed';
-
-  return (
-    <div 
-      className="min-h-screen bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f] py-8 sm:py-12 w-screen relative -mt-6 -mb-6"
-      style={{ 
-        marginLeft: 'calc(50% - 50vw)',
-        marginRight: 'calc(50% - 50vw)',
-        width: '100vw',
-        zIndex: 1
-      }}
-    >
-      <div className="w-full px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4">
-        {}
-        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 mb-3 sm:mb-4">
-          <Link
-            to={`/bookings/${bookingId}`}
-            className="inline-flex items-center gap-1 
-              text-[#d4af37]/80 hover:text-[#d4af37] 
-              transition-colors font-light tracking-wide text-xs sm:text-sm"
-          >
-            <ArrowLeft className="w-3.5 h-3.5" />
-            <span>Back to booking details</span>
-          </Link>
-          
-          {}
-          {!isDepositPaid && booking && (
-            <button
-              onClick={handleCancelBooking}
-              disabled={cancelling}
-              className="inline-flex items-center gap-1 
-                bg-gradient-to-br from-red-900/20 to-red-800/10 
-                border border-red-500/30 text-red-300 
-                px-2.5 py-1 rounded-sm 
-                hover:border-red-400/50 hover:bg-gradient-to-br 
-                hover:from-red-800/30 hover:to-red-700/20 
-                transition-all duration-300 font-light tracking-wide text-xs sm:text-sm
-                backdrop-blur-sm shadow-sm shadow-red-500/10
-                hover:shadow-md hover:shadow-red-500/20
-                disabled:opacity-50 disabled:cursor-not-allowed
-                w-full sm:w-auto"
-            >
-              <XCircle className="w-3.5 h-3.5" />
-              {cancelling ? 'Cancelling...' : 'Cancel Booking'}
-            </button>
-          )}
-        </div>
-
-        {}
-        {isDepositPaid && (
-          <div
-            className="bg-gradient-to-br from-green-900/20 to-green-800/10 
-              border border-green-500/30 rounded-lg p-3 sm:p-4 mb-3 sm:mb-4 
-              backdrop-blur-xl shadow-lg shadow-green-500/10"
-          >
-            <div className="flex flex-col sm:flex-row items-center sm:items-start gap-2.5 sm:gap-3">
-              <div
-                className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-green-500/20 to-green-600/20 
-                  rounded-full flex items-center justify-center flex-shrink-0
-                  border border-green-500/30 shadow-sm shadow-green-500/20"
-              >
-                <CheckCircle className="w-6 h-6 sm:w-7 sm:h-7 text-green-400" />
-              </div>
-              <div className="flex-1 text-center sm:text-left">
-                <h1 className="text-base sm:text-lg font-serif font-semibold text-green-300 mb-1 tracking-wide">
-                  Deposit Payment Successful!
-                </h1>
-                <p className="text-green-200/80 font-light text-xs sm:text-sm tracking-wide">
-                  Your booking has been confirmed. 
-                  Remaining amount to be paid on arrival at the hotel.
-                </p>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {}
-        {!isDepositPaid && (
-          <div
-            className="bg-gradient-to-br from-[#d4af37]/10 to-[#c9a227]/5 
-              border border-[#d4af37]/30 rounded-lg p-3 sm:p-4 mb-3 sm:mb-4 
-              backdrop-blur-xl shadow-lg shadow-[#d4af37]/10"
-          >
-            <div className="flex flex-col sm:flex-row items-center sm:items-start gap-2.5 sm:gap-3">
-              <div
-                className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-[#d4af37]/20 to-[#f5d76e]/20 
-                  rounded-full flex items-center justify-center flex-shrink-0
-                  border border-[#d4af37]/30 shadow-sm shadow-[#d4af37]/20"
-              >
-                <CreditCard className="w-6 h-6 sm:w-7 sm:h-7 text-[#d4af37]" />
-              </div>
-              <div className="flex-1 text-center sm:text-left">
-                <h1 className="text-base sm:text-lg font-elegant font-semibold text-[#d4af37] mb-1 tracking-wide">
-                  Deposit Payment Required
-                </h1>
-                <p className="text-gray-300/80 font-light text-xs sm:text-sm tracking-wide">
-                  Please pay <strong className="text-[#d4af37] font-medium">20% deposit</strong> to confirm your booking. Pay the remaining balance on arrival at the hotel.
-                </p>
-              </div>
-            </div>
-          </div>
-        )}
-
-        <div className="w-full">
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4">
-            {}
-            <div className="lg:col-span-2 space-y-3">
-              {}
-              <div className="bg-gradient-to-br from-gray-900/40 to-gray-800/20 
-                border border-gray-700/50 rounded-lg p-3 sm:p-4 
-                backdrop-blur-xl shadow-lg shadow-black/20">
-                <h2 className="text-sm sm:text-base font-serif font-semibold text-[#d4af37] mb-2.5 sm:mb-3 tracking-wide">
-                  Payment Information
-                </h2>
-
-                <div className="space-y-2">
-                  <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1 sm:gap-0 py-1.5 border-b border-gray-700/30">
-                    <span className="text-gray-300 font-light tracking-wide text-xs sm:text-sm">Total Room Price</span>
-                    <span className="font-medium text-gray-100 text-xs sm:text-sm">
-                      {formatPrice(booking.total_price)}
-                    </span>
-                  </div>
-
-                  <div
-                    className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1 sm:gap-0 py-2 
-                      border-t-2 border-[#d4af37]/30 pt-2"
-                  >
-                    <span className="font-medium text-[#d4af37] text-xs sm:text-sm tracking-wide">
-                      Deposit Amount to Pay (20%)
-                    </span>
-                    <span className="text-base sm:text-lg font-bold text-[#d4af37]">
-                      {formatPrice(depositAmount)}
-                    </span>
-                  </div>
-
-                  <div className="flex flex-col sm:flex-row sm:justify-between gap-0.5 text-[10px] sm:text-xs text-gray-400/80 font-light pt-1">
-                    <span>Remaining amount to be paid at check-in</span>
-                    <span className="text-gray-300">{formatPrice(remainingAmount)}</span>
-                  </div>
-                </div>
-
-                {isDepositPaid && (
-                  <div className="mt-4 sm:mt-6 bg-gradient-to-br from-green-900/20 to-green-800/10 
-                    border border-green-500/30 rounded-lg p-3 sm:p-4 backdrop-blur-sm">
-                    <p className="text-xs sm:text-sm text-green-300 font-light break-words">
-                      ✓ Deposit paid on:{' '}
-                      {depositPayment.payment_date
-                        ? new Date(depositPayment.payment_date).toLocaleString('en-US')
-                        : 'N/A'}
-                    </p>
-                    {depositPayment.transaction_id && (
-                      <p className="text-xs text-green-400/70 mt-2 font-mono break-all">
-                        Transaction ID: {depositPayment.transaction_id}
-                      </p>
-                    )}
-                  </div>
-                )}
-              </div>
-
-              {}
-              {!isDepositPaid && !selectedPaymentMethod && (
-                <div className="bg-gradient-to-br from-gray-900/40 to-gray-800/20 
-                  border border-gray-700/50 rounded-lg p-3 sm:p-4 
-                  backdrop-blur-xl shadow-lg shadow-black/20">
-                  <h2 className="text-sm sm:text-base font-serif font-semibold text-[#d4af37] mb-1.5 tracking-wide">
-                    Choose Payment Method
-                  </h2>
-                  <p className="text-gray-300/80 font-light mb-3 sm:mb-4 tracking-wide text-xs sm:text-sm">
-                    Please select how you would like to pay the deposit:
-                  </p>
-                  
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5 sm:gap-3">
-                    {}
-                    <button
-                      onClick={() => setSelectedPaymentMethod('stripe')}
-                      className="bg-gradient-to-br from-gray-800/40 to-gray-700/20 
-                        border-2 border-gray-600/30 rounded-lg p-3 
-                        hover:border-[#d4af37]/50 hover:bg-gradient-to-br 
-                        hover:from-[#d4af37]/10 hover:to-[#c9a227]/5 
-                        transition-all duration-300 text-left group
-                        backdrop-blur-sm shadow-sm shadow-black/10
-                        hover:shadow-md hover:shadow-[#d4af37]/20"
-                    >
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-indigo-500/20 to-indigo-600/20 
-                          rounded-lg flex items-center justify-center
-                          border border-indigo-500/30 group-hover:border-[#d4af37]/50
-                          transition-colors">
-                          <CreditCard className="w-4 h-4 sm:w-5 sm:h-5 text-indigo-400 group-hover:text-[#d4af37] transition-colors" />
-                        </div>
-                        <span className="text-[10px] sm:text-xs font-semibold text-indigo-400 group-hover:text-[#d4af37] 
-                          transition-colors tracking-wide">Card Payment</span>
-                      </div>
-                      <p className="text-[10px] sm:text-xs text-gray-300/70 font-light group-hover:text-gray-200 transition-colors">
-                        Pay with credit or debit card via Stripe
-                      </p>
-                    </button>
-
-                    {}
-                    <button
-                      onClick={() => setSelectedPaymentMethod('paypal')}
-                      className="bg-gradient-to-br from-gray-800/40 to-gray-700/20 
-                        border-2 border-gray-600/30 rounded-lg p-3 
-                        hover:border-[#d4af37]/50 hover:bg-gradient-to-br 
-                        hover:from-[#d4af37]/10 hover:to-[#c9a227]/5 
-                        transition-all duration-300 text-left group
-                        backdrop-blur-sm shadow-sm shadow-black/10
-                        hover:shadow-md hover:shadow-[#d4af37]/20"
-                    >
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500/20 to-blue-600/20 
-                          rounded-lg flex items-center justify-center
-                          border border-blue-500/30 group-hover:border-[#d4af37]/50
-                          transition-colors">
-                          <svg
-                            className="w-4 h-4 sm:w-5 sm:h-5 text-blue-400 group-hover:text-[#d4af37] transition-colors"
-                            viewBox="0 0 24 24"
-                            fill="currentColor"
-                          >
-                            <path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.203zm14.146-14.42a.477.477 0 0 0-.414-.24h-3.84c-.48 0-.856.355-.932.826-.075.47-.232 1.21-.232 1.21s-.156-.74-.232-1.21a.957.957 0 0 0-.932-.826H5.342a.957.957 0 0 0-.932.826c-.076.47-.232 1.21-.232 1.21s-.156-.74-.232-1.21a.957.957 0 0 0-.932-.826H.477a.477.477 0 0 0-.414.24c-.11.19-.14.426-.08.643.06.217.2.4.388.51l.04.02c.19.11.426.14.643.08.217-.06.4-.2.51-.388l.01-.02c.11-.19.14-.426.08-.643a.955.955 0 0 0-.388-.51l-.01-.01a.955.955 0 0 0-.51-.388.955.955 0 0 0-.643.08l-.01.01a.955.955 0 0 0-.388.51c-.06.217-.03.453.08.643l.01.02c.11.188.293.328.51.388.217.06.453.03.643-.08l.01-.02c.188-.11.328-.293.388-.51.06-.217.03-.453-.08-.643l-.01-.01z"/>
-                          </svg>
-                        </div>
-                        <span className="text-[10px] sm:text-xs font-semibold text-blue-400 group-hover:text-[#d4af37] 
-                          transition-colors tracking-wide">PayPal</span>
-                      </div>
-                      <p className="text-[10px] sm:text-xs text-gray-300/70 font-light group-hover:text-gray-200 transition-colors">
-                        Pay securely with your PayPal account
-                      </p>
-                    </button>
-                  </div>
-                </div>
-              )}
-
-              {}
-              {!isDepositPaid && selectedPaymentMethod && (
-                <div className="bg-gradient-to-br from-gray-900/40 to-gray-800/20 
-                  border border-gray-700/50 rounded-lg p-3 sm:p-4 mb-3 sm:mb-4 
-                  backdrop-blur-xl shadow-lg shadow-black/10">
-                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
-                    <div>
-                      <h3 className="text-sm sm:text-base font-serif font-semibold text-[#d4af37] mb-0.5 tracking-wide">
-                        {selectedPaymentMethod === 'stripe' ? 'Card Payment' : 'PayPal Payment'}
-                      </h3>
-                      <p className="text-xs sm:text-sm text-gray-300/80 font-light tracking-wide">
-                        Pay deposit of <span className="text-[#d4af37] font-medium">{formatPrice(depositAmount)}</span>
-                      </p>
-                    </div>
-                    <button
-                      onClick={() => setSelectedPaymentMethod(null)}
-                      className="text-[10px] sm:text-xs text-gray-400 hover:text-[#d4af37] 
-                        underline transition-colors font-light tracking-wide self-start sm:self-auto"
-                    >
-                      Change method
-                    </button>
-                  </div>
-                </div>
-              )}
-
-              {}
-              {!isDepositPaid && booking && depositPayment && selectedPaymentMethod === 'stripe' && (
-                <div className="bg-gradient-to-br from-gray-900/40 to-gray-800/20 
-                  border border-gray-700/50 rounded-lg p-3 sm:p-4 
-                  backdrop-blur-xl shadow-lg shadow-black/20">
-                  {paymentSuccess ? (
-                    <div className="bg-gradient-to-br from-green-900/20 to-green-800/10 
-                      border border-green-500/30 rounded-lg p-4 sm:p-5 text-center 
-                      backdrop-blur-sm">
-                      <CheckCircle className="w-10 h-10 sm:w-12 sm:h-12 text-green-400 mx-auto mb-3" />
-                      <h3 className="text-base sm:text-lg font-serif font-semibold text-green-300 mb-2 tracking-wide">
-                        Payment Successful!
-                      </h3>
-                      <p className="text-green-200/80 mb-4 font-light tracking-wide text-xs sm:text-sm">
-                        Your deposit payment has been confirmed.
-                      </p>
-                      <button
-                        onClick={() => navigate(`/bookings/${booking.id}`)}
-                        className="bg-gradient-to-r from-[#d4af37] to-[#c9a227] 
-                          text-[#0f0f0f] px-4 py-1.5 sm:px-5 sm:py-2 rounded-sm 
-                          hover:from-[#f5d76e] hover:to-[#d4af37] 
-                          transition-all duration-300 font-medium tracking-wide 
-                          shadow-sm shadow-[#d4af37]/30 text-xs sm:text-sm"
-                      >
-                        View Booking
-                      </button>
-                    </div>
-                  ) : (
-                    <StripePaymentWrapper
-                      bookingId={booking.id}
-                      amount={depositAmount}
-                      onSuccess={() => {
-                        setPaymentSuccess(true);
-                        toast.success('✅ Payment successful! Your booking has been confirmed.');
-                        
-                        setTimeout(() => {
-                          navigate(`/bookings/${booking.id}`);
-                        }, 2000);
-                      }}
-                      onError={(error) => {
-                        toast.error(error || 'Payment failed');
-                      }}
-                    />
-                  )}
-                </div>
-              )}
-
-              {}
-              {!isDepositPaid && booking && depositPayment && selectedPaymentMethod === 'paypal' && (
-                <div className="bg-gradient-to-br from-gray-900/40 to-gray-800/20 
-                  border border-gray-700/50 rounded-lg p-3 sm:p-4 
-                  backdrop-blur-xl shadow-lg shadow-black/20">
-                  <PayPalPaymentWrapper
-                    bookingId={booking.id}
-                    amount={depositAmount}
-                    currency={currency || 'USD'}
-                    onError={(error) => {
-                      toast.error(error || 'Payment failed');
-                    }}
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DepositPaymentPage;
diff --git a/Frontend/src/pages/customer/MyBookingsPage.tsx b/Frontend/src/pages/customer/MyBookingsPage.tsx
index 1825c8be..e095577a 100644
--- a/Frontend/src/pages/customer/MyBookingsPage.tsx
+++ b/Frontend/src/pages/customer/MyBookingsPage.tsx
@@ -19,9 +19,9 @@ import {
 import { toast } from 'react-toastify';
 import {
   getMyBookings,
-  cancelBooking,
   type Booking,
 } from '../../services/api/bookingService';
+import CancelBookingModal from '../../components/booking/CancelBookingModal';
 import useAuthStore from '../../store/useAuthStore';
 import { useAuthModal } from '../../contexts/AuthModalContext';
 import Loading from '../../components/common/Loading';
@@ -40,8 +40,8 @@ const MyBookingsPage: React.FC = () => {
     useState<Booking[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [cancellingId, setCancellingId] = 
-    useState<number | null>(null);
+  const [showCancelModal, setShowCancelModal] = useState(false);
+  const [selectedBooking, setSelectedBooking] = useState<Booking | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [statusFilter, setStatusFilter] = 
     useState<string>('all');
@@ -119,53 +119,23 @@ const MyBookingsPage: React.FC = () => {
     }
   };
 
-  const handleCancelBooking = async (
-    bookingId: number,
-    bookingNumber: string
-  ) => {
-    const confirmed = window.confirm(
-      `Are you sure you want to cancel booking ${bookingNumber}?\n\n` +
-      `⚠️ Note:\n` +
-      `- You will be charged 20% of the order value\n` +
-      `- The remaining 80% will be refunded\n` +
-      `- Room status will be updated to "available"`
-    );
+  const handleCancelBookingClick = (booking: Booking) => {
+    setSelectedBooking(booking);
+    setShowCancelModal(true);
+  };
 
-    if (!confirmed) return;
-
-    try {
-      setCancellingId(bookingId);
-
-      const response = await cancelBooking(bookingId);
-
-      if (response.success) {
-        toast.success(
-          `✅ Successfully cancelled booking ${bookingNumber}!`
-        );
-        
-        
-        setBookings((prev) =>
-          prev.map((b) =>
-            b.id === bookingId
-              ? { ...b, status: 'cancelled' }
-              : b
-          )
-        );
-      } else {
-        throw new Error(
-          response.message || 
-          'Unable to cancel booking'
-        );
-      }
-    } catch (err: any) {
-      console.error('Error cancelling booking:', err);
-      const message =
-        err.response?.data?.message ||
-        'Unable to cancel booking. Please try again.';
-      toast.error(message);
-    } finally {
-      setCancellingId(null);
+  const handleCancelSuccess = () => {
+    if (selectedBooking) {
+      setBookings((prev) =>
+        prev.map((b) =>
+          b.id === selectedBooking.id
+            ? { ...b, status: 'cancelled' }
+            : b
+        )
+      );
     }
+    setShowCancelModal(false);
+    setSelectedBooking(null);
   };
 
   const formatDate = (dateString: string) => {
@@ -619,38 +589,19 @@ const MyBookingsPage: React.FC = () => {
                               onClick={(e) => {
                                 e.preventDefault();
                                 e.stopPropagation();
-                                handleCancelBooking(
-                                  booking.id,
-                                  booking.booking_number
-                                );
+                                handleCancelBookingClick(booking);
                               }}
-                              disabled={
-                                cancellingId === booking.id
-                              }
                               className="inline-flex 
                                 items-center gap-2 px-4 py-2 
                                 bg-red-600 text-white 
                                 rounded-lg hover:bg-red-700 
                                 transition-colors font-medium 
-                                text-sm disabled:bg-gray-400 
-                                disabled:cursor-not-allowed cursor-pointer"
+                                text-sm cursor-pointer"
                             >
-                              {cancellingId === booking.id ? (
-                                <>
-                                  <Loader2 
-                                    className="w-4 h-4 
-                                      animate-spin" 
-                                  />
-                                  Cancelling...
-                                </>
-                              ) : (
-                                <>
-                                  <XCircle 
-                                    className="w-4 h-4" 
-                                  />
-                                  Cancel booking
-                                </>
-                              )}
+                              <XCircle 
+                                className="w-4 h-4" 
+                              />
+                              Cancel booking
                             </button>
                           )}
                         </div>
@@ -663,6 +614,19 @@ const MyBookingsPage: React.FC = () => {
           </div>
         )}
       </div>
+
+      {/* Cancel Booking Modal */}
+      {showCancelModal && selectedBooking && (
+        <CancelBookingModal
+          isOpen={showCancelModal}
+          booking={selectedBooking}
+          onClose={() => {
+            setShowCancelModal(false);
+            setSelectedBooking(null);
+          }}
+          onSuccess={handleCancelSuccess}
+        />
+      )}
     </div>
   );
 };
diff --git a/Frontend/src/pages/customer/PayPalCancelPage.tsx b/Frontend/src/pages/customer/PayPalCancelPage.tsx
index c94c6747..1b93cf09 100644
--- a/Frontend/src/pages/customer/PayPalCancelPage.tsx
+++ b/Frontend/src/pages/customer/PayPalCancelPage.tsx
@@ -70,7 +70,7 @@ const PayPalCancelPage: React.FC = () => {
         <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
           {bookingId && (
             <button
-              onClick={() => navigate(`/payment/deposit/${bookingId}`)}
+              onClick={() => navigate(`/bookings/${bookingId}`)}
               className="flex-1 bg-gradient-to-r from-[#d4af37] to-[#c9a227] 
                 text-[#0f0f0f] px-4 py-2 sm:px-6 sm:py-3 rounded-sm 
                 hover:from-[#f5d76e] hover:to-[#d4af37] 
@@ -80,7 +80,7 @@ const PayPalCancelPage: React.FC = () => {
               disabled={cancelling}
             >
               <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
-              Try Again
+              View Booking Details
             </button>
           )}
           <button
diff --git a/Frontend/src/pages/customer/PayPalReturnPage.tsx b/Frontend/src/pages/customer/PayPalReturnPage.tsx
index 6ff4a00d..f6ce79bc 100644
--- a/Frontend/src/pages/customer/PayPalReturnPage.tsx
+++ b/Frontend/src/pages/customer/PayPalReturnPage.tsx
@@ -125,16 +125,18 @@ const PayPalReturnPage: React.FC = () => {
           {error || 'Unable to process your payment. Please try again.'}
         </p>
         <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
-          <button
-            onClick={() => navigate(`/payment/deposit/${bookingId}`)}
-            className="flex-1 bg-gradient-to-r from-[#d4af37] to-[#c9a227] 
-              text-[#0f0f0f] px-4 py-2 sm:px-6 sm:py-3 rounded-sm 
-              hover:from-[#f5d76e] hover:to-[#d4af37] 
-              transition-all duration-300 font-medium tracking-wide 
-              shadow-lg shadow-[#d4af37]/30 text-sm sm:text-base"
-          >
-            Retry Payment
-          </button>
+          {bookingId && (
+            <button
+              onClick={() => navigate(`/bookings/${bookingId}`)}
+              className="flex-1 bg-gradient-to-r from-[#d4af37] to-[#c9a227] 
+                text-[#0f0f0f] px-4 py-2 sm:px-6 sm:py-3 rounded-sm 
+                hover:from-[#f5d76e] hover:to-[#d4af37] 
+                transition-all duration-300 font-medium tracking-wide 
+                shadow-lg shadow-[#d4af37]/30 text-sm sm:text-base"
+            >
+              View Booking
+            </button>
+          )}
           <button
             onClick={() => navigate('/bookings')}
             className="flex-1 bg-gradient-to-br from-gray-800/40 to-gray-700/20 
diff --git a/Frontend/src/pages/customer/PaymentResultPage.tsx b/Frontend/src/pages/customer/PaymentResultPage.tsx
index 5ba547e6..4adec813 100644
--- a/Frontend/src/pages/customer/PaymentResultPage.tsx
+++ b/Frontend/src/pages/customer/PaymentResultPage.tsx
@@ -197,12 +197,12 @@ const PaymentResultPage: React.FC = () => {
             ) : status === 'failed' && bookingId ? (
               <>
                 <Link
-                  to={`/deposit-payment/${bookingId}`}
+                  to={`/bookings/${bookingId}`}
                   className="flex-1 px-6 py-3 bg-indigo-600 
                     text-white rounded-lg hover:bg-indigo-700 
                     transition-colors font-medium text-center"
                 >
-                  Retry payment
+                  View Booking
                 </Link>
                 <Link
                   to="/bookings"
diff --git a/Frontend/src/pages/customer/ProfilePage.tsx b/Frontend/src/pages/customer/ProfilePage.tsx
index 3035b891..a75aece5 100644
--- a/Frontend/src/pages/customer/ProfilePage.tsx
+++ b/Frontend/src/pages/customer/ProfilePage.tsx
@@ -42,8 +42,8 @@ const profileValidationSchema = yup.object().shape({
     .string()
     .required('Phone number is required')
     .matches(
-      /^[0-9]{10,11}$/,
-      'Phone number must have 10-11 digits'
+      /^[\d\s\-\+\(\)]{5,}$/,
+      'Please enter a valid phone number'
     ),
 });
 
diff --git a/Frontend/src/pages/customer/RoomDetailPage.tsx b/Frontend/src/pages/customer/RoomDetailPage.tsx
index 2da6726f..bfed1f8f 100644
--- a/Frontend/src/pages/customer/RoomDetailPage.tsx
+++ b/Frontend/src/pages/customer/RoomDetailPage.tsx
@@ -10,7 +10,7 @@ import {
   Award,
   Sparkles,
 } from 'lucide-react';
-import { getRoomByNumber, type Room } from 
+import { getRoomByNumber, getRoomBookedDates, type Room } from 
   '../../services/api/roomService';
 import RoomGallery from '../../components/rooms/RoomGallery';
 import RoomAmenities from '../../components/rooms/RoomAmenities';
@@ -18,15 +18,22 @@ import ReviewSection from '../../components/rooms/ReviewSection';
 import CurrencyIcon from '../../components/common/CurrencyIcon';
 import { useFormatCurrency } from '../../hooks/useFormatCurrency';
 import useAuthStore from '../../store/useAuthStore';
+import LuxuryBookingModal from '../../components/booking/LuxuryBookingModal';
+import { useAuthModal } from '../../contexts/AuthModalContext';
+import { toast } from 'react-toastify';
 
 const RoomDetailPage: React.FC = () => {
   const { room_number } = useParams<{ room_number: string }>();
   const navigate = useNavigate();
   const { formatCurrency } = useFormatCurrency();
-  const { userInfo } = useAuthStore();
+  const { userInfo, isAuthenticated } = useAuthStore();
+  const { openModal } = useAuthModal();
   const [room, setRoom] = useState<Room | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [showBookingModal, setShowBookingModal] = useState(false);
+  const [nextAvailableDate, setNextAvailableDate] = useState<Date | null>(null);
+  const [bookedUntilDate, setBookedUntilDate] = useState<Date | null>(null);
 
   useEffect(() => {
     if (room_number) {
@@ -52,6 +59,11 @@ const RoomDetailPage: React.FC = () => {
           }
           
           setRoom(fetchedRoom);
+          
+          // Fetch booked dates to calculate availability
+          if (fetchedRoom.id) {
+            await fetchBookedDates(fetchedRoom.id);
+          }
         } else {
           throw new Error('Failed to fetch room details');
         }
@@ -70,6 +82,65 @@ const RoomDetailPage: React.FC = () => {
     }
   };
 
+  const fetchBookedDates = async (roomId: number) => {
+    try {
+      const response = await getRoomBookedDates(roomId);
+      if (response.success && response.data?.booked_dates) {
+        const bookedDates = response.data.booked_dates.map((date: string) => {
+          const d = new Date(date);
+          d.setHours(0, 0, 0, 0);
+          return d;
+        });
+        
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        
+        // Sort booked dates
+        const sortedBookedDates = bookedDates.sort((a: Date, b: Date) => a.getTime() - b.getTime());
+        
+        // Find if today is booked
+        const todayBooked = sortedBookedDates.some((date: Date) => {
+          return date.getTime() === today.getTime();
+        });
+        
+        if (todayBooked) {
+          // Find consecutive booked dates starting from today
+          let lastConsecutiveDate = new Date(today);
+          
+          for (let i = 0; i < sortedBookedDates.length; i++) {
+            const bookedDate = sortedBookedDates[i];
+            
+            // Check if this date is consecutive from the last found date
+            const daysDiff = Math.floor((bookedDate.getTime() - lastConsecutiveDate.getTime()) / (1000 * 60 * 60 * 24));
+            
+            if (daysDiff === 0 || daysDiff === 1) {
+              // This date is part of the consecutive booking
+              lastConsecutiveDate = new Date(bookedDate);
+            } else if (daysDiff > 1) {
+              // Gap found, stop looking
+              break;
+            }
+          }
+          
+          // Set booked until date (check-out date is the last booked date)
+          setBookedUntilDate(lastConsecutiveDate);
+          
+          // Next available date is the day after the last booked date
+          const nextAvailable = new Date(lastConsecutiveDate);
+          nextAvailable.setDate(nextAvailable.getDate() + 1);
+          setNextAvailableDate(nextAvailable);
+        } else {
+          // Today is not booked, so it's available now
+          setNextAvailableDate(today);
+          setBookedUntilDate(null);
+        }
+      }
+    } catch (err: any) {
+      console.error('Error fetching booked dates:', err);
+      // Don't show error to user, just don't show availability info
+    }
+  };
+
   if (loading) {
     return (
       <div 
@@ -191,23 +262,35 @@ const RoomDetailPage: React.FC = () => {
                         Featured
                       </div>
                     )}
-                    <div
-                      className={`px-2 py-0.5 rounded-sm 
-                        text-[10px] sm:text-xs font-medium tracking-wide
-                        backdrop-blur-sm shadow-sm
-                        ${
-                          room.status === 'available'
-                            ? 'bg-green-500/90 text-white border border-green-400/50'
-                            : room.status === 'occupied'
-                            ? 'bg-red-500/90 text-white border border-red-400/50'
-                            : 'bg-gray-500/90 text-white border border-gray-400/50'
-                        }`}
-                    >
-                      {room.status === 'available'
-                        ? 'Available Now'
-                        : room.status === 'occupied'
-                        ? 'Booked'
-                        : 'Maintenance'}
+                    <div className="flex flex-col gap-1">
+                      <div
+                        className={`px-2 py-0.5 rounded-sm 
+                          text-[10px] sm:text-xs font-medium tracking-wide
+                          backdrop-blur-sm shadow-sm
+                          ${
+                            room.status === 'available'
+                              ? 'bg-green-500/90 text-white border border-green-400/50'
+                              : room.status === 'occupied'
+                              ? 'bg-red-500/90 text-white border border-red-400/50'
+                              : 'bg-gray-500/90 text-white border border-gray-400/50'
+                          }`}
+                      >
+                        {room.status === 'available'
+                          ? 'Available Now'
+                          : room.status === 'occupied'
+                          ? 'Booked'
+                          : 'Maintenance'}
+                      </div>
+                      {room.status === 'occupied' && bookedUntilDate && (
+                        <p className="text-[9px] sm:text-[10px] text-gray-300 font-light leading-tight">
+                          Booked until {bookedUntilDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                        </p>
+                      )}
+                      {room.status === 'occupied' && nextAvailableDate && (
+                        <p className="text-[9px] sm:text-[10px] text-[#d4af37] font-light leading-tight">
+                          Available from {nextAvailableDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                        </p>
+                      )}
                     </div>
                   </div>
                   
@@ -371,8 +454,20 @@ const RoomDetailPage: React.FC = () => {
               {userInfo?.role !== 'admin' && userInfo?.role !== 'staff' && (
                 <>
                   <div className="mb-3">
-                    <Link
-                      to={`/booking/${room.id}`}
+                    <button
+                      onClick={() => {
+                        if (room.status !== 'available') {
+                          toast.error('This room is not available for booking');
+                          return;
+                        }
+                        if (!isAuthenticated) {
+                          toast.error('Please login to make a booking');
+                          openModal('login');
+                          return;
+                        }
+                        setShowBookingModal(true);
+                      }}
+                      disabled={room.status !== 'available'}
                       className={`block w-full py-2 text-center 
                         font-medium rounded-sm transition-all duration-300 
                         tracking-wide relative overflow-hidden group text-xs sm:text-sm
@@ -381,9 +476,6 @@ const RoomDetailPage: React.FC = () => {
                             ? 'bg-gradient-to-r from-[#d4af37] to-[#c9a227] text-[#0f0f0f] hover:from-[#f5d76e] hover:to-[#d4af37] shadow-sm shadow-[#d4af37]/30 hover:shadow-[#d4af37]/50'
                             : 'bg-gray-800 text-gray-500 cursor-not-allowed border border-gray-700'
                       }`}
-                      onClick={(e) => {
-                        if (room.status !== 'available') e.preventDefault();
-                      }}
                     >
                       <span className="relative z-10 flex items-center justify-center gap-1.5">
                         <Calendar className="w-3.5 h-3.5" />
@@ -392,7 +484,7 @@ const RoomDetailPage: React.FC = () => {
                       {room.status === 'available' && (
                         <span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></span>
                       )}
-                    </Link>
+                    </button>
                   </div>
 
                   {room.status === 'available' && (
@@ -449,6 +541,19 @@ const RoomDetailPage: React.FC = () => {
           <ReviewSection roomId={room.id} />
         </div>
       </div>
+
+      {/* Booking Modal */}
+      {room && (
+        <LuxuryBookingModal
+          roomId={room.id}
+          isOpen={showBookingModal}
+          onClose={() => setShowBookingModal(false)}
+          onSuccess={(bookingId) => {
+            setShowBookingModal(false);
+            navigate(`/booking-success/${bookingId}`);
+          }}
+        />
+      )}
     </div>
   );
 };
diff --git a/Frontend/src/utils/validationSchemas.ts b/Frontend/src/utils/validationSchemas.ts
index bb0a9a9a..328f480d 100644
--- a/Frontend/src/utils/validationSchemas.ts
+++ b/Frontend/src/utils/validationSchemas.ts
@@ -44,8 +44,8 @@ export const registerSchema = yup.object().shape({
     .string()
     .optional()
     .matches(
-      /^[0-9]{10,11}$/,
-      'Invalid phone number'
+      /^[\d\s\-\+\(\)]{5,}$/,
+      'Please enter a valid phone number'
     ),
 });
 
diff --git a/Frontend/src/validators/bookingValidator.ts b/Frontend/src/validators/bookingValidator.ts
index 945ac5d9..cdd06360 100644
--- a/Frontend/src/validators/bookingValidator.ts
+++ b/Frontend/src/validators/bookingValidator.ts
@@ -55,8 +55,8 @@ export const bookingValidationSchema = yup.object().shape({
     .string()
     .required('Please enter phone number')
     .matches(
-      /^[0-9]{10,11}$/,
-      'Phone number must have 10-11 digits'
+      /^[\d\s\-\+\(\)]{5,}$/,
+      'Please enter a valid phone number'
     ),
 });